:root{
  --ink:#1d2433; --muted:#5b6475; --line:#e3e6ee; --bg:#f6f4ef; --card:#fff;
  --c1:#0e7c86; --c1b:#dff3f1; --c2:#d9541e; --c2b:#fde8dc; --c3:#6a3fb5; --c3b:#ece4fa;
  --ok:#1f8a4c; --okb:#e1f5e9; --bad:#c0392b; --badb:#fbe5e2; --gold:#e8a317;
  --cor:var(--c1); --corb:var(--c1b);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Nunito',system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:16px;line-height:1.45}
h1,h2,h3,.disp{font-family:'Baloo 2','Nunito',sans-serif;line-height:1.1;margin:0}
button{font:inherit;cursor:pointer}
input,select{font:inherit}
a{color:inherit}
.prev{background:#1d2433;color:#fff;font-size:13px;text-align:center;padding:6px 10px}
.prev b{color:#ffd166}
.wrap{max-width:980px;margin:0 auto;padding:16px}
.top{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.back{border:0;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:700}
.crumb{color:var(--muted);font-size:14px}
.medals{margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-weight:800;font-size:14px}

/* início */
.hero{background:linear-gradient(120deg,#1d2433,#3b2a63);color:#fff;border-radius:22px;padding:26px 22px;position:relative;overflow:hidden}
.hero h1{font-size:clamp(30px,6vw,46px)}
.hero p{margin:6px 0 0;opacity:.85}
.hero .wave{position:absolute;right:-10px;bottom:-12px;opacity:.25;width:260px}
.salas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:18px 0}
.sala{border:0;text-align:left;border-radius:20px;padding:18px;color:#fff;min-height:170px;display:flex;flex-direction:column;gap:6px;box-shadow:0 6px 0 rgba(0,0,0,.18);transition:transform .15s}
.sala:hover{transform:translateY(-3px)}
.sala .emo{font-size:38px}
.sala h2{font-size:28px}
.sala small{opacity:.9;font-size:14px}
.sala .bar{margin-top:auto;background:rgba(255,255,255,.25);border-radius:9px;height:9px;overflow:hidden}
.sala .bar i{display:block;height:100%;background:#fff}
.s1{background:var(--c1)} .s2{background:var(--c2)} .s3{background:var(--c3)}
.aei{border:2px dashed #b9b2a3;border-radius:20px;padding:16px;display:flex;gap:14px;align-items:center;color:var(--muted);background:#fbfaf7}
.aei .emo{font-size:34px}
.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-weight:700;text-decoration:none}

/* sala */
.sh{border-radius:20px;padding:18px;color:#fff;background:var(--cor);margin-bottom:16px}
.sh h1{font-size:34px}
.sh p{margin:4px 0 0;opacity:.9}
.sec{margin:20px 0 8px;font-size:22px;display:flex;align-items:center;gap:8px}
.sec span{font-size:13px;font-family:Nunito,sans-serif;color:var(--muted);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.tile{border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:4px;position:relative;transition:transform .12s, box-shadow .12s}
.tile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.tile .ic{font-size:30px}
.tile b{font-family:'Baloo 2',Nunito,sans-serif;font-size:19px;line-height:1.1}
.tile small{color:var(--muted);font-size:13.5px}
.tile .got{position:absolute;top:10px;right:10px;font-size:20px}
.tag{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--corb);color:var(--cor);border-radius:6px;padding:2px 7px;align-self:flex-start}

/* atividade */
.act{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px}
.act h1{font-size:30px;color:var(--cor)}
.act .lead{color:var(--muted);margin:4px 0 14px}
.q{font-size:18px;font-weight:700;margin:6px 0 12px}
.opts{display:grid;gap:8px}
.opt{border:2px solid var(--line);background:#fff;border-radius:12px;padding:10px 14px;text-align:left;font-weight:600;display:flex;gap:10px;align-items:center}
.opt:hover:not(:disabled){border-color:var(--cor)}
.opt .l{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--corb);color:var(--cor);font-weight:800;flex:none}
.opt.ok{border-color:var(--ok);background:var(--okb)}
.opt.bad{border-color:var(--bad);background:var(--badb)}
.opt.gone{opacity:.25}
.opt:disabled{cursor:default}
.fb{margin-top:12px;border-radius:12px;padding:10px 14px;font-weight:600}
.fb.ok{background:var(--okb);color:#145c33}
.fb.bad{background:var(--badb);color:#8a2318}
.fb.info{background:#eef2fb;color:#28406e}
.btn{border:0;border-radius:12px;padding:10px 18px;font-weight:800;background:var(--cor);color:#fff}
.btn.alt{background:var(--corb);color:var(--cor)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn:disabled{opacity:.4;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sp{flex:1}
.mt{margin-top:14px}
.muted{color:var(--muted)}
.big{font-size:28px;font-weight:800;font-family:'Baloo 2',Nunito,sans-serif}
.num{width:120px;padding:9px 10px;border:2px solid var(--line);border-radius:10px;font-weight:700}
.panel{background:#f8f9fc;border:1px solid var(--line);border-radius:14px;padding:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:680px){.two{grid-template-columns:1fr}}
label.sl{display:block;font-weight:700;font-size:14px;margin-top:8px}
input[type=range]{width:100%;accent-color:var(--cor)}
.steps{margin:8px 0 0;padding-left:20px}
.steps li{margin:3px 0;font-family:ui-monospace,Menlo,monospace;font-size:15px}
svg text{font-family:Nunito,sans-serif}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:2px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-weight:700}
.chip.on{border-color:var(--cor);background:var(--corb);color:var(--cor)}

/* rumo ao milhão */
.ladder{display:flex;flex-direction:column-reverse;gap:4px;font-weight:800;font-size:14px}
.ladder div{padding:4px 10px;border-radius:8px;background:#f1f1f1;color:#888}
.ladder div.now{background:var(--gold);color:#fff}
.ladder div.done{background:var(--okb);color:var(--ok)}
.milhao{display:grid;grid-template-columns:1fr 150px;gap:16px}
@media (max-width:680px){.milhao{grid-template-columns:1fr}.ladder{flex-direction:row;flex-wrap:wrap}.hero .wave{display:none}}
.helps{display:flex;gap:8px;margin-bottom:10px}
.help{border:2px solid var(--gold);background:#fff8e6;border-radius:12px;padding:6px 10px;font-weight:800;color:#9a6a00}
.help:disabled{opacity:.3}

/* memória */
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:560px){.mem{grid-template-columns:repeat(3,1fr)}}
.card{aspect-ratio:3/4;border-radius:14px;border:0;perspective:600px;background:none;padding:0}
.card .in{position:relative;width:100%;height:100%;transition:transform .4s;transform-style:preserve-3d}
.card.up .in{transform:rotateY(180deg)}
.card .f,.card .b{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;display:grid;place-items:center;padding:8px;text-align:center;font-weight:800}
.card .b{background:var(--cor);color:#fff;font-size:30px;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 8px,transparent 8px 16px)}
.card .f{background:#fff;border:2px solid var(--cor);transform:rotateY(180deg);font-size:14.5px}
.card.match .f{background:var(--okb);border-color:var(--ok)}

/* trilha */
.board{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.casa{aspect-ratio:1;border-radius:12px;background:#fff;border:2px solid var(--line);display:grid;place-items:center;font-weight:800;position:relative;font-size:14px}
.casa.trap{background:#fff3cd;border-color:#f0c040}
.casa.fim{background:var(--ok);color:#fff;border-color:var(--ok)}
.casa .pino{position:absolute;font-size:24px;animation:pulo .5s}
@keyframes pulo{0%{transform:translateY(-12px)}100%{transform:none}}

/* caça ao erro */
.linha{display:block;width:100%;text-align:left;border:2px dashed var(--line);background:#fff;border-radius:10px;padding:10px 12px;margin:6px 0;font-family:ui-monospace,Menlo,monospace;font-size:16px}
.linha:hover:not(:disabled){border-color:var(--bad)}
.linha.bad{border-style:solid;border-color:var(--bad);background:var(--badb)}
.linha.okl{border-style:solid;border-color:var(--ok);background:var(--okb)}

/* flashcards */
.flash{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.fc{height:150px;border:0;background:none;padding:0;perspective:700px}
.fc .in{position:relative;width:100%;height:100%;transition:transform .45s;transform-style:preserve-3d}
.fc.up .in{transform:rotateY(180deg)}
.fc .f,.fc .b{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px;text-align:center}
.fc .f{background:var(--cor);color:#fff;font-family:'Baloo 2',Nunito,sans-serif;font-size:24px;font-weight:700}
.fc .f small{font-family:Nunito,sans-serif;font-size:12px;opacity:.8;font-weight:600}
.fc .b{background:#fff;border:2px solid var(--cor);transform:rotateY(180deg);font-size:15px}

/* projeção */
.proj{position:fixed;inset:0;background:#141a26;color:#fff;z-index:50;display:flex;flex-direction:column;padding:4vh 5vw;overflow:auto}
.proj .q{font-size:clamp(24px,3.6vw,46px);line-height:1.2}
.proj .po{font-size:clamp(20px,2.8vw,36px);padding:10px 18px;border-radius:14px;margin:6px 0;background:rgba(255,255,255,.06);display:flex;gap:16px}
.proj .po.ok{background:#1f8a4c}
.proj .hint{opacity:.6;font-size:clamp(14px,1.6vw,20px);margin-top:auto;padding-top:12px}
.proj .btn{font-size:20px}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#1d2433;color:#fff;padding:12px 18px;border-radius:14px;font-weight:800;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:tin .3s}
@keyframes tin{from{opacity:0;transform:translate(-50%,10px)}}
.timer{font-weight:800;font-family:'Baloo 2',Nunito,sans-serif;font-size:22px}
.prog{height:10px;background:#eceef3;border-radius:6px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--cor);transition:width .3s}
table.t{border-collapse:collapse;width:100%;font-size:14.5px}
table.t th,table.t td{border-bottom:1px solid var(--line);padding:6px 4px;text-align:left}
table.t input{width:64px;padding:4px 6px;border:1px solid var(--line);border-radius:6px}
.qr{width:120px;height:120px;background:#fff;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;padding:4px}
.foot{color:var(--muted);font-size:13px;text-align:center;margin:26px 0 10px}
.opt:disabled,.chip:disabled,.btn.alt:disabled,.linha:disabled{color:inherit;opacity:1}
.opt:disabled:not(.ok):not(.bad){opacity:.55}

.cab{background:#fff;border-bottom:1px solid var(--line)}
.cabin{max-width:980px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.marca{font-family:'Baloo 2',Nunito,sans-serif;font-weight:800;font-size:20px;text-decoration:none}
.prof{margin-left:auto;font-size:15px;color:var(--muted)}
.prof b{color:var(--ink)}
.rod{border-top:1px solid var(--line);background:#fff;color:var(--muted);text-align:center;font-size:13.5px;padding:16px;margin-top:30px;line-height:1.6}
.rod b{color:var(--ink)}
.proj .cred{opacity:.55;font-size:14px;margin-top:8px}
.fonte{display:inline-block;font-size:12.5px;font-weight:700;color:var(--muted);background:#f1f2f6;border-radius:6px;padding:2px 8px;margin-bottom:6px}