/* Instrument panel: beam toggle, charge, field of view, tallies
   ------------------------------------------------------------ */
.hud{
  position:sticky;top:22px;
  border:1px solid var(--film-edge);
  background:linear-gradient(180deg,#101c21,#0c1519);
  padding:16px 15px 18px;
}
.brand{font-family:var(--display);font-weight:800;font-size:23px;line-height:1;color:var(--bright);letter-spacing:.3px}
.brand span{color:var(--c-source)}
.tag{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:7px}
.rule{height:1px;background:var(--film-edge);margin:15px 0}

.lbl{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.lbl.row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lbl.row b{font-weight:700;color:var(--energy);letter-spacing:.06em}

.status{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.08em}
.dot{width:7px;height:7px;border-radius:50%;background:var(--dim);transition:background .18s,box-shadow .18s}
.live .dot{background:var(--c-source);box-shadow:0 0 10px var(--c-source)}
.dead .dot{background:var(--energy-low);box-shadow:0 0 10px var(--energy-low)}
.live .stxt{color:var(--c-source)}
.dead .stxt{color:var(--energy-low)}

.bar{height:9px;background:#0a1315;border:1px solid var(--film-edge);position:relative;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--energy);width:100%;transition:width .12s linear,background .3s}
.bar.low i{background:var(--energy-low)}
.barnum{display:flex;justify-content:space-between;font-size:9.5px;color:var(--dim);margin-top:5px}
.barnum.solo{display:block;letter-spacing:.04em}
.barnum.solo #pct{color:var(--bright);font-weight:700}
.barnum.solo #secs{color:var(--energy)}

input[type=range]{width:100%;accent-color:var(--c-source);margin:2px 0 0}

.beamBtn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:#111f24;border:1px solid var(--film-edge);color:var(--mid);
  font-family:var(--hud);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:10px;cursor:pointer;transition:border-color .18s,color .18s,background .18s;
}
.beamBtn:hover{border-color:var(--mid);color:var(--bright)}
.beamBtn:focus-visible{outline:1px solid var(--c-source);outline-offset:2px}
.beamBtn.on{border-color:var(--c-source);color:var(--c-source);background:rgba(88,199,224,.09)}
.beamBtn.on:hover{color:var(--bright)}
.beamBtn kbd{
  font-family:var(--hud);font-size:8.5px;border:1px solid currentColor;
  padding:0 3px;opacity:.55;letter-spacing:0;
}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.stat{border:1px solid var(--film-edge);padding:7px 8px}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:19px;color:var(--bright);line-height:1.1}
.stat i{font-style:normal;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

.legend{display:flex;flex-direction:column;gap:5px;font-size:10.5px}
.legend div{display:flex;align-items:center;gap:7px}
.sw{width:14px;height:2px;flex:none}

.note{font-size:10px;line-height:1.55;color:var(--dim)}

@media (max-width:840px){
  .hud{position:static}
}

/* spacing shims, replacing the inline heights the flat prototype used */
.spacer-s{height:9px}
.spacer-m{height:14px}
.stat .of{font-size:12px;color:var(--dim)}