/* Durante a partida (jogar e treino): barra de cima e loja da base. Laranja = ação/créditos; azul = interface. */
:root{--j-ui:#3fb2ff;--j-or:#f5a524;--j-or-hi:#ffc45a;--j-line:rgba(63,178,255,.32);--j-ink:#e6ecf7;--j-mute:#93a2bf;--j-panel:rgba(5,11,22,.9);--j-red:#ff3b4f;--j-blue:#2f9bff}

/* ---------- barra de cima: as três peças metálicas do design (img/hud/barra-*.png) ligadas pelo trilho ----------
   Tudo é medido em "pixels do design" (--u): cada peça tem 192 de altura. */
.tb{--u:min(calc(100cqw / 1990), calc(112px / 192));position:absolute;left:2px;right:2px;top:0;z-index:3;height:calc(var(--u) * 192);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;
  pointer-events:none;font-family:"Oxanium",sans-serif;color:#fff;isolation:isolate}
.tb button{pointer-events:auto}
.tb::before{content:"";position:absolute;left:calc(var(--u) * 300);right:calc(var(--u) * 300);top:calc(var(--u) * 24);height:calc(var(--u) * 34);z-index:0;background:url("/img/hud/barra-trilho.png") left top/auto 100% repeat-x}
.tb-pod{position:relative;z-index:1;height:calc(var(--u) * 192);background:center/100% 100% no-repeat}
.tb-l{justify-self:start;width:calc(var(--u) * 618);background-image:url("/img/hud/barra-esq.png")}
.tb-m{justify-self:center;width:calc(var(--u) * 708);background-image:url("/img/hud/barra-meio.png")}
.tb-r{justify-self:end;width:calc(var(--u) * 613);background-image:url("/img/hud/barra-dir.png")}
.tb-pod>*{position:absolute}
/* marca e sistema */
.tb-logo{left:calc(var(--u) * 58);top:calc(var(--u) * 60);width:calc(var(--u) * 72);height:calc(var(--u) * 72)}
.tb-logo svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 6px rgba(245,165,36,.35))}
.tb-name{left:calc(var(--u) * 156);top:calc(var(--u) * 62);font:500 calc(var(--u) * 33)/1 "Orbitron","Oxanium",sans-serif;letter-spacing:.14em;color:#e9eef5}
.tb-name2{left:calc(var(--u) * 157);top:calc(var(--u) * 97);font:600 calc(var(--u) * 25)/1 "Orbitron","Oxanium",sans-serif;letter-spacing:.2em;color:#f5a524}
.tb-sys{left:calc(var(--u) * 382);top:calc(var(--u) * 63);width:calc(var(--u) * 168);height:calc(var(--u) * 66);padding:0 calc(var(--u) * 14);
  font:500 calc(var(--u) * 19)/1.5 "Oxanium",sans-serif;display:grid;grid-template-columns:auto auto;align-content:center;justify-content:start;column-gap:calc(var(--u) * 14);color:#dfe6ef}
.tb-sys .k{color:#c9d3df}
.tb-sys .n{grid-column:1 / -1;display:flex;align-items:center;gap:calc(var(--u) * 8)}
.tb-sys .n::before{content:"";width:calc(var(--u) * 9);height:calc(var(--u) * 9);border-radius:50%;background:#3ee06a;box-shadow:0 0 6px #3ee06a}
.tb-sys .n.off{color:#ff4d60}
.tb-sys .n.off::before{background:#ff4d60;box-shadow:0 0 6px #ff4d60}
/* placar */
.tb-team{top:calc(var(--u) * 52);height:calc(var(--u) * 78);width:calc(var(--u) * 156);display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--u) * 22);
  font:600 calc(var(--u) * 44)/1 "Oxanium",sans-serif;font-variant-numeric:tabular-nums;color:#fff}
.tb-team svg{width:calc(var(--u) * 54);height:calc(var(--u) * 54);flex:none}
.tb-team.ally{left:calc(var(--u) * 90)}
.tb-team.ally svg{color:#dcecff;filter:drop-shadow(0 0 6px #2e8fff)}
.tb-team.foe{left:calc(var(--u) * 463);background:linear-gradient(180deg,#3e0610 0%,#8a0a1e 55%,#c8122e 100%);box-shadow:inset 0 0 calc(var(--u) * 18) rgba(255,40,70,.45)}
.tb-team.foe svg{color:#ff3b55;filter:drop-shadow(0 0 6px #ff2e4a)}
.tb-clock{left:calc(var(--u) * 254);top:calc(var(--u) * 50);width:calc(var(--u) * 196);height:calc(var(--u) * 84);display:grid;justify-items:center;align-content:center}
.tb-clock span{font:500 calc(var(--u) * 20)/1.2 "Oxanium",sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#e3e9f1}
.tb-clock b{font:600 calc(var(--u) * 46)/1.05 "Oxanium",sans-serif;letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* botões: ficam exatamente sobre as molduras desenhadas na peça da direita */
.tb-b{top:calc(var(--u) * 64);height:calc(var(--u) * 64);display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 14);padding:0;border:0;background:transparent;
  font:500 calc(var(--u) * 22)/1 "Oxanium",sans-serif;text-transform:uppercase;color:#eef2f7;cursor:var(--cur-pointer)}
.tb-b svg{width:calc(var(--u) * 34);height:calc(var(--u) * 34);flex:none}
.tb-b:hover:not(:disabled){background:rgba(245,165,36,.12)}
.tb-b:disabled{cursor:var(--cur-no);color:#9aa7bf}
.tb-b kbd{padding:calc(var(--u) * 3) calc(var(--u) * 6);border:2px solid #f5a524;border-radius:2px;font:600 calc(var(--u) * 20)/1 "Oxanium",sans-serif;color:#fff}
.b1{left:calc(var(--u) * 67);width:calc(var(--u) * 134);cursor:var(--cur-default)!important}
.b2{left:calc(var(--u) * 213);width:calc(var(--u) * 68)}
.b3{left:calc(var(--u) * 292);width:calc(var(--u) * 58)}
.b4{left:calc(var(--u) * 366);width:calc(var(--u) * 55)}
.b5{left:calc(var(--u) * 437);width:calc(var(--u) * 135)}
.tb-menu-sm{display:none}
/* a barra adapta-se à largura da área de jogo (no treino há o painel de afinação ao lado) */
.stage{container-type:inline-size}
@container (max-width:1000px){.tb{--u:calc(100cqw / 1340)}.tb-l{display:none}.tb{grid-template-columns:1fr auto}.tb-m{justify-self:start}.tb::before{left:calc(var(--u) * 600)}}
@container (max-width:760px){
  .tb{--u:min(calc(100cqw / 730), calc(84px / 192));grid-template-columns:1fr}
  .tb-m{justify-self:center}
  .tb::before,.tb-r{display:none}
  .tb-menu-sm{display:flex;align-items:center;gap:8px;position:absolute;right:6px;top:calc(var(--u) * 196);height:32px;padding:0 12px;background:rgba(8,11,16,.94);border:1px solid #f5a524;box-shadow:0 0 6px rgba(245,165,36,.4);
    font:600 13px "Oxanium",sans-serif;text-transform:uppercase;color:#fff;cursor:var(--cur-pointer)}
  .tb-menu-sm kbd{padding:1px 4px;border:1.5px solid #f5a524;border-radius:2px;font:600 10px "Oxanium",sans-serif}
}

/* ---------- loja da base ---------- */
.shop{position:absolute;left:50%;top:calc(50% + 30px);transform:translate(-50%,-50%);z-index:4;width:min(1000px,calc(100% - 90px));cursor:var(--cur-default);color:var(--j-ink);
  background:linear-gradient(rgba(8,16,30,.96),rgba(5,10,20,.97))}
.shop[hidden]{display:none}
.shop-in{max-height:calc(100vh - 190px);overflow:auto;padding:16px 24px 20px;scrollbar-color:rgba(63,178,255,.4) transparent}
/* moldura de HUD (client.js · frameEl) */
.has-frame{position:relative;isolation:isolate}
.hud-frame{position:absolute;z-index:-1;pointer-events:none}
.shop-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.shop-head svg.cart{width:40px;height:40px;color:var(--j-or);filter:drop-shadow(0 0 6px rgba(245,165,36,.5))}
.shop-head h2{flex:1;margin:0;font:600 30px/1 "Oxanium",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.shop-head .cred{display:flex;align-items:center;gap:10px;font:600 24px "IBM Plex Mono",monospace;color:var(--j-or-hi)}
.shop-head .cred::before{content:"₵";display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd27a,#d98a10);color:#3a2204;font:800 15px "Oxanium",sans-serif}
.shop-close{display:flex;align-items:center;gap:14px;height:44px;padding:0 20px;background:rgba(5,11,22,.9);border:1px solid var(--j-line);border-radius:3px;font:500 14px "Oxanium",sans-serif;color:var(--j-ink);cursor:var(--cur-pointer)}
.shop-close:hover{border-color:var(--j-ui)}
.shop-close::before{content:"✕";color:var(--j-mute);font-size:16px}
.shop .note{margin:12px 0 0;font-size:14px;color:#b7c3da}
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;margin-top:6px}
.shop-cat{grid-column:1 / -1;display:flex;align-items:center;gap:12px;margin:22px 0 4px;font:600 15px "Oxanium",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#dfe6f2}
.shop-cat svg{width:22px;height:22px}
.shop-cat.mun svg{color:var(--j-or)}
.shop-cat.sys{color:#5fc4ff}
.shop-cat.sys svg{color:var(--j-ui)}
.item{display:grid;grid-template-columns:80px minmax(0,1fr);gap:16px;align-items:start;padding:10px 14px 10px 10px;text-align:left;background:linear-gradient(90deg,rgba(14,26,46,.92),rgba(8,16,30,.92));
  border:1px solid rgba(110,170,240,.28);border-radius:2px;color:var(--j-ink);font:13px "IBM Plex Sans",sans-serif;cursor:var(--cur-pointer)}
.item:hover:not(:disabled){border-color:var(--j-or);box-shadow:0 0 14px rgba(245,165,36,.25)}
.item:disabled{cursor:var(--cur-no)}
.item:disabled .ic{filter:saturate(.6) brightness(.8)}
.item .ic{width:80px;height:84px;object-fit:cover;border:1px solid rgba(140,190,250,.35);background:#0a1426}
.item .tx{display:grid;gap:4px;min-width:0;padding-top:4px}
.item b{font:600 15.5px "Oxanium",sans-serif;letter-spacing:.02em}
.item .eff{font-size:13px;line-height:1.4;color:#aab7cf}
.item .tier{font:500 13.5px "Oxanium",sans-serif;color:#5fc4ff}
.item .meta{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.item .pips{display:flex;gap:5px}
.item .pips i{width:11px;height:11px;border-radius:50%;border:1.5px solid #5d6a85}
.item .pips i.on{border-color:var(--j-or);background:var(--j-or);box-shadow:0 0 5px rgba(245,165,36,.6)}
.item .pr{font:500 16px "IBM Plex Mono",monospace;color:var(--j-or-hi)}
.item .pr.no{color:var(--j-red)}
.item .pr.max{color:#7ee05a;font-size:13px}
.item.maxed{opacity:.5}
@media (max-width:1000px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .shop{top:calc(50% + 26px);width:calc(100% - 44px)}
  .shop-in{padding:12px 12px 14px;max-height:calc(100vh - 150px)}
  .shop-head{gap:10px 12px}
  .shop-head h2{font-size:18px;letter-spacing:.08em;white-space:nowrap}
  .shop-head .cred{font-size:18px}
  .shop-close{height:36px;padding:0 12px}
  .shop-head svg.cart{width:28px;height:28px}
  .shop-grid{grid-template-columns:1fr}
  .item{grid-template-columns:64px minmax(0,1fr);gap:12px}
  .item .ic{width:64px;height:68px}
}

/* cartões por cima do jogo (menu, fim de partida, início do treino) com a moldura de HUD */
.overlay{padding:40px 44px;overflow:auto;place-items:normal;z-index:6}
/* a moldura sai para fora do cartão: quem rola é o fundo escuro, nunca o cartão */
.overlay .card{margin:auto;max-height:none;overflow:visible}
.overlay .card.has-frame{border:0;border-radius:0;background:linear-gradient(rgba(8,16,30,.96),rgba(5,10,20,.97))}
@media (max-width:640px){.overlay{padding:30px 32px}}

/* ---------- fim da partida ---------- */
.end{--res:#f5a524;--res-hi:#ffd27a;--res-glow:rgba(245,165,36,.45);max-width:600px;gap:18px;padding:26px 28px 24px;color:var(--j-ink)}
.end[data-res="loss"]{--res:#ff3b4f;--res-hi:#ff8a96;--res-glow:rgba(255,59,79,.45)}
.end[data-res="off"]{--res:#93a2bf;--res-hi:#d4dbea;--res-glow:rgba(147,162,191,.3)}
.end-head{display:grid;justify-items:center;gap:6px;text-align:center;padding-bottom:16px;border-bottom:1px solid var(--j-line);position:relative}
.end-head::after{content:"";position:absolute;left:50%;bottom:-1px;width:120px;height:2px;transform:translateX(-50%);background:var(--res);box-shadow:0 0 10px var(--res-glow)}
.end-eye{display:flex;align-items:center;gap:10px;font:600 11px "Oxanium",sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--j-mute)}
.end-eye::before,.end-eye::after{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--j-line))}
.end-eye::after{transform:scaleX(-1)}
.end .end-head h1{margin:0;font:900 clamp(34px,6vw,46px)/1 "Orbitron","Oxanium",sans-serif;letter-spacing:.12em;padding-left:.12em;text-transform:uppercase;
  background:linear-gradient(180deg,#fff 0%,var(--res-hi) 45%,var(--res) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px var(--res-glow))}
.end .end-head p{max-width:46ch;color:#b7c3da;font-size:14px}

.end .endstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.end .endstats div{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 12px;
  background:linear-gradient(180deg,rgba(14,28,52,.75),rgba(7,14,28,.75));border:1px solid rgba(63,178,255,.22);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.end .endstats div::before{content:"";position:absolute;left:8px;top:0;width:26px;height:2px;background:var(--j-ui);opacity:.7}
.end .endstats svg,.end .endstats .coin{grid-row:1 / 3;width:22px;height:22px;color:var(--j-ui)}
.end .endstats span{font:600 10.5px "Oxanium",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--j-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.end .endstats b{font:600 20px/1.15 "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:#fff}
.end .endstats .cr::before{background:var(--j-or)}
.end .endstats .cr b{color:var(--j-or-hi)}
.end .coin{display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd27a,#d98a10);color:#3a2204;font:800 13px/1 "Oxanium",sans-serif;font-style:normal}

.end .btn{border-radius:3px;font:600 13px "Oxanium",sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:0 18px;height:38px}
.end-act{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.end-act a.btn{display:inline-flex;align-items:center;text-decoration:none}
.end-act .btn.primary{height:46px;min-width:240px;font-size:14px;letter-spacing:.16em;background:linear-gradient(180deg,#ffc45a,#f5a524 60%,#d88a12);border:0;color:#1a1204;
  box-shadow:0 0 18px rgba(245,165,36,.35);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.end-act .btn.primary:hover{filter:brightness(1.08)}
@media (max-width:560px){
  .end{padding:20px 16px 18px;gap:14px}
  .end .endstats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .end .endstats div{grid-template-columns:minmax(0,1fr);padding:9px 10px}
  .end .endstats svg,.end .endstats .coin{display:none}
  .end .endstats span{font-size:10px;letter-spacing:.08em}
  .end .endstats b{font-size:17px}
  .end-act .btn.primary{width:100%;min-width:0}
}

/* ---------- definições: som e teclas ---------- */
.settings{position:absolute;left:50%;top:calc(50% + 30px);transform:translate(-50%,-50%);z-index:5;width:min(980px,calc(100% - 90px));cursor:var(--cur-default);color:var(--j-ink);
  background:linear-gradient(rgba(8,16,30,.96),rgba(5,10,20,.97))}
.settings[hidden]{display:none}
.set-in{max-height:calc(100vh - 190px);overflow:auto;padding:16px 24px 22px;scrollbar-color:rgba(63,178,255,.4) transparent}
.settings .shop-head svg.cart{color:var(--j-ui);filter:drop-shadow(0 0 6px rgba(63,178,255,.5))}
.set-cols{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10px 34px}
.set-sec .shop-cat{margin-top:18px}
.set-mute{display:flex;align-items:center;gap:10px;margin:10px 0 6px;font:500 14px "Oxanium",sans-serif;cursor:var(--cur-pointer)}
.set-mute input{width:18px;height:18px;accent-color:var(--j-or);cursor:var(--cur-pointer)}
.set-vol{display:grid;grid-template-columns:120px minmax(0,1fr) 46px;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(110,170,240,.12);font:500 14px "Oxanium",sans-serif}
.set-vol input{width:100%;accent-color:var(--j-or);cursor:var(--cur-pointer)}
.set-vol input:disabled{opacity:.4;cursor:var(--cur-no)}
.set-vol b{font:600 13px "IBM Plex Mono",monospace;color:var(--j-or-hi);text-align:right}
.set-reset{margin-left:auto;padding:5px 12px;background:transparent;border:1px solid var(--j-line);border-radius:3px;font:500 12px "Oxanium",sans-serif;letter-spacing:.04em;text-transform:none;color:var(--j-mute);cursor:var(--cur-pointer)}
.set-reset:hover{border-color:var(--j-or);color:var(--j-ink)}
.set-note{margin:6px 0 8px;font-size:13px;color:#b7c3da;min-height:1.3em}
.set-keys{display:grid;gap:4px}
.set-key{display:grid;grid-template-columns:minmax(0,1fr) 104px 104px;align-items:center;gap:8px;font:500 14px "Oxanium",sans-serif}
.set-key .kb{height:32px;padding:0 8px;background:rgba(5,11,22,.9);border:1px solid rgba(110,170,240,.3);border-radius:2px;font:600 13px "IBM Plex Mono",monospace;color:#fff;cursor:var(--cur-pointer);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-key .kb:hover{border-color:var(--j-or)}
.set-key .kb.empty{color:var(--j-mute);border-style:dashed}
.set-key .kb.wait{border-color:var(--j-or);color:var(--j-or-hi);animation:kbWait 1s ease-in-out infinite}
@keyframes kbWait{50%{box-shadow:0 0 12px rgba(245,165,36,.45)}}
.set-fixed{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:14px 0 0;padding-top:10px;border-top:1px solid rgba(110,170,240,.12);font-size:13px;color:var(--j-mute)}
.set-fixed dt{font:600 12px "IBM Plex Mono",monospace;color:#c8d3e6}
.set-fixed dd{margin:0}
.tb-b.b3 .x{display:none}
.tb-b.b3.muted .x{display:inline}
.tb-b.b3.muted .w{display:none}
.tb-b.b3.muted{color:#9aa7bf}
@media (max-width:820px){.set-cols{grid-template-columns:1fr}.set-key{grid-template-columns:minmax(0,1fr) 84px 84px}}