/* ---------------------------------------------------------------------------
   WAFFLE WARFARE — HUD and menus.

   The rule for every panel here: it sits over a bright, painterly 3D scene, so
   it has to read at a glance without covering anything you need to shoot. That
   means dark plates with hard clipped corners, thin rules, monospaced numerals,
   and colour used only where it means something — amber for you, red for them,
   green for armour.
--------------------------------------------------------------------------- */

:root {
  --ink: #100c10;
  --plate: rgba(16, 12, 14, 0.74);
  --plate-solid: #16121a;
  --line: rgba(255, 232, 200, 0.22);
  --text: #f5ecdd;
  --dim: #b3a693;
  --amber: #ffb03a;
  --gold: #ffd166;
  --hot: #ff6a1f;
  --red: #ff3f34;
  --green: #7dffb2;
  --blue: #9fd0ff;
  --clip: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --display: 'Bungee', var(--sans);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   THE PLATE

   Every HUD element that carries information sits on one of these, and nothing
   else does. Before this the wave counter had a left rule and a clipped corner,
   the vitals had a left rule and no scrim, the ammo had no container at all and
   the fort buttons had a full border — five widgets, five different objects, on
   top of a bright painted scene that ate all of them.

   One shape: a dark scrim with a hairline, a 3px accent rule down the left, and
   the same notched corner. The accent says WHAT it is (red = you, amber =
   neutral, green = safe, gold = money) and that is the only thing that varies.
--------------------------------------------------------------------------- */
.plate {
  position: relative;
  background:
    linear-gradient(180deg, rgba(18, 13, 19, .86), rgba(10, 7, 12, .93));
  border: 1px solid rgba(255, 232, 200, .10);
  border-left: 3px solid var(--amber);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .45);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}
.plate-red { border-left-color: var(--red); }
.plate-amber { border-left-color: var(--amber); }
.plate-green { border-left-color: var(--green); }
.plate-gold { border-left-color: var(--gold); }

/* One label style. The HUD had 9px, 9.5px, 10px and 10.5px labels doing the
   same job in four places; at 9px over a painted scene they are texture, not
   text. */
.lbl,
.wh-label,
.vt-armnum em,
.wp-name span {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------------------------------------------------------------------------
   THE BUTTON

   The death card had three buttons in a row in three unrelated styles — a mint
   green one, an unstyled bordered one, and an orange display-font one. This is
   the only button in the game now; `primary` is the one thing you probably want
   and there is never more than one of it in a row.
--------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 232, 200, .07);
  border: 1px solid rgba(255, 232, 200, .2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.btn:hover:not(:disabled) { background: rgba(255, 232, 200, .13); border-color: var(--amber); color: var(--amber); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: default; }
.btn.primary {
  background: linear-gradient(180deg, #ffcf6b, var(--amber));
  border-color: #ffdf9a;
  color: #241505;
  font-weight: 700;
}
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffe3a0, #ffc257); color: #241505; }
.btn.danger { border-color: rgba(255, 63, 52, .45); color: #ff9a92; }
.btn.danger:hover:not(:disabled) { border-color: var(--red); color: var(--red); background: rgba(255, 63, 52, .12); }
.btn kbd {
  padding: 1px 5px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(0, 0, 0, .3);
  font-size: 9.5px;
}
.btn.primary kbd { background: rgba(0, 0, 0, .18); color: inherit; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #0b0a0c;
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: none;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

body.locked { cursor: none; }
body.menu { cursor: default; }

/* ── loading ─────────────────────────────────────────────── */
#loading {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 50% 40%, #241a1e 0%, #0d0a0c 70%);
  transition: opacity .5s ease;
}
#loading.gone { opacity: 0; pointer-events: none; }
#loading.failed .load-bar { display: none; }
.load-inner { text-align: center; width: min(420px, 82vw); }
.load-mark {
  position: relative;
  width: 92px; height: 92px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
}
.lm-ring, .lm-cross { position: absolute; inset: 0; }
.lm-ring {
  border: 2px solid rgba(255, 176, 58, .45);
  border-radius: 50%;
  border-top-color: var(--amber);
  animation: spin 1.5s linear infinite;
}
.lm-cross::before, .lm-cross::after {
  content: '';
  position: absolute;
  background: rgba(255, 63, 52, .8);
}
.lm-cross::before { left: 50%; top: 8%; width: 2px; height: 84%; transform: translateX(-50%); }
.lm-cross::after { top: 50%; left: 8%; height: 2px; width: 84%; transform: translateY(-50%); }
.lm-waffle { font-size: 34px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
@keyframes spin { to { transform: rotate(360deg); } }
#load-label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 12px;
}
.load-bar {
  height: 4px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.load-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--hot), var(--gold));
  transform: scaleX(.02);
  transform-origin: 0 50%;
  transition: transform .25s ease;
}
.load-fail-title { font-family: var(--display); font-size: 20px; margin: 6px 0; }
.load-fail-body { color: var(--dim); font-size: 14px; line-height: 1.5; }

/* ── title ───────────────────────────────────────────────── */
#title {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  opacity: 0;
  pointer-events: none;
  /* Lighter than it was. The card carries its own scrim now, so the backdrop
     only has to knock the scene back — not hide it. */
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(255, 106, 31, .18), transparent 70%),
    rgba(9, 8, 10, .58);
  transition: opacity .6s ease;
  overflow-y: auto;
}
#title.show { opacity: 1; pointer-events: auto; }
.title-card {
  width: min(1080px, 94vw);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 0;
  background: linear-gradient(150deg, rgba(20, 14, 22, .9), rgba(10, 7, 12, .95));
  border: 1px solid rgba(255, 232, 200, .12);
  clip-path: polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  backdrop-filter: blur(7px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}
.tc-main { padding: 34px 32px 24px; }
.tc-side {
  padding: 30px 30px 24px;
  border-left: 1px solid rgba(255, 232, 200, .1);
  background: rgba(0, 0, 0, .22);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
@media (max-width: 900px) {
  .title-card { grid-template-columns: minmax(0, 1fr); width: min(620px, 94vw); }
  .tc-side { border-left: 0; border-top: 1px solid rgba(255, 232, 200, .1); }
}
.title-kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 14px;
}
.tc-main { text-align: left; }
.tc-main .title-blurb { margin-left: 0; }
.title-logo {
  font-family: var(--display);
  font-size: clamp(38px, 8.5vw, 74px);
  line-height: .92;
  margin: 0 0 18px;
  letter-spacing: .01em;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .5);
}
.title-logo em {
  font-style: normal;
  color: var(--red);
  -webkit-text-stroke: 0;
}
.title-blurb {
  font-size: 15px;
  line-height: 1.6;
  color: #ded2c2;
  margin: 0 auto 22px;
  max-width: 46ch;
}
.title-blurb strong { color: var(--gold); }
.title-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-bottom: 4px; }
.title-secondary { display: flex; gap: 8px; }
.title-secondary .btn { flex: 1 1 0; padding: 11px 12px; font-size: 10.5px; }

#start {
  font-family: var(--display);
  font-size: 19px;
  padding: 15px 26px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(180deg, var(--hot), #d9421a);
  color: #fff6ea;
  box-shadow: 0 5px 0 #7f2409;
  clip-path: polygon(0 5px, 5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
}
#start:hover { filter: brightness(1.08); }
#start:active { transform: translateY(3px); box-shadow: 0 2px 0 #7f2409; }
#start svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.lo-glyph { font-size: 13px; line-height: 1; }
.hints {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  font-size: 11.5px;
  color: var(--dim);
}
/* `nowrap` on the row: a control and its label are one unit, and letting
   "call the wave in" break across the column edge read as truncation. */
.hints li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.title-foot { font-size: 11px; color: #7d7268; margin: 0; line-height: 1.5; }

kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .07);
  color: var(--text);
}

