:root {
  --bg: #0e1418;
  --panel: #152029;
  --panel-2: #1c2a35;
  --line: #2c3f4d;
  --text: #eef2f0;
  --muted: #9fb2bc;
  --accent: #ffc05a;
  --teal: #4fd1c5;
  --good: #6fd16a;
  --bad: #e8604a;
  --common: #b9c3c9;
  --uncommon: #6fd16a;
  --rare: #57a8ff;
  --legendary: #ffb547;
  --radius: 10px;
  --header-h: 48px;
  --hud-h: 52px;
  /* The smallest text (docs/PLATFORMS.md, "Layout"): 14 px on a desktop,
     15 on a tablet and 13 on a phone. The canvas reads it too (render.js). */
  --t-min: 14px;
  color-scheme: dark;
}

@media (pointer: coarse) {
  :root {
    --t-min: 15px;
  }
}

@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%;
}

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

[hidden] {
  display: none !important;
}

.page {
  padding: 8px max(8px, env(safe-area-inset-right, 0px)) 40px max(8px, env(safe-area-inset-left, 0px));
}

.game-root {
  position: relative;
  margin: 0 auto;
  width: 100%;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  /* No scrolling, zooming, selection or long-press menus mid-play
     (docs/PLATFORMS.md); the menus scroll their own lists (.panel). */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  /* The safe-area insets where the game meets the screen's edges: none in
     the page, which keeps it inside them; all four in full screen. */
  --edge-t: 0px;
  --edge-r: 0px;
  --edge-b: 0px;
  --edge-l: 0px;
  /* Touch controls keep 16 px inside the safe area, and 24 px from a
     phone's rounded corners where the game reaches them. */
  --corner: 16px;
  --hud-side: 8px;
}

svg.ico {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.hud {
  display: flex;
  align-items: center;
  gap: 8px;
  height: calc(var(--hud-h) + var(--edge-t));
  padding: var(--edge-t) max(var(--hud-side), var(--edge-r)) 0 max(var(--hud-side), var(--edge-l));
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.hud-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: none;
  font-weight: 700;
  font-size: max(15px, var(--t-min));
  line-height: 1.15;
}

/* The water's name gives way first when the row is short of room. */
.hud-cell.where {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

.hud-cell .lbl {
  font-size: var(--t-min);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-cell.coins #coins {
  color: var(--accent);
}

.hud-cell.coins #coins.bump {
  animation: bump 0.35s ease-out;
}

@keyframes bump {
  40% {
    transform: scale(1.18);
  }
}

.hud-cell .clock {
  white-space: nowrap;
}

.hud-cell .phase {
  font-size: var(--t-min);
  color: var(--muted);
  font-weight: 600;
}

.hud-cell .phase-lbl {
  display: none;
}

.hud-cell .wx {
  display: inline-block;
  vertical-align: -3px;
  color: var(--muted);
}

.hud-cell .wx svg.ico {
  width: 16px;
  height: 16px;
}

/* The buttons sit at the right, thumb-sized and 8 px apart. */
.hud .btn {
  flex: none;
}

.hud #btn-shop {
  margin-left: auto;
}

.btn {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 700;
}

@media (hover: hover) {
  .btn:hover:not(:disabled) {
    border-color: var(--accent);
  }

  .btn-danger:hover:not(:disabled) {
    border-color: var(--bad);
  }
}

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

.btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.btn-primary {
  background: var(--accent);
  color: #1b1408;
  border-color: var(--accent);
}

.btn-danger {
  border-color: #7a3328;
  color: #ffb0a0;
}

.btn svg.ico {
  display: inline-block;
  vertical-align: -4px;
  margin-right: 4px;
}

.btn-icon svg.ico {
  margin: 0;
}

.btn-small {
  padding: 4px 12px;
  font-size: max(13px, var(--t-min));
}

.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
}

/* Phones held upright: the four buttons take most of the row, so the HUD
   names the time of day (Dawn, Day, Dusk or Night) where it names the water
   on wider screens, and shortens big sums of coins (main.js). */
@media (max-width: 559px) {
  .hud-cell.where #spot-name,
  .hud-cell .clock .phase {
    display: none;
  }
  .hud-cell .phase-lbl {
    display: inline;
  }
}

