/* No Man's Land: the page, HUD, panels and menus. The battlefield is the canvas.

   Platforms (docs/PLATFORMS.md; DESIGN.md, "Every viewport"): the game fills
   the space it has on the page and in full screen, held either way; the canvas
   covers the whole root and the HUD floats over it; text is at least --t-min;
   every control is at least 44 px with 8 px between controls; everything the
   player reads or touches keeps inside the safe areas, and touch controls a
   further 16 px in from an edge that has an inset. */
:root {
  --bg: #1b1c17;
  --panel: rgba(24, 26, 20, 0.93);
  --panel-2: #2b2e24;
  --panel-3: #3a3e30;
  --line: rgba(232, 223, 196, 0.18);
  --text: #f1ecdd;
  --muted: #b9b29c;
  --accent: #e2b74b;
  --accent-2: #c9902e;
  --ink: #241b08;
  --good: #9fdc7c;
  --bad: #ff8a73;
  --steel: #8fa3ad;
  --radius: 10px;
  --t-min: 14px;
  --btn: 44px;
  --gap: 8px;
  --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);
  --safe-r-touch: calc(var(--safe-r) + min(16px, var(--safe-r) * 1000));
  --safe-b-touch: calc(var(--safe-b) + min(16px, var(--safe-b) * 1000));
  --safe-l-touch: calc(var(--safe-l) + min(16px, var(--safe-l) * 1000));
  --pad-t: max(8px, var(--safe-t));
  --pad-r: max(8px, var(--safe-r-touch));
  --pad-b: max(8px, var(--safe-b-touch));
  --pad-l: max(8px, var(--safe-l-touch));
  color-scheme: dark;
}

/* A tablet: a touch screen 600 px or more each way. On any touch screen the buttons are 48 px,
   the size the platforms recommend for a thumb (44 is the least). */
@media (pointer: coarse) {
  :root {
    --t-min: 15px;
    --btn: 48px;
  }
}

/* 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 {
    --t-min: 13px;
  }
}

* {
  box-sizing: border-box;
}

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

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

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

[hidden] {
  display: none !important;
}

.site-header {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #3a3a2e;
}

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

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

.nml-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--text);
  font: 700 max(var(--t-min), 12px) / 1.4 system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  text-align: center;
}

/* Key hints follow the last input: none after a touch. */
.nml.nml-touch kbd {
  display: none;
}

/* ---------- The game frame ---------- */

/* One screen tall on the page, under the site header. */
.nml {
  --avail-h: calc(100vh - 48px - var(--safe-t) - 16px);
  --avail-h: calc(100dvh - 48px - var(--safe-t) - 16px);
  position: relative;
  width: 100%;
  height: max(320px, var(--avail-h));
  margin: 0 auto;
  border: 1px solid #3e3f32;
  border-radius: var(--radius);
  overflow: hidden;
  background: #262619;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}

/* The ground (terrain and everything left on it) is its own layer under the battle, painted once, not every frame.
   Between them, the low dust and exhaust (at the smoke's pixels). Over the battle: smoke and fire on two canvases (drawn at fewer pixels on a dense screen), then rings, bars and snow. */
.nml canvas#nml-ground,
.nml canvas#nml-dust,
.nml canvas#nml-canvas,
.nml canvas#nml-smoke,
.nml canvas#nml-smoke2,
.nml canvas#nml-ui {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.nml canvas#nml-ground,
.nml canvas#nml-dust,
.nml canvas#nml-smoke,
.nml canvas#nml-smoke2,
.nml canvas#nml-ui {
  pointer-events: none;
}

/* The battle's leavings, over the ground: a canvas in map units, placed by its transform (render.js). */
.nml canvas#nml-marks {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transform-origin: 0 0;
  pointer-events: none;
}

/* In full screen: the whole screen, no frame. */
.nml.nml-fs {
  max-width: none;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

:where(.nml):fullscreen {
  background: #262619;
}

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

.nml-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.nml-hud > * {
  pointer-events: auto;
}

.nml-hud-top {
  position: absolute;
  top: var(--pad-t);
  left: var(--pad-l);
  right: var(--pad-r);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gap);
  pointer-events: none;
}

.nml-hud-top > * {
  pointer-events: auto;
}

.nml-stats,
.nml-buttons {
  display: flex;
  gap: var(--gap);
  align-items: center;
}

/* "Leave full screen" sits at the top in the middle (44 px): each side of
   the HUD stops 30 px short of the middle. */
.nml-stats {
  max-width: calc(50% - 30px - var(--pad-l));
  min-width: 0;
}

.nml-stat {
  min-width: 0;
}

@media (max-width: 420px) {
  .nml-stat {
    padding: 0 8px;
    gap: 4px;
    font-size: 15px;
  }
  .nml-stat svg {
    width: 17px;
    height: 17px;
  }
}

.nml-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--btn);
  padding: 0 11px;
  border-radius: var(--radius);
  background: rgba(22, 23, 17, 0.78);
  border: 1px solid var(--line);
  font-size: max(var(--t-min), 16px);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.nml-stat svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.nml-stat b {
  font-weight: 750;
  min-width: 2ch;
}

.nml-stat-city {
  color: #cfe3ee;
}

.nml-stat-city.nml-low {
  color: #ffb3a3;
  border-color: rgba(255, 110, 90, 0.7);
  animation: nml-throb 0.8s ease-in-out infinite alternate;
}

.nml-stat-cash {
  color: #ffe08a;
}

.nml-stat-cash.nml-gain {
  border-color: rgba(255, 224, 138, 0.7);
}

.nml-lbl {
  color: var(--muted);
  font-size: var(--t-min);
}

@keyframes nml-throb {
  to {
    background: rgba(110, 30, 20, 0.85);
  }
}

