/* Game chrome.
 *
 * Everything that can be a framework component is one — the menu's buttons,
 * fields and cards are all plain ui.css. What lives here is what a document
 * framework has no opinion about: a full-bleed canvas, a crosshair, and a
 * heads-up display pinned to the corners of the viewport.
 *
 * The rule the HUD is designed against: during a fight you do not read the HUD,
 * you glance at it. So every value is encoded twice — once as a bar you can take
 * in peripherally, once as a number you can check deliberately — and the only
 * things allowed to move or glow are the ones that just changed.
 */

:root {
  --hud-ink: #eaf0f8;
  --hud-dim: rgba(234, 240, 248, 0.5);
  --hud-panel: rgba(9, 12, 20, 0.5);
  --hud-line: rgba(255, 255, 255, 0.11);
  --hud-good: #6ee7a8;
  --hud-warn: #ffd479;
  --hud-bad: #ff6b5a;
  --hud-you: #7fc4ff;
  --hud-them: #ff8a7a;
  --weapon-color: #7fc4ff;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

#view {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #05060a;
  cursor: none;
}

body:not(.playing) #view { cursor: default; }

/* ------------------------------------------------------------------ menus */

#overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vh, 44px) 16px;
  /* The arena keeps rendering behind the menu; the blur is what makes text on
     top of a live 3D scene readable. */
  background:
    linear-gradient(105deg, rgba(4, 7, 14, 0.94) 0%, rgba(6, 10, 20, 0.72) 55%, rgba(4, 7, 14, 0.9) 100%);
  backdrop-filter: blur(20px) saturate(115%);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
}

#overlay[hidden] { display: none; }

#menu {
  width: min(620px, 100%);
  margin: auto;
}

.title-block { margin-bottom: 22px; }

#menu h1.ui-display {
  font-size: clamp(3.6rem, 1rem + 12vw, 7rem);
  letter-spacing: -0.06em;
  line-height: 0.86;
  margin: 0;
  color: #fff;
}

.tagline {
  margin: 8px 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(234, 240, 248, 0.42);
}

/* Panels are cut at one corner. It is a small thing, but it is the difference
   between "a web page about a game" and "a game". */
.panel {
  position: relative;
  border: 1px solid var(--hud-line);
  background: rgba(9, 13, 22, 0.55);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  padding: 14px 16px 16px;
  margin-bottom: 12px;
}

.panel-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(234, 240, 248, 0.38);
  margin-bottom: 10px;
}

.panel-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hud-line);
}

.panel-label .link-btn { order: 3; }

/* A menu row: full width, left accent bar that grows on hover, and a hint that
   explains what the thing does without a paragraph. */
.menu-action {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 11px 14px 11px 18px;
  margin-bottom: 6px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.035);
  color: var(--hud-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 130ms, border-color 130ms, transform 130ms;
}

.menu-action::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--hud-you);
  transform: translateY(-50%);
  transition: height 140ms ease-out;
}

.menu-action:hover,
.menu-action:focus-visible {
  background: rgba(127, 196, 255, 0.10);
  border-color: rgba(127, 196, 255, 0.32);
  transform: translateX(3px);
  outline: none;
}

.menu-action:hover::before,
.menu-action:focus-visible::before { height: 100%; }

.menu-action .tag {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.menu-action .hint {
  font-size: 0.7rem;
  color: rgba(234, 240, 248, 0.4);
  margin-left: auto;
}

.menu-action.primary {
  background: rgba(127, 196, 255, 0.14);
  border-color: rgba(127, 196, 255, 0.35);
}

.menu-action.primary .tag { color: var(--hud-you); }
.menu-action.primary::before { height: 100%; }
.menu-action.compact { width: auto; margin: 0; justify-content: center; padding: 11px 22px; }
.menu-action:disabled { opacity: 0.4; cursor: default; transform: none; }

.name-input, .join-row input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--hud-line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--hud-ink);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.name-input:focus, .join-row input:focus {
  outline: none;
  border-color: rgba(127, 196, 255, 0.5);
  background: rgba(127, 196, 255, 0.06);
}

.join-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.join-row input {
  flex: 1;
  letter-spacing: 0.45em;
  font-size: 1.05rem;
  text-align: center;
}

