:root {
  /* Scene colors, read by the scripts */
  --c-sky-top: #6c7f91;
  --c-sky-horizon: #b9b4a6;
  --c-haze: #b3ab9b;
  --c-sun: #ffd9a8;
  --c-hemi-sky: #a9b3ba;
  --c-hemi-ground: #5c5346;
  --c-outside: #6b6450;
  --c-skyline: #6f6c66;
  --c-hills: #77705f;

  /* Surface tints, multiplied with the procedural albedo maps */
  --c-floor: #a8a293;
  --c-deck-top: #9d978a;
  --c-facade: #b3a998;
  --c-wall: #bdb6a8;
  --c-deck: #aaa497;
  --c-pillar: #c2bbad;
  --c-paint: #5d6450;
  --c-container-a: #7d4432;
  --c-container-b: #4d5a5e;
  --c-container-c: #6f6a45;
  --c-steel: #6a6a66;
  --c-rust: #6e4a33;
  --c-wood: #9a7650;
  --c-pallet: #a08463;
  --c-sandbag: #a69576;

  /* Props and decals */
  --c-glass: #2a3036;
  --c-fan: #2c2d2c;
  --c-lamp: #ffd28c;
  --c-cable: #1c1c1c;
  --c-fence: #8a8b88;
  --c-barrel-a: #8c4a2f;
  --c-barrel-b: #3f5560;
  --c-barrel-c: #5f6440;
  --c-grime: #2c261f;
  --c-puddle: #1f1d1a;
  --c-paint-mark: #d8d4c8;
  --c-alpha-full: #ffffff;
  --c-alpha-none: #000000;

  /* Teams: accents on armbands, flags, spawn trim and markings */
  --c-blue: #3d6ea8;
  --c-blue-dark: #233a57;
  --c-red: #a8432f;
  --c-red-dark: #57261c;
  --c-emblem: #e4ddcc;

  /* Fighters: uniforms, gear and skin */
  --c-blue-shirt: #5a5f47;
  --c-blue-pants: #4b4f3b;
  --c-blue-vest: #3e4233;
  --c-blue-skin: #c99877;
  --c-red-shirt: #8c7b5d;
  --c-red-pants: #75684f;
  --c-red-vest: #5b5040;
  --c-red-skin: #a8785a;
  --c-gear: #2a2826;
  --c-glove: #6a5a46;
  --c-glove-pad: #3a332b;
  --c-glove-seam: #2b2621;
  --c-eye-white: #e8e2d8;
  --c-face-ink: #1d1a19;
  --c-blue-hair: #3a2c22;
  --c-red-hair: #1f1a17;
  --c-iris: #4a5a4c;
  --c-lips: #9a5a4c;
  --c-skin-warm: #c4503c;

  /* Knife and effects */
  --c-blade: #c9ced2;
  --c-handle: #2b241f;
  --c-guard: #3a3936;
  --c-spark: #ffc861;
  --c-flash: #ffffff;
  --c-dust: #8d8574;
  --c-dust-light: #b9b09c;
  --c-puff: #d8d0bf;

  /* Jump pads: steel base, glowing ring and launch sparks */
  --c-pad-base: #3b3d3c;
  --c-pad: #4fd6c4;
  --c-pad-core: #d9fff8;

  /* Weapons: gun metal, polymer, optics, bow and arrows */
  --c-gunmetal: #3a3c40;
  --c-bolt: #55585c;
  --c-polymer: #34362f;
  --c-lens: #1d3340;
  --c-receiver: #2f3134;
  --c-gun-tan: #8c7a5b;
  --c-cartridge: #b8903e;
  --c-shell-hull: #8a2a22;
  --c-optic-glass: #a8d0dc;
  --c-bow-limb: #4a3322;
  --c-bow-riser: #7a5434;
  --c-grip-wrap: #3a2f26;
  --c-bowstring: #ddd3bd;
  --c-arrow-shaft: #2b2a28;
  --c-fletch: #c4532f;

  /* Handguns and heavy weapons: blued steel, anodized aluminium,
     walnut, brass, painted
     tubes and tanks, shotgun hulls, sight inserts and the pilot flame */
  --c-gun-blued: #2a2d33;
  --c-gun-alu: #3b3e42;
  --c-gun-walnut: #7a4e2e;
  --c-gun-brass: #c39a52;
  --c-gun-olive: #555c3c;
  --c-gun-fuel: #8a3226;
  --c-gun-hull: #9c2f25;
  --c-gun-glass: #8fb7c9;
  --c-gun-tritium: #a8ff7a;
  --c-pilot: #5aa2ff;
  --c-pilot-core: #e6f2ff;
  --c-pilot-clear: rgba(90, 162, 255, 0);

  /* Utilities: grenade, smoke canister, medkit, sight dot, blast, smoke */
  --c-grenade: #4d5236;
  --c-canister: #5d625c;
  --c-medkit: #6e2a22;
  --c-medkit-mark: #e8e2d4;
  --c-red-dot: #ff3b2a;
  --c-blast: #ffb25c;
  --c-smoke: rgba(140, 138, 130, 0.95);
  --c-smoke-clear: rgba(140, 138, 130, 0);
  --c-soot: #3a3632;
  --hud-veil: rgba(132, 130, 123, 0.97);

  /* Detailed blades, clubs, bows and utilities: coatings, wood, wraps,
     limb laminate, fletching, grenade and canister paint, pouch fabric */
  --c-blade-coat: #6f757d;
  --c-blade-edge: #e9eef2;
  --c-forged: #7a7c80;
  --c-guard-steel: #3d4146;
  --c-steel-sky: #eef2f6;
  --c-steel-horizon: #9aa2ab;
  --c-steel-band: #2e3236;
  --c-steel-ground: #5d6268;
  --c-steel-box: #ffffff;
  --c-brass: #b38f5a;
  --c-tsuba: #2b2826;
  --c-tsuka-ito: #23262f;
  --c-samegawa: #e4dfd0;
  --c-hickory: #a8865f;
  --c-leather: #5c3d27;
  --c-paracord: #55603f;
  --c-machete-scale: #5a3826;
  --c-bat-wood: #d9bd90;
  --c-bat-stain: #6e4126;
  --c-grip-tape: #232324;
  --c-bow-alloy: #454a50;
  --c-bow-grip: #6e4529;
  --c-limb-glass: #1c1d1f;
  --c-limb-core: #c8a676;
  --c-fletch-cock: #e8e3d5;
  --c-arrow-wrap: #ded6c4;
  --c-nock: #d6582f;
  --c-grenade-band: #c4a23b;
  --c-canister-band: #d9d3c3;
  --c-canister-print: #232320;
  --c-webbing: #2b2c29;
  --c-zipper: #171716;

  /* Shot effects: muzzle flash, tracer and scope glint */
  --c-muzzle: #ffc56b;
  --c-muzzle-core: #fff4d6;
  --c-muzzle-clear: rgba(255, 197, 107, 0);
  --c-tracer: #ffe0a3;
  --c-glint: #fff6e0;
  --c-glint-clear: rgba(255, 246, 224, 0);

  /* Map shared: windows, doors, cloth and props */
  --c-window-dark: #17150f;
  --c-window-lit: #ffbf6e;
  --c-shutter-a: #3d7a80;
  --c-shutter-b: #4d6694;
  --c-shutter-c: #7a5636;
  --c-awning-a: #9c3b2a;
  --c-awning-b: #d4c39c;
  --c-awning-c: #2e6a6c;
  --c-produce-a: #d9822b;
  --c-produce-b: #7aa13a;
  --c-produce-c: #b4342a;
  --c-produce-d: #d8b13a;
  --c-beam: #6b4a30;
  --c-clay: #a8643f;
  --c-tank: #2c2e30;
  --c-rug-base: #b4b4b4;
  --c-rug-ink: #3c3c3c;
  --c-rug-light: #f2f2f2;
  --c-rug-a: #a8322a;
  --c-rug-b: #34558f;
  --c-rug-c: #c08a2a;

  /* Desert town */
  --c-sand: #caa877;
  --c-sand-path: #b49670;
  --c-adobe: #c9a27a;
  --c-adobe-warm: #bf8f66;
  --c-adobe-pale: #d8c3a0;
  --c-adobe-trim: #a88462;
  --c-palm-trunk: #7a6450;
  --c-palm-leaf: #5f7a3a;
  --c-desert-sun: #fff0d4;
  --c-desert-hemi-sky: #cfd8dc;
  --c-desert-hemi-ground: #b08a5c;
  --c-desert-sky-top: #6f97b8;
  --c-desert-sky-horizon: #eadcbc;
  --c-desert-haze: #e4d0a8;
  --c-desert-below: #a88a62;
  --c-desert-outside: #c4a172;
  --c-desert-skyline: #c9ab84;
  --c-desert-dome: #d2baa0;
  --c-desert-dunes: #d0ab76;

  /* Snow outpost */
  --c-snow: #e9eff5;
  --c-pine: #8a6a4a;
  --c-pine-dark: #4a3626;
  --c-pine-bark: #3d2c20;
  --c-pine-needle: #2a3d2c;
  --c-rock: #8e8a83;
  --c-bunker: #9a9890;
  --c-snow-sun: #ffd3a8;
  --c-snow-hemi-sky: #a9bcd6;
  --c-snow-hemi-ground: #c8d0dc;
  --c-snow-sky-top: #5b7ea6;
  --c-snow-sky-horizon: #ccd8e6;
  --c-snow-haze: #b9c8da;
  --c-snow-below: #8a97a8;
  --c-snow-outside: #dfe6ee;
  --c-snow-peaks: #59606b;
  --c-snow-caps: #eef2f6;
  --c-snow-flake: #ffffff;

  /* Night docks */
  --c-asphalt: #3a3c3f;
  --c-quay: #7b7a76;
  --c-warehouse: #4f5a5c;
  --c-box-red: #7a2f26;
  --c-box-blue: #2d4a6a;
  --c-box-green: #3e5a3a;
  --c-box-orange: #a8562a;
  --c-box-grey: #6a6e70;
  --c-hazard: #c9a227;
  --c-bollard: #2a2a2a;
  --c-line-paint: #c9b04a;
  --c-docks-moon: #9fb4d6;
  --c-docks-hemi-sky: #4a5a7a;
  --c-docks-hemi-ground: #2a2c32;
  --c-docks-sky-top: #0c1018;
  --c-docks-sky-horizon: #4a3a32;
  --c-docks-haze: #2a2c30;
  --c-docks-below: #101214;
  --c-docks-outside: #1c1d1f;
  --c-docks-skyline: #15181d;
  --c-docks-city-lit: #ffc27a;
  --c-water: #0e1418;
  --c-crane: #6b5a2a;
  --c-crane-light: #ff3a2a;
  --c-ship: #1e2226;
  --c-ship-house: #8a8c8a;
  --c-ship-cargo: #3a3030;
  --c-lamp-sodium: #ffb35c;
  --c-rain: #a8b4c4;

  /* HUD */
  --hud-text: #ebe7dc;
  --hud-dim: rgba(235, 231, 220, 0.6);
  --hud-line: rgba(235, 231, 220, 0.25);
  --hud-ink: #16150f;
  --hud-shadow: rgba(0, 0, 0, 0.6);
  --hud-panel: rgba(16, 17, 14, 0.5);
  --hud-you: #7aa6d6;
  --hud-bot: #d66a50;
  --hud-hp: #a9c97a;
  --hud-head: #ff6a3d;
  --hud-backstab: #b58cff;
  --hud-card: rgba(16, 17, 14, 0.55);
  --hud-card-picked: rgba(217, 173, 92, 0.18);
  --hud-menu: #1b1c18;
  --hud-cheat: #e86bff;
  --hud-cheat-bg: rgba(34, 10, 40, 0.65);
  --hud-menu-bg: rgba(10, 10, 8, 0.72);
  --scope-black: #050505;
  --scope-ink: rgba(8, 8, 8, 0.9);
  --hud-accent: #d9ad5c;
  --hud-hit: #ffffff;
  --hud-hurt: rgba(170, 20, 10, 0.5);
  --sheet-veil: rgba(8, 8, 6, 0.6);
  --book-cover: #5a3b26;
  --book-cover-dark: #2e1e13;
  --book-page: #efe6d0;
  --book-page-shade: #cdbf9f;
  --book-ink: #2a241b;
  --book-ink-dim: rgba(42, 36, 27, 0.65);
  --book-rule: rgba(42, 36, 27, 0.22);
  --book-accent: #8a2f1f;
  --overlay-bg: linear-gradient(180deg, rgba(12, 12, 10, 0.25),
    rgba(12, 12, 10, 0.7));

  --font: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --fs-xs: 0.68rem;
  --fs-s: 0.78rem;
  --fs-m: 1rem;
  --fs-l: 1.5rem;
  --fs-xl: 2.6rem;
  --fs-title: clamp(2.4rem, 7vw, 5rem);
  --fs-countdown: 4rem;
  --track: 0.18em;
  --gap: 0.75rem;
  --radius: 2px;
  --line: 1px solid var(--hud-line);

  /* Dropzone: scene pieces (read by dropzone.js) and its HUD */
  --dz-white: #ffffff;
  --dz-barge: #4a5157;
  --dz-barge-trim: #2f3438;
  --dz-engine: #7fd8ff;
  --dz-canopy: #e0663a;
  --dz-sky-chute: #f2c14e;
  --dz-crate: #3b4a5a;
  --dz-crate-lid: #55697d;
  --dz-crate-glow: #2b6fb3;
  --dz-shield: #3fa9ff;
  --dz-kit: #e9e4d8;
  --dz-ammo-light: #c9a646;
  --dz-ammo-heavy: #6d8a4a;
  --dz-ammo-shells: #b5482f;
  --dz-ammo-rockets: #5a5f66;
  --dz-cover: #b78a55;
  --dz-cover-worn: #8c6a44;
  --dz-cover-weak: #5e4a35;
  --dz-ghost: #7fd8ff;
  --dz-ghost-bad: #ff5a4a;
  --dz-static: rgba(176, 92, 255, 0.85);
  --dz-static-core: rgba(214, 160, 255, 0.95);
  --dz-static-fade: rgba(120, 40, 220, 0);
  --dz-static-line: rgba(255, 255, 255, 0.35);
  --dz-veil: rgba(110, 30, 190, 0.32);
  --dz-map-land: rgba(196, 168, 120, 0.85);
  --dz-map-place: rgba(90, 64, 40, 0.9);
  --dz-map-next: rgba(255, 255, 255, 0.9);
  --dz-map-barge: rgba(127, 216, 255, 0.9);
  --dz-panel: rgba(16, 17, 14, 0.55);
  --dz-gain: #f2c14e;
  --dz-win: #f2c14e;
  --dz-lose: #e8735a;
  --fs-dz-result: clamp(2rem, 6vw, 3.6rem);
  --fs-dz-place: clamp(1.4rem, 4vw, 2.2rem);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--c-haze);
  color: var(--hud-text);
  font-family: var(--font);
  user-select: none;
}

