/* ==========================================================================
   CRAFT OF DUTY — src/ui/styles.css
   The whole front-end skin: boot, fatal, HUD (`cod-*`), menus, scoreboard,
   minimap. Contract §29, art direction §32.

   VISUAL LANGUAGE
     near-black grounds with a faint noise + scanline weave, ONE accent
     (tactical amber #c8a24a) plus team red/blue, condensed uppercase headers
     with TIGHT tracking at display sizes (wide tracking is reserved for
     9–11px caps labels), 1px rules, sharp corners (0–2px), 120–180ms eases.

     DEPTH (revised r5 — do not revert): interactive menu chrome is *grounded*.
     `.cod-choice`, `.cod-btn` and `.cod-key` carry a large-radius low-opacity
     ambient drop plus a tight contact line and a 1px inner top highlight, so
     each surface reads as lifted off the frame instead of coplanar with it.
     The old house rule ("depth comes from opacity layering and hairlines —
     never from shadows") produced menus that measured flat: the ground sat at
     its final value one pixel below every border, with no penumbra anywhere.
     CONTRACTS §32 asks for photographic lighting and AO in every crevice and
     says nothing forbidding UI shadow. Static chrome (rules, HUD strips,
     scanlines) still uses hairlines + opacity only — shadows are for things
     that sit above the plane.

   No web fonts. No images. Everything below is system type + CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* --- ground / ink ----------------------------------------------------- */
  --cod-void:        #050607;
  --cod-bg:          #0a0b0d;
  --cod-bg-1:        #101216;
  --cod-bg-2:        #171a1f;
  --cod-bg-3:        #1f232a;
  --cod-panel:       rgba(11, 13, 16, 0.90);
  --cod-panel-soft:  rgba(20, 23, 28, 0.72);
  --cod-glass:       rgba(255, 255, 255, 0.035);
  --cod-glass-2:     rgba(255, 255, 255, 0.065);

  --cod-ink:         #eceded;
  --cod-ink-2:       #b6bbc1;
  --cod-ink-dim:     #838a92;
  --cod-ink-faint:   #545a62;
  --cod-ink-ghost:   #33383e;

  --cod-line:        rgba(255, 255, 255, 0.085);
  --cod-line-2:      rgba(255, 255, 255, 0.16);
  --cod-line-3:      rgba(255, 255, 255, 0.30);

  /* --- accent + teams --------------------------------------------------- */
  --cod-accent:      #c8a24a;
  --cod-accent-hot:  #e6c473;
  --cod-accent-dim:  #7d6730;
  --cod-accent-ink:  #10120f;
  --cod-accent-glow: rgba(200, 162, 74, 0.20);

  --cod-red:         #d24b3e;
  --cod-red-dim:     #7e2a22;
  --cod-blue:        #3d86d8;
  --cod-blue-dim:    #234f80;
  --cod-green:       #79b856;
  --cod-amber:       #d99a2b;

  /* --- motion ----------------------------------------------------------- */
  --cod-ease:        cubic-bezier(0.16, 0.84, 0.24, 1);
  --cod-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --cod-t-fast:      120ms;
  --cod-t:           150ms;
  --cod-t-slow:      180ms;

  /* --- type ------------------------------------------------------------- */
  --cod-font:  ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Helvetica Neue', Roboto, Arial, sans-serif;
  /* Real condensed display faces first, so a military narrow lands on every
     OS. 'Helvetica Neue Condensed' / 'Segoe UI Semibold' resolved to nothing
     on macOS and let the stack fall through to a full-width grotesque. */
  --cod-cond:  'DIN Condensed', 'Oswald', 'Roboto Condensed', 'Arial Narrow',
               'Liberation Sans Narrow', 'Franklin Gothic Medium Cond', Impact,
               ui-sans-serif, sans-serif;
  --cod-mono:  ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
               'Roboto Mono', monospace;

  /* --- metrics ---------------------------------------------------------- */
  --cod-gut:   clamp(18px, 3.4vw, 58px);
  --cod-hair:  1px;

  /* --- procedural textures (inline SVG, no network) --------------------- */
  --cod-noise: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   1b. INTEROP ALIASES
   Token names the HUD module reads that this sheet does not otherwise define,
   mapped onto the palette above so the two halves of the UI agree. `:where()`
   pins them to zero specificity, so the HUD's own `:root` block always wins —
   these only fill in if that module never loads.
   -------------------------------------------------------------------------- */

:where(:root) {
  --cod-gold:    #c8a24a;
  --cod-fg:      #eceded;
  --cod-dim:     #838a92;
  --cod-faint:   #545a62;
  --cod-teal:    #5f9ec9;
  --cod-team-a:  #d24b3e;
  --cod-team-b:  #3d86d8;
  --cod-scrim:   rgba(6, 7, 9, 0.62);
  --cod-shadow:  0 2px 10px rgba(0, 0, 0, 0.85);
  --cod-fast:    120ms;
}

/* --------------------------------------------------------------------------
   2. RESET / PAGE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--cod-void);
  color: var(--cod-ink);
  font-family: var(--cod-font);
  font-size: 15px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  touch-action: none;
}

body { cursor: default; }

canvas#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  background: #050607;
  z-index: 0;
}

#ui-root {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

/* Everything inside the UI inherits the design system by default. `:where()`
   keeps this at zero specificity so it is a true default that any component
   rule — ours or the HUD module's — overrides without a fight. */
:where(#ui-root, [class^='cod-'], [class*=' cod-']) {
  font-family: var(--cod-font);
  color: var(--cod-ink);
}

/* Interactive descendants opt back into hit testing. */
#ui-root button,
#ui-root input,
#ui-root select,
#ui-root textarea,
#ui-root a,
#ui-root [data-nav],
#ui-root .cod-pointer { pointer-events: auto; }

::selection { background: var(--cod-accent); color: var(--cod-accent-ink); }

/* --------------------------------------------------------------------------
   3. SHARED SURFACE TREATMENTS
   -------------------------------------------------------------------------- */

/* Fine scanline weave — the single most "CoD menu" texture there is. */
.cod-scan::after,
.cod-scanlines {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.030) 0px,
    rgba(255, 255, 255, 0.030) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.55;
  mix-blend-mode: overlay;
}

/* Static film grain on top of dark panels. */
.cod-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--cod-noise);
  background-size: 140px 140px;
  opacity: 0.055;
  mix-blend-mode: overlay;
}

.cod-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--cod-line);
}
.cod-rule.is-accent { background: linear-gradient(90deg, var(--cod-accent), rgba(200,162,74,0) 78%); }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY ATOMS
   -------------------------------------------------------------------------- */

/* §32 asks for THIN condensed caps: 600 is the house display weight and 700 is
   reserved for `.cod-btn.is-primary`, the one filled control in the sheet. */
.cod-h1, .cod-h2, .cod-h3, .cod-eyebrow, .cod-tab, .cod-btn, .cod-key {
  font-family: var(--cod-cond); font-stretch: 75%;
  text-transform: uppercase;
  font-weight: 600;
}

.cod-h1 { font-size: clamp(30px, 4.4vw, 62px); letter-spacing: 0.02em; line-height: 0.98; margin: 0; }
.cod-h2 { font-size: clamp(19px, 2.0vw, 28px); letter-spacing: 0.06em; line-height: 1.05; margin: 0; }
.cod-h3 { font-size: 14px; letter-spacing: 0.22em; margin: 0; color: var(--cod-ink-2); }

.cod-eyebrow {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--cod-accent);
  font-weight: 600;
}

.cod-sub {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--cod-ink-dim);
  line-height: 1.5;
  font-family: var(--cod-font);
  text-transform: none;
}

.cod-num {
  font-family: var(--cod-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0.02em;
}

.cod-accent-text { color: var(--cod-accent); }
.cod-red-text    { color: var(--cod-red); }
.cod-blue-text   { color: var(--cod-blue); }

/* --------------------------------------------------------------------------
   5. BOOT SCREEN
   -------------------------------------------------------------------------- */

#boot {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 42%, #14171c 0%, #0a0b0d 46%, #050607 100%);
  color: var(--cod-ink);
  transition: opacity 320ms var(--cod-ease), visibility 0s linear 320ms;
}
#boot[hidden] { display: flex; opacity: 0; visibility: hidden; pointer-events: none; }

#boot::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--cod-noise);
  background-size: 140px 140px;
  opacity: 0.06;
  mix-blend-mode: overlay;
}
#boot::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom, rgba(255,255,255,0.026) 0 1px, transparent 1px 3px);
  opacity: 0.7;
  mix-blend-mode: overlay;
}

.boot-inner {
  position: relative;
  z-index: 2;
  width: min(560px, 78vw);
  text-align: center;
  animation: cod-boot-in 520ms var(--cod-ease-out) both;
}

.boot-title {
  font-family: var(--cod-cond); font-stretch: 75%;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(38px, 7vw, 84px);
  line-height: 0.94;
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}
.boot-title span { display: inline-block; }
.boot-title em {
  font-family: var(--cod-font);
  font-style: italic;
  font-weight: 400;
  font-size: 0.30em;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--cod-accent);
  vertical-align: 0.52em;
  margin: 0 0.24em;
}

.boot-sub {
  margin-top: 14px;
  font-family: var(--cod-cond); font-stretch: 75%;
  font-size: 12px;
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  text-transform: uppercase;
  color: var(--cod-ink-dim);
}

.boot-bar {
  position: relative;
  margin: 34px auto 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.boot-bar::before,
.boot-bar::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 1px;
  height: 8px;
  background: var(--cod-line-2);
}
.boot-bar::before { left: 0; }
.boot-bar::after  { right: 0; }

