/* Local palette: one-off colours for this page, named by role. Global tokens live in style.css. */
:root {
  --gm-game-stage-bg: #1d1438;
  --gm-hs-table-rank: #e4e1ef;
  --gm-hs-table-rank-2: #f2bd8c;
  --gm-pool-bg: #2f8fd0;
  --gm-pool-bg-2: #9fe0ff;
  --gm-pool-bg-3: #d8f4ff;
  --gm-lamp-row-bg: #5a3f9a;
  --gm-medal-edge: #b9b0d0;
  --gm-medal-bg: #e79a5c;
  --gm-medal-bg-2: #d9deea;
}
/* Bubble Arcade: arcade cards, the canvas stage, Tide-Pool Grab and Brighter or Dimmer. Built on style.css tokens. */
.game-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.game-card {
  display: grid; align-content: start; gap: 4px;
  padding: 12px; background: var(--tint);
  border: 2px solid var(--ink); border-radius: var(--r-tile); box-shadow: var(--shadow-sm);
}
.game-card h3 { margin: 6px 0 0; }
.game-card h3 a { color: var(--ink); text-decoration: none; }
.game-card p { margin: 0; font-size: var(--fs-sm); }
.game-card .btn-row { margin-top: 6px; }
.game-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.game-thumb {
  display: block; width: 100%; height: auto; aspect-ratio: 2; overflow: hidden;
  border: 2px solid var(--ink); border-radius: var(--r-sm);
  background: var(--paper);
  transition: transform .15s var(--ease-out);
}
.game-thumb > svg { aspect-ratio: 2; min-height: 0; }
.game-thumb * { animation: none !important; } /* Quiet catalog previews; the destination banner keeps its motion. */
@media (hover: hover) and (pointer: fine) { .game-card a:hover .game-thumb { transform: rotate(-1.5deg) scale(1.02); } }

@media (max-width: 560px) { /* thumb beside the title on phones, so the arcade isn't a column of giant pictures */
  .game-card { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; }
  .game-card > a:first-child { grid-row: span 2; }
  .game-card h3 { margin-top: 0; }
  .game-card > .game-meta, .game-card > .btn-row { grid-column: 1 / -1; }
}

