:root {
  /* The sides (the operator, 2026-11-07): each side's text in its uniform (look/rigbuild.js KITS: the quants black
     special ops, the mice white tan), outlined in the other, so both read on any panel. */
  --q-ink: #16171a; --q-edge: #ffffff; --m-ink: #efe6d1; --m-edge: #000000;
  --mint: #97fce4; --mouse: #ff8a65; --ink: #e8eaed; --panel: rgba(13, 17, 23, 0.86);
  /* The HUD in play has no panels (the operator, 2026-11-05: "no glass panels just a fading shadow behind hud
     elements"): white-cyan text on the world over a soft dark shadow (`--shade` dark, fading out over `--fall` past each
     part's edges), labels in small caps, numbers in a condensed square sans (Rajdhani, from the page's font link).
     The menus and panels (the Esc screen, the deploy panel, the Tab board, the results, the Team panel, the controls
     card, the stats modal, the tuning panel) share one look, set here and only here (the operator, 18:30: "i dislike
     the blue border, I want just a slight black low opacity background+blur behind plus box shadow for the UI
     elements"): `--ui-bg` a slight black, `--ui-blur` the blur of what is behind, `--ui-shadow` the box shadow,
     `--ui-radius` the corners, `--ui-text` the text's own shadow so it reads over a bright sky or sand. */
  --hudfont: "Rajdhani", "Saira Condensed", "Arial Narrow", sans-serif;
  --glass: rgba(10, 34, 44, 0.42); --glass-deep: rgba(8, 24, 32, 0.8); --edge: rgba(170, 236, 255, 0.42);
  --hi: #e9fcff; --dim: rgba(200, 236, 248, 0.66); --cyan: #8fe6ff; --red: #ff3b3b; --gold: #f5c542; --blue: #3d8bff;
  --pw: clamp(200px, 15.6vw, 290px); --fall: 26px; --shade: 0.46;
  --ui-bg: rgba(0, 0, 0, 0.4); --ui-blur: 10px; --ui-radius: 4px; --ui-text: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.35);
  --ui-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.28);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1117; color: var(--ink); font-family: "Fira Code", ui-monospace, Menlo, monospace; }
canvas { display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; }
/* Top centre, after MAG: the bunkers' letter chips in a row, the round clock under them between the sides' lines, then
   OVERTIME while it applies. */