.stage, .stage canvas {
  position: fixed;
  inset: 0;
  display: block;
}

.hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  text-shadow: 0 1px 2px var(--hud-shadow);
}

/* Shared panel look: thin outline over a translucent dark plate */

.scoreboard, .vitals, .weapon, kbd {
  background: var(--hud-panel);
  border: var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(3px);
}

/* Scoreboard */

.scoreboard {
  position: absolute;
  top: var(--gap);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.3rem 1.1rem;
}

.side {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-transform: uppercase;
}

.side__name {
  font-size: var(--fs-xs);
  letter-spacing: var(--track);
  color: var(--hud-dim);
}

.side__score { font-size: var(--fs-l); font-weight: 500; }
.side--you .side__score { color: var(--hud-you); }
.side--bot .side__score { color: var(--hud-bot); }

.scoreboard__sep {
  padding: 0 0.9rem;
  border-inline: var(--line);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-dim);
}

/* Bars */

.bar {
  --fill: 1;
  position: relative;
  height: 4px;
  background: var(--hud-line);
  overflow: hidden;
}

.bar__fill {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(var(--fill));
  transition: transform 0.12s ease-out;
}

.bar--enemy {
  position: absolute;
  top: calc(var(--gap) + 3rem);
  left: 50%;
  width: 11rem;
  transform: translateX(-50%);
}

