/* ============================================================
   Tabuleiro, gemas 3D, especiais, efeitos, HUD, minijogos, cutscenes
   ============================================================ */
.game{flex:1;display:flex;flex-direction:column;background:linear-gradient(160deg,var(--bg1),var(--bg2));overflow:hidden;position:relative}
.game>*:not(.scene){position:relative;z-index:1}
/* fundo com cenário dos filmes da EIA (desfocado + tingido) */
.scene{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  filter:blur(5px) brightness(.82) saturate(1.15);transform:scale(1.14);
  animation:sceneDrift 26s ease-in-out infinite alternate}
.scene::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.08) 40%,rgba(0,0,0,.4));}
/* cenário vivo: partículas a flutuar */
.scene-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.scene-fx i{position:absolute;bottom:-8%;font-style:normal;opacity:0;animation:sceneFloat linear infinite;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
@keyframes sceneFloat{0%{transform:translateY(0) translateX(0) rotate(0);opacity:0}10%{opacity:.7}90%{opacity:.5}100%{transform:translateY(-118vh) translateX(18px) rotate(40deg);opacity:0}}
.game-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 14px 12px 14px;padding-right:calc(48px + env(safe-area-inset-right))}
/* linha de explicação do objetivo do nível (sempre visível durante o jogo) */
.objective{margin:2px auto 0;max-width:520px;width:100%;padding:0 16px;text-align:center;font-weight:700;font-size:.92rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);display:flex;gap:6px;align-items:center;justify-content:center}
.objective b{color:var(--amber)}
/* banner do patrocinador dentro do nível */
.sponsor-banner{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:8px;margin:2px auto 0;max-width:520px;width:calc(100% - 24px);
  background:rgba(255,255,255,.92);border:2px solid var(--sc,#2E9E5B);border-radius:12px;padding:4px 10px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.sponsor-banner img{height:22px;max-width:90px;object-fit:contain}
.sponsor-banner span{font-weight:800;font-size:.74rem;color:#2d4658;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-stars{opacity:.95;font-weight:700;margin-left:6px;white-space:nowrap}
.goal-box{flex:1;background:rgba(255,255,255,.7);border-radius:16px;padding:8px 14px;box-shadow:var(--shadow);font-weight:700;font-size:.95rem}
.goal{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.goal-ico{width:30px;height:30px;display:inline-grid;place-items:center}
.goal-ico svg{width:100%;height:100%}
.goal-char{width:34px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.goal .bar{flex:1;min-width:80px;height:12px;background:rgba(0,0,0,.12);border-radius:999px;overflow:hidden}
.goal .bar i{display:block;height:100%;background:linear-gradient(90deg,#ffd24d,var(--amber));transition:width .4s;border-radius:999px}
.goal .bar.hp i{background:linear-gradient(90deg,#ff6b6b,#c0392b)}
.moves-box{background:#fff;border-radius:16px;padding:6px 16px;text-align:center;box-shadow:var(--shadow);font-weight:800}
.moves-box span{font-size:1.6rem;color:var(--green);display:block;line-height:1}
.moves-box small{font-size:.65rem;opacity:.7;text-transform:uppercase}
.moves-box.low-moves span{color:#e23b3b;animation:flashRed 1s infinite}
/* últimas jogadas/segundos: PISCAR (flash) a caixa toda */
.moves-box.low-moves{animation:boxBlink .55s steps(1,end) infinite}
@keyframes boxBlink{0%,100%{background:#fff;box-shadow:var(--shadow)}50%{background:#ffd6d6;box-shadow:0 0 16px 3px rgba(226,59,59,.9)}}
/* marco visual aos 30s/20s */
.moves-box.time-mark{animation:timeMark .65s ease-out}
@keyframes timeMark{0%{transform:scale(1)}30%{transform:scale(1.18);background:#fff3c4;box-shadow:0 0 16px rgba(255,179,0,.9)}100%{transform:scale(1)}}
/* HUD pontuação + barra de estrelas (estilo Candy Crush) */
.hud-score{display:flex;flex-direction:column;align-items:center;gap:5px;padding:2px 16px 6px;max-width:520px;width:100%;margin:0 auto}
.score-line{display:flex;align-items:center;gap:8px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.score-line span{font-size:.8rem;opacity:.85;text-transform:uppercase;letter-spacing:.5px}
.score-line b{font-size:1.5rem;display:inline-block}
.star-bar{width:100%}
.sb-track{position:relative;height:14px;background:rgba(0,0,0,.32);border-radius:999px;box-shadow:inset 0 2px 4px rgba(0,0,0,.4);overflow:visible;border:1px solid rgba(255,255,255,.25)}
.sb-fill{position:absolute;left:0;top:0;height:100%;border-radius:999px;background:linear-gradient(90deg,#ffe24d,#ff9d2e);transition:width .4s;box-shadow:0 0 8px rgba(255,200,60,.7)}
.sb-star{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:1.15rem;color:#5a5a5a;text-shadow:0 1px 2px rgba(0,0,0,.5);z-index:2;transition:color .3s,transform .3s}
.sb-star.on{color:#ffd24d;text-shadow:0 0 8px #ffd24d,0 1px 2px rgba(0,0,0,.6);transform:translate(-50%,-50%) scale(1.25)}

/* controlos flutuantes (áudio 3 estados + menu) */
#fab{position:fixed;top:calc(7px + env(safe-area-inset-top));right:calc(7px + env(safe-area-inset-right));z-index:500;display:flex;flex-direction:column;gap:6px}
#fab button{width:33px;height:33px;border:none;border-radius:50%;background:rgba(255,255,255,.8);box-shadow:0 2px 6px rgba(0,0,0,.22);font-size:.95rem;cursor:pointer;display:grid;place-items:center;transition:transform .1s}
#fab button:active{transform:scale(.9)}

/* festa final */
.screen-finale{align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#1b6e4f,#0a2233);overflow:hidden}
.finale{position:relative;text-align:center;padding:24px;max-width:520px;z-index:1}
.finale-rays{position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(255,255,255,.12) 0 12deg,transparent 12deg 30deg);animation:spinSlow 18s linear infinite;z-index:-1}
.finale-title{font-size:clamp(2.2rem,9vw,3.4rem);color:#ffd24d;text-shadow:0 4px 0 #c98800,0 8px 18px rgba(0,0,0,.4);margin:.1em 0}
.finale-heroes{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin:14px 0}
.finale-heroes img{width:clamp(48px,15vw,82px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)) drop-shadow(0 0 16px var(--g));animation:bounceIn .6s backwards,bobble 2s ease-in-out infinite .6s}
.finale-sub{color:#fff;font-weight:700;font-size:1.15rem;margin:.3em auto;max-width:28ch}
.finale-reward{color:#ffe08a;font-weight:800;font-size:1.3rem;margin:.4em 0 1em}

/* ---- Board ---- */
/* Sem flex:1 → o board-wrap NÃO cresce. Assim não há espaço flexível entre o
   tabuleiro e os botões; TODO o espaço livre do viewport dinâmico (barra do
   browser) vai para o FUNDO, abaixo do rodapé, onde não se vê mexer.
   Resultado: tabuleiro, botões e dica ficam todos ancorados ao topo e estáveis. */
.board-wrap{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:center;padding:6px 10px 4px}
.board{
  position:relative;width:min(94vw,520px);aspect-ratio:var(--cols)/var(--rows);
  background:linear-gradient(160deg,rgba(20,40,60,.28),rgba(10,20,30,.4));
  border:3px solid color-mix(in srgb, var(--hero-glow,#ffd24d) 55%, rgba(255,255,255,.3));border-radius:22px;
  box-shadow:inset 0 4px 18px rgba(0,0,0,.4),0 12px 28px rgba(0,0,0,.25),0 0 22px -2px var(--hero-glow,transparent);
  padding:0;overflow:hidden;touch-action:none;
  background-image:linear-gradient(160deg,rgba(20,40,60,.28),rgba(10,20,30,.4)),
    repeating-linear-gradient(90deg,transparent,transparent calc(100%/var(--cols) - 1px),rgba(255,255,255,.05) calc(100%/var(--cols))),
    repeating-linear-gradient(0deg,transparent,transparent calc(100%/var(--rows) - 1px),rgba(255,255,255,.05) calc(100%/var(--rows)));
}

/* ---- PEÇA DO PATROCINADOR (logo, combina como as outras) ---- */
.gem .gem-ico .spo-ico{width:78%;height:78%;object-fit:contain;border-radius:6px;background:#fff;padding:2px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.goal-spo{width:24px;height:24px;object-fit:contain;background:#fff;border-radius:5px;padding:1px;vertical-align:middle}

/* ---- MODO FEBRE ---- */
.fever-bar{position:relative;width:100%;height:9px;margin-top:5px;background:rgba(0,0,0,.32);border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.2)}
.fever-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#ff8a3d,#ff3d6e,#ffd24d);background-size:200% 100%;transition:width .25s ease-out;animation:feverSlide 1s linear infinite}
.fever-bar .fever-txt{position:absolute;inset:0;display:grid;place-items:center;font-size:.5rem;font-weight:900;color:#fff;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.7);opacity:.85}
.fever-bar.on{box-shadow:0 0 12px 2px rgba(255,90,60,.8)}
.fever-bar.on i{width:100%!important}
@keyframes feverSlide{to{background-position:200% 0}}
.fever-on{position:absolute;inset:0;z-index:70;pointer-events:none}
.fever-on .fever-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(255,90,60,.22),transparent 65%);animation:feverPulse 1s ease-in-out infinite}
.fever-on .fever-label{position:absolute;top:14%;left:50%;transform:translateX(-50%);font-family:var(--font);font-weight:900;font-size:1.8rem;color:#fff;text-shadow:0 0 16px #ff5a3c,0 2px 6px rgba(0,0,0,.6);animation:multPop .6s cubic-bezier(.2,1.7,.4,1)}
/* ⚡ Bateria / Onda de Energia (energia limpa) */
.batt-bar{position:relative;width:100%;height:9px;margin-top:4px;background:rgba(0,0,0,.32);border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.2)}
.batt-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#36d1ff,#7CFFB2,#ffd24d);background-size:200% 100%;transition:width .25s ease-out;animation:feverSlide 1s linear infinite}
.batt-bar .batt-txt{position:absolute;inset:0;display:grid;place-items:center;font-size:.5rem;font-weight:900;color:#fff;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.7);opacity:.85}
.batt-bar.full{box-shadow:0 0 12px 2px rgba(54,209,255,.85);animation:battFull .6s ease-in-out infinite}
@keyframes battFull{0%,100%{box-shadow:0 0 8px 1px rgba(54,209,255,.6)}50%{box-shadow:0 0 16px 3px rgba(124,255,178,.95)}}
.surge-on{position:absolute;inset:0;z-index:72;pointer-events:none}
.surge-on.out{opacity:0;transition:opacity .3s}
.surge-on .surge-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,rgba(54,209,255,.30),rgba(124,255,178,.12) 45%,transparent 70%);animation:surgePulse .9s ease-out}
.surge-on .surge-label{position:absolute;top:30%;left:50%;transform:translateX(-50%);font-family:var(--font);font-weight:900;font-size:2rem;color:#fff;white-space:nowrap;text-shadow:0 0 18px #36d1ff,0 0 8px #7CFFB2,0 2px 6px rgba(0,0,0,.6);animation:multPop .6s cubic-bezier(.2,1.7,.4,1)}
@keyframes surgePulse{0%{opacity:0;transform:scale(.85)}30%{opacity:1}100%{opacity:.4;transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.batt-bar i,.batt-bar.full,.surge-on .surge-flash{animation:none}}
/* ⚔️ Duelo do Chefe (vs bot) */
.duel-hud{position:relative;z-index:6;margin:2px 8px 0;display:flex;justify-content:center}
.duel-vs{display:flex;align-items:center;gap:8px;width:100%;max-width:520px;background:rgba(8,14,30,.42);border-radius:14px;padding:5px 10px;backdrop-filter:blur(2px)}
.dv-side{display:flex;align-items:center;gap:5px;font-family:var(--font)}
.dv-side img{width:30px;height:30px;object-fit:contain;border-radius:50%;background:rgba(255,255,255,.18)}
.dv-side .dv-name{font-size:.7rem;font-weight:800;color:#fff;opacity:.85}
.dv-side b{font-size:1rem;color:#fff;min-width:38px;text-align:center}
.dv-side.foe{flex-direction:row-reverse}
.dv-mid{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.dv-mid .dv-x{font-size:.9rem}
.dv-race{width:100%;max-width:200px;height:8px;border-radius:999px;overflow:hidden;background:var(--foe,#5A1E9C)}
.dv-race i{display:block;height:100%;width:50%;border-radius:999px;transition:width .3s ease-out}
/* arena: O TEU tabuleiro + o do BOSS lado a lado (iguais), ambos com cabeçalho (avatar + nome) */
.duel-arena{display:flex;gap:8px;align-items:flex-start;justify-content:center;width:100%;max-width:740px;margin:0 auto;padding:4px 6px 2px;flex:0 0 auto}
.duel-side{position:relative;flex:1 1 0;min-width:0;max-width:50%;display:flex;flex-direction:column;align-items:center}
/* 💬 boca do Boss (balão de provocação) — texto grande, entra com bounce, sai a voar */
.duel-taunt{position:absolute;top:54%;left:50%;transform:translate(-50%,-50%) scale(.45);z-index:11;max-width:92%;background:#2a1233;color:#ffe1f4;font-family:var(--font);font-weight:900;font-size:clamp(1rem,4.4vw,1.6rem);line-height:1.12;padding:10px 16px;border-radius:16px;border:3px solid #ce93fa;box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 20px rgba(206,147,250,.6);text-align:center;opacity:0;transition:opacity .2s ease,transform .45s cubic-bezier(.2,1.8,.4,1);pointer-events:none;text-shadow:0 2px 4px rgba(0,0,0,.55)}
.duel-taunt.in{opacity:1;transform:translate(-50%,-50%) scale(1);animation:tauntWobble 1.4s ease-in-out .45s infinite}
.duel-taunt.shatter{opacity:0;transform:translate(-50%,-50%) scale(1.35);transition:opacity .16s ease,transform .16s ease}
@keyframes tauntWobble{0%,100%{rotate:-3deg}50%{rotate:3deg}}
/* estilhaços quando a boca rebenta */
.taunt-shard{position:fixed;z-index:12;width:11px;height:11px;border-radius:2px;background:#ce93fa;box-shadow:0 0 6px rgba(206,147,250,.75);pointer-events:none;transform:translate(-50%,-50%);transition:transform .55s cubic-bezier(.2,.6,.4,1),opacity .55s ease-in}
@media(prefers-reduced-motion:reduce){.duel-taunt.in{animation:none}.duel-taunt{transition:opacity .2s}.taunt-shard{transition:opacity .3s}}
/* ⚔️ Desafio Online (PvP Beta) */
.duel-card .hc-img.duel-ic{display:grid;place-items:center;font-size:2.1rem;background:radial-gradient(circle at 40% 30%,#ffe082,#ff9800);position:relative}
.duel-beta{position:absolute;bottom:1px;right:1px;font-size:.46rem;font-weight:900;background:#0a1f3c;color:#ffd24d;padding:1px 4px;border-radius:6px;letter-spacing:.5px}
.lobby-row{display:flex;align-items:center;gap:9px;background:#fff;border-radius:14px;padding:8px 10px;margin:6px auto;max-width:430px;box-shadow:0 3px 10px rgba(0,0,0,.1)}
html.dark .lobby-row{background:#16242c;color:#e7eef0}
.lobby-av{width:38px;height:38px;object-fit:contain;border-radius:50%;background:rgba(0,0,0,.06);flex:0 0 auto}
.lobby-nick{flex:1;font-weight:800;font-family:var(--font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lobby-coins{font-weight:700;font-size:.78rem;color:#c8860a;white-space:nowrap}
/* 👥 AMIGOS */
.fr-add{display:flex;gap:8px;max-width:430px;margin:8px auto 4px;padding:0 4px}
.fr-add input{flex:1;border:2px solid rgba(0,0,0,.12);border-radius:999px;padding:9px 14px;font-size:.92rem;font-family:var(--font);background:#fff;color:#173}
html.dark .fr-add input{background:#16242c;color:#e7eef0;border-color:rgba(255,255,255,.15)}
.fr-add .btn{flex:0 0 auto}
.fr-row{display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:8px 11px;margin:6px auto;max-width:430px;box-shadow:0 3px 10px rgba(0,0,0,.1)}
html.dark .fr-row{background:#16242c;color:#e7eef0}
.fr-row.pend{border-left:4px solid var(--amber)}
.fr-row.pend.out{opacity:.7}
.fr-av{width:36px;height:36px;object-fit:contain;border-radius:50%;background:rgba(0,0,0,.06);flex:0 0 auto}
.fr-dot{width:9px;height:9px;border-radius:50%;background:#b6c2cc;flex:0 0 auto;margin-left:-14px;margin-top:22px;box-shadow:0 0 0 2px #fff}
.fr-dot.online{background:#33d27e;box-shadow:0 0 0 2px #fff,0 0 7px #33d27e}
.fr-nick{flex:1;font-weight:800;font-family:var(--font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-meta{font-size:.76rem;opacity:.7;white-space:nowrap}
.fr-row .btn{flex:0 0 auto;min-width:0;padding:6px 11px}
.fr-rm{background:rgba(0,0,0,.06)!important;color:#a44!important}
.friends-btn{background:linear-gradient(160deg,#7aa8ff,#4a6fd6)!important;color:#fff!important;position:relative}
/* ➕ adicionar amigo a partir do ranking */
.lb-row .lb-add{flex:0 0 auto;min-width:0;padding:4px 9px;margin-left:6px;background:linear-gradient(160deg,#7aa8ff,#4a6fd6)!important;color:#fff!important;font-size:.9rem}
.fr-badge{position:absolute;top:-6px;right:-6px;background:#e23b6d;color:#fff;border-radius:999px;min-width:18px;height:18px;padding:0 4px;font-size:.7rem;font-weight:900;display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.4)}
/* 📊 painel admin — estatísticas betatesters */
.bs-cards{display:flex;gap:8px;max-width:460px;margin:0 auto 10px}
.bs-card{flex:1;background:#fff;border-radius:12px;padding:9px 6px;text-align:center;box-shadow:0 2px 7px rgba(0,0,0,.1)}
.bs-card span{display:block;font-size:.72rem;color:#5f7d6e}
.bs-card b{display:block;font-size:1.5rem;font-weight:800;color:#0f6e56;line-height:1.1}
.bs-card small{font-size:.72rem;color:#8fbfa4;font-weight:700}
.bs-sec{max-width:460px;margin:12px auto 6px;font-weight:800;font-size:.85rem;color:#2e9e5b}
.bs-sec .muted{font-weight:400}
.bs-row{display:flex;align-items:center;gap:8px;max-width:460px;margin:5px auto}
.bs-lab{width:150px;font-size:.78rem;color:#5f7d6e;flex-shrink:0}
.bs-track{flex:1;background:rgba(0,0,0,.08);border-radius:6px;height:16px;overflow:hidden}
.bs-track i{display:block;height:100%;border-radius:6px;min-width:2px;transition:width .5s}
.bs-val{width:26px;text-align:right;font-size:.85rem;font-weight:800;color:#12291c}
.bs-hi{display:flex;flex-wrap:wrap;gap:6px 14px;max-width:460px;margin:12px auto 4px;font-size:.82rem;color:#5f7d6e}
.bs-hi b{color:#12291c}
.bs-play{display:flex;flex-wrap:wrap;gap:6px 14px;max-width:460px;margin:8px auto 4px;padding-top:8px;border-top:1px solid rgba(0,0,0,.08);font-size:.82rem;color:#5f7d6e}
.bs-play b{color:#0f6e56}
html.dark .bs-play{color:#9fbfae;border-top-color:rgba(255,255,255,.1)}
html.dark .bs-play b{color:#7ee0a3}
/* 🏆 mensagem de boas-vindas: pódio + Roda dos Campeões */
.champ-welcome{text-align:center;max-width:360px}
.champ-welcome .cw-emoji{font-size:2.6rem;line-height:1;animation:mcPop .5s ease}
.champ-welcome h3{margin:6px 0 2px}
.champ-welcome .cw-rank{font-weight:800;font-size:1.05rem;color:#0f6e56;margin:6px 0 2px}
.champ-welcome .cw-sub{font-size:.9rem;color:#5f7d6e;margin:0 0 8px;line-height:1.4}
.champ-welcome .cw-leader{font-size:.9rem;font-weight:700;color:#b8860b;background:#fff6de;border:1px solid #f0d998;border-radius:10px;padding:5px 10px;margin:2px auto 6px;display:inline-block}
.champ-welcome .cw-timer{font-size:.85rem;color:#5f7d6e;margin:2px 0 4px}
.champ-welcome .cw-timer b{color:#c0392b}
html.dark .champ-welcome .cw-leader{background:rgba(240,217,152,.14);border-color:rgba(240,217,152,.3);color:#f0d998}
html.dark .champ-welcome .cw-timer{color:#9fbfae}
html.dark .champ-welcome .cw-timer b{color:#ff9c8f}
.champ-welcome .cw-prizes-h{font-size:.8rem;font-weight:700;color:#8fbfa4;margin:6px 0 6px}
.champ-welcome .cw-prizes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px}
.champ-welcome .cw-prize{display:inline-flex;align-items:center;gap:4px;background:#eafaf0;border:1px solid #b7e6c9;border-radius:99px;padding:4px 10px;font-size:.8rem;font-weight:700;color:#0f6e56}
.champ-welcome .cwp-ic{font-size:1rem}
.champ-welcome .cw-btns{display:flex;gap:8px;justify-content:center}
html.dark .champ-welcome .cw-rank{color:#7ee0a3}
html.dark .champ-welcome .cw-sub{color:#9fbfae}
html.dark .champ-welcome .cw-prize{background:rgba(126,224,163,.14);border-color:rgba(126,224,163,.3);color:#a9f0c6}
/* 🏆🎡 ALERTA #1 ao abrir: Roda dos Campeões por rodar */
.champ-spin-alert{text-align:center;max-width:360px;border:2px solid #f0c23a;box-shadow:0 0 0 4px rgba(240,194,58,.18),0 18px 44px rgba(0,0,0,.35)}
.champ-spin-alert .csa-emoji{font-size:2.9rem;line-height:1;animation:mcPop .5s ease}
.champ-spin-alert h3{margin:6px 0 4px;color:#b8860b}
.champ-spin-alert .csa-rank{font-weight:800;font-size:1.02rem;color:#0f6e56;margin:2px 0 4px}
.champ-spin-alert .csa-sub{font-size:.9rem;color:#5f7d6e;margin:0 0 8px;line-height:1.4}
.champ-spin-alert .csa-urgency{font-size:.86rem;font-weight:800;color:#c0392b;background:#fdecea;border:1px solid #f4c3bc;border-radius:10px;padding:5px 10px;margin:4px auto 6px;display:inline-block}
.champ-spin-alert .csa-multi{font-size:.85rem;font-weight:700;color:#8a6d1a;background:#fff6de;border:1px solid #f0d998;border-radius:10px;padding:5px 10px;margin:2px auto 8px;display:inline-block}
.champ-spin-alert .cw-btns{display:flex;gap:8px;justify-content:center;margin-top:6px}
.champ-spin-alert #csaGo{animation:champPulse 1.6s ease-in-out infinite}
@keyframes champPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
html.dark .champ-spin-alert{border-color:#c79a24;box-shadow:0 0 0 4px rgba(199,154,36,.22),0 18px 44px rgba(0,0,0,.5)}
html.dark .champ-spin-alert h3{color:#f0d998}
html.dark .champ-spin-alert .csa-rank{color:#7ee0a3}
html.dark .champ-spin-alert .csa-sub{color:#9fbfae}
html.dark .champ-spin-alert .csa-urgency{background:rgba(255,156,143,.12);border-color:rgba(255,156,143,.3);color:#ff9c8f}
html.dark .champ-spin-alert .csa-multi{background:rgba(240,217,152,.14);border-color:rgba(240,217,152,.3);color:#f0d998}

/* ================= 🕳️ A TOCA (nível-evento) ================= */
.toca{position:absolute;z-index:12;cursor:pointer;-webkit-tap-highlight-color:transparent}
.toca-hole{position:absolute;left:6%;right:6%;bottom:2%;height:26%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 42%,#050807 0 58%,#1d130b 72%,#3a2614 100%);
  box-shadow:inset 0 4px 9px rgba(0,0,0,.9),0 2px 4px rgba(0,0,0,.5);
  opacity:0;transform:scale(.2)}
.toca.on .toca-hole{animation:tHoleIn .28s ease forwards}
@keyframes tHoleIn{to{opacity:1;transform:scale(1)}}
.toca-clip{position:absolute;left:0;right:0;top:0;bottom:12%;overflow:hidden;pointer-events:none}
.toca-char{position:absolute;left:50%;bottom:0;width:150%;transform:translate(-50%,110%)}
.toca.on .toca-char{animation:tMoleUp .34s cubic-bezier(.2,1.45,.4,1) .1s forwards}
@keyframes tMoleUp{to{transform:translate(-50%,56%)}}
.toca.on.idle .toca-char{animation:tMoleUp .34s cubic-bezier(.2,1.45,.4,1) .1s forwards, tMoleTaunt .8s ease-in-out .5s infinite}
@keyframes tMoleTaunt{0%,100%{transform:translate(-50%,56%) rotate(-5deg)}50%{transform:translate(-50%,52%) rotate(6deg)}}
.toca.hit .toca-char{animation:tMoleBonk .5s ease forwards}
@keyframes tMoleBonk{
  0%{transform:translate(-50%,56%)}
  25%{transform:translate(-50%,62%) rotate(10deg) scaleY(.82)}
  55%{transform:translate(-50%,58%) rotate(-9deg)}
  100%{transform:translate(-50%,114%) rotate(0)}
}
.toca.flee .toca-char{animation:tMoleFlee .32s ease-in forwards}
@keyframes tMoleFlee{20%{transform:translate(-50%,48%) rotate(-6deg)}100%{transform:translate(-50%,114%)}}
.toca-lip{position:absolute;left:6%;right:6%;bottom:2%;height:26%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,transparent 0 55%,rgba(6,9,8,.96) 62% 100%);
  clip-path:inset(52% 0 0 0);opacity:0}
.toca.on .toca-lip{animation:tHoleIn .28s ease forwards}

/* texto flutuante de evento (+🪙 / -🪙 / ×2) */
.ev-float{position:absolute;z-index:14;transform:translateX(-50%);font-weight:900;
  font-size:clamp(.95rem,4vw,1.3rem);pointer-events:none;white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.65);animation:evFloatUp 1s ease-out forwards}
.ev-float.good{color:#ffd54a} .ev-float.bad{color:#ff7a6b}
@keyframes evFloatUp{20%{transform:translate(-50%,-12px) scale(1.15)}100%{transform:translate(-50%,-46px);opacity:0}}

/* ================= 🔦 APAGÃO DO SMOKEY (nível-evento) ================= */
.dark-out{position:absolute;inset:0;z-index:11;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
    transparent 0 48px, rgba(3,7,5,.55) 70px, rgba(3,7,5,.965) 118px)}
.dark-out.on{opacity:1}
.dark-out .dark-smokey{position:absolute;right:2%;top:2%;width:14%;
  filter:drop-shadow(0 0 10px rgba(0,0,0,.8));animation:dkLaugh .7s ease-in-out infinite}
@keyframes dkLaugh{0%,100%{transform:rotate(10deg)}50%{transform:rotate(18deg) translateY(-4px)}}
.dark-out .x2-chip{position:absolute;left:2%;top:2%;background:#ffd54a;color:#3a2600;
  font-weight:900;font-size:.85rem;padding:4px 10px;border-radius:99px;box-shadow:0 3px 10px rgba(0,0,0,.5)}

/* ================= 🌱 TABULEIRO QUE CRESCE — células novas a "nascer" ================= */
.cell-new{position:absolute;z-index:2;pointer-events:none;border-radius:14%;
  background:radial-gradient(circle,rgba(120,255,170,.55),transparent 70%);
  animation:cellNew .8s ease forwards}
@keyframes cellNew{0%{opacity:0;transform:scale(.3)}40%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
/* 🔥 células CONDENADAS (a borda vai fechar) — piscam a vermelho */
.cell-doom{position:absolute;z-index:13;pointer-events:none;border-radius:14%;
  background:rgba(255,80,60,.4);outline:2px solid rgba(255,90,60,.85);outline-offset:-3px;
  animation:cellDoom .28s ease-in-out 3}
@keyframes cellDoom{0%,100%{opacity:.25}50%{opacity:.95}}
/* ================= 🔁 FRENTE E VERSO — o "outro lado" tem ambiente próprio ================= */
.board.verso{filter:hue-rotate(45deg) saturate(1.1);border-color:#b48ae8;
  box-shadow:inset 0 4px 18px rgba(0,0,0,.4),0 12px 28px rgba(0,0,0,.25),0 0 22px -2px #b48ae8}
.board.verso::after{content:'VERSO 🔁';position:absolute;right:8px;top:6px;z-index:3;pointer-events:none;
  font-weight:900;font-size:.68rem;letter-spacing:1px;color:#e4d3ff;background:rgba(90,50,150,.55);
  padding:3px 9px;border-radius:99px;border:1px solid rgba(200,160,255,.5)}
@media (prefers-reduced-motion:reduce){.toca-char,.toca-hole,.toca-lip{animation-duration:.2s !important}}
/* 🏆 linha do pódio no ecrã de fim de nível */
.result-podium{display:none}
.result-podium.show{display:inline-block;margin:8px auto 2px;background:#fff6de;border:1px solid #f0d998;color:#8a6d1a;font-weight:700;font-size:.9rem;border-radius:99px;padding:6px 15px;max-width:340px;cursor:pointer;animation:mcPop .4s ease}
html.dark .result-podium.show{background:rgba(240,217,152,.14);border-color:rgba(240,217,152,.3);color:#f0d998}
html.dark .bs-card{background:#16242c}
html.dark .bs-card b,html.dark .bs-val,html.dark .bs-hi b{color:#e7eef0}
html.dark .bs-card span,html.dark .bs-lab,html.dark .bs-hi{color:#9fbfae}
html.dark .bs-track{background:rgba(255,255,255,.1)}
/* 🛡️ painel admin — jogadores */
.adm-player{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:8px 11px;margin:6px auto;max-width:460px;box-shadow:0 2px 7px rgba(0,0,0,.1)}
html.dark .adm-player{background:#16242c;color:#e7eef0}
.adm-player .ap-main{min-width:0;display:flex;flex-direction:column;gap:1px}
.adm-player .ap-main b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-player .ap-main a{font-size:.8rem;color:#3a7bd5;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-player .ap-stats{font-size:.72rem;opacity:.78;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-player .ap-geo{display:flex;align-items:center;gap:4px;font-size:.7rem;opacity:.72;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-player .ap-flag{width:16px;height:11px;object-fit:cover;border-radius:2px;vertical-align:middle}
.adm-player.blocked{opacity:.7;border:1px solid #e2553355;background:#fff0f0}
html.dark .adm-player.blocked{background:#2a1717}
.ap-block{padding:4px 9px!important;font-size:.74rem!important;background:rgba(226,59,59,.12)!important;color:#c0392b!important;margin-top:3px}
.adm-player.blocked .ap-block{background:rgba(46,160,90,.15)!important;color:#2ea05a!important}
/* política de privacidade + consentimento */
.privacy-doc{line-height:1.5;font-size:.92rem}
.privacy-doc ul{padding-left:18px;margin:6px 0}.privacy-doc li{margin:3px 0}
.consent-modal .cz-ic{font-size:2.6rem;margin-bottom:2px}
.consent-modal .cz-check{display:flex;gap:8px;align-items:flex-start;text-align:left;font-size:.82rem;margin:10px 2px;cursor:pointer}
.consent-modal .cz-check input{margin-top:3px;flex:0 0 auto}
.consent-modal #czRead{margin:2px auto;display:block}
.consent-modal #czOut{margin:4px auto 0;display:block;opacity:.8}
/* 🏳️ bandeira no ranking */
.lb-flag{width:20px;height:14px;object-fit:cover;border-radius:3px;vertical-align:middle;margin-right:5px;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.pf-fr-badge{background:#e23b6d;color:#fff;border-radius:999px;padding:1px 8px;font-size:.78rem;font-weight:900}
.toast.toast-action{background:linear-gradient(160deg,#2e7dff,#1450b0);box-shadow:0 6px 20px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.25)}
.ap-del{padding:4px 9px!important;font-size:.74rem!important;background:rgba(0,0,0,.06)!important;color:#a44!important;margin-top:3px;margin-left:6px}
.adm-player.suspect{border:1px solid #e6a23c;background:#fff8ec}
html.dark .adm-player.suspect{background:#2a2310}

/* 🏙️ CIDADE VERDE */
.city-card .city-prog{position:absolute;left:10px;right:10px;bottom:6px;height:5px;background:rgba(0,0,0,.12);border-radius:999px;overflow:hidden}
.city-card .city-prog i{display:block;height:100%;background:linear-gradient(90deg,#46c06f,#7ee0a3);border-radius:999px;transition:width .5s}
.city-card{position:relative}
.city-thumb{display:grid;place-items:center;font-size:2rem}
.city-thumb img{width:100%;height:100%;object-fit:cover}
.city-wrap{max-width:680px;width:100%;margin:8px auto 6px;padding:0 6px;box-sizing:border-box}
.city-scene{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.25);background:#dff1ff}
/* Arte gerada (Nano) em crossfade poluída→limpa por cima do SVG (fallback) */
.city-scene-box{position:relative;width:100%;aspect-ratio:400/215;border-radius:16px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.25);background:#dff1ff}
.city-scene-box .city-scene{position:absolute;inset:0;width:100%;height:100%;border-radius:0;box-shadow:none}
.city-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.city-photo.clean{transition:opacity .9s cubic-bezier(.34,1.1,.5,1)}
/* 🎬 clip Grok animado do estágio atual — cobre o crossfade+FX; se falhar (onerror) remove-se e fica o fallback por baixo */
.city-scene-box .city-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:3;border-radius:0}
/* ✨ FX da natureza sobre a foto da cidade: nuvens, sol, fumo, água (subtil, só transform/opacity) */
.city-fx{position:absolute;inset:0;border-radius:16px;overflow:hidden;pointer-events:none;z-index:2}
.city-fx .cfx-sun{position:absolute;top:-16%;right:-8%;width:48%;height:64%;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle at 60% 40%,rgba(255,244,200,.9),rgba(255,224,140,.35) 42%,transparent 70%);
  opacity:calc(.32 + (1 - var(--smog,0))*.5);animation:cfxSun 6s ease-in-out infinite}
@keyframes cfxSun{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.city-fx .cfx-cloud{position:absolute;background:rgba(255,255,255,.8);border-radius:50%;filter:blur(3px);will-change:transform;
  box-shadow:17px 4px 0 -2px rgba(255,255,255,.62),-15px 6px 0 -3px rgba(255,255,255,.55)}
.city-fx .cfx-cloud.c1{top:9%;width:12%;height:7%;opacity:.78;animation:cfxCloud 27s linear infinite}
.city-fx .cfx-cloud.c2{top:20%;width:9%;height:5.5%;opacity:.6;animation:cfxCloud 39s linear infinite;animation-delay:-11s}
.city-fx .cfx-cloud.c3{top:4%;width:7%;height:4.5%;opacity:.5;animation:cfxCloud 47s linear infinite;animation-delay:-25s}
@keyframes cfxCloud{from{transform:translateX(-16%)}to{transform:translateX(116%)}}
.city-fx .cfx-smoke{position:absolute;bottom:40%;left:12%;width:3.5%;aspect-ratio:1;border-radius:50%;filter:blur(2px);opacity:0;
  background:rgba(115,115,115,.5);will-change:transform,opacity}
.city-fx .cfx-smoke.s1{animation:cfxSmoke 4.6s ease-in infinite}
.city-fx .cfx-smoke.s2{left:16%;animation:cfxSmoke 5.6s ease-in infinite;animation-delay:-2s}
.city-fx .cfx-smoke.s3{left:9%;animation:cfxSmoke 6.2s ease-in infinite;animation-delay:-3.6s}
@keyframes cfxSmoke{0%{transform:translateY(0) scale(.6);opacity:0}18%{opacity:calc(var(--smog,0)*.6)}100%{transform:translateY(-160%) scale(1.9);opacity:0}}
.city-fx .cfx-water{position:absolute;left:0;right:0;bottom:5%;height:17%;mix-blend-mode:screen;opacity:.7;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.3) 50%,transparent 68%);background-size:220% 100%;
  animation:cfxWater 5.2s ease-in-out infinite}
@keyframes cfxWater{0%{background-position:130% 0}100%{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){.city-fx{display:none}}
.city-hero{position:relative}
.city-hero .city-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:16px;z-index:3;box-shadow:0 4px 14px rgba(0,0,0,.25)}
/* 🏗️ animação "obra" ao construir uma melhoria */
.city-scene-box.building{animation:cbShake .5s ease}
@keyframes cbShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-2px,1px)}45%{transform:translate(2px,-1px)}70%{transform:translate(-1px,1px)}}
.city-build-fx{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;z-index:4}
/* 🎬 clip de construção com a personagem (tapa a cena durante a obra; toca para saltar) */
.city-build-clip{position:absolute;inset:0;z-index:6;border-radius:16px;overflow:hidden;cursor:pointer;animation:popIn .3s}
.city-build-clip video{width:100%;height:100%;object-fit:cover;display:block;background:#0c1a12}
.city-build-clip .cbc-skip{position:absolute;bottom:8px;right:10px;background:rgba(0,0,0,.5);color:#fff;font-size:.9rem;padding:3px 10px;border-radius:99px;pointer-events:none}
.cbf-icon{font-size:3rem;animation:cbDrop .8s cubic-bezier(.3,1.3,.5,1)}
@keyframes cbDrop{0%{transform:translateY(-44px) scale(.6);opacity:0}40%{opacity:1}100%{transform:translateY(0) scale(1.05);opacity:0}}
.cbf-dust{position:absolute;bottom:16%;width:64px;height:18px;background:radial-gradient(closest-side,rgba(225,215,195,.9),transparent);border-radius:50%;animation:cbDust .85s ease-out}
@keyframes cbDust{0%{transform:scale(.3);opacity:0}30%{opacity:.85}100%{transform:scale(2.3);opacity:0}}
/* 🏗️ obra MAIS LONGA na mudança de fase (grua + operário + sinal + faíscas) */
.city-scene-box.building-long{animation:cbShake .5s ease 0s 3}
.building-long .city-photo.clean{transition:opacity 1.5s cubic-bezier(.34,1.05,.5,1)}
.city-build-fx.long .cbf-icon{font-size:3.4rem;animation:cbDropLong 1.9s cubic-bezier(.3,1.2,.5,1)}
@keyframes cbDropLong{0%{transform:translateY(-52px) scale(.6);opacity:0}22%{opacity:1}55%{transform:translateY(0) scale(1.08);opacity:1}100%{transform:translateY(0) scale(1);opacity:0}}
.cbf-icon2{position:absolute;left:30%;bottom:14%;font-size:2rem!important;animation:cbBob 1.9s ease!important}
.cbf-icon3{position:absolute;right:28%;bottom:16%;font-size:1.9rem!important;animation:cbBob 1.9s ease .2s!important}
@keyframes cbBob{0%{transform:translateY(14px);opacity:0}25%{opacity:1}80%{opacity:1}100%{transform:translateY(0);opacity:0}}
.cbf-spark{position:absolute;top:34%;left:52%;width:10px;height:10px;border-radius:50%;background:radial-gradient(closest-side,#fff5c2,#ffd24d,transparent);animation:cbSpark 1.9s ease-out}
@keyframes cbSpark{0%,100%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.3)}40%{opacity:.4;transform:scale(.8)}60%{opacity:1;transform:scale(1.4)}}
/* 🎉 selo "Fase X/N!" */
.city-phase-badge{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:6;
  padding:8px 18px;border-radius:999px;font-weight:900;font-size:1.05rem;color:#15412a;white-space:nowrap;
  background:linear-gradient(180deg,#ffe9a6,#ffd24d);border:2px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.3);
  animation:cpBadge 2.2s cubic-bezier(.2,1.4,.4,1)}
@keyframes cpBadge{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}18%{opacity:1;transform:translate(-50%,-55%) scale(1.06)}72%{opacity:1;transform:translate(-50%,-55%) scale(1)}100%{opacity:0;transform:translate(-50%,-75%) scale(1)}}
/* a Cidade Verde tem sempre conteúdo alto → alinha ao topo (senão o center corta a cena em ecrã largo) */
.screen-city .home-scroll{justify-content:flex-start}
/* 🔋 BATERIA VERTICAL da fase, sobreposta no canto direito da imagem (enche → descarrega → nova fase) */
.city-battery.vert{position:absolute;top:12px;right:12px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:0;margin:0}
.city-battery.vert .cb-tip{width:16px;height:5px;background:#2d4658;border-radius:3px 3px 0 0;margin-bottom:-1px}
.city-battery.vert .cb-body{width:28px;height:100px;border:3px solid #2d4658;border-radius:8px;padding:3px;box-sizing:border-box;
  display:flex;flex-direction:column-reverse;background:rgba(255,255,255,.65);box-shadow:0 2px 8px rgba(0,0,0,.35)}
.city-battery.vert .cb-fill{width:100%;height:0;border-radius:4px;background:linear-gradient(0deg,#2e9e5b,#7ee0a3);transition:height .7s cubic-bezier(.34,1.2,.5,1)}
.city-battery.vert.charged .cb-fill{background:linear-gradient(0deg,#ffb703,#ffd24d,#7ee0a3);box-shadow:0 0 14px rgba(255,199,7,.9)}
.city-battery.vert.charged .cb-body{border-color:#e8930c}
.city-battery.vert .cb-tx{margin-top:5px;text-align:center;line-height:1.05;background:rgba(12,28,20,.55);border-radius:8px;padding:2px 7px;backdrop-filter:blur(2px)}
.city-battery.vert .cb-tx b{display:block;font-size:.82rem;color:#fff}
.city-battery.vert .cb-tx small{display:block;font-size:.72rem;font-weight:800;color:#a9f0c6}
html.dark .city-battery.vert .cb-body{border-color:#7ee0a3;background:rgba(255,255,255,.14)}
html.dark .city-battery.vert .cb-tip{background:#7ee0a3}
@media (prefers-reduced-motion:reduce){.city-scene-box.building,.city-scene-box.building-long,.cbf-icon,.cbf-icon2,.cbf-icon3,.cbf-dust,.cbf-spark,.city-phase-badge{animation:none}}
.city-meter{display:flex;flex-direction:column;gap:4px;margin:8px auto 0;max-width:440px}
.city-meter .cm-bar{height:14px;background:rgba(0,0,0,.16);border-radius:999px;overflow:hidden}
.city-meter .cm-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2e9e5b,#7ee0a3);transition:width .6s cubic-bezier(.34,1.2,.5,1)}
.city-meter span{font-weight:800;font-size:.82rem;text-align:center;color:#2d4658}
.city-share{display:block;margin:10px auto 0;background:linear-gradient(160deg,#5ab0e8,#2e7dc4)!important;color:#fff!important;font-weight:800}
html.dark .city-meter span{color:#cfe7dd}
/* elementos LIMPOS escondidos até à obra */
.city-scene .ck-wind,.city-scene .ck-solar,.city-scene .ck-hydro,.city-scene .ck-bike,.city-scene .ck-trees,.city-scene .ck-recycle,.city-scene .ck-leaf{display:none}
.city-scene.done-wind .ck-wind{display:block}
.city-scene.done-solar .ck-solar{display:block}
.city-scene.done-hydro .ck-hydro{display:block}
.city-scene.done-bike .ck-bike{display:block}
.city-scene.done-trees .ck-trees{display:block}
.city-scene.done-recycle .ck-recycle{display:block}
.city-scene.done-coal .ck-leaf{display:block}
/* elementos SUJOS desaparecem quando limpos */
.city-scene.done-coal .ck-smoke,.city-scene.done-coal .ck-coalstack{display:none}
.city-scene.done-bike .ck-car{display:none}
/* rio turvo → azul; janelas → LED */
.city-scene .ck-river{fill:#8a7d4f}
.city-scene.done-hydro .ck-river{fill:#3a93d6}
.city-scene.done-led .ck-win rect{fill:#ffe27a}
/* animações */
.city-scene.done-wind .ck-blades{animation:ckspin 4s linear infinite}
.city-scene.done-wind .ck-blades2{animation:ckspin 5.5s linear infinite}
@keyframes ckspin{to{transform:rotate(360deg)}}
.city-scene .ck-smoke{animation:cksmoke 3s ease-in-out infinite}
@keyframes cksmoke{0%,100%{opacity:.85;transform:translateY(0)}50%{opacity:.5;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.city-scene .ck-blades,.city-scene .ck-blades2,.city-scene .ck-smoke{animation:none}}
/* lista de obras */
.city-projects{display:flex;flex-direction:column;gap:8px;max-width:480px;margin:4px auto 8px;padding:0 4px}
.cp-row{display:flex;align-items:center;gap:11px;background:#fff;border-radius:14px;padding:9px 12px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
html.dark .cp-row{background:#16242c;color:#e7eef0}
.cp-row.done{opacity:.7;background:linear-gradient(90deg,#eafff0,#fff)}
html.dark .cp-row.done{background:linear-gradient(90deg,#16302040,#16242c)}
.cp-ic{font-size:1.7rem;width:34px;text-align:center;flex:none}
.cp-tx{flex:1;min-width:0}.cp-tx b{display:block}.cp-tx small{opacity:.7;font-size:.76rem}
.cp-buy{flex:none;background:linear-gradient(160deg,#46c06f,#2e9e5b)!important;color:#fff!important;font-weight:800}
.cp-buy.off{opacity:.45}
.cp-done{flex:none;color:#2ea05a;font-weight:900;font-size:1.3rem}
.cp-lock{flex:none;font-size:1.1rem;opacity:.55}
/* obras: custo (info) e obra-alvo a ser financiada automaticamente */
.cp-cost{flex:none;font-weight:800;font-size:.86rem;color:#8a7a4a;opacity:.7}
.cp-cost.target{color:#e8930c;opacity:1}
.cp-row:not(.done):not(.target){opacity:.72}
.cp-row.target{outline:2px solid #f3970f;background:linear-gradient(90deg,#fff6e2,#fff);box-shadow:0 3px 12px rgba(243,151,15,.25)}
html.dark .cp-row.target{background:linear-gradient(90deg,#2a220f,#16242c)}
.cp-row.target .cp-ic{animation:cpFund 1.6s ease-in-out infinite}
@keyframes cpFund{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.city-next-tip{text-align:center;font-size:.86rem;font-weight:700;color:#27613f;margin:8px auto 0;max-width:440px}
html.dark .city-next-tip{color:#a9f0c6}
@media (prefers-reduced-motion:reduce){.cp-row.target .cp-ic{animation:none}}
/* Bairros (SimCity: 24 obras em 6 bairros, desbloqueio sequencial) */
.city-districts{display:flex;flex-direction:column;gap:14px;max-width:480px;margin:4px auto 8px;padding:0 4px}
.city-district{border-radius:16px;background:rgba(255,255,255,.5);padding:6px 6px 8px}
html.dark .city-district{background:rgba(255,255,255,.05)}
.city-district.complete{background:linear-gradient(180deg,#eafff0,rgba(255,255,255,.5))}
html.dark .city-district.complete{background:linear-gradient(180deg,#16302030,rgba(255,255,255,.05))}
.city-district.locked{opacity:.7}
.cd-head{display:flex;align-items:center;gap:9px;padding:4px 8px 7px;font-size:.98rem}
.cd-head b{flex:1;min-width:0}
.cd-emoji{font-size:1.25rem}
.cd-status{flex:none;font-weight:800;font-size:.82rem;color:#2e9e5b;background:rgba(46,158,91,.14);border-radius:999px;padding:2px 9px}
.city-district.locked .cd-status{color:#8a93a0;background:rgba(140,150,160,.16)}
.cd-rows{display:flex;flex-direction:column;gap:8px}
.cd-locked-hint{text-align:center;font-size:.82rem;opacity:.7;padding:8px 6px}
.city-fact .cf-emoji{font-size:3rem;margin-bottom:2px}
/* 🎬 celebração de bairro (clip Grok com som) */
.city-celebrate{text-align:center}
.city-celebrate .cf-emoji{font-size:2.6rem}
.city-clip{display:block;width:100%;max-width:340px;max-height:46vh;margin:10px auto;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.3);background:#000;object-fit:cover}
/* ❓ como funciona */
.city-help{text-align:left;max-width:380px}
.city-help h3{text-align:center;margin-bottom:8px}
.ch-list{display:flex;flex-direction:column;gap:10px;margin:6px 0 12px}
.ch-row{display:flex;align-items:flex-start;gap:10px}
.ch-ic{font-size:1.5rem;flex:none;width:30px;text-align:center}
.ch-tx b{display:block;font-size:.92rem}
.ch-tx small{opacity:.75;font-size:.8rem;line-height:1.35}
.city-help .btn-play{display:block;margin:0 auto}
/* 🌱 Eco-Passaporte */
.eco-wrap{max-width:560px;margin:0 auto;padding:10px 12px 80px}
.eco-card{background:linear-gradient(160deg,#eafff1,#d6f5e6);border-radius:18px;padding:14px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
html.dark .eco-card{background:linear-gradient(160deg,#173326,#11261d);color:#e7f3ec}
.eco-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.eco-av{width:54px;height:54px;border-radius:50%;object-fit:cover;background:#fff;flex:none;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.eco-id b{display:block;font-size:1.05rem}
.eco-id small{opacity:.7}
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.eco-stat{background:rgba(255,255,255,.65);border-radius:12px;padding:9px 4px;text-align:center}
html.dark .eco-stat{background:rgba(255,255,255,.08)}
.eco-stat b{display:block;font-size:1rem;white-space:nowrap}
.eco-stat span{font-size:.72rem;opacity:.7}
.eco-facts{list-style:none;padding:0;margin:6px 0 12px;display:flex;flex-direction:column;gap:8px}
.eco-facts li{display:flex;align-items:flex-start;gap:9px;background:#fff;border-radius:12px;padding:9px 11px;box-shadow:0 2px 6px rgba(0,0,0,.08);font-size:.86rem;line-height:1.35}
html.dark .eco-facts li{background:#16242c;color:#e7eef0}
.eco-facts .ep-fic{font-size:1.3rem;flex:none}
.eco-facts .ep-empty{justify-content:center;opacity:.7;text-align:center}
.eco-note{font-size:.8rem;opacity:.75;text-align:center;margin:4px 8px}
/* ⚽ Mundial — aviso anti-stall (tic-tac) */
.wc-tick{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;background:rgba(20,20,20,.55);color:#fff;border:3px solid #ffcf33;border-radius:18px;padding:14px 22px;box-shadow:0 6px 22px rgba(0,0,0,.4)}
.wc-tick .wt-clock{font-size:2rem;line-height:1}
.wc-tick .wt-n{font-size:2.6rem;font-weight:900;color:#ffcf33;line-height:1}
.wc-tick.pulse{animation:wcTickPulse .9s ease}
@keyframes wcTickPulse{0%{transform:translate(-50%,-50%) scale(.7);opacity:0}30%{opacity:1}50%{transform:translate(-50%,-50%) scale(1.12)}100%{transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.wc-tick.pulse{animation:none}}
.adm-player .ap-meta{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:.74rem;opacity:.75;white-space:nowrap}
/* 🏆 TORNEIO EM CHAVE */
.cup-btn{background:linear-gradient(160deg,#ffd24d,#e8a200)!important;color:#3a2400!important}
.cup-vs{text-align:center;font-weight:800;color:#fff;margin:4px auto 8px;font-size:1.02rem;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.cup-bracket{display:flex;flex-direction:column;gap:12px;max-width:460px;margin:14px auto;padding:0 8px}
.cup-pair{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border-radius:16px;padding:10px;backdrop-filter:blur(2px)}
.cup-vs-x{flex:0 0 auto;font-size:1.1rem;opacity:.85}
.cup-slot{flex:1;display:flex;align-items:center;gap:7px;background:#fff;border-radius:12px;padding:7px 9px;min-width:0;box-shadow:0 2px 7px rgba(0,0,0,.18);transition:transform .2s}
html.dark .cup-slot{background:#16242c;color:#e7eef0}
.cup-slot img{width:30px;height:30px;border-radius:50%;object-fit:contain;background:rgba(0,0,0,.06);flex:0 0 auto}
.cup-slot span{flex:1;font-weight:800;font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cup-slot b{font-size:.95rem;color:#2d4658}
html.dark .cup-slot b{color:#cfe7dd}
.cup-slot.win{box-shadow:0 0 0 2px #46d6a0,0 2px 9px rgba(0,0,0,.2);transform:scale(1.03)}
.cup-slot.win::after{content:'✓';margin-left:2px;color:#2ea05a;font-weight:900}
.cup-slot.out{opacity:.5;filter:grayscale(.6)}
.cup-slot.me{outline:2px solid var(--amber);outline-offset:1px}
.cup-slot.bye{justify-content:center;font-weight:800;opacity:.7;background:rgba(255,255,255,.55)}
.cup-champ-name{font-size:1.5rem;font-weight:900;color:#ffd24d;text-shadow:0 2px 6px rgba(0,0,0,.4);margin:6px 0}
.duel-modal-ov{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(8,14,30,.7);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s}
.duel-modal-ov.in{opacity:1}
.duel-modal{background:linear-gradient(160deg,#fff,#eaf4ff);border-radius:22px;padding:18px 22px;width:min(88vw,360px);text-align:center;box-shadow:0 18px 48px rgba(0,0,0,.45)}
html.dark .duel-modal{background:#16242c;color:#e7eef0}
.duel-modal .dm-av{width:74px;height:74px;object-fit:contain;margin:-44px auto 4px;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.3))}
.duel-modal h3{margin:4px 0;color:var(--ink);font-size:1.3rem}
.wager-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.wager-opt{font-family:var(--font);font-weight:900;font-size:1.05rem;padding:12px;border-radius:14px;border:0;background:linear-gradient(160deg,#ffe082,#ffc107);color:#0a1f3c;cursor:pointer;box-shadow:0 3px 8px rgba(243,151,15,.4)}
.wager-opt.off{opacity:.4;cursor:not-allowed;filter:grayscale(.6)}
.pvp-foe{width:100%;aspect-ratio:5/7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(160deg,rgba(20,40,60,.3),rgba(10,20,30,.45));border:3px solid color-mix(in srgb,#ce93fa 55%,rgba(255,255,255,.3));border-radius:22px;box-shadow:inset 0 4px 18px rgba(0,0,0,.4)}
.pvp-av{width:46%;max-width:130px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));animation:pvpBob 2.2s ease-in-out infinite}
@keyframes pvpBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.pvp-state{font-family:var(--font);font-weight:900;color:#fff;font-size:clamp(.8rem,3vw,1.05rem);text-shadow:0 2px 4px rgba(0,0,0,.5)}
.pvp-sub{font-weight:700;font-size:.74rem;color:rgba(255,255,255,.8)}
.pvp-score{display:flex;flex-direction:column;align-items:center;line-height:1}
.pvp-score b{font-family:var(--font);font-weight:900;color:#fff;font-size:clamp(1.6rem,7vw,2.6rem);text-shadow:0 3px 8px rgba(0,0,0,.55);transition:transform .15s}
.pvp-score span{font-weight:700;font-size:.66rem;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.7)}
/* 🔴 adversário à frente / 🟢 atrás de ti — leitura imediata de quem ganha */
.pvp-foe.foe-leading{border-color:#ff5a6a;box-shadow:inset 0 4px 18px rgba(0,0,0,.4),0 0 22px rgba(255,90,106,.55);animation:pvpAlert 1.1s ease-in-out infinite}
.pvp-foe.foe-leading .pvp-state{color:#ffd2d7}
.pvp-foe.foe-trailing{border-color:#46d6a0;box-shadow:inset 0 4px 18px rgba(0,0,0,.45)}
.pvp-foe.foe-trailing .pvp-av{filter:drop-shadow(0 6px 12px rgba(0,0,0,.4)) grayscale(.35) brightness(.9)}
.pvp-foe.foe-trailing .pvp-state{color:#bff3df}
@keyframes pvpAlert{0%,100%{box-shadow:inset 0 4px 18px rgba(0,0,0,.4),0 0 18px rgba(255,90,106,.4)}50%{box-shadow:inset 0 4px 18px rgba(0,0,0,.4),0 0 30px rgba(255,90,106,.75)}}
@media(prefers-reduced-motion:reduce){.pvp-av{animation:none}.pvp-foe.foe-leading{animation:none}}
/* 🤝 seletor de modo (Duelo vs Arena Partilhada) */
.mode-grid{display:flex;flex-direction:column;gap:9px;margin:10px 0}
.mode-opt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px;border-radius:16px;border:2px solid transparent;background:linear-gradient(160deg,#fff,#eef6ff);cursor:pointer;font-family:inherit;transition:transform .12s,border-color .12s}
html.dark .mode-opt{background:#1a2a33;color:#e7eef0}
.mode-opt:hover,.mode-opt:active{transform:translateY(-2px);border-color:#ffc107}
.mode-opt .mo-ic{font-size:1.7rem}
.mode-opt b{font-family:var(--font);font-size:1.05rem;color:var(--ink)}
html.dark .mode-opt b{color:#e7eef0}
.mode-opt small{font-weight:700;font-size:.72rem;color:rgba(0,0,0,.5)}
html.dark .mode-opt small{color:rgba(255,255,255,.55)}
/* 🤝 arena: realce da célula jogada — verde (minha) / laranja (adversário). SÓ box-shadow/brilho (não mexer no transform = posição da peça) */
.gem.arena-mine{box-shadow:0 0 0 3px #46d6a0,0 0 18px rgba(70,214,160,.85);z-index:6;animation:arenaGlow .55s ease}
.gem.arena-foe{box-shadow:0 0 0 3px #ffa033,0 0 18px rgba(255,160,51,.85);z-index:6;animation:arenaGlow .55s ease}
@keyframes arenaGlow{0%{filter:brightness(1.7)}100%{filter:brightness(1)}}
.arena-hud .dv-x{filter:none}
/* 🤝 arena por turnos: banner da vez + relógio + contadores + bloqueio fora da vez */
.dv-moves{font-weight:800;font-size:.64rem;color:inherit;opacity:.7;margin-top:1px}
.arena-turn{margin:6px auto;max-width:430px;text-align:center;font-family:var(--font);font-weight:800;padding:7px 14px;border-radius:14px;background:rgba(20,30,45,.5);color:#fff;font-size:clamp(.85rem,3.4vw,1.05rem);transition:background .2s}
.arena-turn.mine{background:linear-gradient(90deg,#2e9e5b,#46d6a0);box-shadow:0 3px 12px rgba(70,214,160,.5)}
.arena-turn.foe{background:rgba(20,30,45,.55)}
.arena-turn .at-clock{font-weight:900;margin-left:5px}
.arena-turn.urgent .at-clock{color:#ffd24d;animation:atPulse .5s ease-in-out infinite}
@keyframes atPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
.game.arena-wait .board{pointer-events:none;filter:grayscale(.4) brightness(.82)}
.game.arena-wait .booster-bar{opacity:.45;pointer-events:none}
.game.arena-go .board{box-shadow:0 0 0 3px rgba(70,214,160,.5),0 0 22px rgba(70,214,160,.28)}
.game.arena-on #limitBox,.game.arena-on #goalBox,.game.arena-on .fever-bar,.game.arena-on .batt-bar{display:none}   /* arena por turnos: HUD irrelevante */
/* 🤝 co-op (pedir ajuda a um amigo) */
.coop-bar{display:flex;align-items:center;gap:8px;justify-content:center;margin:5px auto;max-width:430px;padding:5px 12px;border-radius:14px;background:linear-gradient(90deg,rgba(46,158,91,.92),rgba(70,214,160,.92));color:#fff;font-weight:700;font-size:.82rem;box-shadow:0 3px 10px rgba(46,158,91,.35)}
.coop-bar img{width:26px;height:26px;object-fit:contain;border-radius:50%;background:rgba(255,255,255,.2)}
.coop-bar b{font-family:var(--font)}
.coop-btn{background:linear-gradient(160deg,#46d6a0,#2e9e5b)!important;color:#fff!important}
.coop-call{font-size:1.1rem}
.pl-coop{margin:8px auto 0;display:block}
/* 🧠 Quiz Ambiental multijogador */
.screen-quiz{display:flex;flex-direction:column;gap:10px;padding:14px 14px 20px;max-width:560px;margin:0 auto;width:100%}
.quiz-intro{align-items:center;text-align:center;justify-content:center;min-height:60vh}
.quiz-title{font-family:var(--font);color:var(--ink);font-size:1.5rem;margin:0}
.quiz-vs-intro{display:flex;align-items:center;gap:14px;margin:6px 0}
.quiz-vs-intro img{width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(0,0,0,.3))}
.quiz-vs-intro .qvs{font-family:var(--font);font-weight:900;color:#f3970f;font-size:1.3rem}
.quiz-vs-names{font-size:1rem;color:var(--ink)}.quiz-rules{font-size:.82rem;color:var(--muted,#777);max-width:300px}
.quiz-wait{font-weight:800;color:#2e9e5b;animation:mcBlink 1.2s ease-in-out infinite}
.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.quiz-count{font-weight:800;font-size:.85rem;color:var(--muted,#777)}
.quiz-timer{font-family:var(--font);font-weight:900;background:#fff;border-radius:12px;padding:3px 12px;color:#0a7d4f;box-shadow:0 2px 6px rgba(0,0,0,.12)}
html.dark .quiz-timer{background:#16242c;color:#46d6a0}
.quiz-timer.urgent{color:#fff;background:#e24b4a;animation:atPulse .5s ease-in-out infinite}
.quiz-scoreboard{display:flex;align-items:center;justify-content:center;gap:8px}
.qsb-p{display:flex;align-items:center;gap:6px;background:#fff;border-radius:14px;padding:5px 10px;box-shadow:0 2px 6px rgba(0,0,0,.1);transition:transform .2s,box-shadow .2s}
html.dark .qsb-p{background:#16242c;color:#e7eef0}
.qsb-p.lead{box-shadow:0 0 0 2px #46d6a0,0 3px 10px rgba(70,214,160,.4);transform:translateY(-2px)}
.qsb-p img{width:30px;height:30px;object-fit:contain;border-radius:50%;background:rgba(0,0,0,.06)}
.qsb-n{font-weight:700;font-size:.78rem;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qsb-p b{font-family:var(--font);color:#f3970f;font-size:1rem}
.qsb-vs{font-size:1rem}
.quiz-q{background:#fff;border-radius:18px;padding:18px 16px;text-align:center;font-weight:800;font-size:1.15rem;line-height:1.4;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.12);min-height:70px;display:flex;align-items:center;justify-content:center}
html.dark .quiz-q{background:#16242c;color:#e7eef0}
.quiz-ans-grid{display:flex;flex-direction:column;gap:9px}
.quiz-ans{display:flex;align-items:center;gap:12px;border:0;border-radius:16px;padding:15px 16px;background:var(--qc);color:var(--qink);font-family:inherit;font-weight:800;font-size:1.05rem;cursor:pointer;text-align:left;transition:transform .12s,opacity .2s,box-shadow .2s;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.quiz-ans:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.quiz-ans .qa-shape{font-size:1.3rem;flex:0 0 auto;width:26px;text-align:center}
.quiz-ans.sel{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--qc);transform:translateY(1px)}
.quiz-ans.dim{opacity:.55}
.quiz-ans.faded{opacity:.32;filter:grayscale(.5)}
.quiz-ans.correct{box-shadow:0 0 0 4px #fff,0 0 0 8px #2e9e5b;animation:qpop .4s ease}
.quiz-ans.my-wrong{box-shadow:0 0 0 4px #fff,0 0 0 8px #e24b4a;opacity:1;filter:none}
@keyframes qpop{0%{transform:scale(1)}45%{transform:scale(1.04)}100%{transform:scale(1)}}
.quiz-foot{text-align:center;font-weight:800;font-size:.9rem;color:var(--muted,#777);min-height:22px}
.quiz-foot.good{color:#2e9e5b;font-size:1.1rem}.quiz-foot.bad{color:#e24b4a;font-size:1.1rem}
.quiz-podium{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin:14px 0}
.quiz-pod{text-align:center}
.quiz-pod img{width:54px;height:54px;object-fit:contain;margin-bottom:5px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.3))}
.quiz-pod .qp-bar{border-radius:12px 12px 0 0;padding:12px 16px;color:#412402;display:flex;flex-direction:column;gap:1px}
.quiz-pod.p1 .qp-bar{background:linear-gradient(160deg,#ffe082,#ffc107);padding-top:22px}
.quiz-pod.p2 .qp-bar{background:#d3d1c7;color:#2c2c2a}
.quiz-pod .qp-rank{font-family:var(--font);font-weight:900;font-size:1.2rem}
.quiz-pod .qp-bar b{font-size:1.05rem}.quiz-pod .qp-bar small{font-size:.72rem;font-weight:700}
.quiz-final{text-align:center;font-size:.95rem;color:var(--ink);margin:4px 0}
/* 🧠👥 sala multijogador: leaderboard horizontal + lista do pódio */
.room-players{display:flex;flex-direction:column;gap:5px;max-width:430px;margin:0 auto}
.room-board{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;overflow-x:auto;padding:2px}
.qlb-p{display:flex;flex-direction:column;align-items:center;gap:1px;background:#fff;border-radius:12px;padding:5px 8px;min-width:58px;box-shadow:0 2px 5px rgba(0,0,0,.1);transition:transform .2s}
html.dark .qlb-p{background:#16242c;color:#e7eef0}
.qlb-p.lead{box-shadow:0 0 0 2px #ffc107,0 3px 8px rgba(243,151,15,.4)}
.qlb-p.me{outline:2px solid #46d6a0}
.qlb-p img{width:30px;height:30px;object-fit:contain;border-radius:50%;background:rgba(0,0,0,.06)}
.qlb-n{font-weight:700;font-size:.66rem;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qlb-p b{font-family:var(--font);color:#f3970f;font-size:.95rem}
.quiz-pod.p3 .qp-bar{background:#f5c4b3;color:#4a1b0c}
.quiz-rest{max-width:300px;margin:6px auto 0;display:flex;flex-direction:column;gap:3px}
.qrk-row{display:flex;align-items:center;gap:8px;font-size:.82rem;padding:3px 8px;background:rgba(0,0,0,.04);border-radius:10px}
html.dark .qrk-row{background:rgba(255,255,255,.06)}
.qrk-row img{width:22px;height:22px;object-fit:contain;border-radius:50%}.qrk-n{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrk-row b{color:#f3970f}
/* 🐉 Raid ao Chefe em equipa */
.raid-btn{background:linear-gradient(160deg,#ff6b6b,#c0392b)!important;color:#fff!important}
.raid-hud{display:flex;flex-direction:column;gap:6px;padding:6px 10px;background:linear-gradient(180deg,rgba(42,14,20,.55),transparent)}
.raid-boss{display:flex;align-items:center;gap:10px;max-width:560px;margin:0 auto;width:100%}
.raid-boss img{width:48px;height:48px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.raid-boss img.raid-hit{animation:raidHit .3s ease}
@keyframes raidHit{0%{transform:translateX(0)}25%{transform:translateX(-4px) scale(1.06)}50%{transform:translateX(4px)}100%{transform:translateX(0)}}
.raid-bossinfo{flex:1;min-width:0}
.raid-bn{font-family:var(--font);font-weight:900;color:#fff;font-size:.9rem;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.raid-hpbar{position:relative;height:18px;border-radius:10px;background:rgba(0,0,0,.45);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.6);margin-top:2px}
.raid-hpbar i{position:absolute;inset:0;width:100%;background:linear-gradient(90deg,#e24b4a,#ff7a5a);border-radius:10px;transition:width .35s ease}
.raid-hpbar i.low{background:linear-gradient(90deg,#a32d2d,#e24b4a)}
.raid-hpbar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font);font-weight:800;font-size:.7rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.raid-team{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.raid-p{position:relative;display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.12);border-radius:10px;padding:2px 7px}
.raid-p.me{outline:2px solid #46d6a0}
.raid-p img{width:24px;height:24px;object-fit:contain;border-radius:50%}
.raid-p b{font-family:var(--font);color:#ffd24d;font-size:.74rem}
.raid-mvp{position:absolute;top:-6px;right:-4px;font-size:.7rem}
.game.raid-on .objective{display:none}
/* 🎨 cosméticos: temas de tabuleiro */
.scene.scene-dim{opacity:.22}
.cos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:480px;margin:8px auto;padding:0 4px}
.cos-card{background:#fff;border-radius:16px;padding:10px;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.1);border:2px solid transparent}
html.dark .cos-card{background:#16242c;color:#e7eef0}
.cos-card.on{border-color:#46d6a0}
.cos-prev{height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:7px;box-shadow:inset 0 2px 8px rgba(0,0,0,.25)}
.cos-name{font-weight:800;font-size:.85rem;margin-bottom:7px;color:var(--ink)}
html.dark .cos-name{color:#e7eef0}
.cos-card .btn{width:100%}
.cos-buy{background:linear-gradient(160deg,#ffe082,#ffc107)!important;color:#0a1f3c!important}
.cos-use{background:linear-gradient(160deg,#46d6a0,#2e9e5b)!important;color:#fff!important}
.cos-eq{opacity:.7}
.shop-cos{cursor:pointer}
/* separadores Tabuleiros/Peças */
.cos-tabs{display:flex;gap:8px;max-width:340px;margin:6px auto 2px}
.cos-tab{flex:1;border:0;border-radius:999px;padding:9px 12px;font-weight:800;font-size:.9rem;background:rgba(255,255,255,.14);color:#cfe0ea;cursor:pointer}
html.dark .cos-tab{background:rgba(255,255,255,.08)}
.cos-tab.on{background:linear-gradient(90deg,#14a06f,#0c8a5e);color:#fff}
/* pré-visualização das skins (mini-peças) */
.cos-prev-sk{gap:7px;background:linear-gradient(160deg,#1b3247,#0d1d2b)}
.cos-gem{width:28px;height:28px;border-radius:42%;background:var(--bg);border:1px solid var(--rim);
  box-shadow:inset 0 6px 8px rgba(255,255,255,.6),inset 0 -7px 10px rgba(0,0,0,.4),0 3px 6px rgba(0,0,0,.4);filter:saturate(1.2)}

/* 🧩 SKINS DE PEÇAS — afetam .gem-body (no jogo) e .cos-gem (na pré-visualização) */
.pskin-bubble .gem-body,.pskin-bubble .cos-gem{border-radius:50%;
  box-shadow:inset 0 12px 14px rgba(255,255,255,.9),inset 0 -10px 16px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.3),0 6px 12px rgba(0,0,0,.4)}
.pskin-bubble .gem-body::before{width:60%;height:46%;background:radial-gradient(ellipse at 42% 38%,rgba(255,255,255,1),rgba(255,255,255,.55) 45%,transparent 72%)}
.pskin-neon .gem-body,.pskin-neon .cos-gem{border-radius:32%;border:2px solid var(--glow,#fff);
  box-shadow:0 0 8px var(--glow,#fff),0 0 16px var(--glow,#fff),inset 0 0 12px rgba(0,0,0,.55);filter:saturate(1.4) brightness(1.05)}
.pskin-neon .gem-body::before{opacity:.3}
.pskin-neon .gem-ico svg{filter:drop-shadow(0 0 3px var(--glow,#fff))}
.pskin-retro .gem-body,.pskin-retro .cos-gem{border-radius:12%;border:3px solid rgba(0,0,0,.45);
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.28),inset 4px 4px 0 rgba(255,255,255,.45);filter:saturate(1.5) contrast(1.15);animation:none}
.pskin-retro .gem-body::before,.pskin-retro .gem-body::after{display:none}
.pskin-ice .gem-body,.pskin-ice .cos-gem{border-radius:38%;border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 8px 12px rgba(255,255,255,.85),inset 0 -8px 14px rgba(120,180,220,.5),0 0 12px rgba(170,225,255,.7),0 5px 10px rgba(0,0,0,.35);filter:saturate(.85) brightness(1.1)}
.pskin-ice .gem-body::after{background:radial-gradient(circle,rgba(200,240,255,.75),transparent 70%)}
.pskin-gold .gem-body,.pskin-gold .cos-gem{border-radius:40%;border:2px solid #e9c659;
  box-shadow:inset 0 8px 10px rgba(255,255,255,.7),inset 0 -8px 12px rgba(120,80,0,.5),0 0 10px rgba(255,210,80,.85),0 6px 12px rgba(0,0,0,.45)}
.pskin-gold .gem-body::before{background:radial-gradient(ellipse at 42% 38%,rgba(255,250,210,1),rgba(255,235,150,.5) 45%,transparent 72%)}

/* 📳 SCREEN-SHAKE do tabuleiro (combos/explosões grandes) */
.board.shake-1{animation:shake1 .34s ease}
.board.shake-2{animation:shake2 .40s ease}
.board.shake-3{animation:shake3 .42s ease}
@keyframes shake1{10%,90%{transform:translate(-1px,0)}30%,70%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}}
@keyframes shake2{10%,90%{transform:translate(-2px,1px)}25%,75%{transform:translate(3px,-2px)}50%{transform:translate(-4px,2px) rotate(-.4deg)}}
@keyframes shake3{10%,90%{transform:translate(-3px,2px) rotate(.3deg)}25%,75%{transform:translate(5px,-3px) rotate(-.5deg)}50%{transform:translate(-6px,3px) rotate(.6deg)}}
@media (prefers-reduced-motion:reduce){.board.shake-1,.board.shake-2,.board.shake-3{animation:none}}
/* 👏 emotes nas partidas online */
.emote-fab{position:fixed;right:12px;bottom:14px;z-index:60;display:flex;align-items:center;gap:8px}
.emote-toggle{width:46px;height:46px;border-radius:50%;border:0;background:linear-gradient(160deg,#ffd24d,#f3970f);font-size:1.4rem;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3);flex:0 0 auto}
.emote-toggle:active{transform:scale(.92)}
.emote-row{display:flex;gap:4px;background:rgba(255,255,255,.96);border-radius:26px;padding:5px 8px;box-shadow:0 4px 14px rgba(0,0,0,.25);transform-origin:right center;transform:scale(.2);opacity:0;pointer-events:none;transition:transform .2s,opacity .2s}
html.dark .emote-row{background:#16242c}
.emote-fab.open .emote-row{transform:scale(1);opacity:1;pointer-events:auto}
.emote-pick{border:0;background:transparent;font-size:1.5rem;cursor:pointer;padding:2px;line-height:1;border-radius:8px}
.emote-pick:active{transform:scale(1.3)}
.emote-pop{position:fixed;left:50%;bottom:38%;z-index:61;display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:none;opacity:0;transform:translate(-50%,12px) scale(.6)}
.emote-pop.mine{left:auto;right:14%}
.emote-pop.foe{left:14%}
.emote-pop.in{opacity:1;transform:translate(-50%,0) scale(1);transition:opacity .25s,transform .3s cubic-bezier(.2,1.4,.4,1)}
.emote-pop.mine.in,.emote-pop.foe.in{transform:translate(0,0) scale(1)}
.emote-pop.out{opacity:0;transform:translate(-50%,-40px) scale(.9);transition:opacity .4s,transform .4s}
.emote-pop.mine.out,.emote-pop.foe.out{transform:translate(0,-40px) scale(.9)}
.emote-em{font-size:3rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.emote-nick{font-family:var(--font);font-weight:800;font-size:.7rem;color:#fff;background:rgba(0,0,0,.5);padding:1px 8px;border-radius:10px}
@media(prefers-reduced-motion:reduce){.arena-turn.urgent .at-clock{animation:none}}
.duel-side .board-wrap{width:100%;padding:0;display:flex;justify-content:center}
.duel-on .board{width:100%;max-width:none}
.foe-board{pointer-events:none}
.df-label{display:flex;align-items:center;gap:5px;margin-bottom:5px;justify-content:center;max-width:100%}
.df-label img{width:clamp(22px,4.5vw,32px);height:clamp(22px,4.5vw,32px);object-fit:contain;border-radius:50%;background:rgba(255,255,255,.18)}
.df-label span{font-size:clamp(.66rem,2.6vw,1rem);font-weight:800;color:#fff;font-family:var(--font);text-shadow:0 1px 3px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 👾 CHEFE ANIMADO (sprite no painel do adversário) */
.boss-sprite{transform-origin:center bottom;will-change:transform;animation:bossIdle 2.6s ease-in-out infinite}
@keyframes bossIdle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10%) rotate(-2deg)}}
.boss-sprite.react-taunt{animation:bossTaunt .6s ease}
@keyframes bossTaunt{0%{transform:scale(1)}28%{transform:scale(1.3) rotate(5deg) translateY(-8%)}55%{transform:scale(1.2) rotate(-4deg)}100%{transform:scale(1)}}
.boss-sprite.react-hit{animation:bossHit .6s ease}
@keyframes bossHit{0%{transform:scale(1)}20%{transform:scale(.78) rotate(-7deg);filter:brightness(2.2) saturate(.3)}55%{transform:scale(.9) rotate(6deg)}100%{transform:scale(1);filter:none}}
.boss-sprite.react-win{animation:bossWin 1.4s ease}
@keyframes bossWin{0%{transform:scale(1)}25%{transform:scale(1.35) rotate(-7deg)}50%{transform:scale(1.22) rotate(7deg)}75%{transform:scale(1.32) rotate(-5deg)}100%{transform:scale(1.18)}}
.boss-sprite.react-lose{animation:bossLose 1.4s ease forwards}
@keyframes bossLose{0%{transform:scale(1)}30%{transform:scale(.68) rotate(13deg);filter:grayscale(.6)}100%{transform:scale(.5) rotate(22deg) translateY(12%);opacity:.45;filter:grayscale(.95)}}
@media (prefers-reduced-motion:reduce){.boss-sprite,.boss-sprite.react-taunt,.boss-sprite.react-hit,.boss-sprite.react-win,.boss-sprite.react-lose{animation:none}}
.duel-final{font-family:var(--font);font-weight:800;margin:4px 0 6px;color:var(--ink)}
.duel-final .dm{color:#2bb673}.duel-final .dfo{color:#c0392b}
@media (prefers-reduced-motion:reduce){.dv-race i{transition:none}}
@keyframes feverPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* especiais a CINTILAR (destacam-se) */
.gem[class*="sp-"]::after{content:'';position:absolute;inset:7%;border-radius:42%;pointer-events:none;z-index:0;
  box-shadow:0 0 10px 2px var(--glow,#fff);animation:spShimmer 1.4s ease-in-out infinite}
@keyframes spShimmer{0%,100%{opacity:.35}50%{opacity:.9}}

/* atração quando o jogador está parado */
.gem.attract .gem-body{animation:attractDance .8s ease-in-out}
.gem.attract{z-index:4}
@keyframes attractDance{0%,100%{transform:scale(1) rotate(0)}20%{transform:scale(1.18) rotate(-8deg)}45%{transform:scale(1.1) rotate(8deg)}70%{transform:scale(1.14) rotate(-5deg)}}

/* entrada do tabuleiro (deal-in) */
.board.dealing .gem-body{animation:dealIn .5s cubic-bezier(.2,1.5,.4,1) backwards}
@keyframes dealIn{0%{transform:scale(0) rotate(-30deg);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1) rotate(0);opacity:1}}

/* ---- INGREDIENTE (cai até ao fundo) ---- */
.gem.ingredient{position:absolute;top:0;left:0;display:grid;place-items:center;z-index:3;will-change:transform;
  transition:transform .26s cubic-bezier(.34,1.3,.5,1);pointer-events:none}
.gem.ingredient .ing-body{font-size:1.9rem;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));animation:ingBob 1.6s ease-in-out infinite}
@keyframes ingBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
.gem.ingredient.ing-collect{animation:ingCollect .36s ease-in forwards}
@keyframes ingCollect{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(.2) translateY(20px);opacity:0}}

/* ---- GEMA 3D ---- */
.gem{position:absolute;top:0;left:0;will-change:transform;cursor:grab;touch-action:none;
  transition:transform .26s cubic-bezier(.34,1.3,.5,1);display:grid;place-items:center;z-index:1}
.gem-body{position:absolute;inset:6%;border-radius:42%;
  background:var(--bg);border:1px solid var(--rim);
  box-shadow:
    inset 0 9px 12px rgba(255,255,255,.7),
    inset 0 -10px 14px rgba(0,0,0,.45),
    inset 0 0 0 2px rgba(255,255,255,.22),
    inset 0 0 14px rgba(255,255,255,.15),
    0 7px 12px rgba(0,0,0,.45);
  filter:saturate(1.2);
  animation:jelly 3.6s ease-in-out infinite;}
/* brilho superior forte (geleia/rebuçado) */
.gem-body::before{content:'';position:absolute;top:7%;left:13%;width:56%;height:40%;border-radius:50%;
  background:radial-gradient(ellipse at 42% 38%,rgba(255,255,255,.98),rgba(255,255,255,.5) 45%,rgba(255,255,255,0) 72%);transform:rotate(-16deg)}
/* brilho inferior (reflexo) */
.gem-body::after{content:'';position:absolute;bottom:9%;right:16%;width:34%;height:22%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.5),transparent 70%)}
.gem-ico{position:relative;z-index:2;width:68%;height:68%;display:grid;place-items:center;pointer-events:none}
.gem-ico svg{width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)) drop-shadow(0 0 1px rgba(0,0,0,.4))}
/* 👁️ MODO DALTÓNICO — símbolo geométrico distinto por tipo (não depender só da cor) */
html.cb .gem.t-sunny::before,html.cb .gem.t-breezy::before,html.cb .gem.t-splashy::before,
html.cb .gem.t-oily::before,html.cb .gem.t-smokey::before,html.cb .gem.t-gassy::before{
  position:absolute;top:4%;left:4%;z-index:5;width:36%;height:36%;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;font:900 clamp(8px,3vw,14px)/1 system-ui;
  display:grid;place-items:center;pointer-events:none;box-shadow:0 1px 2px rgba(0,0,0,.5)}
html.cb .gem.t-sunny::before{content:'●'}
html.cb .gem.t-breezy::before{content:'▲'}
html.cb .gem.t-splashy::before{content:'◆'}
html.cb .gem.t-oily::before{content:'■'}
html.cb .gem.t-smokey::before{content:'✚'}
html.cb .gem.t-gassy::before{content:'★'}
/* animações dos ícones de energia (movimento subtil e vivo) */
.gem-ico .spin{transform-box:fill-box;transform-origin:center;animation:sunSpin 18s linear infinite}
.gem.t-breezy .gem-ico .windspin{transform-box:view-box;transform-origin:50px 44px;animation:turbineSpin 4.5s linear infinite}
.gem.t-splashy .gem-ico svg{animation:waterBob 2.8s ease-in-out infinite}
.gem.t-gassy .gem-ico svg{transform-box:fill-box;transform-origin:50% 88%;animation:flameFlicker .55s ease-in-out infinite alternate}
.gem.t-oily .gem-ico svg{animation:oilPulse 3.2s ease-in-out infinite}
.gem.t-smokey .gem-ico svg{transform-box:fill-box;transform-origin:center;animation:coalEmber 2.4s ease-in-out infinite}

/* brilho a varrer o tabuleiro */
.sheen{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden;border-radius:20px}
.sheen::before{content:'';position:absolute;top:-50%;left:-70%;width:45%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 50%,transparent);
  transform:rotate(16deg);animation:sheenSweep 7s ease-in-out infinite}
.gem:nth-child(odd) .gem-body{animation-delay:.6s}
.gem:nth-child(3n) .gem-body{animation-delay:1.1s}

.gem.is-selected{z-index:5;transform-origin:center}
.gem.is-selected .gem-body{box-shadow:inset 0 6px 8px rgba(255,255,255,.45),inset 0 -7px 10px rgba(0,0,0,.45),0 0 0 4px #fff,0 0 18px var(--glow);transform:scale(1.12)}
.gem.shake{animation:shake .22s}
.gem.land .gem-body{animation:land .3s ease-out}
.gem.hint .gem-body{animation:hintPulse .7s infinite}
.gem.is-exploding{z-index:6}
.gem.is-exploding .gem-body{animation:explode .26s forwards}
.gem.is-exploding .gem-ico{animation:explode .26s forwards}
/* 🪙 peça-tesouro dourada */
.gem.treasure{--rim:#b8860b}
.gem.treasure .gem-body{box-shadow:inset 0 6px 8px rgba(255,255,255,.45),inset 0 -7px 10px rgba(0,0,0,.35),0 0 0 3px #ffd24d,0 0 14px 3px rgba(255,193,7,.9);animation:treasShine 1.3s ease-in-out infinite}
.gem.treasure::after{content:"🪙";position:absolute;top:3%;right:3%;font-size:.78em;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));pointer-events:none;z-index:4}
@keyframes treasShine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.32)}}
.gem.treasure.treasure-pop .gem-body{animation:treasPop .32s ease}
@keyframes treasPop{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@media (prefers-reduced-motion:reduce){.gem.treasure .gem-body,.gem.treasure.treasure-pop .gem-body{animation:none}}

/* especiais */
.gem.sp-striped-h .gem-body,.gem.sp-striped-v .gem-body{box-shadow:inset 0 6px 8px rgba(255,255,255,.5),inset 0 -7px 10px rgba(0,0,0,.45),0 5px 9px rgba(0,0,0,.4),0 0 14px var(--glow)}
.gem.sp-striped-h .gem-body::after{content:'';position:absolute;inset:18% 6%;border-radius:8px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.55) 0 3px,transparent 3px 8px)}
.gem.sp-striped-v .gem-body::after{content:'';position:absolute;inset:6% 18%;border-radius:8px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 3px,transparent 3px 8px)}
.gem.sp-wrapped .gem-body{animation:wrapPulse 1.1s infinite ease-in-out}
.gem.sp-wrapped .gem-body::after{content:'';position:absolute;inset:8%;border-radius:50%;border:3px solid rgba(255,255,255,.85)}
.gem.sp-color-bomb .gem-ico svg{animation:spinSlow 5s linear infinite}
.gem.sp-color-bomb .gem-body{box-shadow:inset 0 6px 8px rgba(255,255,255,.3),0 0 18px #fff,0 5px 9px rgba(0,0,0,.5)}
/* Peixe/Cometa (4 em quadrado) */
.gem.sp-fish .gem-body{animation:wrapPulse 1s infinite ease-in-out;box-shadow:inset 0 6px 8px rgba(255,255,255,.5),0 0 16px #7cf,0 5px 9px rgba(0,0,0,.4)}

/* badge MUITO visível nas peças especiais + brilho a pulsar */
.gem-badge{position:absolute;top:-2px;right:-2px;z-index:5;min-width:21px;height:21px;padding:0 3px;border-radius:11px;
  background:rgba(20,20,30,.7);color:#fff;font-size:.82rem;font-weight:800;display:grid;place-items:center;
  box-shadow:0 0 10px var(--glow),0 1px 3px rgba(0,0,0,.6);text-shadow:0 0 4px var(--glow);animation:bobble 1.2s infinite;pointer-events:none}
.gem.sp-striped-h .gem-body,.gem.sp-striped-v .gem-body,.gem.sp-wrapped .gem-body,.gem.sp-fish .gem-body,.gem.sp-color-bomb .gem-body,.gem.sp-nova .gem-body{
  outline:3px solid rgba(255,255,255,.85);outline-offset:-4px}
.gem.sp-striped-h,.gem.sp-striped-v,.gem.sp-wrapped,.gem.sp-fish,.gem.sp-color-bomb,.gem.sp-nova{animation:specialPulse 1.2s ease-in-out infinite}
/* peça NOVA (Raio Solar / Onda / Tornado) — aura giratória */
.gem.sp-nova .gem-body{animation:wrapPulse 1s infinite ease-in-out;box-shadow:inset 0 6px 8px rgba(255,255,255,.5),0 0 18px var(--glow),0 5px 9px rgba(0,0,0,.4)}
.gem.sp-nova .gem-body::after{content:'';position:absolute;inset:10%;border-radius:50%;border:3px dashed rgba(255,255,255,.8);animation:spinSlow 4s linear infinite}
@keyframes specialPulse{0%,100%{filter:drop-shadow(0 0 2px var(--glow))}50%{filter:drop-shadow(0 0 11px var(--glow)) brightness(1.14)}}

/* ---- GELO (obstáculo) ---- */
.ice{position:absolute;top:0;left:0;z-index:4;pointer-events:none;display:grid;place-items:center;will-change:transform}
.ice-body{position:absolute;inset:7%;border-radius:30%;
  background:linear-gradient(160deg,rgba(225,245,255,.78),rgba(150,205,235,.62));
  border:2px solid rgba(255,255,255,.85);
  box-shadow:inset 0 4px 8px rgba(255,255,255,.9),inset 0 -4px 8px rgba(90,150,190,.5),0 2px 6px rgba(0,0,0,.25);
  backdrop-filter:blur(1px);display:grid;place-items:center;font-size:1.1rem;color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(80,140,180,.6)}
.ice.ice-crack .ice-body{background:linear-gradient(160deg,rgba(225,245,255,.5),rgba(150,205,235,.4));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 0 8px rgba(255,255,255,.4)}
.ice.ice-break{animation:iceBreak .38s ease-out forwards}

/* FUMO (obstáculo — dissipa ao combinar ao lado) */
.fog{position:absolute;top:0;left:0;z-index:5;pointer-events:none;display:grid;place-items:center;will-change:transform}
.fog-body{position:absolute;inset:4%;border-radius:34%;display:grid;place-items:center;font-size:1.3rem;
  background:radial-gradient(circle at 38% 32%,rgba(120,120,130,.8),rgba(40,40,52,.92));
  border:2px solid rgba(255,255,255,.14);box-shadow:inset 0 4px 8px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.4);
  filter:blur(.5px);animation:fogDrift 3.2s ease-in-out infinite}
.fog.fog-break{animation:fogClear .42s ease-out forwards}
@keyframes fogDrift{0%,100%{opacity:.92;transform:scale(1) rotate(0)}50%{opacity:1;transform:scale(1.05) rotate(2deg)}}
@keyframes fogClear{to{opacity:0;transform:scale(1.5)}}
/* 🛢️ alcatrão: prende a peça (Oily); liberta-se combinando AO LADO */
.tar{position:absolute;top:0;left:0;z-index:5;pointer-events:none;display:grid;place-items:center;will-change:transform}
.tar-body{position:absolute;inset:5%;border-radius:38%;display:grid;place-items:center;font-size:1.15rem;
  background:radial-gradient(circle at 38% 30%,rgba(90,30,156,.72),rgba(18,6,32,.93));
  border:2px solid rgba(206,147,250,.42);box-shadow:inset 0 0 10px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.5);
  animation:tarOoze 2.6s ease-in-out infinite}
.tar.tar-crack .tar-body{box-shadow:inset 0 0 8px rgba(0,0,0,.5),0 0 12px rgba(206,147,250,.7)}
.tar.tar-break{animation:tarBreak .42s ease-out forwards}
@keyframes tarOoze{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes tarBreak{to{opacity:0;transform:scale(1.4) rotate(-8deg)}}
@media (prefers-reduced-motion:reduce){.tar-body{animation:none}}
/* fumo a ALASTRAR (nasce a crescer) */
.fog.fog-spread{animation:fogSpread .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes fogSpread{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.15)}100%{transform:scale(1)}}

/* ---- temporizador ---- */
.moves-box.timed span{color:#1f8fd0}
.moves-box.low-moves span{color:#e23b3b;animation:flashRed 1s infinite}

/* ---- efeitos dos especiais (raios / blast / bomba) ---- */
.fx{position:absolute;z-index:8;pointer-events:none}
.fx-row{background:linear-gradient(90deg,transparent,#fff,#ffe08a,#fff,transparent);box-shadow:0 0 18px #fff;animation:beamH .42s ease-out forwards}
.fx-col{background:linear-gradient(0deg,transparent,#fff,#ffe08a,#fff,transparent);box-shadow:0 0 18px #fff;animation:beamV .42s ease-out forwards}
.fx-blast{border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,200,80,.6),transparent 70%);animation:blast .45s ease-out forwards}
.fx-bomb{background:radial-gradient(circle at center,rgba(255,255,255,.85),rgba(120,180,255,.3),transparent 60%);animation:bombFlash .5s ease-out forwards}
.fx-fish{position:absolute;z-index:9;font-size:1.6rem;transform:translate(-50%,-50%);filter:drop-shadow(0 0 8px #7cf);animation:fishFly .55s ease-in forwards}
@keyframes fishFly{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1}100%{opacity:1;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1)}}
@keyframes beamH{0%{opacity:0;transform:scaleX(.2)}30%{opacity:1;transform:scaleX(1)}100%{opacity:0}}
@keyframes beamV{0%{opacity:0;transform:scaleY(.2)}30%{opacity:1;transform:scaleY(1)}100%{opacity:0}}
/* feixes DIAGONAIS da peça NOVA */
.fx-diag{width:170%;height:7%;margin-left:-85%;margin-top:-3.5%;border-radius:6px;
  background:linear-gradient(90deg,transparent,#fff,#ffe08a,#fff,transparent);box-shadow:0 0 16px #fff}
.fx-diag-a{animation:diagA .52s ease-out forwards}
.fx-diag-b{animation:diagB .52s ease-out forwards}
@keyframes diagA{0%{opacity:0;transform:rotate(45deg) scaleX(.2)}35%{opacity:1;transform:rotate(45deg) scaleX(1)}100%{opacity:0;transform:rotate(45deg) scaleX(1)}}
@keyframes diagB{0%{opacity:0;transform:rotate(-45deg) scaleX(.2)}35%{opacity:1;transform:rotate(-45deg) scaleX(1)}100%{opacity:0;transform:rotate(-45deg) scaleX(1)}}
@keyframes blast{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.3)}}
@keyframes bombFlash{0%{opacity:0;transform:scale(.5)}40%{opacity:1}100%{opacity:0;transform:scale(1.2)}}

/* ---- partículas / explosão ---- */
.shard{position:absolute;z-index:8;width:9px;height:9px;border-radius:2px;transform:translate(-50%,-50%);
  box-shadow:0 0 6px rgba(255,255,255,.7);animation:shardFly .55s ease-out forwards;pointer-events:none}
.shockwave{position:absolute;z-index:7;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);
  border:3px solid rgba(255,255,255,.9);box-shadow:0 0 14px rgba(255,255,255,.6);pointer-events:none;animation:shock .5s ease-out forwards}
.mega-popup{position:absolute;z-index:10;transform:translate(-50%,-50%);font-weight:800;font-size:1.3rem;
  color:#fff;background:linear-gradient(180deg,#ffd24d,#ff8a3d);-webkit-background-clip:text;background-clip:text;
  text-shadow:0 0 10px #ffb300,0 2px 4px rgba(0,0,0,.6);pointer-events:none;white-space:nowrap;animation:megaPop 1.1s ease-out forwards;letter-spacing:.5px}
.gem.born .gem-body{animation:bornFlash .5s cubic-bezier(.3,1.6,.5,1)}
.gem.born{z-index:6}
/* reação ao TOQUE */
.gem.gem-tap .gem-body{animation:gemTap .28s ease-out}
@keyframes gemTap{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.gem.gem-tap .gem-ico{animation:gemTap .28s ease-out}
/* brilho ao TROCAR/arrastar */
.gem.gem-swap{z-index:5}
.gem.gem-swap .gem-body{box-shadow:inset 0 6px 8px rgba(255,255,255,.5),0 0 0 3px rgba(255,255,255,.85),0 0 18px var(--glow)}

/* ---- popups ---- */
.point-popup{position:absolute;z-index:9;font-weight:800;font-size:1.4rem;color:#fff;text-shadow:0 2px 4px #000,0 0 8px var(--amber);transform:translate(-50%,0);pointer-events:none;animation:floatUp 1s forwards}
.point-popup.special{font-size:1.9rem;color:#ffe08a}
.combo-popup{position:fixed;top:30%;left:50%;transform:translateX(-50%);z-index:360;background:linear-gradient(180deg,#ffd24d,#ff6a3d 55%,#ec4899);color:#fff;font-weight:800;font-size:2rem;padding:16px 36px;border-radius:999px;box-shadow:0 0 40px rgba(255,170,60,.9),0 10px 30px rgba(0,0,0,.5);text-shadow:0 2px 6px rgba(0,0,0,.5),0 0 14px #fff;animation:comboPop 1.8s cubic-bezier(.2,1.6,.4,1) forwards;text-align:center;max-width:94vw;border:3px solid rgba(255,255,255,.85);letter-spacing:.5px}
/* flash de ecrã para combos */
.combo-flash{position:fixed;inset:0;z-index:340;pointer-events:none;animation:comboFlash .55s ease-out forwards}
@keyframes comboFlash{0%{opacity:0}15%{opacity:.85}100%{opacity:0}}

/* COMBO METER (cascatas encadeadas) */
.combo-meter{position:absolute;left:8px;top:50%;transform:translateY(-50%);z-index:55;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:linear-gradient(160deg,rgba(0,0,0,.5),rgba(0,0,0,.28));
  border:2px solid var(--g,#ffd24d);border-radius:14px;padding:8px 9px;
  box-shadow:0 0 18px -2px var(--g,#ffd24d)}
.combo-meter .cm-label{font:900 .58rem var(--font);color:#fff;letter-spacing:1px;opacity:.85}
.combo-meter .cm-num{font:900 1.5rem var(--font);color:#fff;text-shadow:0 0 12px var(--g,#ffd24d),0 2px 4px rgba(0,0,0,.6);line-height:1}
.combo-meter .cm-bar{width:11px;height:64px;border-radius:6px;background:rgba(255,255,255,.16);overflow:hidden;display:flex;align-items:flex-end}
.combo-meter .cm-bar i{display:block;width:100%;background:linear-gradient(0deg,var(--g,#ffd24d),#fff);border-radius:6px;transition:height .25s cubic-bezier(.34,1.4,.5,1)}
.combo-meter.pulse{animation:cmPulse .32s ease-out}
.combo-meter.cm-out{animation:cmOut .3s ease-in forwards}
@keyframes cmPulse{0%{transform:translateY(-50%) scale(1)}42%{transform:translateY(-50%) scale(1.2)}100%{transform:translateY(-50%) scale(1)}}
@keyframes cmOut{to{opacity:0;transform:translateY(-50%) scale(.6)}}

/* TELEGRAFAR ESPECIAL: halo a "carregar" onde vai nascer a peça especial */
.sp-telegraph{position:absolute;z-index:8;pointer-events:none;display:grid;place-items:center}
.sp-telegraph::before{content:'';position:absolute;width:30%;height:30%;border-radius:50%;
  background:radial-gradient(circle,#fff,var(--g) 60%,transparent 72%);
  box-shadow:0 0 18px 4px var(--g);animation:spTele .6s ease-out forwards}
.sp-telegraph::after{content:'';position:absolute;width:24%;height:24%;border-radius:50%;border:3px solid var(--g);
  animation:spRing .6s ease-out forwards}
@keyframes spTele{0%{transform:scale(.2);opacity:0}30%{opacity:1}100%{transform:scale(2.6);opacity:0}}
@keyframes spRing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.4);opacity:0}}

/* MASCOTE da personagem no HUD, junto à pontuação (reage ao desempenho) — NUNCA sobre o tabuleiro */
.game-hero{width:34px;height:34px;object-fit:contain;flex-shrink:0;pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));transition:filter .3s;animation:ghIdle 3.2s ease-in-out infinite;transform-origin:bottom center}
.game-hero.happy{animation:ghHappy .65s ease-out}
.game-hero.worried{animation:ghWorried .42s ease-in-out infinite;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)) drop-shadow(0 0 7px #ff5a5a) saturate(.7)}
@keyframes ghIdle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(1.5deg)}}
@keyframes ghHappy{0%{transform:scale(1) rotate(0)}28%{transform:scale(1.28) rotate(-8deg)}58%{transform:scale(1.12) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
@keyframes ghWorried{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-3px) rotate(-5deg)}75%{transform:translateX(3px) rotate(5deg)}}
/* CADEIA ULTRA (x6+) */
.ultra-fx{position:absolute;inset:0;z-index:75;pointer-events:none;overflow:hidden}
.ultra-fx .ultra-rainbow{position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,0,90,.25),rgba(255,200,0,.25),rgba(0,200,120,.25),rgba(0,160,255,.25),rgba(160,80,255,.25));background-size:300% 300%;animation:ultraRainbow 1s ease-out forwards;mix-blend-mode:screen}
.ultra-fx .ultra-label{position:absolute;top:36%;left:50%;transform:translateX(-50%);font-family:var(--font);font-weight:900;font-size:2.2rem;color:#fff;white-space:nowrap;text-shadow:0 0 18px #fff,0 0 28px #ff3d6e,0 3px 8px rgba(0,0,0,.6);animation:multPop .9s cubic-bezier(.2,1.7,.4,1) forwards}
@keyframes ultraRainbow{0%{opacity:0;background-position:0% 50%}25%{opacity:1}100%{opacity:0;background-position:100% 50%}}
/* rebentamento de estrelas ao subir de nível */
.lu-burst{position:fixed;left:50%;top:36%;z-index:436;pointer-events:none}
.lu-burst i{position:absolute;left:0;top:0;font-style:normal;font-size:1.2rem;animation:luBurst .9s ease-out forwards}
@keyframes luBurst{0%{transform:translate(0,0) scale(.4);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}

/* câmara-lenta dramática (zoom + escurecer o cenário) */
.game.slowmo .board{animation:slowmoZoom .7s cubic-bezier(.2,.9,.3,1)}
.game.slowmo .scene{animation:slowmoDim .7s ease-out}
@keyframes slowmoZoom{0%{transform:scale(1)}30%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes slowmoDim{0%{filter:blur(5px) brightness(.82) saturate(1.15)}35%{filter:blur(7px) brightness(.5) saturate(1.4)}100%{filter:blur(5px) brightness(.82) saturate(1.15)}}

/* tremor de ecrã */
.shake-screen{animation:screenShake .42s ease-in-out}
/* tremor SÓ horizontal — não faz o tabuleiro "subir e baixar" */
@keyframes screenShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-5px) rotate(-.5deg)}30%{transform:translateX(5px) rotate(.5deg)}45%{transform:translateX(-4px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
/* raio radial do combo */
.combo-ray{position:fixed;left:50%;top:42%;height:3px;width:60vmax;transform-origin:left center;z-index:345;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.9),transparent);animation:comboRay .5s ease-out forwards}
@keyframes comboRay{0%{opacity:0;transform:translate(-0%) scaleX(0)}25%{opacity:1}100%{opacity:0;transform:scaleX(1)}}
@keyframes floatUp{0%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-60px)}}
@keyframes comboPop{0%{opacity:0;transform:translateX(-50%) scale(.3) rotate(-6deg)}18%{opacity:1;transform:translateX(-50%) scale(1.3) rotate(2deg)}30%{transform:translateX(-50%) scale(1.05) rotate(0)}80%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.1) translateY(-20px)}}

/* barra de dicas: pílula escura legível, ALTURA FIXA (não empurra o tabuleiro) */
.tip-bar{flex-shrink:0;box-sizing:border-box;margin:2px auto 8px;max-width:520px;width:calc(100% - 24px);height:50px;
  display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;
  font-size:.82rem;font-weight:700;color:#fff;line-height:1.2;
  background:rgba(8,20,30,.62);border:1px solid rgba(255,255,255,.18);border-radius:13px;
  padding:6px 14px;box-shadow:0 2px 8px rgba(0,0,0,.3);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.tip-bar.tip-in{animation:tipIn .4s ease-out}
@keyframes tipIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}

/* ===== balão do PATROCINADOR (slogan que enche, flutua e rebenta) ===== */
/* seletor .game>.sp-balloon: vence o genérico .game>*:not(.scene){position:relative;z-index:1} */
.game>.sp-balloon{position:absolute;left:50%;bottom:66px;z-index:14;cursor:pointer;touch-action:manipulation;
  display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);
  animation:spbFloat 2.6s ease-in-out 3s infinite}
.spb-body{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:235px;padding:14px 18px 18px;text-align:center;
  background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.5),transparent 55%),var(--bc,#2E9E5B);
  border-radius:50% 50% 48% 48% / 55% 55% 44% 44%;
  box-shadow:0 8px 22px rgba(0,0,0,.32),inset 0 -10px 18px rgba(0,0,0,.18);
  color:#fff;transform-origin:50% 100%;animation:spbInflate 2.8s cubic-bezier(.34,1.56,.64,1) both}
.spb-body img{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:12px;padding:5px;pointer-events:none}
.spb-body span{font-weight:800;font-size:.82rem;line-height:1.25;text-shadow:0 1px 3px rgba(0,0,0,.4);pointer-events:none}
.spb-string{width:2px;height:26px;background:rgba(255,255,255,.7);border-radius:2px}
@keyframes spbInflate{0%{transform:scale(.12);opacity:0}40%{opacity:1}100%{transform:scale(1)}}
@keyframes spbFloat{0%,100%{transform:translateX(-50%) rotate(-2deg)}50%{transform:translateX(-50%) translateY(-7px) rotate(2deg)}}
.game>.sp-balloon.spb-wander{animation:none}
.sp-balloon.spb-pop{animation:none}
.sp-balloon.spb-pop .spb-body{animation:spbPop .35s ease-in both}
.sp-balloon.spb-pop .spb-string{opacity:0}
@keyframes spbPop{0%{transform:scale(1)}55%{transform:scale(1.28)}100%{transform:scale(.05);opacity:0}}
.spb-bit{position:absolute;left:50%;top:40%;width:var(--s,9px);height:var(--s,9px);border-radius:50%;background:var(--c,var(--bc,#2E9E5B));
  box-shadow:0 0 6px rgba(255,255,255,.55);animation:spbBit var(--d,.7s) ease-out both;pointer-events:none}
.spb-bit.sq{border-radius:3px}
@keyframes spbBit{to{transform:translate(var(--dx,0),var(--dy,-60px)) scale(.2) rotate(var(--rot,200deg));opacity:0}}
.spb-ring{position:absolute;left:50%;top:40%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  border:4px solid rgba(255,255,255,.95);box-shadow:0 0 14px var(--bc,#2E9E5B);animation:spbRing .5s ease-out both;pointer-events:none}
@keyframes spbRing{to{transform:scale(10);opacity:0;border-width:1px}}

/* ===== pontos voam para a pontuação acumulada ===== */
.pt-fly{position:fixed;z-index:600;transform:translate(-50%,-50%);font-weight:900;font-size:1.25rem;color:#ffe24d;
  text-shadow:0 2px 4px rgba(0,0,0,.7),0 0 10px #ffb300;pointer-events:none;
  transition:transform .5s cubic-bezier(.5,-.2,.7,1),opacity .5s ease-in}
.pt-fly.big{font-size:1.9rem}
.pt-fly.show{animation:ptPop .34s cubic-bezier(.2,1.6,.4,1)}
@keyframes ptPop{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}60%{transform:translate(-50%,-50%) scale(1.25);opacity:1}100%{transform:translate(-50%,-50%) scale(1)}}
.score-line b.score-bump{display:inline-block;animation:scoreBump .32s ease-out}
@keyframes scoreBump{0%{transform:scale(1)}40%{transform:scale(1.5);color:#ffe24d;text-shadow:0 0 12px #ffb300}100%{transform:scale(1)}}

/* ===== núcleo de explosão (flash) ===== */
.pop-ring{position:absolute;z-index:8;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,#fff 0%,var(--col) 55%,transparent 72%);box-shadow:0 0 18px var(--col);animation:popRing .4s ease-out forwards}
@keyframes popRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}

/* ===== supernova ao criar a SUPER peça (dois especiais) ===== */
.fx-supernova{border-radius:50%;background:radial-gradient(circle,#fff,rgba(180,120,255,.7),rgba(80,160,255,.3),transparent 70%);box-shadow:0 0 44px rgba(180,120,255,.9);animation:supernova .7s ease-out forwards}
@keyframes supernova{0%{opacity:0;transform:scale(.2) rotate(0)}40%{opacity:1;transform:scale(1.2) rotate(120deg)}100%{opacity:0;transform:scale(1.7) rotate(220deg)}}
/* SUPER ENERGIA limpa/fóssil — flash de ecrã temático */
.fx-superclean{background:radial-gradient(circle at center,rgba(255,255,255,.9),rgba(60,210,150,.55),rgba(30,160,110,.25),transparent 65%);animation:bombFlash .7s ease-out forwards}
.fx-superfossil{background:radial-gradient(circle at center,rgba(255,255,255,.85),rgba(255,120,40,.5),rgba(40,30,20,.4),transparent 65%);animation:bombFlash .7s ease-out forwards}
/* aura das peças super (na grelha) */
.gem.sp-super-clean .gem-body{box-shadow:0 0 14px 3px rgba(60,220,140,.9),inset 0 0 8px rgba(255,255,255,.6);animation:superPulseC 1s ease-in-out infinite}
.gem.sp-super-fossil .gem-body{box-shadow:0 0 14px 3px rgba(255,120,40,.9),inset 0 0 8px rgba(0,0,0,.4);animation:superPulseF 1s ease-in-out infinite}
@keyframes superPulseC{0%,100%{box-shadow:0 0 10px 2px rgba(60,220,140,.7)}50%{box-shadow:0 0 20px 6px rgba(60,220,140,1)}}
@keyframes superPulseF{0%,100%{box-shadow:0 0 10px 2px rgba(255,120,40,.7)}50%{box-shadow:0 0 20px 6px rgba(255,120,40,1)}}

/* ===== barra de energia tipo "pilha a carregar" + sobrecarga no fim ===== */
.sb-fill{overflow:hidden}
.sb-fill .sb-shine{position:absolute;inset:0;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:sbShine 1.3s linear infinite}
@keyframes sbShine{0%{transform:translateX(-130%)}100%{transform:translateX(320%)}}
.sb-track.charged{animation:chargeFlash .5s ease-in-out infinite}
.sb-track.charged .sb-fill{background:linear-gradient(90deg,#ffe24d,#ff5a2e);box-shadow:0 0 16px rgba(255,120,40,.95),0 0 30px rgba(255,90,40,.7)}
.sb-track.charged .sb-star{animation:starThrob .5s ease-in-out infinite}
@keyframes chargeFlash{0%,100%{filter:brightness(1)}50%{filter:brightness(1.75)}}
@keyframes starThrob{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.3)}}

/* ===== nome do PERSONAGEM ao rebentar peça especial (animação por personagem) ===== */
.char-word{position:absolute;z-index:11;transform:translate(-50%,-50%);font-family:var(--font);font-weight:900;font-size:1.5rem;letter-spacing:1px;
  color:#fff;-webkit-text-stroke:1px rgba(0,0,0,.35);text-shadow:0 0 12px var(--col),0 2px 6px rgba(0,0,0,.65);pointer-events:none;white-space:nowrap}
/* Mundial: remate "GOLO!" a cruzar o tabuleiro */
.goal-shot{position:absolute;left:-45%;top:50%;z-index:30;opacity:0;transform:translateY(-50%) rotate(-8deg) scale(.6);
  font-family:var(--font);font-weight:900;font-size:clamp(1.7rem,8.5vw,3.3rem);letter-spacing:1px;white-space:nowrap;pointer-events:none;
  color:#fff;-webkit-text-stroke:1.5px rgba(0,0,0,.4);text-shadow:0 0 24px var(--gc,#fff),3px 4px 0 rgba(0,0,0,.35)}
.goal-shot.gs-us{--gc:#19c37d}
.goal-shot.gs-them{--gc:#ff4d4d}
.goal-shot.go{animation:goalShoot 1s cubic-bezier(.18,.72,.25,1) forwards}
@keyframes goalShoot{0%{left:-50%;opacity:0;transform:translateY(-50%) rotate(-9deg) scale(.55)}
  16%{opacity:1}
  55%{left:26%;opacity:1;transform:translateY(-50%) rotate(2deg) scale(1.2)}
  100%{left:118%;opacity:0;transform:translateY(-50%) rotate(7deg) scale(1)}}
/* Mundial: frases de futebol a flutuar */
.footy-shout{position:absolute;z-index:12;transform:translate(-50%,-50%);font-family:var(--font);font-weight:800;font-size:clamp(1.05rem,4.6vw,1.65rem);
  color:#fff;-webkit-text-stroke:1px rgba(0,0,0,.3);text-shadow:0 2px 8px rgba(0,0,0,.55),0 0 14px rgba(255,210,80,.5);
  pointer-events:none;white-space:nowrap;animation:footyUp 1.15s ease-out forwards}
@keyframes footyUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.5) rotate(-6deg)}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(-2deg)}
  100%{opacity:0;transform:translate(-50%,-150%) scale(1) rotate(3deg)}}
.cw-sunny  {animation:cwSun 1.2s ease-out forwards}
.cw-breezy {animation:cwBreezy 1.2s ease-in-out forwards}   /* entra e sai a rodar */
.cw-splashy{animation:cwSplash 1.2s ease-out forwards}
.cw-oily   {animation:cwOily 1.2s ease-out forwards}
.cw-smokey {animation:cwSmokey 1.2s ease-out forwards}
.cw-gassy  {animation:cwGassy 1.2s ease-out forwards}
@keyframes cwSun{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-20deg)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.35)}55%{transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-130%) scale(1.15)}}
@keyframes cwBreezy{0%{opacity:0;transform:translate(-190%,-50%) rotate(-360deg) scale(.4)}35%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1.2)}68%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}100%{opacity:0;transform:translate(140%,-50%) rotate(360deg) scale(.5)}}
@keyframes cwSplash{0%{opacity:0;transform:translate(-50%,-210%) scale(.6)}42%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}56%{transform:translate(-50%,-42%) skewX(-7deg)}72%{transform:translate(-50%,-50%) skewX(7deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.05)}}
@keyframes cwOily{0%{opacity:0;transform:translate(-50%,40%) scale(.5)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-150%) scale(.9)}}
@keyframes cwSmokey{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1}32%{transform:translate(-55%,-50%) rotate(-4deg)}46%{transform:translate(-45%,-50%) rotate(4deg)}60%{transform:translate(-53%,-50%) rotate(-3deg)}76%{transform:translate(-47%,-50%) rotate(2deg)}100%{opacity:0;transform:translate(-50%,-95%) scale(1.1)}}
@keyframes cwGassy{0%{opacity:0;transform:translate(-50%,10%) scale(.6)}40%{opacity:.95;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-170%) scale(1.35)}}

/* ===== grelha de atividades (livro EIA) ===== */
.act-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;max-width:520px;margin:6px auto 4px}
.act-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border:none;border-radius:18px;cursor:pointer;
  background:linear-gradient(180deg,#fff,#eef3f1);box-shadow:0 4px 0 #cdd6d2,var(--shadow);font-family:var(--font);font-weight:800;color:var(--ink);transition:transform .1s}
.act-card:active{transform:translateY(3px);box-shadow:0 1px 0 #cdd6d2}
.act-card .act-ic{font-size:2rem;line-height:1}
.act-card .act-lbl{font-size:.85rem;text-align:center;line-height:1.1}

/* a TUA linha no ranking, destacada */
.lb-row.me{outline:3px solid var(--amber);background:linear-gradient(90deg,rgba(255,210,77,.28),rgba(255,210,77,.1));font-weight:800}
.lb-row.me .who small{color:var(--green);font-weight:800}
.lb-myrank{margin-top:10px;text-align:center;font-weight:800;background:rgba(255,255,255,.7);border-radius:14px;padding:10px;box-shadow:var(--shadow)}
.lb-week{text-align:center;font-weight:800;opacity:.75;margin:2px 0 8px}
.pl-loc{font-size:.8rem;font-weight:700;opacity:.85;text-align:right;max-width:62%}
.lb-myrank .muted{opacity:.6;font-weight:600}

/* painel de VIDAS */
.lives-panel{align-items:center;text-align:center}
.lives-big{font-size:2.2rem;letter-spacing:4px;margin:6px 0 4px}
.life-socials{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}
.life-socials .life-soc{display:inline-flex;align-items:center;gap:6px}
.life-socials .life-soc.done{opacity:.5}
.life-socials .life-soc svg{width:18px;height:18px}
.center{text-align:center}

/* fim de nível: anúncio "Nível Concluído!" sobre o tabuleiro + pontos extra */
.level-done{position:fixed;inset:0;z-index:420;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(0,0,0,.18);animation:ldFade .3s ease}
.level-done.out{animation:ldFadeOut .35s ease forwards}
.level-done .ld-inner{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--font);font-weight:900;font-size:3rem;color:#fff;animation:ldPop .5s cubic-bezier(.2,1.6,.4,1)}
.level-done .ld-inner span{font-size:1.9rem;background:linear-gradient(180deg,#ffe24d,#ff9d2e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
@keyframes ldFade{from{opacity:0}to{opacity:1}}
@keyframes ldFadeOut{to{opacity:0}}
@keyframes ldPop{0%{transform:scale(.3) rotate(-8deg);opacity:0}60%{transform:scale(1.15) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.extra-banner{position:fixed;top:24%;left:50%;transform:translateX(-50%);z-index:430;background:linear-gradient(180deg,#3ed598,#16a06f);color:#fff;font-family:var(--font);font-weight:900;font-size:1.35rem;padding:12px 26px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.4);pointer-events:none;animation:ebPop .4s cubic-bezier(.2,1.6,.4,1)}
.extra-banner.out{animation:ebOut .3s ease forwards}
.extra-banner span{font-weight:800;font-size:1rem;opacity:.95}
@keyframes ebPop{0%{transform:translate(-50%,12px) scale(.6);opacity:0}100%{transform:translate(-50%,0) scale(1);opacity:1}}
@keyframes ebOut{to{opacity:0;transform:translate(-50%,-14px)}}
.extra-banner.bonus-label{background:linear-gradient(180deg,#ffd24d,#ff9d2e);color:#5a3b00;font-size:1.2rem;padding:10px 24px}
/* BÓNUS de fim de nível: contador a contar para 0 + "+N" a subir */
#limitBox.bonus-on{animation:bonusPulse .5s ease-in-out infinite}
#limitBox.bonus-on span{color:var(--amber)!important}
@keyframes bonusPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14);filter:drop-shadow(0 0 9px var(--amber))}}
.bonus-plus{position:fixed;transform:translate(-50%,0);font-family:var(--font);font-weight:900;font-size:1.15rem;color:#1b8a4f;text-shadow:0 1px 3px rgba(0,0,0,.3);pointer-events:none;z-index:600;animation:bonusRise .72s ease-out forwards}
@keyframes bonusRise{0%{opacity:0;transform:translate(-50%,8px) scale(.7)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-40px) scale(1.15)}}
/* SUGAR CRUSH (jogadas extra → especiais) */
.sugar-banner{position:fixed;top:30%;left:50%;transform:translateX(-50%);z-index:430;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:linear-gradient(180deg,#ff8a3d,#ec4899);color:#fff;font-family:var(--font);font-weight:900;font-size:1.5rem;
  padding:12px 28px;border-radius:20px;box-shadow:0 8px 28px rgba(0,0,0,.45),0 0 30px rgba(255,140,80,.6);pointer-events:none;animation:ebPop .4s cubic-bezier(.2,1.6,.4,1)}
.sugar-banner span{font-size:1.05rem;opacity:.95}
.sugar-banner.out{animation:ebOut .3s ease forwards}
/* SEQUÊNCIA de vitórias */
.streak-banner{position:fixed;top:38%;left:50%;transform:translateX(-50%);z-index:430;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:linear-gradient(180deg,#ffb300,#ff5a3c);color:#fff;font-family:var(--font);font-weight:900;font-size:1.4rem;
  padding:10px 26px;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 26px rgba(255,120,40,.6);pointer-events:none;animation:ebPop .4s cubic-bezier(.2,1.6,.4,1)}
.streak-banner span{font-size:1rem;opacity:.95}
.streak-banner.out{animation:ebOut .3s ease forwards}
/* RECOMPENSA por marcos (baú) */
.treasure-banner{position:fixed;top:30%;left:50%;transform:translateX(-50%);z-index:435;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:linear-gradient(180deg,#ffd54f,#ff9d2e);color:#5a3a00;font-family:var(--font);font-weight:900;font-size:1.3rem;
  padding:14px 30px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 34px rgba(255,190,60,.7);pointer-events:none;animation:ebPop .45s cubic-bezier(.2,1.7,.4,1)}
.treasure-banner .tb-chest{font-size:2.6rem;animation:tbShake .5s ease-in-out 2}
.treasure-banner span{font-size:1rem;color:#7a5200}
.treasure-banner.out{animation:ebOut .32s ease forwards}
@keyframes tbShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
/* SUBIR DE NÍVEL */
.levelup-banner{position:fixed;top:32%;left:50%;transform:translateX(-50%);z-index:435;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:linear-gradient(180deg,#7c4dff,#3aa6ff);color:#fff;font-family:var(--font);font-weight:900;font-size:1.3rem;
  padding:14px 30px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 34px rgba(120,90,255,.7);pointer-events:none;animation:ebPop .45s cubic-bezier(.2,1.7,.4,1)}
.levelup-banner .lu-ico{font-size:2.4rem;animation:tbShake .5s ease-in-out 2}
.levelup-banner span{font-size:1rem;opacity:.95}
.levelup-banner.out{animation:ebOut .32s ease forwards}
/* MOEDAS a voar */
.coin-fly{position:fixed;z-index:1100;font-size:1.4rem;pointer-events:none;transform:translate(-50%,-50%);
  transition:transform .65s cubic-bezier(.5,-.3,.7,1),opacity .65s ease-in;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}

/* limpeza final temática — a personagem do mundo a varrer o tabuleiro */
.theme-sweep{position:fixed;inset:0;z-index:380;pointer-events:none;overflow:hidden}
.theme-sweep .ts-wave{position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,var(--g) 50%,transparent 68%);opacity:.62;transform:translateX(-100%);filter:blur(8px);animation:tsWave 2.1s ease-in-out forwards}
.theme-sweep .ts-hero{position:absolute;top:50%;left:-32%;width:min(34vw,170px);transform:translateY(-50%);filter:drop-shadow(0 8px 16px rgba(0,0,0,.45)) drop-shadow(0 0 22px var(--g));animation:tsHero 2.1s cubic-bezier(.4,0,.3,1) forwards}
.theme-sweep .ts-label{position:absolute;top:18%;left:50%;transform:translateX(-50%);font-family:var(--font);font-weight:900;font-size:1.7rem;color:#fff;text-shadow:0 0 14px var(--g),0 2px 6px rgba(0,0,0,.65);white-space:nowrap;animation:tsLabel 2.1s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes tsWave{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes tsHero{0%{left:-32%;transform:translateY(-50%) rotate(-10deg) scale(.9)}55%{transform:translateY(-56%) rotate(4deg) scale(1.12)}100%{left:120%;transform:translateY(-50%) rotate(10deg) scale(.95)}}
@keyframes tsLabel{0%{opacity:0;transform:translateX(-50%) scale(.6)}14%{opacity:1;transform:translateX(-50%) scale(1.08)}24%{transform:translateX(-50%) scale(1)}82%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(.96)}}

/* multiplicador GIGANTE de cascata */
.mult-pop{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:65;pointer-events:none;
  font-family:var(--font);font-weight:900;color:#fff;white-space:nowrap;
  text-shadow:0 0 18px var(--g,#ffd24d),0 0 8px var(--g,#ffd24d),0 4px 10px rgba(0,0,0,.6);
  animation:multPop .7s cubic-bezier(.2,1.7,.4,1) forwards}
@keyframes multPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(4deg)}40%{transform:translate(-50%,-50%) scale(1) rotate(0)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%) scale(1.05)}}

/* fundo a pulsar nas grandes cascatas */
.bg-pulse{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,var(--g,#ffd24d),transparent 62%);
  opacity:0;animation:bgPulse .6s ease-out forwards;mix-blend-mode:screen}
@keyframes bgPulse{0%{opacity:0}25%{opacity:.45}100%{opacity:0}}

/* fogo de artifício (vitória) */
.firework{position:fixed;z-index:910;pointer-events:none;width:0;height:0}
.firework i{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;
  animation:fwBurst .9s ease-out forwards;box-shadow:0 0 8px currentColor}
@keyframes fwBurst{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
/* chuva de estrelas (vitória) */
.star-rain{position:fixed;inset:0;z-index:905;pointer-events:none;overflow:hidden}
.star-rain i{position:absolute;top:-8%;font-style:normal;animation:starFall linear forwards}
@keyframes starFall{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(115vh) rotate(360deg);opacity:.2}}

/* elogio flutuante nos combos */
.praise-pop{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:60;pointer-events:none;
  font-family:var(--font);font-weight:900;font-size:2rem;color:#fff;white-space:nowrap;
  text-shadow:0 0 16px var(--g,#ffd24d),0 0 6px var(--g,#ffd24d),0 3px 8px rgba(0,0,0,.6);
  animation:praisePop 1s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes praisePop{0%{opacity:0;transform:translate(-50%,-30%) scale(.4) rotate(-6deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(3deg)}30%{transform:translate(-50%,-50%) scale(1) rotate(0)}72%{opacity:1;transform:translate(-50%,-60%) scale(1)}100%{opacity:0;transform:translate(-50%,-95%) scale(.92)}}

.mg-result{display:flex;flex-direction:column;align-items:center;gap:6px}
.mg-result .mg-continue{margin-top:16px}

/* Mito ou Verdade (entre níveis / atividades) */
.mt-card{text-align:center}
.mt-statement{font-size:1.2rem;font-weight:800;color:var(--ink);margin:10px 0 16px;line-height:1.35}
.mt-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.mt-btns .btn{font-size:1.1rem;padding:14px 24px;color:#fff}
.mt-true{background:linear-gradient(180deg,#3ed598,#16a06f);box-shadow:0 5px 0 #0b6e4f,var(--shadow)}
.mt-false{background:linear-gradient(180deg,#ff8a8a,#e23b3b);box-shadow:0 5px 0 #a82020,var(--shadow)}
.mt-btns .btn.right{outline:4px solid #ffd24d;transform:scale(1.06)}
.mt-btns .btn:disabled{opacity:.55}
.mt-reveal{margin-top:16px;font-weight:800;opacity:0;transition:opacity .3s}
.mt-reveal.show{opacity:1}
.mt-exp{display:block;font-weight:600;opacity:.85;margin-top:6px;font-size:.92rem}
.hidden{display:none}

/* ===== Roda da Sorte ===== */
.wheel-wrap{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:14px;padding:18px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.wheel-wrap>*{flex-shrink:0}
.wheel-pointer{font-size:1.9rem;color:#e23b3b;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));margin-bottom:-12px;z-index:2}
.wheel{position:relative;width:min(78vw,320px);height:min(78vw,320px);border-radius:50%;border:8px solid #fff;
  box-shadow:0 8px 24px rgba(0,0,0,.3),inset 0 0 0 4px rgba(0,0,0,.08);
  background:repeating-conic-gradient(#ffd86b 0 45deg,#ffe9a8 45deg 90deg)}
.wheel-seg{position:absolute;inset:0}
.wheel-seg span{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;line-height:1.05;font-weight:800;color:#5a3b00;font-size:1.1rem}
.wheel-seg span b{font-size:.72rem}

/* ===== Conquistas ===== */
.ach-grid{display:flex;flex-direction:column;gap:10px}
/* 🏆 VITRINE DE TROFÉUS */
.trophy-case{background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(240,246,252,.92));border-radius:20px;padding:16px;margin-bottom:14px;
  box-shadow:var(--shadow);border:2px solid color-mix(in srgb,var(--tcol,#ffd24d) 60%,#fff);text-align:center}
html.dark .trophy-case{background:linear-gradient(160deg,#1a2a33,#142028);color:#e7eef0}
.tc-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 16px;border-radius:999px;font-weight:900;
  background:color-mix(in srgb,var(--tcol,#ffd24d) 28%,#fff);color:#2d4658;box-shadow:0 2px 8px rgba(0,0,0,.15)}
html.dark .tc-badge{color:#fff;background:color-mix(in srgb,var(--tcol,#ffd24d) 24%,#16242c)}
.tc-emoji{font-size:1.5rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.tc-tier{letter-spacing:.5px}
.tc-prog{display:flex;align-items:center;gap:10px;margin:12px 4px 10px}
.tc-bar{flex:1;height:13px;background:rgba(0,0,0,.14);border-radius:999px;overflow:hidden}
.tc-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--tcol,#ffd24d),#fff7);transition:width .6s}
.tc-prog span{font-weight:800;font-size:.82rem;color:#5a6b7a;white-space:nowrap}
html.dark .tc-prog span{color:#cdd9dd}
.tc-shelf{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:10px 6px 4px;border-top:1px dashed rgba(0,0,0,.12);min-height:34px}
.tc-medal{font-size:1.7rem;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));animation:tcShine 2.6s ease-in-out infinite;cursor:default}
.tc-medal:nth-child(3n){animation-delay:.5s}.tc-medal:nth-child(3n+1){animation-delay:1s}
.tc-empty{opacity:.6;font-size:.85rem;font-style:italic}
@keyframes tcShine{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.tc-medal{animation:none}}
/* 🏆 modal de prémio do top semanal */
.prize-modal .pz-medal{font-size:3.6rem;animation:tcShine 1.8s ease-in-out infinite;margin-bottom:4px}
.ach-card{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.88);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);position:relative}
.ach-card.locked{opacity:.55;filter:grayscale(.6)}
.ach-card .ach-ic{font-size:2rem;width:48px;text-align:center;flex:none}
.ach-card .ach-tx{display:flex;flex-direction:column}
.ach-card .ach-tx small{opacity:.7}
.ach-check{position:absolute;right:14px;color:var(--green);font-weight:900;font-size:1.3rem}
.ach-toast{position:fixed;left:50%;top:16%;transform:translateX(-50%);z-index:1100;display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#fff,#ffe9a8);border:3px solid var(--amber);border-radius:18px;padding:12px 20px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);animation:achPop 2.6s ease forwards;max-width:90vw}
.ach-toast .at-ic{font-size:2.2rem}
.ach-toast b{display:block;color:var(--green);font-size:.8rem}
.ach-toast span{font-weight:800}
@keyframes achPop{0%{opacity:0;transform:translate(-50%,-20px) scale(.8)}12%{opacity:1;transform:translate(-50%,0) scale(1)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-16px)}}

/* mini-avatares dos jogadores NO NÍVEL (nó) onde estão */
.node-players{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);display:flex;align-items:center;margin-bottom:3px;z-index:6;pointer-events:none}
.np-chip{width:20px;height:20px;border-radius:50%;background:linear-gradient(180deg,#fff,#dfe7e3);border:2px solid #fff;display:grid;place-items:center;font-weight:800;font-size:.62rem;color:var(--green);box-shadow:0 2px 4px rgba(0,0,0,.35);margin-left:-5px}
.np-chip:first-child{margin-left:0}
.np-chip.me{background:linear-gradient(180deg,#ffe24d,#ffb300);color:#5a3b00;outline:2px solid var(--amber)}
.np-more{font-size:.6rem;font-weight:800;margin-left:2px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* separador de MUNDO no mapa */
.mundo-sep{position:sticky;top:0;z-index:4;margin:6px auto 2px;max-width:560px;text-align:center;font-family:var(--font);font-weight:900;
  font-size:1.05rem;color:#fff;padding:8px 18px;border-radius:999px;letter-spacing:.5px;
  background:linear-gradient(180deg,var(--green2),var(--green));box-shadow:0 4px 12px rgba(0,0,0,.25);width:fit-content}

/* ============================== CUTSCENE ============================== */
.cutscene{position:fixed;inset:0;z-index:800;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,.78));animation:fadeIn .3s}
.cutscene.villain{background:radial-gradient(circle at 50% 50%,rgba(60,0,0,.55),rgba(0,0,0,.85))}
.cutscene.victory{background:radial-gradient(circle at 50% 50%,rgba(0,80,40,.6),rgba(0,0,0,.8))}
.cutscene.out{animation:fadeOut .35s forwards}
.cut-inner{text-align:center;padding:24px;max-width:440px}
.cut-char{width:min(56vw,240px);filter:drop-shadow(0 10px 20px rgba(0,0,0,.4)) drop-shadow(0 0 30px var(--g))}
.bounce-in{animation:bounceIn .6s cubic-bezier(.2,1.5,.4,1)}
.shake-in{animation:villainIn .6s}
.speech{background:#fff;border-radius:20px;padding:16px 22px;margin:18px auto 16px;font-weight:700;font-size:1.15rem;color:var(--ink);position:relative;box-shadow:var(--shadow);max-width:36ch}
.speech::after{content:'';position:absolute;top:-12px;left:50%;transform:translateX(-50%);border:12px solid transparent;border-bottom-color:#fff;border-top:0}

.wipe{position:fixed;inset:0;z-index:810;display:grid;place-items:center;pointer-events:none}
.wipe::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,var(--green2),var(--green));transform:scaleY(0);transform-origin:top;transition:transform .5s ease}
.wipe.cover::before{transform:scaleY(1)}
.wipe.open::before{transform-origin:bottom;transform:scaleY(0)}
.wipe img{width:140px;position:relative;z-index:1;opacity:0;transition:opacity .3s}
.wipe.cover img{opacity:1;animation:spinSlow 1s linear}

/* ============================== MINIJOGOS ============================== */
.screen-mg{background:linear-gradient(160deg,#bfe9d8,#7fd3e8)}
.mg-host{flex:1;display:flex;align-items:stretch}
.mg{flex:1;display:flex;flex-direction:column;padding:16px;max-width:560px;margin:0 auto;width:100%;position:relative}
.mg-header{text-align:center;position:relative}
.mg-back{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;border:none;background:#fff;color:var(--green);font-size:1.4rem;font-weight:800;box-shadow:var(--shadow);cursor:pointer;display:grid;place-items:center;z-index:5}
.mg-back:active{transform:scale(.92)}
.mg-pause{position:absolute;right:0;top:0;width:44px;height:44px;border-radius:50%;border:none;background:#fff;color:var(--green);font-size:1rem;box-shadow:var(--shadow);cursor:pointer;display:grid;place-items:center;z-index:5}
.mg-pause:active{transform:scale(.92)}
.mg-paused{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(11,40,30,.6);backdrop-filter:blur(3px);border-radius:18px;animation:popIn .25s}
.mg-paused .mp-card{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;text-align:center}
.mg-paused .mp-ico{font-size:3rem}
.mg-paused .mp-card b{font-family:var(--font);font-size:1.6rem}
html.dark .mg-pause{background:#1d2c34;color:#7fe0bb}
.mg-badge{display:inline-block;background:var(--amber);color:#5a3b00;font-weight:800;padding:4px 16px;border-radius:999px;animation:bobble 1s infinite}
.mg-header h2{margin:.3em 0 .1em;color:var(--green)}
.mg-header p{margin:0 0 8px;opacity:.85;font-weight:600}
.mg-stage{flex:1;position:relative;background:rgba(255,255,255,.4);border-radius:20px;overflow:hidden;box-shadow:inset 0 2px 12px rgba(0,0,0,.1);min-height:300px}
.mg-foot{text-align:center;font-weight:800;font-size:1.1rem;padding:12px;color:var(--green)}
/* contagem 3·2·1·Vai! antes do minijogo */
.mg-countdown{position:absolute;inset:0;z-index:25;display:grid;place-items:center;background:rgba(11,40,30,.5);backdrop-filter:blur(2px);border-radius:18px}
.mg-countdown .mc-n{font-family:var(--font);font-weight:900;font-size:5rem;color:#fff;text-shadow:0 4px 14px rgba(0,0,0,.5);animation:mcPop .55s ease}
.mg-countdown .mc-n.go{color:#ffe24d;font-size:4rem}
@keyframes mcPop{0%{transform:scale(.3);opacity:0}40%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}
.mg-countdown .mc-howto{max-width:340px;text-align:center;color:#fff;display:flex;flex-direction:column;gap:10px;padding:0 18px;animation:mcPop .4s ease}
.mg-countdown .mc-howto b{font-family:var(--font);font-size:1.5rem;color:#ffe24d}
.mg-countdown .mc-howto span{font-weight:800;font-size:1rem;line-height:1.3}
.mg-countdown .mc-howto em{font-style:normal;font-weight:600;font-size:.9rem;line-height:1.45;color:#eaf6ff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 12px}
.mg-countdown .mc-howto small{font-weight:700;font-size:.78rem;color:rgba(255,255,255,.65);animation:mcBlink 1.4s ease-in-out infinite}
@keyframes mcBlink{0%,100%{opacity:.55}50%{opacity:1}}
/* puzzle de imagem (jigsaw) */
.jig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:min(86%,330px);aspect-ratio:1;margin:auto;padding:6px;background:rgba(0,0,0,.12);border-radius:16px}
.jig-cell{position:relative;border:2px solid transparent;border-radius:10px;background:#dfeee8;cursor:pointer;background-repeat:no-repeat;box-shadow:0 2px 6px rgba(0,0,0,.18);overflow:hidden}
.jig-cell:active{transform:scale(.96)}
.jig-cell.sel{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber)}
.jig-cell.ok{border-color:var(--green2)}
.jig-cell .jc-n{position:absolute;left:4px;top:2px;font-weight:900;font-size:.78rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85)}
/* pinta por números */
.paint-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px}
.paint-grid{display:grid;gap:3px;width:min(78%,300px);aspect-ratio:1}
.paint-cell{border:1px solid #cfd8dc;border-radius:4px;background:#fff;font-weight:800;font-size:.8rem;color:#90a4ae;cursor:pointer;display:grid;place-items:center;aspect-ratio:1;padding:0}
.paint-cell.empty{border:none;background:transparent;cursor:default}
.paint-palette{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.paint-sw{width:44px;height:44px;border-radius:12px;border:3px solid #fff;font-weight:900;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);cursor:pointer;box-shadow:var(--shadow)}
.paint-sw.on{outline:3px solid var(--amber);transform:scale(1.08)}
/* constrói a cidade verde */
.city-grid{display:grid;gap:6px;width:min(86%,330px);aspect-ratio:1;margin:auto}
.city-cell{border:none;border-radius:12px;background:#e7eef0;font-size:1.6rem;display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 2px 6px rgba(0,0,0,.1);aspect-ratio:1}
.city-cell.house{background:#fff3d6}
.city-cell.gen{background:radial-gradient(circle at 50% 40%,#fff1a8,#ffd24d);box-shadow:0 0 0 2px #ffb300}
.city-cell.lit{background:#a8e6b0;box-shadow:0 0 0 2px #6ab878}
html.dark .paint-cell{background:#16242c;border-color:#2a3a44;color:#7c8b94}
html.dark .city-cell{background:#16242c}html.dark .city-cell.house{background:#3a3320}html.dark .city-cell.lit{background:#2e6b45}

/* ===== #1 COERÊNCIA VISUAL + #2 MICRO-ANIMAÇÕES (minijogos) ===== */
/* entrada animada consistente em TODOS os minijogos */
.mg{animation:mgIn .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes mgIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mg{animation:none}}
/* feedback de toque uniforme nas células que ainda não tinham */
.hunt-cell:active,.light-cell:active,.city-cell:active,.paint-cell:active,.ws-cell:active,.seq-pad:active,.mem-card:active{transform:scale(.95)}
/* badge do minijogo com leve "respiração" (coerência com o resto) */
.mg-header h2{animation:mgTitleIn .4s ease both}
@keyframes mgTitleIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* recorde pessoal no cartão de atividade */
.act-best{display:inline-block;margin-top:3px;font-size:.66rem;font-weight:800;color:#b8860b;background:#fff6da;border-radius:999px;padding:1px 8px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* tutorial do 1º nível */
.tut-coach{position:fixed;inset:0;z-index:600;display:grid;place-items:end center;padding-bottom:14vh;background:rgba(0,0,0,.28);animation:ldFade .3s ease}
.tut-coach.out{animation:ldFadeOut .3s ease forwards}
.tut-coach .tc-card{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:300px;background:var(--paper);border-radius:22px;padding:14px 18px 16px;box-shadow:0 12px 30px rgba(0,0,0,.4);text-align:center;animation:ldPop .45s cubic-bezier(.2,1.6,.4,1)}
.tut-coach .tc-hero{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));animation:bobble 1.1s ease-in-out infinite}
.tut-coach .tc-card p{margin:0;font-weight:800;color:var(--ink)}

/* ===== MODO ESCURO: minijogos + ecrãs novos ===== */
html.dark .screen-mg,html.dark .screen-inter{background:linear-gradient(160deg,#13343f,#0a1f29)}
html.dark .screen-book{background:linear-gradient(160deg,#10202a,#0a1822)}
html.dark .mg-stage{background:rgba(255,255,255,.06)}
html.dark .quiz-q,html.dark .fill-word{color:#cfe8da}
html.dark .quiz-opt,html.dark .fill-opt,html.dark .sort-item,html.dark .slide-cell{background:#1b2a32;color:#e6eef0;box-shadow:0 4px 0 #0d171c}
html.dark .sort-item.rec-item .ri-name{color:#cdd9dd}
html.dark .quiz-opt.right,html.dark .fill-opt.right{background:#2e6b45;box-shadow:0 4px 0 #1d4a2f}
html.dark .quiz-opt.wrong,html.dark .fill-opt.wrong{background:#7a3a36;box-shadow:0 4px 0 #532623}
html.dark .bin{background:rgba(255,255,255,.08)}
html.dark .rec-bin{background:color-mix(in srgb,var(--bc) 24%,#16242c)}
html.dark .light-cell{background:#16242c;box-shadow:inset 0 2px 8px rgba(0,0,0,.4);color:#e6eef0}
html.dark .light-cell.on{color:#222}
html.dark .act-card{background:linear-gradient(180deg,#16242c,#0f1b22);box-shadow:0 4px 0 #0a1217,var(--shadow)}
html.dark .act-card .act-lbl{color:#e6eef0}
html.dark .act-title,html.dark .act-promo,html.dark .bk-cap{color:#7fe0bb}
html.dark .bk-page{background:#16242c}
html.dark .bk-track,html.dark .sun-batt{background:rgba(255,255,255,.14)}
html.dark .bk-nav,html.dark .mg-back,html.dark .inter-back{background:#1d2c34;color:#7fe0bb}

/* recordes dos minijogos (cloud) */
.mr-game{background:#fff;border-radius:14px;padding:10px 12px;box-shadow:var(--shadow);margin-bottom:8px}
.mr-h{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink)}
.mr-h .mr-ic{font-size:1.3rem}
.mr-h .mr-mine{margin-left:auto;font-size:.7rem;font-weight:800;color:#b8860b;background:#fff6da;border-radius:999px;padding:2px 8px;white-space:nowrap}
.mr-pods{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.mr-pod{font-size:.8rem;color:#3a4a55}
html.dark .mr-game{background:#16242c}
html.dark .mr-h{color:#e6eef0}
html.dark .mr-pod{color:#cdd9dd}
.mr-game{cursor:pointer}
.mr-full .mr-row{display:flex;align-items:center;gap:8px;font-size:.82rem;padding:3px 0;border-top:1px solid rgba(0,0,0,.07)}
.mr-full{margin-top:4px}
.mr-row .mr-rk{width:22px;color:#888;font-weight:800}.mr-row .mr-nk{flex:1;color:#3a4a55}
html.dark .mr-row{border-color:rgba(255,255,255,.08)}html.dark .mr-row .mr-nk{color:#cdd9dd}

/* ===== minijogos novos (ordena/caça/equilibra/carrega) ===== */
.ord{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px}
.ord-title{font-weight:900;color:var(--green);font-size:1.1rem;text-align:center}
.ord-slots{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}
.ord-slot{width:38px;height:38px;border-radius:10px;border:2px dashed #bbb;display:grid;place-items:center;font-weight:800;color:#aaa;font-size:1.2rem}
.ord-slot.filled{border-style:solid;border-color:var(--green2);color:inherit;background:#eaf7ef}
.ord-arr{color:#bbb}
.ord-cards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ord-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px;border:none;border-radius:14px;background:#fff;box-shadow:0 4px 0 #cdd6d2;cursor:pointer;min-width:74px}
.ord-card .oc-e{font-size:1.8rem}.ord-card .oc-n{font-size:.66rem;font-weight:800;color:#3a4a55;text-align:center}
.ord-card.done{opacity:.4}.ord-card:active{transform:translateY(3px)}
.hunt-grid{position:absolute;inset:0;margin:auto;width:min(92%,360px);height:min(92%,360px);display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px}
.hunt-cell{border:none;border-radius:12px;background:#eef3f1;font-size:1.7rem;display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 2px 6px rgba(0,0,0,.08)}
.hunt-cell.got{background:#a8e6b0}
.grid-game{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px}
.gg-meter{position:relative;width:66px;height:62%;background:linear-gradient(180deg,#fff,#eef);border-radius:16px;border:3px solid #cbd5da;overflow:hidden}
.gg-zone{position:absolute;left:0;right:0;bottom:38%;height:34%;background:rgba(46,158,91,.3);border-top:2px dashed #2E9E5B;border-bottom:2px dashed #2E9E5B}
.gg-needle{position:absolute;left:0;right:0;bottom:55%;display:grid;place-items:center;font-size:1.3rem;transition:bottom .04s linear;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.gg-needle.ok{filter:drop-shadow(0 0 9px #2E9E5B)}
.gg-hint{font-weight:700;opacity:.8;text-align:center}
.charge{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:16px}
.ch-batt{position:relative;width:72%;max-width:260px;height:30px;border-radius:8px;background:rgba(0,0,0,.12);overflow:hidden;border:3px solid #8a98a0}
.ch-batt i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fcf8e,#16a06f);transition:width .25s}
.ch-batt span{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:.82rem;color:#0a3}
.ch-bar{position:relative;width:84%;max-width:320px;height:38px;border-radius:10px;background:#e7eef0;overflow:hidden}
.ch-zone{position:absolute;top:0;bottom:0;background:rgba(46,158,91,.4);border-left:2px solid #2E9E5B;border-right:2px solid #2E9E5B}
.ch-marker{position:absolute;top:-4px;bottom:-4px;width:6px;background:#e23b3b;border-radius:3px;transform:translateX(-50%);transition:background .15s}
.ch-marker.hit{background:#2E9E5B}.ch-marker.miss{background:#c0392b}
.ch-hint{font-weight:700;opacity:.8;text-align:center}
html.dark .ord-card,html.dark .hunt-cell,html.dark .ch-bar,html.dark .gg-meter{background:#1b2a32;color:#e6eef0}
html.dark .ord-slot{border-color:#2a3a44;color:#5d6e78}html.dark .ord-slot.filled{background:#14322a;border-color:#2e6b45}
html.dark .ord-card .oc-n{color:#cdd9dd}html.dark .ord-title{color:#7fe0bb}
html.dark .hunt-cell.got{background:#2e6b45}html.dark .ch-batt{border-color:#2a3a44}html.dark .gg-meter{border-color:#2a3a44}
/* micro-animação: herói do HUD a "respirar" */
.game-hero{animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.game-hero{animation:none}}
.mg-drop{position:absolute;top:-50px;font-size:2.4rem;border:none;background:none;cursor:pointer;animation:dropFall linear forwards;filter:drop-shadow(0 3px 4px rgba(0,0,0,.2))}
.mg-drop.caught{animation:explode .22s forwards}.mg-drop.boom{animation:shake .22s}
.mg-result .mg-done{font-family:var(--font);font-size:1.5rem;color:#ffe24d;text-shadow:0 2px 6px rgba(0,0,0,.4);animation:mcPop .4s ease}
.mg-result .mg-scoreline{font-weight:800;font-size:1.05rem;color:#fff;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:8px 18px}
.mg-result .mg-scoreline b{color:#ffe24d;font-size:1.2rem}
.mg-result{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;
  background:rgba(11,40,30,.62);backdrop-filter:blur(3px);border-radius:18px;cursor:pointer;animation:popIn .35s}
.mg-result .mg-big{color:#fff}
.mg-result p{color:#eafff4;margin:0}
.mg-result .mg-continue{margin-top:10px}
.mg-big{font-size:3.4rem;font-weight:800;color:var(--green);text-shadow:0 0 16px var(--glow)}
/* 🔢/🔤 Protótipos: Corrente Numérica (match-3 c/ números em sequência) + Palavras Verdes (soletrar) */
.chain-wrap,.spell-wrap{position:relative;width:100%;max-width:400px;margin:0 auto;padding-top:6px}
.chain-grid,.spell-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px}
.chain-cell,.spell-cell{position:relative;aspect-ratio:1;border:none;border-radius:10px;background:var(--bg);display:grid;place-items:center;cursor:pointer;overflow:hidden;transition:transform .08s,box-shadow .12s,outline .1s;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.chain-cell:active,.spell-cell:active{transform:scale(.94)}
.chain-cell.empty{background:transparent;box-shadow:none;pointer-events:none}
.cc-e,.sc-e{position:absolute;inset:0;display:grid;place-items:center;font-size:1.4rem;opacity:.95;filter:saturate(1.1)}
.cc-num{position:relative;z-index:2;font-size:1.4rem;font-weight:900;color:#12291c;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.chain-cell.num{box-shadow:inset 0 0 0 2px rgba(0,0,0,.14),inset 0 -3px 0 rgba(0,0,0,.12)}
.chain-cell.sel{outline:3px solid #37e07a;outline-offset:-3px;transform:scale(1.06);z-index:5}
.chain-cell.pop{animation:chPop .2s ease forwards}
@keyframes chPop{55%{transform:scale(1.14)}100%{transform:scale(.2);opacity:0}}
.sc-l{position:relative;z-index:2;font-size:1.3rem;font-weight:900;color:#12291c;text-shadow:0 1px 0 rgba(255,255,255,.65)}
.chain-cell.bad,.spell-cell.bad{animation:cbShake .26s ease}
.spell-target{text-align:center;font-size:1.35rem;letter-spacing:.14em;margin-bottom:12px;font-weight:800;color:var(--ink,#12291c)}
.spell-target .sp-lbl{font-size:.85rem;color:#8fbfa4;letter-spacing:normal;margin-right:8px;font-weight:600}
.sp-ch{display:inline-block;min-width:.72em;color:#b7cfc0}
.sp-ch.on{color:#2e9e5b}
.spell-target.done{animation:mcPop .4s;color:#2e9e5b}
.spell-cell.used{background:#7ee0a3;box-shadow:inset 0 0 0 3px #2e9e5b}
.spell-cell.used .sc-l{color:#0c3a24}
@media (prefers-reduced-motion:reduce){.chain-cell.bad,.spell-cell.bad,.spell-target.done,.chain-cell.pop{animation:none}}
.sort-bins{display:flex;justify-content:space-around;padding-top:18px}
.bin{font-size:3rem;width:42%;aspect-ratio:1.4;border:4px dashed rgba(0,0,0,.2);border-radius:18px;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.5);transition:transform .1s}
.bin:active{transform:scale(.95)}.clean-bin{border-color:var(--green2)}.dirty-bin{border-color:#c0392b}
.bin.over{transform:scale(1.06);background:rgba(255,255,255,.92)}
.clean-bin.over{box-shadow:0 0 0 4px var(--green2),0 8px 20px rgba(0,0,0,.18)}
.dirty-bin.over{box-shadow:0 0 0 4px #c0392b,0 8px 20px rgba(0,0,0,.18)}
.sort-item-wrap{position:absolute;bottom:30px;left:0;right:0;display:grid;place-items:center}
.sort-item{font-size:3.4rem;border:none;background:#fff;width:90px;height:90px;border-radius:50%;box-shadow:var(--shadow);cursor:grab;touch-action:none;user-select:none;transition:transform .18s}
.sort-item.dragging{cursor:grabbing;z-index:30;transition:none;box-shadow:0 10px 26px rgba(0,0,0,.28)}
.sort-item.pop{animation:popIn .25s}
.sort-item-wrap::before{content:"☝️";position:absolute;top:-24px;font-size:1.05rem;opacity:.5;pointer-events:none;animation:dragHint 1.6s ease-in-out infinite}
@keyframes dragHint{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.quiz{padding:20px;display:flex;flex-direction:column;gap:16px;height:100%;justify-content:center}
.quiz-q{font-size:1.3rem;font-weight:800;text-align:center;color:var(--ink)}
.quiz-opts{display:flex;flex-direction:column;gap:12px}
.quiz-opt{font-family:var(--font);font-weight:700;font-size:1.05rem;padding:16px;border:none;border-radius:14px;background:#fff;cursor:pointer;box-shadow:0 4px 0 #cdd6d2;transition:transform .08s}
.quiz-opt:active{transform:translateY(3px)}
.quiz-opt.right{background:#a8e6b0;box-shadow:0 4px 0 #6ab878}
.quiz-opt.wrong{background:#f5b7b1;box-shadow:0 4px 0 #d98880}
.math-q{font-size:2rem}.riddle-q{font-size:1.15rem;line-height:1.35}
/* completa a palavra */
.fill{padding:20px;display:flex;flex-direction:column;gap:16px;height:100%;justify-content:center;align-items:center}
.fill-word{font-family:var(--font);font-weight:900;font-size:2.4rem;letter-spacing:4px;color:var(--green);text-align:center}
.fill-hint{font-weight:700;opacity:.8}
.fill-opts{display:flex;gap:12px;justify-content:center}
.fill-opt{font-family:var(--font);font-weight:900;font-size:1.6rem;width:64px;height:64px;border:none;border-radius:14px;background:#fff;cursor:pointer;box-shadow:0 4px 0 #cdd6d2;transition:transform .08s}
.fill-opt:active{transform:translateY(3px)}
.fill-opt.right{background:#a8e6b0;box-shadow:0 4px 0 #6ab878}
.fill-opt.wrong{background:#f5b7b1;box-shadow:0 4px 0 #d98880}
/* recicla certo (ecopontos por cor) — 5 caixotes em 2 filas */
.rec-bins{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:12px 4px 4px}
.rec-bin{flex:1 1 30%;max-width:31%;aspect-ratio:1.15;border:4px solid var(--bc);border-radius:14px;background:color-mix(in srgb,var(--bc) 15%,#fff);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;text-align:center;padding:5px;transition:transform .1s,box-shadow .1s,background .1s}
.rec-bin .rec-ico{font-size:1.6rem;line-height:1}
.rec-bin b{font-size:.78rem;color:var(--bc)}
.rec-bin small{font-size:.58rem;opacity:.78;line-height:1.05}
.rec-bin.over{transform:scale(1.06);background:color-mix(in srgb,var(--bc) 30%,#fff);box-shadow:0 0 0 4px var(--bc),0 8px 20px rgba(0,0,0,.18)}
/* objeto a arrastar (emoji + nome por baixo) */
.sort-item.rec-item{width:auto;min-width:104px;max-width:160px;height:auto;border-radius:18px;padding:10px 12px 8px;display:flex;flex-direction:column;align-items:center;gap:3px}
.sort-item.rec-item .ri-emoji{font-size:2.6rem;line-height:1}
.sort-item.rec-item .ri-name{font-size:.74rem;font-weight:800;color:#3a4a55;text-align:center;line-height:1.05;white-space:nowrap}
/* puzzle deslizante */
.slide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:min(86%,330px);aspect-ratio:1;margin:auto;padding:6px;background:rgba(0,0,0,.12);border-radius:16px}
.slide-cell{position:relative;border:none;border-radius:10px;background:#dfeee8;cursor:pointer;background-repeat:no-repeat;box-shadow:0 2px 6px rgba(0,0,0,.18);overflow:hidden;touch-action:manipulation}
.slide-cell:active{transform:scale(.96)}
.slide-cell.blank{background:transparent;box-shadow:none;cursor:default}
.slide-cell .sc-n{position:absolute;left:4px;top:2px;font-weight:900;font-size:.8rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}

/* folha ao vento (flappy) */
.leaf-area{position:absolute;inset:0;overflow:hidden;border-radius:18px;background:linear-gradient(180deg,#bfe9ff,#dff6e6);cursor:pointer;touch-action:none}
.leaf{position:absolute;left:0;top:0;font-size:34px;line-height:1;will-change:transform;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));z-index:3}
.leaf-col{position:absolute;background:linear-gradient(180deg,#8a9099,#5a6068);border:2px solid #6b7078;border-radius:8px;box-shadow:inset 0 0 8px rgba(0,0,0,.3)}
.leaf-bonus{position:absolute;font-size:26px;line-height:1;z-index:2;filter:drop-shadow(0 0 6px #ffe24d)}
.leaf-tap{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-weight:800;color:#1b6e4f;opacity:.7;pointer-events:none}
/* apaga o desperdício (whack-a-mole) */
.lights-grid{position:absolute;inset:0;margin:auto;width:min(86%,330px);height:min(86%,330px);display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:8px}
.light-cell{border:none;border-radius:16px;background:#e7eef0;box-shadow:inset 0 2px 8px rgba(0,0,0,.12);font-size:2rem;display:grid;place-items:center;cursor:pointer;transition:transform .08s,background .12s}
.light-cell.on{background:radial-gradient(circle at 50% 40%,#fff1a8,#ffd24d);box-shadow:0 0 0 3px #ffb300,0 4px 12px rgba(0,0,0,.25);animation:lightPop .18s}
.light-cell.flash{background:#a8e6b0!important;box-shadow:0 0 0 3px #6ab878}
.light-cell.leak{background:#f5b7b1!important;box-shadow:0 0 0 3px #d98880}
@keyframes lightPop{from{transform:scale(.7)}to{transform:scale(1)}}
/* segue o sol */
.sun-sky{position:absolute;left:0;right:0;top:0;bottom:72px;overflow:hidden;border-radius:18px;background:linear-gradient(180deg,#7ec8f0,#bfe9ff 60%,#dff3df);touch-action:none;cursor:grab}
.sun-sky.charging{box-shadow:inset 0 0 40px rgba(255,210,77,.6)}
.sun-sky .sun{position:absolute;top:10px;font-size:42px;line-height:1;transform:translateX(-50%);transition:left .05s linear;filter:drop-shadow(0 0 10px #ffd24d)}
.sun-sky .panel{position:absolute;bottom:6px;font-size:40px;line-height:1;transform:translateX(-50%);color:#1342b8}
.sun-beam{position:absolute;top:46px;bottom:40px;width:46px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,226,77,.9),rgba(255,226,77,0));border-radius:50% 50% 0 0;opacity:0;transition:opacity .12s;pointer-events:none}
.sun-batt{position:absolute;left:14px;right:14px;bottom:38px;height:22px;border-radius:999px;background:rgba(0,0,0,.14);overflow:hidden}
.sun-batt i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fcf8e,#16a06f);transition:width .1s}
.sun-batt span{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:.8rem;color:#0a3}
.sun-hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-weight:700;font-size:.82rem;opacity:.75;pointer-events:none}

/* memória energética */
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px;height:100%;place-content:center;perspective:700px}
.mem-card{position:relative;aspect-ratio:1;border:none;background:none;cursor:pointer;transform-style:preserve-3d;transition:transform .38s}
.mem-card .mem-back,.mem-card .mem-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mem-back{background:linear-gradient(180deg,#14a06f,#0b6e4f);color:#fff;font-size:1.7rem;box-shadow:0 4px 0 #075a3f}
.mem-face{background:#fff;transform:rotateY(180deg);box-shadow:0 4px 0 #cdd6d2;padding:13%}
.mem-face svg{width:100%;height:100%}
.mem-card.flipped{transform:rotateY(180deg)}
.mem-card.matched{transform:rotateY(180deg) scale(.92);opacity:.55}

/* sequência (Simon) */
.seq-pads{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:22px;height:100%;place-content:center}
.seq-pad{aspect-ratio:1;border:none;border-radius:22px;cursor:pointer;display:grid;place-items:center;padding:16%;opacity:.82;
  background:radial-gradient(circle at 35% 30%,var(--c1),var(--c2));box-shadow:inset 0 -7px 10px rgba(0,0,0,.32),0 5px 10px rgba(0,0,0,.3);transition:transform .1s,filter .12s,opacity .12s}
.seq-pad svg{width:100%;height:100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.seq-pad.lit{opacity:1;filter:brightness(1.7);transform:scale(1.06);box-shadow:0 0 24px var(--c1),inset 0 -7px 10px rgba(0,0,0,.2)}
.seq-pad.t-sunny{--c1:#fff1b8;--c2:#f3970f}
.seq-pad.t-breezy{--c1:#f4fcff;--c2:#69c2ef}
.seq-pad.t-splashy{--c1:#aecbff;--c2:#1342b8}
.seq-pad.t-gassy{--c1:#d6f3a0;--c2:#5d9e16}

/* barra de boosters (dentro do nível) */
.booster-bar{display:flex;justify-content:center;gap:16px;padding:6px 0 2px}
.booster{position:relative;width:52px;height:52px;border:none;border-radius:16px;background:linear-gradient(180deg,#fff,#eef3f1);box-shadow:0 4px 0 #cdd6d2,var(--shadow);font-size:1.5rem;cursor:pointer;display:grid;place-items:center;transition:transform .1s}
.booster:active{transform:translateY(3px);box-shadow:0 1px 0 #cdd6d2}
.booster .b-n{position:absolute;top:-6px;right:-6px;background:var(--green);color:#fff;font-size:.72rem;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
/* botão DESFAZER */
.undo-btn{background:linear-gradient(180deg,#fff,#e7f0ff);box-shadow:0 4px 0 #c4d4ea,var(--shadow);flex-direction:column;gap:0;opacity:.55;filter:grayscale(.4);transition:opacity .2s,filter .2s}
.undo-btn.ready{opacity:1;filter:none}
.undo-btn .b-ico{font-size:1.3rem;line-height:1}
.undo-btn .b-n{position:static;top:auto;right:auto;background:transparent;color:#2979ff;box-shadow:none;font-size:.56rem;min-width:0;height:auto;padding:0;margin-top:1px}
.board.hammer-mode{box-shadow:inset 0 4px 18px rgba(0,0,0,.4),0 0 0 3px #ff7aa2,0 0 22px #ff7aa2,0 12px 28px rgba(0,0,0,.25)}
.board.hammer-mode .gem{cursor:crosshair}

/* loja */
.shop{flex:1;overflow-y:auto;padding:18px;max-width:560px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.shop-item{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:14px;box-shadow:0 3px 8px rgba(0,0,0,.08)}
.shop-ico{font-size:2.2rem;width:54px;text-align:center}
.shop-info{flex:1;display:flex;flex-direction:column}
.shop-info b{font-size:1.05rem}
.shop-info small{opacity:.7}
.shop-info .own{font-size:.8rem;color:var(--green);margin-top:2px}
.shop .buy{white-space:nowrap}
.btn-buy-coins{margin-top:4px;font-size:1.05rem;padding:14px;background:linear-gradient(180deg,#7fe0bb,var(--green,#2bb673));color:#06301f;box-shadow:0 4px 0 #1f8f5c,0 3px 8px rgba(0,0,0,.12);font-weight:800}
.btn-buy-coins:active{box-shadow:0 1px 0 #1f8f5c}

/* apoiar / comprar moedas (Revolut) */
.support{flex:1;overflow-y:auto;padding:18px;max-width:560px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.sup-lead{text-align:center;font-size:1rem;margin:0 0 4px}
.sup-h{margin:8px 0 2px;font-size:.95rem;opacity:.85}
.sup-packs{display:flex;gap:10px}
.sup-pack{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:2px solid transparent;border-radius:16px;padding:14px 8px;box-shadow:0 3px 8px rgba(0,0,0,.08);cursor:pointer;color:var(--ink)}
.sup-pack.on{border-color:var(--green,#2bb673);box-shadow:0 0 0 3px rgba(43,182,115,.18),0 3px 8px rgba(0,0,0,.1)}
.sup-pack .sup-coins{font-size:1.05rem;font-weight:800}
.sup-pack .sup-eur{font-size:.95rem;opacity:.75}
.sup-best{position:absolute;top:-9px;right:-7px;background:var(--amber,#ffb300);color:#5a3b00;font-size:.8rem;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(0,0,0,.2)}
.sup-qr-row{display:flex;gap:14px;align-items:center;background:#fff;border-radius:16px;padding:14px;box-shadow:0 3px 8px rgba(0,0,0,.08)}
.sup-qr{border-radius:10px;background:#fff;flex:0 0 auto}
.sup-qr-side{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.sup-amt{margin:2px 0 0;font-size:1.05rem}
.sup-note{display:flex;flex-direction:column;gap:4px;background:rgba(255,179,0,.12);border:1px solid rgba(255,179,0,.4);border-radius:14px;padding:12px}
.sup-note-lbl{font-size:.85rem;opacity:.85}
.sup-note-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sup-nick{font-size:1.25rem;font-weight:800;letter-spacing:.5px;background:#fff;border-radius:8px;padding:6px 12px;color:var(--ink);border:2px solid rgba(255,179,0,.6);min-width:0;flex:1;font-family:inherit}
.sup-nick:focus{outline:none;border-color:#ffb300;box-shadow:0 0 0 3px rgba(255,179,0,.25)}
.sup-copy{flex:0 0 auto;white-space:nowrap}
.sup-acc{margin:6px 0 0;font-size:.82rem;opacity:.8;word-break:break-all}
.sup-acc b{font-weight:700}
.sup-manual{margin:4px 0}
.sup-recheck{align-self:center;opacity:.85;margin-top:2px}

/* histórico de compras */
.purchases{flex:1;overflow-y:auto;padding:18px;max-width:560px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.ph-total{text-align:center;font-size:1rem;background:rgba(43,182,115,.12);border:1px solid rgba(43,182,115,.35);border-radius:14px;padding:10px}
.ph-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border-radius:16px;padding:14px;box-shadow:0 3px 8px rgba(0,0,0,.08)}
.ph-main{display:flex;flex-direction:column}
.ph-main b{font-size:1.1rem}
.ph-main small{opacity:.7;margin-top:2px}
.ph-badge{white-space:nowrap;font-size:.85rem;font-weight:700;padding:6px 12px;border-radius:20px}
.ph-badge.ok{background:rgba(43,182,115,.15);color:#1f8f5c}
.ph-badge.pend{background:rgba(255,179,0,.18);color:#b27a00}
.ph-badge.warn{background:rgba(224,83,58,.15);color:#c0392b}
html.dark .ph-row{background:#16242c;color:#e7eef0}

/* ===== SEQUÊNCIA DIÁRIA (streak) ===== */
.streak-chip{display:inline-flex;align-items:center;gap:6px;margin:4px auto 0;padding:6px 16px;border:none;border-radius:999px;cursor:pointer;position:relative;
  background:linear-gradient(100deg,#fff0d6,#ffd9a8);color:#9a4a00;font-weight:700;font-size:.86rem;box-shadow:0 3px 8px rgba(0,0,0,.1);font-family:var(--font)}
.streak-chip.hot{background:linear-gradient(100deg,#ffd0a0,#ff9d57);color:#7a2e00;animation:skpulse 1.8s ease-in-out infinite}
@keyframes skpulse{0%,100%{box-shadow:0 3px 8px rgba(255,120,0,.25)}50%{box-shadow:0 3px 16px rgba(255,120,0,.55)}}
.streak-chip b{font-size:1rem}
html.dark .streak-chip{background:rgba(60,40,20,.9);color:#ffc98a}
.streak-wrap{flex:1;overflow-y:auto;padding:18px;max-width:560px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.streak-hero{text-align:center;background:linear-gradient(160deg,#fff4e2,#ffe0bd);border-radius:22px;padding:22px;box-shadow:0 4px 14px rgba(255,140,40,.18)}
.sk-flame{font-size:54px;line-height:1;filter:drop-shadow(0 4px 8px rgba(255,120,0,.4))}
.sk-n{font-size:3.4rem;font-weight:900;color:#e36209;line-height:1}
.sk-lbl{font-size:1.05rem;color:#9a5a20;font-weight:700}
.sk-sub{margin-top:8px;color:#86643f;font-size:.92rem}
.sk-next{background:#fff;border-radius:16px;padding:14px;box-shadow:0 3px 8px rgba(0,0,0,.08)}
.sk-next-top{display:flex;justify-content:space-between;font-size:.95rem;margin-bottom:8px}
.sk-bar{height:12px;border-radius:8px;background:#eee;overflow:hidden}
.sk-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffb347,#e36209);border-radius:8px}
.sk-next small{display:block;margin-top:8px;color:#888}
.sk-shield{background:rgba(95,160,255,.12);border:1px solid rgba(95,160,255,.35);border-radius:14px;padding:12px;font-size:.9rem;color:#345}
.sk-miles{display:flex;flex-direction:column;gap:8px}
.sk-mile{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 3px 8px rgba(0,0,0,.07);opacity:.6}
.sk-mile.cur{opacity:1;border:2px solid #ffb347}
.sk-mile.got{opacity:1;background:rgba(43,182,115,.1)}
.skm-d{font-weight:800}
.skm-r{color:#9a5a20;font-size:.9rem}
html.dark .streak-hero{background:#2a1f12}html.dark .sk-next,html.dark .sk-mile{background:#16242c;color:#e7eef0}
.streak-pop{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);z-index:60;background:linear-gradient(160deg,#fff4e2,#ffd9a8);border-radius:22px;padding:24px 34px;text-align:center;box-shadow:0 14px 40px rgba(255,120,0,.4);animation:skpop .35s cubic-bezier(.2,1.4,.5,1) forwards}
.streak-pop .sp-ic{font-size:50px}
.streak-pop b{display:block;font-size:1.3rem;color:#e36209;margin:4px 0}
.streak-pop span{color:#9a5a20;font-weight:700}
.streak-pop.out{animation:skout .35s ease forwards}
@keyframes skpop{to{transform:translate(-50%,-50%) scale(1)}}
@keyframes skout{to{transform:translate(-50%,-50%) scale(.6);opacity:0}}

/* chip do Desafio do Dia (azul, distinto do Bónus da Semana dourado) */
.dc-chip{background:linear-gradient(100deg,#cfe9ff,#9fd0ff)!important;color:#0a4a7a!important}
html.dark .dc-chip{background:rgba(20,45,70,.9)!important;color:#bfe0ff!important}

/* ===== ⚽ MODO MUNDIAL ===== */
.flag-ico{width:76%;height:76%;object-fit:cover;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 1px 3px rgba(0,0,0,.35)}
/* fundo de estádio limpo (sem o cenário do herói) */
.scene-pitch{background:linear-gradient(180deg,#8fd3ef 0%,#7cc6e8 30%,#9ed98a 48%,#4caf63 60%,#2f9e57 100%)!important}
.game-football .objective,.game-football .goal-box{display:none}
.game-football .game-hero.gh-flag{object-fit:cover;border-radius:50%;border:2px solid rgba(255,255,255,.9)}
.wc-on .board{background:repeating-linear-gradient(90deg,#2f9159 0 12.5%,#2a8350 12.5% 25%)}
.gem.help-pop{animation:helpPop .65s ease;z-index:6}
@keyframes helpPop{0%{filter:brightness(2.4) drop-shadow(0 0 0 #fff)}45%{filter:brightness(1.7) drop-shadow(0 0 12px #ffe27a)}100%{filter:none}}
.wc-on .board::before{content:"";position:absolute;inset:5%;border:2px solid rgba(255,255,255,.3);border-radius:6px;pointer-events:none;z-index:0}
.wc-on .board::after{content:"";position:absolute;left:50%;top:50%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.3);border-radius:50%;pointer-events:none;z-index:0}
.wc-banner{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 auto 8px;padding:9px 14px;background:linear-gradient(100deg,#0a7a3f,#0c8f49);border-radius:14px;color:#fff;max-width:440px;width:100%;box-shadow:0 3px 10px rgba(0,0,0,.2)}
.wc-banner.pt-day{background:linear-gradient(100deg,#0a7a3f 0 50%,#c40000 50% 100%)}
.wc-ptday{font-weight:800;font-size:.95rem}
.wc-vs{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.98rem}
.wc-vs img{width:26px;height:19px;object-fit:cover;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.wc-x{opacity:.85}
.wc-chip{background:linear-gradient(100deg,#0a7a3f,#0c8f49)!important;color:#fff!important;justify-content:center;flex-wrap:wrap}
.wc-chip.pt{background:linear-gradient(100deg,#0a7a3f 0 50%,#c40000 50% 100%)!important}
.wc-cf{width:22px;height:16px;object-fit:cover;border-radius:3px;vertical-align:middle}
.wc-cx{opacity:.85}
.wc-result{margin-bottom:6px}
.wcr-clip{width:170px;max-width:64%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;display:block;margin:0 auto 8px;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.wc-result.win .wcr-clip{border:3px solid #2bb673;box-shadow:0 8px 22px rgba(43,182,115,.4)}
.wc-result.lose .wcr-clip,.wc-result.draw .wcr-clip{border:3px solid #e0876a;box-shadow:0 8px 22px rgba(224,135,106,.35)}
.wc-result .wcr-score{display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem;flex-wrap:wrap}
.wc-result .wcr-score img{width:28px;height:20px;object-fit:cover;border-radius:3px;vertical-align:middle}
.wc-result .wcr-score b{font-size:1.5rem}
.wc-result.win h2{color:#1f8f5c}
.wc-result.draw h2{color:#b27a00}
.wc-result.lose h2{color:#c0392b}
.wcr-coins{font-weight:800;color:#b27a00;font-size:1.1rem;margin-top:2px}
/* placar ao vivo no banner */
.wc-score{display:flex;align-items:center;justify-content:center;gap:14px;font-size:1.5rem;margin:2px 0}
.wc-score .wcs-t{display:flex;align-items:center;gap:6px}
.wc-score .wcs-t img{width:30px;height:22px;object-fit:cover;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.wc-score .wcs-x{opacity:.8;font-size:1rem}
.wc-score.lead{text-shadow:0 0 10px rgba(255,255,255,.6)}
.wc-hint{font-size:.78rem;opacity:.95;display:flex;align-items:center;gap:5px;justify-content:center;flex-wrap:wrap}
.wc-hint .wc-cf{width:20px;height:15px}

/* ===================== CASCA DA APP (Início + navegação) ===================== */
.home{position:relative;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:"top" "main" "nav";height:100dvh;min-height:520px;overflow:hidden}
.home-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:linear-gradient(160deg,#d9f7ea 0%,#bfe3ff 58%,#ffe7c2 100%)}
/* cartaz da semana como fundo temático do menu: desfocado + gradiente que clareia em baixo (botões legíveis) */
.home-poster{position:absolute;inset:0;background-size:cover;background-position:center 16%;filter:blur(13px) saturate(1.15);transform:scale(1.1);opacity:.5}
.home-poster::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(217,247,234,.45) 0%,rgba(213,235,255,.42) 38%,rgba(255,231,194,.92) 100%)}
html.dark .home-poster{opacity:.42}
html.dark .home-poster::after{background:linear-gradient(180deg,rgba(17,51,42,.6) 0%,rgba(16,38,52,.62) 40%,rgba(42,33,15,.93) 100%)}
.home-bg .hb{position:absolute;border-radius:50%;filter:blur(10px);opacity:.5;animation:hbDrift 15s ease-in-out infinite}
.hb1{width:170px;height:170px;background:#ffd24d;top:-34px;left:-34px}
.hb2{width:130px;height:130px;background:#69c2ef;top:28%;right:-30px;animation-duration:19s}
.hb3{width:120px;height:120px;background:#7fe0bb;bottom:16%;left:-24px;animation-duration:17s}
.hb4{width:90px;height:90px;background:#ff9d9d;top:10%;left:42%;animation-duration:21s}
.hb5{width:150px;height:150px;background:#c9a8ff;bottom:-36px;right:18%;animation-duration:23s}
@keyframes hbDrift{0%,100%{transform:translate(0,0)}33%{transform:translate(24px,-20px)}66%{transform:translate(-18px,22px)}}
.home>:not(.home-bg){position:relative;z-index:1}
/* ===== ecrã principal TEMÁTICO da semana (herói/elemento via .theme-<hero>) ===== */
.home-fx{position:absolute;inset:0;pointer-events:none;z-index:0}
.home-char{position:absolute;bottom:-6px;pointer-events:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.3));will-change:transform}
/* herói da semana: GRANDE e centrado-baixo, como mascote a dar as boas-vindas */
.home-char.hero{left:50%;bottom:-10px;width:clamp(168px,46vw,300px);opacity:.95;animation:charBobC 4.6s ease-in-out infinite}
.home-char.villain{right:-26px;bottom:-6px;width:clamp(104px,27vw,176px);opacity:.6;animation:villainPeek 11s ease-in-out infinite}
@keyframes charBobC{0%,100%{transform:translateX(-50%) translateY(0) rotate(-2.5deg)}50%{transform:translateX(-50%) translateY(-13px) rotate(2.5deg)}}
@keyframes villainPeek{0%,16%,100%{transform:translateX(52%) scaleX(-1)}34%,66%{transform:translateX(6%) scaleX(-1)}}
html.dark .home-char{opacity:.7}html.dark .home-char.villain{opacity:.5}
/* SUNNY — sol quente a pulsar + bokeh dourado */
.theme-sunny .home-fx{background:radial-gradient(125% 62% at 50% -12%,rgba(255,209,77,.55),transparent 62%);animation:sunPulse 6s ease-in-out infinite}
.theme-sunny .home-bg .hb{background:#ffd24d!important}.theme-sunny .hb2{background:#ffb347!important}.theme-sunny .hb4{background:#fff0a8!important}
@keyframes sunPulse{0%,100%{opacity:.5}50%{opacity:.95}}
/* BREEZY — rajadas de vento na diagonal */
.theme-breezy .home-fx{background:repeating-linear-gradient(110deg,transparent 0 46px,rgba(255,255,255,.08) 46px 50px);background-size:300px 100%;animation:windMove 5.5s linear infinite}
.theme-breezy .home-bg .hb{background:#9fd8ff!important;opacity:.42}.theme-breezy .hb3{background:#d6f0ff!important}.theme-breezy .hb5{background:#bfe6ff!important}
@keyframes windMove{0%{background-position:0 0}100%{background-position:300px 0}}
/* SPLASHY — bolhas a subir, tons de água */
.theme-splashy .home-bg .hb{background:#5fd0e0!important;opacity:.4;animation:bubbleUp 9s ease-in-out infinite}
.theme-splashy .hb1{background:#9be8f0!important}.theme-splashy .hb5{background:#7fe0bb!important}
@keyframes bubbleUp{0%{transform:translateY(0)}100%{transform:translateY(-44px)}}
/* tom do overlay por tema (clareia em baixo na mesma → botões legíveis) */
.theme-sunny .home-poster::after{background:linear-gradient(180deg,rgba(255,225,150,.4) 0%,rgba(255,212,140,.4) 38%,rgba(255,231,194,.92) 100%)}
.theme-breezy .home-poster::after{background:linear-gradient(180deg,rgba(190,225,255,.42) 0%,rgba(200,230,255,.42) 38%,rgba(228,240,255,.92) 100%)}
.theme-splashy .home-poster::after{background:linear-gradient(180deg,rgba(180,235,235,.42) 0%,rgba(190,230,240,.42) 38%,rgba(214,244,240,.92) 100%)}
@media (prefers-reduced-motion:reduce){.home-char,.home-fx,.theme-splashy .home-bg .hb{animation:none!important}}
.home-top{grid-area:top;display:flex;align-items:center;gap:8px;padding:10px 12px}
.home-top.simple{justify-content:center}
.sh-title{margin:0;font-size:1.15rem}
.ht-id{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.88);border:0;border-radius:30px;padding:4px 12px 4px 4px;cursor:pointer;font-weight:700;color:var(--ink);font-family:var(--font);max-width:48%}
.ht-id img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#fff}
.ht-id span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.ht-meta{margin-left:auto;display:flex;align-items:center;gap:7px}
.ht-coin,.ht-lvl{position:relative;display:inline-flex;align-items:center;gap:5px;border:0;border-radius:30px;padding:6px 12px;cursor:pointer;font-weight:700;font-size:.9rem;font-family:var(--font)}
.ht-coin{background:linear-gradient(180deg,#ffe39c,#ffce5a);color:#7a5300}
.ht-lvl{background:linear-gradient(180deg,#bfe0ff,#8cc4ff);color:#0a4a7a}
.ht-streak{position:relative;display:inline-flex;align-items:center;gap:4px;border:0;border-radius:30px;padding:6px 11px;cursor:pointer;font-weight:700;font-size:.9rem;font-family:var(--font);background:linear-gradient(180deg,#ffd0a3,#ff9d5c);color:#7a3300}
.ht-xp{display:inline-block;width:30px;height:5px;background:rgba(255,255,255,.6);border-radius:4px;overflow:hidden}
.ht-xp i{display:block;height:100%;background:#0a4a7a}
.home-scroll{grid-area:main;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 16px 20px;max-width:560px;width:100%;margin:0 auto}
.home-logo{width:130px;max-width:44%;margin:4px 0 0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
.home-play{font-size:1.6rem!important;padding:16px 60px!important;margin:2px 0}
.home-alert{display:flex;align-items:center;gap:8px;width:100%;max-width:390px;background:#fff;border:0;border-radius:16px;padding:12px 14px;box-shadow:0 4px 12px rgba(0,0,0,.12);cursor:pointer;font-family:var(--font);color:var(--ink);text-align:left;animation:haPulse 2.4s ease-in-out infinite}
@keyframes haPulse{0%,100%{box-shadow:0 4px 12px rgba(0,0,0,.12)}50%{box-shadow:0 4px 20px rgba(43,182,115,.45)}}
.home-alert .ha-ic{font-size:1.4rem}
.home-alert b{flex:1;font-size:.95rem;font-weight:700}
.home-alert .ha-go{font-weight:800;color:var(--green,#2bb673);font-size:1.2rem}
/* 🏆 Notificação dedicada da Roda dos Campeões (Top-5 da semana fechada) */
.home-champ{position:relative;display:flex;align-items:center;gap:10px;width:100%;max-width:390px;border:0;border-radius:16px;padding:12px 14px;cursor:pointer;font-family:var(--font);text-align:left;color:#0a1f3c;background:linear-gradient(120deg,#ffe082,#ffc107 55%,#ff9800);box-shadow:0 6px 18px rgba(243,151,15,.5);overflow:hidden;animation:hchPulse 1.8s ease-in-out infinite}
.home-champ::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);animation:hchShine 2.6s ease-in-out infinite;pointer-events:none}
@keyframes hchPulse{0%,100%{box-shadow:0 6px 18px rgba(243,151,15,.5)}50%{box-shadow:0 6px 26px rgba(243,151,15,.85)}}
@keyframes hchShine{0%{left:-60%}55%,100%{left:130%}}
.home-champ .hch-ic{font-size:1.6rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.home-champ .hch-tx{flex:1;display:flex;flex-direction:column;line-height:1.15}
.home-champ .hch-tx b{font-size:.98rem;font-weight:800}
.home-champ .hch-tx small{font-size:.78rem;font-weight:600;opacity:.88}
.home-champ .hch-go{font-weight:900;font-size:.92rem;background:#0a1f3c;color:#ffd24d;padding:5px 11px;border-radius:999px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.home-champ,.home-champ::after{animation:none}}
.home-card{display:flex;align-items:center;gap:12px;width:100%;max-width:390px;background:#fff;border:0;border-radius:16px;padding:10px;box-shadow:0 4px 12px rgba(0,0,0,.1);cursor:pointer;font-family:var(--font);color:var(--ink);text-align:left;overflow:hidden}
.hc-img{position:relative;width:90px;height:66px;border-radius:12px;overflow:hidden;flex:0 0 auto;background:radial-gradient(circle at 40% 30%,#fff,var(--g))}
.hc-img img{width:100%;height:100%;object-fit:contain}
.hc-img .badge-n{position:absolute;top:4px;right:4px}
.hc-tx{display:flex;flex-direction:column;min-width:0}
.hc-tx b{font-size:1rem}.hc-tx small{opacity:.7}
.home-fact{display:flex;align-items:center;gap:10px;width:100%;max-width:390px;background:rgba(255,255,255,.85);border:0;border-radius:14px;padding:10px 12px;cursor:pointer;font-family:var(--font);color:var(--ink);text-align:left}
.hf-ic{font-size:1.5rem}
.hf-tx{display:flex;flex-direction:column;min-width:0}
.hf-tx b{font-size:.92rem}.hf-tx small{opacity:.7}
.home-hero,.home-feed{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.lb-body{width:100%;max-width:560px;display:flex;flex-direction:column;gap:10px}
.app-nav{grid-area:nav;display:flex;justify-content:space-around;align-items:stretch;background:rgba(255,255,255,.96);border-top:0.5px solid rgba(0,0,0,.08);box-shadow:0 -3px 12px rgba(0,0,0,.06)}
.an-tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;padding:8px 2px;cursor:pointer;color:#789;font-family:var(--font);font-size:.7rem}
.an-tab .an-ic{font-size:1.4rem}
.an-tab.on{color:var(--green,#2bb673);font-weight:700}
.an-tab .badge-n{position:absolute;top:3px;right:24%}
.ev-card{display:flex;align-items:center;gap:12px;width:100%;max-width:440px;background:#fff;border:0;border-radius:16px;padding:14px;box-shadow:0 3px 10px rgba(0,0,0,.1);cursor:pointer;font-family:var(--font);color:var(--ink);text-align:left;position:relative}
.ev-ic{font-size:1.8rem;width:40px;text-align:center}
.ev-tx{display:flex;flex-direction:column;min-width:0}
.ev-tx b{font-size:1rem}.ev-tx small{opacity:.7}
.ev-card .badge-n{position:absolute;top:10px;right:12px}
.pf-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%;max-width:440px}
.pf-stat{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.85);border-radius:14px;padding:10px 12px}
.pf-stat b{font-size:1.3rem}.pf-stat span{font-weight:700;font-size:.9rem}
.pf-row{display:flex;align-items:center;gap:12px;width:100%;max-width:440px;background:#fff;border:0;border-radius:14px;padding:12px 14px;box-shadow:0 2px 8px rgba(0,0,0,.07);cursor:pointer;font-family:var(--font);color:var(--ink)}
.pf-ic{font-size:1.3rem;width:28px;text-align:center}
.pf-l{flex:1;text-align:left;font-weight:600}
.pf-x{color:var(--green,#2bb673);font-weight:700;font-size:.85rem}
.pf-go{opacity:.4;font-size:1.3rem}
.pf-lang{display:flex;gap:8px}
.pf-lang button{border:0.5px solid rgba(0,0,0,.15);background:#fff;border-radius:20px;padding:6px 16px;cursor:pointer;font-family:var(--font);color:var(--ink)}
.pf-lang button.on{background:var(--green,#2bb673);color:#fff}
.pf-login{background:#fff;border:0.5px solid rgba(0,0,0,.12);border-radius:14px;padding:12px;width:100%;max-width:440px;cursor:pointer;font-family:var(--font);color:var(--ink)}
@media (min-aspect-ratio:1/1) and (min-width:720px){
  .home{grid-template-columns:88px 1fr;grid-template-rows:auto 1fr;grid-template-areas:"nav top" "nav main"}
  .app-nav{flex-direction:column;justify-content:flex-start;gap:4px;padding-top:14px;border-top:0;border-right:0.5px solid rgba(0,0,0,.08);box-shadow:3px 0 12px rgba(0,0,0,.05)}
  .an-tab{flex:0 0 auto;padding:11px 2px;font-size:.72rem}
  .home-scroll{max-width:920px;flex-direction:row;align-items:flex-start;justify-content:center;gap:30px;padding-top:24px}
  .home-hero,.home-feed{flex:1;max-width:400px}
  .home-feed{padding-top:38px}
  .shell2 .home-scroll{flex-direction:column;align-items:center}
}
html.dark .home-bg{background:linear-gradient(160deg,#11332a,#102634,#2a210f)}
html.dark .ht-id,html.dark .home-alert,html.dark .home-card,html.dark .ev-card,html.dark .pf-row,html.dark .pf-login,html.dark .app-nav,html.dark .pf-stat,html.dark .home-fact,html.dark .pf-lang button{background:#16242c;color:#e7eef0}

/* popup de DESAFIOS (após JOGAR, antes do mapa) */
.play-hub{flex:1;overflow-y:auto;padding:18px;max-width:520px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:14px;justify-content:center}
.hub-card{position:relative;display:flex;align-items:center;gap:14px;background:#fff;border:0;border-radius:18px;padding:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);cursor:pointer;text-align:left;font-family:var(--font);transition:transform .12s}
.hub-card:active{transform:scale(.98)}
.hub-card .hub-ic{font-size:2.4rem;width:54px;text-align:center}
.hub-card .hub-tx{flex:1;display:flex;flex-direction:column;min-width:0}
.hub-card .hub-tx b{font-size:1.1rem}
.hub-card .hub-tx small{opacity:.75;margin-top:2px}
.hub-card .badge-n{position:static;margin-left:auto}
.hub-done{margin-left:auto;color:#2bb673;font-weight:800;font-size:1.2rem}
.hub-card.wc{background:linear-gradient(100deg,#0a7a3f,#0c8f49);color:#fff}
.hub-card.wc.pt{background:linear-gradient(100deg,#0a7a3f 0 50%,#c40000 50% 100%)}
.hub-card.wc .hub-tx small{opacity:.95;color:#fff}
.hub-flags{display:flex;align-items:center;gap:5px}
.hub-flags img{width:34px;height:25px;object-fit:cover;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.hub-flags .hub-ball{font-size:1.1rem}
.hub-card.week{background:linear-gradient(100deg,#fff3cf,#ffe39c);color:#7a5a00}
.hub-go{margin-top:8px;align-self:center}
html.dark .hub-card{background:#16242c;color:#e7eef0}
html.dark .sup-pack,html.dark .sup-qr-row{background:#16242c;color:#e7eef0}
html.dark .sup-nick{background:#0e1a20;color:#e7eef0}

/* missões diárias */
.missions{flex:1;overflow-y:auto;padding:18px;max-width:560px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.mission{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:14px;box-shadow:0 3px 8px rgba(0,0,0,.08)}
.mission.done{background:linear-gradient(90deg,#eafff0,#cdf5d8)}
.m-ico{font-size:2rem;width:48px;text-align:center}
.m-info{flex:1}
.m-info b{display:block;margin-bottom:6px;font-size:.98rem}
.m-bar{height:10px;background:rgba(0,0,0,.1);border-radius:999px;overflow:hidden}
.m-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffd24d,var(--amber));border-radius:999px;transition:width .4s}
.m-claim{white-space:nowrap;min-width:66px}
.badge-n{background:#e23b6d;color:#fff;border-radius:999px;padding:0 6px;font-size:.7rem;font-weight:800;margin-left:2px}

/* 🎟️ Passe da Semana */
.pass-hero{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;font-size:1.05rem;color:#2d4658;margin:2px 0 10px}
.pass-hero .ph-emoji{font-size:1.4rem}
.pass-hero small{width:100%;text-align:center;opacity:.6;font-weight:700;font-size:.75rem}
html.dark .pass-hero{color:#dce7ea}
.pass-xpbar{position:relative;flex:none;height:22px;min-height:22px;background:rgba(0,0,0,.12);border-radius:999px;overflow:hidden;margin-bottom:6px}
.pass-xpbar i{display:block;height:100%;background:linear-gradient(90deg,#5ad1ff,#2e7dff,#9b6bff);border-radius:999px;transition:width .6s cubic-bezier(.34,1.2,.5,1)}
.pass-xpbar span{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:.78rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.pass-track{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.pass-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#fff;box-shadow:var(--shadow,0 3px 8px rgba(0,0,0,.08));border-left:5px solid #d4dee6}
.pass-row .pass-xp{font-weight:900;color:#5a6b7a;min-width:74px;font-size:.9rem}
.pass-row .pass-r{flex:1;font-weight:800;color:#2d4658;font-size:.9rem}
.pass-row.claimed{opacity:.55}
.pass-row.claimed .pass-tick{color:#2ea05a;font-weight:900;font-size:1.2rem}
.pass-row.can{border-left-color:#2e7dff;box-shadow:0 0 0 2px rgba(46,125,255,.25),var(--shadow,0 3px 8px rgba(0,0,0,.08));animation:passPulse 1.6s ease-in-out infinite}
.pass-row.locked{opacity:.5}
.pass-row.locked .pass-lock{font-size:1.05rem}
.pass-row.milestone{border-left-color:#9b6bff;background:linear-gradient(100deg,#f3edff,#fff)}
.pass-row.milestone .pass-xp{color:#7b4fd0}
.pass-row.milestone.can{box-shadow:0 0 0 2px rgba(155,107,255,.5),var(--shadow,0 3px 8px rgba(0,0,0,.08))}
html.dark .pass-row{background:#16242c}
html.dark .pass-row .pass-r{color:#e7eef0}
html.dark .pass-row.milestone{background:linear-gradient(100deg,#241a33,#16242c)}
@keyframes passPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
.pass-miss{display:flex;flex-direction:column;gap:10px;margin-top:4px;padding-bottom:8px}
.pass-miss .mission{padding:11px 13px}

/* botão "ganhar vida" no mapa */
.life-banner{display:block;margin:10px auto 0;border:none;border-radius:999px;padding:10px 24px;font-family:var(--font);font-weight:800;font-size:1rem;color:#fff;background:linear-gradient(180deg,#ff7aa2,#e23b6d);box-shadow:0 4px 0 #b02a52,var(--shadow);cursor:pointer;animation:bobble 2s infinite}
.life-banner:active{transform:translateY(3px);box-shadow:0 1px 0 #b02a52,var(--shadow)}

.legend .leg-ico{width:54px;height:54px;display:inline-grid;place-items:center}
.legend .leg-ico svg{width:100%;height:100%}

/* caça-palavras (Palavras Escondidas) */
.ws-wrap{display:flex;flex-direction:column;gap:10px;padding:10px;height:100%;justify-content:center}
.ws-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;width:100%;max-width:360px;margin:0 auto}
.ws-cell{aspect-ratio:1;border:none;border-radius:6px;background:#fff;font-weight:800;font-size:.95rem;color:var(--ink);cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.1);transition:transform .08s}
.ws-cell:active{transform:scale(.9)}
.ws-cell.sel{background:var(--amber);color:#fff}
.ws-cell.found{background:#a8e6b0;color:#1c7a3e}
.ws-words{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ws-word{font-weight:800;background:#fff;border-radius:999px;padding:4px 12px;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.ws-word.done{background:#a8e6b0;color:#1c7a3e;text-decoration:line-through}

/* puzzle ligar eletricidade */
.wire-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%;max-width:330px;margin:0 auto}
.wire-cell{position:relative;aspect-ratio:1;border:none;border-radius:12px;background:#e7eef3;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.12);padding:0;overflow:hidden;transition:transform .12s}
.wire-cell:active{transform:scale(.92)}
.wire-cell.lit{background:#fff6da;box-shadow:0 2px 0 rgba(0,0,0,.12),0 0 12px rgba(255,200,60,.6)}
.wire-cell svg{width:100%;height:100%;display:block}
.wire-cell .we{position:absolute;inset:0;display:grid;place-items:center;font-size:1.05rem;pointer-events:none}
.wire-cell .we.dim{filter:grayscale(1);opacity:.5}

/* redes sociais */
.social-row{display:flex;justify-content:center;gap:12px;margin:10px 0}
.soc{width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;transition:transform .15s}
.soc:hover,.soc:active{transform:translateY(-3px) scale(1.08)}
.soc svg{width:22px;height:22px;fill:var(--green)}

/* ecrã de entrada */
.welcome-btns{display:flex;flex-direction:column;gap:10px;align-items:center;margin:8px 0}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#3c4043;box-shadow:0 4px 0 #cdd6d2,var(--shadow);width:100%;max-width:300px}
.btn-google .g-ico{width:22px;height:22px;border-radius:50%;background:conic-gradient(from -45deg,#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);color:#fff;font-weight:900;display:grid;place-items:center;font-size:.85rem}
.or-sep{text-align:center;opacity:.6;font-weight:700;font-size:.85rem;margin:4px 0}

/* card social entre níveis */
.screen-inter{align-items:center;justify-content:center;background:linear-gradient(160deg,#bfe9d8,#7fd3e8)}
.interstitial{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:16px}
.inter-card{position:relative;background:var(--paper);border-radius:24px;padding:16px;max-width:380px;width:100%;box-shadow:var(--shadow);text-align:center;animation:popIn .4s}
.inter-back{position:absolute;left:10px;top:10px;width:40px;height:40px;border-radius:50%;border:none;background:#fff;color:var(--green);font-size:1.3rem;font-weight:800;box-shadow:var(--shadow);cursor:pointer;display:grid;place-items:center;z-index:5}
.inter-back:active{transform:scale(.92)}
.inter-badge{display:inline-block;background:var(--amber);color:#5a3b00;font-weight:800;padding:4px 16px;border-radius:999px;margin-bottom:10px}
.inter-media{position:relative;display:block;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.inter-media img{width:100%;display:block;max-height:300px;object-fit:cover}
.inter-net{position:absolute;top:8px;left:8px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center}
.inter-net svg{width:18px;height:18px;fill:#fff}
.inter-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;font-size:1.6rem;padding-left:5px}
.inter-meta{position:absolute;bottom:8px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-weight:700;font-size:.8rem;padding:2px 10px;border-radius:999px}
.inter-cap{font-weight:700;margin:10px 0;color:var(--ink)}
.inter-card .book-page{width:auto;max-height:280px;max-width:100%;object-fit:contain;border-radius:14px;box-shadow:var(--shadow);margin:0 auto;display:block}
.stats-row{display:flex;justify-content:space-around;gap:6px;margin:8px 0}
.stat-mini{display:flex;flex-direction:column;align-items:center;gap:1px}
.stat-mini .sm-ico{width:24px;height:24px}.stat-mini .sm-ico svg{width:100%;height:100%;fill:var(--green)}
.stat-mini b{font-size:1rem;color:var(--green)}.stat-mini small{font-size:.62rem;opacity:.7}

/* ecrã atividades / livro */
.activities{flex:1;overflow-y:auto;padding:18px;max-width:560px;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.act-title{margin:.2em 0;color:var(--green)}
/* capa do livro (abre o caderno online) */
.book-cover-btn{position:relative;border:none;background:none;padding:0;cursor:pointer;border-radius:16px;max-width:62%;width:auto;transition:transform .12s;animation:bookFloat 3.4s ease-in-out infinite}
.book-cover-btn img{width:100%;height:auto;max-height:230px;object-fit:contain;border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.28);display:block}
.book-cover-btn:active{transform:scale(.96)}
.book-open-badge{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);white-space:nowrap;background:var(--amber);color:#5a3b00;font-weight:800;font-size:.8rem;padding:5px 14px;border-radius:999px;box-shadow:var(--shadow)}
@keyframes bookFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
.act-promo{font-weight:600;opacity:.85;max-width:36ch;margin:.6em 0 .2em}
.act-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ===== leitor do livro (caderno online) ===== */
.screen-book{background:linear-gradient(160deg,#e8f3ec,#bfe1ea)}
.book-reader{flex:1;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr auto;align-items:center;gap:6px;padding:10px;max-width:640px;width:100%;margin:0 auto}
.bk-stage{grid-column:2;grid-row:1;display:grid;place-items:center;height:100%;min-height:0;overflow:hidden;touch-action:pan-y}
.bk-page{max-width:100%;max-height:62vh;object-fit:contain;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.3);background:#fff}
.bk-page.flip-l{animation:bkFlipL .32s ease}
.bk-page.flip-r{animation:bkFlipR .32s ease}
@keyframes bkFlipL{from{opacity:.2;transform:translateX(24px) rotateY(-12deg)}to{opacity:1;transform:none}}
@keyframes bkFlipR{from{opacity:.2;transform:translateX(-24px) rotateY(12deg)}to{opacity:1;transform:none}}
.bk-nav{grid-row:1;align-self:center;width:46px;height:46px;border-radius:50%;border:none;background:#fff;color:var(--green);font-size:1.8rem;font-weight:800;line-height:1;box-shadow:var(--shadow);cursor:pointer;display:grid;place-items:center;z-index:3}
.bk-nav.prev{grid-column:1}.bk-nav.next{grid-column:3}
.bk-nav:active{transform:scale(.9)}
.bk-foot{grid-column:1 / -1;grid-row:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:6px}
.bk-cap{font-weight:800;color:var(--green);margin:.2em 0}
.bk-track{width:min(80%,320px);height:7px;border-radius:999px;background:rgba(0,0,0,.14);overflow:hidden}
.bk-track i{display:block;height:100%;background:var(--green);border-radius:999px;transition:width .25s}
.bk-nav:disabled{opacity:.35;cursor:default}

/* colorir / pintar */
.color-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px;overflow-y:auto}
.color-stage{position:relative;width:min(90vw,360px);aspect-ratio:1;background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.color-guide{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;opacity:.16;filter:grayscale(1) contrast(1.3);pointer-events:none}
#paint{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.palette{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:370px}
.sw{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.25);cursor:pointer;font-size:1rem;display:grid;place-items:center;padding:0}
.sw.on{outline:3px solid var(--green);transform:scale(1.12)}
.sw.eraser{background:#eef3f1}
.paint-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.paint-tools .brush.on{outline:3px solid var(--amber)}

/* 🦸 PODER DE HERÓI — cara do herói com anel de carga; cheio = liberta especial temático */
.hero-power{position:relative;width:44px;height:44px;border:0;background:none;padding:0;flex:0 0 auto;cursor:default;display:grid;place-items:center}
.hero-power .game-hero{position:relative;z-index:1}
.hero-power .hp-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--hero-glow,#ffd24d) var(--p,0%),rgba(255,255,255,.22) 0);-webkit-mask:radial-gradient(closest-side,#0000 70%,#000 72%);mask:radial-gradient(closest-side,#0000 70%,#000 72%)}
.hero-power.ready{cursor:pointer}
.hero-power.ready .hp-ring{animation:hpSpin 2.4s linear infinite,hpGlow 1s ease-in-out infinite}
.hero-power .hp-label{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);white-space:nowrap;font:800 8.5px system-ui;color:#fff;background:rgba(0,0,0,.62);padding:1px 6px;border-radius:8px;opacity:0;transition:.2s;pointer-events:none;letter-spacing:.3px}
.hero-power.ready .hp-label{opacity:1}
@keyframes hpSpin{to{transform:rotate(360deg)}}
@keyframes hpGlow{0%,100%{filter:drop-shadow(0 0 1px var(--hero-glow,#ffd24d))}50%{filter:drop-shadow(0 0 7px var(--hero-glow,#ffd24d))}}
@media (prefers-reduced-motion:reduce){.hero-power.ready .hp-ring{animation:none}}

/* 👹 CHEFES COM FASES — marcas de HP + banner de ataque do vilão */
.boss-goal .bar.hp{position:relative}
.hp-phase{position:absolute;top:-1px;bottom:-1px;width:2px;background:rgba(0,0,0,.5);z-index:2;border-radius:2px}
.boss-attack{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:60;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;animation:bossAtk 1.6s ease forwards}
.boss-attack img{width:84px;filter:drop-shadow(0 0 14px var(--g,#c0392b)) drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.boss-attack span{background:rgba(0,0,0,.72);color:#fff;font:800 .9rem system-ui;padding:5px 12px;border-radius:14px;text-align:center;max-width:80vw;box-shadow:0 3px 10px rgba(0,0,0,.4)}
@keyframes bossAtk{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}24%{transform:translate(-50%,-50%) scale(1) rotate(-4deg)}30%{transform:translate(-50%,-50%) rotate(4deg)}36%{transform:translate(-50%,-50%) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-56%) scale(.9)}}
@media (prefers-reduced-motion:reduce){.boss-attack{animation-duration:.01ms}}
/* ☠️ Duelo do Chefe 2.0 — aviso de ataque (telegrafo, dá tempo de reagir) */
.boss-warn{position:absolute;left:50%;top:13%;transform:translateX(-50%);z-index:62;display:flex;align-items:center;gap:8px;pointer-events:none;
  background:linear-gradient(90deg,rgba(206,44,44,.96),rgba(150,20,20,.96));color:#fff;font:800 .92rem system-ui;padding:5px 15px 5px 5px;border-radius:40px;
  box-shadow:0 4px 16px rgba(0,0,0,.45);animation:bossWarn 1.5s ease forwards}
.boss-warn img{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.15);object-fit:cover;filter:drop-shadow(0 0 8px var(--g,#fff))}
.boss-warn::after{content:"";position:absolute;inset:-3px;border-radius:44px;border:2px solid rgba(255,220,120,.9);animation:bossWarnRing .5s ease-in-out infinite}
@keyframes bossWarn{0%{transform:translateX(-50%) scale(.6);opacity:0}12%{transform:translateX(-50%) scale(1.06);opacity:1}80%{transform:translateX(-50%) scale(1);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:0}}
@keyframes bossWarnRing{0%,100%{opacity:.35}50%{opacity:1}}
/* óleo/gelo a surgir quando o chefe ataca (só o corpo faz "pop", não mexe na posição) */
.tar-spread,.ice-spread{animation:obFade .45s ease}
.tar-spread .tar-body,.ice-spread .ice-body{animation:obPop .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes obFade{0%{opacity:0}100%{opacity:1}}
@keyframes obPop{0%{transform:scale(.2)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.boss-warn,.boss-warn::after,.tar-spread,.ice-spread,.tar-spread .tar-body,.ice-spread .ice-body{animation:none}}

/* ⚡ SISMO — o tabuleiro abana e roda (evento a meio do nível) */
.board.quaking{animation:quakeShake .55s cubic-bezier(.36,.07,.19,.97) both}
@keyframes quakeShake{
  10%,90%{transform:translate(-2px,1px) rotate(-.6deg)}
  20%,80%{transform:translate(3px,-2px) rotate(.9deg)}
  30%,50%,70%{transform:translate(-5px,2px) rotate(-1.1deg)}
  40%,60%{transform:translate(5px,-1px) rotate(1.1deg)}
}
.quake-banner{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.55);
  z-index:70;font-weight:900;font-size:clamp(1.7rem,7.5vw,2.8rem);letter-spacing:1px;
  color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.65),0 0 26px #ffd54a;
  background:linear-gradient(180deg,rgba(30,14,0,.5),rgba(30,14,0,.18));
  padding:.28em .7em;border-radius:16px;border:2px solid #ffd54a;
  animation:qbIn .34s cubic-bezier(.2,1.5,.4,1) forwards;pointer-events:none;white-space:nowrap;
}
@keyframes qbIn{to{transform:translate(-50%,-50%) scale(1)}}
.quake-banner.out{animation:qbOut .42s ease forwards}
@keyframes qbOut{to{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}
@media (prefers-reduced-motion:reduce){.board.quaking{animation-duration:.25s}.quake-banner{animation-duration:.01ms}}

/* ⚡ SISMO — ressalto ao assentar depois da rotação */
.board.quake-land{animation:quakeLand .4s cubic-bezier(.2,1.5,.4,1)}
@keyframes quakeLand{0%{transform:scale(1.045)}60%{transform:scale(.985)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.board.quake-land{animation:none}}

/* 🏆 HALL DE CAMPEÕES (ranking) */
.hall-champ{margin-top:18px;border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
.hall-champ .hall-h{margin:0 0 8px;font-size:1rem;text-align:center;color:#ffd54a}
.hall-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);margin-bottom:6px}
.hall-row .hall-wk{flex:1 1 40%;font-size:.82rem;opacity:.9}
.hall-row .hall-who{flex:0 0 auto;font-weight:800}
.hall-row .hall-prize{flex:0 0 auto;margin-left:auto;font-size:.82rem;font-weight:700;color:#7ee0a8}
.hall-row .hall-prize.muted{color:#9db3a8;font-weight:600}