:root {
  /* The site's palette (site/site.css); the red accent and good/bad stay the game's own. */
  --bg: var(--am-bg, #14110f);
  --panel: var(--am-panel, #221c18);
  --panel-2: var(--am-panel-2, #2d2520);
  --line: var(--am-line, #43372d);
  --text: var(--am-text, #f3ece4);
  --muted: var(--am-muted, #b3a597);
  --accent: #ff5a3d;
  --accent-2: var(--am-accent, #ffb547);
  --good: #6bd66b;
  --bad: #ff5a4a;
  --radius: 10px;
  /* The screen's safe areas (docs/PLATFORMS.md, "Layout"): under a notch, a
     cut-out, the home-screen app's status bar or the home indicator. What the
     player reads or touches stays inside them, and a touch control 16 px
     further in. The browser tests set these to try insets their browsers
     have none of. */
  --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);
  /* The site header: 48 px, and the status bar it makes room for in the
     home-screen app. */
  --header-h: calc(48px + var(--safe-t));
  /* The smallest text: 14 px on a desktop, 15 on a tablet, 13 on a phone. */
  --fs-min: 14px;
  color-scheme: dark;
}

/* A tablet: a touch screen at least 600 px each way. */
@media (pointer: coarse) {
  :root {
    --fs-min: 15px;
  }
}

/* A phone: a touch screen under 600 px one way or the other. */
@media (pointer: coarse) and (max-width: 599px), (pointer: coarse) and (max-height: 599px) {
  :root {
    --fs-min: 13px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--am-font, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif);
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--accent-2);
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

[hidden] {
  display: none !important;
}

.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.site-logo {
  font-weight: 800;
  font-size: 20px;
  text-decoration: none;
  color: var(--text);
}

.site-logo span {
  color: var(--accent-2);
  font-weight: 600;
  font-size: 13px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}

.page {
  padding: 8px max(8px, var(--safe-r)) 40px max(8px, var(--safe-l));
}

.game-root {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: min(1280px, calc((100vh - var(--header-h) - 28px - var(--safe-b)) * 1.7778));
  max-width: min(1280px, calc((100dvh - var(--header-h) - 28px - var(--safe-b)) * 1.7778));
  min-width: min(100%, 300px);
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  /* A thumb held on Hold breath or resting on the view shows nothing of the
     phone's own: no tap highlight, selection or long-press callout (#456).
     Nothing in the game pans, zooms or pulls to refresh the page (#858); a
     card too long for the screen still scrolls its own body (.card-body). */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: none;
  overscroll-behavior: none;
}

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* The HUD and the cards size themselves to the game area, not the window:
     a phone on its side leaves a stage under 300 px tall. */
  container: stage / size;
  touch-action: none;
}

/* The view keeps between 4:5 and 2.4:1 (#858): a stage of another shape (full
   screen on a phone held upright, or a phone on its side) shows it in the
   middle, with the HUD and the controls in the bands beside it. Through a
   scope narrower than 4:5, most of the round field would fall off the sides. */
.stage > canvas {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  width: min(100%, 240cqh);
  height: min(100%, 125cqw);
  display: block;
  touch-action: none;
}

/* The side recap and view over the sights have no round scope to fit. Fill
   the whole stage, including a tall phone's real full-screen viewport. */
.stage.replaying > canvas,
.stage.wide > canvas {
  width: 100%;
  height: 100%;
}

.stage.aiming,
.stage.aiming > canvas {
  cursor: none;
}

/* ---------- Full screen (docs/PLATFORMS.md, #858) ---------- */

/* The site's "Full screen" button takes #game-root full screen, and main.js
   marks it .full: the stage fills the screen, whatever its shape. */
.game-root.full {
  max-width: none;
  border: 0;
  border-radius: 0;
  background: #000;
}

.game-root.full .stage {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  max-height: none;
}

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

.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Its padding by side: top, left and right, bottom (set below for touch
     screens and full screen). */
  --pad-t: 8px;
  --pad-x: 8px;
  --pad-b: 8px;
  padding: var(--pad-t) var(--pad-x) var(--pad-b);
  font-size: max(14px, var(--fs-min));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* On a touch screen the controls keep 24 px from the screen's sides, or 16 px
   past its safe area, so a thumb on them never starts the system's back
   gesture, and a phone's rounded corners stay clear: in the page the root
   sits 9 px in (the page's padding and its own border), or 1 px inside the
   safe area. */
.touch .hud {
  --pad-x: 15px;
}

/* Full screen: inside the safe areas, both sides taking the larger inset so
   the HUD's middle is the screen's, where "Leave full screen" sits. On a
   touch screen, 24 px from every edge (a phone's rounded corners) or 16 px
   past the safe area. */
.game-root.full .hud {
  --pad-t: max(8px, var(--safe-t));
  --pad-x: max(8px, var(--safe-l), var(--safe-r));
  --pad-b: max(8px, var(--safe-b));
}

.game-root.full.touch .hud {
  --pad-t: max(24px, var(--safe-t) + 16px);
  --pad-x: max(24px, var(--safe-l) + 16px, var(--safe-r) + 16px);
  --pad-b: max(24px, var(--safe-b) + 16px);
}

.hud-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.hud-row.bottom {
  align-items: flex-end;
}

.hud-box {
  background: rgba(15, 12, 10, 0.55);
  border-radius: 8px;
  padding: 5px 9px;
}

.hud-box.center {
  text-align: center;
}

.hud-box.right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hud-stage {
  font-weight: 800;
  color: var(--accent-2);
  font-size: var(--fs-min);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.hud-weapon {
  font-size: var(--fs-min);
  color: var(--text);
}

.hud-score {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.hud-streak {
  font-size: var(--fs-min);
  color: var(--accent-2);
  min-height: 1.15em;
}

.attempts {
  display: flex;
  gap: 4px;
}

.attempt {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
}

.attempt.lost {
  background: #3a3431;
}

/* 8 px between buttons (docs/PLATFORMS.md, "Controls for each format"). */
.hud-buttons {
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

/* Only while aiming; hidden, not removed, so the HUD never shifts. */
#btn-sights {
  visibility: hidden;
}

#stage.aiming #btn-sights {
  visibility: visible;
}

#btn-sights[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
}

/* Labelled, so the way out of the scope is plain to see (#383). */
#btn-sights {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-weight: 700;
  white-space: nowrap;
}

#btn-sights .sights-key {
  font: inherit;
  font-size: var(--fs-min);
  line-height: 1;
  padding: 2px 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  opacity: 0.85;
}

/* On a touch screen the Wide view button above Fire does it. */
.touch #btn-sights .sights-label,
.touch #btn-sights .sights-key {
  display: none;
}

.nudge {
  animation: nudge 0.8s ease-in-out 4;
}

@keyframes nudge {
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 0 6px rgba(255, 207, 74, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nudge {
    animation: none;
    box-shadow: 0 0 0 4px rgba(255, 207, 74, 0.7);
  }
}

.icon-btn {
  touch-action: none;
  background: rgba(40, 32, 27, 0.9);
  border: 1px solid var(--line);
  border-radius: 7px;
  min-width: 34px;
  height: 30px;
  cursor: pointer;
  font-size: var(--fs-min);
}

.wind {
  font-weight: 800;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wind-arrow {
  display: inline-block;
  color: #7fd0ff;
}

.dist {
  font-size: var(--fs-min);
  color: var(--muted);
  white-space: nowrap;
}

.breath-box {
  min-width: 150px;
  flex: 0 1 220px;
}

.breath-label {
  font-size: var(--fs-min);
  color: var(--muted);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breath-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  overflow: hidden;
}

.breath-fill {
  height: 100%;
  width: 100%;
  background: #7fd0ff;
  transition: background 0.2s;
}

.breath-fill.strain {
  background: var(--bad);
}

.breath-fill.steady {
  background: #8fe39a;
}

.touch-controls {
  display: none;
  gap: 10px;
  pointer-events: auto;
}

/* Hold breath sits at the bottom left and Fire at the bottom right, one for
   each thumb, so the thumb that holds the breath never has to leave it to
   fire (a touch between them used to fire). */
.touch .touch-controls {
  display: contents;
}

.touch .touch-btn {
  pointer-events: auto;
}

.touch .touch-btn.hold {
  order: -1;
}

/* Wide view sits just above Fire, under the same thumb. */
.fire-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* The gap between the buttons still lets a drag reach the range. */
  pointer-events: none;
}

.touch .fire-stack {
  order: 1;
}

.touch-btn.look {
  width: 54px;
  height: 54px;
  font-size: var(--fs-min);
  visibility: hidden;
  background: rgba(150, 105, 25, 0.72);
  border-color: rgba(255, 220, 140, 0.75);
}

#stage.aiming .touch-btn.look {
  visibility: visible;
}

/* The label changes at the touch: the finger lands on the button itself. */
.look-label {
  pointer-events: none;
}

.touch-btn.look[aria-pressed='true'] {
  background: rgba(215, 160, 45, 0.92);
  color: #1d160f;
}

.touch-btn {
  flex: none;
  border-radius: 50%;
  width: 74px;
  height: 74px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  font-weight: 800;
  font-size: var(--fs-min);
  line-height: 1.1;
  touch-action: none;
}

.touch-btn.hold {
  background: rgba(40, 110, 160, 0.55);
}

.touch-btn.hold.on {
  background: rgba(60, 160, 230, 0.85);
}

.touch-btn.fire {
  background: rgba(200, 40, 30, 0.75);
  font-size: max(16px, var(--fs-min));
}

.flash-msg {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  font-size: clamp(20px, 4vw, 38px);
  font-size: clamp(18px, 5cqw, 38px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  text-align: center;
  /* A long message wraps on a narrow stage rather than running off its sides. */
  width: max-content;
  max-width: calc(100% - 32px);
  text-wrap: balance;
}

/* Full screen: under the HUD's top row and "Leave full screen". */
.game-root.full .flash-msg {
  top: max(22%, max(60px, var(--safe-t) + 52px) + 64px);
}

.flash-msg.show {
  opacity: 1;
}

/* ---------- Overlays ---------- */

.overlay {
  position: absolute;
  inset: 0;
  /* A drag on a card doesn't scroll the page; a card's own body still
     scrolls (see .card-body). */
  touch-action: none;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(8, 6, 5, 0.55);
  overflow: auto;
}

.overlay.show {
  display: flex;
}

.overlay.clear {
  background: transparent;
  pointer-events: none;
}

/* Full screen: the cards keep below "Leave full screen" (44 px at the top in
   the middle, and 8 px clear of it) and inside the safe areas. */
.game-root.full .overlay {
  padding: max(60px, var(--safe-t) + 52px) max(12px, var(--safe-l) + 8px, var(--safe-r) + 8px) max(12px, var(--safe-b) + 8px);
}

/* A result card sits to the right, clear of your friend, on any stage wider
   than it is tall. */
@container stage (orientation: landscape) {
  .overlay.clear {
    justify-content: flex-end;
    align-items: flex-start;
  }
  .overlay.clear .card {
    width: clamp(190px, 46%, 430px);
  }
}

/* On an upright stage it sits at the bottom, over the legs, so the head and
   body stay in view. */
@container stage (orientation: portrait) {
  .overlay.clear {
    align-items: flex-end;
  }
}

.card {
  pointer-events: auto;
  background: rgba(30, 24, 20, 0.96);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

/* A card split into a body and its row of buttons (see showOverlay): the
   buttons stay in view and only the body scrolls. */
.card.split {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* A card or card body with nothing to scroll (marked by holdStill in main.js):
   a drag on it would scroll the page. */
.card {
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.card[data-fits],
.card-body[data-fits] {
  touch-action: none;
}

.card.split > .row {
  flex: none;
}

.headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 14px;
}

.headline p {
  margin: 0;
}

.card h2 {
  margin: 0 0 6px;
  font-size: 24px;
}

.card p {
  margin: 6px 0;
  color: var(--muted);
  line-height: 1.45;
}

.card .row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.logo {
  font-size: clamp(34px, 7vw, 64px);
  font-weight: 900;
  letter-spacing: 3px;
  margin: 0;
  color: #fff;
  text-shadow: 0 4px 0 #8e1410;
}

.logo span {
  color: var(--accent);
  /* When the name wraps, it breaks as HOLD MY / ROOT BEER, never mid-name. */
  white-space: nowrap;
}

.menu {
  text-align: center;
  background: rgba(20, 16, 13, 0.78);
}

.menu .row {
  justify-content: center;
}

.btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 800;
  font-size: max(15px, var(--fs-min));
}

.btn:hover:not(:disabled) {
  border-color: #7a6552;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* A new card's buttons wait a moment before they take presses (showOverlay);
   they look ready all the same. */
.btn.arming:disabled {
  opacity: 1;
  cursor: pointer;
}

.btn:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.btn-primary {
  background: linear-gradient(180deg, #ff7a57, #d9361f);
  border-color: #ff9a7a;
  color: #fff;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.stat {
  background: #19140f;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}

.stat b {
  display: block;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.stat span {
  font-size: var(--fs-min);
  color: var(--muted);
}

.card canvas {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  margin: 6px 0;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: max(14px, var(--fs-min));
  margin: 4px 0 8px;
}

.facts b {
  color: var(--text);
}

.tip {
  font-size: max(14px, var(--fs-min));
  border-left: 3px solid var(--accent-2);
  padding-left: 10px;
}

.big {
  font-size: 34px;
  font-weight: 900;
  margin: 0;
}

.big.good {
  color: var(--good);
}

.big.bad {
  color: var(--bad);
}

.points {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-2);
}

.near {
  color: #ffd27a !important;
  font-weight: 700;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: #19140f;
  border-radius: 8px;
  padding: 8px 10px;
}

.item .desc {
  font-size: var(--fs-min);
  color: var(--muted);
}

.item.done {
  border: 1px solid #3f6b3f;
}

.item.locked {
  opacity: 0.6;
}

.pips {
  font-size: var(--fs-min);
  color: var(--accent-2);
  letter-spacing: 2px;
}

.brass {
  color: #e7c05a;
  font-weight: 800;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.seg button {
  background: transparent;
  border: 0;
  padding: 7px 12px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
}

/* On a touch screen every control is at least 44 x 44 px, 8 px apart
   (docs/PLATFORMS.md, "Controls for each format"), on every size of stage:
   the choices of a setting become separate buttons. */
.touch .icon-btn {
  min-width: 44px;
  height: 44px;
  font-size: 16px;
}

.touch .btn,
.touch .seg button {
  min-width: 44px;
  min-height: 44px;
}

.touch .seg {
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  overflow: visible;
}

.touch .seg button {
  border: 1px solid var(--line);
  border-radius: 8px;
}

.seg button.on {
  background: var(--panel-2);
  color: var(--text);
}

.setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  flex-wrap: wrap;
}

/* ---------- Page ---------- */

.ad-slot:empty {
  display: none;
}

.ad-slot {
  max-width: 970px;
  margin: 16px auto;
  min-height: 90px;
}

.about {
  max-width: 820px;
  margin: 20px auto;
  padding: 0 8px;
  line-height: 1.55;
}

.about h1 {
  margin-bottom: 4px;
}

.warning {
  background: #2a1512;
  border: 1px solid #5a2a22;
  border-radius: 8px;
  padding: 8px 12px;
}

kbd {
  background: #2d2520;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.875em;
}

.rotate-hint {
  display: none;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0;
}

/* Upright screens, tablets too, get a tall game area rather than a 16:9 strip
   across the top. */
@media (orientation: portrait) {
  .stage {
    aspect-ratio: 4 / 5;
    max-height: calc(100vh - var(--header-h) - 40px - var(--safe-b));
    max-height: calc(100dvh - var(--header-h) - 40px - var(--safe-b));
  }
  .game-root {
    max-width: 100%;
  }
}

/* Phones on their side (#858): the stage takes the page's whole width under
   the header, and the view keeps to 2.4:1 in its middle (.stage > canvas),
   with the HUD and the thumbs' controls in the bands beside it. A 16:9 stage
   left a third of the width empty (467 x 263 px of an iPhone 14's 750 x 340).
   The gap under it keeps the controls 24 px from the screen's corners, or
   16 px over the home indicator. The stage shrinks with a short window (a
   small phone on its side with the browser's bars showing leaves it under
   200 px), as the 16:9 one did, rather than running off the screen. */
@media (orientation: landscape) and (max-height: 540px) {
  .game-root {
    max-width: none;
  }
  .stage {
    aspect-ratio: auto;
    height: calc(100vh - var(--header-h) - 10px - max(18px, var(--safe-b) + 10px));
    height: calc(100dvh - var(--header-h) - 10px - max(18px, var(--safe-b) + 10px));
    min-height: 140px;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  .hud {
    font-size: var(--fs-min);
    --pad-t: 4px;
    --pad-x: 4px;
    --pad-b: 4px;
  }
  .hud-score {
    font-size: 16px;
  }
  .breath-box {
    min-width: 80px;
  }
  .touch-btn {
    width: 58px;
    height: 58px;
    font-size: var(--fs-min);
  }
  .card {
    padding: 12px;
  }
  .card h2 {
    font-size: 19px;
  }
  .big {
    font-size: 24px;
  }
}

/* ---------- Small game areas ---------- */

/* Upright phones: the top row of the HUD wraps its buttons onto a second line
   rather than squeezing the labels, and with touch controls the breath meter
   sits above the wind, beside the Hold and Fire buttons. */
@container stage (max-width: 440px) {
  .hud-row.top {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .hud-box {
    padding: 4px 7px;
  }
  .hud-box.right {
    margin-left: auto;
    gap: 6px;
  }
  .attempts {
    gap: 3px;
  }
  .attempt {
    width: 11px;
    height: 11px;
  }
  .icon-btn {
    min-width: 30px;
    height: 28px;
  }
  .touch .hud-row.bottom {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'hold breath fire'
      'hold wind fire';
    gap: 4px 8px;
    align-items: end;
  }
  .touch .touch-btn.hold {
    grid-area: hold;
  }
  .touch .fire-stack {
    grid-area: fire;
  }
  .touch-btn.look {
    width: 48px;
    height: 48px;
    font-size: var(--fs-min);
  }
  .fire-stack {
    gap: 8px;
  }
  #btn-sights .sights-label,
  #btn-sights .sights-key {
    display: none;
  }
  .touch .wind-box {
    grid-area: wind;
    justify-self: start;
  }
  .touch .breath-box {
    grid-area: breath;
    min-width: 0;
  }
}

/* Short game areas (phones on their side, small phones upright): tighter
   cards, so a card's text and buttons fit without scrolling. */
@container stage (max-height: 430px) {
  .overlay {
    padding: 6px;
  }
  .card {
    padding: 10px 14px;
    border-radius: 10px;
  }
  .card h2 {
    font-size: 18px;
    margin-bottom: 2px;
  }
  .card p {
    margin: 3px 0;
    line-height: 1.3;
    font-size: var(--fs-min);
  }
  .card .row {
    margin-top: 8px;
  }
  .card .btn {
    padding: 7px 12px;
    font-size: max(14px, var(--fs-min));
  }
  .card .big {
    font-size: 22px;
  }
  .card .points {
    font-size: 18px;
  }
  .headline {
    margin: 2px 0;
  }
  .facts {
    font-size: var(--fs-min);
    gap: 2px 10px;
    margin: 2px 0 4px;
  }
  .card canvas {
    width: auto;
    max-width: 100%;
    max-height: 56px;
    margin: 2px 0;
  }
  .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 6px;
    margin: 6px 0;
  }
  .stat {
    padding: 4px;
  }
  .stat b {
    font-size: 16px;
  }
  .stat span {
    display: block;
    font-size: var(--fs-min);
    line-height: 1.2;
  }
  .list {
    gap: 4px;
    margin-top: 6px;
  }
  .item {
    padding: 4px 8px;
  }
  .item .desc {
    font-size: var(--fs-min);
  }
  .logo {
    font-size: 30px;
  }
  /* 8 px between the rows' buttons (docs/PLATFORMS.md). */
  .setting {
    margin: 8px 0;
  }
  .breath-box {
    min-width: 0;
  }
}

/* Wide view beside Fire rather than above it, to keep the view clear, where
   the stage is short and there is room across (a narrow one, such as a small
   phone upright, keeps it above: beside, it ran into the wind). */
@container stage (max-height: 430px) and (min-width: 441px) {
  .touch .fire-stack {
    flex-direction: row;
    align-items: flex-end;
  }
}

/* Phones on their side: the stage is under 300 px tall. */
@container stage (max-height: 300px) {
  .card canvas {
    max-height: 40px;
  }
  /* The next gun's picture: the stage card shows it a moment later. */
  .result-card canvas,
  .flavor {
    display: none;
  }
  .overlay.clear .card.over-card {
    width: 100%;
  }
  .touch-btn {
    width: 60px;
    height: 60px;
    font-size: var(--fs-min);
  }
  .touch-btn.look {
    width: 46px;
    height: 46px;
    font-size: var(--fs-min);
  }
  .fire-stack {
    gap: 8px;
  }
  .hud {
    --pad-t: 5px;
    --pad-x: 5px;
    --pad-b: 5px;
  }
}

/* The shortest (a small phone on its side with the browser's bars showing). */
@container stage (max-height: 250px) {
  .card canvas {
    display: none;
  }
  .menu > p:first-of-type {
    display: none;
  }
}

/* ---------- Full screen: room for "Leave full screen" ---------- */

/* The site's "Leave full screen" is a 44 px button at the top in the middle,
   max(8px, the top inset) from the top (site/site.css). Nothing of the game's
   comes within 8 px of it. A narrow stage (a phone or tablet held upright)
   starts its HUD under it; the HUD's top row there is the band above the
   view. */
@container stage (max-width: 759px) {
  .game-root.full .stage .hud,
  .game-root.full.touch .stage .hud {
    --pad-t: max(60px, var(--safe-t) + 52px);
  }
}

/* A wide one keeps its top row at the top, with a 60 px column in its middle,
   the screen's, for the button: the score, which sits in the middle of the
   row, moves down under the button. (Beside it, a tier's long stage label
   and a large score ran into each other on a screen 760 px wide.) */
@container stage (min-width: 760px) {
  .game-root.full .hud-row.top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
    align-items: start;
  }
  .game-root.full .hud-row.top > .hud-box {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
  }
  .game-root.full .hud-row.top > .hud-box.center {
    grid-column: 2;
    justify-self: center;
    margin-top: calc(max(60px, var(--safe-t) + 52px) - var(--pad-t));
  }
  .game-root.full .hud-row.top > .hud-box.right {
    grid-column: 3;
    justify-self: end;
  }
}