.bar--enemy .bar__fill { background: var(--hud-bot); }
.bar--hp .bar__fill { background: var(--hud-hp); }
.bar--weapon .bar__fill { background: var(--hud-accent); transition: none; }

/* Center markers */

.crosshair, .hitmarker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.crosshair {
  --spread: 0;
  width: calc(18px + var(--spread) * 400px);
  height: calc(18px + var(--spread) * 400px);
  background:
    linear-gradient(var(--hud-text) 0 0) 50% 0 / 2px 6px no-repeat,
    linear-gradient(var(--hud-text) 0 0) 50% 100% / 2px 6px no-repeat,
    linear-gradient(var(--hud-text) 0 0) 0 50% / 6px 2px no-repeat,
    linear-gradient(var(--hud-text) 0 0) 100% 50% / 6px 2px no-repeat;
  filter: drop-shadow(0 0 1px var(--hud-shadow));
}

.hitmarker {
  width: 26px;
  height: 26px;
  opacity: 0;
  background:
    linear-gradient(45deg, transparent 46%, var(--hud-hit) 46%,
      var(--hud-hit) 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--hud-hit) 46%,
      var(--hud-hit) 54%, transparent 54%);
  mask: radial-gradient(circle, transparent 40%, black 41%);
}

.hitmarker.is-on { animation: blip 0.25s ease-out; }
.hitmarker--head, .hitmarker--backstab { width: 34px; height: 34px; }
.hitmarker--head { --hud-hit: var(--hud-head); }
.hitmarker--backstab { --hud-hit: var(--hud-backstab); }
.hitmarker--head.is-on, .hitmarker--backstab.is-on { animation-duration: 0.5s; }