#boot-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cod-accent-dim), var(--cod-accent) 70%, var(--cod-accent-hot));
  box-shadow: 0 0 10px var(--cod-accent-glow);
  transition: width 240ms var(--cod-ease);
}

.boot-status {
  margin-top: 12px;
  font-family: var(--cod-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cod-ink-faint);
  min-height: 14px;
}
.boot-status::before { content: '// '; color: var(--cod-accent-dim); }

@keyframes cod-boot-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   6. FATAL OVERLAY
   -------------------------------------------------------------------------- */

#fatal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #08090b;
  padding: var(--cod-gut);
}
#fatal[hidden] { display: none !important; }

.fatal-inner {
  width: min(880px, 92vw);
  border: 1px solid var(--cod-red-dim);
  border-top: 2px solid var(--cod-red);
  background: rgba(16, 10, 10, 0.86);
  padding: 26px 28px 24px;
}
.fatal-inner h1 {
  margin: 0 0 4px;
  font-family: var(--cod-cond); font-stretch: 75%;
  font-size: 26px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cod-red);
}
#fatal-msg {
  margin: 16px 0 0;
  padding: 14px 16px;
  max-height: 46vh;
  overflow: auto;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--cod-line);
  font-family: var(--cod-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--cod-ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.fatal-hint {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--cod-ink-dim);
}

/* --------------------------------------------------------------------------
   7. HUD  (owned by the other UI agent — styled here as a FALLBACK layer)

   The HUD module injects its own <style> at the TOP of <head>, which means a
   plain `.cod-health-bar` rule in this file would outrank it. Every selector in
   this section is therefore wrapped in `:where()` — zero specificity — so the
   component's own rules always win, while these still paint a complete,
   on-brand HUD if that module fails to load or drops a rule. Source order
   breaks ties between the zero-specificity defaults below and the base
   inheritance rule above, and this section comes later, so it wins those.
   -------------------------------------------------------------------------- */


:where(.cod-hud) {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--cod-cond); font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: opacity var(--cod-t) var(--cod-ease);
}
:where(.cod-hud.is-hidden) { opacity: 0; }

/* Corner blocks -------------------------------------------------------- */
:where(.cod-hud-tl) { position: absolute; top: 18px;   left: 20px; }
:where(.cod-hud-tr) { position: absolute; top: 18px;   right: 20px; text-align: right; }
:where(.cod-hud-bl) { position: absolute; bottom: 18px; left: 20px; }
:where(.cod-hud-br) { position: absolute; bottom: 18px; right: 20px; text-align: right; }
:where(.cod-hud-tc) { position: absolute; top: 14px;   left: 50%; transform: translateX(-50%); }
:where(.cod-hud-bc) { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); }

