/* ===================================================
   JOGO DA MEMÓRIA - CSS ISOLADO (SPA)
   =================================================== */

#memoria-app {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    font-family: 'Inter', sans-serif;
    --memoria-card-size: clamp(45px, 15vw, 120px);
}

/* Telas de Menu e Fim de Jogo Internas */
#memoria-app .memoria-overlay {
    position: absolute; inset: 0; z-index: 200;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 15px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 26px;
}

#memoria-app .memoria-card-info {
    background: white; border: 6px solid var(--azul-copa);
    border-radius: 30px; padding: 25px;
    max-width: 500px; width: 100%;
    box-shadow: 0 14px 30px rgba(0,0,0,0.18); margin: auto;
}

#memoria-app .opcoes-container {
    background: rgba(0, 39, 118, 0.05); border-radius: 20px;
    padding: 15px; margin-bottom: 15px; border: 2px dashed rgba(0, 39, 118, 0.2);
}

#memoria-app .titulo-secao { font-size: 1rem; color: var(--azul-copa); margin: 0 0 10px 0; font-weight: 800; }
#memoria-app .grid-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 15px; }
#memoria-app .grid-botoes.tres { grid-template-columns: 1fr 1fr 1fr; margin-bottom: 0; }

#memoria-app .btn-opcao {
    background: white; border: 3px solid #eee; border-radius: 12px;
    padding: 8px 4px; font-weight: bold; font-size: 0.90rem;
    cursor: pointer; color: #555; transition: 0.2s;
}
#memoria-app .btn-opcao.ativo { border-color: var(--verde-copa); background: #e8f5e9; color: var(--verde-copa); transform: scale(1.05); }
#memoria-app .btn-opcao.modo-ativo { border-color: var(--azul-copa); background: #e8f0fe; color: var(--azul-copa); transform: scale(1.05); }

#memoria-app .btn-dif {
    display: block; width: 100%; padding: 12px; margin: 8px 0; border: none; border-radius: 15px;
    color: white; font-size: 1.1rem; font-weight: bold; cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,0.12);
}
#memoria-app .btn-dif:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,0.12); }
#memoria-app .btn-verde { background: var(--verde-copa); } 
#memoria-app .btn-amarelo { background: #e6c200; color: #002776; } 
#memoria-app .btn-azul { background: var(--azul-copa); }

/* Topo do Jogo */
#memoria-app .memoria-topo {
    width: 100%; padding: 10px 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 15px;
}
#memoria-app .area-progresso { justify-self: center; display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 250px; }
#memoria-app .texto-progresso { font-size: 0.85rem; font-weight: bold; color: var(--azul-copa); margin-bottom: 4px; }
#memoria-app .progresso-container { width: 100%; max-width: 300px; height: 18px; background-color: #e1e8ed; border-radius: 20px; overflow: hidden; }
#memoria-app .progresso-barra { height: 100%; width: 0%; background: var(--verde-copa); border-radius: 20px; transition: width 0.5s; }
#memoria-app .progresso-barra.urgente { background: red; animation: piscar 1s infinite; }

@keyframes piscar { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Grid de Cartas */
#memoria-app .grid-memoria {
    display: grid; gap: 10px; perspective: 1000px; justify-content: center;
    grid-template-columns: repeat(var(--cols), var(--memoria-card-size));
    grid-auto-rows: var(--memoria-card-size);
}

#memoria-app .carta {
    position: relative; transform-style: preserve-3d; transition: transform 0.4s;
    cursor: pointer; border-radius: 12px; width: 100%; height: 100%;
}
#memoria-app .carta.virada { transform: rotateY(180deg); }
#memoria-app .carta.combinada { cursor: default; }

#memoria-app .face {
    position: absolute; inset: 0; backface-visibility: hidden; display: flex; justify-content: center;
    align-items: center; font-size: 2.5rem; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
