/* Manifestação · protótipo — casca no padrão IMLOCCUS: ônix, off-white, Montserrat, linhas de 1 px, vidro */
:root{--onix:#0E0F10;--grafite:#1A1B1D;--off:#F4F3EF;--concreto:#A8A6A0;--verde:#1F8A3B;--amarelo:#F6D21F;--font:'Montserrat',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--onix);color:var(--off);font:300 14px/1.5 var(--font);overflow:hidden}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
/* toque (iPhone/Android): arrastar não rola nem dá zoom na página; toque longo não seleciona texto nem abre menu */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#hud{touch-action:none}
.lbl{font:600 10.5px/1.2 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--concreto)}
#abertura{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:var(--onix);transition:background .6s}
/* pronto para começar: o painel fica à esquerda e o personagem escolhido aparece de frente à direita */
#abertura:has(#btComecar:not(:disabled)){place-items:center start;background:linear-gradient(90deg,var(--onix) 0,var(--onix) 38%,rgba(14,15,16,.55) 58%,rgba(14,15,16,0) 78%)}
#abertura:has(#btComecar:not(:disabled)) .inner{margin-left:6vw;justify-items:start;text-align:left}
.escolha{display:grid;gap:12px;justify-items:inherit}
.lados{display:flex;gap:1px;background:rgba(244,243,239,.14);border:1px solid rgba(244,243,239,.14)}
.lados button{display:flex;align-items:center;gap:10px;font:600 11px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--off);background:var(--onix);border:0;padding:14px 18px;cursor:pointer}
.lados button i{width:10px;height:10px;border-radius:50%;background:var(--cor)}.lados button.on{background:var(--grafite);box-shadow:inset 0 -2px 0 var(--cor)}
.pers{display:flex;align-items:center;gap:14px}.pers button{width:36px;height:36px;font:300 20px/1 var(--font);color:var(--off);background:transparent;border:1px solid rgba(244,243,239,.35);cursor:pointer}
#abertura .inner{max-width:580px;padding:24px;text-align:center;display:grid;gap:18px;justify-items:center}
#abertura h1{margin:0;font:300 clamp(34px,6vw,72px)/1.02 var(--font);letter-spacing:.14em;text-transform:uppercase}
#abertura .sub{margin:0;max-width:50ch;color:var(--concreto)}#abertura .dica{font-size:12px;color:var(--concreto);opacity:.8}
#btComecar{font:600 11px/1 var(--font);letter-spacing:.3em;text-transform:uppercase;color:var(--onix);background:var(--off);border:1px solid var(--off);padding:16px 34px;cursor:pointer}
#btComecar:disabled{opacity:.4;cursor:wait}
.carga{width:220px;height:1px;background:rgba(244,243,239,.15)}.carga i{display:block;height:100%;width:0;background:var(--off);transition:width .25s}
.carga:has(+#btComecar:not(:disabled)){visibility:hidden}   /* some quando termina de carregar */
.so-toque{display:none}
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}#hud>*{pointer-events:auto}
.topo{position:absolute;left:24px;top:20px}
.vida{position:absolute;left:24px;top:52px;display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(14,15,16,.72);border:1px solid rgba(244,243,239,.12);backdrop-filter:blur(12px);font:500 14px/1 var(--mono)}
.vida i{display:block;width:180px;height:6px;background:rgba(244,243,239,.15)}.vida b{display:block;height:100%;width:100%;background:var(--off);transition:width .2s}
.placar{position:absolute;right:24px;top:20px;display:grid;grid-template-columns:auto auto;gap:6px 14px;align-items:center;padding:12px 16px;background:rgba(14,15,16,.72);border:1px solid rgba(244,243,239,.12);backdrop-filter:blur(12px)}
.placar b{font:500 20px/1 var(--mono);text-align:right}
.acoes{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:1px;background:rgba(244,243,239,.12);border:1px solid rgba(244,243,239,.12)}
.acoes button{font:600 10.5px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--off);background:rgba(14,15,16,.78);border:0;padding:13px 18px;cursor:pointer;backdrop-filter:blur(12px)}
.acoes button:hover{background:var(--grafite)}
.teclas{position:absolute;right:24px;bottom:76px;max-width:60vw;text-align:right;color:var(--off);padding:8px 12px;background:rgba(14,15,16,.62);border:1px solid rgba(244,243,239,.12);backdrop-filter:blur(12px)}
.aviso{position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);padding:12px 22px;border:1px solid var(--off);background:rgba(14,15,16,.82);font:600 11px/1 var(--font);letter-spacing:.22em;text-transform:uppercase;opacity:0;transition:opacity .3s;pointer-events:none}
.aviso.on{opacity:1}
.erro{position:fixed;z-index:30;left:24px;bottom:30px;padding:10px 14px;background:rgba(14,15,16,.9);color:#f1b8a6;font:500 12px/1.4 var(--mono);max-width:60ch;white-space:pre-wrap}
@media (max-width:760px){.teclas{display:none}.vida i{width:110px}}
/* celular e tablet: textos de toque, ações no alto (embaixo ficam o joystick e os botões), HUD mais compacto */
/* celular: o painel fica no alto e o personagem embaixo */
@media (max-width:760px){#abertura:has(#btComecar:not(:disabled)){place-items:start center;background:linear-gradient(180deg,var(--onix) 0,var(--onix) 36%,rgba(14,15,16,.35) 46%,rgba(14,15,16,0) 56%)}
  #abertura:has(#btComecar:not(:disabled)) .inner{margin:0;justify-items:center;text-align:center;padding-top:calc(24px + env(safe-area-inset-top))}
  #abertura h1{font-size:30px}.lados button{padding:12px 12px;letter-spacing:.12em}
  #abertura:has(#btComecar:not(:disabled)) :is(.sub,.dica){display:none}#abertura:has(#btComecar:not(:disabled)) .inner{gap:12px}}
/* os controles de toque só aparecem depois de começar */
body:not(.jogando) :is(.tq-bts,.tq-zona,.tq-base){display:none!important}
@media (pointer:coarse){.so-mouse,.teclas{display:none}.so-toque{display:block}
  .acoes{top:calc(10px + env(safe-area-inset-top));bottom:auto}.acoes button{padding:10px 12px;font-size:9.5px;letter-spacing:.12em}
  .topo{display:none}.vida{left:calc(12px + env(safe-area-inset-left));top:calc(56px + env(safe-area-inset-top));padding:8px 10px}
  .placar{right:calc(12px + env(safe-area-inset-right));top:calc(56px + env(safe-area-inset-top));padding:8px 12px}.placar b{font-size:16px}}

/* medidor de desempenho (?fps=1 · F3 · ?bench=1) */
#medidor[hidden]{display:none}
#medidor{position:fixed;left:24px;top:104px;z-index:15;display:grid;grid-template-columns:auto auto;gap:3px 12px;align-items:baseline;padding:10px 14px;background:rgba(14,15,16,.72);border:1px solid rgba(244,243,239,.12);backdrop-filter:blur(12px);font:500 12px/1.2 var(--mono);color:var(--off);pointer-events:none}
#medidor>b{font:500 26px/1 var(--mono)}#medidor>span{font:600 9.5px/1.2 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--concreto)}#medidor>i{display:none}
#medidor>b+span{align-self:end}#medidor em{font-style:normal;text-align:right}
#medidor .gpu{grid-column:1/-1;margin-top:6px;padding-top:6px;border-top:1px solid rgba(244,243,239,.12);max-width:340px;color:var(--concreto);font-size:10.5px}
#benchCartao{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:rgba(14,15,16,.55);backdrop-filter:blur(6px)}
#benchCartao .caixa{position:relative;width:min(560px,calc(100vw - 32px));padding:26px 26px 22px;background:rgba(14,15,16,.9);border:1px solid rgba(244,243,239,.16);display:grid;gap:16px}
#benchCartao .fechar{position:absolute;right:10px;top:8px;width:36px;height:36px;border:0;background:none;color:var(--off);font:300 26px/1 var(--font);cursor:pointer}
#benchCartao .linhas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(244,243,239,.12);border:1px solid rgba(244,243,239,.12)}
#benchCartao .linhas div{background:var(--onix);padding:14px;display:grid;gap:4px}
#benchCartao .linhas span{font:600 9.5px/1.2 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--concreto)}
#benchCartao .linhas b{font:500 30px/1 var(--mono)}#benchCartao .linhas em{font:500 11px/1 var(--mono);font-style:normal;color:var(--concreto)}
#benchCartao pre{margin:0;max-height:150px;overflow:auto;padding:12px;background:rgba(244,243,239,.04);border:1px solid rgba(244,243,239,.1);font:500 11px/1.5 var(--mono);color:var(--concreto);white-space:pre-wrap}
#benchCartao .bts{display:flex;gap:1px;background:rgba(244,243,239,.12);border:1px solid rgba(244,243,239,.12)}
#benchCartao .bts button{flex:1;font:600 10.5px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;border:0;padding:14px;cursor:pointer;background:var(--onix);color:var(--off)}
#benchCartao .bts .copiar{background:var(--off);color:var(--onix)}
@media (max-width:560px){#benchCartao .linhas{grid-template-columns:1fr}}