/* ---------- Stage ---------- */

.stage {
  position: relative;
  width: 100%;
  height: max(300px, calc(100vh - var(--header-h) - var(--hud-h) - 28px));
  /* The header grows by the top inset in the home-screen app, and the game
     stays clear of the home indicator below. */
  height: max(300px, calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px) - var(--hud-h) - 28px - env(safe-area-inset-bottom, 0px)));
  background: #0a1a22;
  touch-action: none;
  overflow: hidden;
  /* Where the touch controls sit: 16 px inside the safe area, and clear of
     a phone's rounded corners where the game reaches them. */
  --pad-l: max(var(--corner), calc(var(--edge-l) + 16px));
  --pad-r: max(var(--corner), calc(var(--edge-r) + 16px));
  --pad-b: max(var(--corner), calc(var(--edge-b) + 16px));
}

.stage #game {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.stage .scene-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.chip {
  background: rgba(12, 20, 26, 0.8);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
}

/* The safe area within the stage, which the canvas keeps its text inside
   (render.js reads it). */
.stage .safe-area {
  position: absolute;
  top: 0;
  right: var(--edge-r);
  bottom: var(--edge-b);
  left: var(--edge-l);
  visibility: hidden;
  pointer-events: none;
}

.req-chip {
  position: absolute;
  top: 8px;
  right: var(--pad-r);
  max-width: min(46%, 300px);
  min-height: 44px;
  padding: 6px 10px;
  background: rgba(12, 20, 26, 0.8);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: max(12px, var(--t-min));
  text-align: left;
  cursor: pointer;
  line-height: 1.35;
}

.req-chip .t {
  font-size: var(--t-min);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 700;
}

.req-chip .r {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
}

.req-chip .r span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.req-chip .r .p {
  margin-left: auto;
  color: var(--muted);
}

.req-chip .r b {
  color: var(--accent);
  min-width: 2.5em;
  text-align: right;
}

@media (max-width: 559px) {
  .req-chip .r b {
    display: none;
  }
}

.req-chip .r.done {
  color: var(--good);
}

.bait-chip {
  position: absolute;
  left: var(--pad-l);
  bottom: var(--pad-b);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px 6px 10px;
  background: rgba(12, 20, 26, 0.8);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: max(13px, var(--t-min));
  font-weight: 700;
  cursor: pointer;
}

.bait-chip .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.bait-chip small {
  color: var(--muted);
  font-size: inherit;
  font-weight: 600;
}

/* Left of the depth ruler's column, whose width the renderer reports
   (--ruler-w, main.js), so the button covers none of its labels. */
.action-btn {
  position: absolute;
  right: max(var(--pad-r), calc(var(--ruler-w, 48px) + 8px));
  bottom: var(--pad-b);
  min-width: 96px;
  height: 64px;
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(12, 20, 26, 0.7);
  color: #fff;
  font-weight: 800;
  font-size: max(16px, var(--t-min));
  touch-action: none;
  cursor: pointer;
}

.action-btn.strike {
  background: var(--accent);
  color: #1b1408;
  border-color: #fff4d8;
  animation: pulse 0.5s ease-in-out infinite;
}

.action-btn.reel {
  background: rgba(79, 209, 197, 0.35);
  border-color: var(--teal);
}

.action-btn.reel.held {
  background: rgba(79, 209, 197, 0.7);
}

@keyframes pulse {
  50% {
    transform: scale(1.08);
  }
}

/* In a fight the button rises above the tension gauge, whose height the
   renderer reports (--gauge-h, main.js). */
.stage.fighting .action-btn {
  bottom: calc(var(--gauge-h, 110px) + 12px);
}

.stage.fighting .bait-chip,
.stage.fighting .req-chip {
  display: none;
}