/* Hit label: a word under the crosshair for headshots and backstabs */

.hit-label {
  position: absolute;
  top: calc(50% + 2.2rem);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  font-size: var(--fs-m);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
}

.hit-label--head { color: var(--hud-head); }
.hit-label--backstab { color: var(--hud-backstab); }
.hit-label.is-on { animation: blip 0.9s ease-in; }

/* Scope: a black ring around the lens with a fine reticle and mil dots */

.scope {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 0 calc(42vmin - 6px),
      var(--scope-ink) calc(42vmin - 5px) 42vmin,
      var(--scope-black) calc(42vmin + 1px));
}

.scope[hidden] { display: none; }

.scope::before, .scope::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.scope::before {
  width: 84vmin;
  height: 84vmin;
  background:
    linear-gradient(var(--scope-ink) 0 0) 50% 50% / 100% 1px no-repeat,
    linear-gradient(var(--scope-ink) 0 0) 50% 50% / 1px 100% no-repeat,
    linear-gradient(var(--scope-ink) 0 0) 0 50% / 30% 4px no-repeat,
    linear-gradient(var(--scope-ink) 0 0) 100% 50% / 30% 4px no-repeat,
    linear-gradient(var(--scope-ink) 0 0) 50% 100% / 4px 30% no-repeat;
}