/* Health --------------------------------------------------------------- */
:where(.cod-health) {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
:where(.cod-health-bar) {
  position: relative;
  width: 208px;
  height: 6px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--cod-line-2);
  overflow: hidden;
}
:where(.cod-health-fill) {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #cfd3d6, #f2f4f5);
  transition: width var(--cod-t) var(--cod-ease), background var(--cod-t-slow) linear;
}
:where(.cod-health-fill.is-hurt) { background: linear-gradient(90deg, var(--cod-amber), #f0c47a); }
:where(.cod-health-fill.is-crit) { background: linear-gradient(90deg, var(--cod-red), #ef7c6f); }
:where(.cod-health-ghost) {
  position: absolute;
  inset: 0;
  background: rgba(210, 75, 62, 0.45);
  transition: width 420ms var(--cod-ease) 140ms;
}
:where(.cod-health-num) { font-size: 26px; line-height: 0.8; font-family: var(--cod-mono); }
:where(.cod-armor-bar) { width: 208px; height: 3px; margin-top: 3px; background: rgba(0,0,0,.55); border: 1px solid var(--cod-line); }
:where(.cod-armor-fill) { display: block; height: 100%; background: var(--cod-blue); }

/* Ammo ----------------------------------------------------------------- */
:where(.cod-ammo) { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
:where(.cod-ammo-mag) {
  font-family: var(--cod-mono);
  font-size: 42px;
  line-height: 0.86;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
:where(.cod-ammo-mag.is-low) { color: var(--cod-red); }
:where(.cod-ammo-sep) { color: var(--cod-ink-faint); font-size: 20px; }
:where(.cod-ammo-reserve) { font-family: var(--cod-mono); font-size: 20px; color: var(--cod-ink-2); }
:where(.cod-ammo-type) { font-size: 10px; letter-spacing: 0.30em; color: var(--cod-ink-faint); }
:where(.cod-weapon-name) { font-size: 15px; letter-spacing: 0.20em; color: var(--cod-ink-2); }
:where(.cod-fire-mode) { font-size: 10px; letter-spacing: 0.28em; color: var(--cod-accent); }

:where(.cod-reload-bar) {
  width: 132px; height: 2px; margin-top: 6px; margin-left: auto;
  background: rgba(255, 255, 255, 0.14);
}
:where(.cod-reload-fill) { display: block; height: 100%; width: 0; background: var(--cod-accent); }

/* Crosshair ------------------------------------------------------------- */
:where(.cod-crosshair) {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0; height: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
:where(.cod-crosshair i) {
  position: absolute;
  display: block;
  background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.95), 0 0 1px rgba(0, 0, 0, 1);
  transition: transform var(--cod-t-fast) linear, opacity var(--cod-t-fast) linear;
}
:where(.cod-crosshair .cod-ch-dot) { width: 2px; height: 2px; left: -1px; top: -1px; }
:where(.cod-crosshair .cod-ch-v) { width: 2px; height: 9px; left: -1px; }
:where(.cod-crosshair .cod-ch-h) { height: 2px; width: 9px; top: -1px; }
:where(.cod-crosshair.is-friendly i) { background: var(--cod-green); }
:where(.cod-crosshair.is-hidden) { opacity: 0; }

:where(.cod-hitmarker) {
  position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  opacity: 0;
  pointer-events: none;
}
:where(.cod-hitmarker i) {
  position: absolute; width: 9px; height: 2px; background: #fff;
  box-shadow: 0 0 3px rgba(0,0,0,.9);
}
:where(.cod-hitmarker.is-kill i) { background: var(--cod-red); }
:where(.cod-hitmarker.is-head i) { background: var(--cod-accent-hot); }
:where(.cod-hitmarker.is-on) { animation: cod-hit 220ms var(--cod-ease) 1; }
@keyframes cod-hit {
  0%   { opacity: 0; transform: scale(1.55); }
  18%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.95); }
}

/* Compass strip --------------------------------------------------------- */
:where(.cod-compass) {
  position: relative;
  width: min(420px, 42vw);
  height: 22px;
  overflow: hidden;
  border-top: 1px solid var(--cod-line);
  border-bottom: 1px solid var(--cod-line);
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 18%, rgba(0,0,0,0.45) 82%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
:where(.cod-compass-tape) { position: absolute; top: 0; left: 0; height: 100%; will-change: transform; }
:where(.cod-compass-tick) {
  position: absolute; top: 12px; width: 1px; height: 5px;
  background: var(--cod-line-2);
}
:where(.cod-compass-card) {
  position: absolute; top: 1px;
  transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.14em; color: var(--cod-ink-2);
}
:where(.cod-compass-card.is-n) { color: var(--cod-accent); }
:where(.cod-compass-needle) {
  position: absolute; left: 50%; top: 0; width: 1px; height: 100%;
  background: var(--cod-accent); transform: translateX(-50%);
}

/* Killfeed -------------------------------------------------------------- */
:where(.cod-killfeed) {
  position: absolute;
  top: 62px;
  right: 20px;
  width: min(430px, 42vw);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  pointer-events: none;
}
:where(.cod-kf-row) {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px;
  max-width: 100%;
  background: rgba(6, 7, 9, 0.62);
  border-left: 2px solid var(--cod-line-2);
  font-size: 12.5px;
  letter-spacing: 0.10em;
  white-space: nowrap;
  animation: cod-kf-in 180ms var(--cod-ease) both;
  transition: opacity 320ms linear;
}
:where(.cod-kf-row.is-local) { border-left-color: var(--cod-accent); background: rgba(28, 22, 8, 0.72); }
:where(.cod-kf-row.is-fading) { opacity: 0; }
:where(.cod-kf-name) { color: var(--cod-ink); }
:where(.cod-kf-name.is-team-a) { color: var(--cod-red); }
:where(.cod-kf-name.is-team-b) { color: var(--cod-blue); }
:where(.cod-kf-name.is-you) { color: var(--cod-accent-hot); }
:where(.cod-kf-weapon) { color: var(--cod-ink-dim); font-size: 11px; letter-spacing: 0.16em; }
:where(.cod-kf-icon) { color: var(--cod-ink-2); }
:where(.cod-kf-head::after) { content: '◆'; color: var(--cod-accent); font-size: 9px; margin-left: 2px; }
@keyframes cod-kf-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

/* Damage direction indicators ------------------------------------------ */
:where(.cod-damage-layer) { position: absolute; inset: 0; pointer-events: none; }
:where(.cod-damage-ind) {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 190px;
  margin: -95px 0 0 -95px;
  transform-origin: 50% 50%;
  opacity: 0;
}
:where(.cod-damage-ind i) {
  position: absolute;
  left: 50%;
  top: 0;
  width: 74px;
  height: 12px;
  margin-left: -37px;
  background: linear-gradient(180deg, rgba(210,75,62,0.92), rgba(210,75,62,0));
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
:where(.cod-damage-ind.is-on) { opacity: 1; transition: opacity 520ms linear; }

:where(.cod-hurt-vignette) {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% 50%,
    rgba(150, 24, 18, 0) 42%, rgba(150, 24, 18, 0.55) 100%);
  transition: opacity 240ms var(--cod-ease);
}
:where(.cod-hurt-vignette.is-on) { opacity: 1; }

/* Notifications / streaks / objectives ---------------------------------- */
:where(.cod-notify-stack) {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
:where(.cod-notify) {
  padding: 5px 16px;
  background: rgba(6, 7, 9, 0.72);
  border-top: 1px solid var(--cod-line-2);
  border-bottom: 1px solid var(--cod-line-2);
  font-size: 13px;
  letter-spacing: 0.26em;
  color: var(--cod-ink);
  animation: cod-notify-in 200ms var(--cod-ease) both;
}
:where(.cod-notify.is-kill) { border-color: var(--cod-red); color: #fff; }
:where(.cod-notify.is-objective) { border-color: var(--cod-accent); color: var(--cod-accent-hot); }
:where(.cod-notify.is-warn) { border-color: var(--cod-amber); color: var(--cod-amber); }
:where(.cod-notify.is-out) { opacity: 0; transition: opacity 260ms linear; }
@keyframes cod-notify-in {
  from { opacity: 0; transform: translateY(-8px) scaleX(0.96); }
  to   { opacity: 1; transform: none; }
}

:where(.cod-streak) {
  font-family: var(--cod-cond); font-stretch: 75%;
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: 0.20em;
  color: var(--cod-accent-hot);
  text-shadow: 0 0 22px rgba(200, 162, 74, 0.35);
  animation: cod-streak 900ms var(--cod-ease) both;
}
@keyframes cod-streak {
  0%   { opacity: 0; letter-spacing: 0.6em; }
  22%  { opacity: 1; letter-spacing: 0.20em; }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Hotbar (BUILD mode) --------------------------------------------------- */
:where(.cod-hotbar) {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: rgba(6, 7, 9, 0.55);
  border: 1px solid var(--cod-line);
}
:where(.cod-hotbar-slot) {
  position: relative;
  width: 46px; height: 46px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--cod-t-fast) var(--cod-ease),
              background var(--cod-t-fast) var(--cod-ease),
              transform var(--cod-t-fast) var(--cod-ease);
}
:where(.cod-hotbar-slot.is-active) {
  border-color: var(--cod-accent);
  background: rgba(200, 162, 74, 0.12);
  transform: translateY(-3px);
}
:where(.cod-hotbar-slot i) {
  position: absolute; top: 2px; left: 3px;
  font-style: normal; font-size: 9px; color: var(--cod-ink-faint);
  font-family: var(--cod-mono);
}
:where(.cod-hotbar-swatch) { width: 26px; height: 26px; image-rendering: pixelated; }
:where(.cod-hotbar-name) {
  margin-top: 5px; text-align: center;
  font-size: 10px; letter-spacing: 0.24em; color: var(--cod-ink-dim);
}

/* Interaction prompt ---------------------------------------------------- */
:where(.cod-prompt) {
  position: absolute; left: 50%; top: 56%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.20em; color: var(--cod-ink-2);
  opacity: 0; transition: opacity var(--cod-t) var(--cod-ease);
}
:where(.cod-prompt.is-on) { opacity: 1; }
:where(.cod-key) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 5px;
  border: 1px solid var(--cod-line-2);
  background: rgba(255, 255, 255, 0.06);
  font-size: 10px; letter-spacing: 0.10em; color: var(--cod-ink);
  /* Reads as a depressed key cap, not an outlined rectangle. */
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.10),
              0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Block break progress -------------------------------------------------- */
:where(.cod-break) {
  position: absolute; left: 50%; top: calc(50% + 34px);
  transform: translateX(-50%);
  width: 88px; height: 2px; background: rgba(255,255,255,.16); opacity: 0;
}
:where(.cod-break.is-on) { opacity: 1; }
:where(.cod-break i) { display: block; height: 100%; width: 0; background: var(--cod-accent); }

/* FPS / profiler overlay ------------------------------------------------ */
:where(.cod-fps),
:where(.cod-profiler) {
  font-family: var(--cod-mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--cod-ink-2);
  letter-spacing: 0.04em;
  text-transform: none;
  background: rgba(6, 7, 9, 0.62);
  border: 1px solid var(--cod-line);
  padding: 5px 8px;
  min-width: 148px;
}
:where(.cod-fps b) { color: var(--cod-accent); font-weight: 700; }
:where(.pf-row) { display: flex; justify-content: space-between; gap: 10px; }
:where(.pf-row span) { color: var(--cod-ink-faint); }
:where(.pf-row b) { color: var(--cod-ink); font-weight: 400; }
:where(.pf-row i) { color: var(--cod-ink-faint); font-style: normal; }
:where(.pf-head) { border-bottom: 1px solid var(--cod-line); margin-bottom: 3px; padding-bottom: 3px; }
:where(.pf-head b) { color: var(--cod-accent); }

/* Chat ------------------------------------------------------------------ */
:where(.cod-chat) {
  position: absolute; left: 20px; bottom: 96px; width: min(460px, 44vw);
  display: flex; flex-direction: column; gap: 2px;
  text-transform: none; font-family: var(--cod-font);
}
:where(.cod-chat-line) { font-size: 12.5px; color: var(--cod-ink-2); text-shadow: 0 1px 3px #000; }
:where(.cod-chat-line b) { color: var(--cod-accent); font-weight: 600; }
:where(.cod-chat-input) {
  margin-top: 6px; pointer-events: auto;
  background: rgba(6,7,9,.82); border: 1px solid var(--cod-line-2);
  color: var(--cod-ink); font-size: 13px; padding: 6px 9px; outline: none;
}

/* Net state ------------------------------------------------------------- */
:where(.cod-netstate) { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .24em; color: var(--cod-ink-faint); }
:where(.cod-netdot) { width: 6px; height: 6px; background: var(--cod-ink-ghost); }
:where(.cod-netdot.is-online) { background: var(--cod-green); }
:where(.cod-netdot.is-connecting) { background: var(--cod-amber); animation: cod-pulse 900ms linear infinite; }
:where(.cod-netdot.is-offline) { background: var(--cod-red-dim); }
@keyframes cod-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* --- Remaining HUD component names, same fallback contract ------------- */

/* Layout regions */
:where(.cod-hud-top) { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; }
:where(.cod-hud-vitals) { position: absolute; left: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 5px; }
:where(.cod-hud-ammo) { position: absolute; right: 20px; bottom: 20px; text-align: right; }
:where(.cod-hud-hotbar) { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
:where(.cod-hud-banner) { position: absolute; top: 21%; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; }
:where(.cod-hud-streak) { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); text-align: center; }
:where(.cod-hud-toasts) { position: absolute; top: 38%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
:where(.cod-hud-perf) { position: absolute; top: 16px; right: 20px; text-align: right; }
:where(.cod-hud-vignette) {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(118% 92% at 50% 50%, transparent 46%, rgba(0, 0, 0, 0.46) 100%);
}
:where(.cod-hud-regenflash) {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(120, 190, 255, 0.20) 100%);
}

/* Vitals */
:where(.cod-vitals-head) { display: flex; align-items: baseline; gap: 9px; }
:where(.cod-health-label) { font-size: 10px; letter-spacing: 0.30em; color: var(--cod-ink-faint); }
:where(.cod-armour) { display: flex; gap: 2px; }
:where(.cod-armour-plate) { width: 22px; height: 4px; background: var(--cod-blue); opacity: 0.85; }
:where(.cod-armour-plate.is-empty) { background: rgba(255, 255, 255, 0.12); }
:where(.cod-regen) { font-size: 9.5px; letter-spacing: 0.26em; color: var(--cod-blue); }

/* Ammo block */
:where(.cod-ammo-counts) { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
:where(.cod-ammo-meta) { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 2px; }
:where(.cod-ammo-weapon) { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
:where(.cod-weapon-icon) { opacity: 0.75; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9)); }
:where(.cod-firemode) { display: flex; align-items: center; gap: 4px; font-size: 10px; letter-spacing: 0.26em; color: var(--cod-accent); }
:where(.cod-reload) { margin-top: 6px; margin-left: auto; width: 132px; height: 2px; background: rgba(255, 255, 255, 0.14); }
:where(.cod-reload > *) { display: block; height: 100%; background: var(--cod-accent); }
:where(.cod-grenades) { display: flex; justify-content: flex-end; gap: 3px; margin-top: 5px; }
:where(.cod-gren-pip) { width: 7px; height: 12px; background: var(--cod-ink-2); }
:where(.cod-gren-pip.is-spent) { background: rgba(255, 255, 255, 0.13); }

/* Compass strip */
:where(.cod-compass-window) {
  position: relative; width: min(420px, 42vw); height: 22px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
:where(.cod-compass-track) { position: absolute; top: 0; left: 0; height: 100%; will-change: transform; }
:where(.cod-compass-letter) { position: absolute; top: 1px; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.14em; color: var(--cod-ink-2); }
:where(.cod-compass-letter.is-n) { color: var(--cod-accent); }
:where(.cod-compass-marker) { position: absolute; top: 3px; transform: translateX(-50%); width: 6px; height: 6px; background: var(--cod-accent); }
:where(.cod-compass-heading) { font-family: var(--cod-mono); font-size: 10px; color: var(--cod-ink-faint); text-align: center; }

/* Banner / streak / toasts */
:where(.cod-banner-title) { font-size: clamp(18px, 2.1vw, 28px); letter-spacing: 0.26em; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85); }
:where(.cod-banner-sub) { font-size: 10.5px; letter-spacing: 0.34em; color: var(--cod-ink-dim); }
:where(.cod-banner-rule) { width: 74px; height: 1px; margin: 6px auto; background: var(--cod-accent); }
:where(.cod-streak-count) { font-family: var(--cod-mono); font-size: 26px; font-weight: 700; color: var(--cod-accent-hot); line-height: 1; }
:where(.cod-streak-label) { font-size: 10px; letter-spacing: 0.30em; color: var(--cod-ink-dim); }
:where(.cod-toast) {
  padding: 4px 14px; background: rgba(6, 7, 9, 0.72);
  border-left: 2px solid var(--cod-line-2);
  font-size: 11.5px; letter-spacing: 0.22em; color: var(--cod-ink);
}
:where(.cod-toast.is-kill) { border-left-color: var(--cod-red); }
:where(.cod-toast.is-objective) { border-left-color: var(--cod-accent); }
:where(.cod-toast.is-warn) { border-left-color: var(--cod-amber); }

/* Match header */
:where(.cod-match) { display: flex; align-items: center; gap: 14px; }
:where(.cod-match-time) { font-family: var(--cod-mono); font-size: 17px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
:where(.cod-match-score) { font-family: var(--cod-mono); font-size: 17px; font-weight: 700; }
:where(.cod-match-score.is-a) { color: var(--cod-red); }
:where(.cod-match-score.is-b) { color: var(--cod-blue); }

/* Perf readout */
:where(.cod-perf-fps) { font-family: var(--cod-mono); font-size: 10.5px; color: var(--cod-accent); letter-spacing: 0.04em; text-transform: none; }
:where(.cod-perf-net), :where(.cod-perf-world) { font-family: var(--cod-mono); font-size: 10px; color: var(--cod-ink-faint); letter-spacing: 0.04em; text-transform: none; }

/* Hotbar extras */
:where(.cod-hotbar-row) { display: flex; gap: 3px; padding: 3px; background: rgba(6, 7, 9, 0.55); border: 1px solid var(--cod-line); }
:where(.cod-hotbar-key) { position: absolute; top: 2px; left: 3px; font-family: var(--cod-mono); font-size: 9px; color: var(--cod-ink-faint); }

/* Crosshair extras */
:where(.cod-ch-line) { position: absolute; background: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.95); }
:where(.cod-ch-ring) { position: absolute; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%; }
:where(.cod-ch-hit) { position: absolute; background: #fff; opacity: 0; }

/* Damage direction */
:where(.cod-damage) { position: absolute; inset: 0; pointer-events: none; }
:where(.cod-dmg-arc) { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; opacity: 0; }
:where(.cod-dmg-ring) { position: absolute; inset: 0; pointer-events: none; }
:where(.cod-dmg-flash) {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% 50%, rgba(180, 30, 22, 0) 40%, rgba(180, 30, 22, 0.55) 100%);
}
:where(.cod-dmg-blood) { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: multiply; }
:where(.cod-dmg-heart) { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
:where(.cod-arc-tip) { fill: var(--cod-red); }
:where(.cod-arc-over) { fill: rgba(210, 75, 62, 0.85); }
:where(.cod-arc-under) { fill: rgba(0, 0, 0, 0.55); }

/* Killfeed extras */
:where(.cod-kf-mark) { color: var(--cod-accent); font-size: 10px; }

/* --------------------------------------------------------------------------
   8. CONTROLS (used by menus + settings)
   -------------------------------------------------------------------------- */

.cod-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 20px;
  border: 1px solid var(--cod-line-2);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.04);
  color: var(--cod-ink);
  font-size: 12.5px;
  letter-spacing: 0.22em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background var(--cod-t) var(--cod-ease),
              border-color var(--cod-t) var(--cod-ease),
              color var(--cod-t) var(--cod-ease),
              box-shadow var(--cod-t-fast) var(--cod-ease),
              transform var(--cod-t-fast) var(--cod-ease);
  -webkit-appearance: none;
  appearance: none;
}
.cod-btn::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--cod-accent);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--cod-t) var(--cod-ease);
}
.cod-btn:hover,
.cod-btn.is-cursor {
  background: rgba(255, 255, 255, 0.085);
  border-color: var(--cod-line-3);
  color: #fff;
}
.cod-btn:hover::before,
.cod-btn.is-cursor::before { transform: scaleY(1); }
.cod-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
}
.cod-btn[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }

.cod-btn.is-primary {
  background: var(--cod-accent);
  border-color: var(--cod-accent);
  color: var(--cod-accent-ink);
  font-weight: 700;
}
.cod-btn.is-primary:hover,
.cod-btn.is-primary.is-cursor { background: var(--cod-accent-hot); border-color: var(--cod-accent-hot); }
.cod-btn.is-primary::before { background: rgba(0, 0, 0, 0.55); }

.cod-btn.is-ghost { border-color: var(--cod-line); background: transparent; color: var(--cod-ink-dim); }
.cod-btn.is-ghost:hover, .cod-btn.is-ghost.is-cursor { color: var(--cod-ink); border-color: var(--cod-line-2); }
.cod-btn.is-danger:hover, .cod-btn.is-danger.is-cursor { border-color: var(--cod-red); color: #ff8f83; }
.cod-btn.is-danger::before { background: var(--cod-red); }
.cod-btn.is-wide { width: 100%; }
.cod-btn.is-sm { min-height: 26px; padding: 0 11px; font-size: 10.5px; letter-spacing: 0.16em; }

/* Focus ring — visible for keyboard, invisible for the mouse. */
#ui-root :focus { outline: none; }
#ui-root :focus-visible {
  outline: 1px solid var(--cod-accent-hot);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(200, 162, 74, 0.14);
}

/* Range slider ---------------------------------------------------------- */
.cod-range {
  -webkit-appearance: none;
  appearance: none;
  width: 190px;
  height: 18px;
  background: transparent;
  cursor: pointer;
}
.cod-range::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--cod-line-2);
  border: 0;
}
.cod-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 16px;
  margin-top: -7px;
  background: var(--cod-accent);
  border: 0;
  border-radius: 0;
  transition: background var(--cod-t-fast) var(--cod-ease), transform var(--cod-t-fast) var(--cod-ease);
}
.cod-range:hover::-webkit-slider-thumb { background: var(--cod-accent-hot); transform: scaleY(1.15); }
.cod-range::-moz-range-track { height: 2px; background: var(--cod-line-2); border: 0; }
.cod-range::-moz-range-thumb {
  width: 8px; height: 16px; background: var(--cod-accent);
  border: 0; border-radius: 0;
}
.cod-range::-moz-range-progress { height: 2px; background: var(--cod-accent-dim); }