/* ── title: name, co-op, leaderboard ─────────────────────── */
.title-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.title-handle input,
.title-coop input {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  width: 150px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line);
  color: var(--text);
  text-align: center;
}
.title-handle input:focus,
.title-coop input:focus { outline: none; border-color: var(--amber); }

/* The side column already separates these with its own gap, so the old
   top-rules now draw a stray hairline above the first block with nothing
   above it. Rule BETWEEN, not before. */
.title-coop, .title-board { text-align: left; }
.tc-side > * + * {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 232, 200, .1);
}
.tc-head, .tb-head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--amber);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tb-head button {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  background: none;
  border: 0;
  color: var(--dim);
  cursor: pointer;
  text-decoration: underline;
}
.tb-head button:hover { color: var(--text); }
.tc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tc-row button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  padding: 9px 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
}
.tc-row button:hover { border-color: var(--amber); color: var(--gold); }
.tc-row input { width: 108px; }
.tc-or { font-family: var(--mono); font-size: 10px; color: var(--dim); }
.tc-status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--green);
  margin: 10px 0 0;
  min-height: 15px;
}
.tb-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  max-height: 132px;
  overflow-y: auto;
}
.tb-rows li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 3px 0;
  color: var(--dim);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.tb-rows li b { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tb-rows li .tb-score { color: var(--gold); }
.tb-rows li.mine { color: var(--amber); }
.tb-rows li.mine b { color: var(--amber); }
.tb-rows li.tb-empty { display: block; text-align: center; color: var(--dim); }
.tb-note { font-family: var(--mono); font-size: 10px; color: #7d7268; margin: 8px 0 0; }
.title-progress {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold);
  margin: 16px 0 0;
  letter-spacing: .06em;
}

/* ── co-op HUD ───────────────────────────────────────────── */
#coop-hud {
  position: relative;
  flex: 0 0 auto;
  background: var(--plate);
  border-left: 3px solid var(--blue);
  padding: 7px 11px 8px;
  font-family: var(--mono);
}
.ch-code { margin: 0 0 5px; font-size: 9.5px; letter-spacing: .18em; color: var(--dim); }
.ch-code b { color: var(--blue); font-size: 13px; letter-spacing: .22em; }
#coop-roster { list-style: none; margin: 0; padding: 0; font-size: 11px; }
#coop-roster li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  color: var(--dim);
}
#coop-roster li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex: 0 0 6px;
}
#coop-roster li.down { color: var(--red); }
#coop-roster li.down::before { background: var(--red); }
#coop-roster li.me { color: var(--text); }
#coop-roster li .ch-hp { margin-left: auto; opacity: .8; }

/* ── teammate nameplates ─────────────────────────────────── */
/* A courier is under three units tall in a dark scene full of conifers. Without
   a plate over their head you genuinely cannot find each other, so these are
   always drawn — clamped to the screen edge with an arrow when off camera. */
#nameplates { position: absolute; inset: 0; }
.mate {
  position: absolute;
  transform: translate(-50%, -100%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--mono);
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
}
.mate.on { display: flex; }
.mate-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 1px 6px;
  background: rgba(16, 12, 14, .62);
  border-bottom: 2px solid currentColor;
  white-space: nowrap;
}
.mate-bar {
  width: 46px;
  height: 3px;
  background: rgba(0, 0, 0, .6);
  overflow: hidden;
}
.mate-bar i {
  display: block;
  height: 100%;
  background: var(--green);
  transform-origin: 0 50%;
}
.mate.hurt .mate-bar i { background: var(--amber); }
.mate.low .mate-bar i { background: var(--red); }
.mate.down .mate-name {
  color: var(--red) !important;
  animation: pulse .5s ease-in-out infinite alternate;
}
.mate.down .mate-bar { display: none; }
.mate-tag {
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--red);
}
.mate.edge .mate-bar { display: none; }
.mate.edge .mate-name { font-size: 10px; opacity: .85; }
.mate-arrow { font-size: 10px; opacity: .9; }
.mate:not(.edge) .mate-arrow { display: none; }
.mate-dist { font-size: 9px; color: var(--dim); }
.mate:not(.edge) .mate-dist { display: none; }

#downed {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  background: radial-gradient(60% 50% at 50% 50%, rgba(180, 20, 12, .32), rgba(120, 10, 6, .68));
}
.dn-title {
  font-family: var(--display);
  font-size: clamp(24px, 5vw, 40px);
  color: #ffd9d2;
  margin: 0 0 8px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .5);
}
.dn-sub { font-family: var(--mono); font-size: 12px; color: #ffb9b0; margin: 0; }

/* ── how to play ─────────────────────────────────────────── */
#howto {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(8, 7, 9, .9);
  display: grid;
  place-items: start center;
  padding: 5vh 4vw;
  overflow-y: auto;
}
.ht-inner {
  width: min(700px, 94vw);
  background: var(--plate-solid);
  border: 1px solid var(--line);
  clip-path: var(--clip);
  padding: 30px 30px 24px;
}
.ht-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 8px;
}
.ht-title { font-family: var(--display); font-size: clamp(20px, 3.4vw, 28px); margin: 0 0 20px; line-height: 1.15; }
.ht-steps { margin: 0 0 24px; padding-left: 22px; color: #d8ccbc; }
.ht-steps li { margin-bottom: 12px; font-size: 14px; line-height: 1.62; }
.ht-steps b { color: var(--gold); }
.ht-steps em { font-style: normal; color: var(--amber); }
.ht-keys h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.ht-keys ul {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px 18px;
  font-size: 12.5px;
  color: var(--dim);
}
.ht-keys li { display: flex; align-items: center; gap: 6px; }
.ht-touch { font-size: 12px; color: #7d7268; }
.ht-close { margin-top: 20px; padding: 12px 26px; font-size: 12.5px; }
/* Anything still on the old bespoke treatment. `.btn` now owns every button in
   a panel; these two are the stragglers that are not inside one. */
.ar-close, #rotate-anyway {
  font-family: var(--display);
  font-size: 14px;
  padding: 12px 22px;
  border: 0;
  cursor: pointer;
  background: var(--amber);
  color: #241505;
  clip-path: polygon(0 5px, 5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
}
.ar-close:hover, #rotate-anyway:hover { filter: brightness(1.1); }

/* ── rotate ──────────────────────────────────────────────── */
#rotate {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: none;
  place-items: center;
  background: #0d0a0c;
  text-align: center;
  padding: 6vw;
}
#rotate.show { display: grid; }
.rot-phone {
  display: block;
  width: 96px; height: 56px;
  margin: 0 auto 20px;
  border: 3px solid var(--amber);
  border-radius: 8px;
  animation: tilt 2s ease-in-out infinite;
}
.rot-screen { display: block; width: 100%; height: 100%; background: rgba(255, 176, 58, .18); }
@keyframes tilt { 0%, 100% { transform: rotate(-90deg); } 50% { transform: rotate(0deg); } }
.rot-title { font-family: var(--display); font-size: 20px; margin: 26px 0 8px; }
.rot-body { color: var(--dim); font-size: 14px; margin: 0 0 18px; }
.rot-tip { color: #7d7268; font-size: 11.5px; margin-top: 16px; }

/* ── HUD shell ───────────────────────────────────────────── */
#hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  font-family: var(--mono);
  user-select: none;
  opacity: 0;
  transition: opacity .4s ease;
}
/* nothing on screen until you are actually in the fight */
body.playing #hud { opacity: 1; }
#hud button { pointer-events: auto; }

/* crosshair */
#crosshair {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  --gap: 8px;
}
#crosshair.hidden { opacity: 0; }
#crosshair i {
  position: absolute;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 2px rgba(0, 0, 0, .9);
  transition: transform .06s linear;
}
.ch-dot { width: 2px; height: 2px; transform: translate(-1px, -1px); }
.ch-l, .ch-r { width: 8px; height: 2px; top: -1px; }
.ch-t, .ch-b { width: 2px; height: 8px; left: -1px; }
.ch-l { right: var(--gap); }
.ch-r { left: var(--gap); }
.ch-t { bottom: var(--gap); }
.ch-b { top: var(--gap); }
.ch-ring {
  width: calc(var(--gap) * 2 + 14px);
  height: calc(var(--gap) * 2 + 14px);
  border: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: none !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%);
  left: 0; top: 0;
  display: none;
}
#crosshair[data-shape="ring"] .ch-ring { display: block; }
#crosshair[data-shape="dot"] .ch-l,
#crosshair[data-shape="dot"] .ch-r,
#crosshair[data-shape="dot"] .ch-t,
#crosshair[data-shape="dot"] .ch-b { display: none; }
#crosshair[data-shape="dot"] .ch-dot { width: 4px; height: 4px; transform: translate(-2px, -2px); background: var(--red); }
#crosshair[data-shape="bracket"] .ch-l,
#crosshair[data-shape="bracket"] .ch-r { width: 12px; }
#crosshair[data-shape="bracket"] .ch-t,
#crosshair[data-shape="bracket"] .ch-b { height: 12px; }
#crosshair[data-shape="wide"] .ch-l,
#crosshair[data-shape="wide"] .ch-r { width: 16px; }

