/* fontes locais (OFL): funcionam sem internet */
@font-face{font-family:"Press Start 2P";src:url("../fonts/PressStart2P-Regular.ttf") format("truetype");font-display:block}
@font-face{font-family:"VT323";src:url("../fonts/VT323-Regular.ttf") format("truetype");font-display:block}
:root{
  --night:#0d1030;--ink:#fff8e7;--gold:#ffd21f;--green:#17a34a;--blue:#2449c9;--red:#e8412c;--box:#1a2780;--shade:#070920;
  --pixel:"Press Start 2P","Courier New",monospace;--read:"VT323","Courier New",monospace;
  --t-edge-x:max(28px,calc(env(safe-area-inset-left,0px) + 16px));
  --t-edge-r:max(28px,calc(env(safe-area-inset-right,0px) + 16px));
  --t-edge-b:max(22px,calc(env(safe-area-inset-bottom,0px) + 14px));
  --t-dir:clamp(54px,15vmin,72px);--t-a:clamp(62px,18vmin,84px);--t-b:clamp(56px,15.5vmin,74px);
  --t-gap:clamp(14px,4vmin,22px);--t-pause:clamp(44px,11vmin,52px);
  color-scheme:dark
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--night);color:var(--ink);overscroll-behavior:none;touch-action:none;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;
  padding-inline:max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.stage{position:relative;width:min(100%,calc((100dvh - 20px) * 1.75));aspect-ratio:336/192;background:#000;
  container-type:inline-size;--u:1cqw;touch-action:none;max-width:100%}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.px{font-family:var(--pixel);text-transform:uppercase;letter-spacing:.04em}
.ov{position:absolute;inset:0;z-index:4}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2.2*var(--u));text-align:center;padding:calc(3*var(--u));z-index:6}

@media (hover:hover) and (pointer:fine) and (min-height:420px){
  body{padding-block:10px}
  .stage{width:min(100%,calc(175dvh - 147px));box-shadow:0 0 0 4px var(--shade),0 0 0 7px var(--gold),0 24px 60px #0009}
  html:not(.touch-on) .legend{display:block}
}
.legend{display:none;font-size:clamp(9px,1.1vw,13px);font-size:round(clamp(9px,1.1vw,13px),1px);color:#fff;text-align:center;margin-top:16px;line-height:1.8}
.legend b{color:var(--gold);font-weight:400}

/* #vp: régua fixa do tamanho real da área visível (não muda com zoom do Safari) */
#vp{position:fixed;inset:0;pointer-events:none;visibility:hidden;z-index:-1}
html.full,html.full body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden}
html.full body{padding:0;gap:0}
html.full .stage{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);aspect-ratio:auto;max-width:none;max-height:none;box-shadow:none}
html.full #hud{padding-left:max(calc(2*var(--u)),env(safe-area-inset-left,0px))}
html.full .legend{display:none!important}

/* HUD */
#hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:calc(2*var(--u));
  padding:calc(1.4*var(--u)) calc(2*var(--u));font-size:clamp(8px,calc(1.55*var(--u)),14px);font-size:round(clamp(8px,calc(1.55*var(--u)),14px),1px);color:var(--ink);
  text-shadow:calc(.25*var(--u)) calc(.25*var(--u)) 0 #000;pointer-events:none;z-index:5}