.derby-panel {
  position: absolute;
  top: 8px;
  left: var(--pad-l);
  min-width: 150px;
  padding: 7px 10px;
  background: rgba(12, 20, 26, 0.85);
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-size: max(12px, var(--t-min));
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.derby-panel .time {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
}

.derby-panel .time.low {
  color: #ff8a6a;
}

.derby-panel .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.derby-panel .row.you {
  color: var(--accent);
  font-weight: 800;
}

.derby-panel .cup {
  font-size: var(--t-min);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 2px;
}

.hint {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(88%, 440px);
  padding: 9px 14px;
  background: rgba(12, 20, 26, 0.88);
  border: 1px solid var(--teal);
  border-radius: 12px;
  font-size: max(14px, var(--t-min));
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  animation: toast-in 0.3s ease-out;
}

.hint kbd,
.panel kbd,
.about kbd {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--panel-2);
  font-family: system-ui, sans-serif;
  font-size: max(12px, var(--t-min));
  font-weight: 700;
}

.banner {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92%, 460px);
  padding: 8px 14px 8px 8px;
  background: rgba(12, 20, 26, 0.92);
  border: 1px solid var(--line);
  border-radius: 12px;
  pointer-events: none;
  animation: toast-in 0.25s ease-out;
  z-index: 3;
}

.banner canvas {
  flex: none;
  width: 72px;
  height: 36px;
}

.banner .b1 {
  font-weight: 800;
  font-size: max(14px, var(--t-min));
}

.banner .b2 {
  font-size: var(--t-min);
  color: var(--muted);
}

.banner.bad {
  border-color: var(--bad);
}

.banner.good {
  border-color: var(--good);
}

/* ---------- Toasts ---------- */

/* Above the bait chip, or above the on-screen button where it shows; in a
   fight, above the gauge, and the button over it. */
.toasts {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pad-b) + 56px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  width: min(90%, 440px);
  z-index: 4;
}

.stage.touch .toasts {
  bottom: calc(var(--pad-b) + 76px);
}

.stage.fighting .toasts {
  bottom: calc(var(--gauge-h, 110px) + 12px);
}

.stage.touch.fighting .toasts {
  bottom: calc(var(--gauge-h, 110px) + 88px);
}

.stage.fighting .hint {
  top: 12px;
}

.toast {
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(12, 20, 26, 0.92);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: max(13px, var(--t-min));
  text-align: center;
  animation: toast-in 0.25s ease-out;
}

.toast.good {
  border-color: var(--good);
}

.toast.bad {
  border-color: var(--bad);
}

.toast.gold {
  border-color: var(--accent);
  color: var(--accent);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
}

.toast {
  animation-name: toast-up;
}

@keyframes toast-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

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

.overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 10px max(10px, var(--edge-r)) max(10px, var(--edge-b)) max(10px, var(--edge-l));
  background: rgba(4, 8, 11, 0.7);
  z-index: 6;
}

.overlay.show {
  display: flex;
}

.overlay.light {
  background: rgba(4, 8, 11, 0.35);
}

.panel:focus {
  outline: none;
}