/* hitmarker */
#hitmarker {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  opacity: 0;
}
#hitmarker i {
  position: absolute;
  width: 11px; height: 2.5px;
  background: #fff;
  transform-origin: 50% 50%;
}
#hitmarker i:nth-child(1) { transform: rotate(45deg) translate(9px, 0); }
#hitmarker i:nth-child(2) { transform: rotate(-45deg) translate(9px, 0); }
#hitmarker i:nth-child(3) { transform: rotate(135deg) translate(9px, 0); }
#hitmarker i:nth-child(4) { transform: rotate(-135deg) translate(9px, 0); }
#hitmarker[data-kind="head"] i { background: var(--red); height: 3.5px; width: 14px; }
#hitmarker[data-kind="burn"] i { background: var(--hot); }
#hitmarker.go { animation: hitpop .18s ease-out; }
@keyframes hitpop {
  0% { opacity: 1; transform: scale(.6); }
  100% { opacity: 0; transform: scale(1.35); }
}

/* scope */
#scope { position: absolute; inset: 0; }
.sc-glass {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0 30vmin, rgba(4, 4, 6, .96) 31vmin);
}
.sc-h, .sc-v { position: absolute; background: rgba(20, 20, 22, .85); }
.sc-h { left: 0; right: 0; top: 50%; height: 1.5px; }
.sc-v { top: 0; bottom: 0; left: 50%; width: 1.5px; }

/* damage direction */
#dmg-arcs { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.dmg-arc {
  position: absolute;
  left: -14px; top: -8px;
  width: 28px; height: 14px;
  opacity: 0;
  background: linear-gradient(180deg, var(--red), rgba(255, 63, 52, 0));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transition: opacity .1s linear;
}

/* screen states */
#hurt {
  position: absolute;
  inset: 0;
  --low: 0;
  box-shadow: inset 0 0 min(24vmin, 200px) rgba(180, 20, 12, calc(.22 + var(--low) * .55));
  opacity: calc(.18 + var(--low) * 1.1);
  transition: opacity .3s ease;
}
#hurt.hit {
  box-shadow: inset 0 0 min(30vmin, 260px) rgba(210, 24, 14, .78);
  opacity: 1;
  transition: opacity .05s linear;
}

/* damage numbers */
#dmg-numbers { position: absolute; inset: 0; }
.dmg-num {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  color: #ffe9c4;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9);
  display: none;
}
.dmg-num.crit { color: var(--red); font-size: 21px; }

/* ── wave hud (top left) ─────────────────────────────────── */
/* ── the left column ─────────────────────────────────────── */
/*
   One flow, not three absolute stacks. The wave group hangs from the top, the
   fort row and vitals hang from the bottom, and `.hl-spacer` eats whatever is
   left — which is why the objectives list can never grow down into the fort
   buttons again, at any window size.
*/
#hud-left {
  position: absolute;
  left: 20px; top: 18px; bottom: 22px;
  width: 258px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
#hud-left > * { pointer-events: auto; }
/* Two children, never three. The bottom group is rigid and hangs from the
   bottom; the top group is the only thing allowed to give. */
.hl-bottom {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* `flex-start` here shrank the vitals to its text and the health bar — a grid
     track of `minmax(0, 1fr)` — collapsed to nothing. Stretch: the plates own
     the column width. */
  align-items: stretch;
}
/* Two chips will not fit side by side in a 258px column, so they wrap and each
   one takes the full width. Letting the row run off to the right instead put it
   under the gun panel on a narrow window. */
#fortrow { flex-wrap: wrap; }
#fortrow .fort { flex: 1 1 100%; }

/* The top group is the one that gives way when the column runs out of room.
   Flex items do not shrink below their content unless told to, so without
   `min-height: 0` the column simply overflowed its own box and the vitals slid
   down over the fort row. The objectives clip; the health bar never moves. */
#wavehud {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
}
#fortrow, #vitals { flex: 0 0 auto; }
.wh-card { padding: 10px 13px 11px; }
.wh-row { display: flex; align-items: center; gap: 12px; }
.wh-cell { display: flex; flex-direction: column; gap: 1px; line-height: 1; }
.wh-label { font-size: 9.5px; letter-spacing: .2em; }
.wh-cell b { font-family: var(--display); font-size: 26px; line-height: .9; }
#wave-num { color: var(--gold); }
#wave-left { color: var(--red); }
.wh-sep { width: 1px; align-self: stretch; background: rgba(255, 232, 200, .16); }
#combo {
  margin-left: auto;
  font-family: var(--display);
  font-size: 22px;
  color: var(--hot);
  text-shadow: 0 0 16px rgba(255, 106, 31, .7);
}
#combo.pop { animation: combopop .3s ease-out; }
@keyframes combopop { 0% { transform: scale(1.55); } 100% { transform: scale(1); } }

.wh-money {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 232, 200, .1);
  font-family: var(--mono);
}
.wh-money em { font-style: normal; font-size: 9.5px; letter-spacing: .16em; color: var(--dim); }
.wh-money b { font-size: 15px; font-weight: 700; margin-left: 5px; }
.wh-syrup b { color: var(--gold); }
.wh-score { margin-left: auto; }

/* The intermission block. It used to be mint green on a dark plate — a colour
   that appears nowhere else in the game and pulled the eye harder than the
   health bar did. Now it borrows the same amber the rest of the HUD uses and
   earns its attention from size and position instead. */
#intermission { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255, 232, 200, .1); }
.inter-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--dim);
}
.inter-line b { font-size: 15px; color: var(--text); }
.inter-bar {
  display: block;
  height: 4px;
  margin-top: 6px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.inter-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--amber));
  transform-origin: 0 50%;
  transition: transform .2s linear;
}
#wave-now {
  display: flex;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  background: linear-gradient(180deg, #ffcf6b, var(--amber));
  border: 1px solid #ffdf9a;
  color: #241505;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}
#wave-now:hover { background: linear-gradient(180deg, #ffe3a0, #ffc257); }
#wave-now kbd {
  background: rgba(0, 0, 0, .2);
  border-color: rgba(0, 0, 0, .28);
  color: #241505;
  margin-left: 6px;
  font-size: 9px;
}
#wave-now em { font-style: normal; font-size: 9px; letter-spacing: .1em; opacity: .8; }
#wave-now[disabled] { opacity: .45; cursor: default; }