.scope::after {
  width: 24vmin;
  height: 24vmin;
  background: radial-gradient(circle, var(--scope-ink) 0 1.5px,
    transparent 2px) 50% 50% / 4vmin 4vmin;
  mask:
    linear-gradient(black 0 0) 50% 50% / 100% 4px no-repeat,
    linear-gradient(black 0 0) 50% 50% / 4px 100% no-repeat;
}

.vignette {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 45%,
    var(--hud-hurt) 100%);
}

.vignette.is-on { animation: blip 0.45s ease-out; }

@keyframes blip {
  from { opacity: 1; }
  to { opacity: 0; }
}

.banner {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2rem 1.4rem;
  border-block: var(--line);
  font-size: var(--fs-xl);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track);
  white-space: nowrap;
}

.banner--win { color: var(--hud-you); }

/* Round start countdown */

.countdown {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.6rem;
}

.countdown[hidden] { display: none; }

.countdown__num {
  font-size: var(--fs-countdown);
  font-weight: 700;
  line-height: 1;
  color: var(--hud-accent);
}

.countdown__hint {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-dim);
}
.banner--lose { color: var(--hud-bot); }

/* Vitals */

.vitals {
  position: absolute;
  left: calc(var(--gap) * 2);
  bottom: calc(var(--gap) * 2);
  display: grid;
  gap: 0.55rem;
  width: min(17rem, 60vw);
  padding: 0.6rem var(--gap);
}

.vitals__row {
  display: grid;
  grid-template-columns: 3.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.6rem;
}

.vitals__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-dim);
}

.vitals__value { font-size: var(--fs-m); text-align: right; }

/* Weapon panel: slots, name, ammo and a meter for draw, reload and
   readiness */

.weapon {
  position: absolute;
  right: calc(var(--gap) * 2);
  bottom: calc(var(--gap) * 2);
  display: grid;
  gap: 0.45rem;
  width: min(15rem, 50vw);
  padding: 0.6rem var(--gap);
}

.slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hud-dim);
}

.slot { display: flex; align-items: center; gap: 0.3rem; }
.slot.is-active { color: var(--hud-accent); }
.slot.is-empty, .slot.is-spent { opacity: 0.4; }

/* Utility slot: an icon and the charges left instead of the name */

.slot--utility .slot__name { display: none; }

.slot__icon {
  width: 0.9rem;
  height: 0.9rem;
  background: currentColor;
}

.slot__icon:not([data-icon]), .slot__icon[data-icon=''] { display: none; }

.slot__icon[data-icon='grenade'] {
  mask:
    radial-gradient(circle at 50% 62%, black 0 38%, transparent 40%),
    linear-gradient(black 0 0) 50% 8% / 34% 22% no-repeat;
}

.slot__icon[data-icon='smoke'] {
  mask:
    linear-gradient(black 0 0) 50% 100% / 52% 72% no-repeat,
    linear-gradient(black 0 0) 50% 6% / 30% 20% no-repeat;
}

.slot__icon[data-icon='medkit'] {
  mask:
    linear-gradient(black 0 0) 50% 50% / 32% 90% no-repeat,
    linear-gradient(black 0 0) 50% 50% / 90% 32% no-repeat;
}

/* Smoke veil: fills the view while the camera is inside a cloud */

.smoke-veil {
  --veil: 0;
  position: absolute;
  inset: 0;
  background: var(--hud-veil);
  opacity: var(--veil);
}

.weapon__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
}

.weapon__name {
  font-size: var(--fs-s);
  text-transform: uppercase;
  letter-spacing: var(--track);
}

.weapon__ammo {
  font-size: var(--fs-l);
  font-weight: 500;
  white-space: nowrap;
}

