/* IRONLINK — in-game HUD styles (command view, operator, deploy, common widgets). Loaded after styles.css. */

/* ================================================================================================ HUD */
.hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-ui); color: var(--text); --hud-pad: 1rem;
  /* operator HUD safe zone: on screens wider than 1.9:1 (21:9 ultrawide) the operator modules stay inside a centred
     1.9:1 frame instead of the far corners; --fps-m is the margin on each side (0 at 16:9 / 16:10) */
  --fps-m: calc((100vw - min(100vw, 190vh)) / 2); }
.hud .lyr { position: absolute; inset: 0; pointer-events: none; transition: opacity 200ms var(--ease); }
.hud[data-mode='rts'] .lyr.fps, .hud[data-mode='rts'] .lyr.deploy { opacity: 0; visibility: hidden; }
.hud[data-mode='fps'] .lyr.rts, .hud[data-mode='fps'] .lyr.deploy { opacity: 0; visibility: hidden; }
.hud[data-mode='deploy'] .lyr.rts, .hud[data-mode='deploy'] .lyr.fps { opacity: 0; visibility: hidden; }
.hud.gameover .lyr { opacity: 0; visibility: hidden; transition: opacity 600ms var(--ease), visibility 0s 600ms; }
.hud .pe { pointer-events: auto; }
.hud .lyr.fps { left: var(--fps-m); right: var(--fps-m); }
/* screen-space pieces of the operator layer keep the full viewport (they are positioned in canvas pixels / cover it) */
.lyr.fps > .scope, .lyr.fps > .linkfx, .lyr.fps .wm, .lyr.fps > .nametag, .lyr.fps > .gunret { position: fixed; }
.hp { --bg: var(--scan), linear-gradient(180deg, rgba(14, 23, 34, 0.84), rgba(6, 11, 18, 0.86)); --bc: rgba(150, 210, 255, 0.2); }
.hp::before { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hud-label { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.22em; color: var(--text-mute); text-transform: uppercase; }

/* --- Top bar (command view / deploy) */
.topbar { position: absolute; top: 0; left: 0; right: 0; height: 3.1rem; display: flex; align-items: stretch; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 8, 13, 0.94), rgba(5, 9, 15, 0.78)); border-bottom: 1px solid rgba(var(--team-rgb), 0.3); box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.4); }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--team-rgb), 0.9) 18%, rgba(var(--team-rgb), 0.9) 82%, transparent); opacity: 0.55; }
.topbar .tb-sec { display: flex; align-items: center; gap: 1.4rem; padding: 0 1.1rem; }
.topbar .tb-left { flex: 1; }
.topbar .tb-right { flex: 1; justify-content: flex-end; gap: 0.6rem; }
.topbar .faction { display: flex; align-items: center; gap: 0.55rem; padding-right: 1.2rem; margin-right: 0.1rem; border-right: 1px solid var(--line); height: 100%; color: var(--team); font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.22em; }
.topbar .faction .ico { width: 1.55rem; height: 1.55rem; filter: drop-shadow(0 0 0.4rem rgba(var(--team-rgb), 0.7)); }
.res { display: flex; align-items: center; gap: 0.5rem; pointer-events: auto; cursor: default; }
.res .ico { width: 1.4rem; height: 1.4rem; }
.res .v { font: 600 var(--fs-lg)/1 var(--font-mono); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.res .sub { padding: 0.16rem 0.35rem; font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--ok); background: rgba(var(--ok-rgb), 0.1); border: 1px solid rgba(var(--ok-rgb), 0.3); }
.res.crys .ico { color: var(--crystal); filter: drop-shadow(0 0 0.35rem rgba(111, 240, 255, 0.6)); }
.res.sup .ico { color: #c7d6e3; }
.res.sup .supw { display: flex; flex-direction: column; gap: 0.22rem; }
.res.sup .supv { display: flex; align-items: baseline; }
.res.sup .cap { color: var(--text-dim); font: 600 var(--fs-sm)/1 var(--font-mono); }
.res.sup .supbar { position: relative; width: 4.6rem; height: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.res.sup .supbar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: #c7d6e3; }
.res.sup.near .supbar i { background: var(--amber); }
.res.sup.near .v { color: var(--amber); }
.res.sup.blocked .v, .res.sup.blocked .ico { color: var(--bad); animation: blink 0.9s infinite; }
.res.sup.blocked .supbar i { background: var(--bad); }
.res.sup .warn { display: none; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; color: #fff; padding: 0.24rem 0.42rem; background: rgba(var(--bad-rgb), 0.75); text-transform: uppercase; }
.res.sup.blocked .warn { display: inline-block; }
.res.flash .v { animation: resFlash 0.6s; }
@keyframes resFlash { 0%, 100% { color: inherit; } 30% { color: var(--bad); text-shadow: 0 0 0.6rem var(--bad); } }
.tb-center { position: relative; display: flex; align-items: center; gap: 1rem; padding: 0 1rem; }
.tb-notch { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); padding: 0.28rem 1.1rem 0.32rem; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 9, 15, 0.92), rgba(5, 9, 15, 0.8)); clip-path: polygon(0 0, 100% 0, calc(100% - 0.7rem) 100%, 0.7rem 100%); border-top: 1px solid rgba(var(--team-rgb), 0.4); }
.clock { display: flex; align-items: center; gap: 0.4rem; font: 600 var(--fs-md)/1 var(--font-mono); color: var(--text); }
.clock .ico { width: 1rem; height: 1rem; color: var(--text-dim); }
.cps { display: flex; align-items: center; gap: 0.55rem; }
.cps-list { display: flex; gap: 0.4rem; }
.cps-n { min-width: 1.6rem; text-align: center; font: 700 var(--fs-lg)/1 var(--font-display); }
.cps-n.mine { color: var(--team); text-shadow: 0 0 0.6rem rgba(var(--team-rgb), 0.6); }
.cps-n.theirs { color: var(--enemy); text-shadow: 0 0 0.6rem rgba(var(--enemy-rgb), 0.6); }
.cp { position: relative; width: 2.15rem; height: 2.15rem; display: grid; place-items: center; font: 700 var(--fs-md)/1 var(--font-display); color: var(--cpc, var(--neutral)); --cpc-rgb: 216, 210, 192; }
.cp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cp svg .bgp { fill: rgba(4, 8, 13, 0.62); stroke: rgba(var(--cpc-rgb), 0.85); stroke-width: 1.6; }
.cp svg .bgp2 { fill: rgba(var(--cpc-rgb), 0.18); }
.cp svg .prog { fill: none; stroke: var(--capc, #fff); stroke-width: 2.6; stroke-dasharray: 0 100; }
.cp span { position: relative; text-shadow: 0 0 0.4rem rgba(var(--cpc-rgb), 0.7); }
.cp.contested span { animation: blink 0.6s infinite; }
.topbar .cp { pointer-events: auto; cursor: default; }
.modesw { display: flex; pointer-events: auto; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.3); }
.modesw button { display: flex; align-items: center; gap: 0.45rem; height: 2.15rem; padding: 0 0.9rem; border: 0; background: none; color: var(--text-dim); font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; transition: background var(--t), color var(--t); }
.modesw button .ico { width: 1.1rem; height: 1.1rem; }
.modesw button:hover { color: #fff; background: rgba(var(--team-rgb), 0.12); }
.modesw button.on { color: #031019; background: linear-gradient(180deg, rgba(var(--team-rgb), 1), rgba(var(--team-rgb), 0.75)); }
.modesw button .kbd { height: 1.35em; min-width: 1.35em; font-size: var(--fs-2xs); background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.25); color: inherit; }
.tb-btn { pointer-events: auto; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.3); color: var(--text-2); transition: background var(--t), color var(--t), border-color var(--t); }
.tb-btn:hover { color: #fff; border-color: rgba(var(--team-rgb), 0.7); background: rgba(var(--team-rgb), 0.15); }
.tb-btn .ico { width: 1.2rem; height: 1.2rem; }

/* --- Minimap */
.minimap { position: absolute; left: var(--cs-in); bottom: var(--cs-in); width: var(--cs-mm); height: calc(var(--cs-mm) + var(--cs-head)); padding: var(--cs-head) 0 0; pointer-events: auto; }
.minimap::before, .minimap::after { display: none; }
.minimap canvas { display: block; width: 100%; height: 100%; cursor: crosshair; background: #05090e; box-shadow: 0 0 0 1px rgba(150, 210, 255, 0.16), 0 0 0 2px rgba(0, 0, 0, 0.55); clip-path: polygon(0.7rem 0, 100% 0, 100% calc(100% - 0.7rem), calc(100% - 0.7rem) 100%, 0 100%, 0 0.7rem); }
.minimap .mm-vig { position: absolute; left: 0; right: 0; bottom: 0; top: var(--cs-head); pointer-events: none; z-index: 1; box-shadow: inset 0 0 1.6rem rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(150, 210, 255, 0.12);
  clip-path: polygon(0.7rem 0, 100% 0, 100% calc(100% - 0.7rem), calc(100% - 0.7rem) 100%, 0 100%, 0 0.7rem); }
.minimap .mm-vig::before { content: ''; position: absolute; left: 0.45rem; top: 0.45rem; width: 0.9rem; height: 0.9rem; border-left: 2px solid rgba(var(--team-rgb), 0.85); border-top: 2px solid rgba(var(--team-rgb), 0.85); }
.minimap .mm-vig::after { content: ''; position: absolute; right: 0.45rem; bottom: 0.45rem; width: 0.9rem; height: 0.9rem; border-right: 2px solid rgba(var(--team-rgb), 0.85); border-bottom: 2px solid rgba(var(--team-rgb), 0.85); }
.minimap .mm-label { position: absolute; left: 0.1rem; right: 0.1rem; top: 0; height: var(--cs-head); display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; pointer-events: none; }
.minimap .mm-label .mapn { display: inline-flex; align-items: center; gap: 0.45rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.28em; color: var(--text-2); text-transform: uppercase; }
.minimap .mm-label .mapn::before { content: ''; width: 0.38rem; height: 0.38rem; background: var(--team); transform: rotate(45deg); box-shadow: 0 0 0.45rem rgba(var(--team-rgb), 0.9); }
.minimap .mm-label .mmc { font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--text-mute); letter-spacing: 0.06em; }
.minimap.alerting canvas { box-shadow: 0 0 0 1px rgba(var(--bad-rgb), 0.95), 0 0 0.9rem rgba(var(--bad-rgb), 0.55); }
.radar { position: absolute; left: var(--hud-pad); top: var(--hud-pad); width: 13.5rem; height: 13.5rem; border-radius: 50%; padding: 0.35rem; background: rgba(4, 8, 13, 0.6); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0.4rem 1.4rem rgba(0, 0, 0, 0.35); }
.radar canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.radar .rad-ring { position: absolute; inset: 0; pointer-events: none; }
.radar .rad-ring svg { width: 100%; height: 100%; overflow: visible; }
.radar .rad-ring circle { fill: none; stroke: rgba(var(--team-rgb), 0.55); stroke-width: 0.8; }
.radar .rad-ring path { stroke: rgba(220, 240, 255, 0.35); stroke-width: 0.6; }
.radar .rad-ring path.mj { stroke: rgba(220, 240, 255, 0.75); stroke-width: 0.9; }
.radar .rad-ring .fwd { fill: var(--amber); stroke: none; }
.radar .rad-sweep { position: absolute; inset: 0.35rem; border-radius: 50%; pointer-events: none; opacity: 0.55;
  background: conic-gradient(from 0deg, rgba(var(--team-rgb), 0.22), rgba(var(--team-rgb), 0) 18%, transparent 100%); animation: radSweep 4.5s linear infinite; }
@keyframes radSweep { to { transform: rotate(360deg); } }
.radar .rad-range { position: absolute; right: -0.2rem; bottom: 0.5rem; padding: 0.12rem 0.3rem; font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--text-2); background: rgba(4, 8, 13, 0.75); border: 1px solid rgba(255, 255, 255, 0.12); }
.radar .rose { position: absolute; inset: -0.95rem; pointer-events: none; }
.radar .rose span { position: absolute; left: 50%; top: 50%; font: 700 var(--fs-2xs)/1 var(--font-ui); color: var(--text-dim); letter-spacing: 0.1em; }
.radar .rose span.n { color: var(--amber); }

/* --- Command console: one armoured backplate (console.js SVG) housing minimap · selection screen · command card.
   Housing sizes come from console.js (--cs-* on the HUD root). Panels inside are inset "screens". */
.cs-plate { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; display: block; pointer-events: none; overflow: visible; }
.cs-plate .pl { pointer-events: visiblePainted; }
.cs-plate .sd { fill: none; stroke: rgba(0, 0, 0, 0.7); stroke-width: 4; transform: translateY(-1px); }
.cs-plate .gl { fill: none; stroke: rgba(var(--team-rgb), 0.28); stroke-width: 7; filter: blur(3px); }
.cs-plate .tr { fill: none; stroke: rgba(var(--team-rgb), 0.95); stroke-width: 1.6; stroke-linejoin: miter; }
.cs-plate .in { fill: none; stroke: rgba(190, 225, 255, 0.075); stroke-width: 1; }
.cs-plate .eb { fill: none; stroke: rgba(130, 180, 225, 0.075); stroke-linejoin: miter; }
.cs-plate .sh { pointer-events: none; }
.cs-plate .ht { pointer-events: none; }
.cs-plate .vt { stroke: rgba(var(--team-rgb), 0.38); stroke-width: 2; stroke-linecap: round; }
.cs-plate .sm { stroke: rgba(0, 0, 0, 0.55); stroke-width: 1; }
.cs-plate .rv { fill: rgba(170, 210, 240, 0.22); stroke: rgba(0, 0, 0, 0.6); stroke-width: 0.8; }
.cs-plate .ks { stroke: rgba(var(--team-rgb), 0.7); stroke-width: 2; stroke-linecap: square; }
.cs-probe { position: absolute; left: -100rem; top: 0; width: 10rem; height: 1px; visibility: hidden; pointer-events: none; }
.lyr.rts .hp { --bc: rgba(150, 210, 255, 0.16); --bg: linear-gradient(180deg, rgba(5, 10, 16, 0.9), rgba(3, 6, 11, 0.94)); }
.lyr.rts .hp::before { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--bc), inset 0 0.6rem 1.4rem rgba(0, 0, 0, 0.45); }
.lyr.rts .hp::after { content: ''; position: absolute; left: var(--cut-a, var(--cut)); right: 0; top: 0; height: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, rgba(var(--team-rgb), 0.7), rgba(var(--team-rgb), 0.12) 55%, transparent); }

/* --- Selection panel */
.selpanel { position: absolute; left: var(--cs-sl, calc(var(--cs-lw) + var(--cs-run) + 0.5rem)); width: var(--cs-sw, 60rem); bottom: var(--cs-in); height: calc(var(--cs-mh) - var(--cs-in) * 2 - 0.15rem); pointer-events: auto; display: flex; }
.selpanel .pic { display: grid; place-items: center; }
.selpanel .pimg { display: none; }
.selpanel .has-img > .pimg { display: block; }
.selpanel .has-img > .pic { display: none; }