#hud .meia{display:inline-block;position:relative;width:1.3em;height:1.5em;background:#f4f2ec;clip-path:polygon(8% 0,58% 0,58% 56%,100% 68%,100% 100%,16% 100%,8% 86%);overflow:hidden;vertical-align:middle;box-shadow:inset 0 .18em 0 #d8322c}
#hud .meia i{position:absolute;left:0;right:0;bottom:0;background:#ffd21f}
#hud.claro{background:linear-gradient(#000000c8,#000000a0);text-shadow:calc(.25*var(--u)) calc(.25*var(--u)) 0 #000,0 0 calc(.4*var(--u)) #000}
#hud div{display:flex;align-items:center;gap:calc(1*var(--u));white-space:nowrap}
html.touch-on #hud{padding-right:calc(var(--t-pause) + var(--t-edge-r) + 8px)}
.coin{display:inline-block;width:calc(1.3*var(--u));height:calc(1.7*var(--u));background:var(--gold);border-radius:50%;box-shadow:inset calc(-.3*var(--u)) 0 0 #c89400}
.meter{display:inline-block;width:calc(10*var(--u));height:calc(1.4*var(--u));border:calc(.25*var(--u)) solid var(--ink);background:#000}
.meter i{display:block;height:100%;background:#f6d144}
.bbar{color:var(--red);letter-spacing:0}

/* logo e abertura */
.logo{display:flex;flex-direction:column;align-items:center;gap:calc(1.2*var(--u));filter:drop-shadow(calc(.6*var(--u)) calc(.6*var(--u)) 0 #000)}
.logo .f{font-size:clamp(20px,calc(9*var(--u)),90px);font-size:round(clamp(20px,calc(9*var(--u)),90px),1px);line-height:1;letter-spacing:-.02em}
.logo .f span,.rlogo .f span{-webkit-text-stroke:calc(.45*var(--u)) #000;paint-order:stroke fill}
.logo .f span:nth-child(4n+1),.rlogo .f span:nth-child(4n+1){color:#e8412c}
.logo .f span:nth-child(4n+2),.rlogo .f span:nth-child(4n+2){color:#ffd21f}
.logo .f span:nth-child(4n+3),.rlogo .f span:nth-child(4n+3){color:#17a34a}
.logo .f span:nth-child(4n+4),.rlogo .f span:nth-child(4n+4){color:#2449c9}
.logo .f span.sp{width:.5em;display:inline-block}
.logo .s{font-size:clamp(11px,calc(4.2*var(--u)),40px);font-size:round(clamp(11px,calc(4.2*var(--u)),40px),1px);color:var(--ink);-webkit-text-stroke:calc(.35*var(--u)) #000;paint-order:stroke fill}
.logo .w{font-size:clamp(12px,calc(4.8*var(--u)),46px);font-size:round(clamp(12px,calc(4.8*var(--u)),46px),1px);color:var(--green);-webkit-text-stroke:calc(.35*var(--u)) #000;paint-order:stroke fill}
.press{font-size:clamp(9px,calc(2.3*var(--u)),22px);font-size:round(clamp(9px,calc(2.3*var(--u)),22px),1px);color:#fff;background:#1a1020d9;border:calc(.35*var(--u)) solid #fff;padding:calc(1.2*var(--u)) calc(2.2*var(--u));
  text-shadow:calc(.3*var(--u)) calc(.3*var(--u)) 0 #000;animation:blink 1.1s steps(2,end) infinite;margin-top:calc(1*var(--u))}
.disc{flex-direction:column;gap:calc(.6*var(--u))}
.seal2{font-family:var(--pixel);text-transform:uppercase;font-size:clamp(8px,calc(1*var(--u)),9px);font-size:round(clamp(8px,calc(1*var(--u)),9px),1px);color:#fff;opacity:.85}
#tl{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
#tl span{position:absolute;font-family:var(--pixel);white-space:pre;line-height:1;letter-spacing:0;-webkit-font-smoothing:none;font-smooth:never}
@keyframes blink{50%{opacity:.2}}
.disc{position:absolute;left:0;right:0;bottom:0;height:16%;display:flex;align-items:center;justify-content:center;text-align:center;padding-inline:calc(3*var(--u));
  font-family:var(--read);font-size:clamp(12px,calc(2.3*var(--u)),22px);font-size:round(clamp(12px,calc(2.3*var(--u)),22px),1px);text-transform:none;letter-spacing:0;color:var(--ink);
  text-shadow:calc(.2*var(--u)) calc(.2*var(--u)) 0 #000;line-height:1;pointer-events:none}
.seal{background:#fff;color:#1a1020;border:calc(.3*var(--u)) solid #8a8f99;padding:calc(.7*var(--u)) calc(1.2*var(--u));
  font-size:clamp(8px,calc(1.1*var(--u)),10px);font-size:round(clamp(8px,calc(1.1*var(--u)),10px),1px);position:absolute;top:calc(2*var(--u));right:calc(2*var(--u))}
html.touch-on #title .seal{right:auto;left:calc(2*var(--u))}

/* barra do mapa */
#mapbar{position:absolute;left:calc(3*var(--u));right:calc(3*var(--u));bottom:calc(2.4*var(--u));z-index:5;display:flex;justify-content:space-between;
  align-items:center;gap:calc(2*var(--u));padding:calc(1.4*var(--u)) calc(2*var(--u));border:calc(.45*var(--u)) solid var(--ink);background:#070920e0}
#mapbar .t1{font-size:clamp(8px,calc(1.3*var(--u)),12px);font-size:round(clamp(8px,calc(1.3*var(--u)),12px),1px);color:var(--gold)}
#mapbar .t2{font-size:clamp(8px,calc(2*var(--u)),18px);font-size:round(clamp(8px,calc(2*var(--u)),18px),1px);margin-top:calc(.8*var(--u))}
#mapbar .t3{font-size:clamp(8px,calc(1.2*var(--u)),11px);font-size:round(clamp(8px,calc(1.2*var(--u)),11px),1px);color:#b8bde8;text-align:right;line-height:1.7}
html.touch-on #mapbar{top:calc(1.2*var(--u));bottom:auto;right:calc(var(--t-pause) + var(--t-edge-r) + 8px)}

/* caixas de diálogo */
.dlg{position:absolute;top:12%;left:calc(6*var(--u));right:calc(6*var(--u));max-height:80%;overflow:auto;z-index:10;
  display:flex;flex-direction:column;gap:calc(1.4*var(--u));padding:calc(2.2*var(--u)) calc(3*var(--u));
  background:linear-gradient(#2638a8,var(--box));border:calc(.6*var(--u)) solid var(--ink);outline:calc(.5*var(--u)) solid #000;
  touch-action:pan-y;overscroll-behavior:contain}
html.full .dlg{left:calc(var(--t-edge-r) + var(--t-a) * .55);right:calc(var(--t-edge-r) + max(var(--t-a) * .55,var(--t-pause)) + 10px);max-height:84%;top:8%}
.tag{align-self:flex-start;background:var(--gold);color:#1a1020;font-size:clamp(8px,calc(1.3*var(--u)),12px);font-size:round(clamp(8px,calc(1.3*var(--u)),12px),1px);padding:calc(.8*var(--u)) calc(1.2*var(--u))}
.tag.fact{background:var(--green);color:#fff}.tag.end{background:var(--red);color:#fff}
.dlg h2{font-size:clamp(8px,calc(2.3*var(--u)),20px);font-size:round(clamp(8px,calc(2.3*var(--u)),20px),1px);color:var(--gold);line-height:1.35;text-wrap:balance}
.dlg p{font-family:var(--read);font-size:clamp(15px,calc(3.2*var(--u)),30px);font-size:round(clamp(15px,calc(3.2*var(--u)),30px),1px);line-height:1.08;text-transform:none;letter-spacing:0;max-width:70ch}
.dlg p.cmd{color:#ffe98a}
.dlg .src{font-family:var(--read);font-size:clamp(12px,calc(2.2*var(--u)),20px);font-size:round(clamp(12px,calc(2.2*var(--u)),20px),1px);color:#b8bde8;line-height:1.15;text-transform:none;letter-spacing:0}
.dlg .src a{color:inherit;text-decoration:underline}
.dlg .score{font-family:var(--read);font-size:clamp(15px,calc(3*var(--u)),28px);font-size:round(clamp(15px,calc(3*var(--u)),28px),1px);color:var(--gold);text-transform:none;letter-spacing:0;border-top:calc(.2*var(--u)) solid #fff3;border-bottom:calc(.2*var(--u)) solid #fff3;padding:calc(.4*var(--u)) 0}
.dlg .stats{display:grid;grid-template-columns:1fr auto auto;gap:calc(.3*var(--u)) calc(2.5*var(--u));font-family:var(--read);font-size:clamp(13px,calc(2.6*var(--u)),26px);font-size:round(clamp(13px,calc(2.6*var(--u)),26px),1px);text-transform:none;letter-spacing:0}
.dlg .stats>*{border-bottom:calc(.2*var(--u)) solid #fff3;animation:fadeIn .5s both}
.dlg .stats .hd{color:#b8bde8;font-size:.85em}
.dlg .stats .v{color:var(--gold);text-align:right}
.dlg .stats .o{color:#c8cde8;text-align:right}
@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}}
.dlg .row{display:flex;gap:calc(2*var(--u));justify-content:flex-end}
.btn{font-family:var(--pixel);text-transform:uppercase;font-size:clamp(8px,calc(1.5*var(--u)),13px);font-size:round(clamp(8px,calc(1.5*var(--u)),13px),1px);background:var(--gold);color:#1a1020;border:calc(.3*var(--u)) solid #000;
  padding:calc(1*var(--u)) calc(1.6*var(--u));cursor:pointer}
.btn.alt{background:#fff8e7}
.next{position:sticky;bottom:calc(-2.2*var(--u));margin:0 calc(-3*var(--u)) calc(-2.2*var(--u));padding:calc(1.2*var(--u)) calc(3*var(--u)) calc(1.6*var(--u));
  background:var(--box);text-align:right;font-size:clamp(8px,calc(1.4*var(--u)),13px);font-size:round(clamp(8px,calc(1.4*var(--u)),13px),1px);animation:blink 1s steps(2,end) infinite;white-space:nowrap}
.next.more{color:var(--gold);animation:none}

/* cartão de tropeço */
.card{background:#000000d1;display:flex;align-items:center;justify-content:center;z-index:10;overflow:hidden}
.roll{display:flex;flex-direction:column;align-items:center;gap:calc(1.6*var(--u));text-align:center;padding:calc(2*var(--u)) calc(3*var(--u));animation:roll 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes roll{0%{transform:translateY(110%)}to{transform:none}}
.go-tag{background:var(--red);color:#fff;font-size:clamp(8px,calc(1.3*var(--u)),12px);font-size:round(clamp(8px,calc(1.3*var(--u)),12px),1px);padding:calc(.8*var(--u)) calc(1.2*var(--u))}
.go-head{font-size:clamp(12px,calc(4.2*var(--u)),40px);font-size:round(clamp(12px,calc(4.2*var(--u)),40px),1px);color:var(--gold);text-wrap:balance;text-shadow:calc(.5*var(--u)) calc(.5*var(--u)) 0 #5a0d06}
.go-sub{font-family:var(--read);font-size:clamp(15px,calc(3.1*var(--u)),30px);font-size:round(clamp(15px,calc(3.1*var(--u)),30px),1px);text-transform:none;letter-spacing:0;max-width:52ch;line-height:1.08}
.go-lives{font-size:clamp(8px,calc(1.9*var(--u)),18px);font-size:round(clamp(8px,calc(1.9*var(--u)),18px),1px)}
.go-hint{font-size:clamp(8px,calc(1.25*var(--u)),12px);font-size:round(clamp(8px,calc(1.25*var(--u)),12px),1px);color:#b8bde8;animation:blink 1.1s steps(2,end) infinite}
.go-big{font-size:clamp(14px,calc(4.6*var(--u)),44px);font-size:round(clamp(14px,calc(4.6*var(--u)),44px),1px);color:var(--gold);text-shadow:calc(.5*var(--u)) calc(.5*var(--u)) 0 #000;text-wrap:balance}
.item-ic{width:calc(24*var(--u));height:calc(15*var(--u));image-rendering:pixelated}
.vice-ic{width:calc(8*var(--u));height:calc(15*var(--u));image-rendering:pixelated}

/* pausa */
#pause{background:#070920c0;z-index:12}
.ptitle{font-size:clamp(12px,calc(4*var(--u)),36px);font-size:round(clamp(12px,calc(4*var(--u)),36px),1px);color:var(--gold)}
.pline{font-size:clamp(8px,calc(1.6*var(--u)),14px);font-size:round(clamp(8px,calc(1.6*var(--u)),14px),1px)}
.pbtns{display:flex;gap:calc(1.6*var(--u));flex-wrap:wrap;justify-content:center}

#banner{position:absolute;left:0;right:0;top:40%;z-index:8;text-align:center;background:#1a1020e8;border-top:calc(.4*var(--u)) solid var(--gold);border-bottom:calc(.4*var(--u)) solid var(--gold);
  color:var(--gold);font-size:clamp(10px,calc(3.2*var(--u)),30px);font-size:round(clamp(10px,calc(3.2*var(--u)),30px),1px);padding:calc(1.4*var(--u));animation:slide .4s both}
@keyframes slide{0%{transform:translateX(-100%)}}
#cutcap{position:absolute;left:0;right:0;top:0;z-index:7;text-align:center;background:#000c;color:var(--ink);font-size:clamp(8px,calc(1.7*var(--u)),15px);font-size:round(clamp(8px,calc(1.7*var(--u)),15px),1px);padding:calc(1.6*var(--u)) calc(14*var(--u));line-height:1.6;text-wrap:balance}
#cutcap.long{font-family:var(--read);text-transform:none;letter-spacing:0;font-size:clamp(14px,calc(2.9*var(--u)),28px);font-size:round(clamp(14px,calc(2.9*var(--u)),28px),1px);line-height:1.05}
.skip{position:absolute;right:calc(2*var(--u));top:calc(2*var(--u));z-index:9;font-size:clamp(8px,calc(1.3*var(--u)),11px);font-size:round(clamp(8px,calc(1.3*var(--u)),11px),1px);color:var(--ink);
  border:calc(.2*var(--u)) solid #fff6;padding:calc(.8*var(--u)) calc(1.2*var(--u));background:#0000008c;cursor:pointer}
html.touch-on .skip{right:calc(var(--t-pause) + var(--t-edge-r) + 8px)}
#toast{position:absolute;top:14%;left:50%;transform:translateX(-50%);z-index:15;background:var(--red);color:#fff;border:calc(.3*var(--u)) solid #fff;
  padding:calc(1*var(--u)) calc(1.6*var(--u));font-size:clamp(8px,calc(1.4*var(--u)),13px);font-size:round(clamp(8px,calc(1.4*var(--u)),13px),1px);white-space:nowrap}
#big{position:absolute;inset:0;display:grid;place-items:center;z-index:9;font-size:clamp(14px,calc(5.4*var(--u)),52px);font-size:round(clamp(14px,calc(5.4*var(--u)),52px),1px);color:var(--gold);
  -webkit-text-stroke:calc(.4*var(--u)) #000;paint-order:stroke fill;text-shadow:calc(.6*var(--u)) calc(.6*var(--u)) 0 #000;pointer-events:none;text-align:center;text-wrap:balance;padding:0 6%}
#debug{position:absolute;left:4px;bottom:4px;z-index:30;font-size:8px;background:#000a;padding:4px;text-transform:none;display:flex;flex-direction:column;gap:3px}
#debug select,#debug button{font:inherit;font-size:8px;color:#000;background:#fff}

/* urna */
#urna{z-index:12;display:flex;align-items:center;justify-content:center;background:linear-gradient(transparent 78%,#d9d2c2 78%,#cfc7b5),repeating-linear-gradient(90deg,#f3ead2 0 calc(5*var(--u)),#e6dbbd 0 calc(6.4*var(--u)),#f8f0dc 0 calc(8*var(--u)))}
.urna{position:relative;display:grid;grid-template-columns:1fr calc(30*var(--u));gap:calc(2.4*var(--u));width:min(calc(88*var(--u)),100%);height:calc(48*var(--u));
  padding:calc(2.4*var(--u)) calc(2.6*var(--u)) calc(4.6*var(--u));border:calc(.4*var(--u)) solid #b9b7b0;border-radius:calc(1.2*var(--u));
  background:linear-gradient(#f4f3ef,#e2e1dc);box-shadow:0 calc(1.2*var(--u)) 0 #a9a69e,0 calc(2*var(--u)) calc(2.4*var(--u)) #0004}
html.full .urna{width:min(calc(88*var(--u)),calc(100% - 2*(var(--t-edge-r) + var(--t-a))))}
.u-bezel{display:flex;min-height:0;padding:calc(1.1*var(--u));background:#2b2b2e;border-radius:calc(.6*var(--u));position:relative}
.u-scr{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:calc(1*var(--u));background:linear-gradient(#1f4a2a,#163a20);color:#d8ffd8;
  padding:calc(1.4*var(--u)) calc(2*var(--u));text-transform:none;letter-spacing:0;position:relative}
.u-scr h2{margin:0;font-family:var(--pixel);text-transform:uppercase;letter-spacing:.02em;color:#ffd21f;line-height:1.35;text-wrap:balance;font-size:clamp(8px,calc(1.7*var(--u)),16px);font-size:round(clamp(8px,calc(1.7*var(--u)),16px),1px)}
.u-scr p{font-family:var(--read);font-size:clamp(14px,calc(2.9*var(--u)),28px);font-size:round(clamp(14px,calc(2.9*var(--u)),28px),1px);line-height:1.05}
.u-scr .u-top{font-family:var(--pixel);font-size:clamp(8px,calc(1*var(--u)),9px);font-size:round(clamp(8px,calc(1*var(--u)),9px),1px);text-transform:uppercase;color:#9fe0a8;align-self:center}
.u-scr .u-hint{margin-top:auto;font-family:var(--pixel);text-transform:uppercase;font-size:clamp(8px,calc(1.2*var(--u)),11px);font-size:round(clamp(8px,calc(1.2*var(--u)),11px),1px);color:#ffd21f;animation:blink 1s steps(2,end) infinite;text-align:right}
.u-side{display:flex;flex-direction:column;gap:calc(1.4*var(--u));min-height:0}
.u-label{align-self:flex-end;font-size:clamp(8px,calc(1.25*var(--u)),12px);font-size:round(clamp(8px,calc(1.25*var(--u)),12px),1px);color:#2b2b2e}
.u-pad{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:calc(1.2*var(--u));padding:calc(1.6*var(--u));background:#1f2023;border-radius:calc(.6*var(--u))}
.u-keys{display:grid;grid-template-columns:repeat(3,calc(5.4*var(--u)));gap:calc(1*var(--u)) calc(2*var(--u));justify-content:center}
.u-keys span,.u-acts span{display:grid;place-items:center;border-radius:calc(.4*var(--u));box-shadow:inset 0 calc(-.4*var(--u)) 0 #0005}
.u-keys span{height:calc(3.3*var(--u));color:#fff;background:#0d0d0f;border:calc(.2*var(--u)) solid #3a3a40;font-size:clamp(8px,calc(1.4*var(--u)),13px);font-size:round(clamp(8px,calc(1.4*var(--u)),13px),1px)}
.u-keys .z{grid-column:2}
.u-acts{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:calc(1*var(--u));align-items:end}
.u-acts span{height:calc(3.6*var(--u));font-size:clamp(8px,calc(.85*var(--u)),8px);font-size:round(clamp(8px,calc(.85*var(--u)),8px),1px);color:#1b1d2b}
.u-acts .br{background:#f4f4f2}.u-acts .co{background:#f07a2a}
.u-acts .cf{height:calc(4.6*var(--u));background:#2fae4f;color:#0b2a14;cursor:pointer}
.u-acts .cf.blink{animation:cfb .7s steps(2,end) infinite}
@keyframes cfb{50%{background:#7cf09a}}
.u-vents{position:absolute;left:calc(3*var(--u));right:calc(3*var(--u));bottom:calc(1.4*var(--u));height:calc(1.4*var(--u));
  background:repeating-linear-gradient(90deg,transparent 0 calc(7*var(--u)),#6d6b66 0 calc(7.4*var(--u)))}
.crawl{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;align-items:center;gap:calc(3*var(--u));text-align:center;padding:0 calc(2*var(--u))}
.crawl p{font-family:var(--read);font-size:clamp(14px,calc(2.6*var(--u)),26px);font-size:round(clamp(14px,calc(2.6*var(--u)),26px),1px);line-height:1.05;color:#d8ffd8}
.crawl .cr-big{font-family:var(--pixel);font-size:clamp(8px,calc(1.7*var(--u)),16px);font-size:round(clamp(8px,calc(1.7*var(--u)),16px),1px);color:#ffd21f;text-transform:uppercase}
.crawl .sm{font-size:clamp(12px,calc(2.1*var(--u)),20px);font-size:round(clamp(12px,calc(2.1*var(--u)),20px),1px);color:#b8f0c0}

/* controles de toque */
.touch{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;justify-content:space-between;align-items:flex-end;pointer-events:none;
  padding:0 var(--t-edge-r) var(--t-edge-b) var(--t-edge-x)}
html.touch-on .touch{display:flex}
.dpad{position:relative;display:flex;gap:var(--t-gap);pointer-events:auto;touch-action:none;margin:-10px;padding:10px}
.dpad span,.tbtn,.tpause{display:grid;place-items:center;box-sizing:border-box;color:#ffffffc7;font-family:var(--pixel);text-shadow:0 1px 2px #000b;
  background:#00000024;border:2px solid #ffffff8c;touch-action:none;cursor:pointer;transition:background 60ms,transform 60ms,border-color 60ms;
  box-shadow:0 0 0 1px #00000038,inset 0 0 0 1px #00000038}
.dpad span{width:var(--t-dir);height:var(--t-dir);border-radius:24%;font-size:calc(var(--t-dir)*.3)}
.btns{display:flex;align-items:flex-end;gap:var(--t-gap);pointer-events:auto}
.tbtn{width:var(--t-b);height:var(--t-b);border-radius:50%;font-size:calc(var(--t-b)*.34)}
.tbtn.a{width:var(--t-a);height:var(--t-a);font-size:calc(var(--t-a)*.34);margin-bottom:calc(var(--t-b)*.55)}
.tpause{position:fixed;z-index:21;top:max(14px,calc(env(safe-area-inset-top,0px) + 8px));right:var(--t-edge-r);width:var(--t-pause);height:var(--t-pause);
  border-radius:50%;font-size:calc(var(--t-pause)*.3);display:none}
html.touch-on .tpause{display:grid}
.dpad span.on,.tbtn.on,.tpause.on{color:#fff;background:#ffffff4d;border-color:#fff;transform:scale(.92)}
html.txt-open .dpad,html.txt-open .tbtn.b{visibility:hidden}

/* gire o celular */
#rotate{position:fixed;inset:0;z-index:60;background:var(--night);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px 16px;text-align:center}
#rotate .rlogo{display:flex;flex-direction:column;align-items:center;gap:6px;filter:drop-shadow(3px 3px 0 #000)}#rotate .rlogo .f{font-size:38px;line-height:1}#rotate .rlogo .s{font-size:14px;color:#fff8e7}#rotate .rlogo .w{font-size:18px;color:#17a34a;-webkit-text-stroke:1.5px #000;paint-order:stroke fill}
#rotate .rlogo .f span{-webkit-text-stroke:2px #000}
#rotate .phone{position:relative;width:54px;height:92px;border:4px solid var(--ink);border-radius:12px;animation:turn 2.6s ease-in-out infinite}
#rotate .phone:before{content:"";position:absolute;inset:8px 5px 16px;background:linear-gradient(#ff9a6b 60%,#9ccc3c 60%)}
#rotate .phone:after{content:"";position:absolute;left:50%;bottom:6px;width:14px;height:4px;margin-left:-7px;background:var(--ink);border-radius:2px}
@keyframes turn{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}to{transform:rotate(0)}}
#rotate h2{font-family:var(--pixel);color:var(--gold);text-transform:uppercase;font-size:13px;line-height:1.6}
#rotate p{font-family:var(--read);font-size:22px;max-width:26ch;line-height:1.1}
#rotate small{font-family:var(--read);font-size:17px;color:#b8bde8;max-width:30ch;line-height:1.05}
#rotate .seal{position:static;font-size:8px;padding:5px 8px;border-width:2px}

@media (prefers-reduced-motion:reduce){.press,.next,.go-hint,.roll,#rotate .phone,#banner{animation:none}}

/* textos nítidos */
.px,#tl span,.dlg,.go-sub,.disc{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.u-acts span{letter-spacing:0}
#banner .bname{font-size:inherit}
#banner .btip{font-family:var(--read);text-transform:none;letter-spacing:0;color:#fff8e7;font-size:clamp(15px,calc(3*var(--u)),28px);font-size:round(clamp(15px,calc(3*var(--u)),28px),1px);line-height:1.1;margin:calc(1*var(--u)) auto 0;max-width:46ch;text-wrap:balance}
#banner .bgo{font-size:clamp(8px,calc(1.3*var(--u)),12px);font-size:round(clamp(8px,calc(1.3*var(--u)),12px),1px);color:#b8bde8;margin-top:calc(1*var(--u));animation:blink 1s steps(2,end) infinite}
#banner{top:30%}

#titleSeal, #rSeal, .seal, .seal2, .go-hint { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* ===== escolha do cartucho (tela inicial com os dois jogos) ===== */
html.w0 .stage,html.w0 .legend,html.w0 .touch,html.w0 .tpause{display:none!important}
.carts{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,3vh,28px);
  text-align:center;background:radial-gradient(ellipse at 50% 40%,#1c2050 0%,#070920 70%);padding:16px}
.carts h1{color:var(--gold);text-shadow:2px 2px 0 #000;font-size:clamp(10px,2.6vw,22px);font-weight:400}
.cart-row{display:flex;align-items:flex-end;gap:clamp(14px,4vw,48px)}
.cart{position:relative;width:clamp(140px,27vw,270px);background:none;border:0;padding:0;cursor:pointer;font:inherit;text-transform:inherit;color:inherit;
  filter:grayscale(1);opacity:.75;transition:transform .15s,filter .15s,opacity .15s}
.cart.on,.cart:focus-visible{opacity:1;outline:none;transform:translateY(-8px);
  filter:drop-shadow(3px 0 0 var(--gold)) drop-shadow(-3px 0 0 var(--gold)) drop-shadow(0 3px 0 var(--gold)) drop-shadow(0 -3px 0 var(--gold)) drop-shadow(0 8px 0 #000)}
.cart .shell{display:block;padding:9% 8% 17%;background:linear-gradient(#9a9aa6,#6a6a78);border-radius:6% 6% 3% 3%;box-shadow:inset 0 -10px 0 #4a4a56;
  clip-path:polygon(0 0,100% 0,100% 88%,92% 88%,92% 100%,8% 100%,8% 88%,0 88%)}
.cart .lbl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,1.1vw,10px);min-height:clamp(130px,22vw,230px);padding:10% 6%;border-radius:4px;box-sizing:border-box}
.cart.c1 .lbl{background:linear-gradient(#ff9a6b,#ffd9a0)}
.cart.c2 .lbl{background:#0b0f2e;justify-content:space-between}
.cart.c2 .cw{color:#fff8e7}
.cart.c2 .top{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.6vw,6px)}
.cart.c2 .flag2{display:block;width:72%;height:auto;aspect-ratio:10/7;box-shadow:0 0 0 2px #000}
.cart .cs,.cart .cw{color:#fff8e7;-webkit-text-stroke:1px #000;paint-order:stroke fill;font-size:clamp(7px,1.3vw,13px)}
.cart .cw{font-size:clamp(8px,1.5vw,15px);color:var(--green)}

.cart .cf{font-size:clamp(14px,2.8vw,28px);white-space:nowrap;letter-spacing:-.02em}
.cart .cf i{font-style:normal;-webkit-text-stroke:1.5px #000;paint-order:stroke fill}
.cart .cf i:nth-child(1){color:#e8412c}.cart .cf i:nth-child(2){color:#ffd21f}.cart .cf i:nth-child(3){color:#17a34a}.cart .cf i:nth-child(4){color:#2449c9}
.cart .ct{font-family:var(--read);text-transform:none;letter-spacing:0;color:#fff;text-shadow:1px 1px 0 #000;font-size:clamp(13px,1.7vw,18px);line-height:1.1}

.cart .seal{position:absolute;top:4%;right:-5%;left:auto;z-index:1;background:#2ecc55;color:#000;border:0;padding:3px 5px;font-size:clamp(6px,1vw,9px);transform:rotate(8deg)}
.cart .seal.new{background:var(--gold)}
.carts .hint{color:var(--ink);font-size:clamp(7px,1.3vw,11px);animation:blink 1.1s steps(2,end) infinite}
.carts .disc2{font-family:var(--read);text-transform:none;letter-spacing:0;color:#b8bde8;font-size:clamp(14px,1.8vw,18px)}
.swap{position:absolute;top:calc(2*var(--u));left:calc(2*var(--u));z-index:8;font-size:clamp(8px,calc(1.3*var(--u)),11px);font-size:round(clamp(8px,calc(1.3*var(--u)),11px),1px);
  color:var(--ink);background:#00000073;padding:calc(.8*var(--u)) calc(1.2*var(--u));text-decoration:none}
.swap:hover{color:var(--gold)}
html.touch-on .swap{left:auto;right:calc(var(--t-pause) + var(--t-edge-r) + 8px)}
@media (orientation:portrait){.cart-row{gap:14px}.cart{width:min(42vw,200px)}}

/* ===== cartucho 2: relógio e contadores no HUD ===== */
#hud .clk{color:var(--gold);padding:0 calc(.6*var(--u));border:calc(.2*var(--u)) solid currentColor;font-variant-numeric:tabular-nums}
#hud .clk.tarde{color:#ff6a4a}
#hud .fila{color:#9fe8b0}