/* Home: exactly one viewport. Scene picker and icon controls top left, menu top right, intro bottom left,
   one round scene action bottom right. Nothing is in the normal document flow, so nothing scrolls. */

html.home-page, html.home-page body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.home-page body { position: fixed; inset: 0; }
#scene, #scene-prev { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }
/* The previous scene, frozen, fades out over the new one: no gap, no flash of another colour. */
#scene-prev { z-index: 2; pointer-events: none; opacity: 0; }
#scene-prev.dissolve { animation: dissolve 0.55s var(--ease) forwards; }
@keyframes dissolve { from { opacity: 1; } to { opacity: 0; } }
.no-js #scene, .no-js #scene-prev, .still #scene, .still #scene-prev { display: none; }
.no-js body, .still body { background: radial-gradient(ellipse at 60% 40%, #1c2a38, var(--ink) 70%) !important; }
.still .js-only { display: none !important; }
body.playing #scene { touch-action: none; cursor: crosshair; }
body.scene-koi #scene { cursor: copy; }

/* ---------- Loader and welcome ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: 14px; background: var(--ink); transition: opacity 0.4s var(--ease); }
.overlay.fading { opacity: 0; pointer-events: none; }
.loader-ball { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #f4f8d8, var(--ball) 50%, #9aa64a); animation: bounce 0.9s cubic-bezier(0.3, 0, 0.7, 1) infinite alternate; }
@keyframes bounce { from { transform: translateY(-16px); } to { transform: translateY(6px); } }
.loader-pct { font: 400 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.loader-label { font-size: 12px; color: var(--muted); }
.loader-fail { display: grid; gap: 12px; justify-items: center; font-size: 14px; text-align: center; padding: 0 16px; }
.loader-fail .row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.welcome-inner { display: grid; justify-items: center; gap: 22px; padding: 24px; text-align: center; }
.welcome-title { font-size: clamp(24px, 4vw, 30px); line-height: 1.2; letter-spacing: -0.03em; outline: none; }
.welcome-sub { color: var(--muted); }
.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.choice { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); color: var(--fg); cursor: pointer; font: 500 14.5px/1 var(--sans); transition: transform 0.22s var(--spring), border-color 0.18s; }
.choice:hover { border-color: var(--line-2); transform: translateY(-2px); }
.choice:hover .ico, .choice:focus-visible .ico { animation: icon-bounce 0.42s var(--ease); }

/* ---------- Menu ---------- */
.home-nav { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(var(--gutter), env(safe-area-inset-right)); z-index: 30; }
.home-nav .navlinks { padding-top: 4px; }

/* ---------- Controls ---------- */
.hud { position: fixed; z-index: 20; top: max(14px, env(safe-area-inset-top)); left: max(var(--gutter), env(safe-area-inset-left)); display: grid; justify-items: start; gap: 10px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: calc(100vw - 2 * var(--gutter) - 58px); }
.icons { display: flex; flex-wrap: wrap; gap: 6px; }
body.switching .icons > *, body.switching .picker-btn { animation: rise 0.34s var(--ease) both; }
body.switching .icons > *:nth-child(2) { animation-delay: 0.04s; }
body.switching .icons > *:nth-child(3) { animation-delay: 0.08s; }
body.switching .icons > *:nth-child(4) { animation-delay: 0.12s; }
body.switching .icons > *:nth-child(5) { animation-delay: 0.16s; }
body.switching .icons > *:nth-child(6) { animation-delay: 0.2s; }

/* Rounded scene picker: a real listbox. */
.picker { position: relative; }
.picker-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass); color: var(--fg); cursor: pointer; font: 500 14px/1 var(--sans); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color 0.18s, transform 0.22s var(--spring); }
.picker-btn:hover { border-color: var(--line-2); transform: translateY(-1px); }
.picker-btn:hover > .ico:first-of-type, .picker-btn:focus-visible > .ico:first-of-type { animation: icon-bounce 0.42s var(--ease); }
.picker-btn .chev { width: 16px; height: 16px; color: var(--muted); transition: transform 0.25s var(--spring); }
.picker-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.picker-list { position: absolute; top: 52px; left: 0; z-index: 35; min-width: 230px; margin: 0; padding: 6px; list-style: none;
  background: rgb(25 28 32 / 0.97); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 50px rgb(0 0 0 / 0.45);
  animation: rise 0.2s var(--ease); outline: none; }
.picker-list li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 14px; cursor: pointer; color: var(--muted); font-size: 14px; transition: background-color 0.15s, color 0.15s; }
.picker-list li span { flex: 1; }
.picker-list li .check { opacity: 0; color: var(--ball); }
.picker-list li[aria-selected="true"] { color: var(--fg); }
.picker-list li[aria-selected="true"] .check { opacity: 1; }
.picker-list li:hover, .picker-list li.active { background: var(--ink-3); color: var(--fg); }
.picker-list:focus-visible li.active { outline: 2px solid var(--fg); outline-offset: -2px; }