#golden {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 232, 200, .1);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--gold);
}
.gd-bar { display: block; height: 4px; margin-top: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.gd-bar i { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; }

/* ── boss bar ────────────────────────────────────────────── */
#bossbar {
  position: absolute;
  left: 50%; top: 14px;
  transform: translateX(-50%);
  width: min(560px, 74vw);
  background: var(--plate);
  border: 1px solid rgba(255, 63, 52, .45);
  padding: 8px 12px 9px;
  text-align: center;
  clip-path: var(--clip);
}
.bb-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.bb-head b { font-family: var(--display); font-size: 15px; letter-spacing: .06em; color: #ffdfd2; }
.bb-head span { font-size: 10px; letter-spacing: .18em; color: var(--red); }
.bb-track { height: 9px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.bb-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #c1281c, var(--hot), var(--gold));
  transform-origin: 0 50%;
  transition: transform .12s linear;
}
#bossbar.locked .bb-track i { filter: grayscale(.65) brightness(.7); }
.bb-clamps { display: flex; gap: 5px; justify-content: center; margin-top: 6px; }
.bb-clamps i {
  width: 26px; height: 5px;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(255, 209, 102, .8);
}
.bb-clamps i.off { background: rgba(255, 255, 255, .16); box-shadow: none; }
.bb-note { font-size: 9.5px; color: var(--dim); margin: 5px 0 0; letter-spacing: .06em; }
#bossbar:not(.locked) .bb-note { display: none; }

/* ── banner ──────────────────────────────────────────────── */
#banner {
  position: absolute;
  left: 50%; top: 26%;
  transform: translate(-50%, -20px);
  text-align: center;
  opacity: 0;
  transition: opacity .45s ease, transform .45s ease;
}
#banner.show { opacity: 1; transform: translate(-50%, 0); }
#banner b {
  display: block;
  font-family: var(--display);
  font-size: clamp(26px, 5vw, 46px);
  letter-spacing: .06em;
  color: #fff2e0;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .55), 0 0 26px rgba(255, 106, 31, .5);
}
#banner span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
}
#banner.big b { color: #ffd9d2; text-shadow: 0 3px 0 rgba(0, 0, 0, .6), 0 0 34px rgba(255, 63, 52, .75); }

/* ── kill feed ───────────────────────────────────────────── */
#killfeed {
  position: absolute;
  right: 18px; top: 40%;
  list-style: none;
  margin: 0; padding: 0;
  text-align: right;
  width: 200px;
}
#killfeed li {
  font-size: 11px;
  color: var(--dim);
  padding: 3px 0;
  opacity: 1;
  transition: opacity .5s ease, transform .5s ease;
}
#killfeed li b { color: #ffcfa8; font-weight: 600; }
#killfeed li i { color: var(--hot); font-style: normal; font-size: 9.5px; letter-spacing: .1em; }
#killfeed li.out { opacity: 0; transform: translateX(14px); }

/* ── flash ───────────────────────────────────────────────── */

/* ── vitals (bottom left) ────────────────────────────────── */
/*
   The number leads. Health used to be a 13px figure inside a 22px hairline bar
   pinned to the very bottom edge of the window — the least legible treatment
   available, for the one value the player is actually tracking. Now it is a
   34px numeral with the bar as its support, on a plate, lifted clear of the
   edge, with a lagging "ghost" fill behind the real one so you can see how much
   a hit just took rather than only where it left you.
*/
#vitals {
  flex: 0 0 auto;
  padding: 11px 14px 12px;
}
.vt-main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.vt-read { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.vt-read b {
  font-family: var(--display);
  font-size: 34px;
  color: #fff3e2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
  font-variant-numeric: tabular-nums;
}
.vt-read em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--dim);
}
#vitals.low .vt-read b { color: var(--red); animation: pulse .55s ease-in-out infinite alternate; }
@keyframes pulse { to { filter: brightness(1.6); } }

.vt-bars { display: flex; flex-direction: column; gap: 5px; }
.vt-bar {
  position: relative;
  height: 14px;
  background: rgba(0, 0, 0, .55);
  overflow: hidden;
  /* the segment ticks: a repeating hairline over the fill, so a bar at 60% reads
     as a quantity rather than as a smear of colour */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.vt-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0 15px, rgba(0, 0, 0, .55) 15px 17px);
  pointer-events: none;
}
.vt-bar i {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  background: linear-gradient(180deg, #ff6257, #c1281c);
  transition: transform .14s ease;
}
/* The ghost trails the real bar down, so the size of the hit is visible for a
   beat after it lands. */
.vt-bar .vt-ghost {
  background: rgba(255, 255, 255, .45);
  transition: transform .5s ease-out .18s;
}
.vt-bar.armor { height: 9px; }
.vt-bar.armor i { background: linear-gradient(180deg, #9dffcd, #2f9f6b); }
.vt-bar.armor.empty { opacity: .3; }
.vt-armnum {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--mono);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
}
.vt-armnum b { font-size: 10px; font-weight: 700; }
.vt-armnum em { font-size: 8px; letter-spacing: .16em; }
.vt-bar.armor.empty .vt-armnum { display: none; }

.vt-states { display: flex; gap: 6px; margin-top: 8px; min-height: 0; }
.vt-states:empty { display: none; }
#burn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--hot);
  animation: pulse .4s ease-in-out infinite alternate;
}

/* ── fortification (above the vitals) ────────────────────── */
/*
   It used to float in the dead centre of the screen, which read as a modal that
   had failed to close. It belongs with the other things you spend on, so it
   sits directly above the health you are spending to protect.
*/
#fortrow {
  flex: 0 0 auto;
  display: flex;
  gap: 7px;
}
/* A flex row, not a two-row grid. Auto-placement in the grid put the name and
   the price in a column of their own and the label ended up floating in the
   middle of the chip looking like a layout bug. */
.fort {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px 6px 7px;
  background: linear-gradient(180deg, rgba(18, 13, 19, .86), rgba(10, 7, 12, .93));
  border: 1px solid rgba(255, 232, 200, .1);
  border-left: 3px solid var(--green);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  color: var(--text);
  font-family: var(--mono);
  cursor: pointer;
  transition: border-color .12s, opacity .12s;
}
.fort:hover:not(.poor):not(.maxed) { border-left-color: var(--gold); }
.fort-key {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  background: rgba(255, 232, 200, .14);
  border: 1px solid rgba(255, 232, 200, .22);
  font-size: 10.5px;
  font-weight: 700;
}
.fort-glyph { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 24px; }
.fort-glyph img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
/* `min-width: 0` is the load-bearing part. A flex item does not shrink below
   its own content, so a nowrap name simply pushed the price and the count out
   of the panel — and `#wavehud`'s `overflow: hidden` clipped them rather than
   letting anything wrap. At 480px the rows read "🍯 320 0/" with the count cut
   off mid-string. The NAME is the thing that can afford to give way. */
.fort-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10.5px;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fort-price { flex: 0 0 auto; font-size: 10px; color: var(--gold); }
.fort-count { flex: 0 0 auto; font-size: 9px; color: var(--dim); }
.fort.poor { opacity: .42; }
.fort.poor .fort-price { color: var(--red); }
.fort.maxed { opacity: .3; }

/* ── weapon panel (bottom right) ─────────────────────────── */
#weaponpanel {
  position: absolute;
  right: 20px; bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}
.wp-card {
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  gap: 2px 14px;
  padding: 9px 14px 10px;
  text-align: right;
}
.wp-ammo { grid-column: 2; display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; line-height: .9; }
.wp-ammo b {
  font-family: var(--display);
  font-size: 40px;
  color: #fff3e2;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.wp-ammo b.lowammo { color: var(--amber); }
.wp-ammo b.empty { color: var(--red); animation: pulse .4s ease-in-out infinite alternate; }
.wp-ammo span { font-family: var(--mono); font-size: 14px; color: var(--dim); }
.wp-ammo span::before { content: '/ '; opacity: .5; }
.wp-name { grid-column: 1; grid-row: 1; text-align: left; align-self: center; }
.wp-name b {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}
.wp-name span { display: block; font-size: 9.5px; letter-spacing: .2em; }
#reload-bar {
  --p: 0;
  grid-column: 1 / -1;
  height: 4px;
  margin-top: 7px;
  background: rgba(255, 255, 255, .13);
  overflow: hidden;
}
#reload-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--amber);
  transform: scaleX(var(--p));
  transform-origin: 0 50%;
}

/* The slot list was a 9px text strip hugging the bottom edge of the window and
   read as a debug print. Chips, with the digit you actually press made the
   loudest part of each one. */
#weapon-slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
#weapon-slots li {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  background: rgba(10, 7, 12, .82);
  border: 1px solid rgba(255, 232, 200, .09);
  border-bottom: 2px solid transparent;
  color: #7a7062;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%);
}
#weapon-slots li b {
  display: grid;
  place-items: center;
  width: 14px; height: 14px;
  background: rgba(255, 232, 200, .1);
  font-size: 9.5px;
  color: inherit;
}
#weapon-slots li.owned { color: var(--dim); }
#weapon-slots li.active {
  color: #fff;
  background: rgba(255, 176, 58, .2);
  border-color: rgba(255, 176, 58, .5);
  border-bottom-color: var(--amber);
}
#weapon-slots li.active b { background: var(--amber); color: #241505; font-weight: 700; }
#weapon-slots li.locked b { opacity: .4; }
#weapon-slots li.locked span { text-decoration: line-through; opacity: .5; }

/* ── kill feed ───────────────────────────────────────────── */
#killfeed {
  position: absolute;
  right: 18px; top: 40%;
  list-style: none;
  margin: 0; padding: 0;
  text-align: right;
  width: 200px;
}
#killfeed li {
  font-size: 11px;
  color: var(--dim);
  padding: 3px 0;
  opacity: 1;
  transition: opacity .5s ease, transform .5s ease;
}
#killfeed li b { color: #ffcfa8; font-weight: 600; }
#killfeed li i { color: var(--hot); font-style: normal; font-size: 9.5px; letter-spacing: .1em; }
#killfeed li.out { opacity: 0; transform: translateX(14px); }

/* ── flash ───────────────────────────────────────────────── */
/* Radio chatter. It was bare text floating in the lower middle of a bright
   painted scene — legible against the sky, invisible against a lit building.
   A plate fixes that without making it feel like a system message. */
#flash {
  position: absolute;
  left: 50%;
  /* A percentage alone put the chatter through the gun panel on a short window:
     15% of 600px is 90px and the weapon block is taller than that. The floor is
     measured from the tallest thing in the bottom corners. */
  bottom: max(178px, 15%);
  transform: translate(-50%, 8px);
  margin: 0;
  /* Narrow enough to clear the vitals on the left and the gun on the right at
     1024 wide, where 70vw ran straight through both. */
  max-width: min(52vw, 560px);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
#flash span {
  display: inline-block;
  padding: 7px 14px;
  background: linear-gradient(180deg, rgba(18, 13, 19, .8), rgba(10, 7, 12, .88));
  border-left: 3px solid currentColor;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .03em;
  line-height: 1.45;
  text-align: left;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}
#flash.show { opacity: 1; transform: translate(-50%, 0); }
/* ── map and chrome (top right) ──────────────────────────── */
#topright {
  position: absolute;
  right: 20px; top: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  z-index: 5;
}
/* The map had no edge at all, so a dark canvas over a dark hillside had no
   boundary and the front-bearing arcs on its rim looked like scene glare. */
.mm-frame {
  position: relative;
  padding: 4px;
  background: linear-gradient(180deg, rgba(18, 13, 19, .8), rgba(10, 7, 12, .9));
  border: 1px solid rgba(255, 232, 200, .12);
  border-radius: 50%;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .5);
}
#minimap-canvas { display: block; border-radius: 50%; }
.tr-btns { display: flex; gap: 5px; }
.tr-btns button {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(18, 13, 19, .8), rgba(10, 7, 12, .9));
  border: 1px solid rgba(255, 232, 200, .12);
  color: var(--dim);
  font-size: 12px;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
  transition: color .12s, border-color .12s;
}
.tr-btns button:hover { color: var(--amber); border-color: var(--amber); }

#lockhint {
  position: absolute;
  left: 50%; top: 58%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--plate);
  border: 1px solid var(--line);
  color: var(--text);
}

/* the "press E" prompt at the diner door */
#useprompt {
  position: absolute;
  left: 50%; top: 57%;
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: .08em;
  background: var(--plate);
  border: 1px solid rgba(255, 209, 102, .4);
  border-left: 3px solid var(--gold);
  color: var(--text);
  white-space: nowrap;
}
body.touch #useprompt { top: 62%; }

/* ── armory ──────────────────────────────────────────────── */
#armory, #pause, #dead {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(8, 7, 9, .84);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
/* the x-of-y counter tucks into the tile corner; left in the flow it dropped
   below the tile and read as a stray label */
.ai-note {
  position: absolute;
  top: 3px;
  right: 8px;
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  letter-spacing: .1em;
  color: var(--dim);
  pointer-events: none;
}
.ai-glyph { font-size: 20px; text-align: center; }
.ai-body { min-width: 0; }
.ai-body b { display: block; font-size: 13px; font-weight: 600; }
.ai-body em { display: block; font-style: normal; font-size: 11px; color: var(--dim); line-height: 1.35; }
.ai-price {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}
.ar-close { display: block; margin: 0 auto; }
.ar-close kbd { margin-left: 6px; }

/* ── perk draft ──────────────────────────────────────────── */
#draft {
  position: fixed;
  inset: 0;
  z-index: 74;
  display: grid;
  place-items: center;
  padding: 4vh 3vw;
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(255, 176, 58, .14), transparent 70%),
    rgba(8, 7, 9, .88);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.dr-inner { text-align: center; width: min(1000px, 96vw); }
.dr-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 6px;
}
.dr-title {
  font-family: var(--display);
  font-size: clamp(26px, 5vw, 44px);
  margin: 0 0 22px;
  letter-spacing: .04em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .5), 0 0 30px rgba(255, 106, 31, .4);
}
.dr-cards {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}
.dr-cards button {
  width: 100%;
  height: 100%;
  min-height: 214px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  padding: 20px 16px 16px;
  text-align: center;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid var(--line);
  border-top: 3px solid var(--amber);
  clip-path: var(--clip);
  transition: transform .12s ease, background .12s ease;
}
.dr-cards button:hover { transform: translateY(-4px); background: rgba(255, 176, 58, .14); }
.dr-cards li[data-rarity="rare"] button { border-top-color: var(--blue); }
.dr-cards li[data-rarity="epic"] button { border-top-color: #d67bff; }
.dr-glyph { font-size: 40px; line-height: 1; }
.dr-name { font-family: var(--display); font-size: 16px; letter-spacing: .02em; }
.dr-blurb { font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.dr-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
}
.dr-cards li[data-rarity="rare"] .dr-meta { color: var(--blue); }
.dr-cards li[data-rarity="epic"] .dr-meta { color: #d67bff; }
.dr-key {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  border: 1px solid var(--line);
  padding: 1px 5px;
  justify-self: center;
}
.dr-foot { font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* ── armory tabs + workbench ─────────────────────────────── */

/* perks listed on the death card */
.de-perks {
  list-style: none;
  margin: 0 0 20px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}
.de-perks li b { color: var(--gold); }
.de-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
#dead-retry b { font-weight: 700; }

/* ── pause ───────────────────────────────────────────────── */
.pa-panel {
  width: min(430px, 94vw);
  background: var(--plate-solid);
  border: 1px solid var(--line);
  clip-path: var(--clip);
  padding: 24px;
}
.pa-title { display: block; font-family: var(--display); font-size: 22px; letter-spacing: .1em; margin-bottom: 18px; }
.pa-row {
  display: grid;
  grid-template-columns: 1fr 130px 42px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-family: var(--sans);
  color: var(--dim);
  margin-bottom: 13px;
}
.pa-row b { font-family: var(--mono); font-size: 12px; color: var(--text); text-align: right; }
.pa-row.check { grid-template-columns: 1fr auto; }
.pa-row input[type="range"] { width: 100%; accent-color: var(--amber); }
.pa-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--amber); }
.pa-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pa-btns .btn { flex: 1 1 auto; }

/* ── death ───────────────────────────────────────────────── */
.de-panel {
  width: min(540px, 94vw);
  text-align: center;
  background: var(--plate-solid);
  border: 1px solid rgba(255, 63, 52, .35);
  clip-path: var(--clip);
  padding: 30px 28px 24px;
}
.de-kicker { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); margin: 0 0 8px; }
.de-title {
  font-family: var(--display);
  font-size: clamp(24px, 5vw, 38px);
  margin: 0 0 22px;
  color: var(--red);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .5);
}
.de-stats {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.de-stats li { border-top: 1px solid var(--line); padding-top: 9px; }
.de-stats b { display: block; font-size: 22px; color: var(--gold); }
.de-stats span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.de-note { font-size: 11px; color: #7d7268; margin: 14px 0 0; }

/* ── touch controls ──────────────────────────────────────── */
#look-pad, #stick, #touch-actions { display: none; }
body.touch #look-pad {
  display: block;
  position: absolute;
  right: 0; top: 0;
  width: 62%; height: 100%;
  pointer-events: auto;
}
body.touch #stick {
  display: grid;
  place-items: center;
  position: absolute;
  left: 14px; bottom: 14px;
  width: 108px; height: 108px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .22);
  background: rgba(16, 12, 14, .4);
  pointer-events: auto;
}
#stick-knob {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  border: 2px solid rgba(255, 255, 255, .5);
}
/* On a landscape phone the whole bottom-right corner is contested: the ammo
   readout, the fire button and the small action pills all want it. So the pills
   go in a two-column block to the LEFT of a big round fire button, the ammo
   readout lifts clear above them, and the vitals move to the right of the stick.
   Everything stays inside the corner it belongs to and nothing overlaps. */
body.touch #touch-actions {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    'reload fire'
    'swap   fire'
    'jump   shop';
  gap: 6px;
  align-items: stretch;
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 5;
}
#touch-actions button {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 9px 10px;
  min-width: 62px;
  background: rgba(16, 12, 14, .68);
  color: var(--text);
  border: 1px solid var(--line);
}
#btn-reload { grid-area: reload; }
#btn-swap { grid-area: swap; }
#btn-jump { grid-area: jump; }
#btn-armory { grid-area: shop; }
#btn-fire {
  grid-area: fire;
  width: 92px;
  border-radius: 50%;
  background: rgba(255, 63, 52, .34) !important;
  border: 2px solid rgba(255, 63, 52, .7) !important;
  font-size: 13px !important;
  min-width: 0;
}
body.touch #killfeed { display: none; }
body.touch #topright { z-index: 6; }
body.touch #weaponpanel {
  right: 12px;
  bottom: 148px;
}
body.touch .wp-ammo b { font-size: 26px; }
body.touch .wp-ammo span { font-size: 12px; }
body.touch #weapon-slots { display: none; }
/* The touch stick lives in the bottom-left corner, so the whole column lifts
   clear of it rather than the health plate being shoved sideways on its own. */
body.touch #hud-left { bottom: 150px; }
body.touch #flash { bottom: 26%; }

/* ── responsive ──────────────────────────────────────────── */
/*
   These used to move `#wavehud` and `#vitals` with `left`/`bottom`, from when
   both were absolutely positioned. They are flex children of `#hud-left` now,
   and `.plate` makes them `position: relative` — so those offsets stopped
   repositioning anything and started NUDGING them out of the flow instead. The
   vitals slid twelve pixels right and thirteen up, straight onto the fort row.
   Position the COLUMN; never its children.
*/
@media (max-width: 780px) {
  #hud-left { left: 12px; top: 10px; bottom: 12px; width: 200px; }
  #weaponpanel { right: 12px; bottom: 12px; }
  .wp-ammo b { font-size: 30px; }
  #killfeed { display: none; }
  #topright { right: 10px; top: 8px; }
  #bossbar { width: min(420px, 88vw); top: 8px; }
  .de-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 460px) {
  #banner { top: 18%; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-ring, #burn, .vt-bar i#hp-fill.low, .rot-phone { animation: none; }
}

/* ---------------------------------------------------------------------------
   OBJECTIVES — nests and holds.

   Two jobs, and the second one is the hard one. The panel says what the island
   wants; the world markers say WHERE, because a nest is a hundred units away
   behind a hill and shipping the entity is only half of putting it in the game.
--------------------------------------------------------------------------- */
#objectives {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
/* One column, always. Two columns meant "THE LIGHTHOUSE" and "GET IN THE RING"
   fought for 220px and the name lost — it ellipsed to "THE LIGHTHOUS…", which
   is exactly the word you needed to read. The note is short; give it its own
   line and let the name have the panel. */
.obj {
  --c: var(--amber);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  padding: 7px 10px 8px;
  background: linear-gradient(180deg, rgba(18, 13, 19, .86), rgba(10, 7, 12, .93));
  border: 1px solid rgba(255, 232, 200, .09);
  border-left: 3px solid var(--c);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  font-family: var(--mono);
  animation: objIn .28s ease-out backwards;
}
.obj b {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c);
}
.obj-note {
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--dim);
}
.obj.active .obj-note { color: var(--green); }
.obj-bar {
  display: block;
  height: 4px;
  margin-top: 5px;
  background: rgba(0, 0, 0, .55);
  overflow: hidden;
}
.obj-bar i {
  display: block;
  height: 100%;
  background: var(--c);
  transform-origin: 0 50%;
  transition: transform .18s linear;
}
/* A nest's bar runs DOWN as you break it, so it reads as health, not progress.
   The hold's runs up. Same widget, opposite meaning — the colour carries it. */
.obj.nest { animation-name: objIn, objPulse; animation-duration: .28s, 1.6s; animation-iteration-count: 1, infinite; }
@keyframes objIn { from { opacity: 0; transform: translateX(-10px); } }
@keyframes objPulse { 0%, 100% { border-left-color: var(--c); } 50% { border-left-color: #fff2c0; } }

/* the world markers */
.site {
  position: absolute;
  transform: translate(-50%, -100%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--mono);
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
}
.site.on { display: flex; }
.site-glyph { font-size: 15px; line-height: 1; filter: drop-shadow(0 0 6px currentColor); }
.site-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 3px 8px;
  background: linear-gradient(180deg, rgba(18, 13, 19, .82), rgba(10, 7, 12, .9));
  border: 1px solid rgba(255, 232, 200, .12);
  border-bottom: 2px solid currentColor;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
}
.site-bar {
  width: 54px;
  height: 3px;
  background: rgba(0, 0, 0, .6);
  overflow: hidden;
}
.site-bar i {
  display: block;
  height: 100%;
  background: currentColor;
  transform-origin: 0 50%;
}
.site-dist { font-size: 9px; color: var(--dim); }
.site-arrow { font-size: 11px; opacity: .95; }
.site:not(.edge) .site-arrow { display: none; }
.site.active .site-name { animation: pulse .6s ease-in-out infinite alternate; }

/* Phone landscape is 844x390, which is WIDER than the old 820px breakpoint and
   less than half as tall — so the compact HUD has to key off height as well or
   it never fires on the device it was written for. */
@media (max-width: 900px), (max-height: 560px) {
  #objectives { gap: 4px; }
  /* Two columns is too tight for "THE LIGHTHOUSE" plus "GET IN THE RING" — the
     name ellipsed to "THE LI…", which is exactly the word you needed. Stack. */
  .obj {
    grid-template-columns: minmax(0, 1fr);
    padding: 3px 7px 4px;
  }
  .obj b { font-size: 10px; white-space: normal; }
  .obj-note { grid-column: 1; font-size: 8px; }
  .site-name { font-size: 9px; }
  .site-bar { width: 42px; }
}

/* The Locker lives in css/locker.css. */

.de-crates {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: rgba(255, 209, 102, .09);
  border-left: 3px solid var(--gold);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold);
}

/* ---------------------------------------------------------------------------
   Compact HUD.

   Phone landscape is 844x390. The left column carries the wave panel, the
   objectives, the fort row and the vitals — about 430px of stacked content in a
   390px window — so on short screens everything on it gets smaller rather than
   overlapping.
--------------------------------------------------------------------------- */
@media (max-width: 900px), (max-height: 560px) {
  #hud-left { left: 14px; top: 12px; bottom: 14px; width: 208px; gap: 5px; }
  #wavehud { gap: 5px; }
  .wh-card { padding: 7px 10px 8px; }
  .wh-cell b { font-size: 20px; }
  .wh-label { font-size: 8.5px; }
  #combo { font-size: 17px; }
  .wh-money { margin-top: 6px; padding-top: 6px; }
  .wh-money b { font-size: 13px; }
  #intermission { margin-top: 6px; padding-top: 6px; }
  #wave-now { margin-top: 6px; padding: 6px 8px; font-size: 9.5px; }
  #wave-now em { font-size: 8px; }

  .obj { padding: 5px 8px 6px; }
  .obj b { font-size: 10px; }
  .obj-note { font-size: 8px; }
  .obj-bar { height: 3px; margin-top: 3px; }

  #vitals { padding: 8px 10px 9px; }
  .vt-read b { font-size: 25px; }
  .vt-read em { font-size: 9px; }
  .vt-main { gap: 9px; }
  .vt-bar { height: 11px; }
  .vt-bar.armor { height: 7px; }
  .vt-states { margin-top: 5px; }


  #weaponpanel { right: 14px; bottom: 14px; gap: 5px; }
  .wp-card { padding: 7px 11px 8px; gap: 2px 10px; }
  .wp-ammo b { font-size: 30px; }
  .wp-ammo span { font-size: 12px; }
  .wp-name b { font-size: 11.5px; }
  #weapon-slots li { padding: 3px 6px; font-size: 8.5px; }
  #weapon-slots li b { width: 12px; height: 12px; font-size: 8.5px; }

  #flash span { font-size: 11px; padding: 5px 11px; }
}

/* Very short — a phone held in landscape with the browser chrome showing.
   The left column has about 340px to hold four stacked groups, so the fort
   chips lose their second row: the "0/6" count also lives in the armory, and a
   button you can read beats a counter you cannot. */
@media (max-height: 430px) {
  #hud-left { width: 194px; }
  .obj-note { display: none; }
  .vt-read b { font-size: 22px; }
  .fort { gap: 6px; padding: 4px 9px 4px 5px; }
  .fort-count { display: none; }
  .fort-glyph { display: none; }
  .fort-price { font-size: 9px; }
  /* There is no free bottom strip on a screen this size — the gun panel and its
     slot chips run most of the width. The TOP centre is empty on every wave
     that is not a boss wave, so the chatter goes up there instead. */
  /* Not centred on the viewport — centred in the strip that is actually free,
     between the HUD column on the left and the minimap on the right. Centring
     on 50% of a 667px window put it straight through the wave panel. */
  #flash {
    top: 74px; bottom: auto;
    left: 214px; right: 150px;
    transform: translateY(6px);
    max-width: none;
    text-align: center;
  }
  #flash.show { transform: translateY(0); }
  #flash span { font-size: 10px; padding: 4px 9px; line-height: 1.35; }
  #bossbar ~ #flash { top: 108px; }
}

/* ── settings panel ──────────────────────────────────────── */
.pa-tabs {
  display: flex;
  gap: 2px;
  margin: 14px 0 12px;
  border-bottom: 1px solid rgba(255, 232, 200, .12);
}
.pa-tabs button {
  padding: 8px 14px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.pa-tabs button:hover { color: var(--text); }
.pa-tabs button.on { color: var(--gold); border-bottom-color: var(--gold); }
.pa-pane { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; }
.pa-select {
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 8px;
}
.pa-note {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}
#pa-mixer { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }

/* the visibility toggles */
body.no-dmgnum #dmg-numbers { display: none !important; }
body.no-killfeed #killfeed { display: none !important; }
body.no-markers .site { display: none !important; }

.title-update {
  margin: 10px 0 0;
  padding: 7px 10px;
  background: rgba(125, 255, 178, .1);
  border-left: 3px solid var(--green);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--green);
}

/* ---------------------------------------------------------------------------
   THE CO-OP LOBBY

   A stage, a row of couriers wearing what they equipped, and a code. The whole
   reason it exists: in a first-person game nobody ever sees anyone else's
   cosmetics, so there has to be one moment where everybody does.
--------------------------------------------------------------------------- */
#lobby {
  position: fixed;
  inset: 0;
  z-index: 86;
  display: grid;
  place-items: center;
  padding: clamp(10px, 3vh, 32px);
  background:
    radial-gradient(110% 80% at 50% 10%, rgba(255, 106, 31, .16), transparent 65%),
    rgba(8, 6, 9, .93);
  backdrop-filter: blur(7px);
  animation: lkIn .22s ease-out;
}
.lb-inner {
  width: min(960px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.lb-kicker {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  color: var(--amber);
}
.lb-head h2 {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--dim);
}
.lb-head h2 b {
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: .1em;
  color: var(--gold);
  margin-left: 8px;
}
.lb-count { font-family: var(--mono); font-size: 12px; color: var(--dim); }

.lb-stage {
  position: relative;
  height: min(44vh, 380px);
  background:
    radial-gradient(70% 100% at 50% 100%, rgba(255, 176, 58, .12), transparent 70%),
    linear-gradient(180deg, rgba(20, 14, 22, .5), rgba(10, 7, 12, .8));
  border: 1px solid rgba(255, 232, 200, .12);
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  overflow: hidden;
}
#lb-canvas { display: block; width: 100%; height: 100%; }
#lb-canvas.dead { display: none; }
.lb-plates { position: absolute; inset: 0; pointer-events: none; }
.lb-plate {
  position: absolute;
  bottom: 12px;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--mono);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95);
}
.lb-plate b { display: block; font-size: 13px; letter-spacing: .06em; }
.lb-plate span { display: block; font-size: 9px; letter-spacing: .18em; color: var(--gold); min-height: 11px; }
.lb-plate em { display: block; font-style: normal; font-size: 9.5px; color: var(--dim); }

.lb-role { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--text); }
.lb-hint { margin: 0; font-size: 12px; color: var(--dim); }
.lb-btns { display: flex; gap: 8px; }
.lb-btns .btn { flex: 0 0 auto; }
#lb-start { flex: 1 1 auto; padding: 13px 20px; font-size: 12.5px; }

@media (max-width: 700px), (max-height: 560px) {
  .lb-stage { height: min(38vh, 220px); }
  .lb-head h2 b { font-size: 22px; }
  .lb-hint { display: none; }
  .lb-plate b { font-size: 11px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Account
   ─────────────────────────────────────────────────────────────────────────────
   Same shell as the locker, one column, narrower. z-index 89: above the locker
   (88) because the locker's own footer can open it, and below the loading screen
   (90) and the rotate card (96), which must never be covered.               */
#account {
  position: fixed;
  inset: 0;
  z-index: 89;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2.4vh, 28px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 106, 31, .13), transparent 60%),
    rgba(8, 6, 9, .93);
  backdrop-filter: blur(7px);
  animation: lkIn .22s ease-out;
}
#account[hidden] { display: none !important; }

.ac-inner {
  width: min(430px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: linear-gradient(180deg, #191420, #120e17);
  border: 1px solid var(--line);
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.ac-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 15px 18px 13px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 232, 200, .03);
}
.ac-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: .04em;
  color: var(--gold);
}
.ac-head p { margin: 3px 0 0; font-size: 11px; line-height: 1.45; color: var(--dim); }
#ac-close {
  appearance: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--dim);
  width: 30px; height: 30px;
  cursor: pointer;
  font-size: 13px;
}
#ac-close:hover { color: var(--amber); border-color: var(--amber); }

.ac-body { padding: 16px 18px 18px; display: grid; gap: 11px; }
.ac-body[hidden] { display: none !important; }
.ac-wide { width: 100%; justify-content: center; }

.ac-or {
  margin: 2px 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  position: relative;
}
.ac-or::before {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  border-top: 1px solid var(--line);
}
.ac-or span { position: relative; background: #161120; padding: 0 10px; }

.ac-field { display: grid; gap: 5px; }
.ac-field > span {
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
}
.ac-field input {
  appearance: none;
  /* 16px minimum, or iOS Safari zooms the whole page the moment it is focused */
  font: 500 16px/1.2 var(--mono);
  color: var(--ink);
  background: rgba(0, 0, 0, .34);
  border: 1px solid var(--line);
  padding: 10px 11px;
  width: 100%;
}
.ac-field input:focus { outline: none; border-color: var(--amber); }

.ac-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.ac-actions .btn { flex: 1 1 auto; justify-content: center; min-width: 120px; }

.ac-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  justify-self: start;
  font: 500 11px/1 var(--mono);
  color: var(--dim);
  text-decoration: underline;
  cursor: pointer;
}
.ac-link:hover { color: var(--amber); }

.ac-note { margin: 4px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--dim); }

.ac-who { display: flex; align-items: center; gap: 12px; }
.ac-avatar { font-size: 22px; }
.ac-who b { display: block; font-family: var(--mono); font-size: 14px; color: var(--ink); }
.ac-who em { display: block; font-style: normal; font-size: 10.5px; color: var(--dim); }

.ac-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ac-stats div {
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .26);
  padding: 8px 9px;
}
.ac-stats dt {
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.ac-stats dd { margin: 3px 0 0; font-family: var(--mono); font-size: 15px; color: var(--gold); }

.ac-msg {
  margin: 0;
  padding: 10px 18px 16px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--amber);
}
.ac-msg[hidden] { display: none !important; }
.ac-msg.bad { color: #ff9a92; }
.ac-msg.good { color: #7dffb2; }

/* The sync state, on the title screen next to the progress line. */
.acct-sync { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.acct-sync.ok { color: #7dffb2; }
.acct-sync.error { color: #ff9a92; }

/* ── firing range ─────────────────────────────────────────────
   A readout plate at the top and a loadout docked to the left. The loadout
   is deliberately NOT a full-screen modal like the armory: the whole reason
   to open it is to see the finish land on the gun in your hands, so the
   right half of the screen stays clear and the viewmodel stays visible. */
body.in-range #wavehud,
body.in-range #fortrow,
body.in-range #coop-hud { display: none !important; }

#range-hud {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  border-left-color: var(--gold);
  padding: 9px 16px 8px;
  min-width: min(520px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  pointer-events: none;
  font-family: var(--mono);
  color: var(--text);
}
.rg-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rg-title strong { font-family: var(--display); font-size: 14px; letter-spacing: .06em; color: var(--gold); }
.rg-title span { font-size: 11px; color: var(--dim); letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-stats { display: grid; grid-template-columns: .7fr 1.2fr 1.3fr; gap: 12px; margin: 6px 0 4px; }
.rg-stats div { min-width: 0; }
.rg-stats dt { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.rg-stats dd { margin: 1px 0 0; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rg-stats div:first-child dd { color: var(--gold); font-size: 18px; }
.rg-keys { margin: 0; font-size: 10px; color: var(--dim); letter-spacing: .06em; }
.rg-keys kbd { margin-left: 8px; }
.rg-keys kbd:first-child { margin-left: 0; }

#range {
  position: fixed;
  z-index: 72;
  top: 16px;
  left: 16px;
  bottom: 16px;
  width: min(430px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  background: var(--plate-solid);
  border: 1px solid var(--line);
  clip-path: var(--clip);
  padding: 18px 18px 14px;
}
#range .ar-head { margin-bottom: 12px; padding-bottom: 10px; }
#range .ar-tabs { flex-wrap: wrap; }
.rg-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  align-content: start;
  gap: 8px;
  padding-right: 4px;
}
.rg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  text-align: left;
  padding: 10px 12px 10px 14px;
  background: rgba(255, 232, 200, .05);
  border: 1px solid rgba(255, 232, 200, .12);
  border-left: 3px solid var(--rc, var(--amber));
  color: var(--text);
  cursor: pointer;
  font-family: var(--sans);
}
.rg-card:hover { background: rgba(255, 232, 200, .1); }
.rg-card.on { background: rgba(255, 209, 102, .14); border-color: var(--gold); border-left-color: var(--rc, var(--gold)); }
.rg-card strong { font-size: 13px; font-weight: 600; line-height: 1.25; }
.rg-card em { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.rg-card.on em { color: var(--gold); }
.rg-card small { font-size: 11px; color: var(--dim); line-height: 1.35; }
.rg-card .rg-k, .rg-card .rg-rar {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rc, var(--amber));
}
.rg-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.rg-foot .btn { flex: 1 1 auto; padding: 9px 12px; font-size: 10.5px; }
.title-secondary { flex-wrap: wrap; }

/* The firing range panel still wears the old armory classes. */
#range .ar-panel {
  width: min(760px, 96vw);
  background: var(--plate-solid);
  border: 1px solid var(--line);
  clip-path: var(--clip);
  padding: 22px 24px 20px;
}
#range .ar-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
#range .ar-head strong { display: block; font-family: var(--display); font-size: 20px; letter-spacing: .05em; }
#range .ar-head span { font-size: 12px; color: var(--dim); font-family: var(--sans); }
#range .ar-bal {
  font-size: 13px;
  color: var(--gold);
  white-space: nowrap;
  padding: 6px 10px;
  border: 1px solid rgba(255, 209, 102, .3);
}
#range .ar-bal b { font-size: 17px; }
#range .ar-items {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
  gap: 8px;
}
#range .ar-items li { position: relative; }
#range .ar-items button {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  text-align: left;
  background: rgba(255, 255, 255, .045);
  border: 1px solid transparent;
  border-left: 2px solid var(--amber);
  color: var(--text);
  cursor: pointer;
  font-family: var(--sans);
}
#range .ar-items button:hover { background: rgba(255, 176, 58, .14); border-color: var(--line); }
#range .ar-items li.off button { cursor: not-allowed; opacity: .42; border-left-color: #5a5148; }
#range .ar-items li.done button { border-left-color: var(--green); opacity: .55; }
#range .ar-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
#range .ar-tabs button {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  padding: 7px 14px;
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--line);
  cursor: pointer;
}
#range .ar-tabs button.on { color: #241505; background: var(--amber); border-color: var(--amber); }
#range .bench-guns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
#range .bench-guns button {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  padding: 7px 11px;
  background: rgba(255, 255, 255, .05);
  color: var(--dim);
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
#range .bench-guns button.on { color: var(--gold); border-bottom-color: var(--gold); background: rgba(255, 209, 102, .12); }
#range .bench-guns button:disabled { opacity: .35; cursor: not-allowed; }
#range .bench-items {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
  gap: 8px;
}
#range .bench-items li { position: relative; }
#range .bench-items button {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  text-align: left;
  background: rgba(255, 255, 255, .045);
  border: 1px solid transparent;
  border-left: 2px solid var(--gold);
  color: var(--text);
  cursor: pointer;
  font-family: var(--sans);
}
#range .bench-items button:hover { background: rgba(255, 209, 102, .14); }
#range .bench-items li.off button { cursor: not-allowed; opacity: .42; border-left-color: #5a5148; }
#range .bench-pips { display: flex; gap: 2px; margin-top: 3px; }
#range .bench-pips i { width: 12px; height: 4px; background: rgba(255, 255, 255, .18); }
#range .bench-pips i.on { background: var(--gold); }