.game-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* minmax: a long café pick can't widen the page */
.game-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-weight: 700; }
.game-bar #g-score { font: 700 1.4rem var(--display); color: var(--land-accent); font-variant-numeric: tabular-nums; }
.game-bar label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.game-bar select { width: auto; min-width: 0; margin: 0; }
.game-bar [data-mute] { margin-left: auto; }
/* The cabinet: the canvas sits in a land-tinted frame so it reads as the page's centrepiece, not a box off to one side */
.game-stage {
  display: grid; place-items: center; padding: clamp(10px, 3vw, 26px);
  border: 2px solid var(--ink); border-radius: var(--r-card);
  background:
    radial-gradient(circle at 8% 18%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 93% 80%, #fff 0 2px, transparent 3px),
    linear-gradient(150deg, var(--land-from), var(--land-to));
}
/* The ink edge is a box-shadow ring, not a border: host.js maps pointers with getBoundingClientRect(),
   and a border would sit inside that box and skew every click by its width. The height term keeps the whole
   board on screen on a landscape phone; aspect-ratio keeps it 4:3, so the mapping stays uniform. */
.game-stage canvas {
  width: min(100%, 960px); height: auto; aspect-ratio: 4 / 3; display: block;
  border: 0; border-radius: 16px; box-shadow: 0 0 0 var(--line) var(--ink), 6px 6px 0 var(--line) var(--ink);
  background: var(--gm-game-stage-bg); touch-action: none; cursor: pointer;
}
/* Phones: the frame gives its padding to the board, which is drawn at 640 wide and shrinks every tap target with it */
@media (max-width: 560px) { .game-stage { margin-inline: -10px; padding: 6px; } }
/* The board and its card share one grid cell, so a tall card (a phone's title screen) grows the stage instead of scrolling */
.game-stage { grid-template-columns: minmax(0, 1fr); } /* a long café pick in the card can't widen the stage */
.game-stage > *, .game-stage::after { grid-area: 1 / 1; }
.game-stage:has(> .g-card[hidden]) { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* mid-run: no scroll, zoom or text selection */
/* The cheering pet off the board (kit.js), in the player's spare room: under the board, up a wide side gutter, or in the side column */
.game-player { position: relative; }
/* Double-tapping the board or its controls must not select text or open the Copy / Look up menu; typed fields stay selectable */
.game-player { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.game-player :where(input, textarea) { user-select: text; -webkit-user-select: text; }
.g-cheer { position: absolute; z-index: 2; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; animation: pop-in .25s var(--ease-out); }
.g-cheer[hidden] { display: none; }
.g-cheer.is-side { flex-direction: column; align-items: flex-start; }
.g-cheer img { width: 64px; height: 64px; flex: none; }
.g-cheer p { margin: 0 0 24px; max-width: 15rem; padding: 6px 12px; background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-tile); font: 700 var(--fs-sm) var(--display); line-height: 1.25; }
.g-cheer.is-side p { margin: 0; }
.g-cheer.is-small img { width: 48px; height: 48px; }
.g-cheer.is-small p { padding: 4px 8px; font-size: var(--fs-xs); }

/* ---------- Title, pause and game-over cards (host.js) ---------- */
.g-card {
  align-self: stretch; justify-self: stretch; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-width: 0; min-height: 0; overflow: auto;
  padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 42%, transparent); overscroll-behavior: contain;
}
.g-card[hidden] { display: none; }
.g-panel {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: center; width: min(100%, 32rem); padding: 16px 18px; text-align: center;
  background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow);
  animation: pop-in .22s var(--ease-out);
}
.g-panel > * { margin: 0; max-width: 100%; }
.g-panel [hidden] { display: none; }
.g-card.is-loud .g-panel { box-shadow: 0 0 0 4px var(--sun), var(--shadow); }
.g-title { font-size: 1.45rem; line-height: 1.15; }
.g-who { display: flex; align-items: center; justify-content: center; gap: 12px; }
.g-pet { width: 88px; height: 88px; flex: none; animation: bob 1.1s ease-in-out infinite alternate; }
.g-card[data-state="paused"] .g-pet { animation: none; }
.g-lines { display: grid; gap: 4px; justify-items: start; text-align: left; min-width: 0; }
.g-lines p { margin: 0; }
.g-score { display: flex; align-items: baseline; gap: 8px; }
.g-score span { color: var(--muted); font-weight: 700; }
.g-score b { font: 700 2rem/1 var(--display); color: var(--pink); font-variant-numeric: tabular-nums; }
.g-tags { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-weight: 700; }
.g-say { font-size: var(--fs-sm); }
.g-say b::after { content: ':'; }
.g-medals { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.g-medals .medal-chip.now { box-shadow: 0 0 0 3px var(--sun); animation: pop-in .4s var(--ease-out) .3s both; }
.g-next { display: grid; gap: 4px; width: min(100%, 20rem); font-weight: 700; font-size: var(--fs-sm); }
.g-bar { display: block; height: 14px; overflow: hidden; border: 2px solid var(--ink); border-radius: 999px; background: var(--tint-2); }
.g-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--sun); transition: width .8s var(--ease-out) .15s; }
.g-pay { font-weight: 600; }
.g-rival { padding: 6px 12px; border-radius: var(--r-sm); background: var(--hi-soft); font-weight: 700; }
.g-picks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; font-weight: 700; }
.g-picks label { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.g-picks select { width: auto; min-width: 0; max-width: 100%; margin: 0; text-overflow: ellipsis; }
.g-how { display: grid; gap: 8px; justify-items: center; width: 100%; }
.g-how details { width: 100%; text-align: left; }
.g-how summary { width: fit-content; margin-inline: auto; font-weight: 800; cursor: pointer; }
.g-how details p { margin: 8px 0 0; font-size: var(--fs-sm); }
.g-goal { margin: 0; }
.g-goal b, .game-how .g-goal b { margin-right: 6px; padding: 0 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--sun); font: 700 var(--fs-xs) var(--display); }
.g-rows { display: grid; gap: 8px; width: fit-content; max-width: 100%; margin: 0; padding: 0; list-style: none; text-align: left; }
.g-rows li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: 10px; font-weight: 600; }
.g-keys { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.g-keys svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-rows kbd { min-width: 2em; padding: 2px 6px; text-align: center; font: 700 var(--fs-xs) var(--display); background: var(--card); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 0 2px 0 var(--ink); }
.g-mode { color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.g-actions { justify-content: center; }
.g-foot { color: var(--muted); font-size: var(--fs-sm); }
.g-foot:empty { display: none; }
@media (max-width: 560px) {
  .g-card { padding: 8px; }
  .g-panel { padding: 14px 12px; }
  .g-actions > [data-go] { flex: 1 1 100%; }
  .g-actions > :not([data-go]) { flex: 1 1 0; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .g-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 48rem); gap: 8px 16px; padding: 12px 16px; }
  .g-title, .g-how, .g-actions, .g-foot { grid-column: 1 / -1; }
  .g-card { place-items: safe center; padding: 6px; }
  .g-pet { width: 56px; height: 56px; }
  .g-title { font-size: 1.15rem; }
  .g-score b { font-size: 1.5rem; }
  .g-say, .g-rival, .g-pay, .g-next { font-size: var(--fs-xs); }
  .g-medals { gap: 4px; }
  .g-medals .medal-chip { padding: 1px 8px 1px 4px; font-size: var(--fs-xs); }
  .g-actions .btn { min-height: 44px; padding-block: 6px; }
}
/* The page's how-to: same rows as the start card, the full rules folded away */
.game-how .g-rows { margin: 0 0 10px; }
.game-how .g-goal { margin: 0 0 8px; }
.game-how details summary { font-weight: 800; cursor: pointer; width: fit-content; }

/* Dedicated play view: the board owns the space, with controls outside the artwork. */
.game-player { display: grid; gap: 12px; min-width: 0; }
.player-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.player-toolbar strong { margin-right: auto; font-family: var(--display); }
.player-score { white-space: nowrap; font-variant-numeric: tabular-nums; }
.player-toolbar .btn { min-height: 44px; }
.player-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; min-height: 0; }
.player-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-content: center; }
.player-control { min-width: 64px; min-height: 54px; flex: 1 1 80px; max-width: 200px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.player-control.is-held, .player-control[aria-pressed="true"] { background: var(--pick); box-shadow: none; transform: translateY(2px); }
.player-hint { margin: 0; color: var(--muted); font-size: 1rem; }
.game-player [hidden] { display: none; }
.game-view-open { overflow: hidden; }
.game-dialog {
  position: fixed; inset: var(--player-top, 0px) 0 auto; margin: 0;
  width: 100%; max-width: none; height: var(--player-height, 100dvh); max-height: none;
  padding: max(8px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  border: 0; background: var(--paper); color: var(--ink); overscroll-behavior: contain; touch-action: manipulation; /* no double-tap zoom */
}
.game-dialog::backdrop { background: var(--ink); }
.game-dialog .game-player { height: 100%; display: flex; flex-direction: column; gap: 8px; }
.game-dialog .player-toolbar { flex: none; }
.game-dialog .player-field { flex: 1; grid-template-rows: minmax(0, 1fr) auto; }
.game-dialog .game-stage { min-width: 0; min-height: 0; margin: 0; padding: 2px; border: 0; overflow: hidden; border-radius: var(--r-sm); }
.game-dialog canvas { max-width: none; flex: none; border-radius: 8px; box-shadow: 0 0 0 2px var(--ink); }
.game-dialog .g-card { border-radius: var(--r-sm); }
.game-dialog .player-hint { display: none; } /* the start card shows the controls */
/* Portrait: the board sits at the top and the space under it is a thumb pad that plays too (host.js forwards it) */
@media (orientation: portrait) {
  .game-dialog .game-stage > canvas { align-self: start; }
  .game-dialog .game-stage[data-pad]:has(> .g-card[hidden])::after {
    content: 'Touch down here to play too'; align-self: end; padding-bottom: 14px; pointer-events: none;
    color: #fff; font: 700 var(--fs-sm) var(--display); opacity: .85; text-shadow: 0 1px 0 var(--ink), 0 -1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink);
  }
  .game-dialog .player-control { min-height: clamp(64px, 10dvh, 96px); } /* thumb-sized pads on a tall phone */
}
.game-dialog .player-input { flex: none; align-self: center; width: min(100%, 640px); margin: 0; font-size: 1rem; }
.game-dialog .game-send { flex: none; max-height: 28%; overflow: auto; padding: 8px 12px; }
.game-dialog .game-send [data-result] { font-size: 1rem; }
.game-dialog .send-pet { width: 48px; height: 48px; }
.game-dialog #g-again { display: none; } /* the toolbar always offers replay */
@media (max-width: 560px) {
  .player-toolbar strong { width: 100%; }
  .player-toolbar .btn { padding-inline: 12px; }
  .player-score { margin-right: auto; }
  .game-dialog .player-toolbar strong { width: auto; flex: 1; }
  .game-dialog .player-score { margin: 0; }
  .game-dialog #player-expand { margin-left: auto; }
  .game-dialog .player-control { min-height: 56px; }
}
/* Short landscape (a phone on its side): the board gets the full height; toolbar and pads share a side column */
@media (orientation: landscape) and (max-height: 600px) {
  .game-dialog .game-player { display: grid; grid-template-columns: minmax(0, 1fr) 176px; grid-template-rows: auto minmax(0, 1fr); gap: 8px 12px; }
  .game-dialog .player-field { display: contents; }
  .game-dialog .game-stage { grid-column: 1; grid-row: 1 / -1; }
  .game-dialog .player-toolbar { grid-column: 2; grid-row: 1; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; }
  .game-dialog .player-toolbar > * { margin: 0; }
  .game-dialog .player-toolbar strong { display: none; }
  .game-dialog .player-score { text-align: center; }
  .game-dialog .player-controls { grid-column: 2; grid-row: 2; gap: 12px; align-content: end; overflow: auto; }
  .game-dialog .player-control { min-width: 64px; min-height: 52px; flex-basis: 68px; padding: 6px; }
  .game-dialog :is(.player-input, .game-send) { grid-column: 1 / -1; }
}
.game-send { display: grid; gap: 8px; justify-items: start; background: var(--hi); border: var(--line) solid var(--ink); border-radius: var(--r-tile); padding: 14px 18px; box-shadow: var(--shadow-sm); }
.game-send[hidden] { display: none; } /* display: grid would otherwise beat the hidden attribute */
.game-send p { margin: 0; font-weight: 700; }
.game-send [data-result] { font: 600 1.15rem var(--display); }
.game-how { max-width: 70ch; }
.game-how h2 { font-size: 1.2rem; }

/* High scores: numbers line up on the right; the podium gets gold, silver and bronze coins */
.hs-table :is(th, td):nth-child(n+3) { text-align: right; }
.hs-table :is(th, td):first-child { width: 1%; text-align: center; }
.hs-table td:nth-child(2) { overflow-wrap: anywhere; } /* long usernames wrap instead of pushing the page sideways on phones */
.rank { display: inline-grid; place-items: center; min-width: 30px; height: 30px; font: 700 1rem var(--display); }
.hs-table tbody tr:nth-child(-n+3) .rank { border: 2px solid var(--ink); border-radius: 50%; background: var(--rank, var(--sun)); box-shadow: 0 2px 0 var(--ink); }
.hs-table tbody tr:nth-child(2) { --rank: var(--gm-hs-table-rank); }
.hs-table tbody tr:nth-child(3) { --rank: var(--gm-hs-table-rank-2); }

.luck { display: grid; gap: 14px; }
/* Tide-Pool Grab: a rock pool whose water line rises with the wave's odds (--tide 0-1) */
.pool, .lamp-row { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; align-items: center; min-height: 130px; padding: 12px;
  border: var(--line) solid var(--ink); border-radius: var(--r-card); }
.pool { position: relative; overflow: hidden;
  background: linear-gradient(to top, var(--gm-pool-bg) calc(var(--tide, 0) * 70% + 12%), var(--gm-pool-bg-2) calc(var(--tide, 0) * 70% + 12%), var(--gm-pool-bg-3)); }
.pool .muted, .pool .pill { margin: 0; padding: 4px 16px; color: var(--ink); font-weight: 700; background: rgb(255 255 255 / .88); border: 2px solid var(--ink); border-radius: 999px; }
.shell { animation: plop .4s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(var(--i) * .06s); filter: drop-shadow(3px 3px 0 rgb(0 0 0 / .3)); }
@keyframes plop { from { transform: translateY(-30px) scale(.6); opacity: 0; } }
.luck details summary { cursor: pointer; font-weight: 800; width: fit-content; }
.luck details ul { margin: 8px 0 0; display: grid; gap: 4px; }
.luck details li .shell { vertical-align: middle; animation: none; filter: none; }
.tweak { margin: 0; }

/* Brighter or Dimmer: Wicklow's lamp row after dusk */
.lamp-row { background: radial-gradient(circle at 50% 120%, var(--gm-lamp-row-bg), var(--gm-game-stage-bg) 70%); }
.lamp { filter: drop-shadow(0 0 calc(var(--b, 0) * 18px) var(--sun)); }
.lamp.lit { animation: kindle .5s ease-out both; }
.lamp.prev { opacity: .7; transform: scale(.85); }
.lamp-dark { opacity: .8; }
@keyframes kindle { from { filter: none; opacity: .3; } }

/* Pet energy: pips on /games and on each game's bar */
.energy-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; align-items: center; }
.energy-card.is-napping { background: linear-gradient(120deg, var(--card), var(--hi)); }
@media (max-width: 560px) { .energy-card { grid-template-columns: minmax(0, 1fr); } }
.energy-row { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.energy-pips { display: inline-flex; gap: 3px; }
.energy-pips i { width: 12px; height: 18px; border: 2px solid var(--ink); border-radius: 4px; background: var(--tint-2); }
.energy-pips i.on { background: var(--lime); }
.g-energy, .g-paid { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }

/* The typing games' real text box (Letter Lanterns, Word Scramble) under the canvas, so phones get their keyboard. 16px+ stops iOS zooming in. */
.game-page .game-input { width: min(100%, 640px); justify-self: center; margin: 0; font: 700 1.2rem var(--display); text-align: center; text-transform: lowercase; }

/* House rule of the day: a spotlight card on /games, a gold ring on its arcade card, a note on its page */
.pill-hot { background: var(--sun); font-weight: 800; }
.game-card.is-featured { background: var(--hi); box-shadow: 0 0 0 3px var(--sun), var(--shadow-sm); }
.featured-game { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 18px; align-items: center; background: var(--hi-soft); }
.featured-game h2 { margin: 6px 0 4px; }
.featured-game h2 a { color: var(--ink); text-decoration: none; }
.featured-game p { margin: 0 0 8px; }
@media (max-width: 560px) { .featured-game { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; } }
.featured-note { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; }

/* Tickety's Prize Counter */
.ticket-row { margin: 8px 0 0; line-height: 1.8; }
.ticket-pill { background: var(--land-from); font-weight: 800; font-variant-numeric: tabular-nums; }
.prize-shelf { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.prize {
  display: grid; grid-template-rows: auto auto 1fr auto auto; justify-items: center; gap: 6px; text-align: center; padding: 12px 10px;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r-tile); box-shadow: var(--shadow-sm);
}
.prize small { color: var(--muted); font-size: var(--fs-sm); line-height: 1.3; }
.prize form { margin: 0; }
.prize.owned { background: var(--hi); }

/* Medals: three dots lit up to your best (cards), chips with the targets (game page) */
.medal-row { display: inline-flex; gap: 3px; align-items: center; padding: 3px 6px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; }
.medal { width: 14px; height: 14px; border-radius: 50%; border: 2px dashed var(--gm-medal-edge); background: var(--paper); flex: none; }
.medal.lit { border: 2px solid var(--ink); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .15); }
.medal.m1.lit { background: var(--gm-medal-bg); }
.medal.m2.lit { background: var(--gm-medal-bg-2); }
.medal.m3.lit { background: var(--sun); }
.game-medals { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.medal-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 6px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-size: var(--fs-sm); }
.medal-chip.lit { background: var(--hi); }
.medal-chip .medal { width: 18px; height: 18px; }
.game-bar [hidden] { display: none; }

/* The result box wears the land colours and the pet; a medal run gets a medal-coloured ring */
.game-send { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px;
  background: linear-gradient(120deg, var(--hi) 55%, color-mix(in srgb, var(--land-from) 35%, var(--hi))); }
.send-pet { width: 72px; height: 72px; }
.game-send[data-medal="bronze"] { box-shadow: 0 0 0 4px var(--gm-medal-bg), var(--shadow-sm); }
.game-send[data-medal="silver"] { box-shadow: 0 0 0 4px var(--gm-medal-bg-2), var(--shadow-sm); }
.game-send[data-medal="gold"] { box-shadow: 0 0 0 4px var(--sun), var(--shadow-sm); }

/* House rule of the day, loud: thumb, pitch, and your pet cheering it on */
.featured-game { grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 280px); position: relative; overflow: hidden;
  background: radial-gradient(circle at 92% 12%, #fff 0 3px, transparent 4px), radial-gradient(circle at 40% 90%, #fff 0 2px, transparent 3px),
    linear-gradient(135deg, var(--hi-soft), hsl(var(--h) 95% 90%)); box-shadow: 0 0 0 4px var(--sun), var(--shadow); } /* style-ok: colour computed from a per-element custom property */
.featured-game h2 { font-size: 1.8rem; }
.fg-pet { align-self: center; }
.fg-pet .speech { font-size: var(--fs-sm); }
@media (max-width: 860px) { .featured-game { grid-template-columns: minmax(0, 180px) minmax(0, 1fr); } .fg-pet { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .featured-game { grid-template-columns: 96px minmax(0, 1fr); }
  .featured-game .fg-body { display: contents; }
  .featured-game .fg-thumb { grid-row: span 2; }
  .featured-game .fg-body > :not(.pill-hot, h2) { grid-column: 1 / -1; }
  .fg-pet { flex-direction: row; align-items: center; }
  .fg-pet svg { width: 80px; height: 80px; }
  /* phones: the house-rule card is one centred column (thumb, pill, name, text, medals, button, pet) */
  .featured-game { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .featured-game .fg-thumb { grid-row: auto; width: 140px; }
  .featured-game .btn-row { justify-content: center; }
  .fg-pet { flex-direction: column; }
  .ticket-row { text-align: center; }
  .ticket-pill { display: block; width: fit-content; margin: 0 auto 6px; }
}

/* Mobile sweep: centred result and prize-counter blocks, a tablet prize grid with no orphan row, high-score names that get the width */
.hs-table :is(th, td):nth-child(2) { width: 99%; } /* the player column soaks up the slack so names wrap at word ends, not letter by letter */
@media (min-width: 561px) and (max-width: 1100px) { .prize-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .prize-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .prize { padding: 12px 8px; }
  .prize .btn { padding-inline: 8px; white-space: nowrap; font-size: .9rem; }
  .hs-table :is(th, td) { padding: 8px 6px; }
  /* result block: pet above, text and the replay button centred under it (the play dialog keeps its compact row) */
  .game-page .game-send { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: 8px; }
  .game-page .game-send .btn-row { justify-content: center; }
  .game-page .game-send .btn-row .btn { width: 100%; }
}
@media (min-width: 561px) { .game-send { justify-content: center; text-align: left; } }
/* Tickety's counter: the keeper and the ticket line sit centred under the banner */
.prize-counter { text-align: center; }
.prize-counter .keeper { justify-content: center; text-align: left; }
@media (min-width: 768px) { .prize-counter { text-align: left; } .prize-counter .keeper { justify-content: flex-start; } } /* tablet and up: keeper and ticket line sit left like every other keeper head */

/* Phones: 12px between stacked rows in the touch-control grid and the game bar (was 10px) */
@media (max-width: 767px) { .player-controls { gap: 12px; } .game-bar { row-gap: 12px; } }
@media (max-width: 400px) { .prize form { width: 100%; } .prize .btn { width: 100%; min-width: 0; padding-inline: 4px; font-size: .85rem; } } /* 320: "Need 450 more" fits its half-width card */

/* Phones: the link pairs under game titles sit centred as an even-width pair */
@media (max-width: 767px) { .game-links { justify-content: center; width: 100%; } .game-links > .btn { flex: 1 1 0; max-width: 200px; } .head-row + .game-pills { margin-top: 12px; } }
@media (max-width: 767px) {
  .game-links.game-pills > .pill { flex: 0 1 auto; max-width: none; }
  .game-bar, .game-medals { justify-content: center; text-align: center; gap: 12px; }
  .game-bar [data-mute] { margin-left: 0; }
  .game-bar .g-paid { flex-basis: 100%; justify-content: center; } /* Sound + Music then pair up on the next row */
}
@media (max-width: 767px) { .luck > .tweak, .luck > .lede, .luck > .hint, .luck form > span.muted:last-child { text-align: center; flex: 1 0 100%; } } /* short status lines under the centred keeper and pool */

/* Wide desktops: five cards across the Arcade rows (a five-game row no longer leaves one orphan). */
@media (min-width: 1700px) { .game-grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } }