/* =====================================================
   memory-game.css — Jogo da Memória
   Requer: Google Fonts Nunito + Space Mono
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Nunito:wght@600;800&display=swap');

/* ---------- Container geral ---------- */
.memory-game-wrap {
    font-family: 'Nunito', sans-serif;
    padding: 0.75rem 0.5rem 1rem;
    max-width: 460px;
    margin: 0 auto;
}

/* ---------- Cabeçalho ---------- */
.memory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 8px;
}

.memory-title {
    font-size: 20px;
    font-weight: 800;
    color: #222;
    letter-spacing: -0.3px;
}

.memory-title span {
    color: #1D9E75;
}

/* ---------- Estatísticas ---------- */
.memory-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.memory-stat-pill {
    background: #f4f4f2;
    border: 0.5px solid #d0cfc8;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
}

.memory-stat-pill .val {
    color: #111;
    font-weight: 800;
    font-family: 'Space Mono', monospace;
}

/* ---------- Botão voltar às categorias ---------- */
.memory-btn-back-group {
    background: transparent;
    border: 0.5px solid #aaa;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    color: #666;
    cursor: pointer;
    transition: background 0.15s;
    order: -1;
    width: 100%;
    text-align: left;
}

.memory-btn-back-group:hover {
    background: #f0f0ee;
    color: #222;
}

/* ---------- Botão reiniciar ---------- */
.memory-btn-restart {
    background: transparent;
    border: 0.5px solid #aaa;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    color: #222;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s;
}

.memory-btn-restart:hover {
    background: #f0f0ee;
}

/* ---------- Botão de música ambiente (opt-in via MEMORY_MUSIC) ---------- */
.memory-btn-music {
    background: transparent;
    border: 0.5px solid #aaa;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    color: #222;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.memory-btn-music:hover {
    background: #f0f0ee;
}

.memory-btn-music.is-on {
    background: #EAF6F0;
    border-color: #1D9E75;
    color: #0F6E56;
}

.memory-btn-music-next {
    background: transparent;
    border: 0.5px solid #aaa;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s;
}

.memory-btn-music-next:hover {
    background: #f0f0ee;
}

/* ---------- Prévia inicial (memorizar antes de começar) ---------- */
.memory-preview-msg {
    display: none;
    margin-bottom: 0.75rem;
    background: #FFF6DD;
    border: 1px solid #F0C75E;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #8A6512;
}

.memory-preview-msg.show {
    display: block;
}


.memory-board.preview .memory-card-slot {
    cursor: default;
}

/* ---------- Tabuleiro ---------- */
.memory-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

/* Mobile: 4 colunas (igual ao desktop) — cabe o tabuleiro inteiro
   sem rolar, principalmente girando o celular pra paisagem */