/* Overlay */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: var(--gap);
  padding: 1rem;
  overflow-y: auto;
  background: var(--overlay-bg);
  text-align: center;
  text-shadow: 0 2px 8px var(--hud-shadow);
}

.overlay[hidden] { display: none; }

.overlay__title {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.overlay__sub {
  margin: 0;
  font-size: var(--fs-s);
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-dim);
}

.overlay__button {
  margin-top: var(--gap);
  padding: 0.6rem 3.2rem;
  font: inherit;
  font-size: var(--fs-m);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-ink);
  background: var(--hud-accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.overlay__button:hover { filter: brightness(1.1); }

kbd {
  padding: 0.1rem 0.4rem;
  font-family: inherit;
  color: var(--hud-text);
}

/* Loadout menu: one tab per slot, weapon cards to pick from */

.menu {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--hud-menu-bg);
  text-shadow: 0 1px 2px var(--hud-shadow);
}

.menu[hidden] { display: none; }

.menu__panel {
  display: grid;
  justify-items: center;
  gap: var(--gap);
  width: min(48rem, 100%);
  padding: 1.25rem;
  background: var(--hud-menu);
  border: var(--line);
  border-radius: var(--radius);
}

.menu__title {
  margin: 0;
  font-size: var(--fs-l);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
}

.menu__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.tab {
  padding: 0.4rem 1rem;
  font: inherit;
  font-size: var(--fs-s);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hud-dim);
  background: var(--hud-card);
  border: var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.tab:hover { color: var(--hud-text); }

.tab.is-active {
  color: var(--hud-accent);
  border-color: var(--hud-accent);
}

.menu__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  min-height: 7rem;
  max-height: 60vh;
  overflow-y: auto;
}

.menu__hint {
  margin: 0;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hud-dim);
}

.setting__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-dim);
}

.loadout__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.card {
  display: grid;
  gap: 0.35rem;
  width: min(14rem, 80vw);
  padding: 0.8rem 1rem;
  font: inherit;
  text-align: left;
  color: var(--hud-text);
  background: var(--hud-card);
  border: var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.card:hover { border-color: var(--hud-dim); }

.card.is-picked {
  background: var(--hud-card-picked);
  border-color: var(--hud-accent);
}

.card__name {
  font-size: var(--fs-m);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.card.is-picked .card__name { color: var(--hud-accent); }

.card:disabled {
  cursor: default;
  opacity: 0.45;
}

.card:disabled:hover { border-color: var(--hud-line); }

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.card__key:empty { display: none; }

.card__tag {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hud-accent);
}

.card__tag--beta {
  margin-left: auto;
  padding: 0 0.3rem;
  border: 1px solid var(--hud-accent);
  border-radius: var(--radius);
}

.card:not(.is-beta) .card__tag--beta,
.card:not(:disabled) .card__tag--soon,
.card.is-locked .card__tag--soon,
.card__tag--price:empty,
.card:disabled .card__info:empty { display: none; }

.card__info {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--hud-dim);
}

/* Overlay tools: the field manual and settings buttons, and the sheets
   they open over the overlay */

.overlay__version {
  position: absolute;
  bottom: 0.75rem;
  left: 1rem;
  margin: 0;
  font-size: var(--fs-xs);
  letter-spacing: var(--track);
  color: var(--hud-dim);
}

.overlay__tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin-top: var(--gap);
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1.1rem;
  font: inherit;
  font-size: var(--fs-s);
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-text);
  background: var(--hud-card);
  border: var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.tool:hover { border-color: var(--hud-accent); }

.tool__book {
  width: 0.8rem;
  height: 1rem;
  background: var(--book-cover);
  border-left: 3px solid var(--book-accent);
  border-radius: 1px 2px 2px 1px;
  box-shadow: inset -2px 0 0 var(--book-page);
}

.tool__dial {
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: radial-gradient(currentColor 0 22%, transparent 28%);
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--sheet-veil);
  text-shadow: none;
}

.sheet[hidden] { display: none; }

.sheet__card {
  display: grid;
  gap: var(--gap);
  width: min(46rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1.25rem 1.5rem;
  background: var(--hud-menu-bg);
  border: var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
}

.sheet__card .settings { margin-top: 0; }

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sheet__title {
  margin: 0;
  font-size: var(--fs-m);
  text-transform: uppercase;
  letter-spacing: var(--track);
}

.sheet__close {
  position: relative;
  width: 2rem;
  height: 2rem;
  color: var(--hud-text);
  background: none;
  border: var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.sheet__close::before,
.sheet__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
}

.sheet__close::after { transform: rotate(-45deg); }

/* Field manual: a leather book open on two pages */

.book {
  position: relative;
  width: min(54rem, 100%);
  padding: 1rem 1rem 0.75rem;
  color: var(--book-ink);
  text-align: left;
  background: var(--book-cover);
  border: 2px solid var(--book-cover-dark);
  border-radius: 6px;
  box-shadow: 0 1.5rem 3rem var(--hud-shadow);
}

.book__close {
  position: absolute;
  top: -0.9rem;
  right: -0.9rem;
  z-index: 1;
  color: var(--book-page);
  background: var(--book-cover-dark);
  border-radius: 50%;
}

.book__spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 21rem;
  background: linear-gradient(90deg, var(--book-page) 0 47%,
    var(--book-page-shade) 50%, var(--book-page) 53% 100%);
  border-radius: 3px;
}

