:root {
  --bg: #0b0d10;
  --panel: rgba(14, 17, 21, 0.92);
  --line: rgba(255, 255, 255, 0.1);
  --text: #d9dee3;
  --dim: #8a939c;
  --accent: #ffb02e;
  --accent2: #ff7a1a;
  --good: #3dff7a;
  --bad: #ff4a4a;
  --armor: #4fa3ff;
  --mono: 'Consolas', 'SFMono-Regular', 'Menlo', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 14px/1.4 'Segoe UI', system-ui, sans-serif; user-select: none; }
#c { position: fixed; inset: 0; display: block; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.small { font-size: 12px; }
.red { color: var(--bad); }
b.red { color: var(--bad); }

/* ---------- buttons & inputs ---------- */
.btn { background: #1d2329; color: var(--text); border: 1px solid var(--line); padding: 10px 18px; font: 600 13px var(--mono); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border-radius: 3px; transition: background .12s, border-color .12s; }
.btn:hover:not(:disabled) { background: #283039; border-color: rgba(255, 255, 255, 0.25); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.primary { background: var(--accent); color: #1a1205; border-color: var(--accent); }
.btn.primary:hover:not(:disabled) { background: #ffc35c; }
.btn.small { padding: 6px 12px; font-size: 12px; }
.btn.wide { width: 100%; margin-top: calc(12px * var(--ik, 1)); }
input { background: #0e1216; color: var(--text); border: 1px solid var(--line); padding: 10px 12px; font: 14px var(--mono); border-radius: 3px; width: 100%; outline: none; }
input:focus { border-color: var(--accent); }
input[type=range] { padding: 0; accent-color: var(--accent); }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(0,0,0,0.35), rgba(0,0,0,0.8)); z-index: 20; padding: 16px; overflow-y: auto; }
/* the route map */
.route-box { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 18px 22px; width: 940px; max-width: 100%; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.route-title { font-size: 20px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.route-title span { font-size: 14px; color: var(--muted, #8a949c); font-weight: 400; letter-spacing: 0; text-transform: none; }
#routeMap { overflow-x: auto; overflow-y: hidden; max-width: 100%; scrollbar-color: #4a535b transparent; }
.route-svg { height: min(62vh, calc(620px * var(--ik, 1))); width: auto; max-width: none; display: block; margin: 8px 0; }
.route-svg .rc { fill: #6f7a84; font-size: 11px; letter-spacing: 0.12em; text-anchor: middle; font-weight: 700; }
.route-svg .rl { stroke: #3a424a; stroke-width: 2; stroke-dasharray: 5 5; }
.route-svg .rl.walked { stroke: #d9a441; stroke-dasharray: none; stroke-width: 3; }
.route-svg .rl.open { stroke: #9fb0bc; stroke-dasharray: none; stroke-width: 2.5; }
.route-svg .rn circle:first-of-type { fill: var(--fill); stroke: var(--edge); stroke-width: 3; opacity: 0.45; }
.route-svg .rn .ri { fill: none; stroke: #111; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; opacity: 0.6; }
.route-svg .rn .rt { fill: #6f7a84; font-size: 11px; text-anchor: middle; }
.route-svg .rn.done circle:first-of-type { opacity: 0.8; stroke: #d9a441; }
.route-svg .rn.here circle:first-of-type { opacity: 1; stroke: #d9a441; stroke-width: 4; }
.route-svg .rn.opt { cursor: pointer; }
.route-svg .rn.opt circle:first-of-type { opacity: 1; stroke: #e8eef2; animation: routePulse 1.4s ease-in-out infinite; }
.route-svg .rn.opt .ri { opacity: 0.9; }
.route-svg .rn.opt .rt { fill: #e8eef2; font-weight: 700; }
.route-svg .rn.opt:hover circle:first-of-type { stroke: var(--accent, #d9a441); stroke-width: 5; }
.route-svg .rn.mine circle:first-of-type { stroke: var(--accent, #d9a441); stroke-width: 5; animation: none; }
.route-svg .rn.boss circle:first-of-type { stroke: #c0392b; opacity: 0.9; }
.route-svg .rn.boss .rt { fill: #d36a5e; font-weight: 700; }
.route-svg .rn.boss .rt.sub { fill: #8a949c; font-weight: 400; }
.route-svg .rn.boss .ri { stroke: #e8c040; fill: rgba(232,192,64,0.25); opacity: 1; stroke-width: 1.4; }
.route-svg .rv { stroke: #111; stroke-width: 1.5; }
@keyframes routePulse { 50% { stroke-width: 5; } }
.menu-box { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 28px 32px; width: 420px; max-width: 100%; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.menu-box.wide { width: 640px; }
.menu-box h2 { margin: 0 0 14px; font: 700 22px var(--mono); letter-spacing: 3px; text-transform: uppercase; }
.menu-box label { display: block; margin: 14px 0 6px; font: 600 11px var(--mono); color: var(--dim); letter-spacing: 1.5px; text-transform: uppercase; }
.title { margin: 0; font: 900 44px/0.95 var(--mono); letter-spacing: 4px; color: #fff; }
.title span { display: block; color: var(--accent); font-size: 30px; letter-spacing: 9px; }
.subtitle { color: var(--dim); font: 12px var(--mono); letter-spacing: 2px; text-transform: uppercase; margin-top: 8px; }
.color-row { display: flex; gap: 8px; }
.sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.sw.on { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
/* squad animals: the emblem beside a name, and the picker in the menu */
img.anim { width: 1.25em; height: 1.25em; vertical-align: -0.3em; margin-right: 0.3em; }
.color-row { flex-wrap: wrap; }
.sw.animal { width: auto; height: auto; border-radius: 6px; padding: 3px 8px 3px 4px; background: #1d2024; display: flex; align-items: center; font: inherit; font-size: 12px; }
.sw.animal img.anim { width: 26px; height: 26px; vertical-align: middle; }
.btn-row { display: flex; gap: 10px; margin-top: 20px; }
.btn-row .btn { flex: 1; }
.join-row { display: flex; gap: 10px; margin-top: 10px; }
.join-row input { text-transform: uppercase; letter-spacing: 4px; text-align: center; }
.msg { min-height: 20px; margin-top: 12px; color: var(--dim); font-size: 13px; }
.msg.err { color: var(--bad); }
.settings { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.settings summary { cursor: pointer; color: var(--dim); font: 600 12px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.set-grid label { margin: 10px 0 4px; }
.controls { margin-top: 12px; font-size: 12px; color: var(--dim); line-height: 1.8; }
.controls b { color: var(--text); font-family: var(--mono); }

.code-block { background: #0e1216; border: 1px dashed rgba(255,176,46,0.5); padding: 12px 16px; border-radius: 4px; color: var(--dim); font-size: 12px; }
.code-line { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
#lobbyCode { font: 800 34px var(--mono); letter-spacing: 10px; color: var(--accent); user-select: text; }
.lobby-players { margin-top: 16px; display: grid; gap: 6px; }
.lp { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255,255,255,0.04); border-radius: 3px; font-family: var(--mono); }
.lp i { width: 12px; height: 12px; border-radius: 50%; }
.lp small { color: var(--accent); font-size: 10px; letter-spacing: 1px; }
#gameover table, #scoreboard table { width: 100%; border-collapse: collapse; margin-top: 14px; font-family: var(--mono); }
#gameover th, #scoreboard th { text-align: left; color: var(--dim); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--line); }
#gameover td, #scoreboard td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); }

#clickToPlay { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 15; background: var(--panel); border: 1px solid var(--accent); color: var(--accent); padding: 12px 24px; font: 700 14px var(--mono); letter-spacing: 3px; text-transform: uppercase; cursor: pointer; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }
/* the loading veil (js/game.js veil): over everything, and takes the clicks while it's up. Two layers. The shape: a black panel with slanted top and bottom edges,
   wobbling down the screen like jelly, settling over it, and pulling away off the bottom. --s: how far its edges fall across the screen; --m: how far past the screen it
   reaches, so the wobble never shows round it. What's on it stays still and fades (a jelly's for the edges, not the words).
   It's covered by about 0.34 s (G.Game.VEIL_MS); the way out's time is js/game.js VEIL_OUT. The shape's travel, its slant, the words and the spinner are transforms and opacity, which the compositor
   runs, so they keep going while the page is busy building a level. The ripple along its edges (d) is the page's own: it stalls if the page does, but
   by then the edges are off the screen. VEIL_IN and VEIL_OUT below are made together: a wave running along each edge, by moving the handles of one curve in a 100 x 100 box stretched over the panel. */
#veil { --s: 28vh; --m: 12vh; position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; }
#veil.on { visibility: visible; pointer-events: auto; }
#veil.out { visibility: visible; }
.veil-shape { position: absolute; left: 0; top: calc(-1 * (var(--s) + var(--m))); width: 100%; height: calc(100vh + 2 * (var(--s) + var(--m))); overflow: visible; fill: #000; transform: translateY(-100%); will-change: transform; }
#veil.on .veil-shape { transform: none; animation: veilIn 0.8s both; }
#veil.out .veil-shape { transform: translateY(106%); animation: veilOut 0.65s both; }
#veil.on path { animation: veilInEdge 0.8s linear both; }
#veil.out path { animation: veilOutEdge 0.65s linear both; }
#veil.now .veil-shape, #veil.now path, #veil.now .veil-load { animation: none; }
@keyframes veilIn {
  0% { transform: translateY(-100%) skewY(-7deg) scaleY(1.14); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.7); }
  42% { transform: translateY(3%) skewY(4deg) scaleY(1.05); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
  62% { transform: translateY(-1.8%) skewY(-2.2deg) scaleY(0.985); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
  80% { transform: translateY(0.7%) skewY(1deg) scaleY(1.006); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
  100% { transform: none; }
}
@keyframes veilOut {
  0% { transform: none; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  20% { transform: translateY(-2.4%) skewY(-2.5deg) scaleY(1.02); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5); }
  100% { transform: translateY(106%) skewY(7deg) scaleY(1.14); }
}
@keyframes veilInEdge {
  0% { d: path("M0 15.6C33 15.6 66 2.7 100 0L100 84.4C66 98.1 33 102 0 100Z"); }
  6% { d: path("M0 15.6C33 13.2 66 0.8 100 0L100 84.4C66 101.8 33 90.4 0 100Z"); }
  12% { d: path("M0 15.6C33 9.7 66 2.2 100 0L100 84.4C66 96.9 33 85.3 0 100Z"); }
  19% { d: path("M0 15.6C33 7.6 66 5 100 0L100 84.4C66 89.2 33 87.7 0 100Z"); }
  25% { d: path("M0 15.6C33 7.8 66 7.2 100 0L100 84.4C66 84.3 33 93.6 0 100Z"); }
  31% { d: path("M0 15.6C33 9.6 66 7.6 100 0L100 84.4C66 84.2 33 98.3 0 100Z"); }
  38% { d: path("M0 15.6C33 11.4 66 6.3 100 0L100 84.4C66 87.4 33 99.3 0 100Z"); }
  44% { d: path("M0 15.6C33 12.1 66 4.7 100 0L100 84.4C66 90.9 33 97.3 0 100Z"); }
  50% { d: path("M0 15.6C33 11.6 66 3.9 100 0L100 84.4C66 92.5 33 94.4 0 100Z"); }
  56% { d: path("M0 15.6C33 10.5 66 4 100 0L100 84.4C66 91.7 33 92.7 0 100Z"); }
  62% { d: path("M0 15.6C33 9.6 66 4.9 100 0L100 84.4C66 90 33 92.9 0 100Z"); }
  69% { d: path("M0 15.6C33 9.5 66 5.7 100 0L100 84.4C66 88.6 33 94.1 0 100Z"); }
  75% { d: path("M0 15.6C33 10 66 6 100 0L100 84.4C66 88.2 33 95.4 0 100Z"); }
  81% { d: path("M0 15.6C33 10.6 66 5.7 100 0L100 84.4C66 88.9 33 95.9 0 100Z"); }
  88% { d: path("M0 15.6C33 10.9 66 5.2 100 0L100 84.4C66 89.7 33 95.6 0 100Z"); }
  94% { d: path("M0 15.6C33 10.9 66 4.8 100 0L100 84.4C66 90.2 33 94.9 0 100Z"); }
  100% { d: path("M0 15.6C33 10.4 66 5.2 100 0L100 84.4C66 89.6 33 94.8 0 100Z"); }
}
@keyframes veilOutEdge {
  0% { d: path("M0 15.6C33 10.4 66 5.2 100 0L100 84.4C66 89.6 33 94.8 0 100Z"); }
  6% { d: path("M0 15.6C33 12.9 66 4.9 100 0L100 84.4C66 90.2 33 95.5 0 100Z"); }
  12% { d: path("M0 15.6C33 14.2 66 2.4 100 0L100 84.4C66 90.7 33 95 0 100Z"); }
  19% { d: path("M0 15.6C33 13.6 66 0.4 100 0L100 84.4C66 90.8 33 94 0 100Z"); }
  25% { d: path("M0 15.6C33 10.5 66 0.6 100 0L100 84.4C66 90.1 33 93.2 0 100Z"); }
  31% { d: path("M0 15.6C33 6.1 66 3.8 100 0L100 84.4C66 88.8 33 92.9 0 100Z"); }
  38% { d: path("M0 15.6C33 2.9 66 8.9 100 0L100 84.4C66 87.6 33 93.8 0 100Z"); }
  44% { d: path("M0 15.6C33 3 66 13.2 100 0L100 84.4C66 87.1 33 95.4 0 100Z"); }
  50% { d: path("M0 15.6C33 7.3 66 14.1 100 0L100 84.4C66 87.9 33 97.1 0 100Z"); }
  56% { d: path("M0 15.6C33 14.3 66 10.4 100 0L100 84.4C66 89.8 33 97.9 0 100Z"); }
  62% { d: path("M0 15.6C33 20.5 66 3.1 100 0L100 84.4C66 92 33 97.2 0 100Z"); }
  69% { d: path("M0 15.6C33 22.4 66 -4.4 100 0L100 84.4C66 93.3 33 95.1 0 100Z"); }
  75% { d: path("M0 15.6C33 18.3 66 -8 100 0L100 84.4C66 92.8 33 92.5 0 100Z"); }
  81% { d: path("M0 15.6C33 9.5 66 -5.3 100 0L100 84.4C66 90.6 33 90.7 0 100Z"); }
  88% { d: path("M0 15.6C33 -0.1 66 3.3 100 0L100 84.4C66 87.5 33 90.8 0 100Z"); }
  94% { d: path("M0 15.6C33 -5.6 66 14 100 0L100 84.4C66 85.1 33 93 0 100Z"); }
  100% { d: path("M0 15.6C33 -3.5 66 21.5 100 0L100 84.4C66 84.7 33 96.4 0 100Z"); }
}
.veil-load { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
#veil.on .veil-load { animation: veilText 0.2s 0.3s ease-out both; }
#veil.out .veil-load { opacity: 0; animation: veilText 0.14s 0.12s ease-in reverse both; }
@keyframes veilText { from { opacity: 0; } to { opacity: 1; } }
.veil-row { display: flex; align-items: center; gap: 14px; color: var(--accent); font: 700 14px var(--mono); letter-spacing: 3px; text-transform: uppercase; }
.veil-spin { width: 20px; height: 20px; box-sizing: border-box; border: 3px solid rgba(255, 255, 255, 0.16); border-top-color: var(--accent); border-radius: 50%; will-change: transform; animation: veilSpin 0.8s linear infinite; }
@keyframes veilSpin { to { transform: rotate(360deg); } }
/* what it's doing now: the line turns down out of sight and the next comes over from above, as on a drum */
#veilStatus { position: relative; width: 240px; height: 16px; overflow: hidden; perspective: 60px; color: #7d8288; font: 11px var(--mono); letter-spacing: 1px; text-align: center; }
#veilStatus span { position: absolute; inset: 0; line-height: 16px; backface-visibility: hidden; will-change: transform, opacity; animation: statusIn 0.14s ease-out both; }
#veilStatus span.gone { animation: statusOut 0.14s ease-in both; }
@keyframes statusIn { from { transform: translateY(-100%) rotateX(80deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes statusOut { to { transform: translateY(100%) rotateX(-80deg); opacity: 0; } }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-family: var(--mono); }
#crosshair { position: absolute; left: 50%; top: 50%; --gap: 6px; transition: opacity .1s; }
#crosshair i { position: absolute; background: rgba(255,255,255,0.9); box-shadow: 0 0 2px #000; }
#crosshair .t, #crosshair .b { width: 2px; height: 8px; left: -1px; }
#crosshair .l, #crosshair .r { height: 2px; width: 8px; top: -1px; }
#crosshair .t { top: calc(-1 * var(--gap) - 8px); }
#crosshair .b { top: var(--gap); }
#crosshair .l { left: calc(-1 * var(--gap) - 8px); }
#crosshair .r { left: var(--gap); }
#crosshair .dot { width: 2px; height: 2px; left: -1px; top: -1px; }
.inv-quick { margin-top: 8px; }
.inv-quick .qrow { display: flex; gap: 6px; }
.inv-quick .qbox { position: relative; flex: 1; min-width: 0; border: 1px dashed rgba(255,255,255,0.3); border-radius: 4px; padding: 4px 4px 3px; text-align: center; font-size: 10px; background: rgba(255,255,255,0.03); }
.inv-quick .qbox.empty { opacity: 0.55; }
.inv-quick .qbox b { position: absolute; left: 4px; top: 2px; font-size: 11px; color: var(--accent, #ffb02e); }
.inv-quick .qbox img { display: block; width: 32px; height: 32px; margin: 2px auto; }
.inv-quick .qbox span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-quick .qbox i { position: absolute; right: 4px; top: 1px; font-style: normal; cursor: pointer; opacity: 0.7; }
.inv-quick .qbox i:hover { opacity: 1; }
#maskFx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
#glareFx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; mix-blend-mode: screen; }
#maskFx.hidden, #glareFx.hidden { display: none; }
#flashFx { position: absolute; inset: 0; opacity: 0; background: #fffdf4; pointer-events: none; z-index: 5; }
#items .qs { margin-right: 8px; }
#items .qs b { display: inline-block; min-width: 14px; padding: 0 3px; margin-right: 2px; border: 1px solid rgba(255,255,255,0.35); border-radius: 3px; font-size: 10px; text-align: center; }
#items .qs.none { opacity: 0.45; }
#vignette { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(170,0,0,0.75) 100%); }
#vignette.sniper { box-shadow: inset 0 0 0 3px rgba(255,0,0,0.6); }
#vignette.out { opacity: 1 !important; background: radial-gradient(ellipse at center, rgba(10,0,0,0.9) 30%, #000 100%); transition: background 1.5s; } /* out cold */
#dmgDirs { position: absolute; left: 50%; top: 50%; }
.dmgdir { position: absolute; left: 0; top: 0; width: 240px; height: 240px; border-radius: 50%; border-top: 6px solid rgba(255,40,40,0.9); transform: translate(-50%,-50%); filter: drop-shadow(0 0 6px rgba(255,0,0,0.7)); -webkit-mask: linear-gradient(90deg, transparent 32%, #000 42%, #000 58%, transparent 68%); mask: linear-gradient(90deg, transparent 32%, #000 42%, #000 58%, transparent 68%); }

#topbar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); text-align: center; }
#levelInfo { font-weight: 800; letter-spacing: 3px; color: var(--accent); font-size: 13px; }
#levelInfo span { color: var(--dim); font-weight: 400; letter-spacing: 1px; }
#objective { margin-top: 4px; font-size: 13px; text-shadow: 0 1px 3px #000; }
#objective b.go { color: var(--good); }
#bossBar { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); width: 420px; text-align: center; }
.bname { color: #ff5050; font-weight: 800; letter-spacing: 5px; font-size: 13px; text-shadow: 0 0 8px #900; }
.bbar { height: 8px; background: rgba(0,0,0,0.6); border: 1px solid #7a1a1a; margin-top: 4px; }
#bossFill { height: 100%; background: linear-gradient(90deg, #b01010, #ff4a2a); transition: width .15s; }

#team { position: absolute; left: 16px; top: 16px; width: 200px; }
.tm { margin-bottom: 10px; background: rgba(0,0,0,0.35); padding: 6px 8px; border-left: 2px solid rgba(255,255,255,0.2); }
.tn { font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.tn .dn { color: var(--bad); animation: pulse .6s infinite; font-size: 10px; }
.tn .kia { color: var(--dim); font-size: 10px; }
.tb { height: 3px; background: rgba(255,255,255,0.1); margin-top: 2px; }
.tb .th { height: 100%; background: #e8eef2; }
.tb .ta { height: 100%; background: var(--armor); }
#minimap { position: absolute; right: 16px; top: 16px; width: 200px; height: 200px; }

#killfeed { position: absolute; right: 16px; top: 228px; text-align: right; font-size: 12px; }
/* F9's readout: everything about whoever's under the crosshair (js/hud.js debugTarget) */
.hb-info { position: absolute; left: 16px; top: 96px; width: 360px; max-height: calc(100vh - 330px); overflow: hidden; padding: 8px 10px; background: rgba(6, 8, 10, 0.78); border: 1px solid rgba(255, 255, 255, 0.12); font: 11px/1.45 var(--mono); color: #c9d1d6; pointer-events: none; }
.hb-info.hidden { display: none; }
.hb-marks { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
.hb-marks.hidden { display: none; }
.hb-info .hb-shot { margin-top: 3px; font-size: 10px; line-height: 1.35; }
.hb-info .hb-shot b { color: #ffb43a; }
.hb-info h4 { margin: 0 0 4px; font: 600 12px var(--mono); color: #fff; }
.hb-info h4 small { color: #8a959c; font-weight: 400; }
.hb-info .hb-sec { margin-top: 6px; padding-top: 4px; border-top: 1px dashed rgba(255, 255, 255, 0.12); }
.hb-info .hb-k { color: #8a959c; }
.hb-info .hb-line b { color: #ffb43a; }
.hb-info .hb-old { opacity: 0.6; }
.hb-info .hb-path { font-size: 0.92em; line-height: 1.4; }
.hb-info .hb-legend i { display: block; height: 6px; margin: 3px 0 1px; border-radius: 2px; }
.hb-info .hb-legend { margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px dashed rgba(255, 255, 255, 0.12); font-size: 10px; }
.hb-info .bad { color: #ff7a6a; } .hb-info .warn { color: #ffc65a; } .hb-info .ok { color: #8fd18a; }
.hb-info .hb-row { display: flex; justify-content: space-between; gap: 8px; }
.hb-info .hb-org { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; margin-top: 4px; line-height: 1.3; }
.hb-info .hb-reg { grid-column: 1 / -1; margin-top: 3px; color: #8a959c; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
#killfeed div { background: rgba(0,0,0,0.45); padding: 3px 8px; margin-bottom: 3px; display: inline-block; clear: both; float: right; transition: opacity 1s; }
#killfeed .fade { opacity: 0; }
#killfeed .hs { color: #ff5050; }
#killfeed .cr { color: var(--accent); font-weight: 700; }
#killfeed .bad { color: var(--bad); font-weight: 800; }
#toast { position: absolute; z-index: 45; top: 28%; left: 50%; transform: translateX(-50%); text-align: center; transition: opacity .4s; opacity: 0; }
#toast .tt { font-size: 34px; font-weight: 900; letter-spacing: 8px; color: #fff; text-shadow: 0 2px 12px #000; }
#toast .ts { font-size: 14px; color: var(--accent); letter-spacing: 2px; margin-top: 4px; text-shadow: 0 1px 4px #000; }
#treatFx { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
#treatFx .tfx { background: rgba(8,20,12,0.78); border: 1px solid #7dff9a; border-left-width: 4px; padding: 6px 12px; font-size: 14px; text-shadow: 0 1px 3px #000; min-width: 280px; }
#treatFx .tfx b { color: #7dff9a; }
#treatFx .tfx i { display: block; height: 4px; margin-top: 5px; background: rgba(255,255,255,0.15); }
#treatFx .tfx u { display: block; height: 100%; background: #7dff9a; text-decoration: none; }
#prompt { position: absolute; top: 62%; left: 50%; transform: translateX(-50%); font-size: 14px; text-shadow: 0 1px 3px #000; }
#prompt b { color: var(--accent); border: 1px solid var(--accent); padding: 0 5px; border-radius: 2px; }
#nadeWarn { position: absolute; top: 40%; left: 50%; transform: translateX(-50%); color: #ff4040; font-weight: 900; letter-spacing: 4px; font-size: 15px; text-shadow: 0 0 8px #900; animation: pulse .35s infinite; display: flex; flex-direction: column; align-items: center; gap: 2px; }
#nadeWarn i { font-style: normal; font-size: 22px; display: block; }
#progress { position: absolute; top: 66%; left: 50%; transform: translateX(-50%); width: 240px; height: 18px; background: rgba(0,0,0,0.5); border: 1px solid var(--line); }
#progressBar { height: 100%; background: var(--good); }
#progressText { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 18px; letter-spacing: 2px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; text-transform: uppercase; }

#vitals { position: absolute; left: 16px; bottom: 16px; width: 290px; background: rgba(0,0,0,0.35); padding: 10px 12px; border-left: 3px solid var(--accent); }
.vrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.vlabel { width: 52px; font-size: 10px; color: var(--dim); letter-spacing: 1px; }
.bar { flex: 1; height: 10px; background: rgba(255,255,255,0.08); }
.bar div { height: 100%; transition: width .12s; }
.bar.hp div { background: #e8eef2; }
.bar.hp div.low { background: var(--bad); }
.bar.hp div { background: #c04040; }
.body-mini { position: relative; margin: calc(6px * var(--ik, 1)) 0 2px; height: calc(50px * var(--ik, 1)); }
.body-mini i { display: block; border-radius: 2px; }
.body-mini .bm-head { grid-area: head; border-radius: 50%; } .body-mini .bm-thorax { grid-area: thorax; } .body-mini .bm-stomach { grid-area: stomach; }
.body-mini .bm-armL { grid-area: armL; } .body-mini .bm-armR { grid-area: armR; } .body-mini .bm-legL { grid-area: legL; } .body-mini .bm-legR { grid-area: legR; }
.body-mini i.bleed { box-shadow: 0 0 0 1px #ff3030, 0 0 calc(6px * var(--ik, 1)) #ff3030; animation: pulse 1s infinite; }
.body-mini i.frac { outline: 1px dashed #e0c040; }
.body-mini .bm-tag { position: absolute; left: calc(36px * var(--ik, 1)); top: calc(18px * var(--ik, 1)); white-space: nowrap; font: 700 calc(10px * var(--ik, 1)) var(--mono); color: #ff5050; }
.bar.armor div { background: var(--armor); }
.vrow span:last-child { width: 32px; text-align: right; font-weight: 700; }
#items { display: flex; gap: 16px; font-size: 13px; margin-top: 4px; }
#items small { color: var(--dim); font-size: 10px; }
#ammo { position: absolute; right: 16px; bottom: 16px; text-align: right; background: rgba(0,0,0,0.35); padding: 10px 14px; border-right: 3px solid var(--accent); min-width: 220px; }
#weapName { font-size: 13px; font-weight: 700; letter-spacing: 1px; }
#weapName em { color: var(--accent); font-style: normal; font-weight: 400; animation: pulse .6s infinite; }
#ammoMag { font-size: 38px; font-weight: 800; }
#ammoMag .lowammo { color: var(--accent); }
#ammoMag .empty { color: var(--bad); }
#ammoRes { font-size: 18px; color: var(--dim); }
#weapAlt { font-size: 11px; color: var(--dim); }
#credits { position: absolute; right: 16px; bottom: 120px; font-size: 18px; font-weight: 800; color: var(--accent); text-shadow: 0 1px 3px #000; }
#downed, #deadMsg { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); text-align: center; text-shadow: 0 2px 8px #000; }
#downed .big, #deadMsg .big { font-size: 30px; font-weight: 900; letter-spacing: 6px; color: var(--bad); }
#bleed { font-size: 16px; margin: 6px 0; }
#chatLog { position: absolute; left: 16px; bottom: 140px; width: 380px; font-size: 13px; text-shadow: 0 1px 2px #000; font-family: 'Segoe UI', system-ui, sans-serif; }
#chatLog div { background: rgba(0,0,0,0.3); padding: 2px 6px; margin-top: 2px; transition: opacity 1s; }
#chatLog .fade { opacity: 0; }
#chatLog i { color: var(--accent); font-style: normal; }
#chatInput { position: absolute; left: 16px; bottom: 108px; width: 380px; pointer-events: auto; }
#scoreboard { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); width: 680px; max-width: 94vw; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 14px 18px; }
.sb-perks { margin-top: 10px; font-size: 12px; color: var(--dim); }
.sb-perks b { color: var(--accent); letter-spacing: 3px; }

/* ---------- shop ---------- */
#shop { align-items: stretch; padding: 3vh 3vw; background: rgba(5,6,8,0.86); }
.shop-wrap { display: flex; gap: calc(20px * var(--ik, 1)); width: 100%; max-width: calc(1400px * var(--ik, 1)); margin: 0 auto; min-height: 0; }
.shop-left { width: calc(290px * var(--ik, 1)); flex-shrink: 0; background: var(--panel); border: 1px solid var(--line); padding: calc(16px * var(--ik, 1)); overflow-y: auto; }
#vendorArt svg { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.vendor-name { font: 900 calc(22px * var(--ik, 1)) var(--mono); letter-spacing: calc(6px * var(--ik, 1)); margin-top: calc(10px * var(--ik, 1)); color: var(--accent); }
.vendor-name span { font-size: calc(11px * var(--ik, 1)); color: var(--dim); letter-spacing: 1px; font-weight: 400; }
.quip { font-style: italic; color: #e9dcc0; margin: calc(8px * var(--ik, 1)) 0 calc(12px * var(--ik, 1)); min-height: calc(40px * var(--ik, 1)); }
.shop-wallet { font: calc(13px * var(--ik, 1)) var(--mono); color: var(--dim); padding: calc(8px * var(--ik, 1)) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.shop-wallet b { color: var(--accent); font-size: calc(22px * var(--ik, 1)); float: right; }
.shop-sub { font: 600 calc(11px * var(--ik, 1)) var(--mono); color: var(--dim); letter-spacing: 2px; text-transform: uppercase; margin: calc(14px * var(--ik, 1)) 0 calc(6px * var(--ik, 1)); }
.lo { display: flex; justify-content: space-between; font: calc(13px * var(--ik, 1)) var(--mono); padding: calc(3px * var(--ik, 1)) 0; }
.lo small { color: var(--dim); }
.lo small.rdy { color: var(--good); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chips i { font-style: normal; font-size: 11px; padding: 2px 6px; background: rgba(255,176,46,0.12); color: var(--accent); border-radius: 2px; }
.chips i.sq { background: rgba(61,255,122,0.12); color: var(--good); }
.shop-right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.shop-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: calc(10px * var(--ik, 1)); margin-bottom: calc(14px * var(--ik, 1)); }
#shopTitle { font: 800 calc(20px * var(--ik, 1)) var(--mono); letter-spacing: 2px; }
.report { font: 400 12px var(--mono); color: var(--dim); margin-top: 4px; letter-spacing: 0; }
.report .go { color: var(--good); }
#shopTitle span { font-weight: 400; color: var(--dim); font-size: calc(14px * var(--ik, 1)); letter-spacing: 0; }
#shopTabs { display: flex; gap: calc(4px * var(--ik, 1)); flex-wrap: wrap; }
.tab { background: transparent; color: var(--dim); border: 1px solid var(--line); padding: calc(8px * var(--ik, 1)) calc(14px * var(--ik, 1)); font: 600 calc(12px * var(--ik, 1)) var(--mono); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.tab.on { color: #1a1205; background: var(--accent); border-color: var(--accent); }
#shopItems { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(280px * var(--ik, 1)), 1fr)); gap: calc(12px * var(--ik, 1)); overflow-y: auto; padding-right: calc(4px * var(--ik, 1)); align-content: start; }
#shopItems.locked { opacity: 0.45; pointer-events: none; }
.card { background: var(--panel); border: 1px solid var(--line); padding: calc(14px * var(--ik, 1)); display: flex; flex-direction: column; gap: calc(6px * var(--ik, 1)); }
.card.owned { border-color: var(--good); }
.card.squad { border-color: rgba(61,255,122,0.35); background: linear-gradient(180deg, rgba(61,255,122,0.06), var(--panel)); }
.card .load-sel { width: 100%; background: #14181b; color: #e8eef2; border: 1px solid #3a424a; padding: calc(4px * var(--ik, 1)); font: calc(12px * var(--ik, 1)) var(--mono); }
.ch { display: flex; justify-content: space-between; align-items: baseline; gap: calc(8px * var(--ik, 1)); }
.cn { font: 700 calc(15px * var(--ik, 1)) var(--mono); }
.tier { font: 600 calc(10px * var(--ik, 1)) var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.card.squad .tier { color: var(--good); }
.cd { color: var(--dim); font-size: calc(12px * var(--ik, 1)); min-height: calc(32px * var(--ik, 1)); }
.sbar { display: grid; grid-template-columns: calc(52px * var(--ik, 1)) 1fr calc(76px * var(--ik, 1)); gap: calc(8px * var(--ik, 1)); align-items: center; font: calc(10px * var(--ik, 1)) var(--mono); color: var(--dim); }
.sbar div { height: calc(5px * var(--ik, 1)); background: rgba(255,255,255,0.08); }
.sbar i { display: block; height: 100%; background: var(--accent); }
.sbar b { color: var(--text); font-weight: 600; text-align: right; }
.cfoot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: calc(6px * var(--ik, 1)); font: calc(11px * var(--ik, 1)) var(--mono); color: var(--dim); gap: calc(8px * var(--ik, 1)); }
.cfoot .btn.buy:not(:disabled) { background: var(--accent); color: #1a1205; border-color: var(--accent); }
.trade { font-size: 10px; color: var(--dim); text-align: right; }

@media (max-width: 800px) {
  .shop-wrap { flex-direction: column; }
  .shop-left { width: 100%; }
  #vendorArt { width: calc(120px * var(--ik, 1)); }
  #team, #minimap { transform: scale(0.8); transform-origin: top; }
}
label.check { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font: 13px 'Segoe UI', system-ui, sans-serif; color: var(--text); cursor: pointer; }
label.check input { width: auto; accent-color: var(--accent); }

/* ---------------------------------------------------------------- gunsmith */
#shopItems.gs-host { display: block; overflow-y: auto; }
.gs-wrap { display: flex; flex-direction: column; gap: calc(10px * var(--ik, 1)); }
.gs-tabs { display: flex; gap: calc(4px * var(--ik, 1)); flex-wrap: wrap; }
.gs-main { display: grid; grid-template-columns: minmax(0, 1fr) calc(300px * var(--ik, 1)); gap: calc(10px * var(--ik, 1)); }
.gs-view { position: relative; height: calc(340px * var(--ik, 1)); background: radial-gradient(ellipse at 50% 45%, #2b2f34 0%, #15171a 70%); border: 1px solid var(--line); overflow: hidden; }
.gs-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.gs-canvas:active { cursor: grabbing; }
.gs-hint { position: absolute; left: calc(10px * var(--ik, 1)); bottom: calc(8px * var(--ik, 1)); font: calc(11px * var(--ik, 1)) var(--mono); color: var(--dim); pointer-events: none; }
.gs-hover { position: absolute; left: calc(10px * var(--ik, 1)); top: calc(8px * var(--ik, 1)); font: calc(12px * var(--ik, 1)) var(--mono); color: var(--text); pointer-events: none; }
.gs-hover b { color: var(--accent); margin-right: calc(6px * var(--ik, 1)); }
.gs-side { display: flex; flex-direction: column; gap: calc(8px * var(--ik, 1)); min-width: 0; }
.gs-title { font: 700 calc(15px * var(--ik, 1)) var(--mono); }
.gs-title small, .lo small { font-weight: 600; }
.gs-slots { border: 1px solid var(--line); }
.gs-slot { display: grid; grid-template-columns: calc(96px * var(--ik, 1)) 1fr; gap: calc(6px * var(--ik, 1)); padding: calc(5px * var(--ik, 1)) calc(8px * var(--ik, 1)); font: calc(11px * var(--ik, 1)) var(--mono); cursor: pointer; border-bottom: 1px solid var(--line); }
.gs-slot:last-child { border-bottom: 0; }
.gs-slot span { color: var(--dim); text-transform: uppercase; letter-spacing: 1px; font-size: calc(10px * var(--ik, 1)); }
.gs-slot b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-slot b em { color: var(--dim); font-weight: 400; }
.gs-slot.sub span { padding-left: calc(10px * var(--ik, 1)); }
.gs-slot:hover { background: rgba(255,255,255,0.04); }
.gs-slot.on { background: rgba(255,176,46,0.14); }
.gs-slot.on span { color: var(--accent); }
.gs-stats { display: flex; flex-direction: column; gap: calc(3px * var(--ik, 1)); }
.gs-change { padding: calc(6px * var(--ik, 1)) calc(8px * var(--ik, 1)); margin-bottom: calc(4px * var(--ik, 1)); border: 1px dashed var(--line); background: rgba(255,255,255,0.03); }
.gs-change .gs-ch-h { font: 600 calc(10px * var(--ik, 1)) var(--mono); color: var(--text); margin-bottom: calc(4px * var(--ik, 1)); }
.gs-change .gs-pe { color: var(--text); }
.gs-stat { display: grid; grid-template-columns: calc(86px * var(--ik, 1)) 1fr calc(92px * var(--ik, 1)); gap: calc(6px * var(--ik, 1)); align-items: center; font: calc(10px * var(--ik, 1)) var(--mono); color: var(--dim); }
.gs-stat div { height: calc(4px * var(--ik, 1)); background: rgba(255,255,255,0.08); }
.gs-stat i { display: block; height: 100%; background: var(--accent); }
.gs-stat b { color: var(--text); font-weight: 600; text-align: right; }
.gs-stat.up b, .gs-stat.up em { color: var(--good); }
.gs-stat.down b, .gs-stat.down em { color: #ff6b6b; }
.gs-stat em { font-style: normal; font-size: calc(9px * var(--ik, 1)); }
/* each load through the build's barrel: muzzle velocity and energy */
.gs-loads { display: grid; grid-template-columns: 1fr auto auto; gap: calc(2px * var(--ik, 1)) calc(10px * var(--ik, 1)); margin-top: calc(6px * var(--ik, 1)); padding-top: calc(6px * var(--ik, 1)); border-top: 1px solid rgba(255,255,255,0.08); font: calc(10px * var(--ik, 1)) var(--mono); color: var(--dim); }
.gs-loads > span:nth-child(-n+3) { color: var(--accent); font-size: calc(9px * var(--ik, 1)); letter-spacing: 0.06em; text-transform: uppercase; }
.gs-loads b { color: var(--text); font-weight: 600; text-align: right; }
.gs-loads b.up, .gs-loads b.up em { color: var(--good); }
.gs-loads b.down, .gs-loads b.down em { color: #ff6b6b; }
.gs-loads em { font-style: normal; font-size: calc(9px * var(--ik, 1)); }
.gs-list { display: flex; flex-direction: column; gap: calc(4px * var(--ik, 1)); }
.gs-sub { font: 600 calc(11px * var(--ik, 1)) var(--mono); color: var(--dim); letter-spacing: 2px; text-transform: uppercase; margin-top: 2px; }
.gs-left { display: flex; flex-direction: column; gap: calc(10px * var(--ik, 1)); min-width: 0; }
.gs-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name act' 'eff eff'; gap: calc(4px * var(--ik, 1)) calc(10px * var(--ik, 1)); align-items: center; padding: calc(6px * var(--ik, 1)) calc(10px * var(--ik, 1)); background: var(--panel); border: 1px solid var(--line); }
.gs-part .gs-pn { grid-area: name; } .gs-part .gs-pe { grid-area: eff; } .gs-part .gs-pa { grid-area: act; }
.gs-slot.misfit b, .gs-slot.misfit b i { color: #ff8a7a; }
.gs-part:hover { border-color: rgba(255,176,46,0.5); }
.gs-part.fitted { border-color: var(--good); }
.gs-part.na { opacity: 0.45; } .gs-part.na:hover { opacity: 0.9; }
/* the sticker tool (js/gunsmith.js): its tab at the end of the row, the stickers you own, the controls */
.gs-tabs .gs-stk-tab { margin-left: auto; }
.gs-tabs .gs-stk-tab small { color: var(--accent); }
.gs-stk .stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(76px * var(--ik, 1)), 1fr)); gap: calc(6px * var(--ik, 1)); }
.gs-stk .stk-card { position: relative; aspect-ratio: 1; padding: calc(6px * var(--ik, 1)); background: var(--panel); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.gs-stk .stk-card:hover { border-color: rgba(255,176,46,0.5); }
.gs-stk .stk-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gs-stk .stk-card img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.gs-stk .stk-card b { position: absolute; right: 4px; bottom: 2px; font: 700 calc(11px * var(--ik, 1)) var(--mono); color: var(--accent); text-shadow: 0 1px 2px #000; }
.gs-stk .stk-ctl { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ik, 1)) calc(16px * var(--ik, 1)); align-items: center; font: calc(12px * var(--ik, 1)) var(--mono); color: var(--dim); }
.gs-stk .stk-ctl.off { opacity: 0.4; pointer-events: none; }
.gs-stk .stk-ctl label { display: flex; align-items: center; gap: 6px; margin: 0; flex: 1 1 calc(190px * var(--ik, 1)); min-width: 0; }
.gs-stk .stk-ctl label.stk-flip { flex: 0 0 auto; }
.gs-stk .stk-ctl input[type=range] { flex: 1 1 auto; min-width: 50px; width: auto; }
.gs-stk .stk-ctl span { flex: 0 0 4.5em; color: var(--text); white-space: nowrap; }
.gs-stk .stk-act { display: flex; gap: 6px; align-items: center; min-height: calc(28px * var(--ik, 1)); font: calc(12px * var(--ik, 1)) var(--mono); color: var(--text); }
.gs-stk .stk-hint, .gs-stk .stk-none { font: calc(11px * var(--ik, 1)) var(--mono); color: var(--dim); margin: 0; }
#toast .stk-toast { height: 1.8em; vertical-align: middle; margin-right: 4px; }
.gs-pn { font: 600 calc(12px * var(--ik, 1)) var(--mono); }
.gs-pn small { display: block; font-weight: 400; font-size: calc(10px * var(--ik, 1)); color: var(--dim); letter-spacing: 1px; text-transform: uppercase; }
.gs-pe { font: calc(10px * var(--ik, 1)) var(--mono); color: var(--dim); display: flex; flex-wrap: wrap; gap: calc(2px * var(--ik, 1)) calc(10px * var(--ik, 1)); }
.gs-pe .g { color: var(--good); }
.gs-pe .b { color: #ff8a7a; }
.gs-pa { display: flex; gap: calc(4px * var(--ik, 1)); align-items: center; white-space: nowrap; }
.gs-skin { max-width: calc(250px * var(--ik, 1)); background: #14181b; color: #e8eef2; border: 1px solid #3a424a; padding: calc(3px * var(--ik, 1)); font: calc(11px * var(--ik, 1)) var(--mono); }
.gs-pa .tag { font: calc(10px * var(--ik, 1)) var(--mono); color: var(--dim); letter-spacing: 1px; text-transform: uppercase; }
.gs-empty { font: calc(13px * var(--ik, 1)) var(--mono); color: var(--dim); padding: calc(20px * var(--ik, 1)); }
@media (max-width: 900px) { .gs-main { grid-template-columns: 1fr; } }
.gs-slot b i { display: block; font-style: normal; font-weight: 400; font-size: calc(9px * var(--ik, 1)); color: var(--dim); letter-spacing: 0.5px; }
.gs-slot span small { font-size: calc(8px * var(--ik, 1)); opacity: 0.7; }
.gs-fit { display: block; font-style: normal; font-weight: 400; font-size: calc(9px * var(--ik, 1)); color: var(--dim); margin-top: 2px; }
.card.part { border-color: rgba(79,163,255,0.35); }
.card.part .brand { color: var(--accent); text-transform: uppercase; letter-spacing: 1px; font-size: calc(10px * var(--ik, 1)); }
.card.part .fits { font: calc(10px * var(--ik, 1)) var(--mono); color: var(--dim); line-height: 1.6; }
.fit-y { color: var(--good); margin-right: 8px; }
.fit-n { color: #ff8a7a; margin-right: 8px; opacity: 0.8; }

/* ---------------------------------------------------------------- Kit tab: grid inventory (js/invui.js) */
#shopItems.inv-host { display: block; }
.inv { display: flex; flex-wrap: wrap; gap: calc(18px * var(--ik, 1)); align-items: flex-start; user-select: none; }
/* equipment, what you carry, then the locker (or your body in the field): side by side when there's room,
   the last one wrapping underneath when there isn't */
.inv > .inv-col { flex: 0 0 auto; min-width: 0; }
.inv > .inv-col.eq { flex: 0 0 calc(250px * var(--ik, 1)); }
.inv > .inv-col:nth-child(2) { flex: 1 1 calc(260px * var(--ik, 1)); max-width: calc(560px * var(--ik, 1)); }
.inv h4 { font: 700 calc(11px * var(--ik, 1)) var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin: 0 0 calc(8px * var(--ik, 1)); }
.inv h4 small { color: var(--dim); letter-spacing: 0; text-transform: none; font-weight: 400; }
.inv-sec { margin-bottom: calc(12px * var(--ik, 1)); }
.inv-row { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ik, 1)); align-items: flex-end; }
.inv-gwrap small { display: block; font: calc(10px * var(--ik, 1)) var(--mono); color: var(--dim); margin-bottom: 2px; }
.inv-gwrap small i { font-style: normal; color: #9fb48a; }
.inv-grid { position: relative; border: 1px solid #3a424a; background-color: #0f1317;
  background-image: linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px); }
.inv-item { box-sizing: border-box; border: 1px solid rgba(255,255,255,0.22); border-radius: 2px; padding: 2px calc(3px * var(--ik, 1)); cursor: grab; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; font: calc(9px * var(--ik, 1))/1.1 var(--mono); color: #e6e8ea; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35); }
.inv-item:hover { border-color: var(--accent); }
.inv-slot.wslot .inv-item { background-size: contain; }
.molle { position: relative; border: 1px solid #3a424a; background-color: #1a1d17;
  background-image: repeating-linear-gradient(to bottom, rgba(120,130,100,0.18) 0 calc(3px * var(--ik, 1)), transparent calc(3px * var(--ik, 1)) calc(11px * var(--ik, 1))); }
.molle .inv-grid.pouch { border: 1px solid #6f7a5c; background-color: #14181b; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5); }
.molle .inv-grid.pouch.dump { border-color: #b08a4a; }
/* the appearance options in the main menu, with a turning preview */
.look-details { margin-top: 10px; }
.look-details summary { cursor: pointer; color: var(--accent, #d9a441); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.look-grid { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; }
.look-grid > div { flex: 1; min-width: 0; }
.look-grid label { display: block; font-size: 11px; margin-top: 6px; }
.look-grid select { width: 100%; margin-top: 2px; background: #14181b; color: #e8eef2; border: 1px solid #3a424a; padding: 3px; }
.look-row .sw { width: 18px; height: 18px; }
#lookPreview { width: 150px; height: 230px; background: radial-gradient(ellipse at center, #2a3036, #14181b); border: 1px solid #3a424a; border-radius: 4px; flex: none; }
/* no crosshair: you aim with your sights */
#crosshair { display: none !important; }
.inv-drop { margin-top: calc(8px * var(--ik, 1)); border-color: #5a6470; color: #9aa4ae; }
/* medical-only slots (med pouches, the IFAK) */
.inv-grid.med, .molle .inv-grid.pouch.med { border-color: #c0392b; box-shadow: inset 0 0 0 1px rgba(192,57,43,0.35); }
.molle.molle-flow { display: flex; flex-wrap: wrap; gap: calc(4px * var(--ik, 1)); align-items: flex-start; padding: calc(3px * var(--ik, 1)); min-height: calc(40px * var(--ik, 1)); max-width: calc(320px * var(--ik, 1)); }
.molle-flow .molle-empty { position: static; }
.molle-empty { position: absolute; left: calc(6px * var(--ik, 1)); top: calc(6px * var(--ik, 1)); font-size: calc(10px * var(--ik, 1)); color: #8a9097; }
.btn.tiny { font-size: calc(9px * var(--ik, 1)); padding: 1px calc(6px * var(--ik, 1)); margin-left: calc(6px * var(--ik, 1)); vertical-align: middle; }
.btn.tiny.on { background: var(--accent); color: #111; }
.inv-open { margin-top: calc(10px * var(--ik, 1)); padding: calc(4px * var(--ik, 1)) calc(6px * var(--ik, 1)) calc(6px * var(--ik, 1)); border: 1px solid #3a424a; background: #11161a; }
.inv-open h4 { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4px * var(--ik, 1)); }
.inv-open .inv-x { margin-left: auto; }
.inv-open.gun .gun-pic { height: calc(64px * var(--ik, 1)); background: center/contain no-repeat; margin: 2px 0 calc(6px * var(--ik, 1)); }
.gun-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(118px * var(--ik, 1)), 1fr)); gap: calc(4px * var(--ik, 1)); }
.gun-slot { border: 1px dashed #3a424a; border-radius: calc(3px * var(--ik, 1)); padding: calc(3px * var(--ik, 1)) calc(4px * var(--ik, 1)) calc(4px * var(--ik, 1)); min-height: calc(40px * var(--ik, 1)); }
.gun-slot small { display: block; font: calc(9px * var(--ik, 1)) var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.gun-slot small i { font-style: normal; color: #6a737c; text-transform: none; }
.gun-slot em { font: calc(10px * var(--ik, 1)) var(--mono); color: #59616a; }
.gun-slot.mag { border-color: #6f7a5c; }
.gun-slot.missing { border-color: #a04040; }
.gun-slot.missing em, .broken { color: #e06060 !important; font-style: normal; }
.shop-sub { grid-column: 1 / -1; margin: calc(10px * var(--ik, 1)) 0 0; font: calc(11px * var(--ik, 1)) var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
#fieldInv { pointer-events: auto; position: fixed; inset: 0; z-index: 40; background: rgba(8,10,12,0.9); overflow: auto; padding: calc(18px * var(--ik, 1)) calc(24px * var(--ik, 1)); }
#fieldInv .fi-score { max-width: calc(760px * var(--ik, 1)); margin: 0 auto calc(12px * var(--ik, 1)); font: calc(11px * var(--ik, 1)) var(--mono); }
#fieldInv .fi-score table { width: 100%; border-collapse: collapse; }
#fieldInv .fi-score th, #fieldInv .fi-score td { padding: 2px calc(6px * var(--ik, 1)); text-align: left; border-bottom: 1px solid #222a30; }
.hl-hp { display: flex; align-items: center; gap: calc(8px * var(--ik, 1)); margin: calc(4px * var(--ik, 1)) 0; font: calc(12px * var(--ik, 1)) var(--mono); }
.hl-bar { flex: 1; height: calc(10px * var(--ik, 1)); background: #1a1f24; border: 1px solid #3a424a; }
.hl-bar i { display: block; height: 100%; }
.hl-bar { position: relative; }
.hl-bar u { position: absolute; top: -2px; bottom: -2px; width: 1px; background: #c0c8d0; opacity: 0.55; } /* the down / unconscious lines */
.hl-hp.click, .sq-row { cursor: pointer; }
.hl-hp.click:hover .hl-bar, .sq-row:hover .hl-bar { border-color: #8a96a2; }
.sq-list { display: flex; flex-direction: column; gap: calc(4px * var(--ik, 1)); margin-bottom: calc(6px * var(--ik, 1)); }
.sq-row { display: flex; align-items: center; gap: calc(6px * var(--ik, 1)); font: calc(11px * var(--ik, 1)) var(--mono); }
.sq-row .sq-n { width: calc(110px * var(--ik, 1)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sq-row.far { opacity: 0.5; cursor: default; }
.hl-status { font: calc(11px * var(--ik, 1)) var(--mono); margin-bottom: calc(8px * var(--ik, 1)); }
.hl-row { display: grid; grid-template-columns: calc(70px * var(--ik, 1)) 1fr auto; gap: calc(6px * var(--ik, 1)); font: calc(10px * var(--ik, 1)) var(--mono); padding: 2px 0; border-bottom: 1px solid #1d2329; }
.hl-row span { color: var(--dim); text-transform: uppercase; letter-spacing: 1px; }
.hl-row i { font-style: normal; color: #9aa4ac; }
.inv-job { min-height: calc(30px * var(--ik, 1)); margin-bottom: calc(6px * var(--ik, 1)); font: calc(11px * var(--ik, 1)) var(--mono); }
.inv-job .job-row { display: flex; align-items: center; gap: calc(6px * var(--ik, 1)); }
.inv-job .job-row span { color: var(--accent); }
.inv-job .job-row i { color: #9aa4ac; font-style: normal; }
.inv-job .job-row .btn { margin-left: auto; }
.inv-job .job-bar { height: calc(4px * var(--ik, 1)); background: #1a1f24; margin-top: calc(3px * var(--ik, 1)); }
.inv-job .job-bar i { display: block; height: 100%; background: var(--accent); }
.body-wrap { display: flex; gap: calc(8px * var(--ik, 1)); align-items: flex-start; margin: calc(6px * var(--ik, 1)) 0; }
.body-list { flex: 1; display: flex; flex-direction: column; gap: calc(3px * var(--ik, 1)); }
.body-list .bp { min-height: 0; padding: 2px calc(5px * var(--ik, 1)); }
svg.figure .fp { stroke: rgba(0,0,0,0.6); stroke-width: 0.8; cursor: copy; transition: filter .15s; }
svg.figure .fp:hover { filter: brightness(1.5); stroke: var(--accent); stroke-width: 1.2; }
svg.figure .fp.bleed { stroke: #ff3a3a; stroke-width: 1.4; animation: bleedPulse 1s infinite; }
svg.figure .fp.heavy { stroke-width: 2.2; }
svg.figure .fp.frac { stroke: #e0c040; stroke-dasharray: 3 2; stroke-width: 1.4; }
svg.figure .fp.frac.bleed { stroke: #ff3a3a; }
svg.figure .fp.organ { filter: drop-shadow(0 0 2px #b060e0); }
.med-menu button { display: flex; align-items: center; gap: 6px; text-align: left; }
.med-menu .mi { width: 18px; height: 18px; flex: none; object-fit: contain; }
.med-menu .mo { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding-left: 12px; font-size: 11px; font-weight: 600; }
svg.figure .fp.treating { stroke: #7dff9a; stroke-width: 2.4; animation: treatPulse 0.8s infinite; }
@keyframes treatPulse { 50% { filter: brightness(1.8) drop-shadow(0 0 3px #7dff9a); } }
svg.figure .ftq { stroke: #f0a030; stroke-width: 3.2; stroke-linecap: round; pointer-events: none; }
svg.figure .fkit path { fill: none; stroke: rgba(0,0,0,0.45); stroke-width: 1.4; stroke-linecap: round; pointer-events: none; }
svg.figure.big { width: calc(118px * var(--ik, 1)); height: auto; flex: none; }
svg.figure.mini { width: calc(26px * var(--ik, 1)); height: auto; }
@keyframes bleedPulse { 50% { stroke-opacity: 0.35; } }
.bp { border: 1px solid #3a424a; border-radius: calc(4px * var(--ik, 1)); padding: calc(3px * var(--ik, 1)) calc(5px * var(--ik, 1)); background: #12171b; font: calc(9px * var(--ik, 1)) var(--mono); min-height: calc(40px * var(--ik, 1)); }
.bp:hover { border-color: var(--accent); }
.bp b { display: block; font-size: calc(9px * var(--ik, 1)); color: #c9d0d6; text-transform: uppercase; letter-spacing: 1px; }
.bp small { color: #8a9097; }
.bp.bleeding { border-color: #a03030; box-shadow: inset 0 0 calc(8px * var(--ik, 1)) rgba(200,40,40,0.35); }
.bp-head { grid-area: head; } .bp-thorax { grid-area: thorax; } .bp-stomach { grid-area: stomach; }
.bp-armL { grid-area: armL; } .bp-armR { grid-area: armR; } .bp-legL { grid-area: legL; } .bp-legR { grid-area: legR; }
.bp-bar { height: calc(4px * var(--ik, 1)); background: #1a1f24; margin: 2px 0; } .bp-bar i { display: block; height: 100%; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
i.c { font-style: normal; font-size: calc(8px * var(--ik, 1)); padding: 0 calc(3px * var(--ik, 1)); border-radius: 2px; background: #333a40; color: #e6e8ea; }
i.c.heavy { background: #a02828; } i.c.light { background: #7a3a30; } i.c.frac { background: #7a6a28; } i.c.organ { background: #6a3a7a; } i.c.tq { background: #2a2c2e; border: 1px solid #d03a2a; }
.hl-k { font: calc(9px * var(--ik, 1)) var(--mono); color: var(--dim); width: calc(44px * var(--ik, 1)); }
.hl-status.bad { color: #e06060; } .hl-status.pk { color: #8ab0e0; }
.pt-head { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--ik, 1)); margin-bottom: calc(4px * var(--ik, 1)); }
.inv-menu { position: fixed; z-index: 60; min-width: calc(150px * var(--ik, 1)); background: #161b20; border: 1px solid #4a535c; box-shadow: 0 calc(4px * var(--ik, 1)) calc(14px * var(--ik, 1)) rgba(0,0,0,0.6);
  display: flex; flex-direction: column; padding: calc(3px * var(--ik, 1)); font: calc(11px * var(--ik, 1)) var(--mono); }
.inv-menu b { padding: calc(3px * var(--ik, 1)) calc(6px * var(--ik, 1)); color: #9aa4ac; font-weight: 400; font-size: calc(10px * var(--ik, 1)); }
.inv-menu button { text-align: left; background: none; border: 0; color: #e6e8ea; padding: calc(5px * var(--ik, 1)) calc(8px * var(--ik, 1)); font: inherit; cursor: pointer; }
.inv-menu button:hover { background: var(--accent); color: #111; }
.inv-item .inv-name, .inv-item .inv-sub { text-shadow: 0 0 2px #000, 0 0 calc(3px * var(--ik, 1)) #000; }
.inv-item .inv-name { overflow: hidden; text-overflow: ellipsis; word-break: break-word; max-height: 3.4em; }
.inv-item .inv-sub { color: #c9d0d6; text-align: right; }
.inv-item .inv-sub b { color: #fff; }
.inv-slot { border: 1px dashed #3a424a; border-radius: calc(3px * var(--ik, 1)); padding: calc(4px * var(--ik, 1)) calc(6px * var(--ik, 1)) calc(6px * var(--ik, 1)); margin-bottom: calc(8px * var(--ik, 1)); min-height: calc(44px * var(--ik, 1)); background: rgba(255,255,255,0.02); }
.inv-slot small { display: block; font: calc(10px * var(--ik, 1)) var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: calc(3px * var(--ik, 1)); }
.inv-slot em { font: calc(11px * var(--ik, 1)) var(--mono); color: #59616a; }
.inv-slot.off { opacity: 0.5; }
.inv-stats { border-top: 1px solid var(--line); padding-top: calc(8px * var(--ik, 1)); margin-top: calc(4px * var(--ik, 1)); font: calc(11px * var(--ik, 1)) var(--mono); }
.inv-stats div { display: flex; justify-content: space-between; padding: 1px 0; }
.inv-stats span { color: var(--dim); }
.inv-stats small { display: block; color: #59616a; font-size: calc(10px * var(--ik, 1)); margin-top: calc(4px * var(--ik, 1)); }
.inv-sell { margin-top: calc(12px * var(--ik, 1)); border: 1px dashed #6b3a2a; color: #c9876a; font: calc(11px * var(--ik, 1)) var(--mono); text-align: center; padding: calc(14px * var(--ik, 1)) calc(6px * var(--ik, 1)); border-radius: calc(3px * var(--ik, 1)); }
.inv-hint { font: calc(10px * var(--ik, 1)) var(--mono); color: #59616a; margin-top: calc(6px * var(--ik, 1)); }
@media (max-width: 1000px) { .inv > .inv-col, .inv > .inv-col.eq { flex: 1 1 100%; max-width: none; } }
.card.gear .fits, .card.pouch .fits { font: calc(10px * var(--ik, 1)) var(--mono); color: var(--dim); line-height: 1.6; margin-top: calc(6px * var(--ik, 1)); }
/* ammo type tags (inventory items, HUD) */
.inv-item i.am { font-style: normal; font-weight: 700; padding: 0 2px; border-radius: 2px; background: rgba(255,255,255,0.12); }
.inv-item i.am.mix { margin-left: 2px; background: rgba(240,150,40,0.35); }
.am-hp { color: #ff8a7a; } .am-ap { color: #8ac4ff; } .am-tracer { color: #ff6a3a; } .am-subsonic { color: #b8c0c8; }
.am-slug { color: #ffd27a; } .am-birdshot { color: #c8e08a; } .am-flechette { color: #8ac4ff; }
.amtag { font-size: calc(11px * var(--ik, 1)); letter-spacing: 1px; color: var(--accent); margin-left: calc(4px * var(--ik, 1)); }
.card.ammo .gs-pe { font: calc(11px * var(--ik, 1)) var(--mono); color: #9fb48a; margin: calc(6px * var(--ik, 1)) 0; }
.card.ammo .fits { font: calc(10px * var(--ik, 1)) var(--mono); color: var(--dim); }

.card .ch img.ci { width: calc(34px * var(--ik, 1)); height: calc(34px * var(--ik, 1)); object-fit: contain; flex: none; margin-right: calc(6px * var(--ik, 1)); background: #0f1317; border: 1px solid #3a424a; border-radius: 2px; }
.card .ch:has(img.ci) { align-items: center; } .card .ch img.ci + .cn { flex: 1; }
#objective .bad { color: var(--bad); font-weight: 700; }
.molle-flow .inv-grid.pocket + .inv-grid.pocket { margin-left: calc(-2px * var(--ik, 1)); } /* the pockets of one pouch sit closer than separate pouches */

/* the field HUD's ammo: the container's picture, as full as it is, and the chambered round beside it */
#ammoMag > span { display: inline-flex; align-items: flex-end; gap: 6px; }
#ammoMag .ammopic { image-rendering: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); }
#ammoMag .chamberpic { width: 26px; height: 70px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
#ammoMag > span { gap: 10px; }
#ammoMag .nomag { font-size: 14px; color: var(--bad); letter-spacing: 1px; }
#ammoRes .spare { font-size: 18px; color: var(--text); display: inline-flex; align-items: flex-end; gap: 3px; vertical-align: bottom; }
#ammoRes .spare img { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.8)); }
#ammoRes .spare .none { font-size: 11px; color: var(--bad, #e06060); font-style: normal; letter-spacing: 1px; }

/* the gunsmith's dots over each editable part (an outline for an empty slot) */
.gs-dots { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.gs-dot { position: absolute; width: calc(14px * var(--ik, 1)); height: calc(14px * var(--ik, 1)); margin: calc(-7px * var(--ik, 1)) 0 0 calc(-7px * var(--ik, 1)); padding: 0; border-radius: 50%;
  background: rgba(255,176,46,0.85); border: 2px solid rgba(20,22,25,0.9); box-shadow: 0 0 0 1px rgba(255,176,46,0.5), 0 1px 4px rgba(0,0,0,0.6); cursor: pointer; pointer-events: auto; transition: transform .1s; }
.gs-dot.empty { background: rgba(20,22,25,0.55); border-color: rgba(255,176,46,0.85); }
/* the store has parts for this slot: a "!" in the dot, and beside its name in the list */
.gs-dot.shop i { position: absolute; top: calc(-11px * var(--ik, 1)); right: calc(-9px * var(--ik, 1)); width: calc(12px * var(--ik, 1)); height: calc(12px * var(--ik, 1)); border-radius: 50%; background: #e8452c; color: #fff; font: 700 calc(9px * var(--ik, 1))/calc(12px * var(--ik, 1)) var(--mono); font-style: normal; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.gs-bang { display: inline-block; width: calc(12px * var(--ik, 1)); height: calc(12px * var(--ik, 1)); border-radius: 50%; background: #e8452c; color: #fff; font: 700 calc(9px * var(--ik, 1))/calc(12px * var(--ik, 1)) var(--mono); font-style: normal; text-align: center; letter-spacing: 0; vertical-align: 1px; }
.gs-dot:hover, .gs-dot.hov { transform: scale(1.35); }
.gs-dot.on { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,176,46,0.9), 0 1px 6px rgba(0,0,0,0.7); }

/* a job's progress (loading, unloading): a bar, no counts */
.jobbar { display: inline-block; width: 80px; height: 6px; background: rgba(255,255,255,0.15); border-radius: 3px; vertical-align: middle; overflow: hidden; }
.jobbar b { display: block; height: 100%; background: var(--accent, #f5a623); }
.gun-slot .tubepic { display: block; image-rendering: auto; }

/* checking a teammate: the part you've picked, and what you can use on it */
.inv.field .bp { cursor: pointer; }
.inv.field .bp.sel { outline: 2px solid var(--accent, #f5a623); outline-offset: -2px; }
.pt-acts { margin-top: calc(8px * var(--ik, 1)); display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--ik, 1)); }
.pt-acts i { opacity: 0.7; }

.med-menu b small { display: block; font-weight: 400; opacity: 0.75; text-transform: none; }
.med-menu .none { display: block; padding: 4px 8px; opacity: 0.7; font-size: 12px; }

/* LAN discovery on the main menu */
.lan-row { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.lan-list { display: flex; flex-direction: column; gap: 4px; }
.lan-game { text-align: left; }
.lan-game .dim, .lan-list .dim { opacity: 0.6; }

.turn-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4px; grid-column: 1 / -1; }
.turn-row input { min-width: 0; }

/* the range's spotting view: the lane's IPSC target and its hits (js/range.js spotting) */
#rangeSpot { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 12; width: 200px; padding: 8px; background: rgba(8,12,16,0.82); border: 1px solid #3a4a56; border-radius: 4px; font: 11px var(--mono, monospace); color: #a8e8ff; text-align: center; pointer-events: none; }
#rangeSpot b { display: block; margin-bottom: 4px; color: #7fe0ff; letter-spacing: 1px; }
#rangeSpot canvas { display: block; width: 100%; height: auto; }
#rangeSpot small { display: block; margin-top: 4px; color: #a8ffc0; }
@media (max-width: 700px) { #rangeSpot { width: 130px; right: 8px; } }

/* the zeroing table (js/zeroing.js) */
.zr .zr-row { display: flex; align-items: center; gap: calc(8px * var(--ik, 1)); flex-wrap: wrap; }
.zr .zr-l { font: 600 calc(11px * var(--ik, 1)) var(--mono); color: var(--dim); letter-spacing: 1px; text-transform: uppercase; min-width: calc(48px * var(--ik, 1)); }
.zr .tab small { opacity: 0.7; font-size: 0.8em; margin-left: 3px; }
.zr .zr-note { font-size: calc(13px * var(--ik, 1)); color: #cfd6dc; line-height: 1.5; }
.zr .zr-note b { color: var(--accent); }
.zr .zr-graph { height: calc(280px * var(--ik, 1)); flex: none; border: 1px solid var(--line); }
.zr .zr-graph canvas { width: 100%; height: 100%; display: block; }
.zr .zr-table { border-collapse: collapse; font: calc(12px * var(--ik, 1)) var(--mono); width: 100%; }
.zr .zr-table th, .zr .zr-table td { padding: calc(4px * var(--ik, 1)) calc(10px * var(--ik, 1)); text-align: right; border-bottom: 1px solid var(--line); }
.zr .zr-table th { color: var(--dim); font-weight: 600; }
.zr .zr-table td:first-child, .zr .zr-table th:first-child { text-align: left; }
.zr .zr-table td.hi { color: #7fc8ff; } .zr .zr-table td.lo { color: #ffb47a; } .zr .zr-table td.z { color: #7dff9a; }
.zr .zr-table tr.na td { color: #ff6a5a; }
.zr .zr-table small { color: var(--dim); }
.zr .zr-hint { font-size: calc(11px * var(--ik, 1)); color: var(--dim); }
.zr { overflow-y: auto; max-height: 100%; padding-right: calc(6px * var(--ik, 1)); }
.zr > .gs-tabs:first-child .tab { flex: 1; }
.zr .zr-dial { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: calc(150px * var(--ik, 1)); font: 700 calc(15px * var(--ik, 1)) var(--mono); color: var(--accent); }
.zr .zr-dial small { font: 500 calc(10px * var(--ik, 1)) var(--mono); color: var(--dim); }

/* the sidearm picker, over the route map before a run's first level (js/game.js sidearmPick) */
.route-box { position: relative; }
.sidearm-pick { position: absolute; inset: 0; background: rgba(8, 10, 13, 0.9); display: flex; align-items: center; justify-content: center; z-index: 5; }
.sidearm-pick .arm-box { max-width: 980px; padding: 24px; text-align: center; }
.sidearm-pick h2 { font: 700 26px var(--mono); color: var(--accent); letter-spacing: 2px; text-transform: uppercase; margin: 0 0 6px; }
.sidearm-pick p { color: var(--dim); margin: 0 0 18px; }
.sidearm-pick .arms { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sidearm-pick .arm { width: 280px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; background: #14181d; border: 1px solid var(--line); color: #dfe5ea; cursor: pointer; text-align: center; font: inherit; }
.sidearm-pick .arm:hover { border-color: var(--accent); background: #1b2026; }
.sidearm-pick .arm img { height: 90px; max-width: 100%; object-fit: contain; }
.sidearm-pick .arm b { font: 700 17px var(--mono); color: var(--accent); }
.sidearm-pick .arm-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; font: 12px var(--mono); color: #b8c2cc; }
.sidearm-pick .arm em { font-size: 12.5px; color: var(--dim); font-style: normal; line-height: 1.4; }
.sidearm-pick .arm-who { display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: center; border-top: 1px solid var(--line); padding-top: 8px; width: 100%; font: 600 12px var(--mono); }
.sidearm-pick .arm-who i { font-style: normal; }
.sidearm-pick .arm-who small { color: var(--dim); font-weight: 400; }
.sidearm-pick p b { color: var(--accent); }
.sidearm-pick .arm-note { margin: 14px 0 0; font-size: 12px; }
.arm-squad { margin-top: 6px; font: 12px var(--mono); color: var(--dim); }
.arm-squad i { font-style: normal; font-weight: 600; }
.sidearm-pick .arm-who { margin-top: auto; }
.sidearm-pick .arm-who i { display: inline-flex; align-items: center; gap: 4px; }
.sidearm-pick .arm-who i > * { width: 14px !important; height: 14px !important; margin: 0 !important; }
.sidearm-pick .arm.sel { border-color: var(--accent); background: #232016; box-shadow: 0 0 0 2px var(--accent) inset; }
.sidearm-pick .arm-ok { margin-top: 16px; min-width: 260px; }
.sidearm-pick:has(.web-full) { position: fixed; inset: 0; z-index: 60; background: #080a0d; }
.web-full { position: absolute; inset: 0; display: flex; }
.web-view { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; background: radial-gradient(circle at 50% 50%, #151a20 0, #080a0d 75%); }
.web-view:active { cursor: grabbing; }
.web-world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-origin: 0 0; }
.web-world.glide { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.web-world svg { position: absolute; overflow: visible; pointer-events: none; }
.web-lines polygon, .web-lines line { fill: none; stroke: #2b333b; stroke-width: 1.5; }
.web-world .strand { stroke: #47535e; stroke-width: 5; stroke-linecap: round; }
.web-world .strand.on { stroke: var(--accent); stroke-width: 7; }
.web-path { position: absolute; transform: translate(-50%, -50%); font: 700 15px var(--mono); letter-spacing: 3px; text-transform: uppercase; color: #8b98a4; white-space: nowrap; pointer-events: none; }
.web-node { position: absolute; transform: translate(-50%, -50%); width: 176px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: #14181d; border: 1px solid var(--line); border-radius: 6px; color: #dfe5ea; cursor: pointer; }
.web-node img { height: 72px; max-width: 100%; object-fit: contain; pointer-events: none; }
.web-node b { font: 700 15px var(--mono); line-height: 1.15; text-align: center; color: inherit; }
.web-node small { font: 11.5px var(--mono); color: var(--accent); text-align: center; line-height: 1.25; }
.web-node:hover { border-color: var(--accent); }
.web-node.got { border-color: #6d6240; }
.web-node.next { color: #aab5bf; border-style: dashed; }
.web-node.next img { filter: grayscale(1) brightness(0.8); }
.web-node.far { color: #66717b; background: #0f1215; }
.web-node.far img { filter: grayscale(1) brightness(0.3); }
.web-node.far small { color: #66717b; }
.web-node.look { box-shadow: 0 0 0 2px #dfe5ea; }
.web-node.sel { border-color: var(--accent); background: #232016; box-shadow: 0 0 0 3px var(--accent); }
.web-head { position: absolute; left: 20px; top: 16px; pointer-events: none; text-align: left; }
.sidearm-pick .web-head h2 { margin: 0; font-size: 22px; }
.sidearm-pick .web-head p { margin: 2px 0 0; font-size: 12.5px; }
.web-home { position: absolute; left: 20px; bottom: 16px; }
.web-side { flex: 0 0 310px; box-sizing: border-box; padding: 18px; background: #0d1014; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; overflow-y: auto; text-align: left; }
.web-side > img { height: 96px; max-width: 100%; object-fit: contain; align-self: center; }
.web-side h3 { font: 700 20px var(--mono); color: var(--accent); margin: 0; }
.web-side h4 { font: 700 11px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin: 6px 0 0; }
.web-side em { font-size: 13px; color: var(--dim); font-style: normal; line-height: 1.4; }
.web-side .arm-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 12px var(--mono); color: #b8c2cc; }
.web-ask { border-left: 3px solid var(--accent); padding: 4px 0 4px 8px; font-size: 13px; color: #dfe5ea; }
.web-ask.far { border-color: var(--line); color: var(--dim); }
.web-ask b { font-family: var(--mono); }
.web-ask small, .web-next small { display: block; color: var(--dim); font-size: 12px; margin-top: 2px; }
.web-next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: #dfe5ea; }
.web-next span { font-family: var(--mono); color: var(--accent); }
.web-pro { border-left: 3px solid var(--line); padding: 4px 0 4px 8px; font-size: 13px; color: #dfe5ea; }
.web-pro.got { border-color: var(--accent); }
.web-pro b { font-family: var(--mono); color: var(--accent); }
.web-pro ul { list-style: none; margin: 3px 0 5px; padding: 0; color: var(--dim); font-size: 12px; line-height: 1.4; }
.web-pro span { font-family: var(--mono); color: var(--accent); }
.web-pro label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.web-pro label input { width: auto; flex: 0 0 auto; margin: 0; }
.web-pro:hover, .web-pro:focus-visible { background: #14181d; outline: none; }
.web-preview { position: absolute; right: 322px; top: 50%; transform: translateY(-50%); width: min(360px, calc(100vw - 350px)); max-height: calc(100% - 24px); overflow-y: auto; box-sizing: border-box; padding: 14px; background: #0d1014; border: 1px solid var(--accent); border-radius: 6px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; gap: 8px; text-align: left; pointer-events: none; z-index: 2; }
.web-preview img { height: 110px; max-width: 100%; object-fit: contain; align-self: center; }
.web-preview h3 { font: 700 16px var(--mono); color: #dfe5ea; margin: 0; }
.web-preview h3 b { color: var(--accent); }
.web-preview h4 { font: 700 11px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin: 2px 0 0; }
.web-preview ul { list-style: none; margin: 0; padding: 0; color: var(--dim); font-size: 12.5px; line-height: 1.4; }
.web-foot { margin-top: auto; padding-top: 10px; }
.sidearm-pick .web-foot p { margin: 0 0 8px; font-size: 12px; line-height: 1.4; }
.web-side .arm-ok { margin-top: 4px; min-width: 0; width: 100%; }
.web-side .arm-who { justify-content: flex-start; }
@media (max-width: 720px) { .web-full { flex-direction: column; } .web-view { flex: 1 1 55%; } .web-side { flex: 0 0 45%; border-left: 0; border-top: 1px solid var(--line); } }
/* the attachments box: three wheels, each spun till you stop it, then fit what it landed on or carry it (js/game.js aboxShow) */
.abox-pick { position: fixed; z-index: 45; pointer-events: auto; }
.abox-pick .arm { cursor: default; min-height: 300px; }
.abox-pick .abox-win { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 10px 6px; border: 1px solid var(--line); background: #0d1013; overflow: hidden; }
.abox-pick .abox-reel { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--line); background: #0d1013; }
.abox-pick .abox-reel::before, .abox-pick .abox-reel::after { content: ''; position: absolute; left: 0; right: 0; height: 26px; z-index: 1; pointer-events: none; }
.abox-pick .abox-reel::before { top: 0; background: linear-gradient(#0d1013, rgba(13, 16, 19, 0)); }
.abox-pick .abox-reel::after { bottom: 0; background: linear-gradient(rgba(13, 16, 19, 0), #0d1013); }
.abox-pick .abox-strip { will-change: transform; }
.abox-pick .abox-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; box-sizing: border-box; border-bottom: 1px solid #1a1f25; }
.abox-pick .abox-face img { height: 64px; }
.abox-pick .abox-win small { font: 11px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: 1px; }
.abox-pick .abox-acts { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: auto; }
.abox-pick .abox-acts .btn { width: 100%; }
.abox-pick .arm.taken { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.abox-pick .arm.gone { opacity: 0.45; }
.abox-pick .abox-close { margin-top: 16px; min-width: 200px; }
/* the weapon case: one wheel, wide enough for a long gun (js/game.js caseShow) */
/* an armour card's make-up and what it stops (js/shop.js gearCard, from js/ballistics.js rating) */
.card .arm-rate { font-size: 11px; line-height: 1.35; margin: 4px 0 2px; }
.card .arm-rate small { opacity: 0.7; display: block; }
.card .arm-rate b { display: inline-block; min-width: 34px; color: #cfd6dc; }

/* the attachments box: what the pick you're over does to your gun */
.abox-stats { margin: 12px auto 0; max-width: 560px; text-align: left; padding: 10px 12px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08); }
.abox-stats h4 { margin: 0 0 6px; font: 600 12px var(--mono); color: var(--text); }
.abox-stats h4 small { color: var(--dim); font-weight: 400; }
.abox-stats .gs-pe { margin-bottom: 6px; }
.abox-stats .abox-hint { margin: 0; color: var(--dim); font: 11px var(--mono); }
.abox-stats .gs-stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.abox-stats .gs-loads { grid-column: 1 / -1; }
/* the comms wheel (hold the middle button: js/player.js wheelOpen): eight slices round the crosshair, a pointer the mouse moves */
#commWheel { position: fixed; left: 50%; top: 50%; width: 0; height: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity 0.08s; }
#commWheel.on { opacity: 1; }
#commWheel::before { content: ''; position: absolute; left: -165px; top: -165px; width: 330px; height: 330px; border-radius: 50%; background: radial-gradient(circle, rgba(10,12,14,0.25) 0 22%, rgba(10,12,14,0.72) 23% 100%); border: 1px solid rgba(255,255,255,0.1); }
#commWheel .cw-it { position: absolute; transform: translate(-50%, -50%); width: 92px; padding: 6px 4px; text-align: center; font: 600 12px var(--mono); color: var(--text); background: rgba(20,24,28,0.85); border: 1px solid rgba(255,255,255,0.12); }
#commWheel .cw-it small { display: block; font-weight: 400; font-size: 10px; color: var(--dim); margin-top: 2px; }
#commWheel .cw-it.sel { border-color: var(--accent); background: rgba(255,176,46,0.22); color: #fff; }
#commWheel .cw-it.off { opacity: 0.4; }
#commWheel .cw-ptr { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px rgba(255,176,46,0.8); }

/* the main menu's highlights renderer (js/game.js renderHighlights) */
.hl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.hl-row .hl-prog { flex: 1 1 100%; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.hl-row .hl-prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s; }
.hl-row .hl-msg { flex: 1 1 100%; font: 12px var(--mono); color: var(--dim); }
.hl-row .hl-msg.bad { color: var(--bad); }