@media (max-width: 500px) {
    .memory-board {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .memory-title {
        font-size: 14px;
    }

    .memory-stat-pill {
        font-size: 12px;
        padding: 3px 10px;
    }
}

/* ---------- Carta: estrutura 3D ---------- */
.memory-card-slot {
    aspect-ratio: 1;
    perspective: 600px;
    cursor: pointer;
}

.memory-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.45s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

/* Virada pelo clique ou par encontrado */
.memory-card-slot.flipped  .memory-card-inner,
.memory-card-slot.matched  .memory-card-inner {
    transform: rotateY(180deg);
}

/* ---------- Faces da carta ---------- */
.memory-card-face {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    padding: 4px;
}

/* Verso (frente fechada) */
.memory-card-back {
    background: #1D9E75;
    border: 2px solid #0F6E56;
}

.memory-card-back svg {
    width: 36%;
    opacity: 0.55;
}

/* Frente (face revelada) */
.memory-card-front {
    background: #fff;
    border: 1.5px solid #ccc;
    transform: rotateY(180deg);
    flex-direction: column;
    gap: 2px;
    text-align: center;
}

.memory-card-slot.matched .memory-card-front {
    /* background-color (não o shorthand "background") — o shorthand
       reseta background-size/position/repeat, o que fazia a bandeira
       de fundo (.has-flag) "ladrilhar"/duplicar dentro da carta
       quando o par era encontrado */
    background-color: #EAF3DE;
    border-color: #639922;
}

/* Bandeira de fundo (opt-in via campo `flag` no par) — 100% visível,
   sem véu nenhum por cima; legibilidade do texto vem só do
   text-shadow (halo branco) nos elementos de texto logo abaixo.
   Os estados "par encontrado"/"errou" continuam sinalizados pela cor
   da borda (.matched/.wrong em .memory-card-front), não precisam
   escurecer a bandeira */
.memory-card-front.has-flag {
    background-image: var(--card-flag);
    background-size: cover;
    background-position: center;
}

.memory-card-front.has-flag .memory-card-label,
.memory-card-front.has-flag .memory-card-group {
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 8px #fff, 0 1px 3px rgba(255,255,255,0.95);
}

.memory-card-front.has-flag .memory-card-emoji {
    filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 4px #fff);
}

/* ---------- Animação de erro ---------- */
.memory-card-slot.wrong .memory-card-inner {
    animation: mg-shake 0.45s ease;
}

.memory-card-slot.wrong .memory-card-front {
    /* mesmo motivo do estado .matched acima: background-color, não o shorthand */
    background-color: #FCEBEB;
    border-color: #E24B4A;
}

@keyframes mg-shake {
    0%   { transform: rotateY(180deg) translateX(0); }
    20%  { transform: rotateY(180deg) translateX(-5px); }
    40%  { transform: rotateY(180deg) translateX(5px); }
    60%  { transform: rotateY(180deg) translateX(-4px); }
    80%  { transform: rotateY(180deg) translateX(4px); }
    100% { transform: rotateY(180deg) translateX(0); }
}

/* ---------- Conteúdo da frente ---------- */
.memory-card-emoji {
    font-size: 17px;
    line-height: 1;
}

.memory-card-label {
    font-size: 12px;
    font-weight: 800;
    color: #111;
    line-height: 1.2;
    word-break: break-word;
    hyphens: auto;
}

.memory-card-slot.matched .memory-card-label {
    color: #3B6D11;
}

.memory-card-group {
    font-size: 8px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.memory-card-slot.matched .memory-card-group {
    color: #639922;
}

/* Mobile: ajusta tamanho do texto nas cartas (4 colunas = cartas menores) */
@media (max-width: 500px) {
    .memory-card-emoji  { font-size: 15px; }
    .memory-card-label  { font-size: 10px; }
    .memory-card-group  { font-size: 7px; }
    .memory-card-face   { padding: 3px; gap: 1px; }
    .memory-card-back svg { width: 34%; }
}

/* Paisagem no celular: tela mais larga que alta, dá pra crescer um
   pouco o texto de novo sem perder linha nenhuma */
@media (max-width: 900px) and (orientation: landscape) {
    .memory-card-emoji  { font-size: 20px; }
    .memory-card-label  { font-size: 12px; }
    .memory-card-group  { font-size: 8px; }
}

/* ---------- Banner de vitória ---------- */
.memory-win-banner {
    display: none;
    margin-top: 1.25rem;
    background: #EAF3DE;
    border: 1px solid #97C459;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    text-align: center;
}

.memory-win-banner.show {
    display: block;
}

.memory-win-banner p {
    font-size: 14px;
    font-weight: 700;
    color: #3B6D11;
    margin-top: 4px;
}

.memory-win-banner .memory-win-big {
    font-size: 26px;
}

/* ---------- Legenda de categorias ---------- */
.memory-legend {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.memory-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    background: #f4f4f2;
    border-radius: 6px;
    padding: 3px 8px;
}

.memory-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---------- Seleção de categoria ---------- */
.memory-group-subtitle {
    font-size: 14px;
    font-weight: 700;
    color: #666;
    margin: 0 0 0.85rem;
}

.memory-group-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.memory-group-card {
    background: #fff;
    border: 1.5px solid #ddd;
    border-left: 6px solid var(--group-color, #1D9E75);
    border-radius: 12px;
    padding: 14px 16px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'Nunito', sans-serif;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.memory-group-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--group-color, #1D9E75);
}

.memory-group-name {
    font-size: 15px;
    font-weight: 800;
    color: #222;
}

.memory-group-count {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    font-family: 'Space Mono', monospace;
}

.memory-group-card--random {
    grid-column: 1 / -1;
    border-left-width: 6px;
    border-style: dashed;
    border-color: #c2185b;
    background: linear-gradient(135deg, rgba(194,24,91,0.06), rgba(194,24,91,0));
}

.memory-group-card--random:hover {
    border-color: #c2185b;
    box-shadow: 0 4px 12px rgba(194,24,91,0.18);
}

.memory-group-card--random .memory-group-name {
    color: #c2185b;
}

@media (max-width: 500px) {
    .memory-group-grid {
        grid-template-columns: 1fr;
    }
}