:root{--bg:#f4f1ea;--ink:#14213d;--blue:#0055ff;--yellow:#ffd23f;--pink:#ff7aa8;--mint:#7fe0c3;--lilac:#b5c9ff;--mut:#5b6478;--card:#fff;--sh:4px 4px 0 var(--ink)}
@media (prefers-color-scheme:dark){
html:not([data-theme=light]){--bg:#10162b;--ink:#f4f1ea;--card:#1b2342;--mut:#a3adc7;--sh:4px 4px 0 #000}html:not([data-theme=light]) .btn,html:not([data-theme=light]) .chip,html:not([data-theme=light]) .card,html:not([data-theme=light]) .inp,html:not([data-theme=light]) .av,html:not([data-theme=light]) .bolha,html:not([data-theme=light]) .tab{border-color:#f4f1ea}html:not([data-theme=light]) .card.cor,html:not([data-theme=light]) .bolha.eu,html:not([data-theme=light]) .btn.am,html:not([data-theme=light]) .btn.rs,html:not([data-theme=light]) .btn.mn,html:not([data-theme=light]) .pill.on,html:not([data-theme=light]) .tab.on,html:not([data-theme=light]) .av,html:not([data-theme=light]) .chip.cor{color:#14213d}html:not([data-theme=light]) .btn.az,html:not([data-theme=light]) .bolha.eu{color:#fff}html:not([data-theme=light]) .marca img{filter:brightness(0) invert(1)}html:not([data-theme=light]) .passo.on,html:not([data-theme=light]) .escolha.on{color:#14213d}
}
html[data-theme=dark]{--bg:#10162b;--ink:#f4f1ea;--card:#1b2342;--mut:#a3adc7;--sh:4px 4px 0 #000}html[data-theme=dark] .btn,html[data-theme=dark] .chip,html[data-theme=dark] .card,html[data-theme=dark] .inp,html[data-theme=dark] .av,html[data-theme=dark] .bolha,html[data-theme=dark] .tab{border-color:#f4f1ea}html[data-theme=dark] .card.cor,html[data-theme=dark] .bolha.eu,html[data-theme=dark] .btn.am,html[data-theme=dark] .btn.rs,html[data-theme=dark] .btn.mn,html[data-theme=dark] .pill.on,html[data-theme=dark] .tab.on,html[data-theme=dark] .av,html[data-theme=dark] .chip.cor{color:#14213d}html[data-theme=dark] .btn.az,html[data-theme=dark] .bolha.eu{color:#fff}html[data-theme=dark] .marca img{filter:brightness(0) invert(1)}html[data-theme=dark] .passo.on,html[data-theme=dark] .escolha.on{color:#14213d}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Bricolage Grotesque',system-ui,-apple-system,Segoe UI,sans-serif;font-size:16px;line-height:1.5}
img{max-width:100%}a{color:var(--blue)}
.fita{background:var(--yellow);color:#14213d;border-bottom:2px solid #14213d;overflow:hidden;white-space:nowrap;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:5px 0}
.fita span{display:inline-block;animation:corre 28s linear infinite}
@keyframes corre{to{transform:translateX(-50%)}}
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px;max-width:1000px;margin:0 auto}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.marca img{height:26px;width:auto}.marca b{font-weight:800;font-size:18px;padding-left:10px;border-left:2px solid var(--ink)}
nav{display:flex;gap:6px;flex-wrap:wrap}
.pill{position:relative;border:2px solid var(--ink);background:var(--card);color:var(--ink);border-radius:99px;padding:6px 14px;font:inherit;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .12s}
.pill:hover{transform:rotate(-2deg) translateY(-1px)}.pill.on{background:var(--blue);color:#fff}
.pill .n{position:absolute;top:-8px;right:-6px;background:var(--pink);color:#14213d;border:2px solid var(--ink);border-radius:99px;font-size:11px;min-width:20px;height:20px;line-height:16px;text-align:center;font-weight:800}
.wrap{max-width:1000px;margin:0 auto;padding:8px 20px 80px}
h1,h2,h3{line-height:1.1;margin:0 0 .4em;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(34px,7vw,60px)}h2{font-size:26px}h3{font-size:19px}
p{margin:0 0 .8em}.mut{color:var(--mut)}.peq{font-size:14px}
.card{background:var(--card);border:2px solid var(--ink);border-radius:18px;box-shadow:var(--sh);padding:20px;margin-bottom:18px}
.card.cor{color:#14213d}.card.am{background:var(--yellow)}.card.rs{background:var(--pink)}.card.mn{background:var(--mint)}.card.lc{background:var(--lilac)}.card.az{background:var(--blue);color:#fff}
.tilt-l{transform:rotate(-1.2deg)}.tilt-r{transform:rotate(1deg)}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}.grade .card{margin:0}
.hero{padding:26px 0 8px}.hero h1 em{font-style:normal;background:var(--yellow);color:#14213d;padding:0 .15em;border:2px solid var(--ink);border-radius:10px;display:inline-block;transform:rotate(-2deg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--ink);border-radius:14px;padding:11px 20px;font:inherit;font-weight:800;color:var(--ink);background:var(--card);box-shadow:3px 3px 0 var(--ink);cursor:pointer;text-decoration:none;transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn.az{background:var(--blue);color:#fff}.btn.am{background:var(--yellow);color:#14213d}.btn.rs{background:var(--pink);color:#14213d}.btn.mn{background:var(--mint);color:#14213d}.btn.peq{padding:6px 12px;font-size:14px;box-shadow:2px 2px 0 var(--ink)}
.btn.risco{background:transparent;box-shadow:none;border-style:dashed}.btn[disabled]{opacity:.5;cursor:not-allowed}
label{display:block;font-weight:600;font-size:14px;margin:0 0 4px}
.inp{width:100%;border:2px solid var(--ink);border-radius:12px;padding:10px 12px;font:inherit;background:var(--card);color:var(--ink)}
.inp:focus{outline:3px solid var(--yellow);outline-offset:1px}textarea.inp{min-height:84px;resize:vertical}
.campo{margin-bottom:14px}.linha{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.linha>.grow{flex:1;min-width:160px}
.f2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.chip{display:inline-block;border:2px solid var(--ink);border-radius:99px;padding:2px 12px;font-size:13px;font-weight:800;background:var(--card);margin:0 6px 6px 0}
.chip.cor{color:#14213d}.chip.am{background:var(--yellow)}.chip.mn{background:var(--mint)}.chip.rs{background:var(--pink)}.chip.az{background:var(--blue);color:#fff}
.av{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:var(--lilac);display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#14213d;overflow:hidden;flex:none;font-size:15px}
.av img{width:100%;height:100%;object-fit:cover}.av.g{width:96px;height:96px;font-size:32px}.av.m{width:64px;height:64px;font-size:22px}
.passos{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.passo{flex:1;min-width:110px;border:2px solid var(--ink);border-radius:14px;padding:8px 12px;background:var(--card);font-weight:600;font-size:14px}
.passo.on{background:var(--yellow);color:#14213d;transform:rotate(-1.5deg);box-shadow:var(--sh)}.passo.ok{background:var(--mint);color:#14213d}
.cont{display:flex;gap:10px;flex-wrap:wrap}.cont div{background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:14px;padding:8px 14px;text-align:center;min-width:72px}
.cont b{display:block;font-size:30px;line-height:1;font-weight:800}.cont span{font-size:12px;font-weight:600}
.lista{list-style:none;padding:0;margin:0}.lista li{display:flex;gap:10px;align-items:center;justify-content:space-between;border-bottom:2px dashed var(--ink);padding:10px 0}.lista li:last-child{border:0}
.chat{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto;padding:4px}
.bolha{max-width:82%;border:2px solid var(--ink);padding:8px 12px;border-radius:16px 16px 16px 4px;background:var(--card);word-wrap:break-word;white-space:pre-wrap}
.bolha.eu{align-self:flex-end;background:var(--blue);color:#fff;border-radius:16px 16px 4px 16px}.bolha small{display:block;font-size:11px;opacity:.7;margin-top:2px}
.revela{text-align:center;padding:30px 20px}.revela .av{margin:0 auto 10px}.revela h2{font-size:34px}
.rank{width:100%;border-collapse:collapse}.rank td,.rank th{padding:8px 6px;text-align:left;border-bottom:2px dashed var(--ink)}.rank tr.top td{font-weight:800}
.pos{display:inline-flex;width:34px;height:34px;border:2px solid var(--ink);border-radius:50%;align-items:center;justify-content:center;font-weight:800;background:var(--yellow);color:#14213d}
.escolhas{display:flex;gap:8px;flex-wrap:wrap}.escolha{border:2px solid var(--ink);background:var(--card);color:var(--ink);border-radius:14px;padding:6px 12px 6px 6px;display:flex;align-items:center;gap:8px;cursor:pointer;font:inherit;font-weight:600}
.escolha .av{width:34px;height:34px;font-size:12px}.escolha.on{background:var(--yellow);color:#14213d;transform:rotate(-1.5deg);box-shadow:var(--sh)}
.erro{background:#ffe0e0;color:#7a1010;border:2px solid #7a1010;border-radius:12px;padding:8px 12px;margin-bottom:12px;font-weight:600}
.ok{background:var(--mint);color:#14213d;border:2px solid #14213d;border-radius:12px;padding:10px 14px;margin-bottom:12px;font-weight:600}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;font-weight:600;transition:transform .25s;z-index:20;max-width:90vw}
.toast.on{transform:translate(-50%,0)}
#confete{position:fixed;inset:0;pointer-events:none;z-index:30;width:100%;height:100%}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}.tab{border:2px solid var(--ink);background:var(--card);color:var(--ink);border-radius:12px;padding:6px 14px;font:inherit;font-weight:600;cursor:pointer}.tab.on{background:var(--yellow);color:#14213d;box-shadow:2px 2px 0 var(--ink)}
.tabela{width:100%;border-collapse:collapse;font-size:14px}.tabela td,.tabela th{padding:8px 6px;border-bottom:1px solid var(--mut);text-align:left;vertical-align:middle}
.barra{height:14px;border:2px solid var(--ink);border-radius:99px;background:var(--card);overflow:hidden}.barra i{display:block;height:100%;background:var(--blue)}
.gift{display:inline-block;animation:bal 2.2s ease-in-out infinite}
@keyframes bal{50%{transform:rotate(8deg) translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.fita span,.gift{animation:none}.pill:hover,.btn:hover{transform:none}}
@media (max-width:560px){.topo{padding:12px 14px}.wrap{padding:6px 14px 70px}.card{padding:16px}.tilt-l,.tilt-r{transform:none}}
.toast.err{background:#a32d2d;color:#fff}
.pill.tema{width:38px;height:38px;padding:0;font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.pill.lock{opacity:.65;border-style:dashed}