:root {
  --bg: #0f1512;
  --panel: #18211c;
  --panel-2: #202b25;
  --line: #34443b;
  --text: #eef3ee;
  --muted: #a3b3a8;
  --accent: #f2c14e;
  --accent-dark: #2b2005;
  --chalk: #5aa9ff;
  --good: #7fe0a0;
  --bad: #ff8f80;
  --radius: 12px;
  --hud-h: 50px;
  --header-h: 48px;
  /* The screen's safe areas (docs/PLATFORMS.md, "Layout"): under a notch, a
     cut-out or the home indicator. Everything the player reads or touches
     stays inside them; the tests set these to try insets a browser here has none of. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* The smallest text: 14 px on a desktop, 15 on a tablet, 13 on a phone. */
  --t-min: 14px;
  color-scheme: dark;
}

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

/* A phone: a touch screen under 600 px one way or the other. */
@media (pointer: coarse) and (max-width: 599px), (pointer: coarse) and (max-height: 599px) {
  :root {
    --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: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

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

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

/* ---------- Game layout ---------- */

/* No scrolling, zooming, selection or long-press menu mid-play
   (docs/PLATFORMS.md): the table, its controls and the HUD take no touch
   gestures (touch-action), menus scroll (.overlay), and main.js prevents
   Safari's pinch gesture and the context menu. */
.game-root {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: none;
  background: #0a0e0c;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Full screen (the site's button): the game fills the screen edge to edge,
   with its HUD and table inside the safe areas. The sides take the larger
   inset both ways (a phone held sideways has its camera on one side), so the
   HUD's middle is the screen's, where the site puts "Leave full screen". */
.game-root:fullscreen {
  --safe-x: max(var(--safe-l), var(--safe-r));
  border: 0;
  border-radius: 0;
  padding: var(--safe-t) var(--safe-x) var(--safe-b);
}

.game-root:-webkit-full-screen {
  --safe-x: max(var(--safe-l), var(--safe-r));
  border: 0;
  border-radius: 0;
  padding: var(--safe-t) var(--safe-x) var(--safe-b);
}

/* The room the game has, for the layout to follow (main.js): the root's
   width on the page, and its whole box in full screen. */
.sizer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

.game-root:fullscreen .sizer {
  height: auto;
  bottom: 0;
}

.game-root:-webkit-full-screen .sizer {
  height: auto;
  bottom: 0;
}

/* Reads the dynamic viewport height and the safe areas for the layout (main.js). */
.probe {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 100vh;
  height: 100dvh;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  box-sizing: content-box;
  visibility: hidden;
  pointer-events: none;
}

.stage {
  position: relative;
  width: 100%;
  height: 420px;
  background: radial-gradient(ellipse at 50% 40%, #1b2520 0%, #0a0e0c 70%);
}

.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

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

.hud {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  min-height: var(--hud-h);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  touch-action: none;
}

.hud-match {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.pcard {
  justify-self: start;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px 8px;
  border-radius: 9px;
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}

.pcard.right {
  justify-self: end;
  align-items: flex-end;
}

.pcard.active {
  border-color: rgba(242, 193, 78, 0.75);
  background: rgba(242, 193, 78, 0.1);
  box-shadow: 0 0 12px rgba(242, 193, 78, 0.18);
}

.pc-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.pc-name {
  font-weight: 700;
  font-size: max(14px, var(--t-min));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pc-score {
  font-weight: 900;
  font-size: 19px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.pc-balls {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  min-height: 16px;
  align-items: center;
}

/* On a narrow phone a group's seven balls take two rows. */
.pcard.right .pc-balls {
  justify-content: flex-end;
}

.pc-balls .bi {
  width: 16px;
  height: 16px;
  display: block;
}

.pc-balls .open {
  font-size: var(--t-min);
  color: var(--muted);
  white-space: nowrap;
}

.hud-mid {
  font-size: var(--t-min);
  color: var(--muted);
  white-space: nowrap;
  text-align: center;
}

/* Run Out: the score and multiplier on the left of the middle, the lives and
   rack on the right, so full screen can keep the middle clear. */
.hud-run {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-width: 0;
}

.run-side {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.run-side:first-child {
  justify-self: end;
}

.run-side:last-child {
  justify-self: start;
}

.run-gap {
  width: 18px;
}

.run-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  font-weight: 900;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.run-score .lbl,
.hud-run .lbl {
  font-size: var(--t-min);
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.run-mult {
  font-weight: 900;
  font-size: 18px;
  color: var(--chalk);
  min-width: 34px;
  text-align: center;
}

.run-mult.hot {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(242, 193, 78, 0.6);
}

.run-lives {
  display: flex;
  gap: 5px;
}

.run-lives .life {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: #2a3530;
  border: 1px solid var(--line);
}

.run-lives .life.on {
  background: linear-gradient(180deg, #7cc0ff, #3d86d6);
  border-color: #9fd0ff;
}

.run-rack {
  font-size: var(--t-min);
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- Buttons ---------- */

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

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

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

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

.btn:focus-visible,
.rival:focus-visible,
.level:focus-visible,
.seg button:focus-visible,
.toggle:focus-visible,
.swatch-btn:focus-visible,
.cue-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn.primary {
  background: linear-gradient(180deg, #ffd67a, #e9a92c);
  color: var(--accent-dark);
  border-color: #b8841c;
}

.btn.primary:hover:not(:disabled) {
  border-color: #fff3d0;
}

.btn.primary small {
  color: #5a4210 !important;
}

.btn-icon {
  width: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

#btn-sound .i-off,
#btn-sound.off .i-on {
  display: none;
}

#btn-sound.off .i-off {
  display: block;
}

/* ---------- Table controls ---------- */

.banner {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -4px);
  z-index: 3;
  width: max-content;
  max-width: min(86%, 560px);
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(8, 12, 10, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: var(--t-min);
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
}

.banner.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.banner.show.under {
  opacity: 0.3;
}

.banner.foul {
  color: #ffc2b8;
  border-color: rgba(255, 110, 90, 0.5);
}

.banner.good {
  color: #c4f7d4;
  border-color: rgba(127, 224, 160, 0.45);
}

.banner.near {
  color: #ffe2a0;
  border-color: rgba(242, 193, 78, 0.5);
}

.banner.quote {
  font-style: italic;
  font-weight: 500;
}

.ctl {
  position: absolute;
  z-index: 2;
  touch-action: none;
}

.power {
  cursor: ns-resize;
}

.power-track {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #1c2621, #0f1512);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.power-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  background: linear-gradient(180deg, #3ddc84 0%, #f2c14e 55%, #ff5a4f 100%);
  background-size: 100% var(--bar-h, 300px);
  opacity: 0.9;
}

.power.pulling .power-track {
  border-color: var(--accent);
}

.power-mark {
  position: absolute;
  left: 3px;
  right: 3px;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.55);
}

.ctl-label {
  position: absolute;
  left: 50%;
  bottom: 10px;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  white-space: nowrap;
  font-size: var(--t-min);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.spin {
  padding: 4px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  cursor: pointer;
}

.spin.set {
  border-color: var(--accent);
}

.spin-ball {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff 0%, #efeadb 40%, #b9b29c 100%);
}

.spin-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24%;
  height: 24%;
  border-radius: 50%;
  background: #d8342c;
  transform: translate(-50%, -50%);
}

.fine {
  cursor: ns-resize;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(180deg, #2b3a32 0 2px, #141c18 2px 9px);
  box-shadow: inset 0 6px 10px rgba(0, 0, 0, 0.55), inset 0 -6px 10px rgba(0, 0, 0, 0.55);
}

.spin-panel {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, calc(100% - 20px));
  padding: 10px 14px 12px;
  border-radius: 14px;
  background: rgba(24, 33, 28, 0.97);
  border: 1px solid var(--line);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55);
  text-align: center;
  touch-action: none;
}

.spin-title {
  margin: 0 0 4px;
  font-size: var(--t-min);
  color: var(--muted);
}

.spin-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  padding: calc(var(--t-min) + 6px) calc(var(--t-min) * 4);
}

.spin-big {
  position: relative;
  width: min(170px, 42vmin);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff 0%, #efeadb 40%, #b9b29c 100%);
  touch-action: none;
  cursor: crosshair;
}

.spin-zone {
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 0, 0, 0.35);
}

.spin-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15%;
  height: 15%;
  border-radius: 50%;
  background: #d8342c;
  box-shadow: 0 0 0 3px rgba(216, 52, 44, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sl {
  position: absolute;
  font-size: var(--t-min);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sl.top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.sl.bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.sl.left {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.sl.right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.spin-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ---------- Overlays and menus ---------- */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  background: rgba(5, 9, 7, 0.62);
  padding: 10px;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: manipulation;
}

.overlay.show {
  display: flex;
}

.menu {
  margin: auto;
  width: min(520px, 100%);
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(24, 33, 28, 0.97);
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.menu.wide {
  width: min(880px, 100%);
}

.menu.small-menu {
  width: min(430px, 100%);
}

.menu h2 {
  margin: 4px 0 8px;
  font-size: 23px;
}

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

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

.menu h3 {
  margin: 14px 0 6px;
  font-size: 16px;
}

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

.logo {
  font-size: clamp(36px, 7vw, 60px) !important;
  font-weight: 900;
  letter-spacing: 1px;
  margin: 2px 0 0 !important;
  color: #f3efe2;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}

.logo span {
  color: var(--chalk);
}

.sub {
  margin-top: 0 !important;
}

.menu-buttons {
  display: grid;
  gap: 8px;
  margin: 12px auto 4px;
  max-width: 400px;
}

.menu-buttons .btn,
.title-menu > .btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-size: 16px;
  text-align: left;
}

.title-menu > .btn {
  width: 100%;
  max-width: 400px;
  margin: 10px auto 0;
}

.menu-buttons .btn small,
.title-menu > .btn small {
  color: var(--muted);
  font-weight: 500;
  font-size: var(--t-min);
  text-align: right;
}

.menu-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.menu-row.sticky {
  position: sticky;
  bottom: -16px;
  margin: 12px -18px -16px;
  padding: 10px 18px 12px;
  background: rgba(24, 33, 28, 0.98);
  border-top: 1px solid var(--line);
  border-radius: 0 0 14px 14px;
}

.rating-line {
  font-size: var(--t-min);
  margin-top: 10px !important;
}

.kicker {
  margin: 0 !important;
  font-size: var(--t-min);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent) !important;
}

.note {
  font-size: var(--t-min);
}

.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-dark);
  font-size: var(--t-min);
  font-weight: 800;
  vertical-align: middle;
}

p.tag.big {
  font-size: max(14px, var(--t-min));
  margin: 6px auto;
  color: var(--accent-dark);
}

.scoreline {
  color: var(--text) !important;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rating-change {
  color: var(--text) !important;
  font-weight: 700;
}

.news {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  color: var(--accent);
  font-weight: 600;
}

.ach {
  font-size: var(--t-min);
}

/* Circuit */

.halls {
  display: grid;
  gap: 10px;
  text-align: left;
  margin-top: 10px;
}

.hall {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.hall.locked {
  opacity: 0.65;
}

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

.hall-head h3 {
  margin: 0;
  font-size: 17px;
}

.hall-head .swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--cloth);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex: none;
}

.hall-meta {
  margin-left: auto;
  font-size: var(--t-min);
  color: var(--muted);
  white-space: nowrap;
}

.blurb {
  font-size: var(--t-min);
  margin: 4px 0 8px !important;
}

.rivals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.rival {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #17201b;
  text-align: left;
  cursor: pointer;
  min-height: 52px;
}

.rival:hover:not(:disabled) {
  border-color: var(--accent);
}

.rival:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rival.beaten {
  border-color: rgba(242, 193, 78, 0.4);
}

.rv-name {
  font-weight: 700;
  font-size: max(14px, var(--t-min));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.boss {
  margin-right: 6px;
  font-size: var(--t-min);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.rv-meta {
  grid-column: 1;
  font-size: var(--t-min);
  color: var(--muted);
}

.rival .stars {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.stars .star,
.goals .star {
  color: #56615b;
  font-size: 15px;
}

.stars .star.on,
.goals .star.on {
  color: var(--accent);
}

.rival-card blockquote {
  margin: 8px 0 10px;
  font-style: italic;
  font-size: 17px;
  color: var(--text);
}

.goals {
  list-style: none;
  padding: 0;
  margin: 10px auto;
  max-width: 320px;
  text-align: left;
}

.goals li {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
  color: var(--muted);
}

.goals li.done,
.goals li.kept {
  color: var(--text);
}

.goals li.done {
  font-weight: 700;
}

/* Quick match and forms */

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

.level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  cursor: pointer;
}

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

.level.on {
  border-color: var(--accent);
  background: rgba(242, 193, 78, 0.12);
}

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

.field-label {
  font-size: var(--t-min);
  color: var(--muted);
  min-width: 64px;
}

.field input {
  min-height: 44px;
  width: min(220px, 60vw);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0f1512;
  color: var(--text);
  font-size: 16px;
  /* The names stay editable as text: selection and the paste menu. */
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

.field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

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

.seg button {
  padding: 7px 14px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: var(--panel-2);
  cursor: pointer;
  font-weight: 600;
}

.seg button + button {
  border-left: 1px solid var(--line);
}

.seg button.on {
  background: var(--accent);
  color: var(--accent-dark);
}

/* Settings */

.toggles {
  max-width: 320px;
  margin: 6px auto;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}

/* A switch: a 48 x 28 track in a button tall enough for a thumb. */
.toggle {
  position: relative;
  width: 52px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: none;
  cursor: pointer;
  padding: 0;
}

.toggle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 28px;
  margin: -14px 0 0 -24px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #2e3a34;
  box-sizing: border-box;
}

.toggle .knob {
  position: absolute;
  top: 50%;
  left: calc(50% - 21px);
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: #dfe6e1;
  transition: left 0.15s;
}

.toggle.on::before {
  background: var(--accent);
}

.toggle.on .knob {
  left: calc(50% + 1px);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.swatch-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
}

.swatch-btn .sw {
  width: 46px;
  height: 28px;
  border-radius: 6px;
  background: var(--cloth);
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.swatch-btn small,
.cue-btn small {
  font-size: var(--t-min);
  color: var(--muted);
}

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

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

.cues {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  width: 100%;
}

.cue-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  cursor: pointer;
}

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

.cue-art {
  display: block;
  height: 9px;
  border-radius: 2px 5px 5px 2px;
  background: linear-gradient(90deg, #4f86c6 0 2%, #f7f4ec 2% 5%, #ecd5a3 5% 48%, var(--accent) 48% 50%, var(--butt) 50% 70%, var(--wrap) 70% 88%, var(--butt) 88%);
}

/* Stats and help */

.stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  max-width: 440px;
  margin: 8px auto;
  text-align: left;
}

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

.stats dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.trophies {
  list-style: none;
  padding: 0;
  margin: 6px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 6px;
  text-align: left;
}

.trophies li {
  display: flex;
  flex-direction: column;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid var(--line);
  opacity: 0.55;
}

.trophies li.got {
  opacity: 1;
  border-color: rgba(242, 193, 78, 0.5);
}

.trophies strong {
  font-size: var(--t-min);
}

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

.help {
  text-align: left;
}

.help h2 {
  text-align: center;
}

.help ul {
  padding-left: 20px;
  margin: 4px 0;
  color: var(--muted);
  line-height: 1.45;
}

.help li {
  margin: 4px 0;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  background: var(--panel-2);
  color: var(--text);
  font: 600 var(--t-min) / 1.5 system-ui, sans-serif;
  text-align: center;
}

/* ---------- Ads & page ---------- */

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

.ad-slot[data-filled='true'] {
  min-height: 90px;
}

/* Room for the house ad before it fills, so buttons above it don't jump. */
.ad-results {
  min-height: 94px;
}

.about {
  max-width: 820px;
  margin: 24px auto 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 15px;
}

.about h1,
.about h2 {
  color: var(--text);
}

.about li {
  margin: 4px 0;
}

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
  .page {
    padding: 0 var(--safe-r) 32px var(--safe-l);
  }
  .game-root {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .about {
    padding: 0 14px;
  }
  .hud {
    gap: 4px;
    padding: 3px 4px;
  }
  .pcard {
    padding: 2px 5px;
  }
  .pc-name {
    font-size: var(--t-min);
  }
  .pc-score {
    font-size: 17px;
  }
  .pc-balls {
    /* Reserve both icon rows before groups are assigned, avoiding a HUD
       jump that can push a height-fitted phone table past the viewport. */
    min-height: 27px;
    gap: 1px;
  }
  .pc-balls .bi {
    width: 13px;
    height: 13px;
  }
  .run-side {
    gap: 12px;
  }
  .run-gap {
    width: 12px;
  }
  .banner {
    padding: 4px 10px;
  }
  .menu {
    padding: 14px 12px;
  }
  .menu-row.sticky {
    margin: 12px -12px -14px;
    bottom: -14px;
    padding: 10px 12px 12px;
  }
}

@media (max-width: 380px) {
  .hud-mid {
    display: none;
  }
  .pc-balls .bi {
    width: 11px;
    height: 11px;
  }
}

/* ---------- Touch screens (docs/PLATFORMS.md, "Controls for each format") ----------
   Every control at least 44 x 44 CSS px with 8 px between them, and the HUD's
   buttons 16 px in from the screen's edges. Any touch screen counts, so a
   touch laptop has them from the start. */
@media (any-pointer: coarse) {
  .hud {
    gap: 8px;
    padding: 3px 16px;
  }
  .btn {
    min-height: 44px;
  }
  .btn-icon {
    width: 44px;
    height: 44px;
  }
  .toggle {
    width: 56px;
    height: 44px;
  }
  .seg {
    gap: 8px;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .seg button {
    min-height: 44px;
    min-width: 48px;
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  .seg button + button {
    border-left: 1px solid var(--line);
  }
  .field input {
    min-height: 44px;
  }
}

/* Phones held sideways: hide the site header while the table is in play, and
   show it again on the menus, so "Full screen" and the site's notices are
   there between shots. Menus stay compact so their buttons stay in view. */
@media (orientation: landscape) and (max-height: 540px) {
  :root {
    --hud-h: 42px;
  }
  body.at-table .site-header {
    display: none;
  }
  body.at-table .page {
    padding: var(--safe-t) var(--safe-r) 24px var(--safe-l);
  }
  body.at-table .game-root {
    border-radius: 0;
    border-width: 0;
  }
  .hud {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  /* With the header gone the HUD meets the screen's top corners, which a
     phone rounds off: its buttons keep 24 px from them. */
  body.at-table .hud {
    padding-left: max(16px, calc(24px - var(--safe-l)));
    padding-right: max(16px, calc(24px - var(--safe-r)));
  }
  .menu {
    padding: 10px 14px;
  }
  .menu h2 {
    font-size: 20px;
    margin: 2px 0 4px;
  }
  .logo {
    font-size: 32px !important;
  }
  .sub {
    display: none;
  }
  .menu-buttons {
    grid-template-columns: 1fr 1fr;
    max-width: 620px;
    gap: 8px;
    margin-top: 8px;
  }
  .menu-buttons .btn,
  .title-menu > .btn {
    padding: 7px 10px;
    font-size: 15px;
  }
  .menu-row {
    margin-top: 8px;
  }
  .menu-row.sticky {
    margin: 8px -14px -10px;
    bottom: -10px;
    padding: 8px 14px;
  }
  .rating-line {
    margin-top: 4px !important;
  }
  .ad-results {
    min-height: 0;
  }
}

/* ---------- Full screen ----------
   The site's "Leave full screen" sits at the top in the middle, 44 px from
   max(8 px, the top inset). The HUD keeps 8 px or more around it: the match
   HUD's middle column is a 60 px gap for it, with "Race to N" beside it on
   a screen 640 px wide or more and under it on a narrower one (where the
   table is held by the width, so the taller HUD costs it nothing); Run Out's
   middle steps aside; and with no HUD the menus start below it. */
.game-root:fullscreen .hud {
  align-items: flex-start;
}

.game-root:-webkit-full-screen .hud {
  align-items: flex-start;
}

/* Run Out's read-outs stay level with the buttons. */
.game-root:fullscreen .hud-run {
  align-self: stretch;
}

.game-root:-webkit-full-screen .hud-run {
  align-self: stretch;
}

.game-root:fullscreen .hud-match {
  grid-template-columns: minmax(0, 1fr) minmax(60px, auto) minmax(0, 1fr);
  align-items: start;
}

.game-root:-webkit-full-screen .hud-match {
  grid-template-columns: minmax(0, 1fr) minmax(60px, auto) minmax(0, 1fr);
  align-items: start;
}

.game-root:fullscreen .hud-mid {
  display: block;
  margin-top: max(52px, calc(60px - var(--safe-t)));
}

.game-root:-webkit-full-screen .hud-mid {
  display: block;
  margin-top: max(52px, calc(60px - var(--safe-t)));
}

@media (min-width: 640px) {
  .game-root:fullscreen .hud,
  .game-root:fullscreen .hud-match {
    align-items: center;
  }
  .game-root:-webkit-full-screen .hud,
  .game-root:-webkit-full-screen .hud-match {
    align-items: center;
  }
  /* The pcards, "Race to N" and the gap, mirrored so the gap is the middle. */
  .game-root:fullscreen .hud-match {
    grid-template-columns: minmax(0, 1fr) calc(var(--t-min) * 5) 60px calc(var(--t-min) * 5) minmax(0, 1fr);
  }
  .game-root:-webkit-full-screen .hud-match {
    grid-template-columns: minmax(0, 1fr) calc(var(--t-min) * 5) 60px calc(var(--t-min) * 5) minmax(0, 1fr);
  }
  .game-root:fullscreen .hud-mid {
    grid-column: 2;
    margin-top: 0;
    text-align: right;
  }
  .game-root:-webkit-full-screen .hud-mid {
    grid-column: 2;
    margin-top: 0;
    text-align: right;
  }
  .game-root:fullscreen .pcard.right {
    grid-column: 5;
  }
  .game-root:-webkit-full-screen .pcard.right {
    grid-column: 5;
  }
}

.game-root:fullscreen .run-gap {
  width: 60px;
}

.game-root:-webkit-full-screen .run-gap {
  width: 60px;
}

.game-root:fullscreen .hud[hidden] + .stage .overlay {
  padding-top: 60px;
}

.game-root:-webkit-full-screen .hud[hidden] + .stage .overlay {
  padding-top: 60px;
}

/* A phone in full screen: the HUD meets the rounded top corners. */
@media (pointer: coarse) and (max-width: 599px), (pointer: coarse) and (max-height: 599px) {
  .game-root:fullscreen .hud {
    padding-left: max(16px, calc(24px - var(--safe-x)));
    padding-right: max(16px, calc(24px - var(--safe-x)));
  }
  .game-root:-webkit-full-screen .hud {
    padding-left: max(16px, calc(24px - var(--safe-x)));
    padding-right: max(16px, calc(24px - var(--safe-x)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner,
  .toggle .knob,
  .pcard {
    transition: none;
  }
}