/* CSS compartilhado para jogos de memória v2 */
:root { --primary: #5e4fa2; --secondary: #e91e63; }
#gameWrapper {
    background:linear-gradient(135deg,#fff9f0,#f3eeff,#e8f4ff);
    border-radius:24px; box-shadow:0 8px 32px rgba(94,79,162,.15);
    padding:24px; position:relative; min-height:420px; margin-bottom:24px;
}
.btn-fullscreen { position:absolute; top:12px; right:12px; background:transparent; border:2px solid var(--primary); color:var(--primary); border-radius:8px; width:36px; height:36px; cursor:pointer; font-size:18px; z-index:10; transition:transform .2s; }
.btn-fullscreen:hover { transform:scale(1.15); }
.game-instruction { text-align:center; color:var(--primary); font-size:18px; font-weight:600; background:rgba(94,79,162,.08); border-radius:12px; padding:10px 16px; margin-bottom:16px; }
.progress-bar { display:flex; gap:14px; justify-content:center; margin-bottom:20px; }
.progress-dot { width:14px; height:14px; border-radius:50%; background:#ddd; transition:all .3s; }
.progress-dot.done { background:#4caf50; }
.progress-dot.active { background:var(--primary); transform:scale(1.5); }
.feedback-msg { text-align:center; font-size:20px; font-weight:bold; min-height:32px; margin-top:10px; }
.feedback-correct { color:#4caf50; } .feedback-wrong { color:#e53935; }

/* Memory grid */
.memory-grid { display:grid; gap:12px; justify-content:center; margin:0 auto; }
.memory-card { perspective:600px; cursor:pointer; }
.card-inner { position:relative; width:100%; height:100%; transition:transform .5s; transform-style:preserve-3d; }
.memory-card.flipped .card-inner { transform:rotateY(180deg); }
.card-front, .card-back { position:absolute; inset:0; border-radius:12px; backface-visibility:hidden; display:flex; align-items:center; justify-content:center; }
.card-front { background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; font-size:28px; font-weight:bold; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.card-back { background:#fff; transform:rotateY(180deg); border:3px solid var(--primary); box-shadow:0 4px 12px rgba(0,0,0,.15); }
.card-back img { width:80%; height:80%; object-fit:contain; border-radius:8px; }
.card-back .card-letter { font-size:clamp(24px,5vw,48px); font-weight:bold; color:var(--primary); }
.card-back .card-emoji { font-size:clamp(28px,6vw,52px); }
.memory-card.matched .card-inner { animation:popBig .4s ease; }
.memory-card.matched .card-back { border-color:#4caf50; background:#f1fff1; }
.memory-card.matched .card-front { background:linear-gradient(135deg,#43a047,#66bb6a); }

/* Victory */
#victoryScreen { display:none; position:absolute; inset:0; background:linear-gradient(135deg,#f3eeff,#fff9f0); border-radius:24px; flex-direction:column; align-items:center; justify-content:center; z-index:20; }
.victory-content { text-align:center; z-index:1; }
.victory-trophy { font-size:72px; animation:trophyBounce 1s ease infinite alternate; }
#starsRow { font-size:42px; animation:starsIn .8s ease; }
.btn-play-again { background:linear-gradient(135deg,var(--secondary),var(--primary)); color:#fff; border:none; border-radius:50px; padding:14px 32px; font-size:18px; font-weight:bold; cursor:pointer; margin-top:16px; transition:transform .2s; }
.btn-play-again:hover { transform:scale(1.05); }
#confettiContainer { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.confetti-piece { position:absolute; width:10px; height:10px; border-radius:2px; animation:confettiFall linear forwards; }

/* Game info */
.game-stats { display:flex; gap:20px; justify-content:center; margin-bottom:16px; font-size:16px; font-weight:600; color:#333; }
.game-stats span { background:rgba(94,79,162,.1); border-radius:10px; padding:6px 14px; }

@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
@keyframes popBig { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }
@keyframes trophyBounce { from{transform:translateY(0)} to{transform:translateY(-16px)} }
@keyframes starsIn { from{opacity:0;transform:scale(.5)} to{opacity:1;transform:scale(1)} }
@keyframes confettiFall { from{transform:translateY(-20px) rotate(0deg);opacity:1} to{transform:translateY(500px) rotate(360deg);opacity:0} }
@media(max-width:480px) { .memory-grid{gap:8px;} }

/* Tabela de correlação Libras — dentro do jogo */
.libras-ref {
    margin-top: 18px;
    padding: 12px 10px 8px;
    background: rgba(94,79,162,.06);
    border: 1px solid rgba(94,79,162,.15);
    border-radius: 14px;
}
.libras-ref-title {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: .8;
}
.libras-table {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}
.libras-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1.5px solid rgba(94,79,162,.18);
    border-radius: 10px;
    padding: 6px 4px;
    text-align: center;
    min-width: 0;
    transition: transform .2s, box-shadow .2s;
}
.libras-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(94,79,162,.18); }
.libras-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    object-fit: contain;
    border-radius: 6px;
    margin-bottom: 4px;
    display: block;
}
.libras-letter {
    font-size: clamp(14px, 3.5vw, 24px);
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}
@media (max-width: 480px) {
    .libras-table { gap: 4px; }
    .libras-ref { padding: 8px 6px 6px; }
    .libras-card { padding: 4px 2px; border-radius: 8px; }
}