.book__spread[hidden] { display: none; }

.book__page { padding: 1.5rem 1.75rem; }

.book__chapter {
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  font-size: var(--fs-l);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--book-accent);
  border-bottom: 2px solid var(--book-rule);
}

.book__keys {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.7rem 1rem;
  margin: 0;
  font-size: var(--fs-s);
}

.book__keys dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.book__keys dd { margin: 0; }

.book kbd {
  display: inline-block;
  margin: 0.1rem 0;
  color: var(--book-ink);
  background: var(--book-page-shade);
  border: 1px solid var(--book-rule);
  border-bottom-width: 2px;
  border-radius: var(--radius);
}

.book__tip {
  margin: 1.25rem 0 0;
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--book-ink-dim);
}

.book__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding-top: 0.6rem;
  font-size: var(--fs-s);
  color: var(--book-page);
}

.book__turn {
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  background: none;
  border: 1px solid var(--book-page-shade);
  border-radius: 50%;
  cursor: pointer;
}

.book__turn::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 0.55rem;
  height: 0.55rem;
  margin: auto;
  border: solid var(--book-page);
  border-width: 0 2px 2px 0;
  transform: translateX(-15%) rotate(-45deg);
}

.book__turn--back::before { transform: translateX(15%) rotate(135deg); }

.book__turn:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (max-width: 40rem) {
  .book__spread {
    grid-template-columns: 1fr;
    background: var(--book-page);
  }
}

/* Settings: sliders, the aim mode select and checkboxes */

.settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.75rem;
  margin-top: var(--gap);
}

.setting {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.setting__range {
  width: 10rem;
  accent-color: var(--hud-accent);
  cursor: pointer;
}

.setting__check {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--hud-accent);
  cursor: pointer;
}

.setting__select {
  padding: 0.15rem 0.4rem;
  font: inherit;
  font-size: var(--fs-s);
  color: var(--hud-text);
  background: var(--hud-card);
  border: var(--line);
  border-radius: var(--radius);
  accent-color: var(--hud-accent);
  cursor: pointer;
}

.setting__select option { background: var(--hud-menu); }

.setting__value {
  min-width: 3rem;
  font-size: var(--fs-s);
  color: var(--hud-text);
}

/* Assist and cheat settings in a collapsible section, and the HUD badge
   while cheats are on */

.cheats {
  display: grid;
  justify-items: center;
  margin-top: var(--gap);
}

.cheats__summary {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-cheat);
  cursor: pointer;
}

.settings--cheats {
  padding-top: var(--gap);
  border-top: var(--line);
}

.setting:has(:disabled) {
  opacity: 0.45;
  cursor: default;
}

.cheat-badge {
  position: absolute;
  top: var(--gap);
  left: var(--gap);
  padding: 0.2rem 0.6rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-cheat);
  background: var(--hud-cheat-bg);
  border: 1px solid var(--hud-cheat);
  border-radius: var(--radius);
  backdrop-filter: blur(3px);
}

.cheat-badge[hidden] { display: none; }

/* Frame rate counter under the progress plate, switched on in Settings */

.fps {
  position: absolute;
  top: calc(var(--gap) * 4.4);
  left: calc(var(--gap) * 2);
  min-width: 2.6rem;
  padding: 0.1rem 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track);
  text-align: center;
  color: var(--hud-text);
  background: var(--hud-panel);
  border: var(--line);
  border-radius: var(--radius);
}

.fps::after {
  content: ' FPS';
  color: var(--hud-dim);
}

.fps[hidden] { display: none; }

/* Map cards: a painted thumbnail per map with its name and mood, shown
   in the start overlay pick and the round-start vote */

.map-pick {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin-top: var(--gap);
}

.map-pick[hidden] { display: none; }

.map-pick__label, .vote__title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-dim);
}

.map-pick__cards, .vote__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.vote {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  pointer-events: auto;
}

.vote[hidden] { display: none; }

