/* Fonts: Barlow and Barlow Condensed (SIL Open Font License), served from public/fonts. */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/barlow-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/barlow-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/barlow-condensed-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/barlow-condensed-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url(../fonts/barlow-condensed-800.woff2) format("woff2"); }

:root {
  --bg: #0b0d10;
  --panel: #13171b;
  --panel-2: #1b2026;
  --panel-3: #232a31;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.2);
  --text: #eef1f2;
  --dim: #9ba6ac;
  --accent: #ff6a1a;
  --accent-hi: #ff8a45;
  --accent-ink: #1c0b02;
  --danger: #ff4b3e;
  --cash: #ffc23d;
  --xp: #4cc9f0;
  --hp: #6ad35a;
  --scrim: rgba(7, 9, 11, 0.74);
  --cut: 12px;
  /* The top padding of a screen: 16px with no top inset. Under a status bar it
     is the inset plus up to 30px, so the content stays out of the soft blur
     that iOS 26 puts under the status bar (about 30px deep). */
  --pad-top: calc(max(16px, env(safe-area-inset-top)) + min(30px, env(safe-area-inset-top)));
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
/* The body has no background of its own, so the .backdrop layer shows. */
html, body {
  margin: 0; height: 100%; color: var(--text); font-family: var(--font);
  font-size: 15px; -webkit-font-smoothing: antialiased; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
body { overflow: hidden; }
::selection { background: var(--accent); color: var(--accent-ink); }
input { caret-color: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: var(--panel-3) transparent; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; margin: 0; letter-spacing: 0.02em; }
h2 { font-size: 15px; font-weight: 700; letter-spacing: 0.14em; color: var(--dim); margin-bottom: 12px; }
h3 { font-size: 20px; color: var(--text); margin: 30px 0 12px; display: flex; align-items: center; gap: 12px; }
h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
kbd {
  font: 700 12px var(--display); letter-spacing: 0.06em; background: var(--panel-3); border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: 3px; padding: 1px 6px; color: var(--text);
}
svg { flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The menu screens sit on a dimmed frame of a real run (img/backdrop.jpg). */
.backdrop {
  position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11, 13, 16, 0.2) 0%, rgba(11, 13, 16, 0.55) 55%, rgba(11, 13, 16, 0.92) 100%),
    linear-gradient(90deg, rgba(11, 13, 16, 0.92) 0%, rgba(11, 13, 16, 0.7) 40%, rgba(11, 13, 16, 0.25) 80%),
    url(../img/backdrop.jpg) center 30% / cover no-repeat,
    var(--bg);
}

/* iOS 26 blurs the page under the status bar. A solid band there makes it
   use the band colour instead. It shows on every screen but the game. */
.status-band { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--bg); z-index: 3; pointer-events: none; }

/* .screen and #s-game stop above the Safari 26 toolbar: see the 100dvh rule under "Game". */
.screen {
  position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; padding: var(--pad-top) max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
  display: flex; justify-content: center; align-items: flex-start;
  scroll-padding-top: var(--pad-top); /* a focused field stops below the status band */
}
/* Panels: one clipped corner (bottom right); a hairline draws the border along the cut. */
.card {
  background: var(--panel); border: 1px solid var(--line); padding: 18px; position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.card::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; pointer-events: none;
  background: linear-gradient(to top left, transparent calc(50% - 0.5px), var(--line-2) calc(50% - 0.5px), var(--line-2) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* The wordmark: HORDE in white, LOCK on an orange slab. */
.logo { font: 800 64px/0.9 var(--display); letter-spacing: 0.01em; display: inline-flex; align-items: stretch; }
.logo span {
  color: var(--accent-ink); background: var(--accent); padding: 0 0.12em 0 0.1em; margin-left: 0.06em;
  clip-path: polygon(0.14em 0, 100% 0, calc(100% - 0.14em) 100%, 0 100%);
}
.logo.small { font-size: 32px; }
.tagline { color: var(--text); margin: 14px 0 24px; line-height: 1.45; font-size: 16px; max-width: 34ch; }
.invite { color: var(--accent-hi); font-weight: 600; margin: 0; line-height: 1.45; }

/* Buttons: square-cut slabs; the primary one is the only orange thing on a screen. */
.btn {
  appearance: none; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text);
  font: 700 17px/1.1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 12px 16px; min-height: 46px; border-radius: 0; cursor: pointer; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.06s;
}
.btn:hover { background: var(--panel-3); border-color: rgba(255, 255, 255, 0.32); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: var(--panel-2); border-color: var(--line-2); }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 800;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn.primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
.btn.primary:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: -6px; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.06); }
.btn.big { min-height: 60px; font-size: 22px; font-weight: 800; letter-spacing: 0.05em; }
.btn.tiny { width: auto; min-height: 38px; padding: 8px 12px; font-size: 14px; }
.btn.small { width: auto; min-height: 38px; padding: 8px 12px; font-size: 15px; }
.btn.danger { border-color: rgba(255, 75, 62, 0.55); color: var(--danger); }
.btn.danger:hover { background: rgba(255, 75, 62, 0.12); }
.btn svg { width: 22px; height: 22px; }
.btn.back svg { width: 18px; height: 18px; margin-left: -4px; }