.link-btn {
  background: none;
  border: 0;
  padding: 4px 2px;
  color: rgba(234, 240, 248, 0.5);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 120ms;
}

.link-btn:hover { color: var(--hud-you); }

.menu-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
}

.status-line {
  margin: 10px 0 0;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(234, 240, 248, 0.28);
}

#room-list .empty {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(234, 240, 248, 0.38);
}

/* Room rows reuse the menu-action shape so the browser and the play list feel
   like the same control. */
.room-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
}

.room-row .grow { flex: 1; min-width: 0; }

.room-row .count {
  font-size: 0.72rem;
  color: rgba(234, 240, 248, 0.55);
}

.room-row .code {
  font-family: var(--ui-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: rgba(234, 240, 248, 0.35);
}

/* Other screens still lean on the framework, but inherit the panel look. */
#screen-lobby, #screen-settings, #screen-help, #screen-end {
  border: 1px solid var(--hud-line);
  background: rgba(9, 13, 22, 0.55);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  padding: clamp(16px, 3vw, 26px);
}

#screen-lobby h2, #screen-settings h2, #screen-help h2 { margin-top: 0; }

#join-code, #lobby-code {
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-weight: 700;
}

.player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hud-line);
}

.player-row:last-child { border-bottom: 0; }
.player-row .grow { flex: 1; }

/* -------------------------------------------------------------------- HUD */

#hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  user-select: none;
  color: var(--hud-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

#hud[hidden] { display: none; }

/* Crosshair: four ticks and a centre dot. The gap stays open so the pixel you
   are aiming at is never the pixel covered by your own reticle. It takes the
   colour of the equipped weapon, which is the cheapest possible reminder of
   what will come out of the barrel. */
#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  transition: transform 90ms ease-out, opacity 120ms;
}

#crosshair i {
  position: absolute;
  background: var(--weapon-color);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.95);
  border-radius: 1px;
}

#crosshair i:nth-child(1) { left: 50%; top: 0; width: 2px; height: 9px; margin-left: -1px; }
#crosshair i:nth-child(2) { left: 50%; bottom: 0; width: 2px; height: 9px; margin-left: -1px; }
#crosshair i:nth-child(3) { top: 50%; left: 0; height: 2px; width: 9px; margin-top: -1px; }
#crosshair i:nth-child(4) { top: 50%; right: 0; height: 2px; width: 9px; margin-top: -1px; }

#crosshair u {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.9;
}

/* Reloading opens the reticle: you can see you are not ready to fire without
   looking away from your target. */
#crosshair.firing { transform: translate(-50%, -50%) scale(1.45); opacity: 0.6; }

#hitmarker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  opacity: 0;
}

#hitmarker i {
  position: absolute;
  width: 9px;
  height: 2px;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
}

#hitmarker i:nth-child(1) { top: 3px;  left: 3px;  transform: rotate(45deg); }
#hitmarker i:nth-child(2) { top: 3px;  right: 3px; transform: rotate(-45deg); }
#hitmarker i:nth-child(3) { bottom: 3px; left: 3px;  transform: rotate(-45deg); }
#hitmarker i:nth-child(4) { bottom: 3px; right: 3px; transform: rotate(45deg); }

#hitmarker.show { animation: hitpop 240ms ease-out forwards; }
#hitmarker.kill i { background: var(--hud-bad); }

@keyframes hitpop {
  0%   { opacity: 1; transform: scale(0.55); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* A red rim rather than a full-screen wash: you can still see what is shooting
   at you while being told that something is. */
#damage-edge {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(255, 45, 32, 0.5) 100%);
  transition: opacity 140ms ease-out;
}

/* --- top bar */

#hud-top {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

#hud-score {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 20px;
  border: 1px solid var(--hud-line);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  background: var(--hud-panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#hud-score b { font-size: 1.65rem; font-weight: 800; line-height: 1; }
#score-you { color: var(--hud-you); }
#score-them { color: var(--hud-them); }

#hud-score .dash {
  width: 12px;
  height: 2px;
  background: var(--hud-line);
  border-radius: 2px;
}

#hud-timer {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hud-dim);
}

#hud-timer.urgent { color: var(--hud-bad); animation: pulse 1s ease-in-out infinite; }

@keyframes pulse { 50% { opacity: 0.45; } }

/* --- kill feed */

