/* MEW235 — estilos compartilhados do app do motor (shell + modos). */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#2D9CDB;--orange:#F2994A;--purple:#9B51E0;
  --green:#27AE60;--red:#EB5757;
  --bg:#0f0f1a;--s1:#1a1a2e;--s2:#252540;--s3:#2e2e50;
  --txt:#e8e8f0;--dim:#888888;
}
/* Temas (só a moldura muda; as cores das peças são regra do jogo) */
[data-theme="ameixa"]{--bg:#160d1f;--s1:#1e1230;--s2:#2a1c40;--s3:#382652}
[data-theme="contrast"]{--bg:#000000;--s1:#0a0a0a;--s2:#15151c;--s3:#23232e;--txt:#ffffff;--dim:#cfcfcf}
[data-theme="oceano"]{--bg:#07161c;--s1:#0c2630;--s2:#114050;--s3:#185a6e}
[data-theme="floresta"]{--bg:#0a1610;--s1:#112619;--s2:#173a24;--s3:#1f4f30}
html,body{height:100%;background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,sans-serif;touch-action:manipulation}

/* Marca: letras (Pump) e números (Audiowide) — espelham FONT_LETTER/FONT_NUMBER do core. */
.fl{font-family:'Pump W01 Bold','Nunito','Arial Black',sans-serif}
.fn{font-family:'Audiowide','Nunito','Arial Black',sans-serif}

/* Logo em glifos: entrada com fade escalonado (só opacidade — não mexe na geometria) */
@keyframes logoFade{from{opacity:0}to{opacity:1}}
.logo-glyph svg path{animation:logoFade .5s ease both}
.logo-glyph svg path:nth-of-type(1){animation-delay:40ms}
.logo-glyph svg path:nth-of-type(2){animation-delay:120ms}
.logo-glyph svg path:nth-of-type(3){animation-delay:200ms}
.logo-glyph svg path:nth-of-type(4){animation-delay:280ms}
.logo-glyph svg path:nth-of-type(5){animation-delay:360ms}
.logo-glyph svg path:nth-of-type(6){animation-delay:440ms}

/* Layout */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}
#hdr{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--s1);border-bottom:1px solid #2a2a45;flex-shrink:0}
#logo{font-size:20px;font-weight:900;letter-spacing:2px;color:var(--purple);flex-shrink:0;cursor:pointer}
/* Logo em glifos (SVG 112×73): compacto no header p/ liberar a linha dos KPIs;
   maior só na Home, onde é o herói da marca. */
.logo-glyph svg{height:34px;width:auto;display:block}
#app.on-home .logo-glyph svg{height:48px}
.icon-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;background:var(--s2);border:1px solid #3a3a60;border-radius:11px;color:var(--txt);cursor:pointer}
.icon-btn svg{width:20px;height:20px}
.icon-btn:active{transform:scale(.92)}
.icon-btn[hidden]{display:none}
.hdr-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.hdr-actions .icon-btn{width:34px;height:34px}
.hdr-actions .icon-btn svg{width:19px;height:19px}
.train-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;background:linear-gradient(135deg,var(--purple),#7b3fd0);border:none;border-radius:50%;color:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(155,81,224,.45)}
.train-btn .tb-ico{font-size:16px;line-height:1}
.train-btn .tb-txt{display:none}
.train-btn[hidden]{display:none}
.train-btn:active{transform:scale(.92)}
#stats{flex:1;display:flex;justify-content:center;gap:8px;margin:0 6px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;align-items:center;min-width:50px;padding:3px 9px;background:var(--s2);border:1px solid #33335a;border-radius:11px}
.stat-v{font-size:20px;font-weight:800;color:var(--txt);line-height:1.1;font-variant-numeric:tabular-nums}
.stat-l{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);margin-top:1px}
/* Stat-chave do modo: leve destaque para o olho pousar no que importa */
.stat.primary{border-color:var(--purple);background:var(--s3)}
.stat.primary .stat-v{color:var(--orange)}

/* Barra de cards (trocador de modos) */
#info{flex-wrap:wrap;gap:8px}
#attrBar[hidden],#cards[hidden],#tapHints[hidden]{display:none}
#modeChip[hidden]{display:none}
#cards{display:flex;gap:8px;align-items:stretch}
.card{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--s2);border:1px solid #3a3a60;border-radius:10px;padding:5px 9px}
.card-name{font-size:9px;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.card-modes{display:flex;gap:4px}
.mode-ico{width:36px;height:30px;background:var(--s3);border:1px solid #3a3a60;border-radius:8px;font-size:17px;cursor:pointer;color:var(--txt);display:flex;align-items:center;justify-content:center;padding:0}
.mode-ico.active{background:var(--purple);border-color:var(--purple)}
.mode-ico .ico{width:19px;height:19px;display:block}
.mode-ico.locked{opacity:.4;cursor:not-allowed}
.mode-ico:not(.locked):active{transform:scale(.92)}

#info{display:flex;justify-content:space-between;align-items:center;padding:6px 16px;background:var(--s1);border-bottom:1px solid #222;flex-shrink:0;font-size:12px;color:var(--dim);gap:8px}
#attrBar{display:flex;gap:6px;align-items:center}
.atag{padding:3px 10px;border-radius:10px;font-size:12.5px;font-weight:700;background:var(--s2);color:var(--dim);transition:background .4s,color .4s}
.atag.on{background:var(--purple);color:#fff}
.atag.wrong{background:var(--red)!important;color:#fff!important;animation:shake .4s ease}
.mode-chip{padding:4px 13px;border-radius:11px;font-size:13px;font-weight:700;background:var(--s3);color:var(--txt);white-space:nowrap}

/* Home / Lobby (hub) */
#home{flex:1;overflow-y:auto;padding:18px 16px}
#home[hidden]{display:none}
.home{display:flex;flex-direction:column;gap:18px;width:min(94vw,440px);margin:0 auto}
.hero{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:linear-gradient(135deg,#2a2150,#3a2a63);border:1px solid var(--purple);border-radius:18px;padding:18px 20px;cursor:pointer;color:var(--txt);box-shadow:0 4px 18px rgba(155,81,224,.25)}
.hero:active{transform:scale(.99)}
.hero-tag{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--orange)}
.hero-title{font-size:26px;font-weight:800}
.hero-status{font-size:15px;color:#c9c9e0}
.hero-cta{margin-top:10px;background:var(--green);color:#fff;font-weight:700;padding:11px 22px;border-radius:11px;font-size:16px}
.home-group{display:flex;flex-direction:column;gap:8px}
.home-group-name{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);padding-left:4px}
.hg-tag{margin-left:6px;padding:2px 8px;border-radius:10px;background:var(--s3);border:1px solid var(--purple);color:var(--orange);font-size:10.5px;letter-spacing:.4px}
.home-mode{display:flex;align-items:center;gap:14px;background:var(--s1);border:1px solid #3a3a60;border-radius:14px;padding:14px 16px;cursor:pointer;color:var(--txt);text-align:left;width:100%;font-family:inherit}
.home-mode:active{transform:scale(.99);border-color:var(--purple)}
.hm-ico{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:21px;color:var(--purple);flex-shrink:0}
.hm-ico .ico{width:24px;height:24px}
.hm-txt{display:flex;flex-direction:column;gap:2px}
.hm-txt b{font-size:17px;font-weight:700}
.hm-txt span{font-size:14px;color:var(--dim)}

/* Home viva (Pilar 2): brilho no herói, contagem, chama do streak, micro-interações */
.hero{position:relative;overflow:hidden}
.hero-shine{position:absolute;top:0;left:-60%;width:45%;height:100%;background:rgba(255,255,255,.12);transform:skewX(-20deg);animation:heroShine 4s ease-in-out infinite;pointer-events:none}
.hero-next{font-size:12px;color:#b9b9d8;margin-top:8px}
.hero-next b{color:#eaeaf6;font-variant-numeric:tabular-nums}
.hero-cta.pulse{animation:ctaPulse 2.1s ease-in-out infinite}
.streak-strip{display:flex;gap:10px;align-items:stretch}
.ss-flame{display:flex;align-items:center;gap:6px;background:#2a1410;border:1px solid #5a2a18;border-radius:14px;padding:10px 14px;flex-shrink:0}
.ss-flame.off{background:var(--s1);border-color:#3a3a60;filter:grayscale(.7);opacity:.85}
.ss-fire{font-size:20px;display:inline-block;animation:flameFlick 1.5s ease-in-out infinite}
.ss-flame b{font-size:21px;font-weight:800;color:var(--orange)}
.ss-flame .ss-d{font-size:13px;color:var(--dim)}
.ss-mile{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;background:var(--s1);border:1px solid #3a3a60;border-radius:14px;padding:10px 14px}
.ss-bar{height:7px;border-radius:5px;background:var(--s3);overflow:hidden}
.ss-bar i{display:block;height:100%;background:var(--purple);border-radius:5px;transition:width .8s cubic-bezier(.2,.8,.3,1)}
.ss-mile span{font-size:12.5px;color:var(--dim)}
.home-mode{transition:transform .12s,border-color .12s,background .12s}
.home-mode:hover{transform:translateY(-2px);border-color:var(--purple);background:var(--s2)}
#app.on-home #logo{animation:logoBreathe 5s ease-in-out infinite;transform-origin:left center}
@keyframes heroShine{0%{left:-60%}55%,100%{left:130%}}
@keyframes ctaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes flameFlick{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.15) rotate(3deg)}}
@keyframes logoBreathe{0%,100%{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.03) rotate(1.5deg)}}

/* Maestria (Pilar 3): faixa de Nível na Home + linha de XP nas telas de fim */
.level-ribbon{display:flex;align-items:center;gap:10px;background:var(--s1);border:1px solid #3a3a60;border-radius:14px;padding:10px 14px}
.lr-badge{flex-shrink:0;font-size:13px;font-weight:800;color:#fff;background:var(--purple);border-radius:9px;padding:4px 10px}
.lr-bar{flex:1;height:8px;border-radius:5px;background:var(--s3);overflow:hidden}
.lr-bar i{display:block;height:100%;background:var(--blue);border-radius:5px;transition:width .8s cubic-bezier(.2,.8,.3,1)}
.lr-bar.big{height:10px;margin:2px 0 4px}
.lr-xp{flex-shrink:0;font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.xp-row{display:flex;flex-direction:column;gap:5px;width:100%;margin-top:4px}
.xp-rowbar{height:8px;border-radius:5px;background:var(--s3);overflow:hidden}
.xp-rowbar i{display:block;height:100%;background:var(--blue);border-radius:5px;transition:width .8s cubic-bezier(.2,.8,.3,1)}
.xp-row span{font-size:13.5px;color:var(--orange);font-weight:600;text-align:center}

/* Pilar 4: linguagem de movimento — entradas em cascata (menu) + tilt 3D (jogo) */
.home > *{animation:viewRise .42s both cubic-bezier(.2,.8,.3,1)}
.home > *:nth-child(2){animation-delay:.05s}
.home > *:nth-child(3){animation-delay:.10s}
.home > *:nth-child(4){animation-delay:.15s}
.home > *:nth-child(5){animation-delay:.20s}
.home > *:nth-child(6){animation-delay:.25s}
.home > *:nth-child(n+7){animation-delay:.30s}
#bwrap.enter{animation:boardEnter .4s both cubic-bezier(.2,.8,.3,1)}
@keyframes viewRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes boardEnter{from{opacity:0;transform:perspective(700px) rotateX(7deg) translateY(8px)}to{opacity:1;transform:none}}

/* Perfil / Estatísticas */
.back-btn{align-self:flex-start;background:none;border:none;color:var(--dim);font-size:14px;font-weight:600;cursor:pointer;padding:2px 0;font-family:inherit}
.back-btn:active{opacity:.7}
.profile-h{font-size:22px;font-weight:800;color:var(--txt)}
.stat-card{background:var(--s1);border:1px solid #3a3a60;border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.sc-title{font-size:16px;font-weight:800;color:var(--txt)}
.sc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}
.sc-grid>div{display:flex;flex-direction:column;gap:2px}
.sc-grid b{font-size:27px;font-weight:800;color:var(--orange);font-family:'Audiowide','Nunito',sans-serif}
.sc-grid span{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px}
.sc-row{display:flex;justify-content:space-between;align-items:center;font-size:15.5px;color:var(--txt)}
.sc-row b{font-size:20px;color:var(--orange);font-family:'Audiowide','Nunito',sans-serif}
.last7-wrap{display:flex;flex-direction:column;gap:6px}
.last7-l{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.last7{display:flex;gap:7px}
.d7{width:22px;height:22px;border-radius:7px;background:var(--s3)}
.d7.win{background:var(--green)}
.d7.loss{background:var(--red)}
.d7.none{background:var(--s3);border:1px solid #3a3a60}
.theme-row{display:flex;flex-wrap:wrap;gap:8px}
.lvl-note{font-size:12.5px;line-height:1.45;color:var(--dim);margin:8px 2px 0}
.lvl-note b{color:var(--txt)}

#bwrap{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:12px}
#bwrap:has(.done){justify-content:flex-start} /* tela de resultado ancora no topo (todos os modos) */
#board{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:min(84vw,300px)}
#board.b-compact{width:min(80vw,270px)} /* Maratona (4 linhas) e Treino: peça um pouco menor */
#modeArea{width:min(88vw,380px);display:flex;justify-content:center}
#modeArea:empty{display:none}

/* Coach (tutorial guiado do Nível 1) — texto com efeito de digitação */
.coach{width:100%;text-align:center;font-size:15.5px;line-height:1.5;color:var(--txt);background:var(--s1);border:1px solid #3a3a60;border-left:3px solid var(--purple);border-radius:12px;padding:11px 15px;min-height:2.6em}
.coach .cur{opacity:.6}

/* Card explicativo de etapa do Treinamento (abertura + transições entre atributos) */
.coachcard{display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;width:100%;padding:22px 20px;background:var(--s1);border:1px solid #3a3a60;border-left:3px solid var(--purple);border-radius:16px;animation:fadeUp .3s ease}
.cc-title{font-size:20px;font-weight:800;color:var(--txt)}
.cc-body{font-size:15px;color:var(--dim);line-height:1.6;max-width:330px}
.cc-body b{color:var(--txt)}

/* Tela de conclusão do Treinamento */
.done{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;width:100%;padding:20px;background:var(--s1);border:1px solid #3a3a60;border-radius:16px}
.done-title{font-size:23px;font-weight:800;color:var(--green)}
.done-sub{font-size:14.5px;color:var(--dim);line-height:1.55;max-width:310px}
/* CTA primário unificado = verde (ação/"go"). Roxo fica reservado a marca/seleção. */
.btn-play{padding:13px 26px;background:var(--green);color:#fff;border:none;border-radius:12px;font-size:16.5px;font-weight:700;cursor:pointer;font-family:inherit}
.btn-play:active{opacity:.85}
.done-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin:4px 0}
.done-stats>div{display:flex;flex-direction:column;align-items:center}
.done-stats b{font-size:24px;color:var(--txt)}
.done-stats span{font-size:12.5px;color:var(--dim)}
.record{font-size:16.5px;font-weight:800;color:var(--orange)}
/* Medalha da façanha rara (limpar as 81) — dourado */
.medal{font-size:16px;font-weight:800;color:#FFD166;background:rgba(255,209,102,.12);border:1px solid rgba(255,209,102,.5);border-radius:12px;padding:8px 15px}

/* Conclusão festiva do Treinamento */
.done.festive{border-color:var(--green);animation:festivePulse 1.6s ease-in-out infinite}
@keyframes festivePulse{0%,100%{box-shadow:0 0 0 rgba(39,174,96,0)}50%{box-shadow:0 0 28px rgba(39,174,96,.4)}}
.done-burst{font-size:46px;line-height:1;animation:pop .6s ease}
.unlock{font-size:14px;color:var(--txt);background:var(--s2);border:1px solid #3a3a60;border-radius:12px;padding:8px 14px;line-height:1.5}
.unlock b{color:var(--green)}

/* Tela de resultado do Desafio do Dia */
.daily-no{font-size:13px;color:var(--dim);font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.streak-badge{font-size:15.5px;color:var(--txt);background:var(--s2);border:1px solid #3a3a60;border-radius:12px;padding:8px 16px}
.streak-badge b{color:var(--orange);font-size:21px;font-family:'Audiowide','Nunito',sans-serif;margin:0 2px}
.daily-result .next-in{font-size:12px;opacity:.8}
.privacy-note{font-size:12.5px;line-height:1.5;color:var(--dim);text-align:center;padding:2px 8px}
.privacy-note b{color:var(--txt)}

/* Remix (mesa + mão) */
.remix-table{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;width:100%}
.rgroup{display:flex;gap:8px;min-height:84px;padding:9px;border:2px dashed #3a3a60;border-radius:14px;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer}
.rgroup.valid{border-color:var(--green);border-style:solid;background:rgba(39,174,96,.06)}
.rgroup.invalid{border-color:var(--red);border-style:solid;background:rgba(235,87,87,.06)}
.rgroup.empty{color:var(--dim);font-size:13.5px;font-weight:600;min-height:44px}
.rpiece{width:clamp(50px,15vw,66px);height:clamp(75px,22vw,99px);border-radius:11px;background:var(--s2);border:2px solid #3a3a60;overflow:hidden;cursor:pointer;flex-shrink:0}
.rpiece.sel{border-color:#fff;box-shadow:0 0 12px rgba(255,255,255,.3)}
.rpiece svg{display:block;width:100%;height:100%}
.rhand-wrap{display:flex;flex-direction:column;gap:8px;width:100%;align-items:center}
/* Mão = carrossel horizontal (mobile): desliza, não quebra linha. */
.rhand{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;align-items:center;min-height:108px;width:100%;padding:9px;background:var(--s1);border:1px solid #3a3a60;border-radius:14px;cursor:pointer;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#3a3a60 transparent}
.rhand:not(:has(.rpiece)){justify-content:center}
.rhand>.rpiece{scroll-snap-align:center}
.rhand::-webkit-scrollbar{height:6px}
.rhand::-webkit-scrollbar-thumb{background:#3a3a60;border-radius:3px}
.rhand-empty{color:var(--dim);font-size:14.5px;font-weight:600}
.rbtns{display:flex;gap:10px;justify-content:center}
.done-glow{outline:2px solid var(--green);border-radius:12px}

/* Decifre (dedução): histórico de palpites + seletor de 4 atributos */
.decifre{display:flex;flex-direction:column;gap:14px;width:100%}
.dec-board{display:flex;flex-direction:column;gap:7px;width:100%}
.dec-empty{font-size:13px;color:var(--dim);text-align:center;padding:6px}
.dec-row{display:flex;align-items:center;gap:12px;justify-content:center}
.dec-piece{width:32px;height:48px;flex-shrink:0;background:var(--s2);border:1px solid #3a3a60;border-radius:10px;overflow:hidden}
.dec-piece svg{display:block;width:100%;height:100%}
.dec-marks{display:flex;align-items:center;gap:6px}
.dec-mark{width:28px;height:28px;border-radius:7px}
.dec-mark.hit{background:var(--green)}
.dec-mark.miss{background:var(--s3)}
.dec-count{font-size:15px;font-weight:800;color:var(--dim);margin-left:4px}
/* Fácil (1 Peça): peça grande à esquerda + matriz de atributos (chips formato Segredo) */
.dec-card{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;background:var(--s1);border:1px solid #3a3a60;border-radius:16px;padding:14px}
.dec-input2{display:flex;align-items:center;justify-content:center;gap:14px;width:100%}
.dec-bigpiece{width:84px;height:126px;flex-shrink:0;background:var(--s2);border:1px solid #3a3a60;border-radius:14px;overflow:hidden}
.dec-bigpiece svg{display:block;width:100%;height:100%}
.dec-input2 .cs-strip{flex:0 1 auto;justify-content:center}
.cs-legend .dim{opacity:.85}
.dec-input{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;background:var(--s1);border:1px solid #3a3a60;border-radius:16px;padding:14px}
.dec-preview{width:44px;height:66px;background:var(--s2);border:1px solid #3a3a60;border-radius:12px;overflow:hidden}
.dec-preview svg{display:block;width:100%;height:100%}
.dec-sels{display:flex;flex-direction:column;gap:9px;width:100%}
.dec-sel{display:flex;align-items:center;gap:10px}
.dec-sel-l{font-size:12.5px;font-weight:700;color:var(--dim);width:64px;flex-shrink:0;text-transform:uppercase;letter-spacing:.4px}
.dec-chips{display:flex;gap:6px;flex:1}
.dec-chip{flex:1;min-height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid #3a3a60;background:var(--s2);color:var(--txt);font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.dec-chip.on{background:var(--purple);border-color:var(--purple);color:#fff}
.dec-chip:active{transform:scale(.94)}
.dec-sw{width:18px;height:18px;border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,.5)}
.dec-reveal{display:flex;align-items:center;gap:10px;justify-content:center;font-size:14px;color:var(--dim);margin:2px 0}
.dec-reveal svg{width:46px;height:69px;display:block;background:var(--s2);border:1px solid #3a3a60;border-radius:12px}

/* Caça ao SET (dedução de um MEW válido): 3 tiles + tira de chips + feedback verde/amarelo */
.caca{display:flex;flex-direction:column;gap:12px;width:100%}
.cs-legend{font-size:11.5px;color:var(--dim);text-align:center}
.cs-pieces{display:flex;gap:4px;flex-shrink:0}
.cs-pieces svg{width:30px;height:45px;display:block;background:var(--s2);border:1px solid #3a3a60;border-radius:8px}
.cs-badges{display:flex;gap:6px}
.cs-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:30px;background:var(--s2);border:1px solid #3a3a60;border-radius:8px;padding:3px 5px;line-height:1.05}
.cs-g{font-size:17px;font-weight:800;color:var(--green)}
.cs-y{font-size:17px;font-weight:800;color:#F2C94C}
/* Cabeçalho único das colunas de feedback (L/N/C/P alinhado aos selos) */
.cs-head{margin-bottom:1px}
.cs-pieces-ph{width:98px;flex-shrink:0}
.cs-badge-head{background:transparent;border-color:transparent;font-size:13px;font-weight:800;color:var(--dim);padding-top:0;padding-bottom:0}
.cs-input{display:flex;flex-direction:column;align-items:center;gap:11px;width:100%;background:var(--s1);border:1px solid #3a3a60;border-radius:16px;padding:14px}
.cs-tiles{display:flex;gap:10px}
.cs-tile{position:relative;width:70px;height:104px;border-radius:12px;background:var(--s2);border:2px solid #3a3a60;overflow:hidden;cursor:pointer}
.cs-tile.act{border-color:var(--purple);box-shadow:0 0 0 2px rgba(155,81,224,.35)}
.cs-tile svg{display:block;width:100%;height:100%}
.cs-rot{position:absolute;right:2px;bottom:2px;width:20px;height:20px;border-radius:6px;border:none;background:rgba(0,0,0,.45);color:#fff;font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.cs-hint{font-size:11.5px;color:var(--dim);text-align:center}
.cs-strip{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;width:100%}
.cs-group{display:flex;gap:5px;padding:5px;background:var(--s2);border-radius:11px}
.cs-chip{min-width:40px;min-height:38px;display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid #3a3a60;background:var(--s1);color:var(--txt);font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.cs-chip.on{background:var(--purple);border-color:var(--purple);color:#fff}
.cs-chip:active{transform:scale(.94)}
.cs-pat{width:20px;height:20px;border-radius:5px;display:inline-block}
.cs-pat-solid{background:var(--dim)}
.cs-pat-stripes{background:repeating-linear-gradient(45deg,var(--dim) 0 3px,transparent 3px 6px);border:1px solid var(--dim)}
.cs-pat-outline{background:transparent;border:2px solid var(--dim)}
.cs-reveal{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;color:var(--dim);margin:2px 0}
/* Caça ao MEW · Médio: 3 slots (ordem) + pool de 9 tocáveis */
.cm-input{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;background:var(--s1);border:1px solid #3a3a60;border-radius:16px;padding:14px}
.cm-slots{display:flex;gap:10px}
.cm-slot{width:46px;height:69px;border-radius:10px;background:var(--s2);border:1px solid #3a3a60;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cm-slot.empty{border-style:dashed}
.cm-slot svg{display:block;width:100%;height:100%}
.cm-num{font-size:17px;font-weight:800;color:var(--dim)}
.cm-pool{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:250px}
.cm-cell{position:relative;aspect-ratio:2/3;border-radius:11px;background:var(--s2);border:2px solid #3a3a60;overflow:hidden;cursor:pointer;padding:0}
.cm-cell svg{display:block;width:100%;height:100%}
.cm-cell.sel{border-color:var(--purple);box-shadow:0 0 0 2px rgba(155,81,224,.35)}
.cm-ord{position:absolute;right:3px;top:3px;width:19px;height:19px;border-radius:50%;background:var(--purple);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}

/* Sudoku+: grade e bandeja */
.piece.slot{background:rgba(255,255,255,.02);border:2px dashed #3a3a60;cursor:pointer}
.piece.slot:hover{border-color:var(--purple)}
.piece.locked{background:#20203a;border-color:#3a3a5e;cursor:default}
.piece.ok{border-color:var(--green)!important}
.piece.bad{border-color:var(--red)!important}
.tray-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.tray-info{font-size:13.5px;color:var(--dim)}
.tray{display:flex;gap:9px;min-height:96px}
.tray-row{display:flex;align-items:center;justify-content:center;gap:10px}
.btn-next-ico{flex-shrink:0;width:46px;align-self:stretch;min-height:90px;display:flex;align-items:center;justify-content:center;background:var(--s2);border:1px solid #3a3a60;border-radius:12px;color:var(--purple);cursor:pointer;padding:0}
.btn-next-ico svg{width:24px;height:24px}
.btn-next-ico:active{transform:scale(.95)}
.tray-piece{width:60px;height:90px;border-radius:12px;background:var(--s2);border:2px solid #3a3a60;cursor:pointer;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .1s}
.tray-piece:active{transform:scale(.95)}
.tray-piece.sel{border-color:#fff;box-shadow:0 0 14px rgba(255,255,255,.25)}
.tray-piece svg{display:block;width:100%;height:100%}
.btn-next{padding:7px 15px;background:var(--s2);border:1px solid #3a3a60;border-radius:9px;color:var(--txt);font-size:13.5px;font-weight:600;cursor:pointer}
.btn-next:active{opacity:.8}

/* Footer */
#foot{display:flex;justify-content:center;align-items:center;gap:16px;padding:8px 16px;background:var(--s1);border-top:1px solid #2a2a45;flex-shrink:0}
#hintBtn{display:inline-flex;align-items:center;gap:6px;padding:7px 18px;background:var(--s2);color:var(--dim);border:1px solid #3a3a60;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer}
/* Dica + Início agrupados à direita da barra de ferramentas (no jogo) */
.tools-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tools-right .icon-btn{width:40px;height:37px;border-radius:10px}
.tools-right .icon-btn[hidden]{display:none}
/* Ícone inline em botões de texto (Dica, Compartilhar) */
.btn-ico{width:16px;height:16px;flex-shrink:0}
.btn-play .btn-ico{vertical-align:-3px;margin-right:7px}
#hintBtn:active{opacity:.8}
/* Empurrão para a Dica (Nível 3 do Treino): destaque estático (cor/borda) + pulso.
   Sob prefers-reduced-motion o pulso some, mas o destaque estático permanece. */
#hintBtn.nudge{border-color:var(--orange);color:var(--orange);box-shadow:0 0 0 3px rgba(242,153,74,.35);animation:hintPulse 1s ease-in-out 3}
@keyframes hintPulse{0%,100%{box-shadow:0 0 0 0 rgba(242,153,74,.12)}50%{box-shadow:0 0 0 5px rgba(242,153,74,.5)}}
.help{display:flex;gap:14px;font-size:12.5px;color:var(--dim)}
.help span{display:flex;align-items:center;gap:4px}
.kbd{background:var(--s2);border:1px solid #3a3a60;border-radius:4px;padding:1px 5px;font-size:11.5px}

/* Pieces */
.piece{aspect-ratio:2/3;border-radius:14px;background:var(--s2);border:2px solid var(--s3);cursor:pointer;overflow:hidden;position:relative;transition:transform .15s,border-color .15s,box-shadow .15s;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.piece:active{transform:scale(.95)}
/* `!important` para a seleção VENCER as bordas de validação (.ok/.bad também usam !important),
   senão no Reorganizar — onde toda peça tem .ok/.bad — a borda branca da seleção não aparece. */
.piece.selected{border-color:#fff!important;box-shadow:0 0 18px rgba(255,255,255,.25);transform:scale(1.05)}
.piece.hint-glow{border-color:var(--green);box-shadow:0 0 18px rgba(39,174,96,.4)}
.piece svg{display:block;width:100%;height:100%}

/* Animations */
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.18)}70%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:scale(.78)}to{opacity:1;transform:scale(1)}}
@keyframes dealIn{0%{opacity:0;transform:translateY(-18px) scale(.6) rotate(-8deg)}60%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes floatUp{0%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-50px)}}
.piece.shake{animation:shake .4s ease;border-color:var(--red)!important;box-shadow:0 0 14px rgba(235,87,87,.35)!important}
.piece.pop{animation:pop .35s ease}
/* Acerto em destaque (Treinamento): brilho verde mantido enquanto o tabuleiro pausa */
.piece.correct{border-color:var(--green)!important;box-shadow:0 0 26px rgba(39,174,96,.65)!important;transform:scale(1.05);transition:box-shadow .2s,border-color .2s,transform .2s;z-index:2}
.piece.new{animation:fadeUp .3s ease}
.piece.deal,.rpiece.deal{animation:dealIn .34s cubic-bezier(.2,.8,.3,1.2) both}

/* ── Juice: celebração ao formar um MEW (partículas + flash + pulso) ── */
#fxFlash{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:0;background:radial-gradient(circle at var(--fx,50% 50%),rgba(155,81,224,.32),transparent 55%)}
#fxFlash.go{animation:fxFlash .5s ease-out}
#fx{position:fixed;inset:0;pointer-events:none;z-index:61;overflow:hidden}
.fx-dot{position:fixed;width:10px;height:10px;border-radius:50%;will-change:transform,opacity;animation:fxBurst .75s cubic-bezier(.15,.7,.3,1) forwards}
.piece.win{animation:fxWin .55s ease;z-index:3}
@keyframes fxFlash{0%{opacity:1}100%{opacity:0}}
@keyframes fxBurst{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.25);opacity:0}}
@keyframes fxWin{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){#fxFlash.go,.fx-dot,.piece.win{animation:none!important}}

/* Tela de pré-partida (▶ Iniciar) */
.ready{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;width:100%;padding:26px 20px;background:var(--s1);border:1px solid #3a3a60;border-radius:16px}
.ready-title{font-size:22px;font-weight:800;color:var(--txt)}
.ready-sub{font-size:15.5px;color:var(--dim);line-height:1.55;max-width:310px}
.ready-choices{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center}
.ready-choices-l{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim)}
.rchip-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center}
.rchip{padding:8px 17px;border-radius:18px;border:1px solid #3a3a60;background:var(--s2);color:var(--dim);font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit}
.rchip.on{background:var(--purple);border-color:var(--purple);color:#fff}
.rchip:active{transform:scale(.94)}
.rchip.locked{opacity:.5;cursor:default}
.rchip.locked:active{transform:none}
.btn-begin{font-size:18px;padding:15px 38px;background:var(--green)}

/* Acessibilidade: respeitar "reduzir movimento" (público adulto / requisito de loja) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Toast + score float */
#toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%) translateY(10px);max-width:min(90vw,420px);text-align:center;line-height:1.35;background:#1e1e38;color:var(--txt);padding:12px 20px;border-radius:14px;border:1px solid #3a3a60;border-left:4px solid var(--purple);box-shadow:0 10px 28px rgba(0,0,0,.5);font-size:15.5px;font-weight:600;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:100}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#scoreFloat{position:fixed;top:25%;left:50%;font-size:28px;font-weight:900;color:var(--green);pointer-events:none;z-index:150;display:none}
#scoreFloat.run{display:block;animation:floatUp .7s ease forwards}