/* Switch ---------------------------------------------------------------- */
.cod-switch {
  position: relative;
  width: 46px;
  height: 20px;
  border: 1px solid var(--cod-line-2);
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--cod-t) var(--cod-ease), background var(--cod-t) var(--cod-ease);
}
.cod-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 14px;
  background: var(--cod-ink-faint);
  transition: transform var(--cod-t) var(--cod-ease), background var(--cod-t) var(--cod-ease);
}
.cod-switch[aria-checked='true'] { border-color: var(--cod-accent-dim); background: rgba(200, 162, 74, 0.10); }
.cod-switch[aria-checked='true']::after { transform: translateX(24px); background: var(--cod-accent); }
.cod-switch:hover { border-color: var(--cod-line-3); }

/* Segmented selector ---------------------------------------------------- */
.cod-seg { display: inline-flex; border: 1px solid var(--cod-line-2); }
.cod-seg button {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-right: 1px solid var(--cod-line);
  background: transparent;
  color: var(--cod-ink-dim);
  font-family: var(--cod-cond); font-stretch: 75%;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  padding: 6px 12px;
  cursor: pointer;
  transition: background var(--cod-t-fast) var(--cod-ease), color var(--cod-t-fast) var(--cod-ease);
}
.cod-seg button:last-child { border-right: 0; }
.cod-seg button:hover { color: var(--cod-ink); background: rgba(255, 255, 255, 0.05); }
.cod-seg button.is-on { background: var(--cod-accent); color: var(--cod-accent-ink); font-weight: 700; }

/* Select / text input --------------------------------------------------- */
.cod-select, .cod-input {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--cod-line-2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.45);
  color: var(--cod-ink);
  font-family: var(--cod-font);
  font-size: 12.5px;
  padding: 7px 10px;
  min-width: 190px;
  outline: none;
  transition: border-color var(--cod-t) var(--cod-ease), background var(--cod-t) var(--cod-ease);
}
.cod-select { padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, var(--cod-ink-dim) 50%), linear-gradient(135deg, var(--cod-ink-dim) 50%, transparent 50%); background-position: right 12px top 14px, right 7px top 14px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.cod-select:hover, .cod-input:hover { border-color: var(--cod-line-3); }
.cod-select:focus, .cod-input:focus { border-color: var(--cod-accent); background: rgba(0, 0, 0, 0.6); }
.cod-select option { background: var(--cod-bg-1); color: var(--cod-ink); }
.cod-input::placeholder { color: var(--cod-ink-ghost); }