.panel {
  width: min(600px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  overscroll-behavior: contain;
  /* Long menus scroll; nothing zooms. */
  touch-action: pan-y;
}

.panel.wide {
  width: min(760px, 100%);
}

.panel h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.panel h3 {
  margin: 14px 0 6px;
  font-size: max(14px, var(--t-min));
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.panel .sub {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: max(14px, var(--t-min));
}

.panel .head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.panel .close {
  flex: none;
}

.panel .row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

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

.panel .row .name {
  font-weight: 700;
}

.panel .row .desc {
  font-size: max(12px, var(--t-min));
  color: var(--muted);
}

.panel .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}

.panel .price {
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
}

.tiers {
  display: flex;
  gap: 3px;
  margin-top: 5px;
}

.tiers i {
  width: 14px;
  height: 5px;
  border-radius: 2px;
  background: #2a3a46;
}

.tiers i.on {
  background: var(--teal);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 10px;
}

.tabs button {
  min-height: 44px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: max(13px, var(--t-min));
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

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

.tabs button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* logbook */

.book {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.card {
  position: relative;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

@media (hover: hover) {
  .card:hover {
    border-color: var(--teal);
  }
}

.card canvas {
  width: 100%;
  height: 58px;
}

.card .n {
  font-weight: 800;
  font-size: max(13px, var(--t-min));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card .m {
  font-size: max(11px, var(--t-min));
  color: var(--muted);
}

.card .medal {
  position: absolute;
  top: 6px;
  right: 6px;
}

.medal {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.35);
  vertical-align: -1px;
}

.medal.t1 {
  background: #d08a4a;
}

.medal.t2 {
  background: #cfd6de;
}

.medal.t3 {
  background: #ffc93c;
}

.rar-common {
  color: var(--common);
}

.rar-uncommon {
  color: var(--uncommon);
}

.rar-rare {
  color: var(--rare);
}

.rar-legendary {
  color: var(--legendary);
}

.detail canvas.big {
  width: 100%;
  height: 150px;
  display: block;
  border-radius: 10px;
  background: radial-gradient(ellipse at center, #1f3b4a, #0f1d26 70%);
}

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: max(13px, var(--t-min));
  margin-top: 10px;
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
  font-weight: 600;
}

.progress {
  height: 6px;
  border-radius: 3px;
  background: #22323d;
  overflow: hidden;
  margin-top: 4px;
}

.progress i {
  display: block;
  height: 100%;
  background: var(--teal);
}

/* catch card */

.catch {
  text-align: center;
}

.catch .ribbon {
  display: inline-block;
  margin: 0 3px 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: max(12px, var(--t-min));
  font-weight: 800;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.catch .ribbon.new {
  background: var(--teal);
  color: #062220;
  border-color: var(--teal);
}

.catch .ribbon.pb {
  background: #3a5a2a;
  border-color: var(--good);
}

.catch .ribbon.gold {
  background: #5a4410;
  border-color: #ffc93c;
  color: #ffe08a;
}

.catch .ribbon.legend {
  background: #5a3a10;
  border-color: var(--legendary);
  color: #ffd48a;
}

.catch h2 {
  font-size: 26px;
}

.catch .kg {
  font-size: 30px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.catch .value {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
}

.catch .extra {
  font-size: max(13px, var(--t-min));
  color: var(--good);
  font-weight: 700;
}

.catch .flavor {
  font-size: max(13px, var(--t-min));
  color: var(--muted);
  font-style: italic;
  margin: 8px 0 0;
}

.catch canvas.big {
  width: 100%;
  height: 170px;
  display: block;
  border-radius: 10px;
  background: radial-gradient(ellipse at center, #22475a, #0f1d26 70%);
  margin-bottom: 8px;
}

/* bait grid */

.baits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.bait {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bait.on {
  border-color: var(--accent);
}

.bait .n {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
}

.bait .n i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
}

.bait .d {
  font-size: max(12px, var(--t-min));
  color: var(--muted);
}

.bait .k {
  font-size: max(11px, var(--t-min));
  color: var(--muted);
}

.bait:disabled {
  cursor: default;
}

/* map */

.spot {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  align-items: center;
}

.spot .sw {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  border: 1px solid var(--line);
}

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

.spot .nm {
  font-weight: 800;
}

.spot .bl {
  font-size: max(12px, var(--t-min));
  color: var(--muted);
}

.spot .meta {
  font-size: max(12px, var(--t-min));
  margin-top: 3px;
}

.spot .btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  flex: none;
}

.spot.here .nm::after {
  content: ' (you are here)';
  color: var(--teal);
  font-weight: 600;
  font-size: max(12px, var(--t-min));
}

.spot.locked {
  opacity: 0.75;
}

@media (max-width: 540px) {
  .spot {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .spot .sw {
    width: 42px;
    height: 42px;
  }
  .spot .grow {
    flex-basis: calc(100% - 60px);
  }
  .spot .btns {
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
  }
  .spot .btns:empty {
    display: none;
  }
}

/* derby */

.standings {
  width: 100%;
  border-collapse: collapse;
  font-size: max(14px, var(--t-min));
  margin-top: 8px;
}

.standings td {
  padding: 6px 4px;
  border-top: 1px solid var(--line);
}

.standings tr.you td {
  color: var(--accent);
  font-weight: 800;
}

.standings td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* title */

.title-screen {
  text-align: center;
}

.panel .logo {
  font-size: clamp(40px, 9vw, 64px);
  font-weight: 900;
  letter-spacing: 3px;
  margin: 0;
  background: linear-gradient(180deg, #fff1c4, #ffc05a 45%, #2aa6a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.title-screen .tag {
  color: var(--muted);
  margin: 4px 0 16px;
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 300px;
  margin: 0 auto;
}

.menu-buttons .btn {
  padding: 12px;
  font-size: 16px;
}

.menu-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

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

.howto {
  text-align: left;
  font-size: max(13px, var(--t-min));
  color: var(--muted);
  margin: 14px auto 0;
  max-width: 460px;
  padding-left: 18px;
}

.howto li {
  margin: 4px 0;
}

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

.stats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  font-size: max(14px, var(--t-min));
}

.ach {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: max(13px, var(--t-min));
}

.ach .dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2a3a46;
}

.ach.done .dot {
  background: var(--accent);
}

.ach .desc {
  color: var(--muted);
  font-size: max(12px, var(--t-min));
}

/* ---------- panel extras ---------- */

.panel .note {
  font-size: max(12px, var(--t-min));
  color: var(--muted);
  margin: 6px 0 0;
}

.panel .note.good {
  color: var(--good);
  font-weight: 700;
}

.panel .actions.center {
  justify-content: center;
}

.coins-line {
  font-size: max(13px, var(--t-min));
  color: var(--muted);
  margin: -2px 0 6px;
}

.coins-line b {
  color: var(--accent);
}

.panel .row .buy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex: none;
}

.panel .row .maxed {
  flex: none;
  font-size: max(12px, var(--t-min));
  color: var(--teal);
  font-weight: 700;
  text-align: right;
  max-width: 110px;
}

.panel .row .desc.next {
  margin-top: 4px;
  color: #c6d3da;
}

.panel .row .name .swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-right: 7px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  vertical-align: -1px;
}

.panel .row.req canvas.mini {
  flex: none;
  width: 72px;
  height: 32px;
}

.medals {
  display: inline-flex;
  gap: 3px;
  vertical-align: -1px;
}

.medal.off {
  opacity: 0.18;
}

.log-top {
  font-size: max(13px, var(--t-min));
  font-weight: 700;
}

.log-top .featured {
  margin-top: 6px;
  color: var(--accent);
  font-weight: 600;
}

.card.unknown .n {
  color: var(--muted);
}

.card.unknown canvas {
  opacity: 0.9;
}

.detail .back {
  margin-bottom: 8px;
}

.detail .sp-name {
  margin: 10px 0 2px;
  font-size: 20px;
  text-transform: none;
  letter-spacing: 0;
}

.detail .flavor {
  margin: 0 0 6px;
  font-size: max(13px, var(--t-min));
  color: #c6d3da;
  font-style: italic;
}

.detail .legend-hint {
  font-size: max(13px, var(--t-min));
  color: var(--legendary);
  margin: 4px 0 8px;
}

.trophies {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.trophies span {
  opacity: 0.5;
}

.trophies span.got {
  opacity: 1;
}

.catch .ribbons {
  min-height: 4px;
}

.catch .kg .len {
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
}

.catch .extra.warm {
  color: #ffb08a;
}

.catch.rar-bg-legendary {
  border-color: var(--legendary);
  box-shadow: 0 0 0 1px rgba(255, 181, 71, 0.4), 0 10px 50px rgba(255, 181, 71, 0.18);
}

.catch.rar-bg-rare {
  border-color: #3a6aa0;
}

.title-screen .save-sum {
  margin: 12px 0 0;
  font-size: max(13px, var(--t-min));
  color: var(--muted);
}

.settings-row {
  margin-top: 14px;
}

.derby-end.won h2 {
  color: var(--accent);
}

.derby-end .prize {
  font-weight: 800;
  color: var(--accent);
  margin: 10px 0 0;
}

.standings.prizes {
  max-width: 320px;
}

.bait .n kbd {
  margin-left: auto;
}

/* ---------- Short landscape screens ---------- */
/* Phones held sideways: hide the site header while fishing so the water
   gets the height. The header comes back on menus and result screens
   (body.menu-open), with the water shortened to fit. While fishing the game
   meets the screen's sides and bottom, so its controls keep clear of the
   home indicator and the rounded corners. */
@media (max-height: 540px) and (orientation: landscape) {
  :root {
    --hud-h: 48px;
  }
  body.playing:not(.menu-open) .site-header {
    display: none;
  }
  body.playing .page {
    padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  }
  body.playing .game-root {
    border-radius: 0;
    border-width: 0;
    max-width: none;
    --edge-b: env(safe-area-inset-bottom, 0px);
    --corner: 24px;
    --hud-side: 24px;
  }
  body.playing .stage {
    height: calc(100vh - var(--hud-h));
    height: calc(100dvh - var(--hud-h));
    min-height: 200px;
  }
  body.playing.menu-open .stage {
    height: calc(100vh - var(--hud-h) - var(--header-h));
    height: calc(100dvh - var(--hud-h) - var(--header-h) - env(safe-area-inset-top, 0px));
    min-height: 200px;
  }
  /* The title screen: the water fits under the header. */
  body:not(.playing) .stage {
    height: calc(100vh - var(--header-h) - 18px);
    height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px) - 18px);
    min-height: 200px;
  }
  .action-btn {
    height: 54px;
  }
  .catch canvas.big,
  .detail canvas.big {
    height: 96px;
  }
  .catch h2 {
    font-size: 20px;
  }
  .catch .kg {
    font-size: 22px;
  }
  .panel {
    padding: 12px;
  }
}

/* ---------- Full screen (the site's button, docs/PLATFORMS.md) ---------- */
/* The game fills the screen: the HUD keeps to the safe areas and the water
   takes the rest, drawn at its new size on the next frame (render.js).
   "Leave full screen" sits at the top in the middle of the HUD's row, which
   keeps its middle free. */
#game-root:fullscreen {
  display: flex;
  flex-direction: column;
  max-width: none;
  border: 0;
  border-radius: 0;
  --edge-t: env(safe-area-inset-top, 0px);
  --edge-r: env(safe-area-inset-right, 0px);
  --edge-b: env(safe-area-inset-bottom, 0px);
  --edge-l: env(safe-area-inset-left, 0px);
  --corner: 24px;
  --hud-side: 24px;
}

#game-root:fullscreen .hud {
  flex: none;
}

/* Reserve the exit's middle slot even with late-game coins and long water
   names on small landscape/tablet widths. */
@media (min-width: 560px) and (max-width: 899px) {
  #game-root:fullscreen .hud-cell.where {
    max-width: calc(50% - 140px);
  }
}