/* overview (no selection) */
.selpanel.overview { gap: 0; }
.ov-left { width: 15.5rem; flex: none; display: flex; flex-direction: column; gap: 0.32rem; padding: 0.75rem 0.7rem 0.7rem 0.85rem; border-right: 1px solid var(--line); }
.ov-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.26em; color: var(--text-dim); text-transform: uppercase; }
.ov-head .ico { width: 1.15rem; height: 1.15rem; color: var(--team); }
.ov-tile { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.3rem 0.55rem; text-align: left; color: var(--text); border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); transition: border-color var(--t), background var(--t); }
button.ov-tile:hover { border-color: rgba(var(--team-rgb), 0.75); background: linear-gradient(90deg, rgba(var(--team-rgb), 0.2), rgba(var(--team-rgb), 0.03)); }
.ov-tile > .ico-wrap .ico { width: 1.45rem; height: 1.45rem; color: var(--text-2); }
.ov-t { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 0.4rem; }
.ov-l { grid-column: 1 / -1; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.2em; color: var(--text-mute); text-transform: uppercase; margin-bottom: 0.2rem; }
.ov-t b { font: 700 var(--fs-lg)/1 var(--font-mono); color: #fff; }
.ov-t small { justify-self: end; font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--text-dim); }
.ov-tile .kbd { height: 1.5em; min-width: 1.9em; font-size: var(--fs-2xs); }
.ov-tile.idle.warn { border-color: rgba(var(--amber-rgb), 0.55); background: linear-gradient(90deg, rgba(var(--amber-rgb), 0.16), rgba(var(--amber-rgb), 0.02)); }
.ov-tile.idle.warn > .ico-wrap .ico, .ov-tile.idle.warn b { color: var(--amber); }
.ov-tile.ops > .ico-wrap .ico { color: #ffcf7a; }
.ov-right { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0.75rem 0.85rem 0.65rem; }
.ov-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.45rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.24em; color: var(--text-dim); text-transform: uppercase; }
.ov-h .ov-hint { letter-spacing: 0.14em; color: var(--text-mute); }
.ov-prod { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 2.45rem; gap: 0.3rem; overflow: hidden; align-content: start; }
.ov-empty { grid-column: 1 / -1; padding: 0.6rem 0.2rem; font: 500 var(--fs-xs)/1.45 var(--font-body); color: var(--text-mute); }
.ov-row { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.45rem 0 0.35rem; min-width: 0; text-align: left; color: var(--text); border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.035); transition: border-color var(--t), background var(--t); }
.ov-row:hover { border-color: rgba(var(--team-rgb), 0.75); background: rgba(var(--team-rgb), 0.12); }
.ov-row .pi { flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; color: var(--team); }
.ov-row .pi .ico { width: 1.35rem; height: 1.35rem; }
.ov-row .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.28rem; }
.ov-row .tp { display: flex; align-items: baseline; gap: 0.35rem; min-width: 0; }
.ov-row .lb { flex: 1; min-width: 0; font: 700 var(--fs-2xs)/1.1 var(--font-ui); letter-spacing: 0.08em; color: var(--text-2); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-row .ct { font: 700 var(--fs-2xs)/1 var(--font-mono); color: var(--team); }
.ov-row .tm { font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--text-2); }
.ov-row .br { position: relative; height: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ov-row .br i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--team); box-shadow: 0 0 0.35rem rgba(var(--team-rgb), 0.8); }
.ov-row .it { flex: none; display: grid; place-items: center; width: 1.55rem; height: 1.55rem; color: #fff; }
.ov-row .it .ico { width: 1.25rem; height: 1.25rem; }
.ov-row.idle { opacity: 0.62; }
.ov-row.idle .lb { color: var(--text-mute); }
.ov-row.research .br i { background: var(--ok); box-shadow: 0 0 0.35rem rgba(var(--ok-rgb), 0.8); }
.ov-row.blocked { border-color: rgba(var(--bad-rgb), 0.6); }
.ov-row.blocked .br i { background: var(--bad); }
.ov-row.blocked .tm { color: #ffb3b9; font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.08em; }
.ov-upg { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.45rem; min-height: 1.6rem; }
.ov-side { width: 17rem; flex: none; display: flex; flex-direction: column; padding: 0.75rem 0.85rem 0.65rem; border-left: 1px solid var(--line); }
.ov-forces { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 2.6rem; gap: 0.28rem; align-content: start; }
.ov-forces .ov-empty { grid-column: 1 / -1; }
.ov-fc { display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0; color: var(--team); border: 1px solid rgba(var(--team-rgb), 0.22); background: radial-gradient(circle at 50% 30%, rgba(var(--team-rgb), 0.16), rgba(4, 8, 13, 0.6) 75%); transition: border-color var(--t), background var(--t); }
.ov-fc:hover { border-color: rgba(var(--team-rgb), 0.85); background: rgba(var(--team-rgb), 0.18); }
.ov-fc .ico { width: 1.35rem; height: 1.35rem; }
.ov-fc b { font: 700 var(--fs-sm)/1 var(--font-mono); color: #fff; }
.ov-econ { display: flex; justify-content: space-between; gap: 0.4rem; margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid var(--line); pointer-events: auto; }
.ov-econ > span { display: flex; flex-direction: column; align-items: flex-start; gap: 0.22rem; min-width: 0; }
.ov-econ .ico-wrap { display: none; }
.ov-econ small { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; color: var(--text-mute); text-transform: uppercase; }
.ov-econ b { font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--ok); }
.ov-econ > span:last-child b { color: var(--text); }
@container (max-width: 54rem) { .ov-side { display: none; } }
.ov-upg .hud-label { margin-right: 0.3rem; }
.up-ic { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; color: var(--ok); background: rgba(var(--ok-rgb), 0.1); border: 1px solid rgba(var(--ok-rgb), 0.35); pointer-events: auto; }
.up-ic .ico { width: 1.05rem; height: 1.05rem; }

/* single selection */
.selpanel { container-type: inline-size; }
.sel-single { flex: 1; display: grid; grid-template-columns: 10.4rem minmax(0, 1fr) minmax(15rem, 21rem); gap: 1rem; padding: 0.75rem 1rem 0.75rem 0.75rem; min-width: 0; }
.sel-side { min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; padding-left: 1rem; border-left: 1px solid var(--line); }
.sel-side.hidden { display: none !important; }
.ss-h { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.24em; color: var(--text-dim); text-transform: uppercase; white-space: nowrap; }
.ss-h .sq-rally { min-width: 0; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.1em; color: var(--text-mute); }
@container (max-width: 46rem) { .sel-single { grid-template-columns: 8.6rem minmax(0, 1fr) minmax(13rem, 15rem); gap: 0.8rem; } }
.sel-portrait { position: relative; width: 10.4rem; flex: none; overflow: hidden; color: var(--pc, var(--team)); border: 1px solid rgba(var(--pc-rgb, var(--team-rgb)), 0.4);
  background: radial-gradient(120% 90% at 50% 38%, rgba(var(--pc-rgb, var(--team-rgb)), 0.3), rgba(4, 8, 13, 0.9) 72%), linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent); }
.sel-portrait::after { content: ''; position: absolute; inset: 0; background: var(--scan), linear-gradient(0deg, rgba(0, 0, 0, 0.45), transparent 40%); pointer-events: none; }
.sel-portrait .pic { position: absolute; inset: 0; }
.sel-portrait .pic .ico { width: 4.6rem; height: 4.6rem; filter: drop-shadow(0 0 0.7rem rgba(var(--pc-rgb, var(--team-rgb)), 0.6)); }
.sel-portrait .pimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: portraitIn 420ms var(--ease-out) both; }
@keyframes portraitIn { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: scale(1.06); } }
.sel-portrait .pcorner { position: absolute; right: 0.35rem; top: 0.35rem; width: 0.8rem; height: 0.8rem; border-top: 2px solid rgba(var(--pc-rgb, var(--team-rgb)), 0.9); border-right: 2px solid rgba(var(--pc-rgb, var(--team-rgb)), 0.9); z-index: 1; }
.sel-portrait .lk { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.28rem; text-align: center; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; background: rgba(255, 207, 122, 0.9); color: #1b1100; text-transform: uppercase; z-index: 2; }
.sel-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.42rem; overflow: hidden; }
.sel-info > * { flex: none; }
.sel-info .nm { display: flex; align-items: baseline; gap: 0.7rem; }
.sel-info .nm b { font: 700 var(--fs-xl)/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-info .nm small { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.22em; color: var(--text-mute); text-transform: uppercase; white-space: nowrap; }
.sel-hp { display: flex; align-items: center; gap: 0.7rem; }
.sel-hp .bar { flex: 1; max-width: 30rem; height: 0.62rem; background: rgba(255, 255, 255, 0.08); }
.sel-hp .bar .segs { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(4, 8, 13, 0.85) calc(10% - 2px) 10%); pointer-events: none; }
.sel-hp .num { font: 600 var(--fs-sm)/1 var(--font-mono); color: var(--text-2); min-width: 7.5rem; text-align: right; }
.sel-action { font: 600 var(--fs-sm)/1.2 var(--font-ui); letter-spacing: 0.1em; color: var(--text-2); text-transform: uppercase; display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-action .dotx { flex: none; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0.4rem var(--accent); }
.sel-stats { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: auto; }
.sel-stats .chip { display: inline-flex; align-items: center; gap: 0.35rem; height: 1.7rem; padding: 0 0.5rem 0 0.4rem; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07); }
.sel-stats .chip .ico { width: 0.95rem; height: 0.95rem; color: var(--text-dim); }
.sel-stats .chip small { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; color: var(--text-mute); text-transform: uppercase; }
.sel-stats .chip b { font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--text); }
.sel-action.warn { color: var(--amber); }
.sel-action.warn .dotx { background: var(--amber); box-shadow: 0 0 0.4rem var(--amber); }
/* weapon readout + effectiveness bars */
.sel-wpn { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.sw-h { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.sw-h .ico { width: 1.05rem; height: 1.05rem; color: var(--team); }
.sw-h b { font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-h small { margin-left: auto; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; color: var(--text-mute); text-transform: uppercase; white-space: nowrap; }
.sw-st { display: flex; gap: 0.9rem; }
.sw-st span { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.sw-st small { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.18em; color: var(--text-mute); }
.sw-st b { font: 600 var(--fs-sm)/1 var(--font-mono); color: var(--text); }
.sw-vs { display: grid; grid-template-columns: 1fr; gap: 0.22rem; }
.sw-r { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) 2.6rem; align-items: center; gap: 0.5rem; }
.sw-l { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase; }
.sw-b { position: relative; height: 0.32rem; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.sw-b i { position: absolute; inset: 0; transform-origin: 0 50%; background: rgba(200, 225, 245, 0.75); }
.sw-v { font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--text-2); text-align: right; }
.sw-r.good .sw-b i { background: var(--ok); box-shadow: 0 0 0.35rem rgba(var(--ok-rgb), 0.7); }
.sw-r.good .sw-v, .sw-r.good .sw-l { color: var(--ok); }
.sw-r.weak .sw-b i { background: #ff7d86; }
.sw-r.weak .sw-v { color: #ff8a92; }
/* resource / capture gauge */
.sel-gauge { display: flex; align-items: center; gap: 0.7rem; }
.sel-gauge .gb { position: relative; flex: 1; height: 0.62rem; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.sel-gauge .gb i { position: absolute; inset: 0; transform-origin: 0 50%; background: var(--crystal); box-shadow: 0 0 0.5rem rgba(111, 240, 255, 0.6); }
.sel-gauge b { font: 600 var(--fs-sm)/1 var(--font-mono); color: var(--text-2); }
.sel-gauge.build .gb i { background: var(--amber); box-shadow: 0 0 0.5rem rgba(var(--amber-rgb), 0.6); }
.sel-build { display: flex; flex-direction: column; gap: 0.45rem; }
.sel-build .sb-sub { letter-spacing: 0.1em; color: var(--text-mute); }
.sel-side > .cs-off { display: none !important; }
.sel-eff { flex-basis: 100%; display: flex; gap: 1rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; }
.sel-eff span { display: inline-flex; align-items: center; gap: 0.3rem; }
.sel-eff .ico { width: 0.95rem; height: 0.95rem; }
.sel-eff .good { color: var(--ok); } .sel-eff .bad { color: #ff8a92; }
.sel-queue { display: flex; gap: 0.35rem; align-items: flex-end; flex-wrap: wrap; }
.sel-queue .sq-empty { padding: 0.5rem 0; line-height: 1.5; letter-spacing: 0.16em; }
.sel-side .sel-upgrades { margin-top: auto; }
.sel-upgrades { display: flex; align-items: center; gap: 0.3rem; flex-basis: 100%; }
.q-item { position: relative; width: 3.1rem; height: 3.1rem; display: grid; place-items: center; color: var(--text-2); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); cursor: pointer; overflow: hidden; }
.q-item .ico { width: 1.7rem; height: 1.7rem; position: relative; z-index: 1; }
.q-item.first { width: 4.1rem; height: 4.1rem; color: #fff; border-color: rgba(var(--team-rgb), 0.65); box-shadow: 0 0 0.8rem -0.2rem rgba(var(--team-rgb), 0.6); }
.q-item.first .ico { width: 2.1rem; height: 2.1rem; }
.q-item .fill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(0deg, rgba(var(--team-rgb), 0.5), rgba(var(--team-rgb), 0.12)); transform-origin: 50% 100%; transform: scaleY(0); }
.q-item .t { position: absolute; right: 0.2rem; bottom: 0.15rem; z-index: 1; font: 600 var(--fs-2xs)/1 var(--font-mono); color: #fff; text-shadow: 0 1px 2px #000; }
.q-item:hover { border-color: rgba(var(--bad-rgb), 0.8); }
.q-item:hover::after { content: ''; position: absolute; inset: 0; z-index: 2; background: rgba(var(--bad-rgb), 0.35) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'><path d='M7 7l10 10M17 7L7 17'/></svg>") center / 55% no-repeat; }
.q-item .qpt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.6) translateY(15%); display: none; pointer-events: none; }
.q-item.has-pt .qpt { display: block; }
.q-item.has-pt > svg.ico { display: none; }
.q-item.has-pt .fill { mix-blend-mode: screen; opacity: 0.85; }
.q-item.has-pt::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(3, 7, 12, 0.8), transparent 50%); }
.q-slot { width: 3.1rem; height: 3.1rem; border: 1px dashed rgba(255, 255, 255, 0.1); }
.q-slot > * { display: none; }
.q-item.blocked { border-color: rgba(var(--bad-rgb), 0.8); }
.q-item.blocked .fill { background: linear-gradient(0deg, rgba(var(--bad-rgb), 0.45), rgba(var(--bad-rgb), 0.12)); }
.q-item.blocked .t { color: #ffb3b9; font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.08em; }

/* multi selection */
.sel-multi { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem 0.8rem; min-width: 0; }
.sel-mtop { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.sel-mhead { flex: none; display: flex; flex-direction: column; gap: 0.2rem; padding-right: 0.8rem; border-right: 1px solid var(--line); }
.sel-mhead b { font: 700 var(--fs-md)/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.sel-mhead span { font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--text-dim); }
.sel-chips { flex: 1; display: flex; gap: 0.35rem; flex-wrap: wrap; min-width: 0; }
.sel-total { flex: none; display: flex; align-items: center; gap: 0.5rem; }
.sel-total small { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; color: var(--text-mute); text-transform: uppercase; white-space: nowrap; }
.sel-total .bar { width: 7rem; height: 0.42rem; }
.sel-total .mono { font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--text-2); min-width: 2.6rem; text-align: right; }
@container (max-width: 52rem) { .sel-total small { display: none; } }
.sel-chip { display: inline-flex; align-items: center; gap: 0.35rem; height: 1.75rem; padding: 0 0.5rem; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); color: var(--text-2); font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.sel-chip .ico { width: 1rem; height: 1rem; }
.sel-chip b { font: 600 var(--fs-xs)/1 var(--font-mono); color: #fff; }
.sel-chip:hover { border-color: rgba(var(--team-rgb), 0.8); color: #fff; background: rgba(var(--team-rgb), 0.12); }
.sel-mbody { flex: 1; min-height: 0; display: flex; gap: 1rem; }
.sel-grid { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; gap: 0.28rem; overflow: hidden; align-content: flex-start; }
.sel-fire { width: 17.5rem; flex: none; display: flex; flex-direction: column; gap: 0.42rem; padding-left: 1rem; border-left: 1px solid var(--line); }
.sel-fire .ss-h .dim { letter-spacing: 0.12em; color: var(--text-mute); }
.sel-fire .sw-v { font-size: var(--fs-2xs); }
.sf-foot { display: flex; justify-content: space-between; gap: 0.8rem; margin-top: auto; padding-top: 0.4rem; border-top: 1px solid var(--line); }
.sf-foot > span { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; }
.sf-foot small { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; color: var(--text-mute); text-transform: uppercase; }
.sf-foot b { font: 600 var(--fs-xs)/1.1 var(--font-ui); letter-spacing: 0.06em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-foot b.mono { font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: 0; }
@container (max-width: 50rem) { .sel-fire { width: 13.5rem; } .sel-fire .sw-r { grid-template-columns: 4.4rem minmax(0, 1fr) 2.2rem; } }
.sel-grid > * { width: var(--cell, 3.3rem); height: var(--cell, 3.3rem); flex: none; }
.sel-grid.some > * { width: var(--cell, 3.9rem); height: var(--cell, 3.9rem); }
.sel-grid.few > * { width: var(--cell, 5rem); height: var(--cell, 5rem); }
.sel-grid.big .sel-cell .pic .ico, .sel-grid.few:not([style]) .sel-cell .pic .ico { width: 2.4rem; height: 2.4rem; }
.sel-grid.big .sel-cell i, .sel-grid.few:not([style]) .sel-cell i { height: 4px; }
.sel-cell.brk { margin-left: 0.55rem; }
.sel-cell { position: relative; overflow: hidden; color: var(--team); background: radial-gradient(circle at 50% 35%, rgba(var(--team-rgb), 0.22), rgba(4, 8, 13, 0.85) 75%); border: 1px solid rgba(var(--team-rgb), 0.3); padding: 0; cursor: pointer; transition: border-color var(--t), filter var(--t); }
.sel-cell .pic { position: absolute; inset: 0; }
.sel-cell .pic .ico { width: 1.7rem; height: 1.7rem; margin-bottom: 0.25rem; }
.sel-cell .pimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2) translateY(3%); }
.sel-cell.inf .pimg { transform: scale(1.85) translateY(17%); }
.sel-cell i { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 3px; background: rgba(0, 0, 0, 0.65); z-index: 1; }
.sel-cell i em { position: absolute; inset: 0; transform-origin: 0 50%; background: var(--ok); }
.sel-cell.lo i em { background: var(--bad); }
.sel-cell.mid i em { background: var(--amber); }
.sel-cell.linked { border-color: rgba(255, 207, 122, 0.85); }
.sel-cell.linked::after { content: ''; position: absolute; right: 2px; top: 2px; width: 0.45rem; height: 0.45rem; background: #ffcf7a; transform: rotate(45deg); }
.sel-cell:hover { border-color: rgba(var(--team-rgb), 0.9); filter: brightness(1.2); }
.sel-cell.more { display: grid; place-items: center; color: var(--text-dim); font: 600 var(--fs-xs)/1 var(--font-mono); cursor: default; background: rgba(255, 255, 255, 0.04); }

/* --- Command card */
.cmdcard { position: absolute; right: var(--cs-in); bottom: var(--cs-in); padding: 0; pointer-events: auto; }
.cmdcard::before, .cmdcard::after { display: none; }
.cmdgrid { display: grid; grid-template-columns: repeat(5, var(--cs-cell)); grid-template-rows: repeat(3, var(--cs-cell)); gap: var(--cs-gap); }
.cmdbtn { position: relative; display: grid; place-items: center; padding: 0; border: 1px solid rgba(150, 210, 255, 0.22); color: var(--text); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015) 55%), radial-gradient(circle at 50% 30%, rgba(var(--team-rgb), 0.1), transparent 70%), rgba(9, 16, 25, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); transition: border-color var(--t), background var(--t), transform 80ms; }
.cmdbtn .ico { width: 2.15rem; height: 2.15rem; position: relative; z-index: 1; transition: transform var(--t) var(--ease); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8)); }
.cmdbtn .hk { position: absolute; left: 0.22rem; top: 0.2rem; z-index: 2; min-width: 0.95rem; padding: 0.08rem 0.18rem; font: 700 var(--fs-2xs)/1 var(--font-mono); color: #1d1300; background: rgba(var(--amber-rgb), 0.92); }
.cmdbtn .cost { position: absolute; right: 0.22rem; bottom: 0.18rem; z-index: 2; font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--crystal); text-shadow: 0 1px 2px #000; }
.cmdbtn .cnt { position: absolute; right: 0.2rem; top: 0.2rem; z-index: 2; min-width: 1.1rem; height: 1.1rem; padding: 0 0.2rem; display: grid; place-items: center; font: 700 var(--fs-2xs)/1 var(--font-mono); color: #031019; background: var(--team); }
.cmdbtn .sweep { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: conic-gradient(rgba(0, 0, 0, 0.62) var(--p, 0turn), transparent 0); }
.cmdbtn .pfill { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: var(--team); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 0.4rem var(--team); }
.cmdbtn:hover:not(.dis) { border-color: rgba(var(--team-rgb), 0.9); background: linear-gradient(180deg, rgba(var(--team-rgb), 0.32), rgba(var(--team-rgb), 0.06)), rgba(10, 18, 28, 0.86); }
.cmdbtn:hover:not(.dis) .ico { transform: scale(1.08); }
.cmdbtn:active:not(.dis) { transform: scale(0.96); }
.cmdbtn.dis { color: rgba(255, 255, 255, 0.3); cursor: default; background: rgba(8, 13, 20, 0.86); }
.cmdbtn.dis .hk { background: rgba(var(--amber-rgb), 0.35); }
.cmdbtn.dis.afford .cost { color: #ff7d86; }
.cmdbtn.active { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber), inset 0 0 1rem rgba(var(--amber-rgb), 0.35); color: #ffe0ae; }
.cmdbtn.empty { pointer-events: none; background: rgba(4, 8, 13, 0.28); border-color: rgba(150, 210, 255, 0.05); box-shadow: none; }
.cmdbtn.empty > * { display: none; }
.cmdbtn.req::after, .cmdbtn.done::after { content: ''; position: absolute; right: 0.2rem; top: 0.2rem; z-index: 3; width: 0.95rem; height: 0.95rem; opacity: 0.85;
  background: center / contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a92' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='10.4' width='14' height='10.2' rx='1.6'/><path d='M8 10.4V7.6a4 4 0 0 1 8 0v2.8'/></svg>"); }
.cmdbtn.done::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346e6a0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4.4 12.6l5 5 10.2-11'/></svg>"); }
.cmdbtn.done { color: rgba(70, 230, 160, 0.55); }
/* rendered model portraits on the train buttons (structures keep their icons: see commandcard.js portraitKey) */
.cmdbtn .pt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; pointer-events: none; transition: filter var(--t), transform var(--t) var(--ease); }
.cmdbtn.has-pt .pt { display: block; animation: ptIn 260ms var(--ease-out) both; }
@keyframes ptIn { from { opacity: 0; } to { opacity: 1; } }
.cmdbtn.has-pt > .ico-wrap { display: none; }
.cmdbtn.pt-inf .pt { transform: scale(1.6) translateY(15%); }
.cmdbtn.pt-veh .pt { transform: scale(1.12) translateY(2%); }
.cmdbtn.pt-bld .pt { transform: scale(1.02); }
.cmdbtn.has-pt::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(3, 7, 12, 0.85), rgba(3, 7, 12, 0) 42%), radial-gradient(120% 90% at 50% 30%, rgba(var(--team-rgb), 0.16), transparent 70%); }
.cmdbtn.has-pt:hover:not(.dis) .pt { filter: brightness(1.18); }
.cmdbtn.pt-inf.has-pt:hover:not(.dis) .pt { transform: scale(1.68) translateY(15%); }
.cmdbtn.pt-veh.has-pt:hover:not(.dis) .pt, .cmdbtn.pt-bld.has-pt:hover:not(.dis) .pt { transform: scale(1.18); }
.cmdbtn.has-pt.dis .pt { filter: saturate(0.5) brightness(0.62); }
.cmdbtn.has-pt.dis.afford .pt { filter: saturate(0.45) brightness(0.55) sepia(0.35) hue-rotate(-28deg); }
.cmdbtn.has-pt.req .pt { filter: grayscale(1) brightness(0.36); }
/* a portrait shows its training progress on the bottom bar only (the conic sweep would black it out) */
.cmdbtn.has-pt .sweep { display: none; }
.cmdbtn.has-pt .pfill { height: 4px; }
.cmdbtn.has-pt.active .pt { filter: brightness(1.2) saturate(1.2); }
.cmdbtn.flash { animation: cmdFlash 0.25s; }
@keyframes cmdFlash { 50% { background: rgba(var(--team-rgb), 0.45); } }

/* card context header (top-left of the right housing, beside the orbital strip) */
.cc-head { position: absolute; right: calc(var(--cs-in) + var(--cs-abil) * 3 + var(--cs-gap) * 3 + 1.35rem); bottom: calc(var(--cs-in) + var(--cs-card) + 0.4rem); left: auto;
  width: calc(var(--cs-rw) - var(--cs-in) * 2 - var(--cs-abil) * 3 - var(--cs-gap) * 3 - 1.6rem); height: var(--cs-abil); display: flex; align-items: center; gap: 0.55rem; pointer-events: none; min-width: 0; }
.cmdbtn .hk:empty { display: none; }
.cc-head .cc-ic { flex: none; width: 1.85rem; height: 1.85rem; display: grid; place-items: center; color: var(--team); border: 1px solid rgba(var(--team-rgb), 0.35); background: radial-gradient(circle at 50% 35%, rgba(var(--team-rgb), 0.2), rgba(3, 7, 12, 0.85) 75%); }
.cc-head .cc-ic .ico { width: 1.2rem; height: 1.2rem; filter: drop-shadow(0 0 0.3rem rgba(var(--team-rgb), 0.6)); }
.cc-head .cc-t { min-width: 0; display: flex; flex-direction: column; gap: 0.28rem; }
.cc-head b { font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.08em; color: var(--text); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-head small { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.14em; color: var(--text-mute); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud:not([data-mode='rts']) .cc-head { display: none; }
/* quick commands (nothing selected) */
.cmdbtn.quick { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01) 55%), rgba(8, 14, 22, 0.88); border-color: rgba(150, 210, 255, 0.16); }
.cmdbtn.quick .ico { width: 1.9rem; height: 1.9rem; color: var(--text-2); }
.cmdbtn.quick:hover:not(.dis) .ico { color: #fff; }
.cmdbtn.quick.dis .ico { color: rgba(255, 255, 255, 0.22); }
.cmdbtn.quick.idle .ico { color: var(--text-dim); }
.cmdbtn.quick .cnt { background: rgba(255, 255, 255, 0.85); }
.cmdbtn.quick.attn { border-color: rgba(var(--amber-rgb), 0.75); box-shadow: inset 0 0 0.9rem rgba(var(--amber-rgb), 0.22); }
.cmdbtn.quick.attn .ico { color: var(--amber); }
.cmdbtn.quick.attn .cnt { background: var(--amber); color: #1d1300; }
.cmdbtn.empty { background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.015)); border-color: rgba(150, 210, 255, 0.06); box-shadow: inset 0 1px 0.4rem rgba(0, 0, 0, 0.55); }
/* locked orbital strip */
.abil .lk { position: absolute; inset: 0; z-index: 3; display: none; place-items: center; color: rgba(255, 255, 255, 0.5); background: rgba(3, 6, 10, 0.5); }
.abil .lk .ico { width: 1rem; height: 1rem; position: absolute; right: 0.25rem; top: 0.25rem; }
.abilities.off .abil .lk { display: grid; }
.abilities.off .abil { border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.28); background: rgba(6, 10, 16, 0.85); }
.abilities.off .abil .ico-wrap .ico { filter: none; }
.abilities.off .abil .hk { background: rgba(255, 255, 255, 0.16); color: var(--text-dim); }
.abilities.off .abil .cost { color: var(--text-mute); }
.abil.poor .cost { color: #ff7d86; }
.abil .ring { position: absolute; inset: 2px; z-index: 1; pointer-events: none; border: 1px solid rgba(var(--accent-rgb), 0.18); }

/* --- Tooltip */
.tip { position: absolute; z-index: 30; width: 19rem; padding: 0.85rem 1rem 0.9rem; pointer-events: none; opacity: 0; transform: translateY(0.3rem); transition: opacity 120ms, transform 120ms var(--ease); --bg: rgba(6, 11, 18, 0.96); --bc: rgba(var(--team-rgb), 0.55); }
.tip.show { opacity: 1; transform: none; }
.tip .tt { display: flex; align-items: center; gap: 0.5rem; font: 700 var(--fs-md)/1.1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.tip .tt .grow { flex: 1; }
.tip .td { margin-top: 0.45rem; font: 400 var(--fs-xs)/1.5 var(--font-body); color: var(--text-2); }
.tip .tc { display: flex; gap: 0.9rem; margin-top: 0.55rem; font: 600 var(--fs-xs)/1 var(--font-mono); }
.tip .tc span { display: inline-flex; align-items: center; gap: 0.3rem; }
.tip .tc .ico { width: 1rem; height: 1rem; }
.tip .tc .c { color: var(--crystal); } .tip .tc .s { color: #c7d6e3; } .tip .tc .tm { color: var(--text-dim); }
.tip .tr { margin-top: 0.55rem; display: flex; align-items: center; gap: 0.4rem; font: 600 var(--fs-xs)/1.35 var(--font-ui); letter-spacing: 0.06em; color: #ff8a92; text-transform: uppercase; }
.tip .ts { margin-top: 0.55rem; padding-top: 0.5rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem 0.8rem; font: 600 var(--fs-2xs)/1.3 var(--font-ui); letter-spacing: 0.1em; color: var(--text-mute); text-transform: uppercase; }
.tip .ts b { color: var(--text-2); font-family: var(--font-mono); letter-spacing: 0; }
.tip .te { margin-top: 0.45rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; font: 700 var(--fs-2xs)/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.tip .te .good { color: var(--ok); } .tip .te .bad { color: #ff8a92; }

/* --- Abilities */
.abilities { position: absolute; right: var(--cs-in); bottom: calc(var(--cs-in) + var(--cs-card) + 0.4rem); height: var(--cs-abil); display: flex; align-items: stretch; gap: var(--cs-gap); padding: 0; pointer-events: auto; }
.abilities::before, .abilities::after { display: none; }
.abilities .ab-lbl { align-self: center; margin-right: 0.15rem; font: 700 var(--fs-2xs)/1.1 var(--font-ui); letter-spacing: 0.22em; color: var(--text-dim); text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.abilities.off .ab-lbl { color: var(--text-mute); }
.abil { position: relative; width: var(--cs-abil); height: var(--cs-abil); display: grid; place-items: center; padding: 0; border: 1px solid rgba(var(--accent-rgb), 0.45); color: var(--accent); overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), 0.22), rgba(4, 8, 13, 0.9) 75%); transition: border-color var(--t), transform 80ms; }
.abil .ico { width: 2rem; height: 2rem; position: relative; z-index: 1; filter: drop-shadow(0 0 0.4rem rgba(var(--accent-rgb), 0.6)); }
.abil .hk { position: absolute; left: 0.2rem; top: 0.18rem; z-index: 3; padding: 0.08rem 0.18rem; font: 700 var(--fs-2xs)/1 var(--font-mono); color: #1d1300; background: rgba(var(--amber-rgb), 0.92); }
.abil .cd { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font: 700 var(--fs-md)/1 var(--font-mono); color: #fff; background: conic-gradient(rgba(0, 0, 0, 0.72) var(--p, 0turn), rgba(0, 0, 0, 0.18) 0); text-shadow: 0 1px 2px #000; }
.abil .cd:empty { background: none; }
.abil .cost { position: absolute; right: 0.2rem; bottom: 0.15rem; z-index: 3; font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--crystal); }
.abil:hover:not(.dis) { border-color: var(--accent); }
.abil.dis { color: rgba(var(--accent-rgb), 0.42); }
.abil.dis .hk { background: rgba(var(--amber-rgb), 0.35); }
.abil.ready { animation: abilReady 1.2s ease-out 2; }
.abil.active { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.abil.strike { --accent-rgb: 255, 120, 80; --accent: #ff8a5c; }
.abil.nanite { --accent-rgb: 70, 230, 160; --accent: #46e6a0; }
@keyframes abilReady { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.8); } 100% { box-shadow: 0 0 0 0.8rem rgba(var(--accent-rgb), 0); } }

/* --- Control groups + console quick buttons */
.groups { position: absolute; left: calc(var(--cs-sl, calc(var(--cs-lw) + var(--cs-run) + 0.5rem)) + 0.4rem); bottom: calc(var(--cs-mh) - 1px); display: flex; align-items: flex-end; gap: 0.6rem; pointer-events: auto; }
.grp-tabs { display: flex; gap: 0.15rem; }
.qbar { display: flex; gap: 0.15rem; padding-right: 0.6rem; }
.qb { display: flex; align-items: center; gap: 0.35rem; height: 1.95rem; padding: 0 0.6rem 0 0.45rem; border: 1px solid rgba(var(--team-rgb), 0.4); border-bottom: 0; background: linear-gradient(180deg, rgba(14, 22, 32, 0.96), rgba(9, 15, 23, 0.97)); clip-path: polygon(0.45rem 0, calc(100% - 0.45rem) 0, 100% 100%, 0 100%); color: var(--text-2); transition: border-color var(--t), background var(--t), color var(--t); }
.qb .ico { width: 1.1rem; height: 1.1rem; }
.qb b { font: 700 var(--fs-xs)/1 var(--font-mono); color: #fff; }
.qb:hover { border-color: rgba(var(--team-rgb), 0.9); color: #fff; background: rgba(var(--team-rgb), 0.2); }
.qb.idle.warn { border-color: rgba(var(--amber-rgb), 0.75); background: rgba(var(--amber-rgb), 0.14); color: var(--amber); animation: qbPulse 2.4s ease-in-out infinite; }
.qb.idle.warn b { color: var(--amber); }
@keyframes qbPulse { 50% { box-shadow: 0 0 0.7rem rgba(var(--amber-rgb), 0.45); } }
.grp { position: relative; display: flex; align-items: center; gap: 0.3rem; height: 1.95rem; padding: 0 0.6rem 0 0.45rem; border: 1px solid rgba(var(--team-rgb), 0.35); border-bottom: 0; background: linear-gradient(180deg, rgba(14, 22, 32, 0.96), rgba(9, 15, 23, 0.97)); clip-path: polygon(0.45rem 0, calc(100% - 0.45rem) 0, 100% 100%, 0 100%); color: var(--text-2); font: 700 var(--fs-2xs)/1 var(--font-ui); animation: rise 200ms var(--ease-out) both; }
.grp .n { min-width: 1rem; padding: 0.1rem 0.2rem; font: 700 var(--fs-xs)/1 var(--font-mono); color: #1d1300; background: rgba(var(--amber-rgb), 0.9); text-align: center; }
.grp .ico { width: 1.1rem; height: 1.1rem; color: var(--team); }
.grp .c { font: 600 var(--fs-2xs)/1 var(--font-mono); color: #fff; }
.grp .hb { position: absolute; left: 2px; right: 2px; bottom: 1px; height: 2px; background: rgba(0, 0, 0, 0.5); }
.grp .hb i { position: absolute; inset: 0; transform-origin: 0 50%; background: var(--ok); }
.grp.lo .hb i { background: var(--bad); } .grp.mid .hb i { background: var(--amber); }
.grp:hover, .grp.on { border-color: rgba(var(--team-rgb), 0.9); color: #fff; background: rgba(var(--team-rgb), 0.2); }

/* --- Operator roster (command view) */
.roster { position: absolute; right: var(--hud-pad); top: 16rem; width: 16rem; padding: 0.45rem; display: flex; flex-direction: column; gap: 0.3rem; }
.roster-head { display: flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.3rem 0.35rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.2em; color: #ffcf7a; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.roster-head .ico { width: 1rem; height: 1rem; }
.roster-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: 17rem; overflow: hidden; }
.roster-row { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 3.6rem; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem; border: 1px solid transparent; background: rgba(255, 207, 122, 0.06); color: var(--text); text-align: left; transition: border-color var(--t), background var(--t); }
.roster-row:hover { border-color: rgba(255, 207, 122, 0.6); background: rgba(255, 207, 122, 0.14); }
.roster-row .ico { width: 1.3rem; height: 1.3rem; color: #ffcf7a; }
.roster-row .rn { min-width: 0; }
.roster-row .rn b { display: block; font: 700 var(--fs-sm)/1.1 var(--font-ui); letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-row .rn small { display: block; font: 600 var(--fs-2xs)/1.1 var(--font-ui); letter-spacing: 0.12em; color: var(--text-mute); text-transform: uppercase; }
.roster-row .rb { position: relative; height: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.roster-row .rb i { position: absolute; inset: 0; transform-origin: 0 50%; background: var(--ok); }
.roster-row.lo .rb i { background: var(--bad); }
.roster-row.me .rn b { color: var(--team); }

/* --- Action hint (placement / targeting) */
.action-hint { position: absolute; left: 50%; bottom: calc(var(--cs-mh) + 3rem); transform: translate(-50%, 0.6rem); display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 1rem 0.6rem 0.7rem; pointer-events: none; opacity: 0; transition: opacity 150ms, transform 150ms var(--ease); --bc: rgba(var(--amber-rgb), 0.6); }
.action-hint.show { opacity: 1; transform: translate(-50%, 0); }
.action-hint.bad { --bc: rgba(var(--bad-rgb), 0.75); }
.action-hint .ah-ic { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; color: var(--amber); background: rgba(var(--amber-rgb), 0.1); border: 1px solid rgba(var(--amber-rgb), 0.4); }
.action-hint.bad .ah-ic { color: var(--bad); border-color: rgba(var(--bad-rgb), 0.5); background: rgba(var(--bad-rgb), 0.1); }
.action-hint .ah-ic .ico { width: 1.5rem; height: 1.5rem; }
.action-hint .ah-top { display: flex; align-items: center; gap: 0.8rem; }
.action-hint b { font: 700 var(--fs-md)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; }
.action-hint .ah-cost { display: inline-flex; align-items: center; gap: 0.25rem; font: 600 var(--fs-sm)/1 var(--font-mono); color: var(--crystal); }
.action-hint .ah-cost .ico { width: 1rem; height: 1rem; }
.action-hint .ah-state { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.18em; color: var(--text-dim); text-transform: uppercase; }
.action-hint.bad .ah-state { color: #ff8a92; }
.action-hint:not(.bad) .ah-state { color: var(--ok); }
.action-hint .ah-keys { display: flex; gap: 0.9rem; margin-top: 0.4rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase; }
.action-hint .ah-keys span { display: inline-flex; align-items: center; gap: 0.35rem; }
.action-hint .ah-keys .kbd { height: 1.45em; min-width: 1.45em; font-size: var(--fs-2xs); }

/* refused command line (rts:error), centred above the console */
.rts-err { position: absolute; left: 50%; bottom: calc(var(--cs-mh) + 0.9rem); transform: translate(-50%, 0.3rem); display: flex; align-items: center; gap: 0.55rem; padding: 0.38rem 1.1rem;
  font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: #ffe0a3; text-shadow: 0 1px 2px #000, 0 0 0.6rem rgba(0, 0, 0, 0.6);
  background: linear-gradient(90deg, transparent, rgba(40, 24, 4, 0.72) 18%, rgba(40, 24, 4, 0.72) 82%, transparent); pointer-events: none; opacity: 0; white-space: nowrap; transition: opacity 220ms, transform 220ms var(--ease-out); }
.rts-err .ico { width: 1.1rem; height: 1.1rem; color: var(--amber); }
.rts-err.show { opacity: 1; transform: translate(-50%, 0); }
.rts-err.show .ico-wrap { animation: errNudge 300ms var(--ease-out); }
.rts-err[data-kind='invalidPlacement'] { color: #ffc2c7; background: linear-gradient(90deg, transparent, rgba(46, 6, 10, 0.72) 18%, rgba(46, 6, 10, 0.72) 82%, transparent); }
.rts-err[data-kind='invalidPlacement'] .ico { color: #ff6b76; }
@keyframes errNudge { 0%, 100% { transform: none; } 30% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }
.hud:not([data-mode='rts']) .rts-err { display: none; }

/* --- Notifications */
.notifs { position: absolute; left: var(--hud-pad); top: 4rem; width: 25rem; display: flex; flex-direction: column; gap: 0.3rem; pointer-events: none; }
.hud[data-mode='fps'] .notifs { top: 16rem; width: 22rem; left: calc(var(--hud-pad) + var(--fps-m)); }
.notif { --n-rgb: var(--accent-rgb); position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0.7rem 0.42rem 0.55rem; pointer-events: auto; cursor: default;
  background: linear-gradient(90deg, rgba(var(--n-rgb), 0.2), rgba(6, 11, 18, 0.78) 45%, rgba(6, 11, 18, 0.5)); border-left: 2px solid rgb(var(--n-rgb));
  font: 600 var(--fs-sm)/1.25 var(--font-ui); letter-spacing: 0.04em; color: var(--text); animation: notifIn 300ms var(--ease-out) both; transition: opacity 600ms, transform 600ms; }
.notif.click { cursor: pointer; }
.notif .ico { width: 1.25rem; height: 1.25rem; color: rgb(var(--n-rgb)); }
.notif .x { margin-left: auto; font: 700 var(--fs-2xs)/1 var(--font-mono); color: rgb(var(--n-rgb)); }
.notif.bad { --n-rgb: var(--bad-rgb); } .notif.warn { --n-rgb: var(--amber-rgb); } .notif.ok { --n-rgb: var(--ok-rgb); } .notif.team { --n-rgb: var(--team-rgb); }
.notif.old { opacity: 0; transform: translateX(-0.8rem); }
@keyframes notifIn { from { opacity: 0; transform: translateX(-1.2rem); } to { opacity: 1; transform: none; } }
.alert-hint { position: absolute; left: var(--cs-in); bottom: calc(var(--cs-lh) + 0.55rem); display: flex; align-items: center; gap: 0.5rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.18em; color: #ffb9be; text-transform: uppercase; opacity: 0; transition: opacity 300ms; pointer-events: none; }
.alert-hint.show { opacity: 1; animation: pulse 1.2s infinite; }

/* --- Toast banners (in-game, center top) */
.hud-toasts { position: absolute; left: 50%; top: 5.2rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; pointer-events: none; }
.hud[data-mode='fps'] .hud-toasts { top: 15.2rem; } /* under the objective row, the capture bar and the orders strip */
.hud[data-mode='fps'] .notif:nth-child(n+5) { display: none; }
@media (max-width: 1500px) { .htoast { font-size: var(--fs-md); letter-spacing: 0.16em; } }
.hud[data-mode='deploy'] .hud-toasts { top: 9rem; }
.hud[data-mode='deploy'] .notifs { left: auto; right: var(--hud-pad); top: 15rem; width: 23rem; }
.htoast { --h-rgb: var(--team-rgb); display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 1.4rem; white-space: nowrap; font: 700 var(--fs-lg)/1 var(--font-ui); letter-spacing: 0.24em; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, transparent, rgba(var(--h-rgb), 0.3) 20%, rgba(var(--h-rgb), 0.3) 80%, transparent); text-shadow: 0 0 0.8rem rgba(var(--h-rgb), 0.9); animation: htoastIn 3.2s var(--ease) both; }
.htoast .ico { width: 1.5rem; height: 1.5rem; color: rgb(var(--h-rgb)); }
.htoast.bad { --h-rgb: var(--bad-rgb); } .htoast.warn { --h-rgb: var(--amber-rgb); } .htoast.ok { --h-rgb: var(--ok-rgb); }
@keyframes htoastIn { 0% { opacity: 0; transform: scaleX(0.6); letter-spacing: 0.6em; } 10% { opacity: 1; transform: none; letter-spacing: 0.24em; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* --- Chat */
.chat { position: absolute; left: var(--hud-pad); bottom: calc(var(--cs-lh) + 2.6rem); width: 27rem; display: flex; flex-direction: column; gap: 0.4rem; pointer-events: none; }
.hud[data-mode='fps'] .chat { bottom: calc(var(--hud-pad) + 10.6rem); left: calc(var(--hud-pad) + var(--fps-m)); }
.hud.driving[data-mode='fps'] .chat { bottom: calc(var(--hud-pad) + 18.2rem); }
.hud[data-mode='deploy'] .chat { bottom: 4rem; left: auto; right: var(--hud-pad); }
.chat-log { display: flex; flex-direction: column; gap: 0.18rem; max-height: 13rem; overflow: hidden; justify-content: flex-end; }
.chat-msg { align-self: flex-start; max-width: 100%; padding: 0.18rem 0.9rem 0.2rem 0.5rem; font: 500 var(--fs-sm)/1.35 var(--font-body); color: var(--text); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); transition: opacity 800ms; overflow-wrap: anywhere;
  background: linear-gradient(90deg, rgba(3, 7, 12, 0.72), rgba(3, 7, 12, 0.5) 70%, rgba(3, 7, 12, 0)); border-left: 2px solid rgba(255, 255, 255, 0.14); }
.chat-msg .sc { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.14em; margin-right: 0.35em; color: var(--text-dim); }
.chat-msg .sc.all { color: var(--amber); }
.chat-msg .who { font-weight: 700; margin-right: 0.3em; }
.chat-msg.sys { color: var(--text-dim); font-style: italic; }
.chat-msg.faded { opacity: 0; }
.chat.open .chat-msg.faded { opacity: 0.85; }
.chat.open .chat-log { max-height: 16rem; padding: 0.4rem 0.5rem; background: linear-gradient(90deg, rgba(4, 8, 13, 0.7), transparent); }
.chat-input { display: none; align-items: center; gap: 0.5rem; height: 2.3rem; padding: 0 0.6rem; pointer-events: auto; background: rgba(4, 8, 13, 0.88); border: 1px solid rgba(var(--team-rgb), 0.6); }
.chat.open .chat-input { display: flex; }
.chat-input .chat-scope { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; padding: 0.3rem 0.45rem; color: #031019; background: var(--team); flex: none; }
.chat-input .chat-scope.all { background: var(--amber); }
.chat-input input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 500 var(--fs-sm)/1 var(--font-body); color: #fff; }
.chat-input .hintx { font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.1em; color: var(--text-mute); white-space: nowrap; }

/* --- Kill feed */
.killfeed { position: absolute; right: var(--hud-pad); top: 4rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; pointer-events: none; }
.hud[data-mode='fps'] .killfeed { top: var(--hud-pad); right: calc(var(--hud-pad) + var(--fps-m)); }
.kf { display: flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 0.75rem; background: linear-gradient(90deg, rgba(4, 8, 13, 0.45), rgba(4, 8, 13, 0.78)); box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.14); font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.04em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); animation: kfIn 250ms var(--ease-out) both; transition: opacity 500ms; }
.kf .wpn { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase; white-space: nowrap; }
.kf .kwa { display: inline-flex; width: 3.9rem; height: 1.2rem; margin: 0 0.1rem; }
.kf .kwa .wart { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)); }
.kf .kwa .wart .b { fill: rgba(225, 235, 244, 0.88); }
.kf .kwa .wart .tp { fill: rgba(170, 186, 200, 0.8); }
.kf .kwa .wart .ac { fill: var(--amber); filter: none; }
.kf.died .kwa .wart .b { fill: rgba(255, 196, 190, 0.9); }
.kf .ico { width: 1.15rem; height: 1.15rem; color: var(--text-2); }
.kf .hs { color: var(--amber); }
.kf .arrow { color: var(--text-mute); width: 0.95rem; height: 0.95rem; }
.kf.mine { background: linear-gradient(90deg, rgba(4, 8, 13, 0.72), rgba(48, 34, 8, 0.82)); box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb), 0.55), inset 3px 0 0 var(--amber); }
.kf.died { background: linear-gradient(90deg, rgba(4, 8, 13, 0.72), rgba(54, 8, 14, 0.82)); box-shadow: inset 0 0 0 1px rgba(var(--bad-rgb), 0.55), inset 3px 0 0 var(--bad); }
.kf .arrow.hs { color: var(--amber); width: 1.15rem; height: 1.15rem; }
.kf.old { opacity: 0; }
@keyframes kfIn { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: none; } }

/* --- Scoreboard */
.scoreboard { position: absolute; z-index: 20; left: 50%; top: 50%; width: min(92rem, 95vw); transform: translate(-50%, -50%) scale(0.98); opacity: 0; visibility: hidden; transition: opacity 120ms, transform 120ms var(--ease), visibility 0s 120ms; pointer-events: none; }
.scoreboard.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity 120ms, transform 120ms var(--ease); box-shadow: 0 0 0 100vmax rgba(1, 3, 6, 0.42), 0 1.6rem 4rem rgba(0, 0, 0, 0.6); }
.sb-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.018); }
.sb-table tbody tr:hover td { background: rgba(255, 255, 255, 0.035); }
.sb-head { display: flex; align-items: center; gap: 1.2rem; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--line); }
.sb-head h2 { margin: 0; font: 700 var(--fs-xl)/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; flex: 1; }
.sb-head .meta { display: flex; align-items: center; gap: 0.45rem; font: 600 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.12em; color: var(--text-dim); text-transform: uppercase; }
.sb-head .meta .ico { width: 1rem; height: 1rem; }
.sb-head .meta .sep { width: 1px; height: 1rem; margin: 0 0.5rem; background: var(--line-2); }
.sb-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.sb-team { --tc: var(--team-0); --tc-rgb: var(--team-0-rgb); background: rgba(5, 9, 15, 0.93); min-height: 12rem; }
.sb-team.t1 { --tc: var(--team-1); --tc-rgb: var(--team-1-rgb); }
.sb-team .th { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: linear-gradient(90deg, rgba(var(--tc-rgb), 0.28), transparent 85%); border-bottom: 1px solid rgba(var(--tc-rgb), 0.4); }
.sb-team .th > .ico-wrap .ico { width: 1.9rem; height: 1.9rem; color: var(--tc); filter: drop-shadow(0 0 0.4rem rgba(var(--tc-rgb), 0.6)); }
.sb-team .tn { flex: 1; min-width: 0; }
.sb-team .tn b { display: block; font: 700 var(--fs-lg)/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-team .tn small { display: block; margin-top: 0.25rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.26em; color: var(--tc); text-transform: uppercase; }
.sb-team .tstats { display: flex; gap: 1rem; }
.sb-team .tstats span { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.18em; color: var(--text-mute); text-transform: uppercase; }
.sb-team .tstats b { font: 700 var(--fs-lg)/1 var(--font-mono); color: var(--text); letter-spacing: 0; }
.sb-table { width: 100%; border-collapse: collapse; }
.sb-table th { padding: 0.45rem 0.55rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.2em; color: var(--text-mute); text-transform: uppercase; text-align: right; }
.sb-table th:first-child, .sb-table td:first-child { text-align: left; padding-left: 1rem; }
.sb-table th:nth-child(2), .sb-table td:nth-child(2) { text-align: left; }
.sb-table td { padding: 0.42rem 0.55rem; font: 600 var(--fs-sm)/1.1 var(--font-mono); text-align: right; color: var(--text-2); border-top: 1px solid rgba(255, 255, 255, 0.045); }
.sb-table td.pn { font: 700 var(--fs-md)/1.1 var(--font-ui); letter-spacing: 0.04em; color: var(--text); }
.sb-table td.pn .wrap { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.sb-table td.pn .nm { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.sb-table td.pn .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 13rem; }
.sb-table td.pn .ico { width: 1.2rem; height: 1.2rem; flex: none; }
.sb-table td.pn .m-rts { color: #8fd8ff; } .sb-table td.pn .m-fps { color: #ffcf7a; } .sb-table td.pn .m-deploy { color: var(--text-dim); } .sb-table td.pn .m-bot { color: var(--text-mute); }
.sb-table td.pn .unit { color: var(--text-mute); font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.sb-table td.pn .unit:empty { display: none; }
.sb-table .role { display: inline-block; padding: 0.16rem 0.4rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.2); color: var(--text-2); }
.sb-table .role.cmd { color: #8fd8ff; border-color: rgba(143, 216, 255, 0.4); background: rgba(143, 216, 255, 0.08); }
.sb-table .role.opr { color: #ffcf7a; border-color: rgba(255, 207, 122, 0.45); background: rgba(255, 207, 122, 0.08); }
.sb-table .role.ai { color: var(--text-mute); }
.sb-table td.kd { color: var(--text); }
.sb-table td.pingv { white-space: nowrap; }
.sb-table .pb { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.8rem; margin-right: 0.4rem; vertical-align: -0.05rem; }
.sb-table .pb i { width: 3px; background: rgba(255, 255, 255, 0.16); }
.sb-table .pb i:nth-child(1) { height: 35%; } .sb-table .pb i:nth-child(2) { height: 65%; } .sb-table .pb i:nth-child(3) { height: 100%; }
.sb-table .pb[data-q='3'] i { background: var(--ok); }
.sb-table .pb[data-q='2'] i:nth-child(-n+2) { background: var(--amber); }
.sb-table .pb[data-q='1'] i:nth-child(1) { background: var(--bad); }
.sb-table tr.me td { background: rgba(var(--tc-rgb), 0.16); }
.sb-table tr.me td:first-child { box-shadow: inset 3px 0 0 var(--tc); }
.sb-table tr.dead td { opacity: 0.55; }
.sb-table tr.dc td { opacity: 0.45; }
.sb-table tr.bot td.pn { color: var(--text-2); }
.sb-table tr.empty td { padding: 1.2rem 1rem; color: var(--text-mute); font: 600 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; text-align: left; }
.sb-table td.pn .dc-tag { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.14em; color: var(--amber); text-transform: uppercase; }
.sb-foot { display: flex; gap: 1.4rem; padding: 0.6rem 1.2rem; font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; color: var(--text-mute); text-transform: uppercase; border-top: 1px solid var(--line); }
.sb-foot span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sb-foot .grow { flex: 1; }
.sb-foot .ico { width: 1rem; height: 1rem; }

/* --- Announcer subtitles */
.subtitle { position: absolute; left: 50%; bottom: calc(var(--cs-mh) + 3.2rem); transform: translateX(-50%); max-width: min(44rem, 80vw); display: flex; align-items: baseline; gap: 0.65rem; padding: 0.45rem 0.95rem 0.5rem;
  background: rgba(2, 6, 10, 0.74); border-left: 2px solid rgba(var(--team-rgb), 0.9); pointer-events: none; opacity: 0; transition: opacity 260ms; }
.subtitle.show { opacity: 1; }
.subtitle .sub-who { flex: none; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.24em; color: var(--team); text-transform: uppercase; }
.subtitle .sub-txt { font: 500 var(--fs-md)/1.35 var(--font-body); color: #fff; }
.subtitle[data-tag='alert'] { border-left-color: var(--bad); }
.subtitle[data-tag='alert'] .sub-who { color: #ff8a92; }
.hud[data-mode='fps'] .subtitle { bottom: calc(var(--hud-pad) + 3.4rem); }
.hud[data-mode='deploy'] .subtitle { left: calc(50% + 14rem); bottom: calc(var(--hud-pad) + 1.2rem); }

/* --- Network health */
.net-chip { position: absolute; right: var(--hud-pad); bottom: calc(var(--cs-rh) + 0.8rem); display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.6rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); background: rgba(40, 26, 4, 0.8); border: 1px solid rgba(var(--amber-rgb), 0.55); pointer-events: none; opacity: 0; transition: opacity 300ms; }
.net-chip.show { opacity: 1; }
.net-chip .ico { width: 1rem; height: 1rem; }
.hud[data-mode='fps'] .net-chip { bottom: calc(var(--hud-pad) + 10rem); right: calc(var(--hud-pad) + var(--fps-m)); }
.net-stall { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1.3rem; background: rgba(4, 8, 13, 0.88); border: 1px solid rgba(var(--amber-rgb), 0.6); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 250ms, visibility 0s 250ms; }
.net-stall.show { opacity: 1; visibility: visible; transition: opacity 250ms; }
.net-stall b { display: block; font: 700 var(--fs-md)/1 var(--font-ui); letter-spacing: 0.2em; color: var(--amber); text-transform: uppercase; }
.net-stall small { display: block; margin-top: 0.3rem; font-size: var(--fs-xs); color: var(--text-dim); }
.net-stall .spinner { border-color: rgba(var(--amber-rgb), 0.25); border-top-color: var(--amber); width: 1.4rem; height: 1.4rem; }

/* --- FPS meter */
.fpsmeter { position: absolute; right: 24rem; top: 0.78rem; z-index: 5; display: flex; gap: 0.9rem; padding: 0.25rem 0.6rem; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.1); font: 600 var(--fs-2xs)/1.2 var(--font-mono); color: var(--text-2); pointer-events: none; white-space: nowrap; }
.hud[data-mode='fps'] .fpsmeter { right: auto; left: 50%; top: auto; bottom: calc(var(--hud-pad) + 2rem); transform: translateX(-50%); }
.fpsmeter b { color: var(--ok); font-weight: 700; }
.fpsmeter b.mid { color: var(--amber); } .fpsmeter b.bad { color: var(--bad); }

/* ================================================================ Operator HUD */
/* Helmet-visor language: no boxes around the core readouts, soft dark backing plates for contrast on bright skies,
   white primary readouts, team colour for own elements, amber for warnings, red for danger. */
.lyr.fps { --hud-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 0.6rem rgba(0, 0, 0, 0.35); }

/* --- crosshair (positions written by crosshair.js in px; sizes in rem follow the interface scale) */
.xh { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; --xc: #f4f8fb; --xt: 2px; --xl: 0.68rem; transition: opacity 140ms; }
.xh .xa { position: absolute; background: var(--xc); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0.4rem rgba(0, 0, 0, 0.4); border-radius: 0.5px; transition: opacity 120ms, background-color 90ms; }
.xh .xa.l, .xh .xa.r { width: var(--xl); height: var(--xt); top: calc(var(--xt) / -2); }
.xh .xa.l { right: 0; } .xh .xa.r { left: 0; }
.xh .xa.t, .xh .xa.b { width: var(--xt); height: var(--xl); left: calc(var(--xt) / -2); }
.xh .xa.t { bottom: 0; } .xh .xa.b { top: 0; }
.xh .xa.off, .xh .xdot.off { display: none; }
.xh .xdot { position: absolute; left: -1.5px; top: -1.5px; width: 3px; height: 3px; border-radius: 50%; background: var(--xc); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.xh .xsvg { position: absolute; left: -80px; top: -80px; width: 160px; height: 160px; }
.xh .xsvg svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 3px rgba(0, 0, 0, 0.3)); }
.xh .xsvg .xring, .xh .xsvg .xdia, .xh .xsvg .xchev, .xh .xsvg .xstad, .xh .xsvg .xbrk { display: none; fill: none; stroke: var(--xc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.xh .xsvg.ring .xring, .xh .xsvg.dia .xdia, .xh .xsvg.chev .xchev, .xh .xsvg.stad .xstad, .xh .xsvg.brk .xbrk { display: inline; }
.xh .xsvg .xdia { fill: var(--xc); fill-opacity: 0.25; }
.xh .xsvg .xstad { stroke-width: 1.3; opacity: 0.8; }
.xh .xsvg .xreload { fill: none; stroke: var(--amber); stroke-width: 2.6; stroke-linecap: round; opacity: 0; transition: opacity 120ms; }
.xh[data-style='pistol'] .xsvg .xring { stroke-width: 1.4; opacity: 0.85; }
.xh[data-style='repeater'] .xsvg .xring, .xh[data-style='mortar'] .xsvg .xring { stroke-dasharray: 3 4; stroke-width: 1.4; }
.xh[data-style='launcher'] .xsvg .xring { stroke-dasharray: 9 4; }
.xh.long { --xl: 1rem; --xt: 1.5px; }
.xh.short { --xl: 0.42rem; }
.xh.ads .xa { opacity: 0; }
.xh.sight .xdot, .xh.sight .xsvg .xring, .xh.sight .xsvg .xdia, .xh.sight .xsvg .xchev, .xh.sight .xsvg .xstad, .xh.sight .xsvg .xbrk { opacity: 0 !important; }
.xh.ads .xsvg .xring { opacity: 0.55; }
.xh.sprint { opacity: 0.22; }
.xh.reload .xa, .xh.reload .xsvg .xring { opacity: 0.32; }
.xh.reload .xsvg .xreload { opacity: 1; }
.xh.slew { opacity: 0.5; }
.xh.hide { display: none; }
.xh.enemy .xdot { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 0.4rem rgba(255, 60, 60, 0.9); }

/* --- hit markers + damage numbers */
.hm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; opacity: 0; --hc: #fff; }
.hm i { position: absolute; left: -0.55rem; top: -1.5px; width: 1.1rem; height: 3px; background: var(--hc); border-radius: 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0.45rem rgba(0, 0, 0, 0.45); transform-origin: 50% 50%; }
.hm i:nth-child(1) { transform: rotate(45deg) translateX(1.05rem); }
.hm i:nth-child(2) { transform: rotate(135deg) translateX(1.05rem); }
.hm i:nth-child(3) { transform: rotate(225deg) translateX(1.05rem); }
.hm i:nth-child(4) { transform: rotate(315deg) translateX(1.05rem); }
.hm .hm-ring { display: none; position: absolute; left: -0.42rem; top: -0.42rem; width: 0.84rem; height: 0.84rem; border: 1.5px solid var(--hc); border-radius: 50%; box-shadow: 0 0 0.4rem rgba(255, 190, 60, 0.7); }
.hm.hs { --hc: #ffc23d; }
.hm.hs i { width: 1.2rem; left: -0.6rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 0.5rem rgba(255, 180, 40, 0.65); }
.hm.hs .hm-ring { display: block; }
.hm.kill { --hc: #ff3d3d; }
.hm.kill i { width: 1.45rem; left: -0.72rem; height: 3.5px; top: -1.75px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0.7rem rgba(255, 40, 40, 0.85); }
.hm.kill .hm-ring { display: block; width: 1.25rem; height: 1.25rem; left: -0.625rem; top: -0.625rem; border-width: 2px; box-shadow: 0 0 0.6rem rgba(255, 60, 60, 0.8); }
.hmnums { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.hmnums span { position: absolute; left: 0; top: 0; opacity: 0; font: 700 var(--fs-md)/1 var(--font-display); color: #fff; text-shadow: var(--hud-shadow); white-space: nowrap; }
.hmnums span.hs { color: #ffc23d; font-size: var(--fs-lg); }
.hmnums span.kill { color: #ff5252; font-size: var(--fs-lg); }

/* --- kill confirmation ribbon */
.killconf { position: absolute; left: 50%; top: 61%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.3rem; pointer-events: none; }
.killconf .kc { display: flex; align-items: center; gap: 0.65rem; padding: 0.35rem 1.1rem; font: 700 var(--fs-md)/1 var(--font-ui); letter-spacing: 0.24em; text-transform: uppercase; color: #fff; text-shadow: var(--hud-shadow);
  background: linear-gradient(90deg, transparent, rgba(120, 10, 10, 0.55) 22%, rgba(120, 10, 10, 0.55) 78%, transparent); animation: kcIn 2.3s var(--ease) both; }
.killconf .kc .ico { width: 1.25rem; height: 1.25rem; color: #ff6363; }
.killconf .kc .pts { font: 700 var(--fs-md)/1 var(--font-mono); color: var(--amber); letter-spacing: 0; }
.killconf .kc.hs { background: linear-gradient(90deg, transparent, rgba(120, 80, 0, 0.55) 22%, rgba(120, 80, 0, 0.55) 78%, transparent); }
.killconf .kc.hs .ico { color: var(--amber); }
.killconf .kc.spot { font-size: var(--fs-xs); letter-spacing: 0.3em; color: #ffd6d6; background: linear-gradient(90deg, transparent, rgba(70, 10, 10, 0.5) 25%, rgba(70, 10, 10, 0.5) 75%, transparent); animation-duration: 1.6s; }
.killconf .kc.spot .ico { color: #ff7070; width: 1.1rem; height: 1.1rem; }
@keyframes kcIn { 0% { opacity: 0; transform: scale(1.3); letter-spacing: 0.5em; } 9% { opacity: 1; transform: none; letter-spacing: 0.24em; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-0.5rem); } }

.killconf .kc.streak { font-size: var(--fs-lg); letter-spacing: 0.3em; color: #fff3d6; background: linear-gradient(90deg, transparent, rgba(130, 86, 0, 0.6) 22%, rgba(130, 86, 0, 0.6) 78%, transparent); animation-duration: 2.6s; }
.killconf .kc.streak .ico { color: var(--amber); filter: drop-shadow(0 0 0.4rem rgba(var(--amber-rgb), 0.9)); }
.killconf .kc.order { font-size: var(--fs-xs); letter-spacing: 0.3em; color: #d6ffeb; background: linear-gradient(90deg, transparent, rgba(8, 60, 36, 0.55) 25%, rgba(8, 60, 36, 0.55) 75%, transparent); animation-duration: 1.8s; }
.killconf .kc.order .ico { color: var(--ok); width: 1.1rem; height: 1.1rem; }

/* --- ammo cue under the crosshair */
.ammocue { position: absolute; left: 50%; top: calc(50% + 3rem); transform: translateX(-50%); display: flex; align-items: center; gap: 0.45rem; pointer-events: none; opacity: 0; transition: opacity 140ms;
  font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.26em; text-transform: uppercase; color: var(--amber); text-shadow: var(--hud-shadow); white-space: nowrap; }
.ammocue.on { opacity: 1; }
.ammocue.low { color: rgba(255, 214, 150, 0.85); font-size: var(--fs-2xs); }
.ammocue.empty { animation: blink 0.8s infinite; }
.ammocue .kbd { height: 1.5em; min-width: 1.5em; font-size: var(--fs-2xs); }
.ammocue .kbd:empty { display: none; }
.hud.driving .ammocue { top: calc(50% + 6.6rem); }
.lyr.fps.scoped .ammocue { opacity: 0; }

/* --- damage direction */
.dmgdir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.dmgdir .dmgdefs { position: absolute; width: 0; height: 0; }
.dmgdir .arc { position: absolute; left: -13rem; top: -13rem; width: 26rem; height: 26rem; opacity: 0; will-change: transform, opacity; }
.dmgdir .arc svg { width: 100%; height: 100%; overflow: visible; }
.dmgdir .arc .band { filter: drop-shadow(0 0 0.35rem rgba(255, 30, 15, 0.55)); }
.dmgdir .arc .edge { fill: none; stroke: rgba(255, 196, 176, 0.95); stroke-width: 1.15; stroke-linecap: round; }
.dmgdir .arc.hit svg { animation: dmgHit 260ms var(--ease-out); }
@keyframes dmgHit { from { transform: scale(1.07); filter: brightness(1.6); } to { transform: none; filter: none; } }

/* --- sniper scope (lens + mask by CSS, reticle SVG in a 100-unit lens space) */
.lyr.fps > .scope { position: fixed; inset: 0; pointer-events: none; display: none; }
.lyr.fps > .scope.on { display: block; animation: scopeIn 160ms var(--ease-out) both; }
@keyframes scopeIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.lyr.fps > .scope .mask { position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 0, transparent 40.3vh, rgba(0, 0, 0, 0.6) 40.9vh, #020304 41.6vh); }
.lyr.fps > .scope .lens { position: absolute; left: 50%; top: 50%; width: 82vh; height: 82vh; margin: -41vh 0 0 -41vh; border-radius: 50%;
  box-shadow: inset 0 0 7vh rgba(0, 0, 0, 0.9), inset 0 0 0 0.35vh rgba(0, 0, 0, 0.95), inset 0 0 0 0.6vh rgba(60, 70, 80, 0.35);
  background: radial-gradient(circle at 36% 30%, rgba(170, 225, 255, 0.07), transparent 42%), radial-gradient(circle at 64% 72%, rgba(255, 200, 150, 0.035), transparent 40%); }
.lyr.fps > .scope svg { position: absolute; left: 50%; top: 50%; width: 82vh; height: 82vh; margin: -41vh 0 0 -41vh; overflow: visible; }
.lyr.fps > .scope svg .post { fill: rgba(4, 6, 8, 0.95); }
.lyr.fps > .scope svg .fine { stroke: rgba(4, 6, 8, 0.9); stroke-width: 0.1; }
.lyr.fps > .scope svg .mil { fill: rgba(4, 6, 8, 0.9); }
.lyr.fps > .scope svg .lad { stroke: rgba(4, 6, 8, 0.85); stroke-width: 0.12; }
.lyr.fps > .scope svg .lt { font: 700 1.2px/1 var(--font-mono); fill: rgba(4, 6, 8, 0.85); }
.lyr.fps > .scope svg .ring { fill: none; stroke: rgba(255, 70, 60, 0.95); stroke-width: 0.12; }
.lyr.fps > .scope svg .dot { fill: #ff3b30; }
.lyr.fps > .scope .rng { position: absolute; left: calc(50% + 7vh); top: calc(50% + 1.6vh); font: 700 var(--fs-md)/1 var(--font-mono); color: rgba(255, 92, 80, 0.95); text-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.9); }
.lyr.fps > .scope .rng.tgt::after { content: ' · TGT'; }
.lyr.fps > .scope .sc-info { position: absolute; left: calc(50% + 7vh); top: calc(50% + 4vh); font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; }
.lyr.fps > .scope .sc-breath { position: absolute; left: 50%; top: calc(50% + 30vh); transform: translateX(-50%); width: 15rem; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.lyr.fps > .scope .sc-breath .bl { display: flex; align-items: center; gap: 0.45rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; }
.lyr.fps > .scope .sc-breath .kbd { height: 1.4em; font-size: var(--fs-2xs); }
.lyr.fps > .scope .sc-breath .bt { position: relative; width: 100%; height: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.lyr.fps > .scope .sc-breath .bt i { position: absolute; inset: 0; transform-origin: 50% 50%; background: rgba(220, 240, 255, 0.85); }
.lyr.fps > .scope .sc-breath.hold .bl { color: #bfe7ff; }
.lyr.fps > .scope .sc-breath.hold .bt i { background: #7fd3ff; box-shadow: 0 0 0.45rem rgba(127, 211, 255, 0.9); }
.lyr.fps > .scope .sc-breath.out .bt i { background: #ff6b5c; }
.lyr.fps.scoped .fps-top-cps, .lyr.fps.scoped .radar, .lyr.fps.scoped .fps-hints, .lyr.fps.scoped .killconf { opacity: 0; }

/* --- bottom modules: visor tilt toward the screen centre */
.fps-left, .fps-right { position: absolute; bottom: calc(var(--hud-pad) + 0.2rem); pointer-events: none; text-shadow: var(--hud-shadow); }
.fps-left { left: calc(var(--hud-pad) + 0.4rem); width: 27rem; display: flex; flex-direction: column; gap: 0.55rem; transform: perspective(64rem) rotateY(7deg); transform-origin: 0 100%; }
.fps-right { right: calc(var(--hud-pad) + 0.4rem); width: 25rem; display: flex; flex-direction: column; align-items: flex-end; transform: perspective(64rem) rotateY(-7deg); transform-origin: 100% 100%; }

/* vitals */
.vit { position: relative; padding: 0.7rem 1rem 0.75rem 0.95rem; border-left: 2px solid rgba(var(--team-rgb), 0.95);
  background: linear-gradient(90deg, rgba(3, 8, 13, 0.7), rgba(3, 8, 13, 0.42) 62%, rgba(3, 8, 13, 0)); }
.vit::before { content: ''; position: absolute; left: -2px; top: -1px; width: 1.4rem; height: 1px; background: rgba(var(--team-rgb), 0.95); }
.vit::after { content: ''; position: absolute; left: -2px; bottom: -1px; width: 3.2rem; height: 1px; background: rgba(var(--team-rgb), 0.6); }
.vit-top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.vit-ic { position: relative; width: 2.6rem; height: 2.6rem; flex: none; display: grid; place-items: center; overflow: hidden; color: var(--team); background: radial-gradient(circle at 50% 35%, rgba(var(--team-rgb), 0.3), rgba(3, 8, 13, 0.75) 75%); border: 1px solid rgba(var(--team-rgb), 0.6); }
.vit-ic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.5) translateY(10%); }
.vit.is-veh .vit-ic img { transform: scale(1.15); }
.vit-ic.has-img .ico { display: none; }
.vit-ic .ico { width: 1.55rem; height: 1.55rem; filter: drop-shadow(0 0 0.3rem rgba(var(--team-rgb), 0.6)); }
.vit-id { flex: 1; min-width: 0; }
.vit-id b { display: block; font: 700 var(--fs-lg)/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vit-id small { display: block; margin-top: 0.3rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vit-id small .lk { display: inline-block; margin-right: 0.45rem; padding: 0.1rem 0.3rem; color: #1b1100; background: rgba(255, 207, 122, 0.9); letter-spacing: 0.16em; }
.vit-stance { align-self: flex-start; padding: 0.22rem 0.45rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.2em; color: var(--text-2); text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 150ms; }
.vit-stance.on { opacity: 1; }
.vit-hp { position: relative; display: flex; align-items: flex-end; gap: 0.85rem; }
.vit-n { flex: none; display: flex; flex-direction: column; min-width: 6.4rem; }
.vit-kind { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.24em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 0.2rem; }
.vit-nums { display: flex; align-items: baseline; gap: 0.25rem; }
.vit-num { font: 700 2.55rem/0.82 var(--font-display); font-variant-numeric: tabular-nums; color: #fff; }
.vit-max { font: 600 var(--fs-sm)/1 var(--font-mono); color: var(--text-dim); }
.vit-segs { flex: 1; display: flex; gap: 3px; height: 0.95rem; margin-bottom: 0.1rem; padding-left: 0.2rem; }
.vit-segs i { position: relative; flex: 1; overflow: hidden; transform: skewX(-20deg); background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.vit-segs em { position: absolute; inset: 0; transform-origin: 0 50%; }
.vit-segs em.lag { background: rgba(255, 96, 80, 0.85); }
.vit-segs em.cur { background: linear-gradient(180deg, #ffffff, #cfeaff 70%, #a9d8ff); box-shadow: 0 0 0.55rem rgba(160, 215, 255, 0.55); }
.vit.mid .vit-segs em.cur { background: linear-gradient(180deg, #fff3cf, #ffd36b); box-shadow: 0 0 0.55rem rgba(255, 200, 90, 0.55); }
.vit.lo .vit-segs em.cur { background: linear-gradient(180deg, #ffb4a8, #ff4c3c); box-shadow: 0 0 0.6rem rgba(255, 70, 50, 0.75); }
.vit.lo .vit-num { color: #ff6a5c; }
.vit.lo { border-left-color: #ff4c3c; }
.vit-crit { position: absolute; right: 0; top: -1.45rem; padding: 0.2rem 0.45rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.24em; text-transform: uppercase; color: #fff; background: rgba(210, 30, 20, 0.85); opacity: 0; }
.vit.critical .vit-crit { opacity: 1; animation: blink 0.7s infinite; }
.vit.f-hit .vit-segs { animation: segHit 260ms ease-out; }
.vit.f-heal .vit-segs { animation: segHeal 520ms ease-out; }
@keyframes segHit { 0% { filter: brightness(2.2) saturate(0.6); transform: translateX(-3px); } 50% { transform: translateX(2px); } 100% { filter: none; transform: none; } }
@keyframes segHeal { 0% { filter: drop-shadow(0 0 0.5rem rgba(70, 230, 160, 0.9)) brightness(1.3); } 100% { filter: none; } }

/* vehicle panel (above the vitals while driving / manning) */
.veh { display: none; align-items: stretch; gap: 0.8rem; padding: 0.6rem 0.9rem 0.6rem 0.6rem; border-left: 2px solid rgba(var(--team-rgb), 0.6);
  background: linear-gradient(90deg, rgba(3, 8, 13, 0.62), rgba(3, 8, 13, 0.3) 70%, transparent); }
.veh.on { display: flex; }
.veh-sil { width: 6.2rem; height: 6.2rem; flex: none; border: 1px solid rgba(255, 255, 255, 0.12); background: radial-gradient(circle, rgba(var(--team-rgb), 0.1), rgba(0, 0, 0, 0.3) 70%); }
.veh-sil svg { width: 100%; height: 100%; overflow: visible; }
.veh-sil .hull { fill: rgba(var(--team-rgb), 0.24); stroke: rgba(var(--team-rgb), 0.95); stroke-width: 1.2; stroke-linejoin: round; }
.veh-sil .trk { fill: rgba(10, 16, 24, 0.75); stroke: rgba(255, 255, 255, 0.5); stroke-width: 0.9; }
.veh-sil .trd { stroke: rgba(255, 255, 255, 0.22); stroke-width: 0.7; fill: none; }
.veh-sil .det { fill: none; stroke: rgba(var(--team-rgb), 0.55); stroke-width: 0.8; stroke-linecap: round; }
.veh-sil rect.det { fill: rgba(var(--team-rgb), 0.18); }
.veh-sil .tur { fill: rgba(236, 244, 250, 0.92); stroke: rgba(10, 16, 24, 0.9); stroke-width: 0.8; stroke-linejoin: round; }
.veh-sil .gun { stroke: #f2f7fb; stroke-width: 2.4; stroke-linecap: butt; fill: none; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)); }
.veh-sil .gun.thick { stroke-width: 3.4; }
.veh-sil .muz { fill: #f2f7fb; stroke: rgba(10, 16, 24, 0.9); stroke-width: 0.6; }
.veh-sil .hatch { fill: rgba(var(--team-rgb), 0.6); stroke: rgba(10, 16, 24, 0.8); stroke-width: 0.6; }
.veh-sil .fov { fill: rgba(255, 255, 255, 0.1); }
.veh-sil .fwd { fill: rgba(255, 255, 255, 0.55); }
/* emplacements: no speedometer; the bearing becomes the big readout */
.veh.emplaced .veh-arc { display: none; }
.veh.emplaced .veh-gauge { padding-left: 0.4rem; }
.veh.emplaced .veh-gauge .veh-row { flex-direction: column-reverse; gap: 0.3rem; }
.veh.emplaced .veh-brg { font: 700 2.3rem/0.85 var(--font-display); font-variant-numeric: tabular-nums; color: #fff; }
.veh.mid .veh-sil .hull { fill: rgba(255, 190, 60, 0.25); stroke: #ffc451; }
.veh.lo .veh-sil .hull { fill: rgba(255, 70, 50, 0.3); stroke: #ff5a48; animation: blink 0.8s infinite; }
.veh-gauge { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.35rem; min-width: 0; padding-left: 8.6rem; min-height: 6.2rem; }
.veh-gauge .veh-row { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
.veh-gauge .veh-row .veh-lbl { margin-left: 0; }
.veh-gauge .veh-gear { width: 1.9rem; height: 1.9rem; font-size: var(--fs-md); }
.veh-arc { position: absolute; left: 0; top: -0.2rem; width: 7.8rem; height: 5.8rem; }
.veh-arc svg { width: 100%; height: 100%; overflow: visible; }
.veh-arc .bg { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 5; }
.veh-arc .val { fill: none; stroke: var(--team); stroke-width: 5; filter: drop-shadow(0 0 3px rgba(var(--team-rgb), 0.85)); transition: stroke-dasharray 120ms linear; }
.veh.rev .veh-arc .val { stroke: var(--amber); filter: drop-shadow(0 0 3px rgba(var(--amber-rgb), 0.85)); }
.veh-arc .tk { stroke: rgba(255, 255, 255, 0.4); stroke-width: 0.9; }
.veh-arc .tk.mj { stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.4; }
.veh-gauge .veh-sp { position: absolute; left: 0; width: 7.8rem; top: 1.75rem; justify-content: center; flex-direction: column; align-items: center; gap: 0.1rem; }
.veh-sp { display: flex; align-items: baseline; gap: 0.4rem; }
.veh-spd { font: 700 2.3rem/0.85 var(--font-display); font-variant-numeric: tabular-nums; }
.veh-sp small { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.22em; color: var(--text-dim); text-transform: uppercase; }
.veh-thr { position: relative; height: 0.4rem; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.veh-thr i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, rgba(var(--team-rgb), 0.6), rgba(var(--team-rgb), 1)); box-shadow: 0 0 0.5rem rgba(var(--team-rgb), 0.8); }
.veh.rev .veh-thr i { background: linear-gradient(90deg, rgba(255, 181, 71, 0.6), #ffb547); }
.veh-row { display: flex; align-items: center; gap: 0.5rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.18em; color: var(--text-dim); text-transform: uppercase; }
.veh-gear { width: 1.45rem; height: 1.45rem; display: grid; place-items: center; font: 700 var(--fs-sm)/1 var(--font-mono); color: #031019; background: var(--team); letter-spacing: 0; }
.veh.rev .veh-gear { background: var(--amber); }
.veh-lbl { margin-left: auto; }
.veh-brg { color: var(--text); letter-spacing: 0; font-size: var(--fs-xs); }
.veh.emplaced .veh-sp, .veh.emplaced .veh-thr, .veh.emplaced .veh-gear { display: none; }

/* weapon */
.wp { display: flex; flex-direction: column; align-items: flex-end; gap: 0.32rem; padding: 0.6rem 1rem 0.7rem 2rem; border-right: 2px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(270deg, rgba(3, 8, 13, 0.68), rgba(3, 8, 13, 0.38) 62%, rgba(3, 8, 13, 0)); }
.wp-top { display: flex; align-items: center; gap: 0.55rem; }
.wp-name { font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.24em; color: var(--text); text-transform: uppercase; }
.wp-mode { padding: 0.18rem 0.4rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.18em; color: var(--text-2); text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.25); }
.wp-mid { display: flex; align-items: flex-end; gap: 0.9rem; }
.wp-art { width: 9rem; height: 2.7rem; margin-bottom: 0.25rem; opacity: 0.92; }
.wp-art:empty { display: none; }
.wart { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.35)); }
.wart .b { fill: rgba(232, 240, 247, 0.9); }
.wart .tp { fill: rgba(180, 196, 210, 0.8); }
.wart .ac { fill: var(--team); filter: drop-shadow(0 0 2px rgba(var(--team-rgb), 0.9)); }
.wp.reloading .wart .b { fill: rgba(232, 240, 247, 0.45); }
.wp.empty .wart .b { fill: rgba(255, 140, 130, 0.7); }
.wp-ammo { display: flex; align-items: baseline; gap: 0.35rem; margin-top: 0.15rem; }
.wp-cur { font: 700 3.7rem/0.82 var(--font-display); font-variant-numeric: tabular-nums; color: #fff; }
.wp-cur.tick { animation: ammoTick 110ms ease-out; }
@keyframes ammoTick { 0% { transform: translateY(-2px); opacity: 0.75; } 100% { transform: none; opacity: 1; } }
.wp-max { font: 600 var(--fs-lg)/1 var(--font-mono); color: var(--text-dim); }
.wp.low .wp-cur { color: var(--amber); }
.wp.empty .wp-cur { color: #ff5a48; animation: blink 0.6s infinite; }
.wp-pips { display: flex; gap: 2px; height: 0.45rem; width: 14rem; }
.wp-pips i { flex: 1; background: rgba(255, 255, 255, 0.88); box-shadow: 0 0 0.25rem rgba(255, 255, 255, 0.35); }
.wp-pips i.off { background: rgba(255, 255, 255, 0.13); box-shadow: none; }
.wp.low .wp-pips i:not(.off) { background: var(--amber); }
.wp-pips.bar { background: rgba(255, 255, 255, 0.13); }
.wp-pips.bar i { transform-origin: 100% 50%; }
.wp.single .wp-pips { width: 5rem; }
.wp-reload { display: flex; align-items: center; gap: 0.6rem; min-height: 1rem; }
.wp-rt { position: relative; width: 9rem; height: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; opacity: 0; }
.wp-rt i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--amber); box-shadow: 0 0 0.4rem rgba(var(--amber-rgb), 0.8); }
.wp.reloading .wp-rt { opacity: 1; }
.wp-rl { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.26em; color: var(--amber); text-transform: uppercase; }
.wp.needreload .wp-rl { animation: blink 0.8s infinite; }
.wp-nades { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.15rem; }
.wp-nades .kbd { height: 1.45em; min-width: 1.45em; font-size: var(--fs-2xs); margin-right: 0.2rem; }
.wp-nicons { display: flex; gap: 0.2rem; }
.wp-nicons .ico-wrap .ico { width: 1.3rem; height: 1.3rem; color: #fff; }
.wp-nicons .ico-wrap.off .ico { color: rgba(255, 255, 255, 0.2); }
.wp.f-equip .wp-top, .wp.f-equip .wp-ammo { animation: wpEquip 380ms var(--ease-out) both; }
@keyframes wpEquip { from { opacity: 0; transform: translateX(1.2rem); } to { opacity: 1; transform: none; } }
.wp.f-nade .wp-nicons { animation: wpNade 420ms ease-out; }
@keyframes wpNade { 0% { filter: brightness(2.4) drop-shadow(0 0 0.4rem #fff); } 100% { filter: none; } }
.wp-nl { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.2em; color: var(--text-dim); text-transform: uppercase; margin-left: 0.2rem; }

/* vehicle / emplacement gun reticle: where the barrel's current aim puts a round (positioned by translate) */
.gunret { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; display: none; --gc: rgba(210, 244, 255, 0.95); }
.gunret.on { display: block; }
.gunret svg { position: absolute; left: -1.35rem; top: -1.35rem; width: 2.7rem; height: 2.7rem; overflow: visible; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85)); }
.gunret circle { fill: none; stroke: var(--gc); stroke-width: 1.6; }
.gunret path { stroke: var(--gc); stroke-width: 1.8; stroke-linecap: round; }
.gunret .pip { fill: var(--gc); stroke: none; }
.gunret .gl { position: absolute; left: 1.7rem; top: -0.45rem; font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--gc); text-shadow: 0 1px 2px #000; white-space: nowrap; }
.gunret.slew { --gc: rgba(255, 196, 82, 0.95); }
.gunret.slew circle { stroke-dasharray: 4 3; }
.gunret.bad { --gc: rgba(255, 92, 92, 0.95); }
.gunret.edge svg { opacity: 0.75; }
.aimstate { position: absolute; left: 50%; top: calc(50% + 2.4rem); transform: translateX(-50%); padding: 0.22rem 0.6rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: #d9f4ff; background: rgba(4, 8, 13, 0.6); border: 1px solid rgba(255, 255, 255, 0.18); pointer-events: none; opacity: 0; transition: opacity 150ms; white-space: pre; }
.aimstate.on { opacity: 1; }
.xh.free { opacity: 0.12; }
.freelook { position: absolute; left: 50%; top: calc(50% + 4.4rem); transform: translateX(-50%); display: flex; align-items: center; gap: 0.45rem; padding: 0.28rem 0.65rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: #d9f4ff; background: rgba(4, 8, 13, 0.62); border: 1px solid rgba(var(--team-rgb), 0.5); pointer-events: none; opacity: 0; transition: opacity 150ms; white-space: nowrap; }
.freelook.on { opacity: 1; }
.freelook .ico { width: 1rem; height: 1rem; color: var(--team); }
.freelook .kbd { height: 1.4em; font-size: var(--fs-2xs); }
.freelook small { font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.12em; color: var(--text-dim); }
.aimstate.bad { color: #ffb3b3; border-color: rgba(255, 92, 92, 0.6); }

/* --- compass + objective strip */
.compass { position: absolute; left: 50%; top: calc(var(--hud-pad) - 0.3rem); width: 42rem; height: 6rem; transform: translateX(-50%); pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, rgba(2, 5, 9, 0.5), rgba(2, 5, 9, 0.16) 60%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.compass .strip { position: absolute; left: 0; top: 1.35rem; height: 1.7rem; will-change: transform; }
.compass .tick { position: absolute; top: 0; width: 1px; height: 0.42rem; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 2px rgba(0, 0, 0, 0.8); }
.compass .tick.major { height: 0.7rem; background: rgba(255, 255, 255, 0.9); }
.compass .lbl { position: absolute; top: 0.8rem; transform: translateX(-50%); font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.8); }
.compass .lbl.card { color: #fff; font-size: var(--fs-sm); top: 0.72rem; }
.compass .lbl.card.n { color: var(--amber); }
.compass .needle { position: absolute; left: 50%; top: 1.05rem; width: 0; height: 0; margin-left: -0.32rem; border: 0.32rem solid transparent; border-top: 0.42rem solid var(--amber); filter: drop-shadow(0 0 3px rgba(var(--amber-rgb), 0.8)); }
.compass .hdg { position: absolute; left: 50%; top: 0.05rem; transform: translateX(-50%); font: 700 var(--fs-xs)/1 var(--font-mono); color: var(--amber); padding: 0.12rem 0.4rem; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(var(--amber-rgb), 0.45); }
.compass .marks { position: absolute; left: 0; right: 0; top: 3.15rem; height: 2.8rem; }
.cmark { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 0.25rem; font: 700 var(--fs-2xs)/1 var(--font-mono); color: var(--mc, #fff); text-shadow: 0 1px 2px #000; will-change: transform; white-space: nowrap; }
.cmark .mic { display: inline-flex; }
.cmark .ico { width: 1.05rem; height: 1.05rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)); }
.cmark .dist { color: rgba(255, 255, 255, 0.85); }
.cmark .cpl { font: 700 var(--fs-xs)/1 var(--font-display); width: 1.15rem; height: 1.15rem; display: grid; place-items: center; border: 1.5px solid var(--mc); background: rgba(0, 0, 0, 0.5); transform: rotate(45deg); color: var(--mc); }
.cmark .cpl span { transform: rotate(-45deg); }
.fps-top-cps { position: absolute; left: 50%; top: calc(var(--hud-pad) + 5.75rem); transform: translateX(-50%); display: flex; gap: 0.55rem; pointer-events: none; transition: opacity 150ms; }
.fps-top-cps .cp { width: 2rem; height: 2rem; font-size: var(--fs-sm); }
.fps-top-cps .cps-n { font-size: var(--fs-md); text-shadow: 0 1px 2px #000, 0 0 0.6rem rgba(0, 0, 0, 0.5); }

/* --- in-world markers (positioned by worldmarkers.js with translate3d; content anchored above the point) */
.wm { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wmk { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; --mc: #fff; }
.wmk > * { position: absolute; }
.wmk .meta { left: 0; top: 0.35rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.15rem; white-space: nowrap; text-shadow: var(--hud-shadow); }
.wmk .dst { font: 700 var(--fs-2xs)/1 var(--font-mono); color: rgba(255, 255, 255, 0.92); }
.wmk .arw { display: none; left: -0.4rem; top: -0.4rem; width: 0.8rem; height: 0.8rem; }
.wmk .arw::after { content: ''; position: absolute; left: 1.55rem; top: 0.05rem; border: 0.35rem solid transparent; border-left: 0.5rem solid var(--mc); filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8)); }
.wmk.edge .arw { display: block; }
/* control point */
.wmk.cpm .dia { left: -1.15rem; top: -2.45rem; width: 2.3rem; height: 2.3rem; overflow: visible; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)); }
.wmk.cpm .dia .bg { fill: rgba(4, 9, 14, 0.62); stroke: var(--mc); stroke-width: 2.2; }
.wmk.cpm .dia .pr { fill: none; stroke: var(--cc, #fff); stroke-width: 3.2; }
.wmk.cpm .ltr { left: 0; top: -1.3rem; transform: translate(-50%, -50%); font: 700 var(--fs-md)/1 var(--font-display); color: var(--mc); text-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.9); }
.wmk.cpm .stt { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: #fff; padding: 0.14rem 0.35rem; background: rgba(4, 9, 14, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); }
.wmk.cpm.hostile .stt { border-color: rgba(var(--enemy-rgb), 0.7); color: #ffd0c8; }
.wmk.cpm.contested .stt { border-color: rgba(var(--amber-rgb), 0.9); color: var(--amber); animation: blink 0.7s infinite; }
.wmk.cpm.mine .dia .bg { fill: rgba(var(--team-rgb), 0.25); }
.wmk.cpm.edge .dia { transform: scale(0.85); }
.wmk.cpm.edge .arw { top: -1.7rem; }
/* a commander's standing order placed on the point: order-coloured pulse around the diamond + the order chip */
.wmk.cpm .oring { display: none; left: -0.66rem; top: -1.96rem; width: 1.32rem; height: 1.32rem; border: 2px solid var(--oc, #fff); opacity: 0; }
.wmk.cpm.ord .oring { display: block; animation: orderRing 2.4s ease-out infinite; }
.wmk.cpm .ordc { display: none; align-items: center; gap: 0.3rem; padding: 0.14rem 0.42rem 0.14rem 0.32rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--oc, #fff); background: rgba(4, 9, 14, 0.74); border: 1px solid var(--oc, #fff); box-shadow: 0 0 0.55rem -0.15rem var(--oc, #fff); }
.wmk.cpm.ord .ordc { display: inline-flex; }
.wmk.cpm .ordc .oic { display: inline-flex; }
.wmk.cpm .ordc .ico { width: 0.8rem; height: 0.8rem; }
/* ping */
.wmk.ping .pic { left: -0.9rem; top: -2.25rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; color: var(--mc); background: rgba(4, 9, 14, 0.62); border: 1.5px solid var(--mc); border-radius: 50%; box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.5); }
.wmk.ping .pic .ico { width: 1.1rem; height: 1.1rem; }
.wmk.ping .pring { left: -0.9rem; top: -2.25rem; width: 1.8rem; height: 1.8rem; border: 2px solid var(--mc); border-radius: 50%; opacity: 0; }
.wmk.ping.arrive .pring { animation: pingRing 1.1s ease-out 2; }
@keyframes pingRing { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.wmk.ping .meta b { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--mc); }
.wmk.ping .who { font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.8); }
.wmk.ping.cmdr .who { color: #8fd8ff; }
.wmk.ping.edge .arw { top: -1.75rem; }
.wmk.ping.edge .meta .who { display: none; }
/* spotted enemy */
.wmk.spot .sdia { display: none; }
@keyframes spotPulse { 50% { box-shadow: 0 0 1rem rgba(255, 40, 40, 0.95); } }
.wmk.spot .dst { left: 0; top: 0.1rem; transform: translateX(-50%); padding: 0.1rem 0.3rem; color: #ffd0d0; background: rgba(60, 6, 6, 0.55); text-shadow: var(--hud-shadow); }
.wmk.cpm.near .meta { opacity: 0; }
/* teammate nameplate */
.wmk.mate .nm { left: 0; top: -1.5rem; transform: translateX(-50%); display: flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; text-shadow: var(--hud-shadow); }
.wmk.mate .nm b { font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.06em; color: var(--team); }
.wmk.mate .nm span { font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; }
.wmk.mate .hb { left: -1.8rem; top: -0.45rem; width: 3.6rem; height: 3px; background: rgba(0, 0, 0, 0.6); }
.wmk.mate .hb i { display: block; height: 100%; background: var(--team); transform-origin: 0 50%; }
.wmk.mate.lo .hb i { background: #ff5a48; }

/* standing order (commander move / attack / defend ping): strip under the objective row + objective marker */
.orderstrip { position: absolute; left: 50%; top: calc(var(--hud-pad) + 8.3rem); transform: translateX(-50%) translateY(-0.35rem); min-width: 17rem; display: flex; align-items: center; gap: 0.65rem; padding: 0.38rem 0.85rem 0.45rem 0.45rem;
  pointer-events: none; opacity: 0; transition: opacity 200ms, transform 220ms var(--ease-out), top 240ms var(--ease-out); --mc: #4fd2ff; text-shadow: var(--hud-shadow);
  background: linear-gradient(90deg, rgba(4, 9, 14, 0.8), rgba(4, 9, 14, 0.5) 75%, rgba(4, 9, 14, 0.15)); border-left: 2px solid var(--mc); }
.orderstrip.on { opacity: 1; transform: translateX(-50%); }
.orderstrip.below { top: calc(var(--hud-pad) + 11.4rem); }
.orderstrip .odia { width: 1.65rem; height: 1.65rem; flex: none; display: grid; place-items: center; transform: rotate(45deg); border: 1.5px solid var(--mc); background: rgba(4, 9, 14, 0.75); box-shadow: 0 0 0.6rem -0.1rem var(--mc); }
.orderstrip .odia .ico { width: 0.95rem; height: 0.95rem; color: var(--mc); transform: rotate(-45deg); }
.orderstrip .ot { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.orderstrip .ok { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.3em; color: var(--mc); text-transform: uppercase; }
.orderstrip .ol { display: flex; align-items: baseline; gap: 0.55rem; white-space: nowrap; min-width: 0; }
.orderstrip .ol b { font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.14em; color: #fff; text-transform: uppercase; }
.orderstrip .ow { font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.12em; color: #8fd8ff; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.orderstrip .od { flex: none; font: 700 var(--fs-sm)/1 var(--font-mono); color: #fff; }
.orderstrip .olife { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.orderstrip .olife i { position: absolute; inset: 0; transform-origin: 0 50%; background: var(--mc); opacity: 0.7; transition: transform 200ms linear; }
.orderstrip.fresh .odia { animation: orderIn 1.2s var(--ease-out); }
@keyframes orderIn { 0% { box-shadow: 0 0 0 0 var(--mc); filter: brightness(2); } 40% { box-shadow: 0 0 0 0.7rem transparent; } 100% { box-shadow: 0 0 0.6rem -0.1rem var(--mc); filter: none; } }
.lyr.fps.scoped .orderstrip { opacity: 0; }
.wmk.order .pic { left: -1.05rem; top: -2.7rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; color: var(--mc); background: rgba(4, 9, 14, 0.66); border: 2px solid var(--mc); transform: rotate(45deg); box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.5), 0 0 0.6rem -0.2rem var(--mc); }
.wmk.order .pic .ico { width: 1.1rem; height: 1.1rem; transform: rotate(-45deg); }
.wmk.order .oring { left: -1.05rem; top: -2.7rem; width: 2.1rem; height: 2.1rem; border: 2px solid var(--mc); transform: rotate(45deg); opacity: 0; animation: orderRing 2.4s ease-out infinite; }
@keyframes orderRing { 0% { opacity: 0.75; transform: rotate(45deg) scale(1); } 70%, 100% { opacity: 0; transform: rotate(45deg) scale(2.1); } }
.wmk.order .meta { top: 0.15rem; }
.wmk.order .meta b { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mc); }
.wmk.order.edge .arw { top: -2.05rem; }
.cmark.order .ico { width: 1.25rem; height: 1.25rem; filter: drop-shadow(0 0 0.35rem var(--mc)); }
.cmark.order .dist { color: #fff; }

/* capture bar */
.capbar { position: absolute; left: 50%; top: calc(var(--hud-pad) + 8.5rem); width: 21rem; transform: translateX(-50%) translateY(-0.4rem); opacity: 0; pointer-events: none; transition: opacity 180ms, transform 180ms var(--ease-out); --cc: #fff; text-shadow: var(--hud-shadow); }
.capbar.on { opacity: 1; transform: translateX(-50%); }
.capbar .ch { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.capbar .cdia { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; transform: rotate(45deg); border: 2px solid var(--cc); background: rgba(4, 9, 14, 0.6); }
.capbar .cl { transform: rotate(-45deg); font: 700 var(--fs-sm)/1 var(--font-display); color: var(--cc); }
.capbar b { flex: 1; font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.24em; text-transform: uppercase; color: #fff; }
.capbar .pc { font: 700 var(--fs-sm)/1 var(--font-mono); color: var(--cc); }
.capbar .ctrack { position: relative; height: 0.4rem; background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); overflow: hidden; }
.capbar .ctrack i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--cc); box-shadow: 0 0 0.6rem var(--cc); transition: transform 200ms linear; }
.capbar[data-state='contested'] b { color: var(--amber); animation: blink 0.8s infinite; }
.capbar[data-state='losing'] b { color: #ffb3a8; }

/* interaction prompt */
.iprompt { position: absolute; left: 50%; top: calc(50% + 4.6rem); transform: translateX(-50%); display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.85rem 0.45rem 0.5rem; pointer-events: none; opacity: 0; transition: opacity 140ms;
  background: rgba(4, 9, 14, 0.66); border: 1px solid rgba(var(--team-rgb), 0.5); text-shadow: var(--hud-shadow); }
.iprompt.on { opacity: 1; }
.iprompt .kbd { height: 1.7em; min-width: 1.7em; font-size: var(--fs-xs); }
.iprompt .pw { display: flex; flex-direction: column; gap: 0.2rem; }
.iprompt .pt { font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: #fff; }
.iprompt .ps { font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--text-2); }

/* target tag */
.nametag { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 120ms; text-shadow: var(--hud-shadow); will-change: transform; }
.nametag .nt-in { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.25rem; white-space: nowrap; }
.nametag.on { opacity: 1; }
.nametag .nt { display: flex; align-items: baseline; gap: 0.5rem; font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.1em; color: var(--nc, #fff); text-transform: uppercase; }
.nametag .nt .d { font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--text-2); letter-spacing: 0; }
.nametag .nb { width: 5.5rem; height: 3px; background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
.nametag .nb i { display: block; height: 100%; background: var(--nc, #fff); transform-origin: 0 50%; }
.nametag .spot { display: flex; align-items: center; gap: 0.35rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.18em; color: #ff8d8d; text-transform: uppercase; }
.nametag .spot .kbd { height: 1.4em; min-width: 1.4em; font-size: var(--fs-2xs); }

/* hints, banners, link transition */
.fps-hints { position: absolute; left: 50%; bottom: calc(var(--hud-pad) + 0.3rem); transform: translateX(-50%); display: flex; gap: 1.2rem; pointer-events: none; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; color: var(--text-2); text-transform: uppercase; text-shadow: var(--hud-shadow); transition: opacity 1.2s; }
.fps-hints.quiet { opacity: 0.38; }
.fps-hints > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.fps-hints .kbd { height: 1.45em; min-width: 1.45em; font-size: var(--fs-2xs); }
.lyr.fps.driving .fps-hints { bottom: calc(var(--hud-pad) + 0.1rem); }
.linkbanner { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; text-shadow: 0 0 1rem rgba(0, 0, 0, 0.6); }
.linkbanner.show { animation: linkIn 2.6s var(--ease) both; }
.linkbanner .lb-line { width: 18rem; height: 1px; margin: 0 auto 0.8rem; background: linear-gradient(90deg, transparent, #ffcf7a, transparent); }
.linkbanner .k { font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.5em; padding-left: 0.5em; color: #ffcf7a; text-transform: uppercase; }
.linkbanner .u { margin-top: 0.55rem; font: 700 var(--fs-2xl)/1 var(--font-display); letter-spacing: 0.16em; padding-left: 0.16em; text-transform: uppercase; color: #fff; }
.linkbanner .s { margin-top: 0.5rem; font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.3em; color: var(--text-2); text-transform: uppercase; }
@keyframes linkIn { 0% { opacity: 0; transform: translateX(-50%) scale(1.15); filter: blur(6px); } 10% { opacity: 1; transform: translateX(-50%); filter: none; } 72% { opacity: 1; transform: translateX(-50%); } 86%, 100% { opacity: 0; transform: translateX(-50%) translateY(-0.8rem); } }
.linkfx { position: absolute; inset: 0; pointer-events: none; opacity: 0; background:
  linear-gradient(180deg, transparent 0%, rgba(140, 220, 255, 0.0) 40%, rgba(170, 230, 255, 0.35) 50%, rgba(140, 220, 255, 0.0) 60%, transparent 100%) 0 -120% / 100% 60% no-repeat,
  repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
  radial-gradient(ellipse at center, rgba(120, 200, 255, 0.12), rgba(2, 6, 10, 0.75) 80%); }
.linkfx.in { animation: linkFxIn 700ms var(--ease-out) both; }
.linkfx.out { animation: linkFxOut 520ms var(--ease) both; }
@keyframes linkFxIn { 0% { opacity: 1; background-position: 0 -60%, 0 0, 0 0; filter: brightness(1.8); } 70% { opacity: 0.6; background-position: 0 160%, 0 0, 0 0; } 100% { opacity: 0; background-position: 0 220%, 0 0, 0 0; filter: none; } }
@keyframes linkFxOut { 0% { opacity: 0; } 30% { opacity: 1; filter: brightness(0.6); } 100% { opacity: 0; } }
.engage { position: absolute; left: 50%; top: 71%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem; font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.24em; color: #fff; text-transform: uppercase; background: rgba(4, 8, 13, 0.7); border: 1px solid rgba(var(--team-rgb), 0.55); pointer-events: none; opacity: 0; transition: opacity 200ms; }
.engage .kbd { font-size: var(--fs-2xs); }

/* Comm rose */
.commrose { position: absolute; left: 50%; top: 50%; width: 22rem; height: 22rem; margin: -11rem 0 0 -11rem; pointer-events: none; opacity: 0; transform: scale(0.85); transition: opacity 120ms, transform 160ms var(--ease-out); }
.commrose.on { opacity: 1; transform: none; }
.commrose > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0.4rem 1rem rgba(0, 0, 0, 0.45)); }
.hud .lyr.fps.rose-open .nametag, .hud .lyr.fps.rose-open .killconf { opacity: 0 !important; }
.commrose .sec { fill: rgba(5, 10, 16, 0.74); stroke: rgba(150, 210, 255, 0.28); stroke-width: 1; transition: fill 100ms, stroke 100ms; }
.commrose .sec.hot { fill: rgba(var(--team-rgb), 0.42); stroke: rgba(var(--team-rgb), 1); }
.commrose .opt { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); text-shadow: 0 1px 2px #000; transition: color 100ms, transform 120ms var(--ease-out); }
.commrose .opt .ico { width: 1.8rem; height: 1.8rem; }
.commrose .opt.hot { color: #fff; transform: translate(-50%, -50%) scale(1.08); }
.commrose .center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 5.6rem; height: 5.6rem; display: grid; place-items: center; text-align: center; border-radius: 50%; background: rgba(4, 8, 13, 0.6); font: 700 var(--fs-2xs)/1.3 var(--font-ui); letter-spacing: 0.2em; color: var(--text-dim); text-transform: uppercase; }
.commrose .cursor { position: absolute; left: 50%; top: 50%; width: 0.6rem; height: 0.6rem; margin: -0.3rem; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; }

/* ================================================================ Deploy screen */
.deploy-panel { position: absolute; left: var(--hud-pad); top: 4.1rem; bottom: var(--hud-pad); width: 27.5rem; display: flex; flex-direction: column; pointer-events: auto; }
.deploy-status { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 1rem; background: linear-gradient(90deg, rgba(var(--amber-rgb), 0.1), transparent 70%); }
.deploy-status.ready { background: linear-gradient(90deg, rgba(var(--ok-rgb), 0.1), transparent 70%); }
.deploy-status .ring { position: relative; width: 3.8rem; height: 3.8rem; flex: none; }
.deploy-status .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.deploy-status .ring .trk { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 3; }
.deploy-status .ring .val { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 100ms linear; filter: drop-shadow(0 0 0.3rem rgba(var(--amber-rgb), 0.7)); }
.deploy-status .ring .t { position: absolute; inset: 0; display: grid; place-items: center; font: 700 var(--fs-md)/1 var(--font-mono); }
.deploy-status.ready .ring .val { stroke: var(--ok); filter: drop-shadow(0 0 0.3rem rgba(var(--ok-rgb), 0.7)); }
.deploy-status.ready .ring .t { color: var(--ok); }
.deploy-status .ds-txt { min-width: 0; }
.deploy-status b { display: block; font: 700 var(--fs-lg)/1.1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.deploy-status small { display: block; margin-top: 0.3rem; color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.4; }
.deploy-list { flex: 1; min-height: 0; padding: 0.3rem 0.6rem 0.8rem; }
.dgroup { margin-top: 0.75rem; }
.dgroup h4 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; padding: 0 0.3rem 0.35rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.22em; color: var(--text-2); text-transform: uppercase; }
.dgroup h4 .ico { width: 1.05rem; height: 1.05rem; color: var(--team); }
.dgroup.op h4 .ico { color: #ffcf7a; }
.dgroup h4 .gn { flex: none; white-space: nowrap; }
.dgroup h4 .gw { flex: 1; font-weight: 600; letter-spacing: 0.12em; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dgroup h4 .c { margin-left: auto; font-family: var(--font-mono); letter-spacing: 0; color: var(--text-dim); }
.dopt { width: 100%; display: flex; align-items: center; gap: 0.65rem; padding: 0.3rem 0.55rem 0.3rem 0.3rem; margin-bottom: 0.22rem; border: 1px solid rgba(255, 255, 255, 0.07); background: linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)); color: var(--text); text-align: left; transition: border-color var(--t), background var(--t), transform var(--t) var(--ease); }
.dopt .ic { position: relative; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; color: var(--team); flex: none; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(var(--team-rgb), 0.24), rgba(4, 8, 13, 0.9) 75%); border: 1px solid rgba(var(--team-rgb), 0.35); }
.dopt .ic .ico { width: 1.55rem; height: 1.55rem; }
.dopt .ic .pimg { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dopt .ic.has-img .pimg { display: block; }
.dopt .ic.has-img .ico { display: none; }
.dgroup:not(.op) .dopt .ic.has-img .pimg { transform: scale(1.2); }
.dopt .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.22rem; }
.dopt .body .r1, .dopt .body .r2 { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; }
.dopt .body b { display: block; min-width: 0; font: 700 var(--fs-sm)/1.05 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dopt .body .loc { min-width: 0; font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.12em; color: var(--text-dim); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dopt .body .dist { flex: none; margin-left: auto; font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--text-mute); }
.dopt .body .bar { margin-top: 0.1rem; height: 0.2rem; max-width: 11rem; opacity: 0.85; }
.dopt .body .tag { flex: none; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: #031019; background: var(--team); padding: 0.12rem 0.3rem; }
.dopt .body .tag:empty { display: none; }
.dopt.queued .body .tag { background: #ffcf7a; color: #1b1100; animation: pulse 1.2s infinite; }
.dopt .body .fire { display: none; flex: none; align-items: center; gap: 0.2rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.14em; color: #ff8a92; text-transform: uppercase; }
.dopt .body .fire .ico { width: 0.85rem; height: 0.85rem; }
.dopt.hot .body .fire { display: inline-flex; }
.dopt.hot .ic { border-color: rgba(var(--bad-rgb), 0.75); animation: doptHot 1s ease-in-out infinite; }
@keyframes doptHot { 50% { box-shadow: 0 0 0.6rem rgba(var(--bad-rgb), 0.75); } }
.dopt.focus { border-color: rgba(var(--team-rgb), 0.95); background: linear-gradient(90deg, rgba(var(--team-rgb), 0.26), rgba(var(--team-rgb), 0.05)); box-shadow: inset 3px 0 0 var(--team), 0 0 1rem -0.3rem rgba(var(--team-rgb), 0.7); }
.dopt.focus .go { background: var(--team); color: #031019; border-color: var(--team); }
.dopt.operative.focus { border-color: #ffcf7a; background: rgba(255, 207, 122, 0.2); box-shadow: inset 3px 0 0 #ffcf7a, 0 0 1rem -0.3rem rgba(255, 207, 122, 0.7); }
.dopt.operative.focus .go { background: #ffcf7a; color: #1b1100; border-color: #ffcf7a; }
.dopt.focus:disabled { opacity: 0.78; }
.dopt.linking .go { animation: pulse 0.8s infinite; }
.dopt .why { font: 600 var(--fs-2xs)/1.2 var(--font-ui); letter-spacing: 0.12em; color: var(--text-mute); text-transform: uppercase; text-align: right; max-width: 8rem; }
.dopt .go { flex: none; height: 1.75rem; padding: 0 0.45rem 0 0.6rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.18em; color: var(--team); text-transform: uppercase; border: 1px solid rgba(var(--team-rgb), 0.38); background: rgba(var(--team-rgb), 0.07); transition: background var(--t), color var(--t), border-color var(--t); display: inline-flex; align-items: center; gap: 0.2rem; }
.dopt:hover:not(:disabled) .go { background: var(--team); color: #031019; border-color: var(--team); }
.dopt:hover:not(:disabled) { border-color: rgba(var(--team-rgb), 0.8); background: linear-gradient(90deg, rgba(var(--team-rgb), 0.2), rgba(var(--team-rgb), 0.04)); transform: translateX(0.25rem); }
.dopt:disabled { cursor: default; opacity: 0.5; }
.dopt.operative { border-color: rgba(255, 207, 122, 0.4); background: linear-gradient(90deg, rgba(255, 207, 122, 0.13), rgba(255, 207, 122, 0.02)); }
.dopt.operative .ic { color: #ffcf7a; border-color: rgba(255, 207, 122, 0.55); background: radial-gradient(circle at 50% 35%, rgba(255, 207, 122, 0.22), rgba(4, 8, 13, 0.9) 75%); }
.dopt.operative .go { color: #ffcf7a; border-color: rgba(255, 207, 122, 0.5); background: rgba(255, 207, 122, 0.1); }
.dopt.operative:hover:not(:disabled) .go { background: #ffcf7a; color: #1b1100; border-color: #ffcf7a; }
.dopt.operative:hover:not(:disabled) { border-color: #ffcf7a; background: rgba(255, 207, 122, 0.2); }
.dmore { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.35rem; height: 1.9rem; margin-bottom: 0.2rem; border: 1px dashed rgba(255, 255, 255, 0.12); background: transparent; color: var(--text-dim);
  font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; transition: color var(--t), border-color var(--t); }
.dmore:hover { color: #fff; border-color: rgba(var(--team-rgb), 0.7); }
.dmore .ico { width: 0.9rem; height: 0.9rem; transform: rotate(90deg); }
.deploy-keys { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.7rem 1rem; border-top: 1px solid var(--line); font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase; }
.deploy-keys span { display: inline-flex; align-items: center; gap: 0.3rem; }
.deploy-keys .kbd { height: 1.45em; min-width: 1.45em; font-size: var(--fs-2xs); }
.deploy-hint { position: absolute; left: calc(50% + 14rem); top: 4.4rem; transform: translateX(-50%); display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 1.3rem 0.65rem; pointer-events: none; max-width: min(46rem, calc(100% - 32rem)); }
.deploy-hint { transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.deploy-hint.muted { opacity: 0; transform: translateX(-50%) translateY(-0.6rem); }
.deploy-hint .ico { width: 1.6rem; height: 1.6rem; color: #ffcf7a; }
.deploy-hint b { display: block; font: 700 var(--fs-md)/1 var(--font-ui); letter-spacing: 0.22em; text-transform: uppercase; color: #fff; }
.deploy-hint small { display: block; margin-top: 0.3rem; font: 500 var(--fs-xs)/1.35 var(--font-body); color: var(--text-dim); }
.hud[data-mode='deploy'] .hud-toasts { left: calc(50% + 14rem); }
/* relink lockout · death recap (centre of the battlefield view, under the camera focus) */
.deploy-big { position: absolute; left: calc(50% + 14rem); bottom: calc(var(--hud-pad) + 5rem); transform: translateX(-50%); width: 34rem; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none;
  padding: 1.2rem 2.4rem 1.3rem; background: radial-gradient(farthest-side at 50% 60%, rgba(3, 6, 10, 0.72), rgba(3, 6, 10, 0.4) 55%, rgba(3, 6, 10, 0) 100%); text-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.6); animation: dbIn 380ms var(--ease-out) both; }
.deploy-big.hidden { display: none; }
@keyframes dbIn { from { opacity: 0; transform: translateX(-50%) translateY(0.8rem); } to { opacity: 1; transform: translateX(-50%); } }
.deploy-big .k { font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.45em; padding-left: 0.45em; color: var(--amber); text-transform: uppercase; }
.deploy-big .db-who { margin-top: 0.75rem; text-shadow: none; }
.deploy-big .db-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0.8rem 0.45rem 0.45rem; text-align: left;
  background: linear-gradient(90deg, rgba(var(--enemy-rgb), 0.2), rgba(4, 8, 13, 0.7) 60%); border-left: 2px solid rgba(var(--enemy-rgb), 0.9); }
.deploy-big.lost .k { color: #ff6b6b; font-size: var(--fs-sm); letter-spacing: 0.5em; padding-left: 0.5em; text-shadow: 0 0 0.9rem rgba(255, 60, 60, 0.6); }
.deploy-big .db-pic { position: relative; width: 3.1rem; height: 3.1rem; flex: none; display: grid; place-items: center; overflow: hidden; color: var(--enemy);
  background: radial-gradient(circle at 50% 35%, rgba(var(--enemy-rgb), 0.3), rgba(4, 8, 13, 0.9) 75%); border: 1px solid rgba(var(--enemy-rgb), 0.55); }
.deploy-big .db-pic .ico { width: 1.7rem; height: 1.7rem; }
.deploy-big .db-pic .pimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); }
.deploy-big .db-pic.has-img .ico { display: none; }
.deploy-big .db-id { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.deploy-big .db-id small { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.22em; color: var(--text-dim); text-transform: uppercase; }
.deploy-big .db-id b { font: 700 var(--fs-lg)/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 13rem; }
.deploy-big .db-id span { font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.14em; color: var(--text-2); text-transform: uppercase; white-space: nowrap; }
.deploy-big .db-wpn { width: 6.6rem; height: 2rem; flex: none; margin-left: 0.3rem; opacity: 0.9; }
.deploy-big .db-wpn .wart .ac { fill: var(--enemy); filter: drop-shadow(0 0 2px rgba(var(--enemy-rgb), 0.9)); }
.deploy-big .db-hs { display: inline-flex; align-items: center; gap: 0.25rem; flex: none; padding: 0.2rem 0.4rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; color: #1d1300; background: var(--amber); text-transform: uppercase; }
.deploy-big .db-hs .ico { width: 0.9rem; height: 0.9rem; }
.deploy-big .t { margin: 0.6rem 0 0.35rem; font: 700 var(--fs-3xl)/1 var(--font-display); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; text-shadow: 0 0 1.4rem rgba(var(--amber-rgb), 0.6); }
.deploy-big .db-bar { position: relative; width: 16rem; height: 3px; margin-bottom: 0.55rem; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.deploy-big .db-bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--amber); box-shadow: 0 0 0.5rem rgba(var(--amber-rgb), 0.8); transition: transform 100ms linear; }
.deploy-big .s { font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.3em; color: var(--text-dim); text-transform: uppercase; }
.deploy-big.queued .s { color: #ffcf7a; }


/* ================================================================ Onboarding tips */
.hint-card { position: absolute; right: var(--hud-pad); top: 9.2rem; width: 22rem; padding: 0.85rem 0.95rem 0.75rem; pointer-events: none; opacity: 0; transform: translateX(1.2rem); transition: opacity 260ms var(--ease), transform 320ms var(--ease-out);
  --bc: rgba(var(--amber-rgb), 0.55); }
.hint-card.show { opacity: 1; transform: none; pointer-events: auto; }
.hint-card::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--amber); box-shadow: 0 0 0.6rem rgba(var(--amber-rgb), 0.8); }
.hint-card[data-mode='rts'] { right: auto; left: var(--hud-pad); top: 19rem; transform: translateX(-1.2rem); }
.hint-card[data-mode='rts'].show { transform: none; }
.hint-card[data-mode='fps'] { top: 40%; right: calc(var(--hud-pad) + 5rem + var(--fps-m)); } /* keep the edge-pinned marker column free */
.hint-card[data-mode='deploy'] { top: 13.5rem; }
.hint-card .hn-top { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem; }
.hint-card .hn-ic { width: 2.2rem; height: 2.2rem; flex: none; display: grid; place-items: center; color: var(--amber); background: rgba(var(--amber-rgb), 0.12); border: 1px solid rgba(var(--amber-rgb), 0.45); }
.hint-card .hn-ic .ico { width: 1.35rem; height: 1.35rem; }
.hint-card .hn-tt { flex: 1; min-width: 0; }
.hint-card .hn-k { display: block; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.28em; color: var(--amber); text-transform: uppercase; }
.hint-card .hn-tt b { display: block; margin-top: 0.25rem; font: 700 var(--fs-md)/1.1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.hint-card .hn-step { align-self: flex-start; font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--text-mute); }
.hint-card p { margin: 0; font: 400 var(--fs-xs)/1.55 var(--font-body); color: var(--text-2); }
.hint-card p .kbd { height: 1.55em; min-width: 1.55em; margin: 0 0.12em; font-size: var(--fs-2xs); vertical-align: 0.05em; }
.hint-card .hn-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.7rem; }
.hint-card .hn-off { padding: 0; border: 0; background: none; font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; color: var(--text-mute); text-transform: uppercase; cursor: pointer; }
.hint-card .hn-off:hover { color: var(--text); }