/* Mini-jogo — Memória do Cinema */

.game-page{
    --game-ink: #3d2f48;
    --tile-lilac: #9a76ae;
    --tile-lilac-deep: #6f547f;
    --tile-cream: #f8f2fb;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.game-page > header,
.game-page > footer{
    flex-shrink: 0;
}

.game-page .navbar{
    padding: .35rem 0;
}

.game-page .navbar .nav-inner{
    padding: .35rem .55rem;
}

.game-page .navbar .logo{
    font-size: 1.25rem;
}

.game-page > footer .container{
    padding: .55rem 1rem;
    font-size: .82rem;
}

.game-shell{
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.container.game-main{
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: .35rem .85rem .7rem !important;
}

.game-intro{
    text-align: center;
    margin-bottom: .35rem;
    flex-shrink: 0;
}

.game-intro .band-kicker{
    margin-bottom: .1rem;
    font-size: .68rem;
}

.game-intro .display-title{
    margin-bottom: 0 !important;
    font-size: clamp(1.3rem, 5vw, 1.75rem) !important;
    line-height: 1.15;
}

.game-intro-copy{
    display: none;
    max-width: 38ch;
    margin: .25rem auto 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45;
}

.game-controls{
    display: flex;
    align-items: stretch;
    gap: .4rem;
    margin-bottom: .5rem;
    flex-shrink: 0;
}

.game-hud{
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
    margin: 0;
}

.game-stat{
    text-align: center;
    padding: .3rem .2rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(205,180,219,0.45);
    box-shadow: 0 4px 12px rgba(109,89,123,0.06);
}

.game-stat span{
    display: block;
    font-family: var(--display);
    font-size: clamp(.95rem, 3.2vw, 1.2rem);
    color: var(--game-ink);
    font-weight: 600;
    line-height: 1.1;
}

.game-stat small{
    display: block;
    margin-top: .1rem;
    font-size: .58rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

#game-restart{
    min-height: 0;
    padding: .35rem .7rem;
    font-size: .78rem;
    white-space: nowrap;
}

.btn-outline{
    background: transparent;
    color: #665673;
    border: 1px solid rgba(205,180,219,0.65);
}

.btn-outline:hover{
    background: rgba(205,180,219,0.14);
    color: #584867;
}

/* Tabuleiro 4x4 — tamanho pelo width + aspect-ratio (evita height % = 0 no flex) */
.memory-board{
    width: min(100%, 28rem, 72svh);
    aspect-ratio: 1 / 1;
    height: auto;
    max-height: 72svh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: .4rem;
    flex-shrink: 0;
    user-select: none;
    touch-action: manipulation;
}

/* Cada carta = um card quadrado sólido */
.memory-tile{
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 2px solid var(--tile-lilac-deep);
    border-radius: 12px;
    background: linear-gradient(160deg, #c4a0d4 0%, var(--tile-lilac) 45%, #7a5a8c 100%);
    box-shadow:
        0 6px 14px rgba(61, 47, 72, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.28);
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    font: inherit;
    color: inherit;
}

.memory-tile:focus-visible{
    outline: 2px solid rgba(155,122,173,0.7);
    outline-offset: 2px;
}

.memory-tile:disabled{
    cursor: default;
}

.tile-face{
    position: absolute;
    inset: 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-sizing: border-box;
    transition: opacity .18s ease;
}

/* Verso: plaquinha clara preenchendo o miolo do card */
.tile-back{
    background: var(--tile-cream);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(45, 28, 58, 0.14);
    color: var(--tile-lilac-deep);
    font-family: 'Great Vibes', cursive;
    font-size: clamp(1.1rem, 5.5vw, 1.7rem);
    letter-spacing: .04em;
    line-height: 1;
    opacity: 1;
    z-index: 2;
}

/* Frente: ícone + nome */
.tile-front{
    background: #fff;
    border: 2px solid #e6d4ef;
    color: var(--game-ink);
    gap: .15rem;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

.tile-symbol{
    font-size: clamp(1.1rem, 6vw, 1.75rem);
    line-height: 1;
}

.tile-name{
    font-size: clamp(.45rem, 2.1vw, .68rem);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tile-lilac-deep);
    line-height: 1.1;
}

.memory-tile.is-open .tile-back,
.memory-tile.is-matched .tile-back{
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

.memory-tile.is-open .tile-front,
.memory-tile.is-matched .tile-front{
    opacity: 1;
    z-index: 2;
}

.memory-tile.is-matched{
    border-color: #8f6fa3;
    box-shadow:
        0 0 0 2px rgba(181,143,200,0.45),
        0 6px 14px rgba(61, 47, 72, 0.18);
}

.memory-tile.is-miss{
    animation: tileShake .35s ease;
}

@keyframes tileShake{
    0%, 100%{ transform: translateX(0); }
    25%{ transform: translateX(-3px); }
    75%{ transform: translateX(3px); }
}

.game-win{
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(45, 28, 58, 0.48);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
}

.game-win.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.game-win-card{
    width: min(100%, 420px);
    text-align: center;
    padding: 1.75rem 1.35rem 1.5rem;
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(205,180,219,0.35), transparent 60%),
        #fffafc;
    border: 1px solid rgba(205,180,219,0.4);
    box-shadow: 0 24px 60px rgba(45,28,58,0.22);
}

.game-win-card h2{
    font-family: var(--display);
    color: var(--game-ink);
    font-size: clamp(1.6rem, 5vw, 2rem);
    margin: .35rem 0 .5rem;
}

.game-win-card p{
    color: var(--muted);
    font-size: .98rem;
    line-height: 1.55;
    margin-bottom: 1.15rem;
}

.game-win-actions{
    display: grid;
    gap: .55rem;
}

.game-win-actions .btn{
    width: 100%;
    min-height: 46px;
}

.game-links{
    margin-top: .7rem;
    padding: .7rem .75rem;
    border-radius: 12px;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(205,180,219,0.45);
    box-shadow: 0 6px 16px rgba(109,89,123,0.06);
    flex-shrink: 0;
}

.game-links p{
    color: var(--muted);
    font-size: .8rem;
    margin-bottom: .5rem;
}

.game-links-row{
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: center;
}

.game-links-row .btn{
    min-height: 40px;
    padding: .5rem .85rem;
    font-size: .85rem;
}

@media (min-height: 780px){
    .game-intro-copy{
        display: block;
    }
    .memory-board{
        width: min(100%, 30rem, 74svh);
        max-height: 74svh;
    }
}

@media (max-height: 700px){
    .game-intro .band-kicker{
        display: none;
    }
    .memory-board{
        width: min(100%, 68svh);
        max-height: 68svh;
    }
    .tile-face{
        inset: 7%;
    }
}

@media (prefers-reduced-motion: reduce){
    .tile-face,
    .game-win,
    .memory-tile.is-miss{
        transition: none;
        animation: none;
    }
}