/* Stat bar -------------------------------------------------------------- */
.cod-stat { display: grid; grid-template-columns: 88px 1fr 34px; align-items: center; gap: 10px; }
.cod-stat-label {
  font-family: var(--cod-cond); font-stretch: 75%;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.20em;
  color: var(--cod-ink-dim);
}
.cod-stat-track {
  position: relative;
  height: 5px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
/* Segment ticks so the bar reads as a gauge, not a progress bar. */
.cod-stat-track::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg,
    transparent 0 calc(10% - 1px), rgba(5, 6, 7, 0.9) calc(10% - 1px) 10%);
  pointer-events: none;
}
.cod-stat-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cod-accent-dim), var(--cod-accent) 75%, var(--cod-accent-hot));
  transition: width 260ms var(--cod-ease-out);
}
.cod-stat-fill.is-up   { background: linear-gradient(90deg, #4d7a3a, var(--cod-green)); }
.cod-stat-fill.is-down { background: linear-gradient(90deg, var(--cod-red-dim), var(--cod-red)); }
.cod-stat-val { font-family: var(--cod-mono); font-size: 11px; color: var(--cod-ink-2); text-align: right; }

/* Custom scrollbars ----------------------------------------------------- */
.cod-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--cod-accent-dim) transparent; }
.cod-scroll::-webkit-scrollbar { width: 8px; }
.cod-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); }
.cod-scroll::-webkit-scrollbar-thumb { background: var(--cod-line-2); }
.cod-scroll::-webkit-scrollbar-thumb:hover { background: var(--cod-accent-dim); }

/* --------------------------------------------------------------------------
   9. MENUS
   -------------------------------------------------------------------------- */

#cod-menu-root {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  pointer-events: none;
}
#cod-menu-root.is-open { display: block; pointer-events: auto; }

/* The render loop never stops for the menu, so a live lit world is sitting
   behind this element. The old near-opaque radial (0.955 → 0.994 alpha) let
   through under 4.5% of it and was the single root cause of every "no rendered
   content" reading. This is a DIRECTIONAL cinematic scrim instead: dark enough
   under the left-hand text column to hold white condensed caps, opening out
   across the right two thirds onto the world. Do not flatten it back. */
.cod-menu-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(6, 8, 11, 0.94) 0%,
      rgba(6, 8, 11, 0.88) 26%,
      rgba(6, 8, 11, 0.46) 60%,
      rgba(6, 8, 11, 0.32) 100%),
    linear-gradient(0deg,
      rgba(4, 5, 6, 0.92) 0%,
      rgba(4, 5, 6, 0.55) 18%,
      transparent 44%);
  /* Just enough to separate UI from world — 14px smeared voxels to mud. */
  -webkit-backdrop-filter: blur(3px) saturate(0.85);
          backdrop-filter: blur(3px) saturate(0.85);
}
.cod-menu-backdrop::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--cod-noise);
  background-size: 140px 140px;
  opacity: 0.055;
  mix-blend-mode: overlay;
}
/* NOTE (r4): there is deliberately NO `.cod-menu-backdrop::after` scanline.
   This element is `inset:0` inside a `position:fixed` root, so it covers the
   whole viewport — including the right two thirds where the scrim is thin
   (0.32–0.46) and the world is meant to read as a render. A 3px-period
   horizontal gradient there is a screen-space lattice over rendered geometry,
   §32 hard rule 3, measured at 1.98 luma peak-to-peak on the pale concrete.
   The `::before` grain above is isotropic and stays. The scanline weave is
   still house language — it lives on `.cod-scan` / `.cod-scanlines` (§3) and
   belongs on OPAQUE chrome only (`.cod-sb`, `.cod-mm-frame`, `#cod-map-root`
   all qualify and keep theirs). Never re-add it to the backdrop. */
/* Pause dims less so the world stays legible behind it. */
#cod-menu-root.is-pause .cod-menu-backdrop {
  background: linear-gradient(180deg, rgba(5,6,8,0.86), rgba(5,6,8,0.72));
  -webkit-backdrop-filter: blur(5px) saturate(0.6);
          backdrop-filter: blur(5px) saturate(0.6);
}

/* The scrim above is deliberately translucent now, which exposes a second
   problem: the in-game HUD layers are siblings under `#ui-root` and, unlike
   scoreboard.js and minimap.js, none of them subscribe to `menu:open`. Under
   the old near-opaque wash they were simply buried; lifted, the health bar,
   ammo block, hotbar, compass and crosshair sit live on top of the menu.
   Hiding them here keeps the fix self-contained and matches the house
   language exactly (`.cod-hud.is-hidden` is also just `opacity: 0`), so if a
   `menu:open` -> `hide()` subscription is later added in hud.js the two
   agree rather than fight. `:has()` is Chrome 105+; on an engine without it
   the whole selector is dropped and behaviour is unchanged. */
#ui-root:has(#cod-menu-root.is-open) .cod-hud,
#ui-root:has(#cod-menu-root.is-open) .cod-crosshair,
#ui-root:has(#cod-menu-root.is-open) .cod-killfeed,
#ui-root:has(#cod-menu-root.is-open) .cod-damage {
  opacity: 0;
  pointer-events: none;
}

/* Screen shell ---------------------------------------------------------- */
.cod-screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: clamp(16px, 2.6vh, 34px) var(--cod-gut) clamp(14px, 2.2vh, 26px);
}
.cod-screen.is-active { display: flex; animation: cod-screen-in var(--cod-t-slow) var(--cod-ease-out) both; }
@keyframes cod-screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Header bar ------------------------------------------------------------ */
.cod-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cod-line);
  flex: 0 0 auto;
}
.cod-topbar-l { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.cod-topbar-r { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cod-breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--cod-cond); font-stretch: 75%; font-size: 10px; letter-spacing: 0.30em; color: var(--cod-ink-faint); text-transform: uppercase; }
.cod-breadcrumb span.is-here { color: var(--cod-accent); }
.cod-breadcrumb i { font-style: normal; color: var(--cod-ink-ghost); }

.cod-body { flex: 1 1 auto; min-height: 0; display: flex; padding: clamp(12px, 2.4vh, 30px) 0; }

.cod-footbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--cod-line);
}
.cod-hints { display: flex; gap: 16px; flex-wrap: wrap; }
.cod-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase;
  font-family: var(--cod-cond); font-stretch: 75%; color: var(--cod-ink-faint);
}
.cod-hint .cod-key { color: var(--cod-ink-dim); }
.cod-build-tag { font-family: var(--cod-mono); font-size: 10px; color: var(--cod-ink-ghost); letter-spacing: 0.1em; }

/* --- MAIN: title lockup ------------------------------------------------ */
.cod-lockup { display: flex; flex-direction: column; gap: 6px; }
.cod-lockup-title {
  font-family: var(--cod-cond); font-stretch: 75%;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(34px, 5.4vw, 76px);
  line-height: 0.92;
  letter-spacing: 0.03em;
  color: #fff;
  white-space: nowrap;
}
.cod-lockup-title em {
  font-family: var(--cod-font);
  font-style: italic;
  font-weight: 400;
  font-size: 0.28em;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--cod-accent);
  vertical-align: 0.55em;
  margin: 0 0.22em;
}
.cod-lockup-bar {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--cod-accent) 0, var(--cod-accent) 90px, var(--cod-line) 90px, var(--cod-line) 100%);
}
.cod-lockup-sub {
  font-family: var(--cod-cond); font-stretch: 75%;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--cod-ink-dim);
}

/* --- MAIN: the two big choices ----------------------------------------- */
.cod-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 14px, not 2px: at 2px the two drop shadows overlap and neither card reads
     as lifted. This gap is the room each shadow needs to fall against ground. */
  gap: 14px;
  width: 100%;
  min-height: 0;
}
.cod-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: clamp(18px, 3vw, 42px);
  border: 1px solid var(--cod-line);
  background: rgba(255, 255, 255, 0.022);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
  /* Ambient drop + tight contact line + 1px inner top highlight. */
  box-shadow: 0 20px 52px -14px rgba(0, 0, 0, 0.88),
              0 2px 0 rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transition: background var(--cod-t-slow) var(--cod-ease),
              border-color var(--cod-t-slow) var(--cod-ease),
              box-shadow var(--cod-t-slow) var(--cod-ease);
}
.cod-choice > * { position: relative; z-index: 2; transition: transform var(--cod-t-slow) var(--cod-ease); }
/* NOTE (r4): there is deliberately NO `.cod-choice::before` hatch. The card is
   no longer an opaque panel over void — menus.js makes it `background:
   transparent` with a graded media plane, so the card interior shows the live
   render. The old 135° gradient (1px white stop every 9px) therefore laid a
   sub-texel diagonal lattice across brick, frame and glass with no regard for
   surface orientation or depth: a screen-space overlay over a 16×16-texel art
   style, §32 hard rule 3. Measured pitch was exactly 9.00px at 135°, one
   bright bin of twelve. Dropping the opacity did not fix it, only dimmed it.
   The hover/cursor affordance is carried by the border luminance step, the
   card lift, the gold `::after` underline, the `.cod-choice-index` accent and
   the caption slide — all achromatic or accent, none of them a repeating
   gradient over a plane that shows the world. If another cue is ever wanted,
   use border luminance or an outer shadow, never a gradient here. */
.cod-choice::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  z-index: 3;
  background: var(--cod-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--cod-t-slow) var(--cod-ease);
}
/* Hover/cursor is an achromatic luminance + lift step, replacing the deleted
   hatch: border 0.16 -> 0.30 white, a deeper ambient drop and a brighter 1px
   inner top highlight. No gradient, nothing that tiles. */