/* Sound on: a small dot on the speaker. */
.on-dot { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--ball); box-shadow: 0 0 0 2px var(--ink); transform: scale(0); transition: transform 0.25s var(--spring); }
#sound-btn.sounding .on-dot { transform: scale(1); }
/* The liked little i keeps its own glyph and greeting. */
.info-glyph { display: block; font: italic 500 17px/1 Georgia, "Times New Roman", serif; }
#info-btn:hover .info-glyph, #info-btn:focus-visible .info-glyph, #info-btn.hello .info-glyph { animation: icon-bounce 0.42s var(--ease); }

.readout:empty { display: none; }
.readout { display: grid; gap: 1px; }

/* ---------- Floating scene action ---------- */
.fab-wrap { position: fixed; z-index: 25; right: max(var(--gutter), env(safe-area-inset-right)); bottom: max(26px, calc(env(safe-area-inset-bottom) + 16px)); border-radius: 50%; }
.fab { position: relative; display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%;
  background: var(--fg); color: var(--ink); cursor: pointer; box-shadow: 0 14px 34px rgb(0 0 0 / 0.42);
  transition: transform 0.25s var(--spring), background-color 0.18s, box-shadow 0.25s; }
.fab .ico { width: 24px; height: 24px; }
/* On tennis the round action is a tennis ball: felt, two seams, and a gentle hop now and then. */
.fab-wrap.ball .fab { background: radial-gradient(circle at 34% 30%, #f6fdc4, #d6f05a 48%, #9db534 100%); color: #1f2a08; box-shadow: 0 12px 28px rgb(0 0 0 / 0.42), inset 0 -3px 6px rgb(60 80 10 / 0.35); }
.fab-wrap.ball .fab::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at -18% 50%, transparent 58%, rgb(255 255 255 / 0.85) 59.5%, transparent 62%), radial-gradient(circle at 118% 50%, transparent 58%, rgb(255 255 255 / 0.85) 59.5%, transparent 62%); }
.fab-wrap.ball .fab .ico { position: relative; }
.fab-wrap.ball .fab:hover { background: radial-gradient(circle at 34% 30%, #fbffd8, #dcf466 48%, #a3bb3a 100%); }
@keyframes ball-hop { 0%, 84%, 100% { transform: none; } 88% { transform: translateY(-5px) rotate(-8deg); } 93% { transform: translateY(0) scale(1.05, 0.94); } 96% { transform: translateY(-1.5px); } }
.fab-wrap.ball { animation: ball-hop 5.5s var(--ease) infinite; }
body.paused .fab-wrap.ball, body.cleared .fab-wrap.ball, body.paused .fab-wrap.halo, body.paused .fab-wrap.halo::before { animation: none; }
.fab:hover { transform: translateY(-2px) scale(1.04); background: #fff; box-shadow: 0 18px 40px rgb(0 0 0 / 0.5); }
.fab:active { transform: scale(0.93); transition-duration: 0.08s; }
.fab:focus-visible { outline: 2px solid var(--fg); outline-offset: 5px; border-radius: 50%; }
.fab[aria-disabled="true"] { background: #9a9da2; cursor: not-allowed; transform: none; }
.fab.bump .ico { animation: bump 0.4s var(--spring); }
@keyframes bump { 0% { transform: none; } 40% { transform: translateY(3px) scale(0.92); } 100% { transform: none; } }
.fab-wrap.halo { padding: 3px; background: var(--rainbow); animation: halo-spin 6s linear infinite; }
.fab-wrap.halo::before { content: ""; position: absolute; inset: -6px; z-index: -1; border-radius: 50%; background: var(--rainbow); filter: blur(12px); opacity: 0.5; animation: inherit; }
.fab-wrap.halo.pulse::before { animation: halo-spin 6s linear infinite, pulse 0.5s var(--ease); }
@keyframes pulse { 0% { opacity: 0.5; transform: scale(1); } 40% { opacity: 0.9; transform: scale(1.12); } 100% { opacity: 0.5; transform: scale(1); } }
.fab-wrap.halo.off { background: var(--line-2); animation: none; }
.fab-wrap.halo.off::before { opacity: 0; }

/* A quiet translucent scoreboard, positioned clear of the players. */
.scoreboard { position: fixed; z-index: 3; left: var(--gutter); display: grid; justify-items: center; gap: 4px;
  padding: 7px 10px 8px; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 16px; background: rgb(12 18 16 / 0.52);
  font: 400 12px/1.2 var(--mono); color: rgb(236 235 230 / 0.8); font-variant-numeric: tabular-nums; white-space: nowrap;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); pointer-events: none; }
.scoreboard .score-sides { display: flex; align-items: center; gap: 8px; }
.scoreboard .side { display: flex; gap: 3px; align-items: center; }
.scoreboard .player { padding: 0 3px; }
.scoreboard b { display: grid; min-width: 19px; height: 20px; padding: 0 3px; place-items: center; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 4px; color: rgb(236 235 230 / 0.94); font-weight: 500; }
.scoreboard .mode { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(236 235 230 / 0.62); }
.scoreboard .sep { color: rgb(236 235 230 / 0.3); }
.scoreboard .serving::before { content: "●"; margin-right: 4px; color: var(--ball); font-size: 7px; vertical-align: 2px; }
body.playing .scoreboard { color: rgb(236 235 230 / 0.82); }

/* ---------- Panels ---------- */
.panel { width: min(370px, calc(100vw - 2 * var(--gutter))); max-height: var(--panel-max, calc(100dvh - 140px)); overflow: auto; overscroll-behavior: contain;
  display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: rgb(25 28 32 / 0.96);
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.4); animation: rise 0.22s var(--ease); font-size: 13.5px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel h2 { font-size: 16px; }
.panel p { color: var(--muted); }
.panel p strong { color: var(--fg); font-weight: 500; }
.panel-note { font-size: 12.5px; color: var(--dim) !important; }
.sound-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sound-row .pill { min-width: 11ch; }
.sound-row label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.sound-row input { width: 110px; accent-color: var(--fg); }
.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; }
.seg button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; font-size: 12.5px; transition: background-color 0.18s, color 0.18s; }
.seg button[aria-pressed="true"] { background: var(--ink-3); color: var(--fg); }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.opt-row > span { color: var(--muted); font-size: 12.5px; }

/* Plinko history: falling balls first, then settled results. */
.ledger { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font: 400 11.5px/1.45 var(--mono); font-variant-numeric: tabular-nums; }
.ledger li { display: grid; grid-template-columns: 6ch 1fr auto auto; gap: 10px; padding: 5px 8px; border-radius: 8px; color: var(--muted); }
.ledger li.falling { color: var(--dim); background: rgb(255 255 255 / 0.03); }
.ledger li.ledger-head { padding-top: 0; padding-bottom: 2px; color: var(--dim); font-size: 10.5px; }
.ledger li { grid-template-columns: 4ch 1fr auto 9ch; }
.ledger li > span:last-child { text-align: right; }
.ledger .up { color: #b9df7a; }
.ledger .down { color: var(--warn); }
.ledger-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font: 400 11.5px/1.4 var(--mono); }
.ledger-totals div { padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; }
.ledger-totals span { display: block; color: var(--dim); font-size: 10.5px; }

/* ---------- Intro: short lines, clear of the floating action ---------- */
.intro { position: fixed; z-index: 10; left: max(var(--gutter), env(safe-area-inset-left)); bottom: max(26px, calc(env(safe-area-inset-bottom) + 16px));
  max-width: min(31rem, calc(100vw - 2 * var(--gutter) - 96px)); }
.intro h1 { font-size: 22px; line-height: 1.2; letter-spacing: -0.025em; }
.intro p { margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.intro .intro-link { margin-top: 8px; }
.intro-link a { color: var(--fg); text-decoration-color: var(--line-2); transition: text-decoration-color 0.18s; }
.intro-link a:hover { text-decoration-color: var(--fg); }
.hint { max-width: 34ch; color: var(--muted); font-size: 13.5px; }
.scene-hint { margin-bottom: 8px; }

/* ---------- Clear screen: nothing hidden stays focusable ---------- */
body.cleared .hud, body.cleared .intro, body.cleared .home-nav, body.cleared .fab-wrap, body.cleared .scoreboard { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s 0.25s; }
.restore { position: fixed; right: max(var(--gutter), env(safe-area-inset-right)); bottom: max(26px, calc(env(safe-area-inset-bottom) + 16px)); z-index: 30; animation: rise 0.3s var(--ease); }

/* ---------- Phones and short windows ---------- */
@media (max-width: 440px) {
  .icon-btn { width: 42px; height: 42px; }
  .picker-btn { height: 42px; font-size: 13.5px; }
  .row { gap: 8px; max-width: calc(100vw - 2 * var(--gutter) - 50px); }
  .fab { width: 52px; height: 52px; }
  .fab .ico { width: 22px; height: 22px; }
  .intro { max-width: calc(100vw - 2 * var(--gutter) - 84px); }
  .intro h1 { font-size: 19px; }
  .intro p { font-size: 13.5px; }
  .intro .intro-dream { display: none; }
  .scoreboard { font-size: 11px; padding: 6px 7px; }
  .scoreboard .score-sides { gap: 5px; }
  .scoreboard .side { gap: 2px; }
  .scoreboard b { min-width: 17px; height: 18px; padding: 0 2px; }
}
@media (max-height: 700px) { .intro .intro-dream { display: none; } }
@media (max-height: 560px) { .intro .intro-curious { display: none; } .intro { bottom: 14px; } }
body.cleared .skip-link { display: none; }