:root{--tinta:#26243a;--tinta2:#4a4660;--creme:#fbf6ea;--creme2:#efe7d6;--laranja:#ff6a3d;--laranja2:#b63f2a;--azul:#26457a;--ouro:#f2b233;--verde:#2f8f83;
--fonte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"Cascadia Mono","Consolas",monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#cfc6b8;color:var(--tinta);font:15px/1.4 var(--fonte);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--laranja);outline-offset:2px}
#app{position:fixed;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#cena{position:absolute;inset:0;width:100%;height:100%;display:block}
.vinheta{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(38,36,58,.28) 100%)}

/* HUD */
#hud{position:absolute;inset:0;pointer-events:none}
.hud-topo{position:absolute;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.hud-topo>*{pointer-events:auto}
.placa-setor,.medidor,.placar,.vidas{background:rgba(251,246,234,.93);border:2px solid var(--tinta);border-radius:8px;padding:5px 10px;box-shadow:0 3px 0 rgba(38,36,58,.35)}
.placa-setor{display:flex;flex-direction:column;justify-content:center;min-width:112px;background:var(--tinta);color:var(--creme);border-color:var(--tinta)}
.placa-setor small{font:700 10px/1.2 var(--mono);letter-spacing:1.5px;color:#ffb89f}
.placa-setor b{font-size:16px}
.medidor{flex:1 1 220px;display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:180px}
.medidor span{font-size:13px}
.barra{position:relative;height:12px;border:2px solid var(--tinta);border-radius:3px;background:repeating-linear-gradient(90deg,#e4ded1 0 6px,#d8d0c1 6px 7px)}
.barra i{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(135deg,#cfb58b 0 5px,#bb9f74 5px 7px);transition:width .35s}
.barra em{position:absolute;top:-5px;bottom:-5px;width:3px;background:var(--laranja);border:1px solid var(--tinta)}
.placar{display:flex;flex-direction:column;justify-content:center;text-align:right;min-width:92px}
.placar small{font:700 10px var(--mono);letter-spacing:1.5px;color:var(--tinta2)}
.placar b{font:700 19px var(--mono)}
.vidas{display:flex;gap:4px;align-items:center}
.vidas i{width:14px;height:20px;display:block;background:var(--creme);border:2px solid var(--tinta);border-top:6px solid var(--azul);border-radius:2px}
.vidas i.perdida{opacity:.25;border-style:dashed}
.botoes-hud{display:flex;gap:8px}
.redondo{width:46px;height:46px;border-radius:50%;border:2px solid var(--tinta);background:var(--creme);font-size:18px;font-weight:700;box-shadow:0 3px 0 rgba(38,36,58,.35);display:grid;place-items:center}
.redondo[aria-pressed="true"]{background:#d9d2c6;text-decoration:line-through}
#maquete-hud{position:absolute;right:max(10px,env(safe-area-inset-right));top:84px;background:#3c3a44;border:2px solid var(--tinta);border-radius:6px;padding:6px 6px 3px;box-shadow:0 4px 0 rgba(38,36,58,.4);pointer-events:none}
#maquete-hud canvas{display:block;width:150px;image-rendering:pixelated;border:3px solid #f1ece2;outline:1px solid #9d9486}
#maquete-hud small{display:block;font:700 9px/1.6 var(--mono);letter-spacing:1px;color:#e9e2d4;text-align:center}
#dica{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);max-width:min(560px,calc(100% - 24px));background:var(--tinta);color:var(--creme);padding:10px 16px;border-radius:10px;border:2px solid #ffb89f;font-size:15px;text-align:center;box-shadow:0 5px 0 rgba(0,0,0,.25);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
#dica.visivel{opacity:1}
#dica kbd{font:700 12px var(--mono);background:var(--creme);color:var(--tinta);border-radius:4px;padding:1px 5px;margin:0 1px}

/* toque */
#toque{display:none}
body.toque #toque{display:block}
.dpad{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));width:168px;height:168px;pointer-events:auto}
.dpad button{position:absolute;width:58px;height:58px;border-radius:12px;border:2px solid var(--tinta);background:rgba(251,246,234,.88);font-size:20px;box-shadow:0 3px 0 rgba(38,36,58,.35);touch-action:none}
.dpad button.ativo{background:#ffd2c2;transform:translateY(2px)}
.dpad [data-dir=cima]{left:55px;top:0}.dpad [data-dir=baixo]{left:55px;bottom:0}.dpad [data-dir=esq]{left:0;top:55px}.dpad [data-dir=dir]{right:0;top:55px}
#btn-lento{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));width:96px;height:96px;border-radius:50%;border:3px solid var(--tinta);background:rgba(255,106,61,.9);color:#fff;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 0 rgba(38,36,58,.4);touch-action:none}
#btn-lento b{font:800 17px var(--mono)}#btn-lento small{font-size:11px}
#btn-lento.ativo{background:#b63f2a;transform:translateY(2px)}
body.toque #dica{bottom:196px;font-size:13px;padding:6px 10px;max-width:min(300px,calc(100% - 24px));background:rgba(38,36,58,.8);border-width:1px}
body.toque .controles-lista{display:none}

/* flutuantes e banner */
#flutuantes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.flut{position:absolute;transform:translate(-50%,-50%);font:800 20px var(--mono);color:#fff;text-shadow:2px 2px 0 var(--tinta),-1px -1px 0 var(--tinta),1px -1px 0 var(--tinta),-1px 1px 0 var(--tinta);animation:subir 1.3s ease-out forwards;white-space:nowrap}
.flut.grande{font-size:28px;color:#ffe066}.flut.ruim{color:#ffb3a6}
@keyframes subir{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
#banner{position:absolute;left:50%;top:32%;transform:translate(-50%,-50%);pointer-events:none;text-align:center;opacity:0}
#banner.mostrar{animation:banner 2.6s ease forwards}
#banner .placa{display:inline-block;background:var(--tinta);color:var(--creme);border:3px solid var(--creme);outline:3px solid var(--tinta);padding:14px 28px;border-radius:6px;box-shadow:0 8px 0 rgba(0,0,0,.25)}
#banner small{display:block;font:700 12px var(--mono);letter-spacing:3px;color:#ffb89f}
#banner b{display:block;font-size:34px;line-height:1.1}
#banner span{display:block;font-size:14px;color:#d8d3e6;margin-top:3px}
@keyframes banner{0%{opacity:0;transform:translate(-50%,-80%)}12%{opacity:1;transform:translate(-50%,-50%)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-40%)}}

/* modal / telas */
.modal{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(38,36,58,.28);overflow:auto}
.modal[hidden]{display:none}
.modal.lateral{place-items:center start;background:linear-gradient(90deg,rgba(38,36,58,.55),rgba(38,36,58,0) 70%)}
.cartao{width:min(460px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--creme);border:3px solid var(--tinta);border-radius:14px;padding:22px 22px 18px;box-shadow:0 10px 0 rgba(38,36,58,.35)}
.modal.lateral .cartao{margin-left:clamp(0px,4vw,60px)}
.cartao h1{font-size:34px;line-height:1.05;margin:4px 0 6px;letter-spacing:-.5px}
.cartao h2{font-size:24px;margin:2px 0 8px}
.cartao .sobre{font:700 11px var(--mono);letter-spacing:2px;color:var(--laranja2)}
.cartao p{margin:8px 0}
.ficcao{font-size:12.5px;color:var(--tinta2);background:var(--creme2);border-left:4px solid var(--laranja);padding:8px 10px;border-radius:4px}
.acoes{display:grid;gap:9px;margin-top:14px}
.acoes.lado{grid-template-columns:1fr 1fr}
.botao{min-height:48px;border:2px solid var(--tinta);border-radius:10px;background:#fff;font-weight:700;font-size:16px;padding:10px 14px;box-shadow:0 3px 0 rgba(38,36,58,.35);text-align:center;text-decoration:none;color:var(--tinta);display:flex;align-items:center;justify-content:center;gap:8px}
.botao.principal{background:var(--laranja);color:#fff;font-size:18px}
.botao:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(38,36,58,.35)}
.botao[disabled]{opacity:.5;cursor:not-allowed}
.link{color:var(--laranja2);font-size:13px}
.controles-lista{font-size:13px;margin:10px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.controles-lista kbd{font:700 11px var(--mono);background:#fff;border:1px solid var(--tinta2);border-bottom-width:2px;border-radius:4px;padding:0 5px}
.estrelas{font-size:34px;letter-spacing:6px;color:var(--ouro);text-shadow:0 2px 0 var(--tinta)}
.estrelas .apagada{color:#d8d0c1}
.numeros{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:15px;margin:10px 0;background:#fff;border:2px solid var(--creme2);border-radius:8px;padding:10px 12px}
.numeros b{font-family:var(--mono);text-align:right}
.numeros .total{font-size:18px;border-top:2px dashed var(--creme2);padding-top:6px}
.selo{display:inline-block;background:var(--ouro);color:var(--tinta);font:800 12px var(--mono);padding:3px 8px;border-radius:4px;border:2px solid var(--tinta);transform:rotate(-3deg)}
.fases{display:grid;gap:8px;margin:12px 0}
.fase{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;border:2px solid var(--tinta);border-radius:10px;padding:8px 10px;background:#fff;min-height:56px;text-align:left}
.fase .num{font:800 20px var(--mono);background:var(--tinta);color:var(--creme);border-radius:6px;text-align:center;padding:4px 0}
.fase small{display:block;color:var(--tinta2);font-size:12px}
.fase[disabled]{background:var(--creme2);opacity:.75}
.campo{display:grid;gap:6px;margin:12px 0}
.campo label{font-weight:700;font-size:14px}
.segmentado{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.segmentado button{min-height:46px;border:2px solid var(--tinta);border-radius:8px;background:#fff;font-weight:700}
.segmentado button[aria-pressed="true"]{background:var(--tinta);color:var(--creme)}
input[type=range]{width:100%;height:44px;accent-color:var(--laranja)}
#aviso-save{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:#fff3c2;border:2px solid var(--tinta);border-radius:8px;padding:6px 12px;font-size:13px;margin:0;max-width:calc(100% - 20px);text-align:center}
.sem-js{position:absolute;inset:auto 0 40% 0;text-align:center;font-size:18px}
.carregando{font:700 14px var(--mono);letter-spacing:2px}

@media (max-width:760px){
  .hud-topo{gap:6px;top:max(8px,env(safe-area-inset-top))}
  .placa-setor{min-width:0;padding:4px 8px;order:1}.placa-setor b{font-size:14px}
  .placar{order:2;min-width:70px;padding:4px 8px}.placar b{font-size:16px}
  .vidas{order:3;padding:4px 8px}
  .botoes-hud{order:4;margin-left:auto}
  .medidor{order:5;flex-basis:100%;padding:4px 8px}
  .redondo{width:44px;height:44px}
  #maquete-hud{top:132px;right:10px;padding:4px 4px 2px}
  #maquete-hud canvas{width:64px}
  #maquete-hud small{display:none}
  .cartao{padding:18px 16px 14px}.cartao h1{font-size:28px}
  #banner b{font-size:26px}
  .modal.lateral{place-items:end center;background:linear-gradient(0deg,rgba(38,36,58,.6),rgba(38,36,58,0) 80%)}
  .modal.lateral .cartao{margin:0}
}
@media (max-height:520px){#maquete-hud{display:none}.dpad{transform:scale(.85);transform-origin:bottom left}}
@media (prefers-reduced-motion:reduce){.flut,#banner.mostrar{animation-duration:.01s}.barra i{transition:none}}

/* setores do pavilhão (maquete do HUD) */
#hud-setores{display:flex;gap:3px;justify-content:center;margin-top:3px}
#hud-setores i{font:700 9px/14px var(--mono);font-style:normal;width:16px;height:14px;text-align:center;color:#e9e2d4;border:1px solid #9d9486;border-radius:2px;background:#3c3a44}
#hud-setores i.cheio{background:#cfb58b;color:var(--tinta);border-color:#f1ece2}
#hud-setores i.atual{outline:2px solid var(--laranja);color:#fff}
/* indicadores de ameaça fora da tela */
#indicadores{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#indicadores i{position:absolute;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:16px solid #e0584a;filter:drop-shadow(0 0 1px #26243a) drop-shadow(0 0 1px #26243a);transform-origin:50% 60%}
#indicadores i.fita{border-bottom-color:#f5c542}
@media (max-width:760px){#hud-setores{display:flex}#hud-setores i{width:11px;height:11px;font-size:0}}