.cod-choice:hover,
.cod-choice.is-cursor {
  background: rgba(255, 255, 255, 0.075);
  border-color: var(--cod-line-3);
  box-shadow: 0 28px 64px -14px rgba(0, 0, 0, 0.92),
              0 2px 0 rgba(0, 0, 0, 0.55),
              inset 0 0 0 1px rgba(255, 255, 255, 0.05),
              inset 0 1px 0 rgba(255, 255, 255, 0.13);
}
.cod-choice:hover::after,  .cod-choice.is-cursor::after  { transform: scaleX(1); }
.cod-choice:hover > *,     .cod-choice.is-cursor > *     { transform: translateX(8px); }

.cod-choice-index {
  font-family: var(--cod-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--cod-accent-dim);
}
.cod-choice-name {
  font-family: var(--cod-cond); font-stretch: 75%;
  text-transform: uppercase;
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 0.94;
  letter-spacing: 0.015em;
  color: #fff;
  margin: 0;
}
.cod-choice-desc {
  max-width: 40ch;
  font-size: 13px;
  line-height: 1.62;
  color: var(--cod-ink-2);
}
.cod-choice-go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  font-family: var(--cod-cond); font-stretch: 75%;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--cod-accent);
  opacity: 0.55;
  transition: opacity var(--cod-t-slow) var(--cod-ease);
}
.cod-choice:hover .cod-choice-go, .cod-choice.is-cursor .cod-choice-go { opacity: 1; }
.cod-choice-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cod-tag {
  padding: 2px 7px;
  border: 1px solid var(--cod-line-2);
  font-family: var(--cod-cond); font-stretch: 75%;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--cod-ink-dim);
}
.cod-tag.is-accent { border-color: var(--cod-accent-dim); color: var(--cod-accent); }

/* Battle panel gets a warm cast, build a cool one — one accent, two moods. */
.cod-choice[data-choice='BATTLE']:hover, .cod-choice[data-choice='BATTLE'].is-cursor {
  background: linear-gradient(180deg, rgba(90, 40, 26, 0.16), rgba(255,255,255,0.055));
}
.cod-choice[data-choice='BUILD']:hover, .cod-choice[data-choice='BUILD'].is-cursor {
  background: linear-gradient(180deg, rgba(26, 58, 90, 0.16), rgba(255,255,255,0.055));
}

/* LOADOUT / MULTIPLAYER / SETTINGS. `.cod-topbar` has no fill and neither did
   this column, so the three buttons sat directly on the world — in the top
   right corner, which is exactly where `.cod-menu-backdrop`'s directional
   scrim is thinnest by design (0.46 at 60%, 0.32 at 100%) and where the
   brightest content in the frame lands. Measured contrast was 1.99 / 2.16 /
   2.67:1 for the three siblings: their legibility was decided by whatever
   voxel happened to be behind them, which is why they disagreed.
   (a) The plate below is the load-bearing half — it gives all three one
   deterministic ground no matter what the backdrop is doing. */
.cod-main-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-end;
  padding: 8px;
  background: rgba(6, 7, 9, 0.78);
  border: 1px solid var(--cod-line);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
/* (b) Global nav does not use the ghost variant. `.cod-btn.is-ghost` strips
   the base fill and drops the ink to `--cod-ink-dim` (#838a92, L=0.251) —
   correct for a BACK affordance sitting on an opaque subscreen panel, wrong
   for the only route out of the main menu. Scoped here rather than removed
   from `.cod-btn.is-ghost` so every other ghost button keeps its treatment.
   #eceded over the plate above measures ~11:1, identical for all three. */
.cod-main-side .cod-btn.is-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--cod-line-2);
  color: var(--cod-ink);
}
.cod-main-side .cod-btn.is-ghost:hover,
.cod-main-side .cod-btn.is-ghost.is-cursor {
  background: rgba(255, 255, 255, 0.085);
  border-color: var(--cod-line-3);
  color: #fff;
}

/* --- Vertical option list (modes, pause) ------------------------------- */
.cod-list { display: flex; flex-direction: column; width: 100%; }
.cod-list.is-narrow { max-width: 520px; }

.cod-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 15px 16px 15px 18px;
  border: 0;
  border-bottom: 1px solid var(--cod-line);
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--cod-t) var(--cod-ease), padding-left var(--cod-t) var(--cod-ease);
}
.cod-row:first-child { border-top: 1px solid var(--cod-line); }
.cod-row::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--cod-accent);
  transform: scaleY(0);
  transition: transform var(--cod-t) var(--cod-ease);
}
.cod-row:hover, .cod-row.is-cursor { background: rgba(255, 255, 255, 0.055); padding-left: 26px; }
.cod-row:hover::before, .cod-row.is-cursor::before { transform: scaleY(1); }
.cod-row.is-selected { background: rgba(200, 162, 74, 0.09); }
.cod-row.is-selected::before { transform: scaleY(1); }
.cod-row-main { flex: 1 1 auto; min-width: 0; }
.cod-row-title {
  font-family: var(--cod-cond); font-stretch: 75%;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.18em;
  color: var(--cod-ink);
}
.cod-row:hover .cod-row-title, .cod-row.is-cursor .cod-row-title { color: #fff; }
.cod-row-desc { margin-top: 3px; font-size: 12px; color: var(--cod-ink-dim); line-height: 1.5; }
.cod-row-meta {
  flex: 0 0 auto;
  font-family: var(--cod-cond); font-stretch: 75%;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--cod-ink-faint);
  text-align: right;
}
.cod-row-chev { flex: 0 0 auto; color: var(--cod-ink-ghost); transition: color var(--cod-t) var(--cod-ease), transform var(--cod-t) var(--cod-ease); }
.cod-row:hover .cod-row-chev, .cod-row.is-cursor .cod-row-chev { color: var(--cod-accent); transform: translateX(4px); }

/* --- LOADOUT ----------------------------------------------------------- */
.cod-loadout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(340px, 1.55fr) minmax(250px, 1fr);
  gap: 2px;
  width: 100%;
  min-height: 0;
}
.cod-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--cod-line);
  background: rgba(255, 255, 255, 0.018);
}
.cod-pane-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--cod-line);
  background: rgba(0, 0, 0, 0.25);
  font-family: var(--cod-cond); font-stretch: 75%;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.30em;
  color: var(--cod-ink-dim);
}
.cod-pane-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.cod-pane-body.is-pad { padding: 14px 14px 18px; }

.cod-wclass {
  padding: 9px 12px 4px;
  font-family: var(--cod-cond); font-stretch: 75%;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.32em;
  color: var(--cod-accent-dim);
  border-top: 1px solid var(--cod-line);
}
.cod-wclass:first-child { border-top: 0; }

