:root{
  color-scheme: dark;
  --ink:#070b14; --night:#0e1726; --panel:#141f35; --line:#2a3a5c;
  --paper:#f3ecd8; --muted:#9fb0cc; --sodium:#ffb347; --sodium-d:#7a3d00;
  --sea:#3d8fd0; --danger:#ff6b5d; --ok:#8be08b; --pink:#ff8fc2;
}
[hidden]{display:none!important}
html,body{background:var(--ink);height:auto;touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%} /* sem zoom de duplo toque no celular */
.game canvas,#touch,#touch *{touch-action:none} /* na tela do jogo e nos botões, nenhum gesto vira zoom */
body{color:var(--paper);font-family:'VT323',ui-monospace,Menlo,Consolas,monospace;font-size:20px;line-height:1.25;padding-inline:16px;padding-block:18px 48px}
.wrap{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px}
h1{font-family:'Pixelify Sans','VT323',monospace;font-weight:700;font-size:clamp(30px,5.4vw,56px);line-height:.95;margin:0;color:var(--sodium);text-shadow:3px 3px 0 var(--sodium-d);letter-spacing:.01em;text-wrap:balance}
header p{margin:0;color:var(--muted);font-size:20px;max-width:40ch}
.game{position:relative;width:min(100%, calc((100dvh - 40px) * 16 / 9));max-width:100%;margin:0 auto;aspect-ratio:16/9;background:#000;border:3px solid var(--line);box-shadow:0 0 0 3px var(--ink),0 12px 40px rgba(0,0,0,.6);overflow:hidden;container-type:inline-size;font-size:16px;font-size:2.3cqw;user-select:none;-webkit-user-select:none;touch-action:none}
.game canvas#cv{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block;transition:filter .4s}
.game canvas#txt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.vig{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(40,0,30,.75) 100%)}
#bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bub{position:absolute;transform:translate(-50%,-100%);background:var(--paper);color:#1a1422;padding:.15em .5em;border:2px solid #1a1422;font-size:.8em;line-height:1.05;max-width:60cqw;white-space:normal;width:max-content;text-align:center;box-shadow:2px 2px 0 rgba(0,0,0,.35)}
.bub::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-4px;border:4px solid transparent;border-top-color:#1a1422}
.bub.mom{background:#ffd3e6}
.bub.shroom{background:#ffe0de}
.bub.tia{background:#e6d6ff}
.bub.prompt{background:var(--sodium);font-size:.7em}
.bub.buddy{background:#d6f5ff}
.bub.boss{background:#ffe14f}
.bub.aranha{background:#ffd0d0}
.bub.big{font-family:'Pixelify Sans',monospace;font-weight:700;font-size:1.1em}
.bub.treme{font-family:'Pixelify Sans',monospace;font-weight:700;animation:bizz .08s linear infinite alternate}
@keyframes bizz{from{margin-left:-2px;rotate:-4deg}to{margin-left:2px;rotate:4deg}}
.hud{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:.5em .7em;pointer-events:none;gap:1em}
body:not(.mobile) .hud{font-size:.7em} /* no PC o painel fica 30% menor: rosto, barras, relógio e desafios */
.hud-l{transition:opacity .35s;display:flex;gap:.5em;align-items:center;background:rgba(7,11,20,.72);border:2px solid var(--line);padding:.3em .5em .3em .3em}
#face{width:2.9em;height:3.6em;display:block}
#head{position:absolute;left:0;top:0;width:7.2cqw;height:9cqw;pointer-events:none;transform:translate(-50%,-100%);transform-origin:50% 100%;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.45))}
.nm{font-family:'Pixelify Sans',monospace;font-weight:700;font-size:.85em;letter-spacing:.06em;color:var(--sodium);display:flex;justify-content:space-between;gap:.6em}
.nm span{color:var(--paper);font-family:'VT323',monospace;font-weight:400;font-variant-numeric:tabular-nums}
.bar{width:9em;height:.75em;background:#0a1020;border:2px solid #000;position:relative;margin-top:.15em}
.bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--ok);transition:width .2s linear,background .3s}
.bar b{position:absolute;right:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(135deg,#3a3f4f 0 3px,#1c2030 3px 6px);border-left:2px solid #9fb0cc}
/* aviso de energia: o painel fica por cima do escurecido, a barra brilha e a seta aponta pra ela */
.game.avisoE .hud{z-index:7}
.game.avisoE .hud-l .bar{animation:brilhaE .45s ease-in-out infinite alternate}
@keyframes brilhaE{from{box-shadow:0 0 0 2px #ffe14f,0 0 6px 2px rgba(255,225,79,.5)}to{box-shadow:0 0 0 2px #fff,0 0 18px 7px rgba(255,225,79,.95)}}
.setaE{position:absolute;z-index:8;width:2.6em;transform:translateX(-50%);pointer-events:none;animation:setaPula .45s ease-in-out infinite alternate}
.setaE svg{display:block;width:100%;height:auto}
/* aviso de desafios: o painel da direita brilha e a seta (deitada) aponta pra lista */
.game.avisoD .hud{z-index:7}
.game.avisoD .hud-r{opacity:1!important;animation:brilhaE .45s ease-in-out infinite alternate}
.game.avisoD .hud-r{position:relative}
.setaE.setaD{width:2.2em;right:100%;top:50%;margin-right:.6em;transform:translateY(-50%) rotate(90deg);animation:setaPulaD .45s ease-in-out infinite alternate}
@keyframes setaPulaD{to{margin-right:.1em}}
/* celular: o painel da direita é um botão que abre e fecha a lista de desafios */
body.mobile .hud-r{pointer-events:auto;cursor:pointer;touch-action:manipulation}
.tasks li.tg{color:var(--sodium);text-align:right}
@keyframes setaPula{to{margin-top:.7em}}
.card .cmds{display:grid;gap:.3em;margin:.6em auto .2em;text-align:left;width:max-content;max-width:100%}
.card .cmds div{display:flex;gap:.6em;align-items:baseline}
.card .cmds kbd{min-width:7.5em;text-align:center;font-family:'Pixelify Sans',monospace;background:#1d1230;border:2px solid var(--line);padding:0 .4em;color:#ffe14f}
.bar.sono{height:.55em;margin-top:.2em}
.bar.sono i{background:#9b76d6;width:0}
.bar.sono span{position:absolute;left:.3em;top:50%;transform:translateY(-50%);font-family:'Pixelify Sans',monospace;font-size:.45em;line-height:1;color:#fff;letter-spacing:.08em;text-shadow:0 0 2px #000,0 0 2px #000}
.bar.sono.alerta{animation:pisca .6s steps(2) infinite}
#bannerS:empty{display:none}
.chips{display:flex;flex-wrap:wrap;gap:.3em;margin-top:.25em;min-height:.9em}
.chip{font-size:.6em;padding:0 .35em;border:1px solid currentColor;line-height:1.3}
.hud-r{transition:opacity .35s;text-align:right;background:rgba(7,11,20,.72);border:2px solid var(--line);padding:.25em .6em;font-variant-numeric:tabular-nums}
#dayl{font-family:'Pixelify Sans',monospace;font-weight:700;color:var(--sodium);font-size:1em}
#clock{font-family:'VT323',ui-monospace,monospace;font-size:1.35em;line-height:1;margin:.1em 0;padding:.05em .3em;background:#07140c;color:#7dff9a;border:1px solid #1d3b28;text-shadow:0 0 .3em rgba(125,255,154,.6);letter-spacing:.08em;font-variant-numeric:tabular-nums;display:inline-block}
#clock i{font-style:normal;animation:blink 1s steps(2) infinite}
#awake{font-size:.7em;color:var(--muted)}
.tasks{list-style:none;margin:.2em 0 0;padding:.15em 0 0;border-top:1px solid var(--line);font-size:.62em;line-height:1.15;text-align:left;color:var(--muted)}
.tasks li.ok{color:var(--ok)}
.banner{position:absolute;left:0;right:0;top:30%;text-align:center;pointer-events:none;text-shadow:3px 3px 0 #000}
.banner b{display:block;font-family:'Pixelify Sans',monospace;font-size:3em;color:var(--sodium);line-height:1}
.banner span{font-size:1.1em}
.toast{position:absolute;left:50%;bottom:1.2em;transform:translateX(-50%);background:rgba(7,11,20,.86);border:2px solid var(--sodium);padding:.25em .8em;font-size:.95em;max-width:80%;text-align:center;pointer-events:none}
.toast.bad{border-color:var(--danger)}
.toast.good{border-color:var(--ok)}
.dialog{position:absolute;left:4%;right:4%;bottom:4%;background:rgba(10,14,28,.94);border:3px solid var(--paper);padding:.5em .9em .6em;min-height:4.2em;cursor:pointer}
.dialog b{display:block;font-family:'Pixelify Sans',monospace;color:var(--sodium);font-size:.9em;letter-spacing:.05em}
.dialog p{margin:.1em 0 0;font-size:1.25em;line-height:1.1}
.dialog .retrato{position:absolute;right:.4em;bottom:calc(100% + 3px);height:24cqw;width:auto;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.45))}
.dialog .retrato[hidden]{display:none}
.dialog .more{position:absolute;right:.6em;bottom:.3em;animation:blink 1s steps(2) infinite;color:var(--sodium)}
@keyframes blink{50%{opacity:0}}
.phone{position:absolute;right:3%;top:24%;width:6.6em;aspect-ratio:9/17;box-sizing:border-box;background:linear-gradient(#35507a,#131c30 55%,#0a0e18);border:.32em solid #0b0b0d;outline:2px solid #7a808c;border-radius:1.2em;padding:1.1em .45em .5em;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.12em;box-shadow:0 .4em 1.2em rgba(0,0,0,.6);animation:vibra .07s linear infinite alternate}
.phone .ilha{position:absolute;top:.3em;left:50%;transform:translateX(-50%);width:2.2em;height:.5em;background:#000;border-radius:1em}
.phone .avatar{width:2em;height:2em;border-radius:50%;background:linear-gradient(#b8c0cc,#7c8594);color:#fff;display:grid;place-items:center;font-family:'Pixelify Sans',monospace;font-weight:700;font-size:1em;margin:.2em 0 .1em}
.phone .who{font-family:'Pixelify Sans',monospace;font-weight:700;font-size:1.15em;color:#fff;line-height:1}
.phone .sub{font-size:.55em;color:#aebbd4}
.phone .rlbl{font-size:.55em;color:#fff}
.phone .lbl{font-size:.55em;color:#cfd6e6}
.phone .tm{width:80%;height:.28em;background:#2a3350;margin:auto 0 .3em;border-radius:.2em;overflow:hidden}
@keyframes vibra{0%{transform:translate(-1px,0) rotate(-2.5deg)}100%{transform:translate(1px,-1px) rotate(2.5deg)}}
.phone .tm i{display:block;height:100%;background:var(--danger);width:100%}
@keyframes ring{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
.game button{font-family:'Pixelify Sans',monospace;font-weight:700;font-size:1em;background:var(--sodium);color:#241100;border:0;box-shadow:0 .2em 0 var(--sodium-d);padding:.3em .8em;cursor:pointer}
.game button:focus-visible{outline:3px solid var(--paper);outline-offset:2px}
.game button.ghost{background:transparent;color:var(--paper);box-shadow:none;border:2px solid var(--line)}
.game .phone button{width:2.4em;height:2.4em;border-radius:50%;padding:0;background:#ff3b30;box-shadow:0 .15em 0 #8a1510;display:grid;place-items:center}
.phone button svg{width:1.25em;height:1.25em}
.nap{position:absolute;left:50%;top:18%;transform:translateX(-50%);width:22em;max-width:80%;background:rgba(10,14,28,.92);border:3px solid var(--sea);padding:.5em .8em;text-align:center}
.nap .t{font-family:'Pixelify Sans',monospace;font-weight:700;color:#bfe0ff}
.track{position:relative;height:1.2em;background:#243049;border:2px solid #000;margin:.4em 0}
.track #zone{position:absolute;top:0;bottom:0;background:#3fa35a}
.track #marker{position:absolute;top:-.25em;bottom:-.25em;width:.35em;margin-left:-.175em;background:var(--paper);box-shadow:0 0 0 2px #000}
.nap .hint{font-size:.75em;color:var(--muted)}
#napHits{letter-spacing:.2em;color:#bfe0ff}
.festa{position:absolute;left:3%;right:3%;bottom:3%;background:rgba(12,6,24,.94);border:3px solid #ff4fd8;box-shadow:0 0 0 2px #120a22,0 0 1em rgba(255,79,216,.35);padding:.35em .7em .5em}
.festa b{display:block;font-family:'Pixelify Sans',monospace;color:#4fffd2;font-size:.85em;letter-spacing:.08em}
.festa p{margin:.05em 0 .3em;font-size:1.15em;line-height:1.1;min-height:1.1em}
.fopts{display:flex;flex-direction:column;gap:.2em}
.game button.fopt{font-family:'VT323',monospace;font-weight:400;font-size:.95em;text-align:left;line-height:1.05;background:#1d1230;color:var(--paper);box-shadow:none;border:2px solid #3a2a5a;padding:.2em .5em}
.game button.fopt{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body:not(.mobile) .game button.fopt.on{border-color:#ffe14f;background:#2a1a40}
@media (hover:hover){body:not(.mobile) .game button.fopt:hover{border-color:#ffe14f;background:#2a1a40}}
body.mobile .game button.fopt:focus,body.mobile .game button.fopt:focus-visible{outline:none}
.beg{border-color:#c9a060;box-shadow:0 0 0 2px #120a22,0 0 1em rgba(201,160,96,.35)}
.beg b{color:#ffe14f}
.begbtns{display:flex;flex-direction:column;gap:.3em;margin-top:.2em}
.game .begbtns button{display:flex;align-items:center;gap:.5em;text-align:left;line-height:1.05;background:#1d1230;color:var(--paper);box-shadow:none;border:2px solid #5a4630;padding:.25em .5em;font-family:'VT323',monospace;font-weight:400;font-size:1em;-webkit-tap-highlight-color:transparent;user-select:none}
.begbtns button::before{content:'▸';color:#ffe14f;visibility:hidden}
.game .begbtns button.sel{border-color:#ffe14f;background:#2a1a40}
.begbtns button.sel::before{visibility:visible}
.beg #bgMais{display:none;text-align:right;color:#ffe14f;font-style:normal;font-size:.8em;animation:pisca 1s steps(2) infinite}
.beg.falando #bgMais{display:block}
.beg.falando .begbtns{display:none}
@keyframes pisca{50%{opacity:.25}}
.fopt kbd{font-size:.85em;margin-right:.3em;color:#ffe14f;border-color:#3a2a5a}
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(5,8,16,.78);padding:4%}
.card{text-align:center;max-width:34em}
.card .kicker{color:var(--muted);font-size:.9em;letter-spacing:.12em;text-transform:uppercase}
.card h2{font-family:'Pixelify Sans',monospace;font-weight:700;font-size:3.2em;line-height:.9;margin:.15em 0 .25em;color:var(--sodium);text-shadow:.08em .08em 0 var(--sodium-d)}
.card h2.lose{color:var(--danger);text-shadow:.08em .08em 0 #5a120c}
.card h2.win{color:var(--ok);text-shadow:.08em .08em 0 #1c4a1c}
.card p{margin:.2em auto .6em;font-size:1.05em;max-width:30em}
.card .stats{color:var(--sodium);font-size:1.05em}
.difrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4em;margin-top:.5em;font-size:.9em;color:var(--muted)}
.game .difrow button{font-size:.85em;padding:.2em .6em}
.volrow{display:flex;align-items:center;justify-content:center;gap:.5em;margin:.35em auto .1em;font-size:1em}
.volrow input{width:11em;max-width:45%;accent-color:var(--sodium);height:1.4em;cursor:pointer}
.volrow input:focus-visible{outline:3px solid var(--paper);outline-offset:2px}
.volrow output{min-width:3.2em;text-align:left;color:var(--sodium)}
.card img.sono{display:block;width:9.5em;max-width:60%;aspect-ratio:8/5;object-fit:cover;margin:0 auto .3em;border:.2em solid var(--paper);box-shadow:.3em .3em 0 rgba(0,0,0,.5);transform:rotate(-3deg)}
.card img.galera{display:block;width:7.5em;max-width:40%;aspect-ratio:1;object-fit:cover;margin:0 auto .3em;border:.2em solid var(--paper);box-shadow:.3em .3em 0 rgba(0,0,0,.5);transform:rotate(2deg);image-rendering:pixelated}
.btns{display:flex;gap:.6em;justify-content:center;flex-wrap:wrap;margin-top:.6em}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:.2em 1.2em;text-align:left;font-size:.85em;margin:.4em auto;max-width:28em}
.rules em{font-style:normal;color:var(--sodium)}
.skip{position:absolute;right:2%;top:3%;font-size:.75em!important}
.touch{position:absolute;inset:0;pointer-events:none}
/* analógico flutuante: encoste o dedo em qualquer lugar da metade esquerda */
#stick{position:absolute;left:0;bottom:0;width:42%;height:66%;pointer-events:auto;touch-action:none}
#stickBase{position:absolute;left:24%;top:70%;width:32%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.2);opacity:.45;transition:opacity .2s;pointer-events:none}
#stick.on #stickBase{opacity:1;transition:none}
#stickBase i{position:absolute;left:50%;top:50%;width:42%;height:42%;margin:-21% 0 0 -21%;border-radius:50%;background:rgba(255,179,71,.65)}
#btnA{position:absolute;right:3%;bottom:7%;width:11%;aspect-ratio:1;border-radius:50%;pointer-events:auto;font-size:1.4em!important;padding:0!important;opacity:.75}
#btnA.acao{background:#8be08b!important;box-shadow:0 .2em 0 #2f6a2e!important;opacity:.95;animation:acaoPulsa .7s ease-in-out infinite alternate}
@keyframes acaoPulsa{to{transform:scale(1.08)}}
#btnX svg{width:1.3em;height:1.3em;display:block}
#btnA svg,#btnB svg,#btnW svg{width:62%;height:62%;display:block;margin:auto}
#btnC{position:absolute;right:16.5%;bottom:6%;width:8%;aspect-ratio:1;border-radius:50%;pointer-events:auto;padding:0!important;opacity:.8;background:#ffb347!important;box-shadow:0 .2em 0 #8a5a1a!important}
#btnC svg{width:62%;height:62%;display:block;margin:auto}
#btnW{position:absolute;right:4.5%;bottom:31%;width:8%;aspect-ratio:1;border-radius:50%;pointer-events:auto;padding:0!important;opacity:.85;background:#d0202a!important;box-shadow:0 .2em 0 #6a0a10!important}
#btnB{position:absolute;right:16%;bottom:5%;width:10%;aspect-ratio:1;border-radius:50%;pointer-events:auto;padding:0!important;opacity:.75;background:#4fd8ff!important;box-shadow:0 .2em 0 #1f6a8a!important;color:#04202c!important}
#btnL,#btnR{position:absolute;bottom:6%;width:11%;aspect-ratio:1;border-radius:50%;pointer-events:auto;font-size:1.4em!important;padding:0!important;opacity:.75;background:rgba(243,236,216,.85)!important;box-shadow:0 .2em 0 rgba(0,0,0,.4)!important}
#btnL{left:3%}#btnR{left:16%}
#btnL::before,#btnR::before{content:'';position:absolute;left:50%;top:50%;width:0;height:0;border-top:.55em solid transparent;border-bottom:.55em solid transparent}
#btnL::before{border-right:.75em solid #241100;transform:translate(-62%,-50%)}
#btnR::before{border-left:.75em solid #241100;transform:translate(-38%,-50%)}
.touch[data-mode=altinha] #btnA,.touch[data-mode=futevolei] #btnA,.touch[data-mode=maraca] #btnA{width:10%;right:20%;bottom:5%;font-size:.9em!important}
.touch[data-mode=altinha] #btnB,.touch[data-mode=futevolei] #btnB,.touch[data-mode=maraca] #btnB{width:15%;right:3%;bottom:7%;font-size:1.2em!important}
/* camadas: o que precisa de toque fica por cima dos controles */
.touch{z-index:2}
.phone,.nap,.dialog,.festa,.beg{z-index:4}
.screen,.skip{z-index:6}
/* modo psicodélico (4+ cogumelos em seguida) */
.psy{position:absolute;inset:-25%;pointer-events:none;opacity:0;transition:opacity 1.2s;mix-blend-mode:overlay;background:conic-gradient(from 0deg,#ff4fd8,#ffe14f,#4fffd2,#4f8bff,#ff4fd8);animation:psyGira 6s linear infinite}
@keyframes psyGira{to{transform:rotate(360deg)}}
/* dragão mestre (5+ cogumelos em seguida) */
.dragao{position:absolute;left:0;top:14%;width:34cqw;z-index:5;pointer-events:none;transform:translateX(-110%)}
.dragao.voa{animation:dragVoa 12s linear forwards}
.dragao svg{display:block;width:100%;height:auto;animation:dragBob 1.1s ease-in-out infinite alternate;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.4))}
.dragao .asa{transform-box:fill-box;transform-origin:50% 100%;animation:dragAsa .4s steps(2) infinite}
.dragao .fala{background:var(--paper);color:#1a1422;border:2px solid #1a1422;box-shadow:2px 2px 0 rgba(0,0,0,.35);padding:.25em .5em;font-size:.72em;line-height:1.05;margin:0 0 .3em 18%;width:24em;max-width:80cqw}
.dragao .fala b{display:block;font-family:'Pixelify Sans',monospace;color:#2f7a3a;font-size:.95em}
@keyframes dragVoa{from{transform:translateX(-110%)}to{transform:translateX(310%)}}
@keyframes dragBob{from{transform:translateY(0)}to{transform:translateY(8%)}}
@keyframes dragAsa{50%{transform:scaleY(-.5)}}
@media (prefers-reduced-motion:reduce){.psy,.dragao svg,.dragao .asa{animation:none}}
.callhint{position:absolute;z-index:5;display:flex;align-items:center;gap:.35em;pointer-events:none;animation:empurra .5s ease-in-out infinite alternate}
.callhint .caixa{background:var(--paper);color:#1a1422;border:2px solid #1a1422;box-shadow:2px 2px 0 rgba(0,0,0,.35);padding:.2em .5em;text-align:center;line-height:1.05;max-width:11em}
.callhint b{display:block;font-family:'Pixelify Sans',monospace;font-size:.85em;color:#c0261c}
.callhint small{display:block;font-size:.6em}
.callhint .seta{width:0;height:0;border-top:.8em solid transparent;border-bottom:.8em solid transparent;border-left:1.3em solid #ff3b30;filter:drop-shadow(2px 2px 0 #1a1422)}
@keyframes empurra{from{transform:translateX(0)}to{transform:translateX(.5em)}}
@media (prefers-reduced-motion:reduce){.callhint{animation:none}}
/* celular: HUD compacto e telas que cabem na altura baixa */
body.mobile .hud{padding:.3em .45em}
body.mobile .hud-l{padding:.15em .35em .15em .15em;gap:.35em}
body.mobile #face{width:2.1em;height:2.6em}
body.mobile .nm{font-size:.75em}
body.mobile .bar{width:6.5em;height:.6em}
body.mobile .chips{min-height:0}
body.mobile .chip{font-size:.55em}
body.mobile .hud-r{padding:.15em .45em}
body.mobile #dayl{font-size:.8em}
body.mobile #clock{font-size:1.05em}
body.mobile #awake{display:none}
body.mobile .tasks{font-size:.6em;margin-top:.1em}
body.mobile .toast{bottom:.6em;max-width:50%;font-size:.8em;padding:.2em .6em}
body.mobile .banner{top:24%}
body.mobile .banner b{font-size:2.2em}
body.mobile .banner span{font-size:.9em}
body.mobile .screen{overflow-y:auto;align-items:safe center;padding:3% 6%}
body.mobile .card h2{font-size:2.3em}
body.mobile .card p{font-size:.95em;margin:.1em auto .35em}
body.mobile .card img.sono{width:6em}
body.mobile .card img.galera{width:5em}
body.mobile .rules{font-size:.75em;margin:.2em auto}
body.mobile .btns{margin-top:.35em;gap:.4em}
.fases{display:grid;grid-template-columns:repeat(auto-fit,minmax(9em,1fr));gap:.4em;max-width:30em;margin:.5em auto 0}
.game .fases button{font-size:.85em;padding:.3em .5em}
body.mobile .fases{grid-template-columns:repeat(4,1fr);max-width:none;gap:.3em}
body.mobile .game .fases button{font-size:.75em}
body.mobile .dialog{left:14%;right:14%;bottom:3%;min-height:3.4em;padding:.35em .7em .45em}
body.mobile .dialog p{font-size:1.05em}
.touch button.word{font-size:.68em!important;letter-spacing:0}
#btnP{position:absolute;left:50%;top:2.5%;transform:translateX(-50%);pointer-events:auto;font-size:.8em!important;padding:.15em .7em!important;opacity:.75}
#btnX{position:absolute;right:1.5%;top:13%;pointer-events:auto;font-size:.75em!important;padding:.15em .6em!important;opacity:.8;background:var(--danger)!important;color:#fff!important;box-shadow:0 .15em 0 #7a1d15!important}
#rotate{display:none}
body.mobile{padding:0;background:#000}
body.mobile header,body.mobile .below{display:none}
/* tela cheia no PC: botãozinho no canto (ou tecla F) e só o jogo na tela */
#btnFull{position:absolute;right:.5em;bottom:.5em;width:1.7em;height:1.7em;padding:0!important;display:grid;place-items:center;background:rgba(7,11,20,.6)!important;border:2px solid var(--line)!important;box-shadow:none!important;opacity:.55;z-index:7;cursor:pointer} /* acima das telas (menu, pausa, fim) */
#btnFull:hover{opacity:1}
#btnFull svg{width:72%;height:72%;display:block}
body.mobile #btnFull{display:none}
body.tela-cheia{padding:0;margin:0;background:#000;overflow:hidden}
body.tela-cheia .wrap{max-width:none;min-height:100dvh;justify-content:center;gap:0}
body.tela-cheia .wrap>:not(.game){display:none}
body.tela-cheia .game{width:min(100vw,calc(100dvh * 16 / 9));border:0;box-shadow:none;font-size:max(20px,min(1.786vw,3.175dvh))}
body.mobile .wrap{max-width:none;gap:0;min-height:100dvh;justify-content:center}
body.mobile .game{width:min(100vw,calc(100dvh * 16 / 9));border:0;box-shadow:none}
@media (orientation:portrait){body.mobile #rotate{display:flex;position:fixed;inset:0;z-index:50;background:var(--ink);color:var(--paper);flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;font-size:22px}
  body.mobile #rotate b{font-family:'Pixelify Sans',monospace;color:var(--sodium);font-size:34px;line-height:1}
  body.mobile #rotate i{font-style:normal;font-size:64px;line-height:1;display:inline-block;animation:turn 1.6s ease-in-out infinite}}
@keyframes turn{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
.below{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.box{background:var(--panel);border:2px solid var(--line);padding:14px 16px}
.box h3{font-family:'Pixelify Sans',monospace;font-weight:700;margin:0 0 8px;font-size:22px;letter-spacing:.02em}
.box h3.g{color:var(--ok)} .box h3.b{color:var(--danger)} .box h3.c{color:var(--sodium)}
.list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.list li{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center}
.list canvas{width:36px;height:36px;image-rendering:pixelated;background:#0c1426;border:1px solid var(--line)}
.list b{color:var(--paper);font-weight:400}
.list span{color:var(--muted);font-size:18px;display:block;line-height:1.05}
kbd{font-family:'VT323',monospace;background:#0c1426;border:1px solid var(--line);border-bottom-width:3px;padding:0 6px;color:var(--paper)}
.keys{display:flex;flex-direction:column;gap:8px}
.note{color:var(--muted);font-size:18px;margin-top:10px}
.faces{grid-column:1/-1}
.facegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.facegrid figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.facegrid canvas{width:96px;height:120px}
.facegrid figcaption{font-size:18px;line-height:1}
.facegrid figcaption span{display:block;color:var(--muted);font-size:16px}
@media (max-width:820px){.below{grid-template-columns:1fr}.rules{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.phone{animation:none}.dialog .more{animation:none}}