#memoria-app .face.costas {
    background: linear-gradient(135deg, var(--azul-copa), #0044cc);
    border: 3px solid var(--amarelo-copa);
}
#memoria-app .face.costas img { width: 50%; object-fit: contain; }
#memoria-app .face.frente { background: white; transform: rotateY(180deg); border: 3px solid var(--azul-copa); }
#memoria-app .face.frente img { width: 70%; height: 70%; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

#memoria-app .carta.combinada .face.frente { border-color: var(--verde-copa); background: #e8f5e9; }
#memoria-app .carta.combinada.carta-acerto-3d .face.frente { 
    animation: acerto3D 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
@keyframes acerto3D {
    0% { transform: rotateY(180deg) scale(1) translateZ(0); filter: brightness(1); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
    40% { transform: rotateY(180deg) scale(1.15) translateZ(30px); filter: brightness(1.3); box-shadow: 0 15px 30px rgba(255, 215, 0, 0.6); border-color: var(--amarelo-copa); }
    100% { transform: rotateY(180deg) scale(1) translateZ(0); filter: brightness(1); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
}

#memoria-app .carta.erro { animation: shake 320ms ease; }
@keyframes shake {
    0%, 100% { transform: rotateY(180deg) translateX(0); }
    25% { transform: rotateY(180deg) translateX(-5px); }
    75% { transform: rotateY(180deg) translateX(5px); }
}

/* Status Inferior e Estrelas */
#memoria-app .status-inferior {
    display: flex; gap: 20px; margin-top: 20px; background: white;
    padding: 10px 24px; border-radius: 20px; font-weight: bold; font-size: 1.1rem; color: var(--azul-copa); border: 2px solid var(--amarelo-copa); justify-content: center;
}
#memoria-app .status-inferior span { color: #333; }
#memoria-app .estrelas-container { display: flex; justify-content: center; gap: 10px; margin: 15px 0; font-size: 3rem; }
#memoria-app .estrela { color: #ddd; transition: 0.5s; }
#memoria-app .estrela.ganha { color: var(--amarelo-copa); transform: scale(1.2) rotate(15deg); }

/* Responsivo Mobile para a Memória */
@media (max-width: 768px) {
    #memoria-app .memoria-topo {
        margin-top: 0;
        margin-bottom: 10px;
        align-self: center;
        max-width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }
    #memoria-app .grid-memoria { gap: 6px; }
}

@media (max-width: 500px) {
    #memoria-app .memoria-topo { flex-direction: column; text-align: center; }
    #memoria-app .grid-memoria { gap: 6px; }
}

/* Ajuste para telas de notebook com resolução baixa (ex: 1366x768) para não cortar embaixo */
@media (max-height: 850px) and (min-width: 769px) {
    #memoria-app {
        --memoria-card-size: clamp(45px, 12vh, 95px);
    }
}

/* --- CONFETES DE VITÓRIA (Memória) --- */
.memoria-confete {
  position: fixed;
  top: -20px;
  width: 12px;
  height: 12px;
  z-index: 99999;
  border-radius: 2px;
  animation: cairConfeteMemoria linear forwards;
  pointer-events: none;
}
@keyframes cairConfeteMemoria {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* --- TOPO DA MEMORIA (Lado a lado com Voltar) --- */
#memoria-app .memoria-topo {
    align-self: flex-end;
    margin-top: -72px; /* Sobe para ficar na linha do botão voltar */
    margin-bottom: 20px;
    z-index: 10;
    width: calc(100% - 260px);
    max-width: none;
    padding: 8px 16px;
    display: flex;
    flex-direction: row;      /* IMPORTANTE: linha horizontal */
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.9);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 2px solid var(--azul-copa);
}

@keyframes vitoriaDance {
    0%, 100% { transform: scale(1) translateY(0) rotate(0deg); }
    25% { transform: scale(1.05) translateY(-8px) rotate(-4deg); }
    75% { transform: scale(1.05) translateY(-8px) rotate(4deg); }
}