*{box-sizing:border-box}
/* fontes servidas junto com o jogo (licença OFL em fonts/), sem chamar o Google */
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/press-start-2p-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/press-start-2p-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/vt323-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/vt323-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
body{margin:0}
/* Paleta: cinza quase preto com títulos vermelhos. Layout: estádio à noite. Placa de LED com o campo no centro, controles de toque logo abaixo, regras e arsenal do vilão no rodapé. */
:root{
  --night:#111113; --panel:#1b1b1e; --line:#2f2f34; --red:#e3263a; --red-deep:#9e1424; --red-soft:#ff6b78; --red-text:#ff4d5c; --edge:#6e6e78; --flood:#ffd23f; --grass:#46a540; --alert:#ff5a4d; --ink:#f2f2f3; --muted:#a1a1aa;
  --f-display:"Press Start 2P", ui-monospace, "Courier New", monospace;
  --f-body:"VT323", ui-monospace, "Courier New", monospace;
  color-scheme:dark;
}
html,body{background:var(--night);color:var(--ink)}
body{font-family:var(--f-body);font-size:20px;line-height:1.25;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 28px}
.wrap{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{font-family:var(--f-display);font-size:12px;font-weight:400;letter-spacing:.08em;color:var(--red-text);margin:0}
.brand small{display:block;margin-top:6px;font-size:9px;color:var(--muted);letter-spacing:.12em}
.tools{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.chip{font-family:var(--f-display);font-size:9px;letter-spacing:.06em;white-space:nowrap;background:var(--panel);color:var(--ink);border:2px solid var(--line);padding:8px 10px;cursor:pointer}
.chip:hover{border-color:var(--red)}
.chip-red{background:var(--red);border-color:var(--red);color:#ffffff;box-shadow:0 3px 0 var(--red-deep)}
.chip-red:hover{background:#c81e30;border-color:#c81e30}
#btn-rank .short{display:none}
@media (max-width:900px){#btn-rank .long{display:none}#btn-rank .short{display:inline}}
.tpause{font-family:var(--f-display);font-size:9px;letter-spacing:.04em;height:40px;padding:0 12px;border-radius:20px;border:3px solid var(--line);background:var(--panel);color:var(--ink);flex:none;align-self:flex-start;touch-action:manipulation}
#btn-acc{max-width:11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.tools{gap:5px}.chip{padding:7px 5px;letter-spacing:.02em}}
button:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.stage{position:relative;border:4px solid var(--line);background:#000;box-shadow:0 0 0 4px #080809,0 0 60px rgba(227,38,58,.12)}
canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;image-rendering:pixelated;image-rendering:crisp-edges}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(17,17,19,.86);text-align:center;padding:12px;overflow:auto}
.overlay h2{font-family:var(--f-display);font-size:clamp(14px,3.6vw,30px);line-height:1.35;margin:0;color:var(--ink);text-wrap:balance;text-shadow:3px 3px 0 #000}
.overlay h2 span{color:var(--red-text)}
.eyebrow{font-family:var(--f-display);font-size:clamp(8px,1.3vw,11px);letter-spacing:.14em;color:var(--alert);margin:0;text-transform:uppercase}
.hint{margin:0;color:var(--muted);font-size:clamp(16px,2.2vw,22px)}
form{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0}
label{font-family:var(--f-display);font-size:9px;letter-spacing:.1em;color:var(--muted)}
.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
input{font-family:var(--f-display);font-size:12px;background:#05060f;color:var(--flood);border:3px solid var(--edge);padding:9px 10px;width:12.5em;max-width:60vw;text-transform:uppercase}
.btn{font-family:var(--f-display);font-size:12px;background:var(--red);color:#ffffff;border:0;padding:12px 16px;cursor:pointer;box-shadow:0 4px 0 var(--red-deep)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--red-deep)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 3px var(--line)}
#end-sub{margin:0;font-size:clamp(18px,2.6vw,26px);max-width:32ch}
.score{margin:0;font-family:var(--f-display);font-size:clamp(9px,1.5vw,13px);color:var(--red-soft);font-variant-numeric:tabular-nums}
.touch{display:none;align-items:center;justify-content:space-between;gap:16px;user-select:none;-webkit-user-select:none}
.stick{width:132px;height:132px;border-radius:50%;background:var(--panel);border:3px solid var(--line);position:relative;touch-action:none;flex:none}
.knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--muted);box-shadow:inset 0 -5px 0 rgba(0,0,0,.3)}
.tbtns{display:flex;gap:12px}
.tbtn{font-family:var(--f-display);font-size:10px;width:84px;height:84px;border-radius:50%;border:3px solid var(--line);background:var(--panel);color:var(--ink);touch-action:none}
.tbtn.kick{background:var(--red);color:#ffffff;border-color:var(--red-deep)}
@media (hover:none) and (pointer:coarse){.touch{display:flex}.kbd-only{display:none}}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.card{background:var(--panel);border:2px solid var(--line);padding:14px 16px;min-width:0}
.card h3,.card .card-title{line-height:1.35;font-family:var(--f-display);font-size:11px;letter-spacing:.08em;color:var(--red-text);margin:0 0 10px}
.card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.card li{display:flex;justify-content:space-between;gap:10px}
.card li b{font-weight:normal;color:var(--ink)}
.lvl{font-family:var(--f-body);font-size:17px;color:#1a1300;background:var(--muted);padding:4px 6px;align-self:center;white-space:nowrap}
.lvl.l1{background:#7dd77a}.lvl.l2{background:#7fd3ff}.lvl.l3{background:var(--flood)}.lvl.l4{background:var(--alert)}.lvl.l5{background:#c084fc}
kbd{font-family:var(--f-display);font-size:9px;background:#080809;border:2px solid var(--line);padding:2px 5px;color:var(--red-soft)}
.tip{margin:10px 0 0;color:var(--muted)}
[hidden]{display:none!important}
kbd.arr{font-family:system-ui,-apple-system,"Segoe UI Symbol",sans-serif;font-size:13px;line-height:1;padding:1px 5px}
.overlay{justify-content:safe center}
#ov-mode,#ov-title,#ov-team{background:#111113}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;width:min(100%,760px)}
.picks.modes{grid-template-columns:repeat(2,minmax(0,200px));justify-content:center}
.modes .pick{padding:14px 8px;font-family:var(--f-display);font-size:12px;gap:8px}
.modes .pick small{font-family:var(--f-body);font-size:18px}
.picks.langs{grid-template-columns:repeat(2,minmax(0,220px));justify-content:center}
.langs .pick{font-family:var(--f-display);font-size:13px;padding:16px 8px}
.langs .pick.current{border-color:var(--red)}
/* tela de línguas: título e botões maiores, crescendo com a largura da tela */
#ov-lang{gap:clamp(12px,1.6vw,18px);padding-block:104px 24px}
#ov-lang h2{font-size:clamp(22px,5vw,54px);line-height:1.2;text-shadow:4px 4px 0 #000}
#ov-lang .eyebrow{font-size:clamp(9px,1.25vw,14px)}
#ov-lang .picks.langs{grid-template-columns:repeat(2,minmax(0,clamp(190px,22vw,250px)));gap:10px}
#ov-lang .langs .pick{font-size:clamp(12px,1.5vw,15px);padding:clamp(12px,1.6vw,17px) 8px}
.lang-intro{margin:4px 0 0;max-width:min(100%,600px);font-size:clamp(17px,1.7vw,22px);line-height:1.3;color:var(--ink);text-wrap:pretty}
.picks.chars{grid-template-columns:repeat(3,minmax(0,120px));justify-content:center}
.chars .pick{padding:12px 6px}
.chars .pick canvas{width:48px;height:84px}
.chars .pick.current{border-color:var(--red)}
.picks.teams{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.pick{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--panel);border:2px solid var(--line);color:var(--ink);padding:8px 6px;cursor:pointer;font-family:var(--f-body);font-size:19px;line-height:1.05}
.pick:hover,.pick:focus-visible{border-color:var(--red);background:#232327}
.pick canvas{width:40px;height:70px;aspect-ratio:auto;image-rendering:pixelated}
.teams .pick canvas{width:32px;height:56px}
.pick small{font-size:16px;color:var(--muted)}
.pick small.best{color:var(--flood);font-size:16px}
.score.rec{color:var(--flood)}
/* ---------- conquistas ---------- */
.ach-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:8px;width:100%;max-width:900px;text-align:left}
.ach{display:flex;gap:10px;align-items:flex-start;background:var(--panel);border:2px solid var(--line);padding:8px 10px;min-width:0}
.ach.on{border-color:var(--flood)}
.ach-ic{font-family:system-ui,sans-serif;font-size:20px;line-height:1;color:#3a3a40;flex:none}
.ach.on .ach-ic{color:var(--flood)}
.ach div{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ach b{font-family:var(--f-display);font-size:9px;line-height:1.5;font-weight:normal;color:var(--muted)}
.ach.on b{color:var(--ink)}
.ach small{font-size:17px;line-height:1.1;color:var(--muted)}
.ach-bar{display:block;height:4px;background:var(--line);margin-top:3px;position:relative}
.ach-bar::after{content:"";position:absolute;inset:0;width:calc(var(--p) * 100%);background:var(--red)}
.ach em{font-style:normal;font-size:15px;color:var(--muted)}
.ach-new{margin:0;color:var(--flood);font-size:clamp(16px,2.2vw,20px);max-width:44ch}
.toast{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:60;width:max-content;max-width:90%;background:#111113;border:2px solid var(--flood);box-shadow:0 4px 0 #000;padding:7px 12px;text-align:center;pointer-events:none}
.toast small{display:block;font-family:var(--f-display);font-size:7px;letter-spacing:.06em;color:var(--flood);margin-bottom:5px}
.toast b{font-family:var(--f-display);font-size:10px;font-weight:normal;color:var(--ink)}
/* ---------- conta ---------- */
.acc-box{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(100%,340px)}
.acc-form{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;text-align:left}
.acc-form label{display:flex;flex-direction:column;gap:4px;width:100%;font-family:var(--f-body);font-size:19px;letter-spacing:0;color:var(--muted)}
.acc-form input{font-family:var(--f-body);font-size:20px;text-transform:none;color:var(--ink);width:100%;max-width:none;box-sizing:border-box;padding:6px 10px}
.acc-form input:focus{outline:none;border-color:var(--red)}
.acc-form .btn{align-self:stretch}
.acc-card{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;width:min(calc(100% - 24px),330px);padding:6px 10px;background:var(--panel);border:2px solid var(--red);box-shadow:0 0 0 3px #080809,0 0 24px rgba(227,38,58,.18);box-sizing:border-box}
.acc-card p{margin:0;font-size:clamp(13px,1.35vw,14px);line-height:1.25;color:var(--ink);text-wrap:balance}
.acc-card .row{align-items:center}
.acc-card .btn{font-size:9px;padding:7px 10px;box-shadow:0 3px 0 var(--red-deep)}
.acc-card .linkbtn{font-size:14px}
.linkbtn{background:none;border:0;color:var(--red-soft);font-family:var(--f-body);font-size:19px;text-decoration:underline;cursor:pointer;padding:4px}
.linkbtn:hover{color:var(--ink)}
.acc-tabs{display:flex;width:100%;border-bottom:3px solid var(--line)}
.rank-tabs{width:min(100%,420px)}
.rank-list{list-style:none;margin:0;padding:0;width:min(100%,420px);display:flex;flex-direction:column;gap:4px;text-align:left}
.rank-row{display:grid;grid-template-columns:3.2em 1fr auto;gap:8px;align-items:center;background:var(--panel);border:2px solid var(--line);padding:5px 10px;font-size:19px}
.rank-row b{font-weight:normal;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-pos{font-family:var(--f-display);font-size:9px;color:var(--muted)}
.rank-row.p1 .rank-pos{color:var(--flood)}.rank-row.p2 .rank-pos{color:#d6d6de}.rank-row.p3 .rank-pos{color:#e0a060}
#rank-msg:empty,#rank-me:empty,#rank-champ:empty{display:none}
.rank-week{margin:0;font-size:18px;color:var(--muted)}
.rank-champ{margin:0;font-size:18px;color:var(--ink)}
.rank-champ::before{content:"★ ";color:var(--flood)}
.rank-pts{font-family:var(--f-display);font-size:10px;color:var(--red-soft);font-variant-numeric:tabular-nums}
.rank-row.me{border-color:var(--flood)}.rank-row.me b{color:var(--flood)}
.rank-me{margin:0;font-size:19px;color:var(--flood);min-height:1.2em;max-width:40ch}
.acc-tab,.rank-tab{flex:1;font-family:var(--f-display);font-size:9px;letter-spacing:.06em;background:none;color:var(--muted);border:0;border-bottom:3px solid transparent;margin-bottom:-3px;padding:12px 6px;cursor:pointer}
.acc-tab:hover,.rank-tab:hover{color:var(--ink)}
.acc-tab.on,.rank-tab.on{color:var(--ink);border-bottom-color:var(--red);background:var(--panel)}
.acc-off{margin:0;padding:10px 12px;border:2px dashed var(--line);font-size:18px;color:var(--flood);width:100%;box-sizing:border-box}
.acc-form input:disabled{opacity:.45;cursor:not-allowed}
.btn.danger{color:var(--red-soft);box-shadow:inset 0 0 0 3px var(--red-deep)}
.acc-msg{margin:0;min-height:1.2em;font-size:19px;color:var(--flood);max-width:36ch}
.acc-msg.err{color:var(--alert)}
.acc-privacy{margin:0;font-size:16px;color:var(--muted);max-width:44ch}
.btn:disabled{opacity:.5;cursor:wait}
/* ---------- celular ---------- */
html,body{-webkit-text-size-adjust:100%}
button,.stick{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
button{touch-action:manipulation}
.stick,.tbtn{touch-action:none}
.stage{touch-action:none}
.rotate-hint,.touch-tip{display:none;margin:0;color:var(--muted);text-align:center;font-size:18px}
/* telas pequenas: o menu entra no lugar do campo, como parte da página, e os guias continuam logo abaixo */
@media (max-width:760px),(hover:none) and (pointer:coarse){
  .overlay{position:static;inset:auto;background:#111113;gap:10px;padding:18px 12px;overflow:visible}
  .acc-card{position:static;transform:none;margin-bottom:14px}
  body.menu-open .stage{width:100%;touch-action:auto}
  body.menu-open .stage>canvas,body.menu-open .touch,body.menu-open .rotate-hint{display:none!important}
  .overlay h2{font-size:clamp(15px,4.6vw,26px)}
  .picks{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
  .picks.teams{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .picks.modes,.picks.langs{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,460px)}
  .pick{font-size:17px;padding:8px 4px}
  .teams .pick canvas{width:28px;height:49px}
  #ov-lang{gap:12px;padding-block:18px 22px}
  #ov-lang h2{font-size:clamp(20px,calc((100vw - 70px) / 11),44px)}
  #ov-lang .eyebrow{font-size:clamp(8px,calc((100vw - 60px) / 40),13px)}
  #ov-lang .picks.langs{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,420px);gap:8px}
  #ov-lang .langs .pick{font-size:clamp(11px,calc((100vw - 90px) / 21),16px);padding:15px 4px}
}
@media (hover:none) and (pointer:coarse) and (orientation:portrait){.rotate-hint,.touch-tip{display:block}}
/* celular em pé: o botão de pausa fica numa linha própria acima dos controles, e direcional e botões cabem até no iPhone SE */
@media (hover:none) and (pointer:coarse) and (orientation:portrait){
  .touch{flex-wrap:wrap;row-gap:8px;column-gap:6px}
  .tpause{order:-1;width:84px;padding:0;margin:0 calc(50% - 42px)}
  .stick{width:120px;height:120px}
  .tbtns{gap:10px}
  .tbtn{width:76px;height:76px}
}
/* celular jogando: a página fica travada (sem rolar nem pular com a barra do navegador) e os guias somem até voltar ao menu */
@media (hover:none) and (pointer:coarse){
  html.playing,html.playing body{overflow:hidden;overscroll-behavior:none;touch-action:none;height:100%}
  html.playing .info,html.playing .touch-tip{display:none}
}
/* celular deitado: campo do tamanho da altura da tela e controles flutuando nas laterais */
@media (hover:none) and (pointer:coarse) and (orientation:landscape){
  body{padding-block:6px 16px}
  .wrap{gap:6px}
  .brand small{display:none}
  .chip{padding:6px 5px;font-size:8px;letter-spacing:.02em}
  .brand{font-size:10px}
  .bar,.tools{flex-wrap:nowrap}
  .tools{gap:4px}
  .brand{white-space:nowrap}
  .stage{width:min(100%,calc((100svh - 62px) * 16 / 9));margin:0 auto;border-width:2px}
  .touch{position:fixed;left:0;right:0;bottom:0;z-index:20;pointer-events:none;align-items:flex-end;
    padding:0 max(14px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
  .touch>*{pointer-events:auto;opacity:.82}
  .stick{width:112px;height:112px}
  .knob{width:46px;height:46px;margin:-23px 0 0 -23px}
  .tbtns{flex-direction:column-reverse;gap:10px}
  .tbtn{width:70px;height:70px;font-size:9px}
  .tpause{position:fixed;right:max(14px,env(safe-area-inset-right,0px));top:76px;height:36px;font-size:8px;padding:0 10px}
}
/* ---------- LGPD: aceite no cadastro, rodapé legal e aviso de armazenamento ---------- */
main{display:flex;flex-direction:column;gap:inherit;min-width:0}
.acc-checks{display:flex;flex-direction:column;gap:8px;max-width:30em;margin:4px 0 2px;text-align:left}
/* os itens dos menus não encolhem: se faltar altura, o menu rola em vez de sobrepor textos */
.overlay>*{flex-shrink:0}
.acc-form label.check{display:flex;flex-direction:row;align-items:flex-start;gap:10px;font-family:var(--f-body);font-size:18px;letter-spacing:0;line-height:1.2;color:var(--ink);cursor:pointer}
.acc-form label.check input{width:22px;height:22px;min-width:22px;margin:0;padding:0;border:0;accent-color:var(--red);cursor:pointer}
label.check a,.acc-privacy a,.notice a,.legal a{color:var(--red-soft)}
.legal{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 4px;text-align:center;color:var(--muted);font-size:17px}
.legal p{margin:0;max-width:60ch}
.legal-contact{color:var(--ink);overflow-wrap:anywhere}
.legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
.legal-links a{font-family:var(--f-display);font-size:9px;letter-spacing:.06em;padding:6px 2px}
.notice{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:14px;
  width:min(calc(100% - 24px),720px);padding:12px 14px;background:var(--panel);border:2px solid var(--edge);box-shadow:0 0 0 3px #080809,0 8px 30px rgba(0,0,0,.6)}
.notice p{margin:0;font-size:18px;line-height:1.25;flex:1}
.notice .btn{flex:none;font-size:10px;padding:10px 14px}
@media (max-width:560px){.notice{flex-direction:column;align-items:stretch;gap:8px;text-align:center}}
@media (max-width:760px),(hover:none) and (pointer:coarse){
  .notice{padding:8px 10px;bottom:max(8px,env(safe-area-inset-bottom,0px))}
  .notice p{font-size:15px;line-height:1.15}
  .notice .btn{font-size:9px;padding:8px 12px}
}
html.playing .notice{display:none}