/* Named as an anchor: the Tab board hangs from its foot, so OVERTIME pushes the board down with it. */
.hudpart.objtop { top: 10px; bottom: auto; left: 50%; transform: translateX(-50%); width: auto; padding: 8px 12px 8px; display: flex; flex-direction: column; align-items: stretch; anchor-name: --objtop; }
.clock { font-size: clamp(22px, 1.45vw, 28px); font-weight: 600; line-height: 1; letter-spacing: 0.06em; color: var(--hi); font-variant-numeric: tabular-nums; text-align: center; padding: 0 10px; }
.phase { text-align: center; font-size: clamp(12px, 0.75vw, 15px); font-weight: 700; letter-spacing: 0.2em; line-height: 1.2; color: #ffcf6b; }
.phase:empty { display: none; }
.cross { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 2px #000; }
/* The arm/defuse bar under the crosshair: a thin dark track (what is left to go) with its label over the fill, on the
   HUD's soft shadow; no glass, no edge. */
.bar { position: absolute; left: 50%; top: 60%; width: 260px; height: 20px; margin-left: -130px; background: rgba(0, 0, 0, 0.42); display: none; --fall: 18px; }
.bar.on { display: block; }
.bar .fill { height: 100%; width: 0; background: #ff8a65; }
.bar .barlabel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--hudfont); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: #fff; text-shadow: 0 1px 2px #000; }
/* Top left: the mode and connection lines, small. */
.mode { position: absolute; top: 12px; left: 16px; font-size: clamp(11px, 0.62vw, 13px); color: var(--dim); text-shadow: 0 1px 2px #000; }
.click { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); padding: 12px 18px; font-size: 14px; }
.panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 18px 20px; pointer-events: auto; }
.panel h2 { margin: 0 0 6px; font-family: var(--hudfont); font-size: 20px; font-weight: 700; letter-spacing: 0.14em; color: var(--mouse); }
.respawn { min-height: 18px; font-size: 13px; color: #ffcf6b; margin-bottom: 8px; }
.linenote { font-size: 13px; line-height: 1.45; color: #ffcf6b; margin: 0 0 12px; max-width: 520px; }
.cols { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; }
.side { font-family: var(--hudfont); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 2px solid; }
.side.quant { border-color: var(--q-edge); }
.side.mouse { border-color: var(--m-ink); }
.ships { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
/* Buttons are white Fira Code on #1e1e1e wherever they sit (the operator's rule), named here rather than inherited: the
   stats modal's body is set in the HUD's Rajdhani, and its back button took it. */
.btn { background: #1e1e1e; color: #fff; font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 12px; padding: 8px 10px; border-radius: 6px; border: 1px solid #2c2c2c; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); cursor: pointer; }
.btn:disabled { opacity: 0.4; cursor: default; }
/* Hover and the chosen button read by opacity, never a coloured frame (the operator, 2026-11-05: "remove the blue tiel
   borders just do opacity change"). */
.btn { opacity: 0.78; transition: opacity 0.12s ease; }
.btn:hover:not(:disabled), .btn.on { opacity: 1; }
.kit { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; }
.kit .kitlabel { font-family: var(--hudfont); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.hidden { display: none !important; }
/* Top right, one column: the minimap, then the frame meters on one small line. */
.rightcol { position: absolute; top: 10px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rightcol .hudpart { position: relative; bottom: auto; }
.corner { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.meters { display: flex; gap: 12px; align-items: baseline; font-family: var(--hudfont); font-size: clamp(13px, 0.8vw, 16px); font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--dim); text-shadow: 0 1px 2px #000; }
.stats { position: relative; isolation: isolate; --fall: 12px; display: flex; gap: 10px; }
.stats .good { color: #97fce4; }
.stats .fair { color: #ffcf6b; }
.stats .poor { color: #ff6a55; }
.net { position: absolute; top: 30px; left: 16px; font-size: 11px; color: #ffcf6b; text-shadow: 0 1px 2px #000; }

/* ?tune=1 */
.tune { position: fixed; top: 54px; right: 14px; width: 290px; padding: 10px 12px 12px; font-size: 12px; z-index: 5; }
.tune h3 { margin: 0 0 2px; font-size: 13px; letter-spacing: 0.08em; color: var(--mint); }
.tune-status { color: var(--dim); margin-bottom: 8px; }
.tune-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 6px 0; cursor: pointer; }
.tune-name { color: #c9d4df; }
.tune-val { color: #fff; font-variant-numeric: tabular-nums; }
.tune-row input { grid-column: 1 / -1; width: 100%; accent-color: var(--mint); margin: 0; }
.tune-row input:disabled { opacity: 0.4; }
.tune-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.tune-hint { color: var(--dim); }

/* The Esc screen and the weapons */
.click { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; }
.ring { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); }
.prompt { position: absolute; left: 50%; top: 55%; transform: translateX(-50%); padding: 6px 12px; --fall: 16px; font-size: 13px; color: #fff; letter-spacing: 0.04em; white-space: nowrap; text-shadow: 0 1px 2px #000; pointer-events: none; }
.prompt .keys { color: var(--mint); font-weight: 600; margin-right: 10px; }
/* On a bunker gun the prompt stays up while you fire: under the gun, never on the sights. */
.prompt.low { top: auto; bottom: 22%; }
.scope { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0, transparent 33vmin, #000 33.4vmin); }
.scope::before, .scope::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(0, 0, 0, 0.85); }
.scope::before { width: 66vmin; height: 1px; transform: translate(-50%, -50%); }
.scope::after { width: 1px; height: 66vmin; transform: translate(-50%, -50%); }

/* Staging for films (?stage=1): a kill feed, top right. The shooter is you (yellow), the puppet who fell the enemy (red):
   the map's colours (relcolor.js), never the sides'. */
.stagefeed { position: absolute; right: 18px; top: 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-size: 13px; pointer-events: none; }
.stagefeed div { background: rgba(10, 12, 14, 0.62); padding: 4px 9px; border-radius: 3px; text-shadow: 0 1px 2px #000; }
.stagefeed b { color: var(--rel-self); font-weight: 600; }
.stagefeed span { color: #c9d4df; margin: 0 6px; }
.stagefeed i { color: var(--rel-enemy); font-style: normal; font-weight: 600; }

/* Your wounds (hurt.js): blood at half resolution, stretched over the screen, under the rest of the HUD */
.hurt { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* The hit marker: four strokes round the crosshair, white / gold / red (hitfx markLook) */
.hitmark { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); --mark: #fff; }
.hitmark i { position: absolute; left: 50%; top: 50%; width: 3px; height: 10px; margin: -5px 0 0 -1.5px; background: var(--mark); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); border-radius: 1px; }
.hitmark i:nth-child(1) { transform: rotate(45deg) translateY(-12px); }
.hitmark i:nth-child(2) { transform: rotate(135deg) translateY(-12px); }
.hitmark i:nth-child(3) { transform: rotate(225deg) translateY(-12px); }
.hitmark i:nth-child(4) { transform: rotate(315deg) translateY(-12px); }


/* The feed (hud.js `feed`, feed.js rows) on the left edge, MAG's place, in BF3 rows: the actor, the weapon's white
   icon (or the medic's cross, or the cause in a small box), the other; names in their relation colours, the map's
   (the `.rel-*` rules below; you yellow and bold), a teamkill's mark in red. The newest at the bottom. Its foot sits just above the down band (top 50%, half its height: the title's
   line at 6.4vw up to 118px, the band's 9.8vh of padding and about 90px of lines under it), so being down never
   covers it; at 1280x720 it ends near y 224, at 1920x1080 near y 367. */
.killfeed { position: absolute; isolation: isolate; --fall: 22px; left: 16px; bottom: calc(50% + min(3.36vw, 62px) + 4.9vh + 58px); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; font-family: var(--hudfont); font-size: clamp(14px, 0.86vw, 17px); font-weight: 600; letter-spacing: 0.04em; }
/* Rows float on the feed's one soft shadow (no glass behind each); a teamkill and a revive keep their coloured tick. */
.killfeed:empty::before { display: none; }
.kf { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 9px; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.5); color: var(--hi); white-space: nowrap; }
.kf-icon { flex: none; height: 1.15em; fill: #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)); }
.kf .how { padding: 0 5px; font-size: 0.78em; font-weight: 700; letter-spacing: 0.1em; color: var(--dim); border: 1px solid rgba(255, 255, 255, 0.24); line-height: 15px; text-shadow: none; }
.kf.tk .how { color: #fff; background: rgba(255, 59, 59, 0.55); border-color: var(--red); }
.kf .rel-none { color: var(--hi); }
.kf .you { font-weight: 700; }

/* The HUD's parts in play (the objectives, the minimap, the weapon, the health and squad box): no glass, no clipped
   corners, no edge (the operator, 2026-11-05: "no glass panels just a fading shadow behind hud elements"). Behind each
   part, and behind the meters, the feed, the gun prompt, the arm bar and voice's note, a soft dark shadow with no edge
   or shape of its own, MAG's look: a dark rectangle `--fall` larger than the part all round, feathered on all four
   sides by two crossed gradient masks along a smooth curve, so it is darkest behind the middle and fades to nothing
   past the edges (at most half the part's size, so a small part fades from its middle). Gradients, never a blur: a blur
   would cost a pass over the game every frame. Every text keeps its own dark shadow for bright sky, sand and concrete. */
.hudpart { position: absolute; bottom: 14px; width: var(--pw); color: var(--hi); font-family: var(--hudfont); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
.hudpart, .bar, .prompt, .voicenote, .sq-note { isolation: isolate; }
:is(.hudpart, .stats, .killfeed, .bar, .prompt, .voicenote, .sq-note)::before {
  --r: min(calc(var(--fall) * 2), 50%);
  --ramp: transparent 0, rgba(0, 0, 0, 0.16) calc(var(--r) * 0.25), rgba(0, 0, 0, 0.5) calc(var(--r) * 0.5), rgba(0, 0, 0, 0.84) calc(var(--r) * 0.75), #000 var(--r), #000 calc(100% - var(--r)), rgba(0, 0, 0, 0.84) calc(100% - var(--r) * 0.75), rgba(0, 0, 0, 0.5) calc(100% - var(--r) * 0.5), rgba(0, 0, 0, 0.16) calc(100% - var(--r) * 0.25), transparent 100%;
  content: ""; position: absolute; inset: calc(-1 * var(--fall)); z-index: -1; pointer-events: none; background: rgba(0, 0, 0, var(--shade));
  -webkit-mask-image: linear-gradient(to right, var(--ramp)), linear-gradient(to bottom, var(--ramp)); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, var(--ramp)), linear-gradient(to bottom, var(--ramp)); mask-composite: intersect;
}
/* Every menu and panel, one look from the `--ui-*` variables (the operator, 18:30): a slight black over the game, what
   is behind it blurred, a soft box shadow, small round corners; no frame, no clipped corner, no teal. The Team panel
   and the controls card sit inside the Esc screen and take the same look over it, so they read as cards on it. The
   gun prompt and the landing line's note show in play: they are the HUD's (a fading shadow, above), not panels. The
   panel is light enough that a bright sky shows through it grey, so the dim labels inside a panel are lifted (`--dim`
   is redefined here, for the panels only) and the greyed rows below read as white at low alpha, not a blue-grey. */
.glassy, .click, .panel, .md-box, .tune, .sq-team, .controlscard, .tabboard { background: var(--ui-bg); -webkit-backdrop-filter: blur(var(--ui-blur)); backdrop-filter: blur(var(--ui-blur)); box-shadow: var(--ui-shadow); border: 0; border-radius: var(--ui-radius); text-shadow: var(--ui-text); --dim: rgba(226, 240, 246, 0.82); }
.click .clicktitle { font-family: var(--hudfont); font-size: 18px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hi); }

/* A row of twelve letter chips A to L, the width the diamonds took, after the chips from before the BF3 restyle (the
   operator, 2026-11-05: "A to wtv blue when not armed, when armed flashing blue/red ... once its destroyed it can be
   crossed with a X"): blue standing (a thin blue edge, a blue letter on a little dark so it reads on the sky); armed,
   that blue and a red fill with a white letter turn about at 2 Hz (hud.js sets "lit" on the red frames, from the
   frame's clock); blown, grey and crossed corner to corner, the letter still read under the X. No fuse's time. */
.chips { display: flex; justify-content: center; gap: clamp(4px, 0.32vw, 6px); }
.chip { position: relative; flex: 0 0 auto; width: clamp(30px, 2.1vw, 40px); height: clamp(30px, 2.1vw, 40px); display: grid; place-items: center; border: 0; border-radius: 3px; background: var(--blue); color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.65); }
.chip b { position: relative; z-index: 1; font-size: clamp(16px, 1.1vw, 21px); font-weight: 800; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }
.chip.armed.lit { border-color: #ff4a3a; background: #ff4a3a; color: #fff; box-shadow: 0 0 8px rgba(255, 74, 58, 0.75), 0 1px 3px rgba(0, 0, 0, 0.6); }
/* Full like MAG (the operator, 2026-11-07): filled chips, the letter in contrast; blown is dark grey, crossed. */
.chip.blown { background: #3b4046; color: #d9dee2; }
/* The letter over the X, with a dark halo the lines stop at, so it reads through them. */
.chip.blown b { text-shadow: 0 0 2px #1c2024, 0 0 3px #1c2024, 0 0 4px #1c2024; }
.chip .x { display: none; position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); overflow: visible; }
.chip.blown .x { display: block; }
.chip .x path { fill: none; stroke: rgba(176, 184, 190, 0.7); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)); }
/* The clock between the sides' lines: QUANTS and its bar on the left running in, the mice's mirrored on the right. */
.tline { display: flex; justify-content: center; align-items: center; padding-top: 9px; }

/* Bottom left: the weapon. Bottom right: one box, the heartbeat and health on top, your squad under it (squadbox.js),
   and voice's line just over the box. Each on the HUD's soft shadow, no glass. */
.ammopanel { left: 16px; padding: 8px 12px 9px; }
.brcol { position: absolute; right: 16px; bottom: 14px; width: var(--pw); display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.brcol .hudpart { position: relative; bottom: auto; width: auto; }
.boxpanel { padding: 8px 12px 9px; }
.boxpanel .health { display: flex; align-items: center; gap: 8px; height: 20px; transform-origin: right center; }
.health .beat { flex: 1; height: 16px; overflow: visible; }
.health .beat polyline { fill: none; stroke: var(--cyan); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(143, 230, 255, 0.6)); }
.health .hpnum { min-width: 44px; text-align: right; font-size: clamp(17px, 1.05vw, 21px); font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.health.low .hpnum { color: #ffcf6b; }
.health.low .beat polyline { stroke: #ffcf6b; }
.health.crit .hpnum { color: #ff4a3a; }
.health.crit .beat polyline { stroke: #ff4a3a; }
.boxpanel .health:not(.hidden) + .bx:not(.hidden) { margin-top: 8px; }
.voicenote { position: relative; align-self: flex-end; max-width: 100%; padding: 4px 9px; --fall: 14px; font-family: var(--hudfont); font-size: clamp(13px, 0.8vw, 15px); font-weight: 600; letter-spacing: 0.02em; color: #ffcf6b; text-shadow: 0 1px 2px #000; }
.ammo { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "rounds side" "carry carry" "rule rule"; column-gap: 10px; align-items: center; }
.ammo .rounds { grid-area: rounds; display: flex; align-items: baseline; gap: 1px; line-height: 1; font-variant-numeric: tabular-nums; }
.ammo .rounds b { font-size: clamp(40px, 3.3vw, 56px); font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.ammo .rounds span { font-size: clamp(17px, 1.35vw, 23px); font-weight: 600; color: var(--dim); }
.ammo .rounds.low b { color: #ff8a65; }
.ammo .rounds.inf b { font-size: clamp(44px, 3.6vw, 60px); font-weight: 500; }
.ammo .wside { grid-area: side; justify-self: end; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ammo .weapon { font-size: clamp(16px, 1vw, 20px); font-weight: 700; letter-spacing: 0.12em; color: var(--hi); }
.ammo .fmode { display: flex; align-items: center; gap: 3px; font-size: clamp(11px, 0.7vw, 14px); font-weight: 700; letter-spacing: 0.14em; color: var(--dim); }
.ammo .fmode i { width: 4px; height: 8px; background: rgba(255, 255, 255, 0.18); }
.ammo .fmode i.on { background: var(--hi); }
.ammo .fmode span { margin-left: 4px; }
.ammo .note { font-size: clamp(12px, 0.75vw, 15px); font-weight: 700; letter-spacing: 0.12em; color: #ffcf6b; }
.ammo .note:empty { display: none; }
.ammo .carry { grid-area: carry; display: flex; gap: 14px; margin-top: 2px; font-size: clamp(14px, 0.86vw, 17px); font-weight: 700; letter-spacing: 0.06em; color: var(--hi); }
.ammo .kitn::before { content: "✚"; margin-right: 4px; font-size: 0.86em; color: var(--mint); }
.ammo .rule { grid-area: rule; height: 2px; margin-top: 5px; background: rgba(255, 255, 255, 0.13); }
.ammo .rulefill { height: 100%; width: 100%; background: var(--hi); }
.ammo .rule.low .rulefill { background: #ff8a65; }
.ammo .rule.busy .rulefill { background: #ffcf6b; }

/* Down, after Dark Souls' death screen (the operator's references): the words in muted red serif on a full-width
   dark band across the middle, the world left as it was (the wound look); under the band the give-up ring round R,
   the bleed count and its bar, who is getting you up. */
.downed { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; text-shadow: 0 1px 3px #000; }
/* No band behind the title any more (the operator, 2026-11-05), so no padding either: the give-up line sits close under it. */
.downed .downband { align-self: stretch; display: flex; justify-content: center; padding: 0; }
.downed .downtitle { font-family: "Cinzel", "Optima", "Trajan Pro", "Times New Roman", serif; font-weight: 400; font-size: clamp(40px, 6.4vw, 118px); line-height: 1.05; letter-spacing: 0.02em; color: #9b2a25; white-space: nowrap; text-shadow: none; }
.downed .downcount { font-family: "Cinzel", "Optima", "Times New Roman", serif; font-size: 14px; letter-spacing: 0.14em; color: #a59e94; }
.downed .bleed { width: 220px; height: 3px; background: rgba(0, 0, 0, 0.6); border-radius: 2px; overflow: hidden; }
.downed .bleedfill { height: 100%; width: 100%; background: #8e1a1f; }
.downed .giveup { display: flex; align-items: center; gap: 12px; font-family: "Cinzel", "Optima", "Times New Roman", serif; font-size: 16px; letter-spacing: 0.05em; color: #ddd6cb; }
.downed .givering { position: relative; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.downed .givering span { position: absolute; inset: 4px; border-radius: 50%; background: #1e1e1e; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; }
.givedark { position: fixed; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: none; }
.downed .rescue { font-size: 15px; font-weight: 600; letter-spacing: 0.06em; color: var(--mint); }

/* The revive you are doing: under the bunker's bar, in mint */
.bar.revive { top: 65%; }
.bar.revive .fill { background: var(--mint); }

/* The way to the stats: Profile, History and Leaderboard, side by side (the Esc screen, the results screen) */

/* The round's board (board.js): held on Tab, and on the results screen. Two sides side by side, on the menus' panel.
   Held on Tab it hangs 8px under the objectives, so the letters and the clock stay readable over it: anchored to their
   foot where the browser can (OVERTIME moves it down), else at a top that clears their tallest (73px + 2.5vw was that
   foot with the diamonds and a fuse line, measured at 1280 and 1920; the chips are shorter, so it still clears). Its width leaves the side columns free (the ammo, the box and
   the minimap are --pw wide, 16px in), so at 1280 it stops short of the minimap and the corners. */
.tabboard { position: absolute; left: 50%; top: calc(81px + 2.5vw); top: calc(anchor(--objtop bottom, calc(73px + 2.5vw)) + 8px); transform: translateX(-50%); width: clamp(min(94vw, 560px), calc(100vw - 2 * (var(--pw) + 24px)), 980px); padding: 14px 16px 12px; }
/* The rows scroll past this, so a full side ends on screen even under the tallest objectives. */
.tabboard .sb-rows { max-height: calc(100vh - 290px); }
/* The board after the operator's reference (2026-11-07, "can the scoreboard look more like this (cleaner)"): each side a
   table under a head bar in its own colour (the quants' black, the mice's tan) with its name, its head count and the
   columns' labels; rows of one height, numbered, the rank's insignia, the squad's letter, the name, then SCORE, K / D / R
   and NX in fixed columns. You lit, your squad's others half lit, the fallen dimmed: by lightness and opacity, never a
   coloured frame. One column template for the head, the rows and the foot, so everything lines up. */
.sb { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-family: var(--hudfont); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-side { min-width: 0; display: flex; flex-direction: column; }
.sb-head, .sb-row, .sb-foot { display: grid; grid-template-columns: 22px 30px 20px minmax(0, 1fr) 64px 28px 28px 28px 66px; gap: 0 6px; align-items: center; padding: 0 10px; }
.sb-head { height: 36px; border-radius: 3px 3px 0 0; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; }
.sb-side.quant .sb-head { background: var(--q-ink); color: #fff; }
.sb-side.mouse .sb-head { background: var(--m-ink); color: #15130f; text-shadow: none; }
.sb-lead { grid-column: 1 / 5; display: flex; align-items: baseline; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; }
.sb-title { font-size: 17px; font-weight: 700; letter-spacing: 0.16em; }
.sb-side.quant .sb-title { color: var(--q-ink); -webkit-text-stroke: 2.5px var(--q-edge); paint-order: stroke fill; }
.sb-side.mouse .sb-title { color: var(--m-ink); -webkit-text-stroke: 2.5px var(--m-edge); paint-order: stroke fill; }
.sb-count { font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0; opacity: 0.72; }
.sb-head .n { opacity: 0.78; }
.sb-rows { max-height: calc(100vh - 260px); overflow-y: auto; }
.sb-row { height: 28px; color: var(--hi); }
.sb-side.quant .sb-row { background: rgba(8, 9, 11, 0.58); }
.sb-side.quant .sb-row:nth-child(even) { background: rgba(8, 9, 11, 0.4); }
.sb-side.mouse .sb-row { background: rgba(239, 230, 209, 0.13); }
.sb-side.mouse .sb-row:nth-child(even) { background: rgba(239, 230, 209, 0.07); }
.sb .sb-side .sb-row.mate { background: rgba(255, 255, 255, 0.15); color: #fff; }
.sb .sb-side .sb-row.you { position: sticky; top: 0; bottom: 0; z-index: 1; background: #5a6066; color: #fff; font-weight: 700; }
.sb-row.dim > * { opacity: 0.5; }
.sb-pos { font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 500; text-align: right; color: var(--dim); }
.sb-row.you .sb-pos { color: #fff; }
.sb-ins { display: grid; place-items: center; height: 100%; }
.sb-ins .pf-insignia { height: 18px; max-width: 30px; }
.sb-ins .ins-plate { display: none; }
.sb-sq { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); font-size: 12px; font-weight: 700; color: #fff; }
.sb-sq:empty { background: none; }
.sb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-name small { margin-left: 8px; font-size: 11px; letter-spacing: 0.1em; color: var(--dim); font-weight: 700; }
.sb-name small.st { color: #ffcf6b; }
.sb-name small.st.dead { color: #ff6a55; }
.sb-name small.st.away { color: rgba(255, 255, 255, 0.55); }
.sb .n { position: relative; text-align: center; }
.sb .n.d::before, .sb .n.rv::before { content: "/"; position: absolute; left: -5px; opacity: 0.3; }
.sb .sc { text-align: right; font-weight: 700; color: #fff; }
.sb-head .sc { color: inherit; }
.sb .nx { text-align: right; color: #ffd84a; }
.sb-head .nx { color: inherit; }
.sb-foot { height: 30px; border-radius: 0 0 3px 3px; background: rgba(0, 0, 0, 0.42); color: var(--hi); font-weight: 700; }
.sb-foot .sb-lead { font-size: 11px; letter-spacing: 0.16em; color: var(--dim); }
.sb-none { padding: 8px 10px; color: rgba(255, 255, 255, 0.6); font-size: 13px; background: rgba(0, 0, 0, 0.3); }
.sb-empty { margin: 4px 0; font-size: 15px; color: var(--dim); text-align: center; }

/* The results screen at the whistle: who won, the final board, the wait, the way to the stats */
/* The results (the operator, 2026-11-07: "theres no energy, theres no personality its dead"): the menus' one look, the winner's
   emblem blurred behind it all, VICTORY or DEFEAT big between the two emblems, the awards, the board, a big countdown. */
.panel.results { width: min(1120px, 94vw); max-height: 94vh; display: flex; flex-direction: column; gap: 16px; padding: 28px 32px 22px; overflow: hidden; }
.panel.results > * { position: relative; z-index: 1; }
.panel.results:not(.solo)::before { content: ""; position: absolute; inset: -12%; z-index: 0; background: center / 70% no-repeat; filter: blur(48px) saturate(1.3); opacity: 0.2; pointer-events: none; }
.panel.results.win-quant::before { background-image: url("img/emblem-quant.jpg"); }
.panel.results.win-mouse::before { background-image: url("img/emblem-mouse.jpg"); }
.rs-hero { display: grid; grid-template-columns: 116px minmax(0, 1fr) 116px; align-items: center; gap: 24px; }
.panel.results.solo .rs-hero { grid-template-columns: minmax(0, 1fr); }
.panel.results.solo .rs-emb, .panel.results.solo .rs-outcome { display: none; }
.rs-emb { width: 116px; height: 116px; border-radius: 12px; object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); transition: opacity 0.3s ease, filter 0.3s ease; }
.results.win-mouse .rs-emb.quant, .results.win-quant .rs-emb.mouse { filter: grayscale(1); opacity: 0.4; scale: 0.86; }
.results.win-mouse .rs-emb.mouse, .results.win-quant .rs-emb.quant { scale: 1.06; }
.rs-title { text-align: center; min-width: 0; }
.rs-outcome { margin: 0; font-family: "Cinzel", Georgia, serif; font-size: 92px; font-weight: 600; line-height: 1; letter-spacing: 0.1em; padding-left: 0.1em; color: #fff; text-shadow: 0 6px 22px rgba(0, 0, 0, 0.7); }
.results.tone-win .rs-outcome { color: var(--gold); }
.results.tone-loss .rs-outcome { color: #d0392d; }
.results.tone-over .rs-outcome { font-size: 64px; }
.rs-mine:empty { display: none; }
.rs-mine .sb-mine { justify-content: center; margin: 0; }
.rs-awards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rs-awards:empty { display: none; }
.rs-award { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "t x" "n u" "w w"; align-items: baseline; column-gap: 8px; padding: 12px 18px 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); font-family: var(--hudfont); }
.rs-award.you { background: rgba(255, 255, 255, 0.13); }
.rs-award.none { opacity: 0.35; }
.aw-nx { grid-area: x; justify-self: end; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.aw-title { grid-area: t; font-size: 13px; font-weight: 700; letter-spacing: 0.28em; color: var(--gold); }
.aw-n { grid-area: n; font-size: 44px; font-weight: 700; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
.aw-unit { grid-area: u; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; opacity: 0.55; }
.aw-name { grid-area: w; font-size: 19px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results.win-mouse .sb-side.quant, .results.win-quant .sb-side.mouse { opacity: 0.62; }
.rs-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel h2.rs-win { margin: 10px 0 0; text-align: center; font-size: 30px; font-weight: 700; letter-spacing: 0.16em; }
.panel h2.rs-win.quant { color: var(--q-ink); -webkit-text-stroke: 3px var(--q-edge); paint-order: stroke fill; }
.panel h2.rs-win.mouse { color: var(--m-ink); -webkit-text-stroke: 3px var(--m-edge); paint-order: stroke fill; }
.rs-board { min-height: 0; overflow: hidden; }
.rs-board .sb-rows { max-height: calc(92vh - 250px); }
.rs-next { display: flex; align-items: center; gap: 14px; font-family: var(--hudfont); }
.rs-next-label { font-size: 14px; font-weight: 700; letter-spacing: 0.3em; opacity: 0.65; }
.rs-next-n { font-size: 56px; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; min-width: 1.2ch; }
/* The whistle lands: the word slams in, the rest rises after it (one flash of the panel, once). Only a from-frame, so
   each element settles on its own look (the loser's emblem stays grey). */
@media (prefers-reduced-motion: no-preference) {
  .rs-outcome { animation: rs-slam 0.6s cubic-bezier(0.2, 1.25, 0.35, 1) backwards; }
  .rs-win { animation: rs-in 0.5s 0.3s ease-out backwards; }
  .rs-emb { animation: rs-in 0.5s 0.15s ease-out backwards; }
  .rs-mine, .rs-board, .rs-foot { animation: rs-in 0.5s 0.6s ease-out backwards; }
  .rs-award { animation: rs-in 0.45s 0.4s ease-out backwards; }
  .rs-award:nth-child(2) { animation-delay: 0.5s; }
  .rs-award:nth-child(3) { animation-delay: 0.6s; }
  .panel.results:not(.solo)::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; animation: rs-flash 0.5s ease-out; }
}
@keyframes rs-slam { from { opacity: 0; scale: 1.9; } 60% { opacity: 1; scale: 0.96; } }
@keyframes rs-in { from { opacity: 0; translate: 0 16px; } }
@keyframes rs-flash { from { opacity: 0.3; } }
/* Solo (?offline=1): only who won, as a line over the walk that holds nothing */
.panel.results.solo { width: auto; top: 30%; padding: 12px 22px; pointer-events: none; }

/* The stats modal (profile.js): Profile, History and Leaderboard over the game, one box with tabs */
.modal { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; background: rgba(5, 7, 10, 0.55); pointer-events: auto; }
/* Its box takes the menus' one look; the scrim behind it (`.modal`) stays, so the game recedes while it is open. */
.md-box { position: relative; width: min(940px, 100%); max-height: 94vh; display: flex; flex-direction: column; }
.md-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.md-tabs { display: flex; gap: 8px; }
.md-body { overflow-y: auto; padding: 14px; }
.md-back { margin-bottom: 12px; }
.pf-link { padding: 0; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4); color: #fff; font: inherit; cursor: pointer; }
.pf-link:hover { color: var(--mint); }
.pf-board tr.pick { cursor: pointer; }
.pf-table td.sc { font-weight: 600; color: #fff; }
/* The cards inside the modal: a faint lift of white on the box, its corners as the box's, no edge and no teal. */
.pf-card, .pf-stat, .pf-group, .pf-panel, .pf-state { background: rgba(255, 255, 255, 0.05); border-radius: var(--ui-radius); }
.md-body { font-family: var(--hudfont); font-size: 15px; font-weight: 600; color: var(--hi); }
.pf-card { padding: 18px 20px; }
.pf-name { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: 0.04em; color: #fff; overflow-wrap: anywhere; }
.pf-meta { margin: 6px 0 12px; font-size: 14px; line-height: 1.5; color: var(--dim); }
.pf-meta span { white-space: nowrap; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip { padding: 3px 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: #fff; background: rgba(255, 255, 255, 0.08); border-radius: 3px; }
.pf-chip.win { color: var(--mint); }
.pf-chip.loss { color: var(--mouse); }
.pf-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0; }
.pf-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.pf-num { font-size: 48px; font-weight: 600; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.pf-stat.kd .pf-num { color: var(--mint); }
.pf-lab { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--dim); }
.pf-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.pf-group { padding: 14px 16px; }
.pf-group h3, .pf-panel h2 { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.16em; color: #fff; }
.pf-group dl { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; margin: 0; font-size: 15px; }
.pf-group dt { color: var(--dim); }
.pf-group dd { margin: 0; text-align: right; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.pf-panel { padding: 16px 18px; margin-bottom: 12px; }
.pf-sub { margin: -4px 0 12px; font-size: 13px; font-weight: 500; color: var(--dim); }
.pf-empty { margin: 0; font-size: 15px; color: var(--dim); }
.pf-bars { display: grid; gap: 9px; }
.pf-bar { display: grid; grid-template-columns: 76px 1fr 40px; align-items: center; gap: 10px; font-size: 14px; }
.pf-wname { color: var(--dim); letter-spacing: 0.1em; font-weight: 700; }
.pf-track { height: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.pf-fill { height: 100%; background: var(--cyan); }
.pf-wn { text-align: right; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.pf-bar.zero .pf-wname, .pf-bar.zero .pf-wn { color: rgba(255, 255, 255, 0.5); font-weight: 500; }
.pf-table { width: 100%; }
.pf-table table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.pf-table th { padding: 6px 8px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid rgba(255, 255, 255, 0.16); white-space: nowrap; }
.pf-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); white-space: nowrap; }
.pf-table tbody tr:last-child td { border-bottom: 0; }
.pf-table .n { text-align: right; }
.pf-table th .s { display: none; }
.pf-table .rank { color: var(--dim); }
.pf-table td.when { color: var(--dim); font-size: 14px; }
.pf-table td.res.win, .pf-table td.kd { color: var(--mint); }
.pf-table td.pf-side.quant { color: var(--q-ink); -webkit-text-stroke: 2px var(--q-edge); paint-order: stroke fill; }
.pf-table td.res.loss { color: var(--mouse); }
.pf-table td.pf-side.mouse { color: var(--m-ink); -webkit-text-stroke: 2px var(--m-edge); paint-order: stroke fill; }
.pf-table td.res.none { color: rgba(255, 255, 255, 0.55); }
.pf-table td.name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pf-board tbody tr:hover { background: rgba(255, 255, 255, 0.07); }
.pf-state { padding: 44px 20px; text-align: center; }
.pf-state p { margin: 0 0 18px; font-size: 18px; color: var(--hi); }
.pf-state p:last-child { margin: 0; }
@media (max-width: 560px) {
  .pf-card { padding: 14px; }
  .pf-name { font-size: 22px; }
  .pf-big { gap: 8px; margin: 8px 0; }
  .pf-stat { padding: 12px 10px; }
  .pf-num { font-size: 32px; }
  .pf-groups { grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; }
  .pf-panel { padding: 14px 12px; margin-bottom: 8px; }
  .pf-bar { grid-template-columns: 64px 1fr 30px; gap: 8px; }
  .pf-table table { font-size: 12px; }
  .pf-table th, .pf-table td { padding: 7px 4px; }
  .pf-table th .l, .pf-table .wide { display: none; }
  .pf-table th .s { display: inline; }
  .pf-table td.name { max-width: 150px; }
  /* The words take only what they need and the counts share the rest, so K and D never read as one number. */
  .pf-recent .rank, .pf-recent .pf-side, .pf-recent .res { padding-right: 10px; }
  .pf-recent .n { width: 9%; }
}

/* The minimap (minimap.js): square, top right, the map itself the only square there (no frame), on the HUD's soft
   shadow; and the big map (M) over the middle, round. Each canvas clips itself. */
.minimap { aspect-ratio: 1; background: rgba(6, 20, 26, 0.5); pointer-events: auto; cursor: pointer; }
.minimap canvas, .bigmap canvas { display: block; width: 100%; height: 100%; }
.bigmap canvas { border-radius: 50%; }
.bigmap { position: absolute; left: 50%; top: 50%; width: 72vmin; height: 72vmin; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4), var(--ui-shadow); pointer-events: auto; cursor: pointer; z-index: 2; }
/* While the big map is open the Esc screen and the deploy panel under it step aside, so nothing reads through it. */
#hud:has(.bigmap:not(.hidden)) :is(.click, .deploy) { visibility: hidden; }
.bigmap .bigcap { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); font-family: var(--hudfont); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; color: var(--hi); white-space: nowrap; text-shadow: 0 1px 2px #000; }

/* ── Squads (squads.js): each side's squad list and the leader spawn on the deploy panel, the Team panel on the Esc
   screen, the landing line. Names in the colours the minimap uses: you white, your squad blue, leaders gold, other
   allies mint. Buttons dark with white text, never light text on mint. ── */
.sq-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.sq-row { display: grid; grid-template-columns: 6ch 3.5ch minmax(11ch, 1fr) 3ch; align-items: center; gap: 8px; text-align: left; background: #1e1e1e; color: #fff; font-family: inherit; font-size: 11px; line-height: 1.25; padding: 2px 8px; border-radius: 4px; border: 1px solid #2c2c2c; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); cursor: pointer; }
/* Mint is the pick; a hover is only grey, so the row under a resting pointer never reads as a second pick. */
.sq-row { opacity: 0.72; transition: opacity 0.12s ease; }
.sq-row:hover:not(:disabled) { opacity: 0.9; }
.sq-row.picked { opacity: 1; }
.sq-row:disabled { opacity: 0.4; cursor: default; }
.sq-row .sq-seats, .sq-row .sq-to { opacity: 0.7; }
.sq-row .sq-to { grid-column: 2 / -1; }
.sq-row .sq-lead { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-row .sq-you { color: #3d8bff; font-size: 10px; letter-spacing: 0.06em; text-align: right; }
.sq-row.mine .sq-call { color: #3d8bff; }
.sq-mark { color: #f5c542; }
/* The quants' column is narrower than the mice's: there the reason drops under the button whole rather than
   squeezing the button's label or breaking over two lines. */
.sq-leader-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; }
.sq-leader-row .btn { flex-shrink: 0; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-why { font-size: 11px; opacity: 0.65; white-space: nowrap; }
.team-mount { cursor: default; }
/* The Team panel (the operator, 2026-11-07: "this section needs love"): the side's emblem, the squad's name big in its
   squad colour, how full it is; members as tiles in two columns (a full squad of eight keeps the Esc window inside a
   720 px screen), yours lit by opacity; who leads the platoon and your posts in a footer. */
.sq-team { min-width: 300px; text-align: left; font-family: var(--hudfont); font-size: 16px; font-weight: 600; letter-spacing: 0.02em; padding: 0; overflow: hidden; }
.sq-team-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); }
.sq-emblem { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55); }
.sq-team-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.05; }
.sq-team-call { color: var(--rel-squad); font-size: 24px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-team-side { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; opacity: 0.55; white-space: nowrap; }
.sq-count { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0.8; white-space: nowrap; }
.sq-members { list-style: none; margin: 0; padding: 4px 10px 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; }
.sq-members li { display: flex; gap: 6px; align-items: center; min-width: 0; height: 28px; padding: 0 9px; border-radius: 4px; background: rgba(255, 255, 255, 0.045); white-space: nowrap; }
.sq-members li.you { background: rgba(255, 255, 255, 0.12); }
.sq-members li.you .sq-name { font-weight: 700; }
.sq-members li.away { opacity: 0.45; }
.sq-mark { width: 1.1ch; text-align: center; color: var(--gold); flex-shrink: 0; }
.sq-members .sq-rank { margin: 0; flex-shrink: 0; }
.sq-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sq-tag { margin-left: auto; padding-left: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55; }
.sq-leads { display: flex; flex-direction: column; gap: 2px; padding: 6px 14px 10px; background: rgba(0, 0, 0, 0.18); }
.sq-platoon, .sq-post { display: flex; gap: 8px; align-items: center; min-height: 30px; }
.sq-platoon .sq-rank { margin: 0; }
.sq-label { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; min-width: 12ch; }
.sq-none { opacity: 0.5; }
.sq-why { font-size: 13px; opacity: 0.6; }
.sq-post .btn { margin-left: auto; padding: 6px 16px; font-size: 12px; }
.sq-leads .sq-tag { margin-left: 2px; }
/* A person's name by who they are to you, in the map's colours (lane COLOR, the operator 2026-11-06: "One colour scheme
   everywhere (map's): you yellow, squad cyan, allies blue, leaders gold, enemies red"). The colours are relcolor.js's,
   set on the page as `--rel-*` by hud.js, so the minimap, the head markers and every name read one source; none is
   written here. */
.rel-self { color: var(--rel-self); }
.rel-squad { color: var(--rel-squad); }
.rel-leader { color: var(--rel-leader); }
.rel-platoon { color: var(--rel-platoon); }
.rel-ally { color: var(--rel-ally); }
.rel-enemy { color: var(--rel-enemy); }
.sq-note { position: absolute; top: 132px; left: 50%; transform: translateX(-50%); padding: 6px 12px; --fall: 16px; font-size: 13px; text-shadow: 0 1px 2px #000; }

/* ── Voice (voice.js): the Esc screen's Voice row. Who is talking is in the squad box (below). */
/* One line per thing (the operator, 2026-11-05: "put this on multiple line one per thing"): the label, Mic, Mute
   everyone, then Volume with its slider across the rest of the line. */
.voicerow { display: flex; flex-direction: column; align-items: stretch; gap: 6px; font-size: 12px; color: #c9d4df; cursor: default; }
.voicerow .vr-label { color: #e8eaed; }
.voicerow .btn { text-align: left; white-space: nowrap; }
.voicerow .vr-vol { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.voicerow .vr-vol input { flex: 1; min-width: 0; accent-color: #e8eaed; cursor: pointer; }

/* ── Lane POST: the Esc screen's Graphics row (post.js tiers), under Voice. Three buttons in the house's look (#1e1e1e,
   white Fira Code, soft shadow); state is opacity alone: the one in use full, the others dimmer until hovered. No
   lighter fill, coloured frame, outline or glow on any of them. */
.gfxrow { display: flex; flex-direction: column; align-items: stretch; gap: 6px; font-size: 12px; color: #c9d4df; cursor: default; }
.gfxrow .gfx-label { color: #e8eaed; }
.gfxrow .gfx-btns { display: flex; gap: 6px; }
.gfxrow .gfx-btn { flex: 1; opacity: 0.55; }
.gfxrow .gfx-btn:hover { opacity: 0.85; }
.gfxrow .gfx-btn.on { opacity: 1; }
.gfxrow .gfx-note { color: #9aa6b2; font-size: 11px; min-height: 1em; }

/* ── The squad box (squadbox.js), under your health in the bottom-right box, after MAG's (the operator, 2026-11-05: "more
   like mag"): no panel, the list floating on the box's soft shadow. The header in mixed case and light grey ("Onyx
   Squad: Defending"); one row a member, the names larger and white (yours bold, as before; colour only where it means
   something); on the left one narrow column holding the leader's gold badge (★ the platoon leader, the chevrons a
   squad leader), or instead a white speech bubble while that one talks (yours while T is held and your frames go out;
   red and struck through for anyone you muted here), the two in the same place as in MAG's shot; on the right the
   state, white: a shield up, a cross down, the dead dimmed. The voices from outside the squad sit over the header in
   the same look, with the net they reach you on in gold. */
.bx { font-family: var(--hudfont); }
/* The header starts where the names do (the icon column, the gap and the name's own 3px), as MAG's sits clear of the
   icons: "Mamba Squad: Attacking", the longest, fits the 200px box at 1280 whole. */
.bx-head { margin-bottom: 3px; padding-left: calc(clamp(16px, 1.05vw, 20px) + 6px); font-size: clamp(13px, 0.9vw, 17px); font-weight: 600; letter-spacing: 0.02em; color: #c4c9cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-rows, .bx-voices { display: flex; flex-direction: column; }
.bx-voices:not(:empty) { margin-bottom: 6px; }
.bx-row, .bx-voice { display: grid; grid-template-columns: clamp(16px, 1.05vw, 20px) minmax(0, 1fr) auto; align-items: center; column-gap: 3px; height: clamp(21px, 1.36vw, 26px); font-size: clamp(16px, 1.04vw, 20px); font-weight: 600; letter-spacing: 0.02em; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.6); }
.bx-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 3px; }
/* White whoever they are: in your own squad a relation colour says nothing the badge does not. */
.bx .bx-name[class*="rel-"] { color: #fff; }
.bx-row.you .bx-name { font-weight: 700; }
/* The net a voice from outside reaches you on, kept tight so the larger names keep their room at 1280. */
.bx-tag { padding-left: 5px; font-size: 0.66em; font-weight: 700; letter-spacing: 0.06em; color: var(--gold); white-space: nowrap; }
/* The one icon column: the bubble and the badge laid on the same cell; squadbox.js shows one at a time. */
.bx-lead { display: grid; place-items: center; }
.bx-lead > * { grid-area: 1 / 1; }
.bx-mark { display: flex; align-items: center; justify-content: center; }
.bx-badge { width: 0.78em; height: 0.78em; visibility: hidden; }
.bx-mark.on .bx-badge { visibility: visible; }
.bx-badge path { fill: var(--rel-leader); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)); }
.bx-state { justify-self: end; width: clamp(14px, 0.95vw, 18px); height: clamp(14px, 0.95vw, 18px); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)); }
.bx-state path { fill: #fff; }
.bx-row[data-state="dead"] :is(.bx-name, .bx-lead, .bx-state) { opacity: 0.42; }
.bx-row.away .bx-name { font-style: italic; }
/* Talking: the bubble, outlined white, full while their frames come, softer in the moment after; by class only, so
   nothing blinks (talkers.js keeps a row 0.6 s past its end). */
.bx-talk { display: flex; align-items: center; justify-content: center; visibility: hidden; }
.bx-talk.on, .bx-talk.muted { visibility: visible; }
.bx-bubble { width: 1em; height: 1em; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.95)); }
.bx-bubble .body { fill: rgba(255, 255, 255, 0.16); stroke: #fff; stroke-width: 1.25; stroke-linejoin: round; }
.bx-bubble .strike { display: none; fill: none; stroke: #ff4a3a; stroke-width: 1.7; stroke-linecap: round; }
.bx-talk:not(.live):not(.muted) .bx-bubble { opacity: 0.6; }
/* Someone you muted here: the bubble red and struck through all the time, never lit (your own row is never muted). */
.bx-talk.muted .body { fill: rgba(255, 74, 58, 0.18); stroke: #ff4a3a; }
.bx-talk.muted .strike { display: inline; }
/* With the pointer free each other member's row is a button that mutes or unmutes them here (your own row takes no
   click: you talk by holding T): a faint light under the pointer. The whole squad half takes the pointer then, so a
   click on the header or on your own row does nothing rather than fall through to the game and start play. */
.bx.free { pointer-events: auto; }
.bx.free .toggle { cursor: pointer; border-radius: 2px; }
.bx.free :is(.bx-row, .bx-voice).toggle:hover { background: rgba(255, 255, 255, 0.1); }

/* ── The Esc screen's buttons and the controls card behind the keyboard button. With the card open the Esc screen
   moves up to just under the objectives (never over them), so the card, the Team panel and the Voice row all stay
   on a 720 px screen; on a taller one it stands about the middle. A Team panel taller than any seen (both posts
   stepped down from) scrolls inside it rather than run off the screen. */
.clickrow { display: flex; gap: 8px; align-items: center; }
.keysbtn { display: inline-flex; align-items: center; gap: 7px; }
.keysbtn svg { width: 20px; height: 14px; fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; }
.click.cards { top: max(96px, calc(50% - 290px)); gap: 8px; max-height: calc(100% - 104px); overflow-y: auto; }
.controlscard { cursor: default; padding: 10px 14px 12px; font-family: var(--hudfont); }
.cc-title { margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); }
.cc-cols { display: flex; gap: 22px; }
/* The card in groups (the operator, 2026-11-07: "how can we make this cleaner?"): a small head, then one line a row, the
   label first and its keys at the right edge, a hairline between rows; the mouse buttons drawn. */
.cc-group + .cc-group { margin-top: 16px; }
.cc-head { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.24em; color: var(--dim); opacity: 0.7; }
.cc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.cc-row:last-child { border-bottom: 0; }
.cc-note { margin-left: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; opacity: 0.5; }
.cc-keys kbd.cc-mouse { display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding: 2px 6px; }
.cc-mouse svg { width: 11px; height: 16px; }
.cc-mouse .ms-body { fill: none; stroke: #fff; stroke-width: 1.1; opacity: 0.75; }
.cc-mouse .ms-on { fill: #fff; }
/* Each column its groups, one above the other. */
.cc-col { min-width: 0; font-size: 14px; font-weight: 600; color: var(--hi); }
.cc-keys { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; justify-content: flex-end; }
.cc-keys kbd { min-width: 1.7em; padding: 0 5px; text-align: center; font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 11px; line-height: 16px; color: #fff; background: #1e1e1e; border: 1px solid #3a3a3a; border-bottom-width: 2px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.cc-sep { padding: 0 1px; font-size: 12px; color: var(--dim); }
.cc-label { white-space: nowrap; }

/* ── The med kit (lane MED): the cooldown ring by the weapon readout and the regenerating health (medkit.js), and the
   revives column on the Tab board (board.js). Kept in one block so the HUD's own rules above stay as they are. */
.medkit { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 4px; font-size: 13px; font-variant-numeric: tabular-nums; color: #e8eaed; }
.medkit .mk-label { font-size: 11px; letter-spacing: 0.12em; color: #c9d4df; }
/* The ring empties as the cooldown runs out (--left 1 just puffed, 0 ready): mint for what is left, dark for the rest. */
.medkit .mk-ring { --left: 0; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(var(--mint) calc(var(--left) * 360deg), rgba(13, 17, 23, 0.75) 0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); -webkit-mask: radial-gradient(circle, transparent 4px, #000 4.5px); mask: radial-gradient(circle, transparent 4px, #000 4.5px); }
.medkit:not(.cooling) .mk-ring { background: var(--mint); }
.medkit .mk-text { min-width: 4ch; text-align: right; font-weight: 600; }
.medkit:not(.cooling) .mk-text { color: var(--mint); letter-spacing: 0.06em; font-size: 11px; }
/* Regenerating: the bar glows mint and brightens with --regen (0 to 1, driven by the frame's clock). */
.health.regen .hpfill { background: var(--mint); filter: brightness(calc(1 + 0.45 * var(--regen, 0))); box-shadow: 0 0 calc(4px + 8px * var(--regen, 0)) rgba(151, 252, 228, 0.9); }
.health.regen .hpbar { overflow: visible; box-shadow: 0 0 calc(6px * var(--regen, 0)) rgba(151, 252, 228, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5); }
.health.regen .hpnum { color: #e8fff8; text-shadow: 0 0 calc(10px * var(--regen, 0)) rgba(151, 252, 228, 0.85), 0 1px 3px #000; }
/* In the BF3 panel (merged after lane BF3): the readout sits in the weapon's carry row beside the grenades, where the
   kit's count was, and the regeneration pulses the heartbeat line (there is no health bar: the .hpfill/.hpbar rules
   above are for the old HUD and match nothing here). */
.ammo .carry .medkit { margin-top: 0; }
/* The med gun's cooldown round the aim dot (medkit.js; the operator, 2026-11-07: "I want the reload / cooldown of medic
   gun to show around the aim dot", "so I dont have to look in right corner"): a thin ring, twelve ticks across its
   bottom lit left to right as it recharges, gone once it is ready. White; state in opacity. */
.mk-aim { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.85)); }
.mk-aim circle { fill: none; stroke: #ffffff; stroke-width: 1.6; opacity: 0.45; }
.mk-aim path { stroke: #ffffff; stroke-width: 3; opacity: 0.25; }
.mk-aim path.on { opacity: 0.95; }
.health.regen .beat polyline { stroke: var(--mint); filter: drop-shadow(0 0 calc(2px + 6px * var(--regen, 0)) rgba(151, 252, 228, 0.9)); }
/* The tuning panel grew to eighteen rows (the bunker guns' two, then the med kit's five at the end): it scrolls rather
   than run off a 720 px screen, so the last rows can always be reached. */
.tune { max-height: calc(100vh - 68px); overflow-y: auto; }

/* Lane MAPM: the big map (M). Its island stays 85% opaque, the operator's plan, but what of the game shows through it
   is drained of colour, dimmed and blurred, so the greyscale map gets no hue and no shape from the scene behind it (a
   hedgehog or a ship read as something on the map). The backdrop pass costs a little, and only while the map is open. */
.bigmap { backdrop-filter: grayscale(1) brightness(0.6) blur(8px); }

/* ── The kick vote (lane KICK): the toggle and the count at the foot of the Team panel, and the Take back's reason
   while voted out. The toggle is the panel's own button (#1e1e1e, white Fira Code); on is a mint ring and a mint
   tick before the label, never light text on mint. */
.sq-kick { display: flex; gap: 8px; align-items: center; margin-top: 8px; padding-top: 7px; border-top: 1px solid #232a33; }
.sq-kick .btn { padding: 5px 10px; font-size: 11px; max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The tick keeps its room when off, so the button (and the panel) never changes width as it flips. */
.sq-kick .btn::before { content: "✓ "; color: transparent; }
.sq-kick .btn.on::before { color: var(--mint); }
.sq-kick .sq-label { min-width: 0; }
.sq-kick-count { font-variant-numeric: tabular-nums; color: #c9d4df; white-space: nowrap; }

/* ── Accounts and the payout address (lane ACCT): the Profile's account section (account.js). Its buttons are the
   house's .btn (white Fira Code on #1e1e1e, soft shadow); the main one only gains a mint edge, never a mint fill. */
/* As far from the card above as the numbers are below it. */
.acct.pf-panel { margin-top: 12px; }
.acct h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: #fff; }
.acct .ac-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.acct .ac-small { padding: 5px 8px; font-size: 11px; }
.acct .ac-link { margin-top: 12px; padding: 5px 8px; font-size: 11px; }
.acct .ac-who { display: flex; align-items: baseline; gap: 10px; }
.acct .ac-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.acct .ac-name { font-size: 22px; font-weight: 700; letter-spacing: 0.04em; color: var(--hi); }
.acct .ac-wallet { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.acct .ac-row { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.acct .ac-addr { font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 14px; color: var(--hi); letter-spacing: 0.02em; }
.acct .ac-none { color: var(--dim); font-weight: 500; }
.acct .ac-note { margin: 10px 0 0; font-size: 13px; font-weight: 500; color: var(--dim); max-width: 640px; }
.acct .ac-nx { margin-top: 8px; justify-content: space-between; max-width: 420px; padding: 8px 12px; background: rgba(255, 255, 255, 0.07); border-radius: 3px; }
.acct .ac-nxv { font-variant-numeric: tabular-nums; color: var(--dim); }
.acct .ac-flash { margin: 0 0 10px; color: var(--mint); font-weight: 600; }
.acct .ac-form { max-width: 420px; }
.acct .ac-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
.acct .ac-field input { font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 13px; color: #fff; background: #11161c; border: 1px solid #2c3a44; border-radius: 6px; padding: 8px 10px; outline: none; }
.acct .ac-field input:focus { border-color: #5b6874; }
.acct .ac-hint { font-size: 12px; font-weight: 500; color: var(--dim); }
.acct .ac-err { min-height: 18px; margin: 2px 0 0; font-size: 13px; color: #ff8a7a; }
.acct .ac-err:empty { min-height: 0; margin: 0; }
.acct .ac-codev { display: inline-block; margin: 4px 0 12px; padding: 10px 14px; font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 22px; letter-spacing: 0.08em; color: #fff; background: #11161c; border: 1px solid #2c3a44; border-radius: 6px; user-select: all; }
/* ── NX and rank (lane XP): the popups under-right of the crosshair (nxfeed.js), the rank chips on the Tab board, the
   Team panel and the leaderboard, and the Profile's rank card (rank.js). Kept in one block so the rules above stay
   as they are. The popups move on the frame clock (transform and opacity set each frame), never by CSS animation. */
.nx-feed { position: absolute; left: calc(50% + 24px); top: calc(50% + 58px); width: 0; height: 0; font-family: var(--hudfont); font-weight: 700; text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.85); }
.nx-pop { position: absolute; left: 0; bottom: 0; white-space: nowrap; will-change: transform, opacity; }
.nx-line { height: 20px; line-height: 20px; font-size: 21px; font-weight: 600; letter-spacing: 0.04em; }
/* As in MAG: the number big, the unit smaller beside it. */
.nx-line .nx-x { font-size: 0.78em; }
.nx-line .nx-n { color: #ffd84a; }
.nx-line .nx-x { color: #fff; }
.nx-line.nx-bonus { height: 17px; line-height: 17px; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: #6dff8a; }
.nx-line.nx-tk { color: #ff4a3d; }
.nx-line.nx-promo { height: 30px; line-height: 30px; font-size: 27px; letter-spacing: 0.08em; color: #fff; }
/* The rank in short form before a name: gold, small and boxed, the same on the board, the Team panel and the
   leaderboard. */
.sb-name small.rk, .sq-rank, .pf-board .rk, .bx-rank { display: inline-block; margin: 0 6px 0 0; padding: 0 4px; min-width: 3.2ch; text-align: center; font-family: var(--hudfont); font-size: 11px; font-weight: 700; line-height: 15px; letter-spacing: 0.06em; color: var(--gold); border: 1px solid rgba(245, 197, 66, 0.5); border-radius: 2px; vertical-align: 1px; }
.pf-board td.nx, .pf-recent td.nx { color: #ffd84a; }
/* The Profile cards' look since lane OBJ: white at low alpha, round corners, no frame and no clipped corner. */
.pf-rank { margin: 12px 0; padding: 14px 18px; background: rgba(255, 255, 255, 0.05); border-radius: var(--ui-radius); }
.pf-rank-head { display: flex; align-items: center; gap: 14px; }
.pf-insignia { height: 46px; width: auto; max-width: 64px; flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
/* The marks' own class names (ins-*): the HUD's .bar would hide a bar. */
.pf-insignia .ins-chev, .pf-insignia .ins-leaf { fill: var(--gold); }
.pf-insignia .ins-bar, .pf-insignia .ins-star { fill: #e4e9ef; }
.pf-insignia .ins-plate { fill: none; stroke: rgba(255, 255, 255, 0.32); stroke-width: 1.5; }
.pf-rank-words { display: flex; flex-direction: column; gap: 2px; }
.pf-rank-name { font-size: 24px; font-weight: 700; letter-spacing: 0.08em; color: #fff; }
.pf-rank-nx { font-size: 16px; font-weight: 700; letter-spacing: 0.06em; color: #ffd84a; font-variant-numeric: tabular-nums; }
.pf-rank-track { height: 6px; margin-top: 12px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pf-rank-fill { height: 100%; background: var(--gold); }
.pf-rank-next { margin: 6px 0 0; font-size: 13px; color: var(--dim); }
.pf-sorts { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.pf-sort-label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
/* The Tab and results boards' sixth column, the round's NX, in the popups' yellow; and your own line over both sides
   ("+120 NX THIS ROUND · PROMOTED: PRIVATE"), which shows the whistle's credits the popups never get to show. The
   rows' scroll room gives that line its height back. */
.sb-mine { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: 0; font-size: 19px; font-weight: 700; letter-spacing: 0.06em; text-shadow: 0 1px 2px #000; }
.sb-mine .nx-n { color: #ffd84a; }
.sb-mine .nx-x { margin-left: 0.3em; color: #fff; font-size: 0.78em; }
.sb-mine .sb-promo { margin-left: 18px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, 0.24); color: #fff; letter-spacing: 0.1em; }
.sb:has(> .sb-mine) .sb-rows { max-height: calc(100vh - 300px); }
.rs-board .sb:has(> .sb-mine) .sb-rows { max-height: calc(92vh - 290px); }
/* The "2x" chip (spec, "Moving as a unit"): the bonus a credit would earn now, green as the bonus line, at the foot
   of the screen over the controls line, where nothing else of the HUD sits. */
.nx-mult { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); padding: 3px 10px 2px; font-family: var(--hudfont); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; color: #6dff8a; background: rgba(8, 14, 18, 0.55); border: 1px solid rgba(109, 255, 138, 0.45); border-radius: 2px; text-shadow: 0 1px 2px #000; pointer-events: none; }
/* The squad box's rows (squadbox.js, merged from main with lane XP's patch): the rank chip and the name share the
   name's column, so the row keeps its four columns. Nothing here matches in this lane's base, which has no squad box. */
.bx-who { display: flex; align-items: center; gap: 5px; min-width: 0; }
.bx-who .bx-name { flex: 1 1 auto; }
.bx-who .bx-rank { margin: 0; font-size: 10px; line-height: 13px; }
.bx-rank[hidden] { display: none; }

/* Lane WALLET: the Profile's wallet list. Each wallet is a house button (#1e1e1e, white Fira Code) with the wallet's
   own icon drawn at its left as a background, so the name stays plain text. */
.acct .ac-connect { max-width: 520px; }
.acct .ac-wallets { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.acct .ac-walletbtn { min-width: 160px; padding: 10px 14px 10px 44px; font-size: 13px; text-align: left; background-repeat: no-repeat; background-position: 12px center; background-size: 22px 22px; }
.acct .ac-connect .ac-none { margin: 10px 0 0; }

/* ── Lane FLOW: the Esc screen as one window with tabs ────────────────────────────────────────────────────────────
   The operator: the controls "always be there", and Profile, History, Leaderboard "as toggles at the top that change
   that window context". The window takes the menus' one look, and the controls card and the Team panel inside it
   keep theirs (one look for every panel, uilook.test.mjs). */
/* As tall as the open tab (hud.js `fitEsc` sets the height, the operator 2026-11-07: "scale of the height based on the
   current page (hav it frow/collapse smooth)"), up to the cap; the top edge stays where the full window's was, so the
   tabs stay put and the window grows and collapses below them. Over the minimap and the frame meters. */
.click.escwin { top: calc(50% + 24px - min(740px, calc(100vh - 130px)) / 2); transform: translateX(-50%); width: min(1000px, calc(100vw - 32px)); height: min(740px, calc(100vh - 130px)); max-height: min(740px, calc(100vh - 130px)); padding: 0; gap: 0; align-items: stretch; z-index: 6; overflow: hidden; transition: height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .click.escwin { transition: none; } }
.esc-tabs { display: flex; flex: none; padding: 0 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); cursor: default; }
.esc-tab { appearance: none; background: none; border: 0; padding: 12px 18px 10px; opacity: 0.5; transition: opacity 0.12s ease; font-family: var(--hudfont); font-size: 16px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; text-shadow: var(--ui-text); cursor: pointer; }
.esc-tab:hover { opacity: 0.8; }
.esc-tab.on { opacity: 1; }
.esc-game { flex: 0 1 auto; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 18px; padding: 14px 18px 16px; align-items: start; min-height: 0; overflow-y: auto; }
.esc-left { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; }
.esc-left .clicktitle { padding: 12px; text-align: center; background: rgba(255, 255, 255, 0.06); border-radius: 3px; }
.esc-left .clickrow .btn { align-self: flex-start; }
/* Redeploy fills the column, the kill feed's skull in red before the word (the operator, 2026-11-07). */
.esc-left .clickrow .btn.redeploy { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn.redeploy .rd-skull { width: 1.3em; height: 1.3em; flex: none; fill: var(--red); }
/* In the Esc window the card fills its height and the rows spread over it (the operator: "have controls more spread
   out"). */
.esc-game .controlscard { align-self: stretch; display: flex; flex-direction: column; padding: 16px 20px; }
.esc-game .cc-title { margin-bottom: 14px; }
.esc-game .cc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.esc-game .cc-col { font-size: 15px; }
.esc-game .cc-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esc-game .cc-keys kbd { font-size: 12px; line-height: 20px; padding: 0 7px; }
.esc-game .cc-keys kbd.cc-mouse { padding: 2px 7px; }
.esc-stats { flex: 0 1 auto; min-height: 0; overflow-y: auto; cursor: default; }
.esc-stats .md-body { padding: 14px 18px 16px; }
.pf-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; font-family: var(--hudfont); font-size: 15px; font-weight: 700; letter-spacing: 0.1em; color: var(--hi); }
.pf-pager .pf-page { min-width: 220px; text-align: center; }

/* ── Lane FLOW: the way in, after MAG (flow.js): 1 SIDE, 2 SQUAD, 3 DEPLOY ───────────────────────────────────────
   The operator approved the mockups ("yes thats exactly it") and sent the two clans' emblems for the A and B cards. The
   whole screen is the flow's while it shows: the world stays behind it, softened, and nothing under it takes a click. */
/* The squads and deploy steps keep the game in sight; the side cards sit on a darker veil, for contrast, blurred only
   lightly so the sky camera's turn still shows (the operator, 2026-11-07: "only on the pick side screen", "I just
   wanted this one to have more contrast", "I liked the camera in the sky rotating"). */
.flow { position: absolute; inset: 0; z-index: 7; pointer-events: auto; background: rgba(0, 0, 0, 0.28); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); font-family: var(--hudfont); color: #fff; }
.flow[data-step="side"] { background: rgba(0, 0, 0, 0.65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.fl-screen { position: absolute; inset: 0; }
.fl-grow { flex: 1; min-width: 0; }
.fl-note { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); font-size: 16px; font-weight: 600; letter-spacing: 0.06em; text-shadow: var(--ui-text); }
/* 1 SIDE: two cards, each the clan's emblem whole and edge to edge (the operator's new art, 2026-11-07: opaque, on its
   own dark ground), then a dark strip with the name, the role and the seats bar. */
.fl-teams { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; gap: 40px; }
.fl-team { position: relative; width: min(400px, 38vw, calc((100vh - 300px) * 0.9)); padding: 0; border: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; background: #0b0b0c; color: #fff; font-family: var(--hudfont); cursor: pointer; opacity: 0.62; transition: transform 0.12s ease, opacity 0.12s ease; }
/* No frame and no coloured glow: the card you point at or are on comes up to full, the other stays faded. */
.fl-team.quant { --side: var(--q-ink); --side-edge: var(--q-edge); }
.fl-team.mouse { --side: var(--m-ink); --side-edge: var(--m-edge); }
.fl-team:not(:disabled):hover { opacity: 0.9; transform: translateY(-3px); }
.fl-team.mine, .fl-team.mine:not(:disabled):hover { opacity: 1; }
.fl-team:disabled { cursor: default; filter: grayscale(1); opacity: 0.3; }
.fl-portrait { position: relative; width: 100%; aspect-ratio: 10 / 11; }
.fl-portrait::after { content: ""; position: absolute; inset: auto 0 0; height: 18%; background: linear-gradient(to top, #0b0b0c, transparent); pointer-events: none; }
.fl-emblem { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.fl-flag { position: absolute; top: 14px; right: 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.16em; color: #fff; background: rgba(0, 0, 0, 0.55); padding: 2px 8px; border-radius: 3px; }
.fl-label { position: relative; padding: 4px 0 40px; text-align: center; background: #0b0b0c; display: flex; flex-direction: column; gap: 10px; }
.fl-name { font-size: 28px; font-weight: 700; letter-spacing: 0.16em; color: var(--side); -webkit-text-stroke: 3px var(--side-edge); paint-order: stroke fill; }
.fl-role { font-size: 15px; font-weight: 600; letter-spacing: 0.2em; color: var(--dim); }
.fl-seats { margin: 6px auto 0; width: 70%; height: 4px; background: rgba(255, 255, 255, 0.15); }
.fl-seats i { display: block; height: 100%; background: var(--side); box-shadow: 0 0 0 1px var(--side-edge); }
.fl-count { font-size: 14px; font-weight: 700; margin-top: 4px; letter-spacing: 0.1em; }
/* 2 SQUAD and 3 DEPLOY share one window. */
/* Up to 1580 wide (the operator, 2026-11-07: "no need for max 1180 make it 1580"). */
.fl-win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1580px, calc(100vw - 40px)); padding: 16px 20px 14px; }
.fl-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.fl-back { flex: none; }
.fl-title { font-size: 22px; font-weight: 700; letter-spacing: 0.16em; white-space: nowrap; }
.fl-title.quant { color: var(--q-ink); -webkit-text-stroke: 3px var(--q-edge); paint-order: stroke fill; }
.fl-title.mouse { color: var(--m-ink); -webkit-text-stroke: 3px var(--m-edge); paint-order: stroke fill; }
.fl-sub { font-size: 15px; font-weight: 600; letter-spacing: 0.12em; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* Squads are fills, not frames: your own a step lighter. */
/* A squad card's state is opacity (feedback: no colour frames): yours lit, a full one faded back, one you can join
   lifts under the pointer and joins on a click anywhere on it. */
.fl-sq { border-radius: 3px; padding: 0 0 6px; background: rgba(255, 255, 255, 0.04); transition: background 0.15s, opacity 0.15s; }
.fl-sq.mine { background: rgba(255, 255, 255, 0.11); }
.fl-sq.full { opacity: 0.5; }
.fl-sq.can { cursor: pointer; }
.fl-sq.can:hover { background: rgba(255, 255, 255, 0.08); }
.fl-sq-head { display: flex; align-items: center; gap: 8px; padding: 9px 8px 8px 12px; }
/* The seat strip under the name: a mark a seat, the taken ones lit. It is the line between the head and the rows. */
.fl-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; padding: 0 12px; margin-bottom: 6px; }
.fl-strip i { height: 3px; border-radius: 1px; background: #fff; opacity: 0.1; }
.fl-strip i.on { opacity: 0.75; }
.fl-sq.mine .fl-strip i.on { opacity: 1; }
.fl-sq-name { font-size: 17px; font-weight: 700; letter-spacing: 0.12em; }
.fl-sq-n { font-size: 14px; font-weight: 600; color: var(--dim); }
.fl-join { padding: 3px 10px; font-size: 11px; }
.fl-talking { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; }
/* Rows with room (the operator: "the rows can be more than 23px"). */
.fl-row { display: grid; grid-template-columns: 18px 38px minmax(0, 1fr) auto 18px; align-items: center; column-gap: 6px; height: 31px; padding: 0 10px; font-size: 16px; font-weight: 600; }
.fl-row.you { background: rgba(255, 255, 255, 0.12); }
.fl-row.you .fl-nm { color: var(--rel-self); }
/* An open or taken seat keeps the row's grid: an empty cell over the voice and insignia columns puts its word in the
   name column, under the names, at any row size (it was a hand-set 85px indent, 10px short of them). */
.fl-row.open, .fl-row.taken { color: rgba(255, 255, 255, 0.28); font-weight: 500; font-size: 14px; }
.fl-row.open::before, .fl-row.taken::before { content: ""; grid-column: 1 / 3; }
/* On a squad card an open seat has no word: a quiet bar the height of a name, inset from the card's edges. */
.fl-sq .fl-row.open { background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.035)) center / calc(100% - 20px) 23px no-repeat; }
/* Your seat-to-be in a squad you can join: your insignia and name in its first open seat, shown on hover. */
.fl-row.ghost::before { display: none; }
.fl-row.ghost > * { opacity: 0; transition: opacity 0.15s; }
.fl-row.ghost .fl-nm { color: var(--rel-self); font-weight: 600; font-size: 16px; }
.fl-sq.can:hover .fl-row.ghost > * { opacity: 0.5; }
.fl-row.out .fl-nm, .fl-row.out .st { opacity: 0.45; }
.fl-c { display: grid; place-items: center; }
.fl-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-v, .fl-ins { display: grid; place-items: center; height: 100%; }
/* The rank as its insignia (rank.js), sized to the row; its name is the cell's hover. */
.fl-ins .pf-insignia { height: 20px; max-width: 38px; }
/* A recruit's empty plate reads as a missing picture at this size: in a row, no insignia is the recruit. */
.fl-ins .ins-plate { display: none; }
.fl-posts { display: flex; align-items: center; gap: 4px; }
.fl-pl { font-size: 11px; font-weight: 700; color: var(--rel-platoon); letter-spacing: 0.06em; }
svg.fl-ic { width: 16px; height: 16px; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)); }
.fl-ic.talk path { fill: rgba(255, 255, 255, 0.2); stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; }
.fl-ic.mic path { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.4; stroke-linecap: round; }
.fl-ic.mic.off path { stroke: rgba(255, 255, 255, 0.22); }
.fl-ic.sl path { fill: var(--rel-leader); }
.fl-ic.st.up path, .fl-ic.st.down path { fill: #fff; }
.fl-ic.st.out path { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 2; stroke-linecap: round; }
.fl-foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 15px; font-weight: 600; }
.fl-me { color: var(--rel-self); font-weight: 700; }
.fl-legend { display: flex; gap: 14px; color: var(--dim); font-size: 13px; align-items: center; }
.fl-legend span { display: flex; align-items: center; gap: 4px; }
/* 3 DEPLOY: the speciality on top, the live big map on the left, the spawns, your squad and DEPLOY on the right. */
/* The deploy window (the operator, 2026-11-07: "map is left side full and then on right side we have < squads Mamba...
   under that specialty and under that the Pick a spawn on the map with the squad list"): the map a square the window's
   full height on the left (`--dmap`, kept clear of the column on a narrow screen), the column on the right. */
/* The map as tall as the screen allows, the column keeping ~470px. */
/* The operator, 2026-11-07: "a bit more padding and right side more padding and overall smaller than left side": the
   column a fixed share of the map, the window wrapping the two with room all round. */
.fl-dwin { --dmap: min(1000px, calc(100vh - 236px), calc(100vw - 600px)); --dcol: clamp(420px, calc(var(--dmap) * 0.68), 620px); width: auto; padding: 30px 34px 28px; }
.fl-dwin .fl-col { padding: 4px 6px 0 0; }
/* The column's head: the way back, the squad's name and under it the side (it wraps rather than cut off). Then the
   speciality, its title centred over the two guns (the operator, 2026-11-07: "specialty title center then under
   Assault sniper with a gun icon for each machine gun versus sniper rifle"). Plain lines part them, no frames. */
.fl-dtop { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.fl-dtop .fl-back { grid-row: 1 / span 2; }
.fl-dtop .fl-sub { font-size: 13px; white-space: normal; }
.fl-spec { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.fl-spec-title { font-family: var(--hudfont); font-size: 15px; font-weight: 700; letter-spacing: 0.32em; padding-left: 0.32em; color: #fff; text-align: center; }
.fl-spec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fl-specbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 10px 12px 8px; }
.fl-specbtn b { font-family: var(--hudfont); font-size: 17px; letter-spacing: 0.14em; }
.fl-specbtn small { font-size: 11px; color: rgba(255, 255, 255, 0.65); }
.fl-gun { display: block; width: 100%; max-width: 150px; height: 44px; margin-bottom: 2px; background: center / contain no-repeat; }
.fl-gun.rifle { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 40'><path fill='%23fff' d='M2 13 L28 15 L28 23 L4 29 Q2 29 2 27 Z M28 14 H66 V22 H28 Z M38 6 H60 V9 H57 V14 H55 V9 H43 V14 H41 V9 H38 Z M66 13 H98 Q100 13 100 15 V19 Q100 21 98 21 H66 Z M93 13 L95 6 H97 L98 13 Z M100 15.5 H122 V18.5 H100 Z M121 14.5 H128 V19.5 H121 Z M42 22 H49 L46 34 Q45.5 35.5 44 35.5 H40 Q38.5 35.5 39 34 Z M52 22 H61 Q62 30 66 37 L58 39 Q53 31 52 22 Z'/></svg>"); }
.fl-gun.sniper { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 40'><path fill='%23fff' d='M2 15 L30 16 L36 23 L28 24 L22 30 L5 31 Q2 31 2 28 Z M10 12 H26 L28 16 H10 Z M30 16 H72 V22 H30 Z M38 8 H66 V12 H38 Z M33 6.5 H39 V13.5 H33 Z M64 5 H75 Q76 5 76 6 V14 Q76 15 75 15 H64 Z M50 4 H54 V8 H50 Z M43 12 H47 V16 H43 Z M58 12 H62 V16 H58 Z M72 17 H122 V20 H72 Z M120 15.5 H129 V21.5 H120 Z M88 20 H90.5 L84.5 36 H82 Z M92 20 H94.5 L99.5 36 H97 Z M40 22 H46 L43 30 H38 Z M50 22 H58 V27 H50 Z'/></svg>"); }
/* The chosen speciality must read at a glance (the operator: "the contrast is not good enough on the thing selected"):
   the other faded well back, the chosen at full on a lighter fill. Opacity and fill only, never a coloured frame. */
.fl-specbtn:not(.on) { opacity: 0.38; }
.fl-specbtn:not(.on):hover { opacity: 0.7; }
.fl-specbtn.on { opacity: 1; background: #3b3b3b; }
.fl-dbody { display: grid; grid-template-columns: var(--dmap) var(--dcol); gap: 40px; height: var(--dmap); min-height: 0; }
.fl-mapwrap { min-height: 0; min-width: 0; }
.fl-map { position: relative; width: var(--dmap); height: var(--dmap); }
.fl-map .bigmap.pinned { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none; cursor: default; z-index: 0; }
.fl-map .bigmap.pinned .bigcap { display: none; }
.fl-pins { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fl-pin { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; padding: 3px 7px; font-family: var(--hudfont); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: #fff; background: rgba(30, 30, 30, 0.9); border: 0; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); cursor: pointer; white-space: nowrap; opacity: 0.75; transition: opacity 0.12s ease, background 0.12s ease; }
.fl-pin:hover:not(:disabled) { opacity: 1; background: rgba(59, 59, 59, 0.95); }
.fl-pin.on { opacity: 1; background: rgba(78, 78, 78, 0.95); }
/* The quants' marks (the operator, 2026-11-07: "red outlines jet outline with number in use 3/4 (a locked icon with
   hover says need to be level 5) and in the middle a kind of red target and written DEPLOY in the middle"): the keep
   a red target with DEPLOY across its middle, the jet a red outline with its count in a chip under it, locked a
   padlock in the chip and the level on hover. The icon's centre is on the spot; state is opacity only. */
.fl-pin.target, .fl-pin.jet { padding: 0; background: none; box-shadow: none; opacity: 0.92; }
.fl-pin.target { display: grid; place-items: center; transform: translate(-50%, -50%); }
.fl-pin.target > .fl-pin-icon, .fl-pin.target > .fl-pin-text { grid-area: 1 / 1; }
.fl-pin.jet { display: flex; flex-direction: column; align-items: center; gap: 3px; transform: translate(-50%, -30px); }
.fl-pin.target:hover:not(:disabled), .fl-pin.jet:hover:not(:disabled) { opacity: 1; background: none; }
.fl-pin.target.on, .fl-pin.jet.on { opacity: 1; background: none; }
.fl-pin-icon { display: block; background: center / contain no-repeat; }
.fl-pin.target .fl-pin-icon { width: 84px; height: 84px; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'><g fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='8' stroke-linecap='round'><circle cx='48' cy='48' r='38'/><circle cx='48' cy='48' r='24'/><path d='M48 3v14M48 79v14M3 48h14M79 48h14'/></g><g fill='none' stroke='%23ff3b30' stroke-width='4' stroke-linecap='round'><circle cx='48' cy='48' r='38'/><circle cx='48' cy='48' r='24'/><path d='M48 3v14M48 79v14M3 48h14M79 48h14'/></g></svg>"); }
.fl-pin.jet .fl-pin-icon { width: 60px; height: 60px; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 68 68'><g transform='rotate(135 32 32)' stroke-linejoin='round'><path d='M32 3 L36 15 L36 25 L61 41 L61 47 L36 41 L35 52 L45 58 L45 62 L32 59 L19 62 L19 58 L29 52 L28 41 L3 47 L3 41 L28 25 L28 15 Z' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='7'/><path d='M32 3 L36 15 L36 25 L61 41 L61 47 L36 41 L35 52 L45 58 L45 62 L32 59 L19 62 L19 58 L29 52 L28 41 L3 47 L3 41 L28 25 L28 15 Z' fill='%23000' fill-opacity='.35' stroke='%23ff3b30' stroke-width='3.5'/></g></svg>"); }
.fl-pin-text { display: flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 4px; background: rgba(30, 30, 30, 0.9); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.fl-pin.target .fl-pin-text { font-size: 13px; letter-spacing: 0.14em; padding: 2px 7px 2px 9px; }
.fl-pin.target.ship .fl-pin-icon { width: 64px; height: 64px; }
.fl-pin.target.ship .fl-pin-text { font-size: 11px; padding: 1px 5px 1px 7px; }
/* The squad leader's spawn: their own map mark (minimap.js `MARKS.leader`, the cyan arrow in a gold ring), larger,
   where they stand, turned the way they face; their name in the chip under it (the operator, 2026-11-07). */
.fl-pin.leader { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; background: none; box-shadow: none; opacity: 0.95; color: var(--rel-leader); transform: translate(-50%, -20px); }
.fl-pin.leader:hover:not(:disabled), .fl-pin.leader.on { opacity: 1; background: none; }
.fl-pin.leader .fl-pin-icon { width: 40px; height: 40px; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle cx='20' cy='20' r='16' fill='none' stroke='%23000' stroke-opacity='.6' stroke-width='4.4'/><circle cx='20' cy='20' r='16' fill='none' stroke='%23f5c542' stroke-width='2.4'/><path d='M20 9 L28.6 28.6 L20 24 L11.4 28.6 Z' fill='%2372e6ff' stroke='%23000' stroke-opacity='.8' stroke-width='2.6' stroke-linejoin='round'/></svg>"); }
.fl-pin.leader .fl-pin-text { font-size: 12px; }
.fl-pin.jet .fl-pin-text { font-size: 15px; }
.fl-pin-lock { display: block; width: 11px; height: 13px; background: center / contain no-repeat url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'><path d='M3.2 6.5V4.6a2.8 2.8 0 0 1 5.6 0v1.9' fill='none' stroke='%23fff' stroke-width='1.7'/><rect x='1' y='6.2' width='10' height='7.6' rx='1.6' fill='%23fff'/></svg>"); }
/* Locked, the jet's icon and chip dim but its hover line stays at full: the button itself is not faded. */
.fl-pin.jet.locked:disabled { opacity: 1; }
.fl-pin.jet.locked .fl-pin-icon, .fl-pin.jet.locked .fl-pin-text { opacity: 0.55; }
.fl-pin-tip { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); padding: 4px 9px; border-radius: 4px; background: rgba(30, 30, 30, 0.95); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); font-size: 12px; letter-spacing: 0.08em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.fl-pin:hover .fl-pin-tip { opacity: 1; }
.fl-pin.lead { color: var(--rel-leader); transform: translate(12px, -50%); }
.fl-pin:disabled { opacity: 0.3; cursor: default; }
/* Lane JETG: a jet the rank gate keeps from you is dimmed, not framed (state is opacity), its line still readable; the
   fallback's line sits small under the count. */
.fl-pin.locked:disabled { opacity: 0.5; }
.fl-pin-note { display: block; font-size: 10px; font-weight: 400; letter-spacing: 0.06em; opacity: 0.8; }
.fl-col { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.fl-col h3 { margin: 4px 0 0; font-size: 14px; letter-spacing: 0.2em; color: var(--dim); font-weight: 700; }
.fl-dhead { font-size: 18px; font-weight: 700; letter-spacing: 0.14em; color: var(--mouse); }
.fl-status { font-size: 17px; font-weight: 700; letter-spacing: 0.12em; color: #fff; line-height: 1.3; }
.fl-status.wait { color: #ffcf6b; }
.fl-mini { overflow-y: auto; min-height: 0; }
.fl-mini .fl-row { font-size: 15px; height: 29px; }
.fl-line { font-size: 13px; color: #ffcf6b; }
/* The Referral tab (the operator: "add a referral page ... where we will show the referral earn from each reffered user"):
   the account section's look, the link on one line that wraps anywhere, the players' table under it. */
.pf-ref h3 { margin-top: 18px; }
.pf-ref .pf-reflink { flex-wrap: wrap; }
.pf-ref .pf-reflink code { word-break: break-all; }
.pf-ref .pf-table { margin-top: 4px; }
/* Lane REF: the two numbers under the link (players brought in, referral NX), two across, the account's dark panels. */
.pf-ref .pf-big.pf-refnums { grid-template-columns: repeat(2, minmax(0, 220px)); margin-top: 16px; }
.pf-ref .pf-refnums .pf-num { font-size: 36px; }
/* Headshots on the Profile (lane HEAD): two more numbers beside K/D, five across (three across on a phone), and each
   weapon's headshots after its kills. */
.pf-big { grid-template-columns: repeat(5, 1fr); }
.pf-bar { grid-template-columns: 76px 1fr 40px 52px; }
.pf-whs { text-align: right; font-size: 13px; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.pf-whs.zero { color: rgba(255, 255, 255, 0.4); font-weight: 500; }
@media (max-width: 560px) {
  .pf-big { grid-template-columns: repeat(3, 1fr); }
  .pf-bar { grid-template-columns: 64px 1fr 30px 44px; }
}
/* ── NX at scale, the win and the level-up boost (lane XP2), in one block so the rules above stay as they are. The
   2x chip and the boost chip share one row at the foot of the screen (nxfeed.js), where the 2x chip stood alone. The
   boost is gold wherever it shows: its popup line, its chip, and its part of your line on the results board. */
.nx-chips { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; pointer-events: none; }
.nx-chips .nx-mult { position: static; transform: none; }
.nx-boost-chip { padding: 3px 10px 2px; font-family: var(--hudfont); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; background: rgba(8, 14, 18, 0.55); border-radius: 2px; text-shadow: 0 1px 2px #000; }
.nx-line.nx-boost { height: 17px; line-height: 17px; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: var(--gold); }
.nx-line.nx-head { height: 17px; line-height: 17px; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: #fff; }
.nx-line.nx-win .nx-v { font-size: 0.78em; color: #fff; letter-spacing: 0.1em; }
.sb-mine .sb-win, .sb-mine .sb-boost { margin-left: 18px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.78em; letter-spacing: 0.1em; }
.sb-mine .sb-win { color: #fff; }
.sb-mine .sb-boost { color: var(--gold); }
.sb-mine .nx-n.sb-neg { color: #ff4a3d; }
/* JET (jethud.js): the jet's HUD. Speed and height either side of the middle, the guns' heat, the bombs and the hull
   in a panel under it, all in the HUD's shade (dark, low, feathered); the aim circle and the nose cross where they
   project. Nothing in it blinks: an overheat is a steady red, held until the guns cool. */
.jh { position: absolute; inset: 0; pointer-events: none; }
.jh.hidden { display: none; }
.jh .hudpart { --fall: 12px; --shade: 0.4; }
.jh-read { top: 50%; bottom: auto; width: auto; transform: translateY(-50%); padding: 3px 10px; display: flex; align-items: baseline; gap: 6px; }
.jh-read b { font-size: 28px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.jh-read small { font-size: 12px; font-weight: 700; color: var(--dim); letter-spacing: 0.14em; }
.jh-spd { right: calc(50% + 170px); }
.jh-alt { left: calc(50% + 170px); }
/* Under the speed, left of the middle: the chase view's jet sits low in the middle and must stay clear. */
.jh-bar { right: calc(50% + 170px); top: calc(50% + 34px); bottom: auto; width: 250px; padding: 6px 10px; display: flex; flex-direction: column; gap: 6px; }
.jh-row { display: flex; align-items: center; gap: 10px; }
.jh-lbl { width: 78px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--dim); }
.jh-track { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.16); border-radius: 3px; overflow: hidden; }
.jh-fill { height: 100%; width: 0; background: #fff; border-radius: 3px; }
.jh-fill.hot { background: #ffcf6b; }
.jh-fill.low { background: #ff6a5a; }
.jh-bar.over .jh-row:first-child .jh-lbl { color: #ff6a5a; }
.jh-bar.over .jh-row:first-child .jh-fill { background: #ff6a5a; }
.jh-pips { flex: 1; display: flex; gap: 7px; }
.jh-pip { position: relative; display: block; width: 16px; height: 16px; background: rgba(255, 255, 255, 0.16); border-radius: 3px; overflow: hidden; }
.jh-pip b { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(255, 255, 255, 0.5); }
.jh-pip.full b { background: #fff; }
.jh-aim { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -19px 0 0 -19px; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50%; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)); }
.jh-nose { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)); }
.jh-nose::before, .jh-nose::after { content: ""; position: absolute; background: #fff; }
.jh-nose::before { left: 10px; top: 0; width: 2px; height: 22px; }
.jh-nose::after { left: 0; top: 10px; width: 22px; height: 2px; }
/* In a jet the foot soldier's centre dot means nothing: the nose cross is where the guns point. */
.in-jet .cross { display: none; }

/* CANNON: the cannon's sight (cannonsight.js) over the crosshair. HUD, not a panel: white-cyan marks and text on the
   world over the HUD's soft shadow, nothing framed, nothing coloured, nothing that blinks. The range ladder's rungs
   sit right of the middle, each at its pitch; the marker is where the shot now would land; the ring round the
   crosshair fills as the cannon reloads (or as the lift rides up). */
.cannonsight { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; font-family: var(--hudfont); color: var(--hi); text-shadow: var(--ui-text); }
.cannonsight .cs-ladder { position: absolute; left: 70px; top: 0; }
.cannonsight .cs-rung { position: absolute; left: 0; top: -1px; display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; opacity: 0.85; }
.cannonsight .cs-rung i { display: block; width: 14px; height: 2px; background: var(--hi); box-shadow: 0 0 2px rgba(0, 0, 0, 0.8); }
.cannonsight .cs-rung span { margin-top: -1px; }
.cannonsight .cs-mark { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.cannonsight .cs-mark i { display: block; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid var(--hi); transform: rotate(45deg); box-shadow: 0 0 2px rgba(0, 0, 0, 0.8); }
.cannonsight .cs-marktext { margin-top: -5px; }
.cannonsight .cs-ring { position: absolute; left: -29px; top: -29px; width: 58px; height: 58px; overflow: visible; }
.cannonsight .cs-ring circle { fill: none; stroke-width: 2.5; }
.cannonsight .cs-back { stroke: rgba(233, 252, 255, 0.22); }
.cannonsight .cs-fill { stroke: var(--hi); transform: rotate(-90deg); transform-origin: 0 0; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8)); }
.cannonsight .cs-label { position: absolute; left: 0; top: 40px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; opacity: 0.8; }
.cannonsight.riding .cs-label { opacity: 1; }
/* ── lane BOOST: the NX multiplier rules ─────────────────────────────────────────────────────────────────────────────
   The popup's second line names the rules ("3x LAUNCH · +1 SQUAD"), the chips' row starts with a chip per base or global
   rule in force ("3x NX · LAUNCH"), the results line says what the rules added, and the Esc window's Admin tab lists
   them. Dark panels, the shared #1e1e1e buttons, state by opacity: no coloured frame or glow anywhere. */
.nx-line.nx-rules { height: 17px; line-height: 17px; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: #6dff8a; }
.nx-rules-chips { display: flex; align-items: center; gap: 8px; }
.nx-rule-chip { padding: 3px 10px 2px; font-family: var(--hudfont); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; background: rgba(8, 14, 18, 0.55); border-radius: 2px; text-shadow: 0 1px 2px #000; }
.nx-rule-chip.is-base { color: #ffd84a; }
/* The squad chip loses its green frame (no colour frames on the HUD): it reads like its neighbours now. */
.nx-chips .nx-mult { border: 0; }
.sb-mine .sb-ruled { margin-left: 18px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.78em; letter-spacing: 0.1em; color: #6dff8a; }
.sb-mine .sb-ruled.sb-neg { color: #ff4a3d; }
.esc-admin { flex: 0 1 auto; min-height: 0; overflow-y: auto; cursor: default; padding: 14px 18px 16px; }
.adm h2 { margin: 0 0 6px; }
.adm h3 { margin: 14px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--dim); }
.adm .adm-sub, .adm .adm-hint { font-size: 12px; font-weight: 500; color: var(--dim); }
.adm .adm-sub { margin: 0 0 8px; max-width: 760px; }
.adm .adm-note { min-height: 18px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--hi); }
.adm .adm-typical { margin: 0 0 10px; font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 12px; color: var(--hi); }
.adm .adm-table { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-variant-numeric: tabular-nums; }
.adm .adm-head, .adm .adm-row { display: grid; grid-template-columns: 58px minmax(90px, 1.1fr) minmax(90px, 1fr) 56px minmax(150px, 1.6fr) 90px 82px 58px; gap: 8px; align-items: center; padding: 4px 6px; }
.adm .adm-head { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.adm .adm-row { background: rgba(255, 255, 255, 0.04); border-radius: 4px; color: var(--hi); }
.adm .adm-row.is-off { opacity: 0.45; }
.adm .adm-row:hover { opacity: 1; }
.adm .adm-label-c { font-family: "Fira Code", ui-monospace, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm .adm-value { font-weight: 700; }
.adm .adm-row .btn { padding: 4px 8px; font-size: 11px; }
.adm .adm-on.is-off { opacity: 0.5; }
.adm .adm-actions { display: flex; gap: 8px; margin: 12px 0 0; }
.adm .adm-changes { margin-top: 6px; }
.adm .adm-awards { margin-top: 18px; max-width: 760px; }
.adm .adm-awards-f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 18px; }
.adm .adm-awards .adm-actions { margin-top: 2px; }
.adm .adm-change { font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 11px; color: var(--dim); line-height: 1.6; }
.adm .adm-form { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 4px 18px; max-width: 760px; }
.adm .adm-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.adm .adm-field.hidden { display: none; }
.adm .adm-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.adm .adm-fixed { font-size: 14px; font-weight: 700; color: var(--hi); }
.adm .adm-field input, .adm .adm-field select, .adm .adm-field textarea { font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 13px; color: #fff; background: #11161c; border: 1px solid #2c3a44; border-radius: 6px; padding: 7px 9px; outline: none; color-scheme: dark; }
.adm .adm-field input[type="checkbox"] { align-self: flex-start; width: 18px; height: 18px; accent-color: #5b6874; }
.adm .adm-field input:focus, .adm .adm-field select:focus, .adm .adm-field textarea:focus { border-color: #5b6874; }
.adm .adm-wallets-f { grid-column: 1 / -1; }
.adm .adm-wallets { min-height: 140px; resize: vertical; white-space: pre; }
.adm .adm-wallets:disabled { opacity: 0.5; }
.adm .adm-bad { display: flex; flex-direction: column; gap: 2px; }
.adm .adm-bad-line { font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 12px; color: #ff8a80; }

/* The countdown band along the deploy window's foot (the operator, 2026-11-07: "the deploy countdown here IS SO NOT CLEAR
   its bad UI put it in tis own band at the bottom with the countdown"): why you are out on the left, the big number in
   the middle, what a click does on the right, a bar filling across its foot as the wait runs out. */
.fl-band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 28px; margin-top: 22px; box-sizing: border-box; height: 100px; padding: 14px 40px 18px; background: rgba(6, 7, 9, 0.78); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); overflow: hidden; font-family: var(--hudfont); }
.fl-band-why { justify-self: start; font-size: 28px; font-weight: 700; letter-spacing: 0.2em; color: #e2493c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fl-band-mid { display: flex; align-items: center; gap: 18px; }
.fl-band-label { font-size: 20px; font-weight: 700; letter-spacing: 0.34em; color: rgba(255, 255, 255, 0.72); }
.fl-band-n { font-size: 72px; line-height: 0.9; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; min-width: 1.1ch; text-align: center; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6); }
.fl-band-n:empty { display: none; }
.fl-band-n.tick { animation: fl-band-tick 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes fl-band-tick { from { transform: scale(1.35); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
.fl-band-hint { justify-self: end; font-size: 16px; font-weight: 700; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.66); text-align: right; }
.fl-band-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, 0.08); }
.fl-band-bar i { display: block; height: 100%; width: 0; background: #fff; transition: width 0.25s linear; }
.fl-band.ready .fl-band-label { font-size: 34px; letter-spacing: 0.4em; color: var(--gold); }
.fl-band.ready .fl-band-hint { color: #fff; }
.fl-band.ready .fl-band-bar i { background: var(--gold); }
.fl-band.play .fl-band-label { font-size: 30px; color: #fff; }
.fl-band.play .fl-band-hint { color: #e2493c; }
.fl-band.full .fl-band-label { font-size: 30px; color: rgba(255, 255, 255, 0.72); }

/* ── Lane SKILL: the Skills tab (skills.js) ─────────────────────────────────────────────────────────────────────────
   Three trees side by side, each headed by its icon, name and points, then a column of rows of one shape: an icon tile,
   then the name and its step over five pips and the number it changes. A hover lifts the row and shows its card (what
   it does, a point's worth, what opens it) over the rows under it; the last two of a tree show theirs above, so no card
   runs past the window. The menus' one look (the panel is a .pf-panel); state by opacity alone: a filled pip is white,
   an empty one faint, a perk not yet open dimmed (its icon and words, never its card), never a coloured frame, outline
   or glow. Headings in the HUD's face, numbers in Fira Code. */
.esc-skills { flex: 0 1 auto; min-height: 0; overflow-y: auto; cursor: default; padding: 14px 18px 16px; }
.sk { font-family: var(--hudfont); color: var(--hi); text-shadow: var(--ui-text); }
.sk h2 { margin: 0 0 10px; font-family: var(--hudfont); }
.sk-head { display: flex; align-items: center; gap: 14px; }
.sk-ins { flex: none; display: grid; place-items: center; min-width: 44px; }
.sk-ins .pf-insignia { height: 34px; max-width: 52px; }
.sk-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sk-rank { font-size: 18px; font-weight: 700; letter-spacing: 0.06em; color: #fff; }
.sk-earned { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--dim); }
.sk-left { margin-left: auto; display: flex; align-items: baseline; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.sk-left-n { font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 28px; font-weight: 600; letter-spacing: 0; color: #fff; font-variant-numeric: tabular-nums; }
.sk-reset { flex: none; }
.sk-note { min-height: 16px; margin: 8px 0 8px; font-size: 13px; font-weight: 600; color: var(--hi); }
.sk-trees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.sk-tree { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; background: rgba(255, 255, 255, 0.04); border-radius: var(--ui-radius); }
.sk-tree-head { display: flex; align-items: center; gap: 10px; padding: 0 4px 8px; }
.sk-tree-head .sk-ico { width: 32px; height: 32px; background: none; }
.sk-tree-head .sk-ico svg { width: 24px; height: 24px; opacity: 1; }
.sk-tree-name { margin: 0; font-family: var(--hudfont); font-size: 16px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; }
.sk-tree-pts { margin-left: auto; font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 11px; color: var(--dim); white-space: nowrap; }
.sk-perk, .sk-top { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 0 10px; padding: 6px 8px; background: rgba(0, 0, 0, 0.22); border-radius: 3px; transition: background 0.12s ease; }
.sk-perk:hover, .sk-top:hover { z-index: 30; background: rgba(255, 255, 255, 0.07); }
.sk-top { margin-top: 6px; background: rgba(0, 0, 0, 0.34); }
.sk-perk.is-locked > .sk-ico, .sk-perk.is-locked > .sk-main, .sk-top.is-locked > .sk-ico, .sk-top.is-locked > .sk-main { opacity: 0.38; }
.sk-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); }
.sk-ico svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.88; overflow: visible; }
.sk-perk.is-max .sk-ico svg, .sk-top.is-on .sk-ico svg { opacity: 1; }
.sk-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sk-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.sk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; color: #fff; }
.sk-top .sk-name { letter-spacing: 0.12em; text-transform: uppercase; }
.sk-step { flex: none; font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 10px; color: var(--dim); white-space: nowrap; }
.sk-value { flex: none; font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 11px; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-need { flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--dim); white-space: nowrap; }
.sk-pips { display: flex; align-items: center; gap: 4px; }
.sk .btn.sk-pip { flex: none; width: 18px; height: 8px; padding: 0; border: 0; border-radius: 2px; background: #fff; opacity: 0.16; }
.sk .btn.sk-pip.on { opacity: 1; }
.sk .btn.sk-pip:hover:not(:disabled) { opacity: 0.6; }
.sk .btn.sk-pip.on:hover:not(:disabled) { opacity: 0.85; }
.sk .btn.sk-pip:disabled { cursor: default; }
.sk .btn.sk-pip-top { width: 40px; }
/* The hover card: under its row, over the rows below; above it for the last two of a tree. */
.sk-tip { position: absolute; left: 0; right: 0; top: calc(100% + 4px); padding: 10px 12px 11px; background: rgba(10, 12, 14, 0.96); border-radius: 4px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.1s ease, visibility 0.1s; text-shadow: none; }
.sk-tree > :nth-last-child(-n + 2) > .sk-tip { top: auto; bottom: calc(100% + 4px); }
.sk-perk:hover > .sk-tip, .sk-top:hover > .sk-tip { opacity: 1; visibility: visible; }
.sk-tip-name { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.sk-tip-what { margin: 5px 0 0; font-size: 13px; font-weight: 500; line-height: 1.35; color: #fff; }
.sk-tip-step { margin: 7px 0 0; font-family: "Fira Code", ui-monospace, Menlo, monospace; font-size: 11px; color: var(--dim); }
.sk-lock { margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; color: var(--hi); }
.sk-sub { margin: 12px 0 0; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--dim); }
.sk-gun { margin: 2px 0 0; font-size: 12px; font-weight: 500; color: var(--dim); }
.sk-badges { margin-top: 12px; }

/* The Esc tabs' clean-up (the operator, 2026-11-07: "revisit the UI of the Profile, stats, history, leaderboard,
   refferal", "just clean it up"). One head card on Profile and Stats: the rank's insignia beside the name, the rank's
   name under it (and the career NX and the bar to the next rank on Stats). White titles, one colour for numbers, gold
   only for rank and NX. Tables in alternating rows instead of rules, your own leaderboard row lit, the rank as its
   insignia, never a framed chip, names without an underline. */
.pf-head { display: flex; align-items: center; gap: 18px; }
.pf-head > .pf-ins { flex: none; display: grid; place-items: center; width: 64px; }
.pf-head > .pf-ins .pf-insignia { height: 56px; max-width: 64px; }
.pf-who { flex: 1; min-width: 0; }
.pf-rankline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.pf-card .pf-rank-name { font-size: 15px; letter-spacing: 0.16em; color: var(--hi); }
.pf-card .pf-rank-nx { font-size: 15px; }
.pf-card .pf-meta { margin: 4px 0 0; }
.pf-head > .pf-chips { align-self: flex-start; flex: none; }
.pf-card .pf-rank-track { margin-top: 16px; }
.pf-stat.kd .pf-num { color: #fff; }
.pf-fill { background: rgba(255, 255, 255, 0.8); }
.pf-table td { border-bottom: 0; }
.pf-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.035); }
.pf-board tbody tr.me { background: rgba(255, 255, 255, 0.14); }
.pf-board tbody tr.me td.name, .pf-board tbody tr.me td.rank { color: #fff; }
.pf-table td.kd { color: inherit; }
.pf-board .pf-ins { display: inline-grid; place-items: center; width: 30px; height: 20px; margin-right: 8px; vertical-align: middle; }
.pf-board .pf-ins .pf-insignia { height: 18px; max-width: 28px; }
.pf-board .pf-ins .ins-plate { display: none; }
.pf-link { border-bottom: 0; }
.pf-link:hover { color: #fff; }
.pf-table td.pf-side { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; }