/**
 * @file
 * @brief Browser layout and non-game presentation.
 * @date 2026-10-01
 */

:root {
  color-scheme: dark;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #eaf7ff;
  background: #071321;
  --bg: #071321;
  --panel: #0d2239;
  --line: #1d4563;
  --text: #eaf7ff;
  --muted: #9bb4c3;
  --cyan: #5ee7f7;
}
html {
  height: 100%;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  /* No minimum width: at 320 pixels a desktop scrollbar leaves about 305 for the page,
     and a floor would scroll it sideways (WCAG 1.4.10). */
  min-height: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* A northern night: two faint aurora bands over the dark, fading into the lake below. */
  background:
    radial-gradient(ellipse 60% 26% at 22% -4%, #2fd6a826 0, transparent 70%),
    radial-gradient(ellipse 50% 22% at 78% -2%, #7a6cff1f 0, transparent 70%),
    radial-gradient(ellipse at 48% -12%, #163a57 0, #071321 45%, #050e19 100%);
  background-attachment: fixed;
}
button, a { font: inherit; }
button:focus-visible, a:focus-visible {
  outline: 3px solid #ffd16f;
  outline-offset: 3px;
}
.shell { max-width: 1440px; margin: 0 auto; padding: 22px 26px 16px; }
.topbar {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.brand {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  color: var(--text);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: .015em;
  text-decoration: none;
}
.brand small {
  grid-column: 2;
  margin-top: -2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .03em;
}
.brand-mark { grid-row: 1 / 3; color: var(--cyan); font-size: 28px; }
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.nav-link {
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.nav-link:hover, .nav-link[aria-current="page"] {
  border-color: var(--line);
  color: var(--text);
  background: #0b1d31;
}
[hidden] { display: none !important; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 17px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #0b1d31;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.button[hidden] { display: none; }
.button:hover { border-color: var(--cyan); }
.button.primary { border-color: var(--cyan); color: #062032; background: var(--cyan); }
.button.ghost { background: #0b1d31; }
.eyebrow {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.landing-view {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 4px 0 34px;
}
/* The hero is the game's own art (web/art/hero.png, written by ix_shot). */
.hero {
  position: relative;
  width: min(1200px, 100%);
  margin: 0;
  overflow: hidden;
  border: 1px solid #2a5a78;
  border-radius: 22px;
  box-shadow: 0 30px 80px #0007;
}
.hero-art { display: block; width: 100%; height: auto; }
.hero::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(transparent, #050e19d9);
  pointer-events: none;
}
.landing-card {
  width: min(900px, 100%);
  padding: clamp(28px, 6vw, 64px);
  border: 1px solid #8fd3ff38;
  border-radius: 20px;
  background: linear-gradient(130deg, #0e2a43e6, #091a2ced 70%);
  box-shadow: 0 24px 70px #0005, inset 0 1px 0 #ffffff14;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* Frost gathers along the card's top edge. */
.landing-card { position: relative; }
.landing-card::before {
  content: "";
  position: absolute;
  inset: 0 18px auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, #bfefff99 20%, #5ee7f7cc 50%, #bfefff99 80%, transparent);
}
.hero-card { margin-top: clamp(-80px, -6vw, -28px); }
.tagline {
  margin: -4px 0 16px;
  color: #ffd9a8;
  font-size: clamp(17px, 2.2vw, 22px);
  font-style: italic;
  font-weight: 600;
}
.lore h2 { margin: 0 0 12px; color: var(--text); font-size: clamp(24px, 3vw, 32px); }
.lakes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.lakes li {
  overflow: hidden;
  border: 1px solid #24516c;
  border-radius: 14px;
  background: #0a1d31;
}
.lakes img { display: block; width: 100%; height: auto; aspect-ratio: 820 / 620; }
.lakes h3 { margin: 12px 14px 4px; color: #e6f5ff; font-size: 17px; }
.lakes p { margin: 0 14px 14px; color: #a9c2d1; font-size: 14px; line-height: 1.45; }
.matches-view { display: grid; justify-items: center; padding: 4px 0 34px; }
.matches-card h1 { margin: 6px 0 10px; font-size: clamp(30px, 4vw, 44px); }
.history { display: grid; gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.history li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #24516c;
  border-radius: 12px;
  background: #0a1d31;
}
.history strong { color: #e6f5ff; }
.history .won { color: #7ff0b0; }
.history .lost { color: #ffb08a; }
.history small { grid-column: 1; color: #93aebd; }
.history .button { grid-row: 1 / 3; grid-column: 2; }
.your-data { display: grid; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #24516c; }
.your-data h2 { margin: 0; font-size: 20px; color: var(--text); }
.consent { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; color: #cfe3ee; }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.consent[hidden] { display: none; }
.site-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 8px;
  color: #6f8ea2;
  font-size: 13px;
}
.landing-card h1 {
  margin: 10px 0 10px;
  color: var(--text);
  font-size: clamp(42px, 7vw, 76px);
  line-height: .98;
  letter-spacing: -.06em;
}
.landing-card h1 span { color: var(--cyan); text-shadow: 0 0 28px #5ee7f755; }
.landing-copy {
  max-width: 570px;
  margin: 0;
  color: #b3cbd8;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
}
.landing-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.landing-note { margin: 28px 0 0; color: #87a7b8; font-size: 14px; }
.landing-note[hidden] { display: none; }
.landing-note span { padding: 0 7px; color: var(--cyan); }
.settings-view { max-width: 1080px; margin: 0 auto; padding: 5px 0 24px; }
/* The owner's chatter review console (development builds only; doc/chatter.md). */
.review-panel { display: grid; gap: 12px; padding: 16px; }
.review-filters, .review-io { display: flex; flex-wrap: wrap; gap: 8px; }
.review-filters select { min-height: 40px; padding: 6px 9px; border: 1px solid #244761; border-radius: 8px; color: var(--text); background: #071a2b; font: inherit; }
.review-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.review-angler { display: grid; justify-items: center; margin: 0; padding: 10px; border: 2px solid transparent; border-radius: 12px; background: #d7eaf2; color: #0f2a3d; font-weight: 650; }
.review-angler canvas { height: 150px; max-width: 100%; }
.angler-bios { display: grid; gap: 10px; margin-top: 14px; }
/* The anglers page (web/gallery.js): each character in the kit, its range, and the lore. */
.anglers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.angler-card { padding: 14px; }
.angler-card h2 { margin: 10px 0 6px; font-size: 22px; }
.angler-card h2 small { color: var(--muted); font-size: 13px; font-weight: 600; }
.angler-card p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.angler-poses { display: flex; justify-content: center; gap: 2px; padding: 8px 4px 0; border-radius: 10px; background: linear-gradient(#173a55 0 46%, #d7eaf2 46% 100%); overflow: hidden; }
.angler-poses canvas { height: 104px; max-width: 25%; }
.angler-card canvas[data-static-fallback] { background: url("./art/gallery-fallback.png") no-repeat var(--static-position) center / 300% 100%; }
.kit-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.kit-look { margin: 0; width: 132px; padding: 6px; border-radius: 10px; background: #d7eaf2; color: #0f2a3d; text-align: center; }
.kit-look canvas { height: 120px; max-width: 100%; }
.kit-look figcaption { font-size: 12px; line-height: 1.35; }
.lore-facts { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.lore-fact { padding: 8px 10px; border: 1px solid #244761; border-radius: 8px; background: #091d2d; font-size: 14px; }
.lore-fact small { color: var(--muted); font-size: 12px; }
.lore-fact.proposed span { font-style: italic; }
.look-settings .look-features { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.angler-bio { padding: 10px 12px; border: 1px solid #244761; border-radius: 9px; background: #091d2d; }
.angler-bio h3 { margin: 0 0 4px; font-size: 16px; }
.angler-bio h3 small { color: var(--muted); font-size: 12px; font-weight: 600; }
.angler-bio p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
.angler-known strong { color: #9cddff; }
.review-angler.speaking { border-color: #ffd16f; box-shadow: 0 0 0 3px #ffd16f80; }
.review-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; }
.review-meta dt { color: var(--muted); }
.review-meta dd { margin: 0; }
.review-lines { display: grid; gap: 6px; margin: 0; padding-left: 22px; }
.review-lines button { width: 100%; padding: 8px 10px; border: 1px solid #244761; border-radius: 8px; color: var(--text); background: #071a2b; font: inherit; text-align: left; cursor: pointer; }
.review-lines button[aria-pressed="true"] { border-color: #ff9d59; background: #3a2412; }
.review-lines button.speaking { outline: 3px solid #ffd16f; }
.review-rating { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 8px 12px; border: 1px solid #244761; border-radius: 8px; }
.review-note { display: grid; gap: 4px; }
.review-note textarea { padding: 8px; border: 1px solid #244761; border-radius: 8px; color: var(--text); background: #071a2b; font: inherit; }
.review-errors { color: #ffb3a0; }
.settings-head { margin: 4px 2px 20px; }
/* The Settings scene (web/vignette.js): this page's angler on a patch of ice beside the
   heading. Decoration only; the controls never depend on it. */
.scene-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; }
.scene-head > :not(.vignette) { grid-column: 1; }
.vignette { position: relative; grid-column: 2; grid-row: 1 / span 3; align-self: end; width: 214px; height: 140px; margin: 0; overflow: hidden; border-radius: 14px; background: linear-gradient(#173a55 0 52%, #d7eaf2 52% 100%); box-shadow: inset 0 0 0 1px #8fd3ff38; }
.vignette::before { content: ""; position: absolute; left: 50%; bottom: 13px; width: 150px; height: 13px; margin-left: -75px; border-radius: 50%; background: #9fc6d8; }
.vignette canvas { position: absolute; bottom: 0; height: 132px; transform: translateX(-50%); transform-origin: 50% 88%; }
.vignette canvas[data-seat="self"] { left: 32%; z-index: 1; }
.vignette canvas[data-seat="rival"] { left: 70%; }
.vignette.reacting[data-pose="oops"] canvas[data-seat="self"] { animation: vignette-wobble .5s ease-in-out 2; }
@keyframes vignette-wobble {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  30% { transform: translateX(-50%) rotate(-4deg); }
  70% { transform: translateX(-50%) rotate(4deg); }
}
.settings-head h1, .game-head h1 {
  margin: 8px 0;
  color: var(--text);
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.settings-head > p:last-child, .game-head > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.panel {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, #0e263eeb, #091b2fe8);
  box-shadow: 0 18px 50px #0002;
}
.settings-card h2 { margin: 0 0 12px; color: var(--text); font-size: 19px; }
.settings-card > p { margin: 10px 0 0; color: #b3cbd8; font-size: 15px; line-height: 1.5; }
.setting-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.setting-choice {
  display: flex;
  min-height: 67px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid #244761;
  border-radius: 9px;
  color: var(--muted);
  background: #091a2c;
  text-align: left;
  cursor: pointer;
}
.setting-choice strong { color: var(--text); font-size: 16px; }
.setting-choice span { font-size: 13px; }
.setting-choice.active { border-color: var(--cyan); background: #103047; }
.setting-choice.active strong { color: var(--cyan); }
.setting-note { color: var(--muted) !important; font-size: 13px !important; }
.seed-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 14px; }
.seed-row label { grid-column: 1 / -1; color: #b8ccd7; font-size: 13px; font-weight: 700; }
.seed-row input { min-width: 0; min-height: 44px; padding: 10px 11px; border: 1px solid #244761; border-radius: 8px; color: var(--text); background: #071a2b; font: inherit; }
.seed-row input:focus-visible { outline: 3px solid #ffd16f; outline-offset: 2px; }
.seed-row .button { min-height: 44px; padding: 9px 12px; }
.setup-field { display: block; margin: 13px 0 6px; color: #b8ccd7; font-size: 13px; font-weight: 700; }
.setup-field output { float: right; color: var(--cyan); }
.settings-card select { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #244761; border-radius: 8px; color: var(--text); background: #071a2b; font: inherit; }
.settings-card input[type="range"] { width: 100%; accent-color: var(--cyan); }
.settings-card select:focus-visible, .settings-card input:focus-visible { outline: 3px solid #ffd16f; outline-offset: 2px; }
.custom-settings { display: grid; gap: 2px; margin: 14px 0 0; padding: 5px 12px 12px; border: 1px solid #244761; border-radius: 9px; }
.custom-settings legend { padding: 0 5px; color: var(--cyan); font-size: 13px; font-weight: 800; }
.custom-settings[hidden] { display: none; }
.accessibility-card { display: grid; gap: 14px; }
.accessibility-card h2 { margin-bottom: 0; }
.toggle-field, .audio-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #d8e9f0;
  font-size: 14px;
}
.toggle-field span { display: grid; gap: 3px; }
.toggle-field small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.toggle-field input { flex: 0 0 auto; width: 22px; height: 22px; accent-color: var(--cyan); }
.audio-control { display: grid; gap: 6px; }
.audio-control span { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; }
.audio-control output { color: var(--cyan); font-variant-numeric: tabular-nums; }
.audio-control input { width: 100%; accent-color: var(--cyan); }
.mute-field { padding-top: 12px; border-top: 1px solid #244761; }
.settings-card ol { display: grid; gap: 7px; padding-left: 23px; margin: 0; color: #b8ccd7; font-size: 14px; line-height: 1.4; }
.settings-card li::marker { color: var(--cyan); font-weight: 800; }
.settings-actions { display: flex; justify-content: space-between; gap: 12px; padding: 16px 2px 0; }
.game-view { max-width: 1260px; min-height: calc(100vh - 132px); margin: 0 auto; padding: 18px 0 24px; }
.game-head { margin: 0 0 15px 2px; }
.fullscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.fullscreen-btn[hidden] { display: none; }
.fullscreen-btn:hover { color: var(--text); border-color: var(--cyan); }
.fullscreen-btn:focus-visible { outline: 3px solid #ffd16f; outline-offset: 2px; }
.fullscreen-btn .icon-compress { display: none; }
.fullscreen-btn .icon-expand { display: block; }
.fullscreen-btn[aria-pressed="true"] .icon-compress { display: block; }
.fullscreen-btn[aria-pressed="true"] .icon-expand { display: none; }

@media (max-width: 520px) {
  .fullscreen-btn span[data-fullscreen-label] { display: none; }
  .fullscreen-btn { padding: 6px 8px; min-width: 36px; min-height: 36px; justify-content: center; }
}

/* Fullscreen: fill the screen across devices and browsers, hide chrome. */
html[data-fullscreen="on"] body { overflow: hidden; }
html[data-fullscreen="on"] .topbar,
html[data-fullscreen="on"] .site-foot,
html[data-fullscreen="on"] .skip-link { display: none !important; }
html[data-fullscreen="on"] .shell { max-width: none !important; margin: 0 !important; padding: 0 !important; }
html[data-fullscreen="on"] #game {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 14px 16px;
  background: var(--bg);
  background: radial-gradient(ellipse at center, #123651, #081c31 68%, #061523);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
#game::backdrop { background: #071321; }
html[data-fullscreen="on"] .game-head { margin: 0 0 6px; }
html[data-fullscreen="on"] .game-layout { gap: 12px; }
html[data-fullscreen="on"] .game-host { border-color: transparent; background: transparent; padding: 0; }
html[data-fullscreen="on"] .game-host [data-board-window],
html[data-fullscreen="on"] .game-host [data-game-canvas] {
  width: min(100%, calc((100vh - 100px) * 41 / 31)) !important;
  width: min(100%, calc((100dvh - 100px) * 41 / 31)) !important;
  justify-self: center;
}
@media (orientation: portrait) and (max-width: 960px) {
  html[data-fullscreen="on"] body[data-mode="river"] .game-host [data-board-window],
  html[data-fullscreen="on"] body[data-mode="river"] .game-host [data-game-canvas] {
    aspect-ratio: 31 / 47;
    width: min(100%, calc((100vh - 120px) * 31 / 47)) !important;
    width: min(100%, calc((100dvh - 120px) * 31 / 47)) !important;
    justify-self: center;
  }
}
@media (max-width: 960px) {
  html[data-fullscreen="on"] .game-host [data-board-window],
  html[data-fullscreen="on"] .game-host [data-game-canvas] {
    width: 100% !important;
  }
  html[data-fullscreen="on"] #game {
    padding: 6px 8px 14px;
  }
}
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 294px; align-items: start; gap: 14px; }
.game-host {
  display: grid;
  gap: 9px;
  align-content: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid #24516c;
  border-radius: 14px;
  background: radial-gradient(ellipse at center, #123651, #081c31 68%, #061523);
  text-align: center;
}
/* SDL writes the canvas's inline size when it draws at the screen's pixel density; the
   layout here decides the size instead (VIS-1), and the game sizes its pixels to match. */
.game-host [data-game-canvas] {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 41 / 31;
  border: 1px solid #153c5b;
  border-radius: 10px;
  background: #05111d;
  touch-action: none;
  /* iOS Safari honours only the prefixed form; a held finger must not start a text
     selection, the loupe or a callout, which cancel the touch (doc/web.md). */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.game-host [data-game-canvas]:focus-visible { outline: 3px solid #ffd16f; outline-offset: 2px; }
.round-recap { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid #234860; border-radius: 9px; color: #c4d9e3; background: #0a2234; text-align: left; }
.round-recap.round-arrival { animation: round-arrival .55s ease-out; }
/* Angler chatter (doc/chatter.md): a decorative caption under the board, on the speaker's
   side; its row keeps its height so the recap below never jumps. */
.chatter { min-height: 2.8em; margin: 0; padding: 6px 12px; border-radius: 9px; color: #e8f4ff; font-size: 15px; line-height: 1.35; text-align: left; border: 2px solid transparent; }
.chatter[hidden] { display: none; }
.chatter b { margin-right: .4em; letter-spacing: .03em; }
.chatter.chatter-you { border-color: #31b0f5; background: #0d2a44; }
.chatter.chatter-you b { color: #9cddff; }
.chatter.chatter-rival { border-color: #ff9d59; background: #3a2412; text-align: right; }
.chatter.chatter-rival b { color: #ffd0ae; }
@keyframes round-arrival {
  0% { transform: translateY(7px); box-shadow: 0 0 0 #8bc6dd00; }
  65% { transform: translateY(0); box-shadow: 0 0 24px #8bc6dd80; }
  100% { box-shadow: 0 0 18px #8bc6dd20; }
}
.round-recap strong { color: #8bc6dd; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.round-recap p { margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.board-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 14px; padding: 3px 0 1px; color: #a8c3d0; font-size: 12px; }
.keyboard-help { margin: 0; color: #b9d0da; font-size: 12px; line-height: 1.4; }
.board-legend span { display: inline-flex; align-items: center; gap: 5px; }
.board-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.you-dot { background: #31b0f5; }
.greedy-dot { background: #ff9d59; }
.you-strike-mark { background: transparent; border: 2px solid #31b0f5; }
.greedy-strike-mark { background: transparent; border: 2px solid #ff9d59; }
.recent-mark { background: #8bc6dd; box-shadow: 0 0 5px #8bc6dd; }
.fish-dot { background: #ffedaf; }
.fish-value-mark { display: grid !important; place-items: center; width: 16px !important; height: 16px !important; border: 1px solid #ffedaf; border-radius: 4px !important; color: #071321; background: #ffedaf; font-size: 10px; font-style: normal; font-weight: 900; }
.shore-dot { background: #4ddddf; }
.flex-mark { width: 16px !important; height: 2px !important; border-radius: 0 !important; background: #f1f8ff; transform: rotate(-35deg); }
.puncture-mark { border: 2px solid #b5dcea; background: #2f536b; }
.water-mark { border: 2px solid #b5dcea; border-radius: 45% !important; background: #0a2b40; }
.legal-mark { width: 11px !important; height: 11px !important; border: 2px solid #63f5e7; border-radius: 3px !important; background: transparent; }
/* The board blends config/draw.toml thin_color into thick_color as ice thickens. */
.thickness-mark { width: 26px !important; border-radius: 3px !important; background: linear-gradient(90deg, rgb(113 155 171), rgb(151 190 198)); }
.crack-mark { height: 2px !important; border-radius: 0 !important; background: #b5dcea; transform: rotate(-30deg); }
.game-panel { display: grid; gap: 13px; padding: 18px; }
.game-panel > .eyebrow { margin: 0; }
.board-choice { display: grid; gap: 6px; color: #c7dce7; font-size: 13px; font-weight: 750; text-align: left; }
.board-choice select, [data-river-choice] { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #3a6680; border-radius: 8px; color: var(--text); background: #071a2b; font: inherit; }
.board-choice select:focus-visible, [data-river-choice]:focus-visible { outline: 3px solid #ffd16f; outline-offset: 2px; }
.board-choice small { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.4; }
.board-choice[hidden] { display: none; }
.game-profile { margin: -8px 0 0; color: var(--muted); font-size: 12px; }
.player-positions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; color: #e4f5fb; }
.position-card { display: grid; grid-template-columns: 29px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 9px; min-width: 0; padding: 10px 12px; border: 1px solid #234860; border-radius: 8px; background: #0a2234; font-size: 12px; font-weight: 800; text-align: left; }
.position-card i { grid-row: span 2; display: grid; place-items: center; width: 27px; height: 27px; border: 2px solid currentColor; border-radius: 50%; font-size: 16px; font-style: normal; font-weight: 950; line-height: 1; }
.position-you { color: #9cddff; border-left: 4px solid #31b0f5; }
.position-greedy { color: #fff0e4; border: 3px solid #ff9d59; background: linear-gradient(110deg, #603219, #0a2234 72%); box-shadow: 0 0 0 2px #ff9d5960, 0 0 22px #ff9d5960; }
.position-you i { color: #31b0f5; }
.position-greedy i { color: #ff9d59; }
.position-card [data-rival-name] { text-transform: none; }
.position-card strong { color: #fff; font-size: 20px; line-height: 1.1; letter-spacing: .02em; }
.score-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.score-row > div { display: grid; gap: 2px; padding: 11px; border: 1px solid #234860; border-radius: 9px; background: #071a2b; }
.score-row span { color: #a9c2cf; font-size: 12px; font-weight: 700; }
.score-row strong { color: var(--text); font-size: 24px; line-height: 1.05; }
.score-row small { color: #7f9ead; font-size: 11px; }
.energy-preview { margin: 0; padding: 10px 11px; border: 1px solid #234860; border-radius: 8px; color: #c4d9e3; background: #071a2b; font-size: 12px; line-height: 1.4; }
.cell-info { margin: 0; padding: 10px 11px; border: 1px solid #234860; border-radius: 8px; color: #d4e5ec; background: #0a2034; font-size: 12px; line-height: 1.45; }
.game-status { min-height: 68px; margin: 0; padding: 11px; border-left: 3px solid var(--cyan); border-radius: 4px; color: #c4d9e3; background: #081b2b; font-size: 13px; line-height: 1.45; }
.energy-control { display: grid; gap: 8px; color: #b1c8d4; font-size: 13px; }
.energy-control[hidden] { display: none; }
.energy-control strong { color: var(--cyan); }
.energy-control input { width: 100%; accent-color: var(--cyan); }
.strike-remaining { margin: -7px 0 0; color: #d0e9f3; font-size: 12px; font-weight: 700; }
.strike-remaining[hidden] { display: none; }
.game-actions { display: grid; gap: 8px; }
.game-actions .button { width: 100%; }
.replay-load { position: relative; display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.replay-load input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.replay-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; padding: 10px; border: 1px solid #40647b; border-radius: 8px; background: #091d2c; }
.replay-controls[hidden] { display: none; }
.replay-controls span { color: #d4e5ec; font-size: 12px; font-weight: 800; text-align: center; }
.replay-controls button { padding: 9px; font-size: 12px; }
.event-panel { min-height: 145px; border-top: 1px solid #234860; padding-top: 11px; }
.event-panel h2 { margin: 0 0 8px; color: var(--text); font-size: 14px; }
.event-panel ol { display: grid; gap: 8px; max-height: 210px; overflow: auto; margin: 0; padding-left: 20px; color: #9fb9c6; font-size: 12px; line-height: 1.45; }
.event-panel li::marker { color: var(--cyan); }
.back-link { color: var(--cyan); }
.footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 3px 0;
  color: #7391a2;
  font-size: 12px;
}
@media (max-width: 960px) {
  .game-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .shell { padding: 14px 11px; }
  .vignette { width: 150px; height: 104px; }
  .anglers-grid { grid-template-columns: 1fr; }
  .vignette canvas { height: 98px; }
  .vignette::before { bottom: 9px; width: 108px; height: 10px; margin-left: -54px; }
  .topbar { grid-template-columns: 1fr; gap: 11px; }
  .site-nav { justify-content: space-between; border-top: 1px solid #193a54; padding-top: 7px; }
  .landing-view { padding-top: 0; }
  .settings-grid { grid-template-columns: 1fr; }
  .game-view { min-height: calc(100vh - 150px); }
  .game-head { margin-bottom: 8px; }
  .game-head > p:last-child { font-size: 14px; line-height: 1.35; }
  .player-positions { gap: 6px; }
  .position-card {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    column-gap: 6px;
    padding: 7px 8px;
    font-size: 11px;
  }
  .position-card i { grid-row: auto; width: 24px; height: 24px; font-size: 14px; }
  .position-card strong { justify-self: end; font-size: 16px; }
  .game-host [data-board-window] { order: 2; }
  .player-positions { order: 0; }
  .round-recap { order: 1; }
  .cell-info { order: 3; }
  .board-legend { order: 4; }
  .keyboard-help { order: 5; }
  .game-panel { grid-template-columns: 1fr 1fr; }
  .game-panel > .eyebrow, .game-status, .energy-preview, .cell-info, .energy-control, .board-choice, .game-actions, .event-panel { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .brand { font-size: 13px; }
  .brand small { font-size: 11px; }
  .nav-link { padding: 8px 9px; }
  .landing-view { padding: 12px 0 20px; }
  .landing-card { padding: 31px 23px; border-radius: 15px; }
  .landing-actions { flex-direction: column; }
  .landing-actions > * { width: 100%; }
  .settings-actions { align-items: stretch; flex-direction: column; }
  .footer { flex-wrap: wrap; }
  .game-panel { padding: 13px; }
  .board-legend { gap: 6px 9px; font-size: 11px; }
}
/* Play surface: primary actions stay beside the board; reference stays optional. */
.game-view { max-width: 1180px; padding-top: 4px; }
.game-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.game-head h1 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.game-head .eyebrow { margin: 0; text-align: right; font-size: 11px; }
.game-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 12px; }
.game-host { padding: 10px; }
.game-host [data-board-window] { order: 1; width: min(100%, calc(132dvh - 324px)) !important; min-width: 260px; justify-self: center; }
.game-host .chatter { order: 1; }  /* Right after the board, which shares its order, and before the recap. */
.player-positions { order: 0; }
.position-card { grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 3px 8px; padding: 9px 11px; border-width: 1px; box-shadow: none; }
.position-card i { grid-row: 1 / 4; }
.position-card > span:not(.player-energy) { font-size: 11px; letter-spacing: .04em; }
.position-card small { font-size: 11px; font-weight: 500; letter-spacing: 0; }
.position-card > span small { float: right; color: #b6d3df; }
.position-card strong { justify-self: start; font-size: 22px; }
.position-card strong b { font-weight: 800; }
.position-card .player-energy { color: #b6d3df; font-size: 11px; font-weight: 400; }
.position-greedy { border-color: #ff9d59; background: linear-gradient(110deg, #3b281e, #0a2234); }
.round-recap { order: 2; padding: 9px 11px; border-width: 1px; box-shadow: none; }
.round-recap strong { font-size: 10px; }
.round-recap p { font-size: 12px; }
.game-panel { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
.game-panel > * { grid-column: 1 / -1; }
.game-status { min-height: 0; padding: 0 0 0 10px; background: transparent; line-height: 1.5; }
.board-choice small { display: none; }
.energy-preview { padding: 0; border: 0; background: transparent; line-height: 1.5; }
.game-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.game-actions .button { flex: 1 1 auto; }
.game-panel .game-actions { padding-top: 2px; }
.inspect-panel, .board-help, .match-tools { min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; background: #091d2d; }
summary { min-height: 44px; padding: 12px 0; color: #b6d3df; font-size: 12px; font-weight: 650; cursor: pointer; }
summary:focus-visible { outline: 3px solid #ffd16f; outline-offset: 2px; }
details[open] > summary { margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.inspect-panel .cell-info { padding: 0 0 12px; border: 0; background: transparent; }
.board-help, .match-tools { grid-column: 1 / -1; }
.board-help .board-legend { justify-content: flex-start; padding-bottom: 12px; }
.board-help .keyboard-help { padding-bottom: 12px; }
.match-tools .game-profile { margin: 0 0 12px; }
.match-tools .event-panel { margin: 12px 0; }
@media (max-width: 960px) {
  .game-layout { grid-template-columns: 1fr; gap: 8px; }
  .game-host [data-board-window] { width: 100% !important; min-width: 0; }
  .game-panel { grid-template-columns: 1fr; padding: 12px; gap: 10px; }
}
@media (max-width: 760px) {
  body[data-view="game"] .shell { padding-top: 10px; }
  body[data-view="game"] .topbar { grid-template-columns: auto 1fr; gap: 6px; margin-bottom: 14px; }
  body[data-view="game"] .brand { font-size: 10px; column-gap: 5px; }
  body[data-view="game"] .brand small { display: none; }
  body[data-view="game"] .brand-mark { font-size: 22px; }
  body[data-view="game"] .site-nav { border: 0; padding: 0; justify-content: flex-end; gap: 0; }
  body[data-view="game"] .nav-link { padding: 8px; font-size: 12px; }
  .game-head h1 { font-size: 18px; }
  .game-head .eyebrow { font-size: 10px; }
  .game-head { flex-wrap: wrap; row-gap: 2px; }
  .game-host { padding: 8px; gap: 8px; }
  .position-card { padding: 7px; column-gap: 6px; }
  .position-card strong { font-size: 20px; }
}
/* During a match the navigation stays on one scrollable row, including at 320px. */
@media (max-width: 760px) {
  body[data-view="game"] .topbar { grid-template-columns: 1fr; gap: 2px; margin-bottom: 6px; }
  body[data-view="game"] .brand { font-size: 13px; justify-self: start; }
  body[data-view="game"] .site-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; min-width: 0; }
  body[data-view="game"] .nav-link { flex: 0 0 auto; min-height: 44px; padding: 12px 9px; font-size: 12px; }
  .game-head { flex-wrap: nowrap; gap: 6px; margin-bottom: 6px; }
  .game-head .eyebrow { font-size: 11px; letter-spacing: 0; text-transform: none; }
  .game-host { padding: 6px; gap: 6px; }
  .position-card { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-rows: auto auto; padding: 5px 6px; gap: 2px 5px; }
  .position-card .player-portrait { grid-row: 1 / 3; width: 26px; height: 35px; }
  .position-card strong { grid-column: 3; grid-row: 1 / 3; justify-self: end; font-size: 18px; white-space: nowrap; }
  .position-card strong small { display: none; }
  .position-card > span small { display: none; }
  .position-card .player-energy { grid-column: 2; }
  .game-host .energy-preview { font-size: 12px; padding: 6px 8px; }
}
@media (prefers-contrast: more) {
  :root { --line: #d9f7ff; --text: #fff; --muted: #d5e9f2; --cyan: #73f7ff; }
  .panel, .game-host, .round-recap, .cell-info, .game-status,
  .energy-preview, .score-row > div, .setting-choice, .seed-row input,
  .settings-card select, .board-choice select, [data-river-choice] { border-color: #d9f7ff; }
  .board-legend, .keyboard-help, .footer, .event-panel ol { color: #fff; }
}
html[data-contrast="high"] {
  --line: #d9f7ff;
  --text: #fff;
  --muted: #d5e9f2;
  --cyan: #73f7ff;
}
html[data-contrast="high"] .panel,
html[data-contrast="high"] .game-host,
html[data-contrast="high"] .round-recap,
html[data-contrast="high"] .cell-info,
html[data-contrast="high"] .game-status,
html[data-contrast="high"] .energy-preview,
html[data-contrast="high"] .score-row > div,
html[data-contrast="high"] .setting-choice,
html[data-contrast="high"] .seed-row input,
html[data-contrast="high"] .settings-card select,
html[data-contrast="high"] .board-choice select,
html[data-contrast="high"] [data-river-choice] { border-color: #d9f7ff; }
html[data-contrast="high"] .board-legend,
html[data-contrast="high"] .keyboard-help,
html[data-contrast="high"] .footer,
html[data-contrast="high"] .event-panel ol { color: #fff; }
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Result card (steering, Result): the match's closing scene and its next actions. */
.result-card { display: grid; gap: 10px; padding: 16px 18px; border: 2px solid #8bc6dd; border-radius: 12px; background: linear-gradient(160deg, #1d3348, #102235); box-shadow: 0 0 22px #8bc6dd24; }
.result-card[hidden] { display: none; }
.board-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.board-table caption { text-align: left; padding: 6px 0; color: var(--muted); }
.board-table th, .board-table td { padding: 3px 8px; border-bottom: 1px solid #234860; text-align: left; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.online-status { display: grid; gap: 8px; padding: 16px 18px; border: 2px solid #8fd3ff; border-radius: 12px; background: linear-gradient(160deg, #15324a, #0e2234); }
.online-status[hidden] { display: none; }
.online-status h2 { margin: 0; font-size: 22px; color: #e6f5ff; }
.online-status p { margin: 0; line-height: 1.5; }
.online-code { font-family: ui-monospace, monospace; letter-spacing: .12em; color: var(--cyan); }
.online-digest { font-size: 13px; overflow-wrap: anywhere; color: #b3cbd8; }
.online-card { margin-top: 18px; display: grid; gap: 10px; }
.online-card h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); color: var(--text); }
.online-card .landing-actions { margin-top: 4px; }
.online-card .landing-note { margin-top: 4px; }
.online-card .landing-note:empty { display: none; }
.online-input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #2e5f7c; border-radius: 10px; background: #071729; color: var(--text); font: inherit; }
.online-join { display: flex; gap: 10px; }
.online-greeting { margin: 0; color: var(--cyan); font-weight: 700; }
.online-greeting[hidden] { display: none; }
.online-host summary { cursor: pointer; color: #87a7b8; font-size: 14px; }
.online-host[open] summary { margin-bottom: 8px; }
.online-wait { margin: 0; font-size: 22px; color: #e6f5ff; }
.online-wait[hidden], .online-status h2[hidden] { display: none; }
.online-wait span { font-family: ui-monospace, monospace; color: var(--cyan); }
.online-join .online-input { flex: 1; text-transform: uppercase; font-family: ui-monospace, monospace; letter-spacing: .1em; }
.lesson-card { display: grid; gap: 10px; padding: 16px 18px; border: 2px solid #63f5e7; border-radius: 12px; background: linear-gradient(160deg, #173a4d, #0f2535); }
.lesson-card[hidden] { display: none; }
.lesson-card h2 { margin: 0; font-size: 22px; color: #e6fbff; }
.lesson-card p { margin: 0; line-height: 1.5; }
.result-card h2 { margin: 0; font-size: 26px; color: #fff4cf; }
.result-card h2:focus { outline: none; }
.result-card h2:focus-visible { outline: none; text-decoration: underline; text-decoration-color: var(--focus);
  text-decoration-thickness: 3px; text-underline-offset: .2em; }
.result-reason { margin: 0; color: #d5e6ef; line-height: 1.45; }
.result-aftermath { margin: 0; color: #b9cfdb; font-style: italic; }
.result-score { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; color: #b9cfdb; }
.result-score strong { color: #ffffff; font-size: 18px; }
.result-moments { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: #d5e6ef; font-size: 14px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.result-more { border-top: 1px solid var(--line); }
.result-more[open] > summary, .result-fair-details[open] > summary { margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.result-more .result-actions { padding: 0 0 8px; }
.result-fair-details { border-top: 1px solid var(--line); }
.result-fair-details .online-digest { margin: 0; }
/* The privacy notice and terms (web/privacy.html, web/terms.html). */
.legal { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 4px 0 34px; }
.legal-card { min-width: 0; width: 100%; color: #cfe3ee; font-size: 16px; line-height: 1.6; }
.legal-card h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -.03em; }
.legal-card h2 { margin: 32px 0 8px; color: var(--text); font-size: 20px; }
.legal-card p, .legal-card li { max-width: 72ch; }
.legal-card li + li { margin-top: 6px; }
.legal-card a, .site-foot a, .your-data a { color: var(--cyan); }
.legal-meta { margin: 0; color: var(--muted); font-size: 14px; }
.legal-warning, .legal-callout { padding: 14px 16px; border: 1px solid; border-radius: 12px; }
.legal-warning { border-color: #ffd16f88; background: #3a2c0a88; color: #ffe3a3; }
.legal-warning[hidden] { display: none; }
.legal-callout { border-color: #5ee7f766; background: #0b2a3f; color: var(--text); }
.legal-table { overflow-x: auto; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-table th, .legal-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.legal-table th { color: var(--text); }
/* The account and admin pages (web/account.js). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.account-card { width: min(980px, 100%); }
.account-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; margin-top: 18px; }
.account-panels[hidden] { display: none; }
.account-form {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
  border: 1px solid #24516c;
  border-radius: 14px;
  background: #0b1d31aa;
}
.account-form h2 { margin: 0 0 4px; color: var(--text); font-size: 19px; }
.account-form summary { color: var(--text); font-weight: 700; cursor: pointer; }
.account-form form { display: grid; gap: 8px; margin-top: 10px; }
.account-form .landing-actions { margin-top: 8px; }
.account-hint { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.account-hint a, .account-card a:not(.button) { color: var(--cyan); }
.account-birth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; }
.account-birth legend { margin-bottom: 6px; }
.account-inline { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 10px; }
.account-inline .online-input { width: 9ch; }
.account-secret code { font-size: 17px; letter-spacing: .08em; color: var(--text); }
.account-codes { columns: 2; margin: 10px 0 0; font-family: ui-monospace, monospace; color: var(--text); }
.account-status.is-error { color: #ffb4a8; }
.admin-output { margin-top: 18px; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.admin-json, .admin-audit { color: #cfe3ee; font-size: 13px; line-height: 1.5; }
.admin-json { white-space: pre-wrap; }
.business-evidence-items { display: grid; gap: 10px; margin: 0; padding-left: 24px; color: #cfe3ee; }
.business-evidence-items li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #071a2b; }
.business-evidence-items time { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.business-evidence-items p { margin: 7px 0 0; overflow-wrap: anywhere; }
.business-tracker { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #071a2b; }
.business-tracker > details { padding-top: 8px; border-top: 1px solid var(--line); }
.business-tracker-source { max-height: 55vh; overflow: auto; margin: 8px 0; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #06131d; color: #cfe3ee; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.business-gate-list { display: grid; gap: 7px; margin: 8px 0 16px; padding: 0; list-style: none; }
.business-gate-item { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #06131d; }
.business-gate-item details { min-width: 0; }
.business-gate-item summary { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 9px 11px; cursor: pointer; overflow-wrap: anywhere; }
.business-gate-label { color: var(--muted); }
.business-gate-item details > p { margin: 8px 11px; overflow-wrap: anywhere; }
.business-gate-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 11px 10px; }
.business-gate-actions button { margin: 0; }
/* Every round of the match, kept whole (UX-4); the event log beside it stays short. */
.round-history { display: grid; gap: 8px; max-height: 320px; overflow: auto; margin: 0; padding-left: 22px; color: #cfe3ee; font-size: 13px; line-height: 1.45; }
.round-history li::marker { color: var(--cyan); font-weight: 700; }

/* The lake is the primary control surface. Feedback stays above a holding finger. */
.game-head .eyebrow, .brand, .landing-view h1 { text-transform: none; }
.game-host .lesson-card { order: -2; text-align: left; padding: 10px 12px; }
.game-host .lesson-card h2 { margin: 3px 0; font-size: 16px; }
.game-host .lesson-card p { margin: 4px 0; font-size: 13px; }
.game-host .game-status { order: 0; text-align: left; font-size: 12px; }
.game-host .energy-preview { order: 0; height: 6em; overflow: auto; padding: 7px 10px; border: 1px solid var(--line); background: #071a2b; text-align: left; font-variant-numeric: tabular-nums; }
.game-host .energy-preview { white-space: pre-line; }
.game-host .game-status { min-height: 3em; }
.game-host .danger-preview { color: #ffb59a; border-color: #ff8e71; }
.game-host .player-portrait { display: block; width: 28px !important; height: 40px !important; min-width: 0; grid-row: 1 / 4; border: 0; background: transparent; border-radius: 0; aspect-ratio: auto; }
.round-recap { color: #c4d9e3; border-color: #234860; background: #0a2234; }
.round-recap strong { color: #b6d3df; text-transform: none; letter-spacing: 0; }
.keyboard-controls { border: 1px solid var(--line); border-radius: 9px; padding: 0 12px 10px; }
.keyboard-controls:not([open]) { padding-bottom: 0; }
.keyboard-controls p, .keyboard-controls small { font-size: 12px; color: #b6d3df; }
.keyboard-controls .board-choice small { display: block; }
.keyboard-controls .energy-control { margin-top: 12px; }
@media (max-width: 760px) {
  .game-host .player-portrait { width: 26px !important; height: 35px !important; grid-row: 1 / 3; }
}

/* The same live feedback moves beside the lake on desktop (view.js). */
.play-feedback { display: grid; align-content: start; gap: 9px; min-width: 0; }
.play-feedback .game-status { min-height: 3em; margin: 0; font-size: 13px; line-height: 1.5; }
.play-feedback .energy-preview { min-height: 6em; margin: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #071a2b; white-space: pre-line; font-variant-numeric: tabular-nums; }
.play-feedback .lesson-card { padding: 12px; text-align: left; }
.play-feedback .lesson-card h2 { font-size: 18px; }
.play-feedback .lesson-card p { font-size: 13px; }
.online-input { min-width: 0; }
.account-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-panels > details { grid-column: 1 / -1; }
.button:disabled { opacity: .55; cursor: wait; }
@media (min-width: 1100px) {
  .landing-view { max-width: 1280px; margin: 0 auto; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 20px; align-items: start; }
  .hero { grid-column: 1; grid-row: 1; width: 100%; }
  .hero-card { grid-column: 1; grid-row: 2; width: 100%; margin-top: 0; padding: 30px 34px; }
  .hero-card h1 { font-size: clamp(42px, 4vw, 58px); margin-top: 0; }
  .hero-card .landing-copy { font-size: 17px; max-width: 60ch; }
  .hero-card .landing-actions { margin-top: 22px; }
  .hero-card .landing-note:empty { display: none; }
  .online-card { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin-top: 0; padding: 32px; }
  .online-card .landing-copy { font-size: 16px; }
  .online-card .landing-actions { gap: 8px; }
  .online-card .landing-actions .button { flex: 1 1 auto; }
  .lore { grid-column: 1 / -1; width: 100%; padding: 32px; }
  .lakes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .play-feedback { order: 0; }
  .play-feedback .energy-preview { height: 6em; overflow: auto; }
}
@media (max-width: 760px) {
  .account-panels { grid-template-columns: minmax(0, 1fr); }
  .account-card { padding: 24px 18px; }
  .account-form { padding: 14px; }
}
body[data-mode="river"] [data-lake-panel],
body[data-mode="river"] .player-positions,
body[data-mode="river"] [data-play-feedback],
body[data-mode="river"] .chatter,
body[data-mode="river"] .round-recap,
body[data-mode="river"] .board-help,
body[data-mode="river"] .board-table,
body[data-mode="river"] .match-tools,
body:not([data-mode="river"]) [data-river-feedback] { display: none !important; }
[data-river-panel] select { width: 100%; min-width: 0; }
[data-river-panel] table { width: 100%; table-layout: fixed; overflow-wrap: anywhere; }
/* The river keeps only the tally, what just happened and the strike preview in view;
   the rules, legend, table and journey tools fold away as on the lake. */
[data-river-feedback] { display: grid; gap: 6px; min-width: 0; }
[data-river-feedback] h2 { margin: 0; font-size: 17px; }
[data-river-feedback] p { margin: 0; font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.river-tally { display: flex; flex-wrap: wrap; gap: 2px 14px; color: #c7dadb; }
.river-energy-meter { height: 18px; overflow: hidden; border: 2px solid #a7c0c9; border-radius: 999px; background: #061820; box-shadow: inset 0 1px 3px #0009; }
.river-energy-meter > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4eaf83, #80d5a0); transition: width 220ms ease-out; }
.river-energy-meter[data-level="mid"] > span { background: linear-gradient(90deg, #c89435, #f2d071); }
.river-energy-meter[data-level="low"] > span { background: linear-gradient(90deg, #bd554e, #ef8a69); }
.river-ending:empty { display: none; }
.river-legend > p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.river-tools .result-actions { padding-bottom: 12px; }
.river-legend, .river-table, .river-tools { padding: 0 14px; border: 1px solid #34515c; border-radius: 9px; background: #0e222c; }
@media (max-width: 960px) {
  /* Right under the board, so text that changes while aiming never moves the board, and
     two reserved lines each keep the controls below from jumping. */
  .game-host [data-river-feedback] { order: 3; padding: 2px 6px 4px; text-align: center; }
  .game-host .river-tally { justify-content: center; }
  [data-river-status], [data-river-preview] { height: 3em; overflow: auto; }
  /* The status already says what to choose; the heading stays for screen readers. */
  .game-host [data-river-feedback] h2 { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; }
}
/* On a portrait screen the river stands upright and takes the screen: app::browser::resize
   reads this shape and turns the board a sixth of a turn (TallWidth by TallHeight). */
@media (orientation: portrait) and (max-width: 960px) {
  body[data-mode="river"] .game-host [data-board-window] {
    aspect-ratio: 31 / 47;
    width: min(100%, calc((100vh - 150px) * 31 / 47)) !important;
    width: min(100%, calc((100dvh - 150px) * 31 / 47)) !important;
    justify-self: center;
  }
}

/* The viewport owns layout; transforms never change the canvas logical coordinates. */
.board-window { position: relative; width: 100%; aspect-ratio: 41 / 31; overflow: hidden; border-radius: 10px; touch-action: none; }
body[data-mode="river"] .board-window { aspect-ratio: 2 / 1; }
.game-host .board-window [data-game-canvas] { position: absolute; inset: 0; width: calc(100% * var(--board-zoom, 1)) !important; height: calc(100% * var(--board-zoom, 1)) !important; min-width: 0; aspect-ratio: auto; transform-origin: 0 0; }
.board-window[data-panning="true"], .board-window[data-panning="true"] canvas { cursor: grab; }
.board-window[data-panning="true"]:active { cursor: grabbing; }
.board-window:focus-visible { outline: 3px solid #ffd16f; outline-offset: 2px; }
.board-camera { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; order: 2; }
.board-camera[hidden] { display: none; }
.board-camera button { min-width: 44px; min-height: 44px; }
.board-camera output { min-width: 4em; font-variant-numeric: tabular-nums; }
.board-camera small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.board-camera [aria-pressed="true"] { background: #23566b; border-color: #91deec; }

html[data-fullscreen="on"] body[data-mode="river"] .game-host [data-board-window] {
  aspect-ratio: 2 / 1;
  width: min(100%, calc((100vh - 100px) * 2)) !important;
  width: min(100%, calc((100dvh - 100px) * 2)) !important;
}
@media (orientation: portrait) and (max-width: 960px) {
  html[data-fullscreen="on"] body[data-mode="river"] .game-host [data-board-window] {
    aspect-ratio: 31 / 47;
    width: min(100%, calc((100vh - 120px) * 31 / 47)) !important;
    width: min(100%, calc((100dvh - 120px) * 31 / 47)) !important;
  }
}