.field { display: block; }
.field span { display: block; font: 700 13px var(--display); color: var(--dim); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 7px; }
input[type=text] {
  width: 100%; background: #07090b; border: 1px solid var(--line-2); color: var(--text); border-radius: 0;
  padding: 12px 13px; min-height: 48px; font: 600 17px var(--font); outline: none;
}
input[type=text]::placeholder { color: #6f7a80; }
input[type=text]:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--dim); font: 700 13px var(--display); letter-spacing: 0.14em; text-transform: uppercase; margin: 2px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hint { color: var(--dim); font-size: 13.5px; line-height: 1.45; margin: 4px 0 0; }
.error { color: var(--danger); font-size: 14px; min-height: 18px; margin: 0; }

/* Sign in */
.auth { width: min(440px, 100%); margin-top: min(14vh, 120px); }
.auth-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; }

/* Menu: one column on a phone; the deploy column and a side column on a wide screen. */
.menu-grid { width: min(1080px, 100%); display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 16px 28px; align-items: start; }
.menu-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.menu-head .title { font-size: 30px; color: var(--text); margin: 0; letter-spacing: 0.03em; }
.menu-head .row { gap: 6px; }
.menu-main, .menu-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.menu-side { padding-top: 2px; }


.profile { display: grid; grid-template-columns: auto 1fr; gap: 14px 14px; align-items: center; padding: 16px; }
.profile .who { display: contents; }
.badge {
  width: 56px; height: 56px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center;
  font: 800 30px var(--display); flex: none; grid-row: span 1;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.profile .name { font: 800 26px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.profile .sub { color: var(--dim); font-size: 13.5px; margin-top: 5px; }
.xp { grid-column: 1 / -1; }
.xp .bar { height: 8px; }
.xp .nums { display: flex; justify-content: space-between; gap: 10px; font: 600 13px var(--font); color: var(--dim); margin-top: 7px; font-variant-numeric: tabular-nums; }
.stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin: 2px -16px -16px; }
.stat { padding: 11px 16px 12px; }
.stats .stat + .stat { border-left: 1px solid var(--line); }
.stat b { display: block; font: 800 24px/1 var(--display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 4px; font: 700 12px var(--display); color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; }
.stat.cash b { color: var(--cash); }

/* A guest's call to save the progress: in the profile card and on the over screen. */
.save-cta { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; background: var(--panel-2); border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.save-cta p { margin: 0; flex: 1; color: var(--dim); font-size: 13.5px; line-height: 1.4; }
.save-cta .btn { flex: none; }
@media (max-width: 380px) { .save-cta { flex-direction: column; align-items: stretch; } }
/* The save dialog covers every screen, also the over screen of a run. */
.overlay.save-dlg { position: fixed; z-index: 40; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.save-dlg .field { text-align: left; }

.play { display: flex; flex-direction: column; gap: 10px; }
/* The main action: a tall slab at thumb height. */
.play .btn.primary.big { min-height: 92px; font-size: 40px; justify-content: space-between; padding: 0 18px 0 22px; --cut: 18px; }
.play .btn.primary.big .go { width: 34px; height: 34px; }
.play .btn .go { display: none; }
.play .btn.primary .go, .play .armoury-btn .go { display: block; }
.squad-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.squad-row .btn.big { font-size: 18px; min-height: 100%; line-height: 1.05; padding: 10px 12px; }
.squad-row .btn.big.primary { font-size: 18px; }
.squad-make { display: flex; flex-direction: column; gap: 6px; }
.squad-row .squad-make .btn.big { flex: 1; min-height: 46px; }
.join-row { display: flex; flex-direction: column; gap: 0; }
.join-row input { text-transform: uppercase; text-align: center; letter-spacing: 0.32em; padding-left: calc(13px + 0.32em); font: 800 22px var(--display); border-bottom: 0; }
.join-row .btn { min-height: 46px; flex: 1; }
.join-row .btn.primary { clip-path: none; }
/* The Armoury button carries the loadout: primary, secondary, armour. */
.armoury-btn { flex-direction: column; align-items: stretch; gap: 0; padding: 0; text-align: left; }
.ab-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px 20px; font-size: 22px; font-weight: 800; }
.armoury-btn .go { width: 22px; height: 22px; color: var(--dim); }
.ab-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ls { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px 20px; min-width: 0; text-transform: none; letter-spacing: 0; }
.ls + .ls { border-left: 1px solid var(--line); padding-left: 12px; }
.ls small { font: 700 12px var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.ls svg { width: 100%; max-width: 110px; height: 22px; fill: #c9d3d8; }
.ls b { font: 800 17px/1.05 var(--display); letter-spacing: 0.03em; text-transform: uppercase; overflow-wrap: anywhere; margin-top: auto; } /* the names share one baseline */
.ls.empty b { color: var(--dim); }

.squad-list { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.squad-list p { margin: 0; line-height: 1.45; }
.squad { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel-2); border: 1px solid var(--line); padding: 8px 8px 8px 14px; }
.squad b { font: 800 22px var(--display); letter-spacing: 0.2em; color: var(--text); }
.squad .run { color: var(--dim); }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 14px; color: var(--dim); line-height: 1.6; }
@media (min-width: 861px) {
  /* Auto margins centre the menu, but a short window still scrolls to its top. */
  #s-menu .menu-grid { margin-block: auto; }
  #s-menu .menu-head { margin-bottom: 18px; }
  #s-menu .logo.small { font-size: 56px; }
  .menu-grid { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
  .play .btn.primary.big { min-height: 112px; font-size: 52px; }
  .squad-row .btn.big { font-size: 21px; }
  .menu-side { max-width: 460px; justify-self: end; width: 100%; }
}
.bar { background: rgba(0, 0, 0, 0.55); border: 1px solid var(--line); height: 8px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.15s; }
.xp .bar > i { background: var(--xp); }

/* Armoury */
.armoury { width: min(1080px, 100%); padding-bottom: 40px; }
/* The sticky header fills the whole width, so its band has no side edges.
   The scroll padding keeps a focused control below it. */
#s-armoury { scroll-padding-top: calc(var(--pad-top) + 94px); }
.armoury .menu-head {
  position: sticky; top: calc(-1 * var(--pad-top)); z-index: 2;
  margin: calc(-1 * var(--pad-top)) calc(50% - 50vw) 14px;
  padding: var(--pad-top) calc(50vw - 50%) 14px;
  background: linear-gradient(var(--bg) 72%, rgba(11, 13, 16, 0));
}
.wallet { display: flex; gap: 14px; font: 800 22px var(--display); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.wallet .c { color: var(--cash); }
.wallet .l { color: var(--xp); }
.armoury-note { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--accent); background: rgba(255, 106, 26, 0.1); font-size: 14.5px; line-height: 1.45; }
.loadout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.slot { background: var(--panel); padding: 14px 16px; }
.slot small { display: block; font: 700 12px var(--display); color: var(--dim); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 5px; }
.slot b { font: 800 22px/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.shop-hint { margin: -4px 0 12px; color: var(--dim); font-size: 14px; line-height: 1.45; }
.item-card .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 700 12px var(--display); color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; }
.item-card .meta b { color: var(--text); font-weight: 800; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.item-card { background: var(--panel); border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.item-card.equipped { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.item-card.equipped::before {
  content: "Equipped"; position: absolute; top: -10px; right: 12px; background: var(--accent); color: var(--accent-ink);
  font: 800 11px var(--display); letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px 3px 12px;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
}
.item-card.locked { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 8px, transparent 8px 16px), var(--panel); }
.item-card.locked > :not(.actions) { opacity: 0.55; }
.item-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.item-card header b { font: 800 23px/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.item-card header span { font: 700 12px var(--display); color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; }
.item-card p { margin: 0; color: var(--dim); font-size: 14px; line-height: 1.4; min-height: 38px; }
.item-card svg { width: 100%; height: 52px; margin: 2px 0; }
.statline { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; font: 700 12px var(--display); color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; }
.statline .bar { height: 6px; border: 0; background: rgba(255, 255, 255, 0.07); }
.statline .bar > i { background: #c5ced3; }
.item-card .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.item-card .actions .btn { flex: 1; white-space: nowrap; }
.item-card .actions .btn.primary { --cut: 8px; }
.tag { font: 800 12px var(--display); color: var(--text); background: var(--panel-3); border: 1px solid var(--line-2); padding: 1px 6px; text-transform: uppercase; letter-spacing: 0.1em; margin-left: 4px; vertical-align: 2px; }
.fits { display: grid; gap: 6px; padding-top: 4px; }
.fit { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 10px; }
.fit span { font: 700 12px var(--display); color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; }
.fit select { width: 100%; min-width: 0; height: 36px; padding: 0 6px; background: #07090b; color: var(--text); border: 1px solid var(--line-2); border-radius: 0; font: 600 16px var(--font); } /* 16px: iOS zooms on a smaller control */
.fit select:focus-visible { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.fit select:disabled { color: var(--dim); opacity: 0.7; }
.pips { display: inline-flex; gap: 3px; vertical-align: 1px; }
.pips i { width: 8px; height: 8px; border: 1px solid var(--dim); }
.pips i.on { background: var(--cash); border-color: var(--cash); }

/* Lobby */
.lobby { width: min(460px, 100%); margin-top: min(8vh, 60px); text-align: center; display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; }
.lobby h2 { margin: 0; }
.lobby p { margin: 0; }
.code { font: 800 84px/1 var(--display); letter-spacing: 0.22em; color: var(--text); padding-left: 0.22em; margin: -2px 0 2px; font-variant-numeric: tabular-nums; }
.lobby-players { display: flex; flex-direction: column; gap: 1px; margin: 6px 0; text-align: left; background: var(--line); border: 1px solid var(--line); }
.lp { display: flex; align-items: center; gap: 12px; background: var(--panel-2); padding: 12px 14px; }
.lp i { width: 14px; height: 14px; flex: none; clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%); }
.lp b { flex: 1; font: 800 20px var(--display); text-transform: uppercase; letter-spacing: 0.03em; }
.lp span { color: var(--dim); font-size: 13.5px; }
.lp .tag { color: var(--text); font-size: 12px; }
.row { display: flex; gap: 8px; }
.menu-head .row { flex-wrap: wrap; justify-content: flex-end; }
/* A phone: the header buttons go in a row under the logo. */
@media (max-width: 520px) { #s-menu .menu-head { flex-wrap: wrap; } #s-menu .menu-head .row { justify-content: flex-start; } }
/* Private or public: a private squad joins only by its code or link. */
.visibility { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--panel-2); border: 1px solid var(--line); padding: 10px 10px 10px 14px; text-align: left; }
.visibility p { font-size: 14px; color: var(--dim); line-height: 1.4; }
.visibility p b { color: var(--text); font: 800 16px var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.visibility .btn { width: auto; flex: none; white-space: nowrap; }

/* Squad chat */
.lobby-chat { display: flex; flex-direction: column; gap: 0; text-align: left; }
.chat-log { display: flex; flex-direction: column; gap: 4px; max-height: 150px; min-height: 48px; overflow-y: auto; background: #07090b; border: 1px solid var(--line); border-bottom: 0; padding: 9px 12px; font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.chat-log .empty { color: var(--dim); }
.chat-line b { margin-right: 7px; font: 800 15px var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.chat-form { display: flex; gap: 0; }
.chat-form input { flex: 1; min-width: 0; }
.chat-form .btn { width: auto; flex: none; min-height: 48px; border-left: 0; }
/* In a run: the last lines over the team list. A line fades after 10 s, but
   all of them show while the chat bar is open. */
.hud-chat { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; font: 600 14px/1.3 var(--font); overflow-wrap: anywhere; }
.hud-chat .chat-line { background: rgba(8, 11, 13, 0.72); padding: 4px 9px; align-self: flex-start; transition: opacity 0.6s; text-shadow: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* 3 rows at most, all while the bar is open */
.hud-chat .chat-line b { font-size: 14px; }
#hud.chatting .hud-chat .chat-line { -webkit-line-clamp: unset; line-clamp: none; }
.hud-chat .chat-line.old { opacity: 0; }
.hud-chat .chat-line.gone { display: none; }
#hud.chatting .hud-chat .chat-line.old { opacity: 1; display: -webkit-box; }
.chat-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 120px); width: min(480px, calc(100vw - 32px)); pointer-events: auto; text-shadow: none; }
.chat-bar input { width: 100%; background: rgba(7, 9, 11, 0.9); border-color: var(--accent); user-select: text; -webkit-user-select: text; touch-action: auto; }
/* A phone keyboard covers the bottom half: the bar goes to the top. */
body.touch .chat-bar { bottom: auto; top: calc(max(12px, env(safe-area-inset-top)) + 4px); z-index: 2; }

/* Game */
/* Safari 26 on iOS draws the page behind its floating toolbar, so a box with
   inset: 0 goes under the toolbar. The screens use the dynamic viewport
   height (100dvh) and stop above the toolbar. min() keeps the old height where
   an on-screen keyboard makes the window smaller than 100dvh. Only the canvas
   fills the whole window, so the game shows through the toolbar glass. The
   touch zones stop above the toolbar, so the overlays always cover them. */
#s-game { position: fixed; inset: 0; background: #0b0f12; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
@supports (height: 100dvh) { .screen, #s-game { bottom: auto; height: min(100dvh, 100%); } }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
/* HUD text sits straight on the game: a soft shadow keeps it legible on grass and on roads. */
/* --hud-col: the width of the left column. A narrow screen in portrait gives it
   all the width up to the top-right block (main.js sets --hud-tr-w), so the
   objective takes two lines, not four. */
#hud { --hud-col: min(260px, 42vw); position: absolute; inset: 0; pointer-events: none; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.45); }
#hud > div { position: absolute; }
.hud-top-left { top: max(12px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); width: var(--hud-col); }
.hud-level { font: 800 26px/1 var(--display); letter-spacing: 0.06em; }
.hud-mut { font: 800 14px var(--display); letter-spacing: 0.1em; color: var(--accent-hi); white-space: nowrap; margin-top: 2px; }
@media (max-width: 760px) { .hud-mut .bonus { display: none; } } /* a phone shows the name only */
.hud-obj { font: 600 14px/1.3 var(--font); margin: 4px 0 7px; }
.hud-obj.open { color: var(--hp); font-weight: 700; }
.bar.obj { height: 5px; border: 0; background: rgba(0, 0, 0, 0.5); }
.bar.obj > i { background: var(--text); }
.hud-obj.open + .bar.obj > i { background: var(--hp); }
/* The boss bar: top centre, between the HUD blocks; below them on a narrow screen. */
.hud-boss { top: calc(max(12px, env(safe-area-inset-top)) + 4px); left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 2 * (var(--hud-col) + 44px + max(env(safe-area-inset-left), env(safe-area-inset-right))))); text-align: center; }
.hud-boss span { font: 800 16px var(--display); letter-spacing: 0.24em; color: #ffd0c9; }
.hud-boss .bar { height: 10px; margin-top: 3px; background: rgba(60, 6, 10, 0.85); border: 1px solid rgba(255, 75, 62, 0.5); }
.hud-boss .bar i { display: block; height: 100%; background: var(--danger); }
/* The Overdrive timer: under the boss bar, between the HUD blocks. */
.hud-od { top: calc(max(12px, env(safe-area-inset-top)) + 40px); left: 50%; transform: translateX(-50%); font: 800 17px var(--display); letter-spacing: 0.12em; color: var(--accent-hi); white-space: nowrap; }
/* A narrow screen in portrait has no room between the top blocks: the boss bar
   and the timer go under the lowest of them (main.js sets --hud-clear-h, a
   height under the top inset). A short landscape screen keeps them at the top
   centre and gives the left column less width (see max-height: 460px). */
@media (max-width: 760px) and (min-height: 461px) {
  .hud-boss { top: calc(max(12px, env(safe-area-inset-top)) + var(--hud-clear-h, 166px) + 14px); width: 56vw; }
  .hud-od { top: calc(max(12px, env(safe-area-inset-top)) + var(--hud-clear-h, 166px) + 50px); }
  #hud { --hud-col: min(300px, calc(100vw - var(--hud-tr-w, 132px) - 42px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
  /* Three buttons in a row at most: a fourth goes under them, so the
     top-right block stays narrow and the left column keeps its width. */
  .hud-btns { flex-wrap: wrap; justify-content: flex-end; max-width: 132px; }
}
.hud-top-right { top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#minimap { width: 190px; height: 104px; background: rgba(8, 11, 13, 0.6); border: 1px solid var(--line-2); }
.hud-earn { font: 800 17px var(--display); letter-spacing: 0.04em; }
.hud-earn .c { color: var(--cash); margin-right: 10px; }
.hud-earn .x { color: var(--xp); }
.hud-btn {
  pointer-events: auto; background: rgba(8, 11, 13, 0.62); color: var(--text); border: 1px solid var(--line-2); border-radius: 0;
  width: 40px; height: 36px; cursor: pointer; display: grid; place-items: center; padding: 0; position: relative;
}
.hud-btn svg { width: 20px; height: 20px; }
.hud-btn:hover { background: rgba(30, 36, 42, 0.8); }
.hud-btns { display: flex; gap: 6px; }
.hud-btn.off { color: var(--dim); }
.hud-btn.off::after { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 2px; background: var(--danger); transform: rotate(-40deg); }
@media (forced-colors: active) { .hud-btn.off::after { background: CanvasText; } }
.hud-bottom-left { bottom: max(14px, env(safe-area-inset-bottom)); left: max(14px, env(safe-area-inset-left)); width: min(280px, 44vw); }
.hp-row { display: flex; align-items: center; gap: 10px; position: relative; }
.hp-row > span:first-of-type { font: 800 34px/1 var(--display); min-width: 52px; order: -1; }
.bar.hp { flex: 1; height: 14px; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--line-2); }
.bar.hp > i { background: var(--hp); transition: width 0.1s; }
.bar.hp.low > i { background: var(--danger); }
.hud-team { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tm { display: grid; grid-template-columns: 8px 1fr 76px; align-items: center; gap: 8px; font: 700 15px/1.1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.tm i { width: 8px; height: 16px; }
.tm b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm .bar { height: 6px; border: 0; background: rgba(0, 0, 0, 0.6); }
.tm .bar > i { background: var(--hp); }
.tm.down b { color: var(--danger); }
.tm.down .bar > i { background: var(--danger); }
.hud-bottom-right { bottom: max(14px, env(safe-area-inset-bottom)); right: max(14px, env(safe-area-inset-right)); display: flex; align-items: flex-end; gap: 16px; }
.items { display: flex; flex-direction: column; gap: 5px; }
.item { display: flex; align-items: center; gap: 8px; background: rgba(8, 11, 13, 0.62); border: 1px solid var(--line); padding: 4px 9px 4px 6px; font: 700 13px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); text-shadow: none; }
.item em { font-style: normal; }
.item b { font: 800 22px/1 var(--display); color: var(--text); min-width: 16px; text-align: center; }
.item kbd { font-size: 11px; padding: 0 5px; }
.item .ico { width: 18px; height: 18px; order: -1; color: var(--text); }
.item.empty { opacity: 0.45; }
.weapon { text-align: right; min-width: 160px; position: relative; }
.slots { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; margin-bottom: 2px; }
.slots span { font: 700 15px var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); padding: 1px 0; }
.slots span.on { color: var(--text); font-weight: 800; font-size: 17px; }
.slots span.on::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--accent); margin-right: 7px; vertical-align: 2px; }
/* A fixed height: the ∞ sign and the digits have different line boxes, and the block must not move. */
.ammo { display: flex; justify-content: flex-end; align-items: baseline; height: 54px; line-height: 0.95; }
.ammo span { font: 800 56px/0.95 var(--display); letter-spacing: 0.01em; }
.ammo small { font: 800 22px/1 var(--display); color: var(--dim); margin-left: 6px; }
.ammo.low span { color: var(--danger); }
#hud-sw { position: absolute; right: -26px; top: 50%; transform: translateY(-50%); min-width: 0; color: var(--hp); display: grid; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)); }
#hud-sw.hidden { display: none; }
#hud-sw svg { width: 20px; height: 20px; }
/* Above the weapon block, so that it does not move the HUD when it shows. */
.ammo-note { position: absolute; right: 0; bottom: 100%; margin-bottom: 4px; white-space: nowrap; font: 800 15px var(--display); letter-spacing: 0.12em; color: var(--danger); text-align: right; }
body.touch .ammo-note { right: auto; left: 50%; transform: translateX(-50%); text-align: center; }
.ammo-note.last { color: var(--cash); }
.ammo-note.swap, .ammo-note.none { animation: ammo-blink 0.9s steps(1, end) infinite; }
@keyframes ammo-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .ammo-note.swap, .ammo-note.none { animation: none; } }
.bar.reload { height: 5px; margin-top: 5px; background: rgba(0, 0, 0, 0.5); border: 0; visibility: hidden; }
.bar.reload.on { visibility: visible; }
.bar.reload > i { background: var(--cash); transition: none; }
/* Messages: dark slabs, centred; the big one is the level banner. */
.announce { top: 17%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(560px, 92vw); text-shadow: none; }
.announce div {
  background: rgba(8, 11, 13, 0.82); border: 1px solid var(--line-2); padding: 8px 16px; font: 600 15px/1.3 var(--font);
  animation: pop 4s forwards; text-align: center;
}
.announce .good { border-color: rgba(106, 211, 90, 0.65); color: #a8ec9b; }
.announce .bad { border-color: rgba(255, 75, 62, 0.65); color: #ff9a91; }
.announce .big {
  font: 800 34px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 26px 11px;
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  animation: banner 4s forwards;
}
.announce .big.bad { background: var(--danger); border-color: var(--danger); color: #1d0402; }
.announce .big.good { background: var(--hp); border-color: var(--hp); color: #071a03; }
@keyframes pop { 0% { opacity: 0; transform: translateY(-8px); } 6% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes banner {
  0% { opacity: 1; clip-path: polygon(14px 0, 14px 0, 0 100%, 0 100%); }
  7% { clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
  85% { opacity: 1; } 100% { opacity: 0; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
}
.hud-centre { top: 58%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: min(420px, 90vw); }
.hud-centre b { display: block; font: 800 48px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--danger); margin-bottom: 6px; }
.hud-centre span { font: 600 15px/1.4 var(--font); }
/* A tip for a new player (tips.js): one slab, bottom centre, above the weapon
   block of a touch screen. Blue, so it is not a good or bad message. */
.hud-tip {
  left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 150px); transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 10px; width: max-content;
  /* Between the bottom corner blocks (the chat and team list on the left). */
  max-width: max(260px, min(460px, calc(100vw - 2 * (min(280px, 44vw) + 28px))));
  background: rgba(8, 11, 13, 0.86); border: 1px solid var(--line-2); border-left: 3px solid var(--xp); padding: 8px 14px 8px 11px;
  font: 600 15px/1.4 var(--font); text-shadow: none; animation: tip-in 0.25s ease-out; transition: opacity 0.4s, border-color 0.2s;
}
.hud-tip > b { flex: none; font: 800 13px var(--display); letter-spacing: 0.14em; color: var(--xp); }
.hud-tip kbd { font-size: 12px; padding: 0 5px; }
.hud-tip.done { border-left-color: var(--hp); }
.hud-tip.done > b { color: var(--hp); }
.hud-tip.out { opacity: 0; }
#hud.chatting .hud-tip { display: none; }
@keyframes tip-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translateX(-50%); } }
body.touch .hud-tip { max-width: min(460px, calc(100vw - 32px)); }
/* A phone in landscape: lower, and clear of the team list at the top left. */
@media (max-height: 460px) {
  body.touch .hud-tip { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 112px); font-size: 14px; padding: 6px 12px 6px 10px; max-width: max(220px, calc(100vw - 2 * (min(200px, 40vw) + 28px))); }
}
/* There the boss bar and the Overdrive timer move down to the tip: they win. */
@media (max-height: 460px) and (max-width: 760px) {
  #hud:has(#hud-boss:not(.hidden)) .hud-tip, #hud:has(#hud-od:not(.hidden)) .hud-tip { display: none; }
}
.overlay-card p.tip { text-align: left; background: var(--panel-2); border-left: 3px solid var(--xp); padding: 9px 12px; color: var(--text); }
.overlay-card p.tip b { font: 800 13px var(--display); letter-spacing: 0.14em; color: var(--xp); margin-right: 10px; }

/* Overlays: pause, level break, run over. A heavy scrim, one panel, a banner title. */
.overlay { position: absolute; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 16px; }
.overlay-card::after { display: none; } /* it scrolls: a hairline would move with the content */
.overlay-card {
  width: min(480px, 100%); text-align: center; display: flex; flex-direction: column; gap: 12px; max-height: 100%; overflow-y: auto;
  padding: 0 20px 20px; border-top: 0;
}
.overlay-card h1 {
  font: 800 46px/1 var(--display); letter-spacing: 0.04em; margin: 0 -20px 6px; padding: 16px 20px 14px;
  background: var(--panel-3); color: var(--text); animation: settle 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.overlay-card h1.good { background: var(--hp); color: #071a03; }
.overlay-card h1.bad { background: var(--danger); color: #1d0402; }
/* The title shows at once and settles: no frame hides it. */
@keyframes settle { from { transform: translateY(-6px); letter-spacing: 0.1em; } to { transform: none; letter-spacing: 0.04em; } }
.overlay-card p { margin: 0; color: var(--dim); line-height: 1.45; }
.rewards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 4px 0; }
.rewards .stat { background: var(--panel-2); padding: 12px 10px; }
.rewards .stat b { font-size: 38px; }
.rewards .x b { color: var(--xp); }
.overlay-card p.levelup { color: var(--accent-hi); font: 800 20px var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.scores { display: flex; flex-direction: column; gap: 1px; text-align: left; background: var(--line); border: 1px solid var(--line); }
.scores div { display: flex; justify-content: space-between; gap: 10px; background: var(--panel-2); padding: 9px 12px; font-size: 14.5px; }
.scores b { font: 800 17px var(--display); letter-spacing: 0.04em; }
.run-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; text-align: left; background: var(--line); border: 1px solid var(--line); }
.run-stats div { display: flex; flex-direction: column; gap: 2px; background: var(--panel-2); padding: 8px 12px; }
.run-stats span { font: 700 12px var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.run-stats b { font: 800 20px var(--display); letter-spacing: 0.02em; }
.run-stats .mvp b { color: var(--cash); }

/* Touch controls */
.touch-zone, .stick, .touch-buttons { display: none; }
body.touch .touch-zone { display: block; position: absolute; top: 0; bottom: 0; width: 50%; }
body.touch #touch-left { left: 0; }
body.touch #touch-right { right: 0; }
body.touch .stick {
  position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.24); background: rgba(8, 11, 13, 0.25);
}
body.touch .stick.on { display: block; }
.stick i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(255, 255, 255, 0.34); }
#stick-right i { background: rgba(255, 106, 26, 0.6); }
/* One row of equal buttons: an icon and the count on top, the name under them. */
/* The cells stop at 88px, so four buttons take less of the stick zones than
   five. Only the buttons take touches, not the gaps round them. */
body.touch #hud .touch-buttons {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 88px); justify-content: center; gap: 6px;
  left: 50%; transform: translateX(-50%); bottom: max(10px, env(safe-area-inset-bottom));
  width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
  text-shadow: none;
}
.touch-buttons button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 54px; padding: 6px 2px;
  background: rgba(8, 11, 13, 0.82); border: 1px solid var(--line-2); color: var(--text); border-radius: 0; touch-action: none; white-space: nowrap;
  pointer-events: auto;
}
.touch-buttons i { display: flex; align-items: center; gap: 5px; height: 20px; }
.touch-buttons svg { width: 20px; height: 20px; }
.touch-buttons b { font: 800 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.touch-buttons span { font: 700 12px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.touch-buttons button.empty { opacity: 0.45; }
/* On touch screens the thumbs cover the bottom corners, so the HUD moves. */
/* The HP and team block goes under the top-left block (main.js sets --hud-tl-h).
   The chat lines go under the HP row, so they do not move the team list. On a
   narrow portrait screen the boss bar goes under the chat lines. */
body.touch #hud .hud-bottom-left { bottom: auto; top: calc(max(12px, env(safe-area-inset-top)) + var(--hud-tl-h, 70px) + 12px); width: var(--hud-col); display: flex; flex-direction: column; }
body.touch .hud-chat { order: 1; margin: 10px 0 0; }
body.touch .tm { grid-template-columns: 8px 1fr 56px; }
/* max-content: left: 50% gives the block only half the width, and the weapon name wrapped on a small phone. */
body.touch #hud .hud-bottom-right { right: auto; left: 50%; transform: translateX(-50%); width: max-content; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 62px); }
body.touch .items { display: none; }
body.touch .weapon { text-align: center; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
body.touch .slots { flex-direction: row; margin: 0; }
body.touch .slots span:not(.on) { display: none; }
body.touch .ammo { height: 33px; }
body.touch .ammo span { font-size: 34px; }
body.touch .ammo small { font-size: 17px; }
body.touch .bar.reload { position: absolute; left: 0; right: 0; bottom: -4px; margin: 0; }
body.touch .hp-row > span:first-of-type { font-size: 28px; min-width: 42px; }
body.touch .bar.hp { height: 10px; }
/* The Second Wind heart keeps its place inside the column, clear of the top-right buttons. */
body.touch .hp-row { padding-right: 26px; }
body.touch #hud-sw { right: 0; }
.touch-buttons button:active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.touch-buttons button:active span { color: var(--accent-ink); }
body.touch .item kbd, body.touch .controls-help { display: none; }
body.touch #view { cursor: none; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: #2a0f0d; border: 1px solid rgba(255, 75, 62, 0.6); color: #ffc0ba;
  padding: 11px 16px; font: 600 14.5px/1.35 var(--font); z-index: 50; max-width: 92vw; text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
@supports (height: 100dvh) { .toast { bottom: auto; top: calc(100dvh - 26px); transform: translate(-50%, -100%); } }
.toast.ok { background: #102109; border-color: rgba(106, 211, 90, 0.6); color: #c6f3bc; }
/* The new version bar: at the bottom, away from the header buttons. As the
   toast, it uses 100dvh, so the Safari 26 toolbar does not cover it. While it
   shows, the toast and the end of a screen move up above it. */
.update-bar {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; font: 600 14.5px var(--font);
  background: var(--panel-2); border: 1px solid var(--accent); color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
@supports (height: 100dvh) { .update-bar { bottom: auto; top: calc(100dvh - 16px); transform: translate(-50%, -100%); } }
.update-bar .btn { flex: none; --cut: 8px; }
body.has-update .toast { bottom: 90px; }
@supports (height: 100dvh) { body.has-update .toast { top: calc(100dvh - 90px); } }
body.has-update .screen { padding-bottom: 96px; }
@media (max-width: 720px) {
  .update-bar { left: 16px; right: 16px; transform: none; max-width: none; justify-content: space-between; }
  @supports (height: 100dvh) { .update-bar { transform: translateY(-100%); } }
}

@media (max-width: 860px) {
  .menu-grid { grid-template-columns: minmax(0, 1fr); width: min(520px, 100%); }
  .menu-side { padding-top: 0; }
}
@media (max-width: 720px) {
  .loadout { grid-template-columns: 1fr; }
  .logo { font-size: 52px; }
  .logo.small { font-size: 28px; }
  .menu-head .title { font-size: 26px; }
  .play .btn.primary.big { min-height: 84px; font-size: 36px; }
  .code { font-size: 72px; }
  .overlay-card h1 { font-size: 40px; }
  #minimap { width: 130px; height: 72px; }
  .ammo { height: 42px; }
  .ammo span { font-size: 44px; }
  .keys { grid-template-columns: 1fr; }
  .hud-bottom-left { width: min(280px, 38vw); }
  .hud-bottom-right { gap: 10px; }
  .weapon { min-width: 0; }
  .item em { display: none; }
}
@media (max-width: 380px) {
  .stat { padding: 10px 10px 11px; }
  .stat b { font-size: 21px; }
  .squad-row .btn.big { font-size: 16px; }
}
@media (max-height: 460px) {
  .hud-level { font-size: 20px; }
  #minimap { width: 130px; height: 72px; }
  .announce { top: 12%; }
  #hud { --hud-col: min(220px, 30vw); }
  .touch-buttons button { min-height: 46px; gap: 2px; padding: 4px 2px; }
  .touch-buttons svg { width: 18px; height: 18px; }
  .touch-buttons b { font-size: 18px; }
  body.touch #hud .hud-bottom-right { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 54px); }
  .overlay-card h1 { font-size: 34px; padding: 10px 20px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}