:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --small: 14px;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #e8e3d8;
  color: #20292c;
  font-family: system-ui, sans-serif;
}
[hidden] {
  display: none !important;
}
#game-root {
  position: relative;
  width: 100%;
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px);
  min-height: 260px;
  overflow: hidden;
  background: #e8e3d8;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}
#game-root:fullscreen {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}
#game-root:-webkit-full-screen {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}
#arena {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
#scenery,
.parallax {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform;
}
#hud,
#touch-controls {
  z-index: 2;
}
.overlay {
  z-index: 3;
}
button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #364143;
  border-radius: 9px;
  background: #f8f4e9;
  color: #263236;
  font:
    600 var(--small) system-ui,
    sans-serif;
  cursor: pointer;
  touch-action: none;
}
button:hover {
  background: #fff;
}
button:focus-visible {
  outline: 3px solid #d3323a;
  outline-offset: 2px;
}
button:active,
button.held {
  background: #d7d8d0;
}
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-size: var(--small);
}
.red {
  color: #c52e37;
}
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-t) + 68px) calc(var(--safe-r) + 24px)
    calc(var(--safe-b) + 24px) calc(var(--safe-l) + 24px);
  background: #e8e3d8b0;
}
.panel {
  width: min(420px, 100%);
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 24px;
  background: #f9f5ebf5;
  border: 1px solid #b5b7aa;
  box-shadow: 0 12px 48px #333a3920;
  border-radius: 14px;
  text-align: center;
}
.about {
  max-width: 850px;
  margin: 32px auto;
  padding: 0 24px;
  font-size: 16px;
}
@media (pointer: coarse) {
  :root {
    --small: 15px;
  }
}
@media (max-width: 599px), (max-height: 599px) and (pointer: coarse) {
  :root {
    --small: 13px;
  }
  .panel {
    padding: 18px;
  }
}
@media (max-height: 450px) {
  .overlay {
    padding-top: calc(var(--safe-t) + 64px);
    padding-bottom: calc(var(--safe-b) + 16px);
  }
  /* Only the pause menu has the HUD's buttons above it; the menu, the shop, settings, the scoreboard and the
     results take the height the screen has (#1356 polish: on a phone on its side they were cut short under
     50 px of nothing). */
  .overlay:not(#paused) {
    padding-top: calc(var(--safe-t) + 10px);
    padding-bottom: calc(var(--safe-b) + 10px);
  }
  .panel {
    padding: 14px;
  }
}

#game-root.menu-open {
  touch-action: pan-y;
}
/* A finger dragged anywhere over a menu scrolls it, the shop's tiles, tabs and buttons too (#1356 polish, Matt:
   "you can only scroll on the edge"): buttons take no touch gestures (touch-action: none) for the controls
   in play, which a menu's buttons don't need. A tap still presses; a drag never does. The shop's figure
   turns on a sideways drag and lets an upward or downward one scroll. */
.overlay button,
.overlay [data-item] {
  touch-action: pan-y;
}