.nml-hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--btn);
  height: var(--btn);
  padding: 0 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(232, 223, 196, 0.3);
  background: linear-gradient(#3b3e31, #2a2c22);
  color: var(--text);
  font-size: max(var(--t-min), 16px);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.nml-hbtn svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.nml-hbtn:hover {
  border-color: rgba(232, 223, 196, 0.6);
}

.nml-hbtn:focus-visible,
.nml-btn:focus-visible,
.nml-build:focus-visible,
.nml-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nml-hbtn:active {
  transform: translateY(1px);
}

/* The wave controls: on a screen held sideways they sit in the top bar,
   left of speed and pause; upright, along the bottom. */
.nml-hud-wave {
  position: absolute;
  top: var(--pad-t);
  right: calc(var(--pad-r) + 2 * var(--btn) + 2 * var(--gap));
  max-width: calc(50% - 30px - var(--pad-r) - 2 * var(--btn) - 2 * var(--gap));
  display: flex;
  gap: var(--gap);
  align-items: center;
}

.nml-wavebtn {
  min-width: 0;
  overflow: hidden;
}

.nml-wavetext {
  overflow: hidden;
  text-overflow: ellipsis;
}

.nml-wavebtn {
  background: linear-gradient(#6b5422, #48391a);
  border-color: rgba(226, 183, 75, 0.7);
  color: #ffe9b0;
  padding: 0 12px;
}

.nml-wavebtn.nml-ready {
  animation: nml-ready 1.1s ease-in-out infinite alternate;
}

@keyframes nml-ready {
  to {
    box-shadow: 0 0 0 3px rgba(226, 183, 75, 0.45), 0 2px 10px rgba(0, 0, 0, 0.35);
  }
}

.nml-wavebtn:disabled {
  opacity: 0.55;
  cursor: default;
  animation: none;
}

.nml-preview {
  display: inline-flex;
  gap: 2px;
}

.nml-preview canvas {
  width: 22px;
  height: 22px;
}

.nml-wavetext {
  white-space: nowrap;
}

@media (orientation: portrait) {
  .nml-hud-wave {
    top: auto;
    left: var(--pad-l);
    right: var(--pad-r);
    bottom: var(--pad-b);
    max-width: none;
    justify-content: space-between;
  }
  .nml-wavebtn {
    flex: 1 1 auto;
    max-width: 320px;
  }
}

/* A phone held sideways: the button's own label ("Wave 3 · 12s") stands for the wave count,
   so the button has the room to show it whole. */
@media (orientation: landscape) and (max-width: 900px) {
  .nml-wavestat {
    display: none;
  }
}

@media (max-width: 720px) {
  .nml-preview {
    display: none;
  }
}

.nml-boss {
  position: absolute;
  top: calc(var(--pad-t) + var(--btn) + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, 58%);
  display: grid;
  gap: 4px;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: rgba(30, 14, 10, 0.78);
  border: 1px solid rgba(255, 120, 90, 0.5);
  pointer-events: none;
  text-align: center;
}

.nml-bossname {
  font-weight: 750;
  font-size: var(--t-min);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffc0ae;
}

.nml-bossbar {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.nml-bossbar i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #d9472f, #f08a3c);
}

@media (orientation: portrait) {
  .nml-boss {
    width: calc(100% - var(--pad-l) - var(--pad-r));
  }
}

/* A phone held sideways: one row, the name beside its bar, so it covers little of the battle. */
@media (orientation: landscape) and (max-height: 500px) {
  .nml-boss {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    width: min(360px, 44%);
    padding: 4px 10px;
    text-align: left;
  }
}

/* Intel notices: a strip low on the screen, never over a control. */
.nml-toast {
  position: absolute;
  left: var(--pad-l);
  bottom: var(--pad-b);
  max-width: min(400px, calc(100% - var(--pad-l) - var(--pad-r)));
  display: grid;
  gap: 6px;
  pointer-events: none;
  z-index: 3;
}

@media (orientation: portrait) {
  .nml-toast {
    bottom: calc(var(--pad-b) + var(--btn) + 10px);
  }
}

.nml-note {
  padding: 6px 10px;
  border-radius: var(--radius);
  background: rgba(20, 21, 16, 0.9);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  font-size: var(--t-min);
  line-height: 1.35;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  animation: nml-in 0.25s ease-out;
}

.nml-note b {
  color: var(--accent);
}

.nml-note.nml-bad {
  border-left-color: var(--bad);
}

.nml-note.nml-good {
  border-left-color: var(--good);
}

@keyframes nml-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---------- The build and defense panel ---------- */

.nml-panel {
  position: absolute;
  z-index: 4;
  /* Under the HUD's top row, which stays in reach. */
  top: calc(var(--pad-t) + var(--btn) + var(--gap));
  bottom: var(--pad-b);
  right: var(--pad-r);
  width: min(330px, 46%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  /* Solid: a toast passing under it never reads through its text. */
  background: rgb(24, 26, 20);
  border: 1px solid var(--line);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* A short screen scrolls the panel; nothing in it is squeezed to overlap the next thing. */
.nml-panel > * {
  flex-shrink: 0;
}

.nml-panel.nml-left {
  right: auto;
  left: var(--pad-l);
}

/* Held sideways, the panel stays clear of the top middle, where "Leave full screen" sits. */
/* Upright, a sheet above the wave bar, so Send wave stays in reach. */
@media (orientation: portrait) {
  .nml-panel,
  .nml-panel.nml-left {
    top: auto;
    left: var(--pad-l);
    right: var(--pad-r);
    bottom: calc(var(--pad-b) + var(--btn) + var(--gap));
    width: auto;
    max-height: calc(100% - var(--pad-b) - var(--btn) - var(--gap) - var(--pad-t) - var(--btn) - var(--gap));
  }
}

.nml-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nml-panel-title {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
}

.nml-panel-title b {
  font-size: max(var(--t-min), 17px);
}

.nml-panel-title span {
  color: var(--muted);
  font-size: var(--t-min);
}

.nml-panel-cash {
  color: #ffe08a;
  font-weight: 750;
  font-size: max(var(--t-min), 16px);
  font-variant-numeric: tabular-nums;
}

.nml-x {
  width: var(--btn);
  height: var(--btn);
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.nml-info {
  font-size: var(--t-min);
  line-height: 1.35;
  color: var(--muted);
  min-height: 2.7em;
}

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

.nml-doctrine {
  display: grid;
  gap: 8px;
}

.nml-drow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}

.nml-dname {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 1px;
}

.nml-dname b {
  font-size: max(var(--t-min), 16px);
}

.nml-dname span {
  color: var(--muted);
  font-size: var(--t-min);
  line-height: 1.3;
}

.nml-dname .nml-drank {
  color: #ffe08a;
}

.nml-drow .nml-btn {
  flex: none;
  flex-direction: column;
  gap: 0;
  padding: 4px 10px;
  min-width: 88px;
}

.nml-build-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (orientation: portrait) {
  .nml-build-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media (orientation: portrait) and (max-width: 420px) {
  .nml-build-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.nml-build {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  min-height: 52px;
  padding: 5px 8px;
  border-radius: 9px;
  border: 1px solid rgba(232, 223, 196, 0.22);
  background: linear-gradient(#34372b, #2a2c22);
  text-align: left;
  cursor: pointer;
}

.nml-build canvas {
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
}

.nml-build .nm {
  font-size: var(--t-min);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nml-build .cost {
  font-size: var(--t-min);
  color: #ffe08a;
  font-variant-numeric: tabular-nums;
}

.nml-build kbd {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 12px;
  min-width: 1.4em;
  padding: 0 3px;
  opacity: 0.8;
}

.nml-build.nml-poor .cost {
  color: var(--bad);
}

.nml-build.nml-poor {
  opacity: 0.72;
}

.nml-build.nml-picked {
  border-color: var(--accent);
  background: linear-gradient(#5a4a22, #3f341a);
  box-shadow: 0 0 0 2px rgba(226, 183, 75, 0.4);
}

.nml-stats-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  font-size: var(--t-min);
}

.nml-stats-grid dt {
  color: var(--muted);
}

.nml-stats-grid dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.nml-up {
  color: var(--good);
}

.nml-actions {
  display: grid;
  gap: 8px;
}

.nml-actions .nml-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ---------- Buttons and menus ---------- */

.nml-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn);
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(232, 223, 196, 0.3);
  background: linear-gradient(#3b3e31, #2a2c22);
  color: var(--text);
  font-size: max(var(--t-min), 16px);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.nml-btn.nml-primary {
  background: linear-gradient(#e7bf55, #c99630);
  color: var(--ink);
  border-color: #f3d27c;
}

.nml-btn.nml-danger {
  border-color: rgba(255, 138, 115, 0.6);
  color: #ffd2c6;
}

.nml-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.nml-btn small {
  font-size: max(var(--t-min), 14px);
  font-weight: 500;
  opacity: 0.85;
}

.nml-screen {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: max(60px, var(--pad-t)) var(--pad-r) var(--pad-b) var(--pad-l);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: radial-gradient(ellipse at center, rgba(14, 14, 10, 0.35), rgba(10, 10, 7, 0.82));
}

.nml-screen:empty {
  display: none;
}

.nml-card {
  width: min(560px, 100%);
  padding: 18px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55);
  display: grid;
  gap: 12px;
}

.nml-card.nml-wide {
  width: min(980px, 100%);
}

.nml-card h2 {
  margin: 0;
  font-size: max(var(--t-min), 22px);
  letter-spacing: 0.04em;
}

.nml-card p {
  margin: 0;
  font-size: max(var(--t-min), 15px);
  line-height: 1.45;
  color: var(--muted);
}

.nml-card .nml-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nml-card .nml-row > .nml-btn {
  flex: 1 1 140px;
}

/* The title. */
.nml-title {
  width: min(520px, 100%);
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

.nml-title h2 {
  margin: 0;
  font-family: Impact, 'Arial Black', 'Helvetica Neue', system-ui, sans-serif;
  font-size: clamp(40px, 11vmin, 92px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #efe6cc;
  text-shadow: 0 3px 0 #2d2a1d, 0 10px 30px rgba(0, 0, 0, 0.8);
}

.nml-title p {
  margin: 0;
  color: #d8cfb4;
  font-size: max(var(--t-min), 17px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.nml-title .nml-menu {
  display: grid;
  gap: 8px;
  width: min(320px, 100%);
}

.nml-title .nml-menu .nml-btn {
  width: 100%;
}

.nml-small {
  font-size: var(--t-min);
  color: var(--muted);
}

/* Fronts. */
.nml-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nml-head h2 {
  flex: 1 1 auto;
}

.nml-seg {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.nml-seg button {
  flex: 1 1 90px;
  min-height: var(--btn);
  border-radius: var(--radius);
  border: 1px solid rgba(232, 223, 196, 0.25);
  background: var(--panel-2);
  font-weight: 700;
  font-size: max(var(--t-min), 15px);
  cursor: pointer;
}

.nml-seg button[aria-pressed='true'] {
  background: linear-gradient(#e7bf55, #c99630);
  color: var(--ink);
  border-color: #f3d27c;
}

.nml-maps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 10px;
}

.nml-mapcard {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(232, 223, 196, 0.25);
  background: var(--panel-2);
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}

.nml-mapcard canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

.nml-mapcard .nml-mapinfo {
  display: grid;
  gap: 2px;
  padding: 8px 10px 10px;
}

.nml-mapcard b {
  font-size: max(var(--t-min), 16px);
}

.nml-mapcard .nml-small {
  line-height: 1.3;
}

.nml-stars {
  color: var(--accent);
  letter-spacing: 0.12em;
  font-size: max(var(--t-min), 16px);
}

.nml-stars .off {
  color: rgba(232, 223, 196, 0.25);
}

.nml-mapcard.nml-locked {
  cursor: default;
}

.nml-mapcard.nml-locked canvas {
  filter: grayscale(1) brightness(0.45);
}

.nml-lock {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.7);
  font-size: var(--t-min);
}

/* Results. */
.nml-bigstars {
  font-size: 44px;
  letter-spacing: 0.15em;
  text-align: center;
  color: var(--accent);
}

.nml-result-win h2 {
  color: var(--good);
}

.nml-result-loss h2 {
  color: var(--bad);
}

.nml-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: max(var(--t-min), 15px);
}

.nml-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}

/* Endless: the fronts, and the top 10 beside them where there's room (below them on a phone). */
.nml-endless {
  display: grid;
  gap: 14px;
  align-items: start;
}

@media (min-width: 900px) {
  .nml-endless {
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  }

  .nml-endless .nml-maps {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }

  .nml-endless .nml-boards {
    border-top: 0;
    padding-top: 0;
  }
}

/* Endless: the boards. */
.nml-boards {
  display: grid;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.nml-boards h3 {
  margin: 0;
  flex: 1 1 auto;
  font-size: max(var(--t-min), 18px);
}

.nml-fronts button {
  flex: 1 1 120px;
}

.nml-board {
  display: grid;
  gap: 8px;
  min-height: 3em;
}

.nml-board p {
  margin: 0;
}

.nml-top {
  counter-reset: none;
}

.nml-top li {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 10px;
}

.nml-top .nml-rank {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.nml-top .nml-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nml-top b,
.nml-top .nml-small {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.nml-top li.nml-me {
  color: var(--accent);
}

.nml-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--panel-2);
}

.nml-progress {
  height: 10px;
  border-radius: 5px;
  background: var(--panel-2);
  overflow: hidden;
}

.nml-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #c99630, #e7bf55);
}

.nml-ach {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 8px;
}

.nml-ach > div {
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: var(--t-min);
}

.nml-ach > div.nml-got {
  border-color: rgba(226, 183, 75, 0.6);
}

.nml-ach > div b {
  display: block;
}

.nml-ach > div:not(.nml-got) b {
  color: var(--muted);
}

/* Settings. */
.nml-set {
  display: grid;
  gap: 10px;
}

.nml-set label {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  align-items: center;
  gap: 10px;
  font-size: max(var(--t-min), 15px);
}

.nml-set input[type='range'] {
  width: 100%;
  height: var(--btn);
  accent-color: var(--accent);
}

.nml-set input[type='checkbox'] {
  width: 26px;
  height: 26px;
  accent-color: var(--accent);
  justify-self: start;
}

.nml-set .nml-toggle {
  min-height: var(--btn);
}

/* How to play. */
.nml-help {
  display: grid;
  gap: 10px;
  font-size: max(var(--t-min), 15px);
  line-height: 1.45;
}

.nml-help h3 {
  margin: 6px 0 0;
  font-size: max(var(--t-min), 17px);
}

.nml-help table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-min);
}

.nml-help td,
.nml-help th {
  text-align: left;
  vertical-align: top;
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
}

.nml-help th {
  color: var(--muted);
}

/* The page around the game. */
.nml-about {
  max-width: 900px;
  margin: 24px auto 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 16px;
}

.nml-about h1 {
  color: var(--text);
  font-size: 24px;
}

.nml-mature-note {
  color: #d8b3a6;
}

@media (prefers-reduced-motion: reduce) {
  .nml-note,
  .nml-wavebtn.nml-ready,
  .nml-stat-city.nml-low {
    animation: none;
  }
}