.map-card {
  position: relative;
  display: grid;
  gap: 0.2rem;
  width: 9.5rem;
  padding: 0.35rem 0.35rem 0.45rem;
  font: inherit;
  text-align: left;
  color: var(--hud-text);
  background: var(--hud-card);
  border: var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.map-card:hover { border-color: var(--hud-dim); }

.map-card.is-picked {
  background: var(--hud-card-picked);
  border-color: var(--hud-accent);
}

.map-card__thumb {
  position: relative;
  height: 4.2rem;
  border-radius: var(--radius);
  background: var(--thumb);
}

/* Vote cards stay small beside the countdown */

.vote .map-card {
  width: 7rem;
  gap: 0.1rem;
  padding: 0.25rem 0.25rem 0.3rem;
}

.vote .map-card__thumb { height: 2.2rem; }
.vote .map-card__name { font-size: var(--fs-xs); }

.map-card__key {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
}

.map-card__key:empty { display: none; }

.map-card__name {
  font-size: var(--fs-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.map-card.is-picked .map-card__name { color: var(--hud-accent); }

.map-card__mood {
  font-size: var(--fs-xs);
  color: var(--hud-dim);
}

.map-card__tags {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: flex;
  gap: 0.25rem;
}

.map-card__tag {
  display: none;
  padding: 0 0.3rem;
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hud-ink);
  text-shadow: none;
  border-radius: var(--radius);
}

.vote .is-current .map-card__tag--now {
  display: block;
  background: var(--hud-text);
}

.vote .is-picked .map-card__tag--you {
  display: block;
  background: var(--hud-you);
}

.vote .has-bot .map-card__tag--bot {
  display: block;
  background: var(--hud-bot);
}

/* Thumbnails: skyline bands over the ground, sky behind, in each map's
   own colors */

.map-card[data-map='yard'] {
  --thumb:
    linear-gradient(90deg, transparent 12%, var(--c-container-a) 12% 30%,
      transparent 30% 44%, var(--c-deck) 44% 58%, transparent 58% 72%,
      var(--c-container-b) 72% 88%, transparent 88%) 0 40% / 100% 30%
      no-repeat,
    linear-gradient(transparent 54%, var(--c-floor) 54%),
    linear-gradient(var(--c-facade) 0 0) 0 30% / 100% 20% no-repeat,
    linear-gradient(var(--c-sky-top), var(--c-sky-horizon) 40%,
      var(--c-haze));
}

.map-card[data-map='desert'] {
  --thumb:
    linear-gradient(90deg, transparent 8%, var(--c-adobe-warm) 8% 26%,
      transparent 26% 38%, var(--c-adobe-pale) 38% 64%,
      transparent 64% 74%, var(--c-adobe) 74% 92%, transparent 92%)
      0 52% / 100% 34% no-repeat,
    linear-gradient(transparent 58%, var(--c-sand) 58%),
    linear-gradient(var(--c-desert-dunes) 0 0) 0 52% / 100% 12% no-repeat,
    linear-gradient(var(--c-desert-sky-top), var(--c-desert-sky-horizon) 55%,
      var(--c-desert-haze));
}

.map-card[data-map='snow'] {
  --thumb:
    linear-gradient(90deg, transparent 30%, var(--c-pine-dark) 30% 46%,
      transparent 46% 66%, var(--c-bunker) 66% 84%, transparent 84%)
      0 52% / 100% 22% no-repeat,
    linear-gradient(transparent 58%, var(--c-snow) 58%),
    linear-gradient(to top right, var(--c-snow-peaks) 50%, transparent 50%)
      0 45% / 50% 40% no-repeat,
    linear-gradient(to top left, var(--c-snow-peaks) 50%, transparent 50%)
      100% 45% / 55% 46% no-repeat,
    linear-gradient(var(--c-snow-sky-top), var(--c-snow-sky-horizon) 60%,
      var(--c-snow-haze));
}

.map-card[data-map='docks'] {
  --thumb:
    radial-gradient(circle at 70% 30%, var(--c-lamp-sodium) 0 3%,
      transparent 22%),
    linear-gradient(90deg, transparent 10%, var(--c-box-red) 10% 28%,
      transparent 28% 34%, var(--c-box-blue) 34% 52%, transparent 52% 62%,
      var(--c-box-green) 62% 82%, transparent 82%) 0 72% / 100% 30%
      no-repeat,
    linear-gradient(transparent 62%, var(--c-asphalt) 62%),
    linear-gradient(var(--c-docks-skyline) 0 0) 0 58% / 100% 22% no-repeat,
    linear-gradient(var(--c-docks-sky-top), var(--c-docks-sky-horizon));
}

/* The view dims while the next map is built between rounds */

.stage { transition: filter 0.4s ease-out; }
.stage.is-dim { filter: brightness(0); }