#chat-bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.chat-bubble { position: absolute; transform: translate(-50%, -100%); padding: 5px 8px; max-width: 190px; text-align: center; background: #fff9e9; border: 1px solid #45514a; border-radius: 8px; font-size: var(--small); }
.chat-bubble::after { content: ''; position: absolute; left: calc(50% + var(--tail)); bottom: -7px; border: 7px solid transparent; border-top-color: #45514a; border-bottom: 0; }
/* The quick-chat menu (#1356, Oct 17: it "looks awful ... on a phone held horizontally"): one compact card at
   every size, a cross of the four calls round the group's name (up, right, down, left: the d-pad's and the
   drag's directions), Close and Next in two corners. Before it was a disc whose buttons were placed absolutely
   with overrides for short screens, which left a wide empty middle on a sideways phone. */
#chat-wheel { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--safe-t) + 60px) calc(var(--safe-r) + 12px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 12px); background: #1c22251f; }
.chat-disc { display: grid; gap: 6px; padding: 10px; width: min(420px, 100%); max-height: 100%; overflow: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(48px, auto));
  grid-template-areas: ". s0 close" "s3 hub s1" ". s2 next"; align-items: stretch;
  background: #f9f5ebf2; border: 1px solid #818c85; border-radius: 16px; box-shadow: 0 6px 24px #30383240; }
#chat-options { display: contents; }
#chat-options button { min-height: 48px; padding: 4px 8px; font-size: var(--small); line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
#chat-options button[data-slot="0"] { grid-area: s0; }
#chat-options button[data-slot="1"] { grid-area: s1; }
#chat-options button[data-slot="2"] { grid-area: s2; }
#chat-options button[data-slot="3"] { grid-area: s3; }
#chat-options kbd { display: none; font: inherit; font-size: 11px; min-width: 18px; padding: 1px 4px; border-radius: 4px; background: #00000014; }
/* The number keys only where there's a keyboard to press them with. */
@media (hover: hover) and (pointer: fine) { #chat-options kbd { display: inline-block; } }
#chat-options .selected { background: #c93640; color: white; border-color: #c93640; }
#chat-options .selected kbd { background: #ffffff33; }
#chat-group { grid-area: hub; display: grid; place-content: center; text-align: center; font-size: var(--small); font-weight: 700; color: #2e3a3c; pointer-events: none; }
#chat-group small { display: block; font-weight: 400; color: #687270; font-size: 11px; }
/* Close and Next are the card's own controls, quieter than the calls. */
#chat-next, #chat-close { min-height: 44px; font-size: var(--small); padding: 4px 8px; background: transparent; border: 1px solid #b9bdb3; color: #4b5654; }
#chat-next { grid-area: next; }
#chat-close { grid-area: close; }
/* A phone on its side in full screen (#1356, Oct 17): a tighter card, and with the HUD stacked (a small
   phone) it hangs under the player's panel, so it covers neither the panel nor the aim stick's ring. */
@media (max-height: 450px) {
  .chat-disc { gap: 4px; padding: 8px; grid-template-rows: repeat(3, minmax(44px, auto)); }
  #chat-options button, #chat-next, #chat-close { min-height: 44px; }
}
/* With the HUD stacked on a short screen (a small phone on its side) the card sits under the player's panel
   and left of the buttons' row (Throw, Reload, Use, Scope reach 256 px in from the right), above the sticks. */
@media (max-height: 450px) {
  #game-root.hud-stacked #chat-wheel { align-items: flex-start; justify-content: flex-start;
    padding: calc(var(--safe-t) + var(--hud-gap) * 2.2 + 104px * var(--hud-unit)) 0 0 calc(var(--safe-l) + 12px); }
  #game-root.hud-stacked .chat-disc { width: min(420px, calc(100vw - var(--safe-l) - var(--safe-r) - 280px)); padding: 6px; }
}
#chat-bubbles { z-index: 1; }

.locker-panel { width: min(920px,100%); text-align: left; }
.locker-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.locker-heading h2 { margin:0; }
.locker-body { display:grid; grid-template-columns: 260px minmax(0,1fr); gap:20px; }
#locker-figure { display:block; width:100%; height:auto; border-radius:12px; touch-action:pan-y; }
.locker-turns,#locker-tabs { display:flex; gap:8px; margin:8px 0; }
.locker-turns button { flex:1; font-size:12px; }
#locker-tabs button { flex:1; }
#locker-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.locker-item { padding:4px 6px 8px; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; }
.locker-item canvas { width:72px; height:40px; }
.locker-item span { font-size:12px; }
.locker-item small { font-size:11px; color:#526263; }
.locker-item[aria-disabled="true"] { background:#e6e4da; }
button[aria-pressed="true"] { box-shadow:inset 0 0 0 2px #c3343e; background:#fff3d8; }
#locker-challenges { padding-left:18px; font-size:13px; line-height:1.7; }
#locker-detail { font-size:13px; min-height:3em; }
@media(max-width:650px) {
  .locker-body { grid-template-columns:1fr; gap:8px; }
  .locker-preview { display:grid; grid-template-columns:130px minmax(0,1fr); gap:8px; }
  #locker-figure { grid-row:1 / 3; }
  .locker-turns { flex-direction:column; margin:0; }
  #locker-detail { margin:0; }
  #locker-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-height:450px) {
  .locker-body { grid-template-columns:170px minmax(0,1fr); }
  .locker-preview { display:block; }
  .locker-turns { flex-direction:row; }
  #locker-items { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .locker-heading h2 { font-size:20px; }
}
.locker-heading { flex-wrap:wrap; }

/* ---- The HUD and the touch controls (#1356 part 9). ----
   The HUD is three small canvases drawn by src/hud.js (sized there in HUD units, --hud-unit CSS px each):
   the player's panel top left, the score bar top centre, the kill feed top right under the buttons. On a
   narrow screen (an upright phone; .hud-stacked) the score bar takes the top left and the player's panel the
   row under it. The touch controls: two floating sticks (each comes to the thumb on its half of the screen) and at
   most four buttons, bottom right: Jump, Throw, and Use and Scope only when they do something. */
:root { --hud-unit: 1; --hud-gap: 10px; }
#hud-player, #hud-score, #hud-feed { position: absolute; display: block; pointer-events: none; }
#hud-player { left: calc(var(--safe-l) + var(--hud-gap)); top: calc(var(--safe-t) + var(--hud-gap)); }
#hud-score { left: calc(50% - 98px * var(--hud-unit)); top: calc(var(--safe-t) + var(--hud-gap)); }
#hud-feed { right: calc(var(--safe-r) + var(--hud-gap)); top: calc(var(--safe-t) + var(--hud-gap) + 54px); }
#hud-feed[hidden] { display: none; }
/* Over the weapon in the player's panel: a tap reloads, a hold drops (touch). */
#weapon-button { position: absolute; left: calc(var(--safe-l) + var(--hud-gap)); --hud-top: calc(var(--safe-t) + var(--hud-gap));
  top: calc(var(--hud-top) + max(0px, 50px * var(--hud-unit) - 44px));
  width: calc(196px * var(--hud-unit)); height: max(44px, calc(30px * var(--hud-unit))); min-height: 0; padding: 0;
  border: 0; border-radius: 10px; background: transparent; pointer-events: none; }
#game-root.touch #weapon-button { pointer-events: auto; }
#weapon-button.held { background: #ffffff22; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; contain: strict; }
#toast { position: absolute; left: 50%; top: calc(var(--safe-t) + var(--hud-gap) + 60px * var(--hud-unit)); transform: translateX(-50%);
  margin: 0; max-width: calc(100% - 32px - var(--safe-l) - var(--safe-r)); padding: 5px 10px; border-radius: 8px; background: rgba(22,28,31,0.72);
  color: #f8f3e6; font-size: var(--small); font-weight: 600; text-align: center; pointer-events: none; }
/* The corner buttons grow with the HUD on big displays (never under a thumb's 44px). */
#game-root { --corner: max(44px, calc(34px * var(--hud-unit))); }
#pause, #chat-open { position: absolute; top: calc(var(--safe-t) + var(--hud-gap)); width: var(--corner); height: var(--corner); padding: 0; pointer-events: auto;
  border-radius: 12px; border: 1px solid #f8f3e655; background: rgba(22,28,31,0.8); color: #f8f3e6; font-size: calc(var(--corner) * 0.4); }
#pause { right: calc(var(--safe-r) + var(--hud-gap)); }
#chat-open { right: calc(var(--safe-r) + var(--hud-gap) + var(--corner) + 6px); }
#chat-open svg { width: calc(var(--corner) * 0.45); height: calc(var(--corner) * 0.45); fill: currentColor; display: block; margin: auto; }
#pause:hover, #chat-open:hover { background: rgba(22,28,31,0.8); }
/* The site's full-screen exit sits beside the buttons, clear of the score bar in the middle. */
#game-root .am-fs-exit { top: calc(var(--safe-t) + var(--hud-gap)); left: auto; right: calc(var(--safe-r) + var(--hud-gap) + 2 * var(--corner) + 12px); }
#chat-feed { position: absolute; right: calc(var(--safe-r) + var(--hud-gap)); top: calc(var(--safe-t) + var(--hud-gap) + var(--corner) + 10px); white-space: pre-line; text-align: right;
  font-size: var(--small); background: rgba(22,28,31,0.72); color: #f8f3e6; border-radius: 8px; padding: 4px 8px; max-width: min(320px, calc(100% - 32px - var(--safe-l) - var(--safe-r))); }
#chat-feed:empty { display: none; }
#hud:has(#chat-feed:not(:empty)) #hud-feed { visibility: hidden; }
/* Stacked (hud.js decides: the panels side by side wouldn't fit the width): the score bar takes the top left,
   the player's panel the row under it. */
#game-root.hud-stacked #hud-score { left: calc(var(--safe-l) + var(--hud-gap)); }
#game-root.hud-stacked #hud-player { top: calc(var(--safe-t) + var(--hud-gap) * 1.6 + 54px * var(--hud-unit)); }
#game-root.hud-stacked #weapon-button { --hud-top: calc(var(--safe-t) + var(--hud-gap) * 1.6 + 54px * var(--hud-unit)); }
#game-root.hud-stacked #hud-feed, #game-root.hud-stacked #chat-feed { top: calc(var(--safe-t) + var(--hud-gap) * 2.2 + 104px * var(--hud-unit)); }
#game-root.hud-stacked #toast { top: calc(var(--safe-t) + var(--hud-gap) * 2.2 + 104px * var(--hud-unit)); }
/* The full-screen exit in the second row, at its right end: the first is the score bar and two buttons. */
#game-root.hud-stacked .am-fs-exit { top: calc(var(--safe-t) + var(--hud-gap) * 1.6 + 54px * var(--hud-unit)); right: calc(var(--safe-r) + var(--hud-gap)); }
#touch-controls { position: absolute; inset: 0; pointer-events: none; }
.stick-zone { position: absolute; bottom: calc(var(--safe-b) + 26px); width: 128px; height: 128px; border-radius: 50%;
  border: 2px solid #f8f3e670; background: rgba(22,28,31,0.22); pointer-events: auto; touch-action: none; }
.stick-zone:not(.active) { width: 64px; height: 64px; }
#move-zone { left: calc(var(--safe-l) + 26px); }
#aim-zone { right: calc(var(--safe-r) + 100px); }
.stick-zone i { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%;
  background: #f8f3e6b0; box-shadow: 0 1px 4px #0005; pointer-events: none; }
/* The aim stick's inner ring: inside it he aims, past it he fires. */
.stick-zone b { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px; border-radius: 50%; border: 1.5px dashed #f8f3e690; pointer-events: none; }
/* In use: the stick is as big as its reach, under the thumb. */
.stick-zone.active { width: 128px; height: 128px; background: rgba(22,28,31,0.3); }
.stick-zone.active i { width: 44px; height: 44px; margin: -22px; background: #f8f3e6d8; }
#aim-zone.active b { width: 62px; height: 62px; margin: -31px; }
#aim-zone.firing { border-color: #ff5a5f; background: rgba(160,30,36,0.28); }
#aim-zone.firing i { background: #ff8a8f; }
.touch-button { position: absolute; display: grid; place-items: center; padding: 0; width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid #f8f3e670; background: rgba(22,28,31,0.5); color: #f8f3e6; pointer-events: auto; touch-action: none; }
.touch-button svg { width: 26px; height: 26px; fill: currentColor; }
.touch-button span { position: absolute; bottom: 5px; font-size: 9px; font-weight: 700; letter-spacing: .3px; }
.touch-button span + svg, .touch-button svg:has(+ span) { margin-top: -8px; }
.touch-button.held, .touch-button:active { background: rgba(22,28,31,0.78); border-color: #f8f3e6; }
.touch-button:hover { background: rgba(22,28,31,0.6); }
#jump-button { right: calc(var(--safe-r) + 18px); bottom: calc(var(--safe-b) + 22px); width: 64px; height: 64px; }
#jump-button svg { width: 32px; height: 32px; }
#throw-button { right: calc(var(--safe-r) + 24px); bottom: calc(var(--safe-b) + 100px); }
#alt-button { right: calc(var(--safe-r) + 24px); bottom: calc(var(--safe-b) + 166px); }
/* Reload (#1356, Oct 17: "How do you reload if you're playing from a phone?") beside Throw, under the thumb
   that aims and fires; Use above it. Dimmed while there's nothing to reload (full, reloading, or none left). */
#reload-button { right: calc(var(--safe-r) + 100px); bottom: calc(var(--safe-b) + 100px); }
#reload-button.idle { opacity: 0.45; }
#alt-button[aria-pressed="true"] { background: #c93640d8; border-color: #f8f3e6; }
#use-button { right: calc(var(--safe-r) + 100px); bottom: calc(var(--safe-b) + 166px); }
/* Short screens (a phone on its side): the column of buttons a little tighter. */
/* Short screens (a phone on its side): Throw, Use and Scope in one row above Jump and the aim stick, clear of
   the kill feed. */
@media (max-height: 380px) {
  #throw-button, #reload-button, #use-button, #alt-button { width: 52px; height: 52px; bottom: calc(var(--safe-b) + 98px); }
  #throw-button { right: calc(var(--safe-r) + 24px); }
  #reload-button { right: calc(var(--safe-r) + 84px); }
  #use-button { right: calc(var(--safe-r) + 144px); }
  #alt-button { right: calc(var(--safe-r) + 204px); }
}
#rotate-hint { display: none; }
@media (orientation: portrait) and (pointer: coarse) { #rotate-hint { display: block; } }

/* ---- The shop (#1356 part 7). The items large, the price in Scrap, the selection's detail and its one
   action (Buy, Equip or Take off) under the turning figure. */
#scrap-balance { padding: 6px 12px; border-radius: 999px; background: #3a2f1f; color: #f6d68c; font-size: 15px; white-space: nowrap; }
#scrap-balance::before { content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px;
  background: #e7b65a; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); box-shadow: inset 0 0 0 3px #b3842f; }
#locker-items { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.locker-item { padding: 6px 6px 8px; }
.locker-item canvas { width: 112px; height: 75px; }
.locker-item span { font-size: 12px; line-height: 1.25; text-align: center; }
.locker-item small.price { color: #8a5a1c; font-weight: 700; }
.locker-item[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #c3343e; background: #fff3d8; }
#shop-detail { display: grid; gap: 4px; margin-top: 8px; }
#shop-name { font-size: 15px; }
#shop-note { font-size: 13px; color: #566264; min-height: 1.3em; }
#shop-action { width: 100%; margin-top: 2px; }
#shop-action:disabled { background: #e6e4da; color: #6a7271; border-color: #c4c5ba; cursor: default; }
.shop-challenges { margin: 14px 0 0; font-size: 15px; }
#locker-back { display: block; width: 100%; margin-top: 8px; }
@media (max-width: 650px) {
  .locker-preview { grid-template-columns: 130px minmax(0, 1fr); }
  #shop-detail { grid-column: 2; grid-row: 2; margin: 0; }
  #locker-items { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .locker-item canvas { width: 96px; height: 64px; }
}
@media (max-height: 450px) {
  #locker .panel > .hint { display: none; }
  .locker-body { grid-template-columns: 190px minmax(0, 1fr); }
}
/* The figure, the selection and its action stay in view while the items scroll (beside them, or above them
   on a narrow screen). */
.locker-preview { position: sticky; top: -24px; align-self: start; z-index: 1; background: #f9f5eb; padding-bottom: 6px; }
@media (max-width: 599px), (max-height: 599px) and (pointer: coarse) { .locker-preview { top: -18px; } }
@media (max-height: 450px) { .locker-preview { top: 0; } }
/* A phone on its side: a shorter figure, so the figure, the selection and its action fit the height. */
@media (max-height: 450px) {
  #locker-figure { width: auto; height: 96px; margin: 0 auto; }
  /* A tap on the figure changes its team there. */
  .locker-turns { display: none; }
  #shop-detail { margin-top: 2px; gap: 2px; }
  #shop-name { font-size: 14px; }
}

/* ---- The menus (#1356, Matt's direction of 2026-10-15): one clear first action each (Play, Resume, Play
   again), the rest beneath it; laid out across a screen held sideways, down an upright one; larger on big
   screens. */
.panel h1 { margin: 4px 0 6px; font-size: clamp(30px, 6vw, 46px); line-height: 1.02; letter-spacing: -1.5px; }
.panel h1 span { color: #c82e38; }
.panel h2 { font-size: 24px; margin: 0 0 10px; }
.panel h3 { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: #5b6466; margin: 14px 0 6px; }
.panel p { margin: 8px 0; line-height: 1.4; font-size: max(var(--small), 14px); }
.panel .hint { font-size: var(--small); color: #566264; }
.panel .eyebrow { font-size: 12px; letter-spacing: 1.2px; font-weight: 700; margin: 0; }
.panel .primary { background: #cf3540; color: #fff; border-color: #a52730; }
.panel .primary:hover { background: #d9434e; }
.panel .big { display: block; width: 100%; min-height: 56px; font-size: 19px; font-weight: 750; border-radius: 12px; }
.panel button { min-height: 46px; }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.menu-row button { width: 100%; }
#menu-scrap { font-weight: 650; color: #8a5a1c; margin-left: 4px; }
#menu-scrap:empty { display: none; }
.menu-panel .tagline { color: #4b5557; margin: 0 0 14px; }
.menu-panel .play-hint { margin: 6px 0 14px; }
.practice { display: flex; gap: 8px; align-items: stretch; }
.map-choice { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--small); font-weight: 650; text-align: left; }
#map-select { flex: 1; min-width: 0; min-height: 46px; padding: 6px 8px; border: 1px solid #818c85; border-radius: 9px; font: inherit; background: #fffaf0; color: #263236; touch-action: manipulation; }
#start { flex: none; padding: 0 18px; }
.pause-panel { width: min(400px, 100%); }
/* Sideways and short (a phone on its side): the menu in two columns, the title beside the actions. */
@media (max-height: 450px) and (orientation: landscape) {
  .menu-panel { width: min(700px, 100%); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: center; gap: 4px 20px; text-align: left; padding: 12px 18px;
    grid-template-areas: "title play" "title playhint" "tag practice" "row maphint" "roster maphint"; }
  .menu-panel h1 { grid-area: title; font-size: 34px; margin: 0; }
  .menu-panel .tagline { grid-area: tag; margin: 0; }
  .menu-panel #online { grid-area: play; min-height: 50px; }
  .menu-panel .play-hint { grid-area: playhint; margin: 0 0 4px; }
  .menu-panel .practice { grid-area: practice; }
  .menu-panel .map-hint { grid-area: maphint; margin: 0; align-self: start; }
  .menu-panel .menu-row { grid-area: row; margin: 0; }
  .menu-panel #match-roster { grid-area: roster; margin: 0; }
  .menu-panel #rotate-hint { display: none; }
  .pause-panel { width: min(560px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 14px 18px; }
  .pause-panel h2, .pause-panel p, .pause-panel #resume { grid-column: 1 / -1; margin: 0; }
  .pause-panel .menu-row { margin: 0; }
}
/* Settings: sound, screen and chat beside the controls for the device in hand. */
.settings-panel { width: min(860px, 100%); text-align: left; }
.settings-panel > h2 { margin-bottom: 4px; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 4px 28px; }
.settings-group h3:first-child { margin-top: 6px; }
.toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--small); }
.toggle input { width: 22px; height: 22px; }
.volume { display: flex; align-items: center; gap: 10px; min-height: 46px; font-size: var(--small); }
.sound-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.volume button { min-width: 46px; }
.volume output { min-width: 42px; text-align: center; font-weight: 650; }
#chat-mutes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.control-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.control-tabs button { flex: 1; }
.control-tabs button[aria-selected="true"] { box-shadow: inset 0 0 0 2px #c3343e; background: #fff3d8; }
.scheme dl, dl.scheme { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 6px 12px; margin: 4px 0 10px; font-size: var(--small); line-height: 1.35; }
.scheme dt { font-weight: 700; }
.scheme dd { margin: 0; color: #3f4a4c; }
#bindings { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
#bindings button { font-size: var(--small); }
#back { display: block; width: 100%; margin-top: 12px; }
@media (orientation: portrait) and (max-width: 700px), (max-width: 520px) { .settings-grid { grid-template-columns: 1fr; } }
/* The results: the outcome, his own line, the Scrap and the next step first; the table and awards after
   (beside them on a wide or sideways screen, below them upright). */
.results-panel { width: min(900px, 100%); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px 22px; text-align: left; }
.result-summary h2 { margin: 4px 0; font-size: 28px; }
#result-score { font-size: 18px; font-weight: 700; margin: 0; }
#result-you { font-weight: 650; }
#result-scrap { font-weight: 700; color: #8a5a1c; }
#result-unlocks { font-size: var(--small); }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.result-actions .big { grid-column: 1 / -1; }
.result-detail table { width: 100%; border-collapse: collapse; font-size: var(--small); text-align: right; }
.result-detail th:first-child, .result-detail td:first-child { text-align: left; }
.result-detail td, .result-detail th { padding: 6px 3px; border-bottom: 1px solid #dadacc; }
.result-detail .red td:first-child { color: #c52e37; }
#result-awards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.result-award { padding: 8px 6px; background: #ebe7d7; border: 1px solid #c8c8b9; border-radius: 9px; font-size: 12px; }
.result-award b, .result-award span { display: block; margin-bottom: 3px; }
.results-panel table { width: 100%; }
#scoreboard .panel { width: min(560px, 100%); }
#scoreboard table { width: 100%; border-collapse: collapse; font-size: var(--small); text-align: right; }
#scoreboard th:first-child, #scoreboard td:first-child { text-align: left; }
#scoreboard td, #scoreboard th { padding: 6px 3px; border-bottom: 1px solid #dadacc; }
#scoreboard .red td:first-child { color: #c52e37; }
/* The robot glyph before a bot's name (#1356 part 6): its head in the text's colour, its face light. */
.bot-glyph { width: 1em; height: 1em; vertical-align: -0.14em; margin-right: 0.3em; fill: currentColor; }
.bot-glyph .face { fill: #faf8ec; }
@media (orientation: portrait) and (max-width: 760px), (max-width: 560px) {
  .results-panel { grid-template-columns: 1fr; }
}
@media (max-height: 450px) and (orientation: landscape) {
  .results-panel { padding: 12px 16px; gap: 8px 18px; }
  .result-summary h2 { font-size: 22px; }
  .result-summary p { margin: 3px 0; }
  .result-actions { margin-top: 6px; }
  #result-awards { display: none; }
  .results-panel { height: 100%; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
  .result-summary, .result-detail { min-height: 0; overflow: auto; }
  .result-summary .eyebrow { display: none; }
  .result-actions { grid-template-columns: 1.6fr 1fr 1fr; }
  /* The next step right under the outcome; his line and his Scrap below it. */
  .result-summary { display: flex; flex-direction: column; }
  .result-summary > * { order: 3; }
  .result-summary h2 { order: 0; } #result-score { order: 1; } .result-summary .result-actions { order: 2; margin: 6px 0 8px; }
  .result-actions .big { grid-column: auto; min-height: 46px; font-size: 17px; }
  .settings-panel { padding: 12px 18px; }
  .settings-panel h3 { margin: 6px 0 2px; }
}
/* Big screens: the menus a size up, so they don't sit small in the middle of a large display. */
@media (min-width: 1500px) and (min-height: 880px) { .overlay .panel { zoom: 1.4; } }
@media (min-width: 2200px) and (min-height: 1300px) { .overlay .panel { zoom: 1.6; } }
/* Finding a match, players joining, reconnecting: in the middle, above the play, never under a thumb. */
#net-banner { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); margin: 0; padding: 10px 18px; border-radius: 12px;
  background: rgba(22,28,31,0.82); color: #f8f3e6; font-size: calc(15px * var(--hud-unit)); font-weight: 700; pointer-events: none; white-space: nowrap; }

/* With a mouse in play the cursor is the game's reticle (#1356, Oct 16): the OS cursor is hidden over the
   arena only; the HUD's buttons and every menu keep it. */
#game-root.aiming:not(.menu-open) #arena { cursor: none; }
/* The mouse's reticle (render.js `reticleAt`, main.js): a composited layer moved by its transform each frame,
   so it costs the canvas nothing (#1356: drawn on the canvas it cost WebKit's software raster 0.1-0.2 ms a
   frame). Four ticks round an opening (--open) and a dot; a ring for fists or a blade. White over a dark edge. */
#reticle { position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 0; pointer-events: none; will-change: transform; --open: 10px; }
#reticle i { position: absolute; display: block; background: #f8f6ee; box-shadow: 0 0 0 1.25px rgba(18, 22, 24, 0.8); border-radius: 2px; }
#reticle .dot { width: 3px; height: 3px; left: -1.5px; top: -1.5px; border-radius: 50%; }
#reticle .tick { width: 10px; height: 3px; left: 0; top: -1.5px; }
#reticle .r { transform: translateX(var(--open)); }
#reticle .l { transform: translateX(calc(-10px - var(--open))); }
#reticle .d, #reticle .u { width: 3px; height: 10px; left: -1.5px; top: 0; }
#reticle .d { transform: translateY(var(--open)); }
#reticle .u { transform: translateY(calc(-10px - var(--open))); }
#reticle.melee .tick { display: none; }
#reticle.melee .dot { box-shadow: 0 0 0 1.25px rgba(18, 22, 24, 0.8), 0 0 0 4.5px #f8f6ee, 0 0 0 5.75px rgba(18, 22, 24, 0.8); background: #f8f6ee; }