#hud-feed {
  position: absolute;
  top: 14px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 36vw;
}

.feed-row {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border: 1px solid var(--hud-line);
  border-left: 2px solid var(--hud-them);
  background: var(--hud-panel);
  font-size: 0.8rem;
  animation: feedin 200ms ease-out;
}

.feed-row .killer { color: var(--hud-you); font-weight: 700; }
.feed-row .victim { color: var(--hud-them); font-weight: 700; }
.feed-row .verb { color: var(--hud-dim); font-size: 0.72rem; }

@keyframes feedin {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

/* --- connection readout */

#hud-net {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 12px;
  border: 1px solid var(--hud-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  background: var(--hud-panel);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--hud-dim);
}

#hud-net[hidden] { display: none; }

.net-dot { color: var(--hud-ink); }

.net-dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  background: var(--hud-good);
  box-shadow: 0 0 6px currentColor;
}

.net-dot.relay::before { background: var(--hud-warn); }
.net-dot.solo::before { background: rgba(255, 255, 255, 0.3); }

/* --- vitals */

#hud-vitals {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 210px;
}

.vital-main { display: flex; align-items: baseline; gap: 7px; }

#hud-hp {
  font-size: 3rem;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  transition: color 140ms;
}

#hud-hp.low { color: var(--hud-bad); animation: pulse 720ms ease-in-out infinite; }

.vital-unit {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--hud-dim);
}

#hp-track, #armor-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-top: 7px;
}

#hp-fill, #armor-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  background: var(--hud-good);
  transition: transform 130ms ease-out, background 200ms;
}

/* Overhealed past 100 is worth showing as its own state — it is the reward for
   taking the middle of the map. */
#hp-fill.over { background: var(--hud-you); box-shadow: 0 0 10px var(--hud-you); }
#hp-fill.low { background: var(--hud-bad); }

#armor-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
#armor-track { flex: 1; height: 3px; margin-top: 0; }
#armor-fill { background: var(--hud-warn); }

#hud-armor {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--hud-warn);
  min-width: 22px;
  text-align: right;
}

/* --- weapon rack */

#hud-weapons {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.weapon-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  min-width: 150px;
  border: 1px solid var(--hud-line);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
  background: var(--hud-panel);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  opacity: 0.4;
  transition: opacity 130ms, border-color 130ms, transform 130ms;
}

.weapon-chip .key {
  font-size: 0.62rem;
  color: var(--hud-dim);
  border: 1px solid var(--hud-line);
  border-radius: 4px;
  padding: 1px 5px;
}

.weapon-chip .name { flex: 1; font-weight: 700; }

.weapon-chip .ready {
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.weapon-chip .ready i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  background: var(--chip-color, #fff);
}

.weapon-chip.active {
  opacity: 1;
  transform: translateX(-6px);
  border-color: color-mix(in oklab, var(--chip-color, #fff) 55%, transparent);
  box-shadow: 0 0 18px -6px var(--chip-color, #fff);
}

.weapon-chip.active .name { color: var(--chip-color, #fff); }

/* --- dash */

#hud-dash {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-label {
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  color: var(--hud-dim);
}

#hud-dash-track {
  width: 96px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

#hud-dash-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  background: var(--hud-dim);
  transition: transform 90ms linear, background 150ms;
}

#hud-dash-fill.ready { background: var(--hud-you); box-shadow: 0 0 8px var(--hud-you); }

/* --- objective readout (capture the flag) */

#hud-objective {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
}

#hud-objective[hidden] { display: none; }

.flag-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid var(--hud-line);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  background: var(--hud-panel);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.flag-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  box-shadow: 0 0 8px currentColor;
}

.flag-chip.taken { border-color: rgba(255, 212, 121, 0.5); color: var(--hud-warn); }
.flag-chip.dropped { border-color: rgba(255, 107, 90, 0.5); color: var(--hud-bad); }

.mode-line {
  margin: 0 0 12px;
  font-size: 0.85rem;
}

.mode-line strong { color: var(--hud-you); }
.mode-line span { color: rgba(234, 240, 248, 0.45); margin-left: 8px; }

/* --- centre announcements */

#hud-center {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  opacity: 0;
  transition: opacity 160ms;
}

#hud-center.show { opacity: 1; animation: announce 260ms ease-out; }
#hud-center .sub {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hud-dim);
}

@keyframes announce {
  from { transform: translate(-50%, -50%) scale(0.92); }
  to { transform: translate(-50%, -50%) scale(1); }
}

/* --- scoreboard */

#hud-scoreboard {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: min(480px, 88vw);
  border: 1px solid var(--hud-line);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  background: rgba(8, 11, 19, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 20px 22px;
}

#hud-scoreboard[hidden] { display: none; }

#hud-scoreboard table { width: 100%; border-collapse: collapse; }

#hud-scoreboard th {
  text-align: left;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--hud-dim);
  padding-bottom: 8px;
  font-weight: 600;
}

#hud-scoreboard td { padding: 7px 0; border-top: 1px solid var(--hud-line); }
#hud-scoreboard .you { color: var(--hud-you); font-weight: 700; }
#hud-scoreboard .num { text-align: right; }

/* ------------------------------------------------------------- pause/banner */

/* Above everything, and explicitly clickable.
 *
 * This was a real bug: with z-index left to `auto`, the pause card and the
 * canvas were siblings in the same stacking context, and clicks aimed at the
 * card's buttons were landing on the canvas instead — so "Menu" appeared to do
 * nothing. An overlay that has to receive input must say where it sits. */
#paused {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: auto;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    linear-gradient(105deg, rgba(4, 7, 14, 0.9) 0%, rgba(6, 10, 20, 0.7) 55%, rgba(4, 7, 14, 0.88) 100%);
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
}

#paused[hidden] { display: none; }

.pause-card {
  width: min(430px, 100%);
  border: 1px solid var(--hud-line);
  background: rgba(9, 13, 22, 0.72);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  padding: 22px 24px 20px;
}

.pause-eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hud-you);
}

.pause-title {
  margin: 6px 0 4px;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hud-ink);
}

.pause-sub {
  margin: 0 0 18px;
  font-size: 0.82rem;
  color: rgba(234, 240, 248, 0.45);
}

/* A compact reminder of the controls, because the moment you are looking at
   this screen is the moment you have forgotten one of them. */
.pause-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hud-line);
  font-size: 0.68rem;
  color: rgba(234, 240, 248, 0.4);
}

.pause-keys kbd {
  display: inline-block;
  min-width: 15px;
  margin-right: 2px;
  padding: 1px 4px;
  border: 1px solid var(--hud-line);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--ui-mono, monospace);
  font-size: 0.62rem;
  color: rgba(234, 240, 248, 0.7);
}

/* Browsers freeze hidden tabs. Say so out loud rather than letting the game
   look broken to someone testing with two tabs on one machine. */
#bg-warning {
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  z-index: 40;
  max-width: min(520px, 92vw);
  padding: 10px 16px;
  border: 1px solid rgba(255, 212, 121, 0.45);
  border-left: 3px solid var(--hud-warn);
  background: rgba(28, 20, 6, 0.92);
  color: #ffe6ab;
  font-size: 0.78rem;
  line-height: 1.4;
}

#bg-warning[hidden] { display: none; }

#banner {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 20;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(10, 13, 22, 0.92);
  border: 1px solid var(--hud-line);
  color: var(--hud-ink);
  font-size: 0.88rem;
  max-width: 90vw;
}

#banner[hidden] { display: none; }
#banner.bad { border-color: rgba(255, 110, 90, 0.5); }

/* This game needs a keyboard and a mouse. Saying so is more honest than
   shipping touch controls that cannot win a duel. */
#touch-warning {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  text-align: center;
  padding: 24px;
  background: var(--ui-bg);
  z-index: 50;
}

@media (pointer: coarse) and (max-width: 900px) {
  #touch-warning { display: grid; }
}

@media (max-width: 640px) {
  #hud-vitals { width: 150px; left: 14px; bottom: 14px; }
  #hud-hp { font-size: 2.1rem; }
  #hud-weapons { right: 14px; bottom: 14px; }
  .weapon-chip { min-width: 0; padding: 5px 9px; }
  .weapon-chip .name { display: none; }
  #hud-feed { max-width: 55vw; }
  #hud-net { font-size: 0.62rem; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  #crosshair, .feed-row, #hitmarker, #hud-center, #hud-timer.urgent, #hud-hp.low {
    transition: none;
    animation: none;
  }
}