.cod-witem {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 8px 12px 8px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--cod-t-fast) var(--cod-ease), padding-left var(--cod-t-fast) var(--cod-ease);
}
.cod-witem::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--cod-accent); transform: scaleY(0);
  transition: transform var(--cod-t-fast) var(--cod-ease);
}
.cod-witem:hover, .cod-witem.is-cursor { background: rgba(255,255,255,.06); padding-left: 20px; }
.cod-witem:hover::before, .cod-witem.is-cursor::before { transform: scaleY(1); }
.cod-witem.is-selected { background: rgba(200, 162, 74, 0.11); }
.cod-witem.is-selected::before { transform: scaleY(1); }
.cod-witem-name {
  flex: 1 1 auto;
  font-family: var(--cod-cond); font-stretch: 75%;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--cod-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cod-witem.is-selected .cod-witem-name, .cod-witem:hover .cod-witem-name { color: #fff; }
.cod-witem-ttk { font-family: var(--cod-mono); font-size: 10px; color: var(--cod-ink-ghost); }

.cod-preview {
  position: relative;
  flex: 1 1 auto;
  min-height: 180px;
  background:
    radial-gradient(75% 65% at 50% 58%, rgba(60, 68, 80, 0.30) 0%, rgba(8, 9, 11, 0.0) 72%),
    linear-gradient(180deg, rgba(8,9,11,0), rgba(8,9,11,0.7));
  overflow: hidden;
}
.cod-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cod-preview-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.030) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(70% 62% at 50% 55%, #000 0%, transparent 78%);
          mask-image: radial-gradient(70% 62% at 50% 55%, #000 0%, transparent 78%);
}
.cod-preview-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.3em; color: var(--cod-ink-ghost);
}
.cod-preview-caption {
  position: absolute; left: 16px; bottom: 14px; right: 16px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.cod-preview-name {
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase; font-weight: 700;
  font-size: clamp(20px, 2.3vw, 32px); letter-spacing: 0.12em; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.85);
}
.cod-preview-class { font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase; font-size: 10px; letter-spacing: 0.30em; color: var(--cod-accent); }

.cod-kv { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; }
.cod-kv dt {
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.20em; color: var(--cod-ink-faint);
  padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cod-kv dd {
  margin: 0; padding: 4px 0; text-align: right;
  font-family: var(--cod-mono); font-size: 11.5px; color: var(--cod-ink-2);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cod-kv dd b { color: var(--cod-accent); font-weight: 400; }

.cod-slotbar { display: flex; gap: 2px; }
.cod-slotbar button {
  flex: 1 1 0;
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--cod-line);
  background: rgba(255,255,255,.02);
  color: var(--cod-ink-dim);
  padding: 7px 6px 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--cod-t) var(--cod-ease), background var(--cod-t) var(--cod-ease);
}
.cod-slotbar button.is-on { border-color: var(--cod-accent); background: rgba(200,162,74,.10); color: var(--cod-ink); }
.cod-slotbar button:hover { border-color: var(--cod-line-3); }
.cod-slotbar em {
  display: block; font-style: normal;
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 8.5px; letter-spacing: 0.28em; color: var(--cod-ink-ghost);
}
.cod-slotbar span {
  display: block;
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.10em; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- MULTIPLAYER ------------------------------------------------------- */
.cod-form { display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 620px; }
.cod-field {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--cod-line);
}
.cod-field:first-child { border-top: 1px solid var(--cod-line); }
.cod-field-label {
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.22em; color: var(--cod-ink-2);
}
.cod-field-help { margin-top: 3px; font-size: 11.5px; color: var(--cod-ink-faint); letter-spacing: 0.02em; max-width: 46ch; }
.cod-field-ctl { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }

.cod-teampick { display: flex; gap: 2px; }
.cod-teampick button {
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--cod-line-2);
  background: transparent; cursor: pointer;
  padding: 6px 16px;
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 10.5px; letter-spacing: 0.20em; color: var(--cod-ink-dim);
  transition: all var(--cod-t) var(--cod-ease);
}
.cod-teampick button[data-team='a'].is-on { border-color: var(--cod-red); background: rgba(210,75,62,.16); color: #ffb0a6; }
.cod-teampick button[data-team='b'].is-on { border-color: var(--cod-blue); background: rgba(61,134,216,.16); color: #a8cdf6; }
.cod-teampick button[data-team='auto'].is-on { border-color: var(--cod-accent); background: rgba(200,162,74,.14); color: var(--cod-accent-hot); }

.cod-conn-state {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.26em; color: var(--cod-ink-faint);
}

/* --- SETTINGS ---------------------------------------------------------- */
.cod-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--cod-line);
  flex: 0 0 auto;
}
.cod-tab {
  position: relative;
  -webkit-appearance: none; appearance: none;
  border: 0; background: transparent;
  padding: 11px 20px 12px;
  font-size: 11.5px; letter-spacing: 0.26em;
  color: var(--cod-ink-faint);
  cursor: pointer;
  transition: color var(--cod-t) var(--cod-ease);
}
.cod-tab::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--cod-accent);
  transform: scaleX(0);
  transition: transform var(--cod-t) var(--cod-ease);
}
.cod-tab:hover { color: var(--cod-ink-2); }
.cod-tab.is-on { color: #fff; }
.cod-tab.is-on::after { transform: scaleX(1); }

.cod-settings-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 2px; }
.cod-settings-list { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding-right: 8px; }
.cod-settings-aside {
  flex: 0 0 clamp(210px, 22vw, 300px);
  border-left: 1px solid var(--cod-line);
  padding: 16px 0 0 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.cod-aside-title { font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase; font-size: 11px; letter-spacing: 0.26em; color: var(--cod-accent); }
.cod-aside-body { font-size: 12px; line-height: 1.65; color: var(--cod-ink-dim); }

.cod-group {
  padding: 16px 0 6px;
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 9.5px; letter-spacing: 0.34em; color: var(--cod-accent-dim);
}
.cod-setting {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 10px 10px 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  transition: background var(--cod-t-fast) var(--cod-ease);
}
.cod-setting:hover, .cod-setting.is-cursor { background: rgba(255, 255, 255, 0.045); }
.cod-setting-l { min-width: 0; }
.cod-setting-name {
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 12.5px; letter-spacing: 0.16em; color: var(--cod-ink);
}
.cod-setting-desc { margin-top: 3px; font-size: 11.5px; color: var(--cod-ink-faint); line-height: 1.45; max-width: 62ch; }
.cod-setting-r { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.cod-setting-val {
  min-width: 58px; text-align: right;
  font-family: var(--cod-mono); font-size: 11.5px; color: var(--cod-accent);
}
.cod-setting.is-changed .cod-setting-name::after {
  content: '•'; color: var(--cod-accent); margin-left: 7px; font-size: 14px; line-height: 0;
}

/* Key rebinding --------------------------------------------------------- */
.cod-bindgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px; }
.cod-bind {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-bottom-color: rgba(255,255,255,0.055);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none; appearance: none;
  transition: background var(--cod-t-fast) var(--cod-ease), border-color var(--cod-t-fast) var(--cod-ease);
}
.cod-bind:hover, .cod-bind.is-cursor { background: rgba(255,255,255,.05); }
.cod-bind-action {
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 11.5px; letter-spacing: 0.16em; color: var(--cod-ink-2);
}
.cod-bind-key {
  min-width: 92px; text-align: center;
  padding: 4px 9px;
  border: 1px solid var(--cod-line-2);
  background: rgba(0,0,0,.42);
  font-family: var(--cod-mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--cod-ink);
  white-space: nowrap;
}
.cod-bind.is-listening { border-color: var(--cod-accent); background: rgba(200,162,74,.10); }
.cod-bind.is-listening .cod-bind-key {
  border-color: var(--cod-accent); color: var(--cod-accent-hot);
  animation: cod-blink 780ms steps(2, jump-none) infinite;
}
.cod-bind.is-conflict .cod-bind-key { border-color: var(--cod-red); color: #ff9a90; }
@keyframes cod-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.30; } }

/* Quality tier picker --------------------------------------------------- */
.cod-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 4px 0 8px; }
.cod-tier {
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--cod-line);
  background: rgba(255,255,255,.02);
  padding: 11px 12px 12px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: border-color var(--cod-t) var(--cod-ease), background var(--cod-t) var(--cod-ease);
}
.cod-tier:hover, .cod-tier.is-cursor { border-color: var(--cod-line-3); background: rgba(255,255,255,.055); }
.cod-tier.is-on { border-color: var(--cod-accent); background: rgba(200,162,74,.10); }
.cod-tier-name {
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 13px; letter-spacing: 0.22em; color: var(--cod-ink);
}
.cod-tier.is-on .cod-tier-name { color: var(--cod-accent-hot); }
.cod-tier-desc { margin-top: 4px; font-size: 11px; color: var(--cod-ink-faint); line-height: 1.45; }

/* --- PAUSE ------------------------------------------------------------- */
.cod-pause-wrap {
  display: grid;
  grid-template-columns: minmax(320px, 460px) 1fr;
  gap: clamp(24px, 5vw, 80px);
  width: 100%;
  align-items: start;
}
.cod-pause-stats {
  border-left: 1px solid var(--cod-line);
  padding-left: clamp(16px, 2.2vw, 30px);
  display: flex; flex-direction: column; gap: 14px;
  align-self: stretch;
}
.cod-bigstat { display: flex; align-items: baseline; gap: 12px; }
.cod-bigstat b {
  font-family: var(--cod-mono); font-size: 30px; font-weight: 700; color: #fff; line-height: 1;
}
.cod-bigstat span {
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.28em; color: var(--cod-ink-faint);
}

/* --------------------------------------------------------------------------
   10. SCOREBOARD  (hold-Tab)
   -------------------------------------------------------------------------- */

#cod-sb-root {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh var(--cod-gut);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--cod-t) var(--cod-ease),
              transform var(--cod-t) var(--cod-ease),
              visibility 0s linear var(--cod-t);
  background: radial-gradient(120% 100% at 50% 40%, rgba(5, 6, 8, 0.74), rgba(3, 4, 5, 0.93));
  -webkit-backdrop-filter: blur(5px) saturate(0.7);
          backdrop-filter: blur(5px) saturate(0.7);
}
#cod-sb-root.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}