#game-root:fullscreen .stage {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

#game-root .am-fs-exit {
  top: calc(var(--edge-t) + (var(--hud-h) - 44px) / 2);
}

/* Before play starts the HUD is hidden, and the title card starts below
   the button. */
body:not(.playing) #game-root:fullscreen .overlay {
  padding-top: calc(var(--edge-t) + var(--hud-h));
}

/* A phone held upright: the HUD's buttons reach the middle of its row, so
   the button gets a band of its own above them, which also keeps the HUD
   clear of the screen's rounded top corners. */
@media (max-width: 559px) {
  #game-root:fullscreen {
    --hud-side: 16px;
    --fs-band: 56px;
  }
  #game-root:fullscreen .hud {
    height: calc(var(--edge-t) + var(--fs-band) + var(--hud-h));
    padding-top: calc(var(--edge-t) + var(--fs-band));
  }
  #game-root .am-fs-exit {
    top: calc(var(--edge-t) + (var(--fs-band, 56px) - 44px) / 2);
  }
}

/* ---------- Below the game ---------- */

@media (prefers-reduced-motion: reduce) {
  /* Calm decoration; action and result feedback keep their timing. */
  .action-btn.strike, .toast, .banner, .hint { animation: none; }
}

.ad-below {
  max-width: 1100px;
  margin: 12px auto 0;
}

.about {
  max-width: 820px;
  margin: 24px auto 0;
  padding: 0 8px;
  line-height: 1.6;
  color: #d3dde2;
}

.about h1 {
  font-size: 26px;
  margin: 0 0 8px;
}

.about h2 {
  font-size: 19px;
  margin: 18px 0 6px;
}

.about ul {
  padding-left: 20px;
}