.cod-sb {
  position: relative;
  width: min(1180px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cod-line-2);
  border-top: 2px solid var(--cod-accent-dim);
  background: rgba(8, 9, 12, 0.93);
}
.cod-sb::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.cod-sb-head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--cod-line);
  background: rgba(0, 0, 0, 0.3);
}
.cod-sb-mode {
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 15px; letter-spacing: 0.26em; color: var(--cod-ink);
}
.cod-sb-map { margin-top: 2px; font-size: 10px; letter-spacing: 0.24em; color: var(--cod-ink-ghost); text-transform: uppercase; font-family: var(--cod-cond); font-stretch: 75%; }
.cod-sb-clock {
  text-align: center;
  font-family: var(--cod-mono);
  font-size: 30px; font-weight: 700; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.cod-sb-clock.is-low { color: var(--cod-red); }
.cod-sb-limit {
  text-align: center; margin-top: 4px;
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 9.5px; letter-spacing: 0.28em; color: var(--cod-ink-faint);
}
.cod-sb-scores { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.cod-sb-teamscore { display: flex; align-items: baseline; gap: 8px; }
.cod-sb-teamscore b { font-family: var(--cod-mono); font-size: 26px; font-weight: 700; line-height: 1; }
.cod-sb-teamscore span { font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase; font-size: 10px; letter-spacing: 0.24em; }
.cod-sb-teamscore.is-a b, .cod-sb-teamscore.is-a span { color: var(--cod-red); }
.cod-sb-teamscore.is-b b, .cod-sb-teamscore.is-b span { color: var(--cod-blue); }
.cod-sb-vs { color: var(--cod-ink-ghost); font-family: var(--cod-cond); font-stretch: 75%; font-size: 11px; letter-spacing: .2em; }

.cod-sb-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; gap: 1px; overflow: hidden; }
.cod-sb-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.cod-sb-col + .cod-sb-col { border-left: 1px solid var(--cod-line); }

.cod-sb-colhead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--cod-line);
}
.cod-sb-colhead.is-a { background: linear-gradient(90deg, rgba(210,75,62,.18), rgba(210,75,62,0)); border-bottom-color: var(--cod-red-dim); }
.cod-sb-colhead.is-b { background: linear-gradient(90deg, rgba(61,134,216,.18), rgba(61,134,216,0)); border-bottom-color: var(--cod-blue-dim); }
.cod-sb-colname { font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase; font-size: 13px; letter-spacing: 0.28em; }
.cod-sb-colhead.is-a .cod-sb-colname { color: #ff9c90; }
.cod-sb-colhead.is-b .cod-sb-colname { color: #9dc6f5; }
.cod-sb-colmeta { font-family: var(--cod-mono); font-size: 10.5px; color: var(--cod-ink-faint); }

/* One grid template shared by the sticky header row and every data row, so
   the columns line up whether or not the list is scrolling. */
.cod-sb-col { --sb-cols: 34px minmax(0, 1fr) 64px 42px 42px 52px 48px 56px; }

.cod-sb-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.cod-sb-hr, .cod-sb-row {
  display: grid;
  grid-template-columns: var(--sb-cols);
  align-items: center;
}

.cod-sb-hr {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0c0e11;
  border-bottom: 1px solid var(--cod-line);
}
.cod-sb-hr > * {
  padding: 7px 6px;
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 9px; letter-spacing: 0.22em; color: var(--cod-ink-ghost);
}

.cod-sb-row > * {
  padding: 6px 6px;
  font-family: var(--cod-mono);
  font-size: 12px;
  color: var(--cod-ink-2);
  min-width: 0;
}
.cod-sb-row { border-bottom: 1px solid rgba(255, 255, 255, 0.045); }
.cod-sb-row.is-local { background: rgba(200, 162, 74, 0.11); }
.cod-sb-row.is-local > * { color: #fff; }
.cod-sb-row.is-dead { opacity: 0.42; }
.cod-sb-row.is-local .cod-c-name { color: var(--cod-accent-hot); }

.cod-c-rank  { text-align: center; color: var(--cod-ink-ghost); }
.cod-c-name  {
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 13.5px; letter-spacing: 0.10em; color: var(--cod-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-left: 10px !important;
}
.cod-c-score { text-align: right; color: #fff; }
.cod-c-k     { text-align: right; }
.cod-c-d     { text-align: right; }
.cod-c-kd    { text-align: right; color: var(--cod-ink-dim); }
.cod-c-strk  { text-align: right; }
.cod-c-ping  { text-align: right; padding-right: 12px !important; }

.cod-sb-row .cod-c-strk.is-hot { color: var(--cod-accent); }
.cod-ping-good { color: var(--cod-green); }
.cod-ping-ok   { color: var(--cod-amber); }
.cod-ping-bad  { color: var(--cod-red); }

.cod-sb-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 0 4px;
  border: 1px solid var(--cod-line-2);
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 8.5px; letter-spacing: 0.18em; color: var(--cod-ink-faint);
  vertical-align: 1px;
}
.cod-sb-badge.is-bot { border-color: var(--cod-ink-ghost); }
.cod-sb-badge.is-lead { border-color: var(--cod-accent-dim); color: var(--cod-accent); }

.cod-sb-empty {
  padding: 26px 14px; text-align: center;
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.3em; color: var(--cod-ink-ghost);
}

.cod-sb-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--cod-line);
  background: rgba(0,0,0,.28);
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 9.5px; letter-spacing: 0.24em; color: var(--cod-ink-ghost);
}

/* --------------------------------------------------------------------------
   11. MINIMAP
   -------------------------------------------------------------------------- */

#cod-mm-root {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 20;
  pointer-events: none;
  transition: opacity var(--cod-t) var(--cod-ease);
}
#cod-mm-root.is-hidden { opacity: 0; }

.cod-mm-frame {
  position: relative;
  border: 1px solid var(--cod-line-2);
  background: #070809;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.cod-mm-frame canvas { display: block; }
/* Corner ticks — the classic tactical-map framing. */
.cod-mm-frame::before,
.cod-mm-frame::after {
  content: '';
  position: absolute;
  width: 9px; height: 9px;
  border: 0 solid var(--cod-accent);
  pointer-events: none;
}
.cod-mm-frame::before { left: -1px;  top: -1px;    border-left-width: 1px; border-top-width: 1px; }
.cod-mm-frame::after  { right: -1px; bottom: -1px; border-right-width: 1px; border-bottom-width: 1px; }

.cod-mm-scan {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity: 0.65;
}

.cod-mm-north {
  position: absolute;
  top: -1px; left: 50%;
  transform: translate(-50%, -50%);
  padding: 1px 5px;
  background: #0a0b0d;
  border: 1px solid var(--cod-accent-dim);
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 8.5px; letter-spacing: 0.18em; color: var(--cod-accent);
}

/* The footer sits over the live scene, so every glyph carries its own shadow. */
.cod-mm-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 5px;
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 9.5px; letter-spacing: 0.22em; color: var(--cod-ink-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.7);
}
.cod-mm-zone { color: var(--cod-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cod-mm-coords { font-family: var(--cod-mono); letter-spacing: 0.04em; }

/* Full-screen tactical map --------------------------------------------- */
#cod-map-root {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: none;
  flex-direction: column;
  padding: clamp(14px, 2.4vh, 28px) var(--cod-gut) clamp(12px, 2vh, 22px);
  background: radial-gradient(120% 100% at 50% 40%, rgba(9,10,13,0.975), rgba(4,5,6,0.995));
  pointer-events: auto;
}
#cod-map-root.is-open { display: flex; animation: cod-screen-in var(--cod-t-slow) var(--cod-ease-out) both; }
#cod-map-root::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.cod-map-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 12px 0;
  border: 1px solid var(--cod-line);
  background: #06070a;
  overflow: hidden;
  cursor: grab;
}
.cod-map-stage.is-panning { cursor: grabbing; }
.cod-map-stage canvas { position: absolute; inset: 0; display: block; }

.cod-map-legend { display: flex; gap: 18px; flex-wrap: wrap; }
.cod-legend-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--cod-cond); font-stretch: 75%; text-transform: uppercase;
  font-size: 9.5px; letter-spacing: 0.2em; color: var(--cod-ink-faint);
}
.cod-legend-swatch { width: 9px; height: 9px; border: 1px solid rgba(0,0,0,.6); }
.cod-legend-swatch.is-you  { background: var(--cod-accent); }
.cod-legend-swatch.is-mate { background: var(--cod-blue); }
.cod-legend-swatch.is-foe  { background: var(--cod-red); }
.cod-legend-swatch.is-zone { background: transparent; border-color: var(--cod-accent-dim); }
.cod-legend-swatch.is-obj  { background: var(--cod-green); }

.cod-map-zoom { display: flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------------------
   12. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .cod-loadout { grid-template-columns: minmax(180px, 1fr) minmax(280px, 1.4fr); }
  .cod-loadout > .cod-pane:nth-child(3) { display: none; }
  .cod-settings-aside { display: none; }
  .cod-sb-col { --sb-cols: 34px minmax(0, 1fr) 64px 42px 42px 48px 56px; }
  .cod-c-kd { display: none; }
}

@media (max-width: 860px) {
  :root { --cod-gut: 16px; }
  .cod-choice-grid { grid-template-columns: 1fr; }
  .cod-pause-wrap { grid-template-columns: 1fr; }
  .cod-pause-stats { display: none; }
  .cod-loadout { grid-template-columns: 1fr; }
  .cod-loadout > .cod-pane:nth-child(1) { max-height: 34vh; }
  .cod-tiers { grid-template-columns: repeat(2, 1fr); }
  .cod-sb-col { --sb-cols: 30px minmax(0, 1fr) 60px 38px 38px 52px; }
  .cod-c-strk { display: none; }
  .cod-killfeed { width: 64vw; }
}

@media (max-height: 620px) {
  .cod-lockup-title { font-size: clamp(26px, 4vw, 40px); }
  .cod-choice { padding: 16px; }
  .cod-choice-name { font-size: clamp(22px, 3vw, 34px); }
  .cod-choice-desc { display: none; }
}

/* --------------------------------------------------------------------------
   13. ACCESSIBILITY
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .cod-choice:hover > *, .cod-choice.is-cursor > * { transform: none; }
  .cod-row:hover, .cod-row.is-cursor { padding-left: 18px; }
  .cod-witem:hover, .cod-witem.is-cursor { padding-left: 14px; }
  .cod-netdot.is-connecting { animation: none; }
  .cod-bind.is-listening .cod-bind-key { animation: none; opacity: 1; }
}

@media (prefers-contrast: more) {
  :root {
    --cod-line:   rgba(255, 255, 255, 0.22);
    --cod-line-2: rgba(255, 255, 255, 0.40);
    /* --cod-line-3 MUST be raised with the other two. It is the hover/cursor
       rung of the border ladder (`.cod-btn:hover`, `.cod-choice:hover`,
       `.cod-main-side .cod-btn.is-ghost:hover`), and since r4 the hatch is
       gone it is the load-bearing achromatic hover cue. Left at its 0.30
       base value it lands BELOW the 0.40 `--cod-line-2` rest state, so the
       ladder inverts and hover reads dimmer than rest — the opposite of what
       this query is for. 0.55 keeps rest < hover with the same headroom the
       base palette has. */
    --cod-line-3: rgba(255, 255, 255, 0.55);
    --cod-ink-dim: #b8bec5;
    --cod-ink-faint: #9098a0;
  }
}

/* Screen-reader-only helper for the menu's live announcements. */
.cod-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}