/* ═══════════════════════════════════════════════
   Khel — the shell.
   Everything here is shared by every game: colours,
   buttons, overlays, the toast, and the shelf itself.
   A game's own styling lives in games/<id>/<id>.css
   ═══════════════════════════════════════════════ */

:root {
  --red:    #F0544F;
  --green:  #3FBF6F;
  --yellow: #FFC531;
  --blue:   #4A9BE8;

  --red-d:    #C43C38;
  --green-d:  #2C9954;
  --yellow-d: #D99E17;
  --blue-d:   #2E76B8;

  --cream:  #FFF6E5;
  --ink:    #43331F;
  --ink-soft: #7A6A56;
  --white:  #FFFDF8;

  --shadow: 0 6px 0 rgba(67, 51, 31, .16);
  --radius: 22px;

  --font: "Baloo 2", "Chalkboard SE", "Comic Sans MS", "Trebuchet MS", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,197,49,.20), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(74,155,232,.18), transparent 40%),
    radial-gradient(circle at 82% 88%, rgba(63,191,111,.18), transparent 42%),
    radial-gradient(circle at 15% 85%, rgba(240,84,79,.16), transparent 40%);
}

/* ───────────── screens ───────────── */
.screen { position: fixed; inset: 0; display: none; }
.screen.is-active { display: block; }

#game-host { height: 100%; }

.loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--ink-soft); font-weight: 700;
  font-size: clamp(15px, 3.6vmin, 20px);
}
.loading[hidden] { display: none; }

/* ───────────── the shelf ───────────── */
.shelf-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vh, 20px);
  padding: 16px;
  text-align: center;
  overflow-y: auto;
}

.logo {
  margin: 0;
  font-size: clamp(46px, 13vmin, 100px);
  line-height: 1;
  letter-spacing: 2px;
  font-weight: 800;
}
.logo-l {
  color: var(--c);
  display: inline-block;
  text-shadow: 0 4px 0 rgba(67,51,31,.18);
  animation: bob 2.4s ease-in-out infinite;
}
.logo-l:nth-child(2) { animation-delay: .15s }
.logo-l:nth-child(3) { animation-delay: .3s }
.logo-l:nth-child(4) { animation-delay: .45s }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }

.tagline { margin: 0; color: var(--ink-soft); font-size: clamp(14px, 3.4vmin, 20px); }

/* The shelf has to look right with two games and with ten, so the
   cards are small and the grid does the work: as many as fit, centred,
   never wider than a comfortable tap target. */
.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 250px));
  justify-content: center;
  gap: clamp(10px, 2.2vmin, 16px);
  width: min(800px, 96vw);
  margin-top: clamp(4px, 1.5vh, 14px);
}

.game-card {
  --accent: var(--red);
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.4vmin, 14px);
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  border: none;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 5px 0 rgba(67,51,31,.13);
  padding: clamp(10px, 2vmin, 14px);
  cursor: pointer;
  transition: transform .12s ease;
}
.game-card:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(67,51,31,.13); }
.game-card svg { width: clamp(40px, 9vmin, 56px); height: clamp(40px, 9vmin, 56px); flex: none; }
.game-card .card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.game-card .card-title {
  font-size: clamp(15px, 3.6vmin, 20px);
  font-weight: 800;
  color: var(--accent);
  line-height: 1.15;
}
.game-card .card-blurb { color: var(--ink-soft); font-size: clamp(11px, 2.5vmin, 13px); line-height: 1.3; }
.game-card .card-note { color: var(--ink-soft); font-size: clamp(10px, 2.3vmin, 12px); }

/* On a phone, two tiles to a row: the picture is what a small player
   is aiming at, and ten games still fit on one screen. */
@media (max-width: 520px) {
  .shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .game-card { flex-direction: column; text-align: center; gap: 8px; padding: 14px 8px; }
  .game-card .card-text { align-items: center; }
  .game-card .card-blurb { display: none; }
  .game-card svg { width: clamp(46px, 15vmin, 64px); height: clamp(46px, 15vmin, 64px); }
}

/* ───────────── the dedication ─────────────
   A sign-off, not body copy: a hairline to sit under, its own hand for
   the name, and a line break where the em dash used to be. */
.dedication {
  margin: clamp(12px, 2.6vh, 22px) 0 0;
  padding-top: clamp(10px, 1.8vh, 14px);
  border-top: 1px solid rgba(67, 51, 31, .14);
  max-width: 30ch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ded-lead {
  display: inline-block;                 /* so it can sit at a slight angle */
  font-family: "Bradley Hand", "Snell Roundhand", "Segoe Script", "Chalkboard SE", cursive;
  font-size: clamp(19px, 4.4vmin, 26px);
  color: var(--ink);
  transform: rotate(-1.2deg);
}
.ded-rest {
  font-size: clamp(11px, 2.5vmin, 13px);
  color: var(--ink-soft);
  line-height: 1.45;
  opacity: .85;
}

.shelf-foot { display: flex; align-items: center; gap: 12px; margin-top: 2px; }

/* The quiet, permanent way to install — deliberately unremarkable, since
   the dashed banner above is the one doing the asking. */
.install-mini {
  border: none;
  background: none;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(11px, 2.6vmin, 14px);
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 4px;
  cursor: pointer;
}
.install-mini[hidden] { display: none; }
.install-mini:active { color: var(--ink); }

/* ───────────── shared buttons ───────────── */
.big-btn {
  border: none;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(20px, 5vmin, 30px);
  color: #fff;
  background: linear-gradient(180deg, #FF8A5B, #F0544F);
  padding: clamp(12px, 2.6vmin, 20px) clamp(40px, 10vmin, 72px);
  border-radius: 999px;
  box-shadow: 0 7px 0 var(--red-d);
  cursor: pointer;
  margin-top: clamp(6px, 2vh, 16px);
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--red-d); }
.big-btn[disabled] { opacity: .45; box-shadow: 0 7px 0 rgba(0,0,0,.15); }

.ghost-btn {
  border: none; background: transparent; font-family: inherit;
  color: var(--ink-soft); font-size: clamp(13px, 3vmin, 17px);
  text-decoration: underline; text-underline-offset: 4px;
  padding: 10px 14px; cursor: pointer; font-weight: 600;
}

.icon-btn {
  border: none; background: var(--white); border-radius: 16px;
  width: clamp(40px, 9vmin, 54px); height: clamp(40px, 9vmin, 54px);
  font-size: clamp(18px, 4.4vmin, 24px);
  box-shadow: var(--shadow); cursor: pointer;
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(67,51,31,.16); }
.icon-btn.is-muted { opacity: .45; }

/* ───────────── add to home screen ───────────── */
/* The whole bar is one box, centred; the dismiss × tucks into its own
   top-right corner rather than hanging off the side, which used to
   shove the box off-centre. */
.install-bar {
  position: relative;
  width: min(360px, 90vw);
  margin: clamp(4px, 1.4vh, 12px) 0 0;
}
.install-bar[hidden] { display: none; }

.install-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-family: inherit;
  border: 2px dashed var(--yellow);
  background: var(--white);
  border-radius: 16px;
  padding: 8px 30px 8px 13px;   /* room on the right for the × */
  cursor: pointer;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.install-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(67,51,31,.16); }
.install-icon { font-size: clamp(19px, 4.2vmin, 24px); line-height: 1; }
.install-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.install-text b { font-size: clamp(13px, 2.9vmin, 15px); }
.install-text small { color: var(--ink-soft); font-size: clamp(10px, 2.3vmin, 12px); }

.install-x {
  position: absolute;
  top: 2px; right: 2px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: none; background: transparent;
  color: var(--ink-soft);
  font-size: 19px;
  font-family: inherit; line-height: 1;
  padding: 0; cursor: pointer; border-radius: 50%;
}
.install-x:active { background: rgba(67,51,31,.08); }

/* ───────────── iOS: one pointer, not a page of steps ─────────────
   A coach mark aimed at Safari's own Share button: bottom bar on a
   phone, top right on an iPad. One line, and any tap closes it.     */
.coach {
  position: fixed; inset: 0;
  z-index: 60;
  background: rgba(67, 51, 31, .5);
  color: var(--ink);
}
.coach[hidden] { display: none; }

.coach-bubble {
  position: absolute;
  background: var(--white);
  border-radius: 22px;
  padding: 14px 20px;
  box-shadow: 0 14px 34px rgba(0,0,0,.32);
  max-width: min(400px, 88vw);
  text-align: center;
}
.coach-line {
  margin: 0;
  font-size: clamp(16px, 4vmin, 21px);
  font-weight: 700;
  line-height: 1.45;
}
.coach-sub {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: clamp(11px, 2.6vmin, 13px);
  font-weight: 600;
}
.share-glyph {
  width: 1.15em; height: 1.15em;
  vertical-align: -0.22em;
  color: var(--blue);
  margin: 0 .1em;
}

.coach-arrow {
  position: absolute;
  width: clamp(30px, 7vmin, 44px);
  color: var(--yellow);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
}

/* phone: Safari's share button sits in the bottom bar, middle */
.coach.at-bottom .coach-bubble {
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 148px);
}
.coach.at-bottom .coach-arrow {
  left: 50%;
  margin-left: clamp(-22px, -3.5vmin, -15px);
  bottom: calc(env(safe-area-inset-bottom) + 74px);
  animation: nudge-down 1.3s ease-in-out infinite;
}
@keyframes nudge-down {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(10px) }
}

/* iPad: it's up in the top bar, towards the right */
.coach.at-top .coach-bubble {
  top: calc(env(safe-area-inset-top) + 128px);
  right: 12px;
}
.coach.at-top .coach-arrow {
  top: calc(env(safe-area-inset-top) + 54px);
  right: clamp(50px, 9vw, 96px);
  transform: rotate(180deg);
  animation: nudge-up 1.3s ease-in-out infinite;
}
@keyframes nudge-up {
  0%, 100% { transform: rotate(180deg) translateY(0) }
  50%      { transform: rotate(180deg) translateY(10px) }
}

/* ───────────── toast ───────────── */
.toast {
  position: fixed;
  left: 50%; top: 14px;
  transform: translate(-50%, -160%);
  background: var(--ink);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(14px, 3.4vmin, 19px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transition: transform .28s cubic-bezier(.2,1.3,.4,1);
  pointer-events: none;
  z-index: 40;
  max-width: 90vw;
  text-align: center;
}
.toast.show { transform: translate(-50%, 0); }

/* ───────────── overlays ───────────── */
.overlay {
  position: fixed; inset: 0;
  display: none;
  place-items: center;
  background: rgba(67, 51, 31, .55);
  z-index: 50;
  padding: 20px;
}
.overlay.is-active { display: grid; }

.win-card, .help-card {
  position: relative;
  background: var(--cream);
  border-radius: 32px;
  padding: clamp(22px, 5vmin, 40px);
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.3);
  max-width: min(560px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
}
.win-crown { font-size: clamp(44px, 12vmin, 76px); animation: bob 1.6s ease-in-out infinite; }
.win-card h2, .help-card h2 { margin: 6px 0; font-size: clamp(26px, 7vmin, 40px); }
.win-card p { margin: 0 0 6px; color: var(--ink-soft); font-size: clamp(15px, 3.6vmin, 20px); }

.help-card { text-align: left; }
.help-card ol { padding-left: 1.2em; margin: 12px 0 4px; }
.help-card li { margin-bottom: 12px; font-size: clamp(15px, 3.6vmin, 19px); line-height: 1.45; }
.help-card .big-btn { display: block; margin: 18px auto 0; }

/* ═══════════ what every board game shares ═══════════
   Setup screen, seats, board stage, dice panel, podium. A game's
   own file only carries what is genuinely its own. */

.game-screen { position: absolute; inset: 0; display: none; }
.game-screen.is-active { display: block; }

.setup-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vh, 20px);
  padding: 16px;
  text-align: center;
  overflow-y: auto;
}

.game-name {
  margin: 0;
  font-size: clamp(34px, 9vmin, 62px);
  font-weight: 800;
  color: var(--red);
  text-shadow: 0 4px 0 rgba(67,51,31,.16);
}
.setup-who {
  margin: 0;
  font-size: clamp(18px, 4.4vmin, 26px);
  font-weight: 800;
}
.setup-hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(12px, 2.8vmin, 15px);
  max-width: 44ch;
}

.seats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 2vmin, 16px);
  width: min(560px, 96vw);
}

.seat {
  border-radius: var(--radius);
  padding: clamp(10px, 2.4vmin, 18px) 6px;
  background: var(--white);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: opacity .2s ease;
  min-width: 0;
}
.seat[data-state="off"] { opacity: .38; }

/* the whole card is the button: it opens the picker */
.seat { cursor: pointer; border: none; font-family: inherit; }
.seat:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(67,51,31,.16); }
.seat svg { width: clamp(34px, 8vmin, 54px); height: clamp(34px, 8vmin, 54px); }

.setup-foot { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ───────────── board ───────────── */
.stage {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.6vmin, 18px);
  padding: clamp(6px, 1.6vmin, 16px);
}

.board-holder { flex: 0 1 auto; display: grid; place-items: center; min-height: 0; }

canvas.board {
  display: block;
  border-radius: 26px;
  box-shadow: 0 10px 26px rgba(67,51,31,.20);
  touch-action: none;
}

.panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vmin, 26px);
  flex-wrap: wrap;
}

.turn-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--white);
  border-radius: 999px;
  padding: 8px 18px 8px 10px;
  box-shadow: var(--shadow);
}
.turn-dot {
  width: clamp(20px, 4.6vmin, 30px); height: clamp(20px, 4.6vmin, 30px);
  border-radius: 50%; background: var(--red);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.turn-name { font-weight: 800; font-size: clamp(15px, 3.6vmin, 22px); }

.dice {
  width: clamp(66px, 15vmin, 104px);
  height: clamp(66px, 15vmin, 104px);
  border: none; border-radius: 24px;
  background: var(--white);
  box-shadow: 0 7px 0 rgba(67,51,31,.22);
  cursor: pointer; padding: 8px;
  transition: transform .1s ease;
}
.dice svg { width: 100%; height: 100%; display: block; }
.dice:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(67,51,31,.22); }
.dice[disabled] { opacity: .5; }
.dice.is-ready { animation: dice-pulse 1.1s ease-in-out infinite; }
@keyframes dice-pulse {
  0%,100% { box-shadow: 0 7px 0 rgba(67,51,31,.22), 0 0 0 0 rgba(255,197,49,.7); }
  50%     { box-shadow: 0 7px 0 rgba(67,51,31,.22), 0 0 0 16px rgba(255,197,49,0); }
}
.dice.is-rolling { animation: dice-shake .45s ease-in-out; }
@keyframes dice-shake {
  0%,100% { transform: rotate(0) }
  20% { transform: rotate(-14deg) scale(1.06) }
  45% { transform: rotate(12deg) scale(1.06) }
  70% { transform: rotate(-8deg) scale(1.03) }
}

.hint {
  margin: 0; color: var(--ink-soft); font-weight: 600;
  font-size: clamp(13px, 3.2vmin, 18px); text-align: center;
  min-width: 8ch;
}

.panel-foot { display: flex; gap: 8px; }

@media (orientation: landscape) {
  .stage { flex-direction: row; }
  .panel { flex-direction: column; flex-wrap: nowrap; }
}


/* ───────────── the running score ───────────── */
.seat-tally {
  font-size: clamp(10px, 2.3vmin, 13px);
  font-weight: 700;
  color: var(--ink-soft);
  min-height: 1.1em;
}
.seat[data-state="off"] .seat-tally { visibility: hidden; }

/* ───────────── how everyone finished ───────────── */
.podium {
  list-style: none;
  margin: clamp(10px, 2.4vmin, 18px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.podium-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border-radius: 999px;
  padding: 7px 16px 7px 10px;
  box-shadow: 0 3px 0 rgba(67,51,31,.10);
  text-align: left;
}
.podium-medal { font-size: clamp(16px, 3.8vmin, 21px); width: 1.4em; }
.podium-pawn {
  width: clamp(14px, 3.2vmin, 19px);
  height: clamp(14px, 3.2vmin, 19px);
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
  flex: none;
}
.podium-name { font-weight: 800; font-size: clamp(14px, 3.4vmin, 19px); }

.tally-row {
  margin: clamp(10px, 2.2vmin, 16px) 0 0;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: clamp(12px, 2.8vmin, 15px);
}
.tally-row:empty { display: none; }

/* ═══════════ who lives here ═══════════
   A row of people under the games. Tapping one edits them; the ＋
   adds someone. Wins are totalled across every game, so this doubles
   as the house scoreboard. */
.family {
  margin-top: clamp(6px, 1.8vh, 16px);
  width: min(760px, 96vw);
}
.family-title {
  margin: 0 0 8px;
  font-size: clamp(12px, 2.7vmin, 15px);
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.family-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.member {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  font-family: inherit;
  color: var(--ink);
  background: var(--white);
  border-radius: 999px;
  padding: 7px 14px 7px 8px;
  box-shadow: 0 4px 0 rgba(67,51,31,.12);
  cursor: pointer;
  transition: transform .12s ease;
}
.member:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(67,51,31,.12); }
.member-dot {
  width: clamp(18px, 4vmin, 24px);
  height: clamp(18px, 4vmin, 24px);
  border-radius: 50%;
  background: var(--tint);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
  flex: none;
}
.member-name { font-weight: 700; font-size: clamp(13px, 3vmin, 16px); }
.member-wins { color: var(--ink-soft); font-weight: 700; font-size: clamp(11px, 2.5vmin, 13px); }

.member-add {
  border: 2px dashed rgba(67,51,31,.22);
  background: transparent;
  box-shadow: none;
  color: var(--ink-soft);
  padding: 7px 16px;
}
.member-add:active { transform: translateY(3px); box-shadow: none; }

/* ═══════════ sheets: pick someone, edit someone ═══════════ */
.sheet {
  position: fixed; inset: 0;
  display: none;
  place-items: center;
  background: rgba(67, 51, 31, .55);
  z-index: 55;
  padding: 20px;
}
.sheet.is-active { display: grid; }

.sheet-card {
  background: var(--cream);
  border-radius: 30px;
  padding: clamp(20px, 4.5vmin, 32px);
  box-shadow: 0 18px 40px rgba(0,0,0,.3);
  width: min(420px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  text-align: center;
}
.sheet-title { margin: 0 0 14px; font-size: clamp(20px, 5vmin, 28px); }

.sheet-input {
  width: 100%;
  font-family: inherit;
  font-size: clamp(17px, 4vmin, 22px);
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: var(--white);
  border: 2px solid rgba(67,51,31,.14);
  border-radius: 16px;
  padding: 12px;
}
.sheet-input:focus { outline: none; border-color: var(--yellow); }

.tint-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  justify-items: center;
  margin: 4px 0;
}
.tint {
  width: clamp(26px, 6.2vmin, 34px);
  height: clamp(26px, 6.2vmin, 34px);
  border-radius: 50%;
  border: 3px solid transparent;
  background: var(--tint);
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.tint[aria-pressed="true"] { border-color: var(--ink); }

.sheet-note { margin: 10px 0 0; color: var(--ink-soft); font-size: clamp(11px, 2.6vmin, 13px); min-height: 1.2em; }
.ghost-btn.danger { color: #C43C38; }
.ghost-btn[hidden] { display: none; }

/* the seat picker */
.pick-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pick-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: none;
  font-family: inherit;
  color: var(--ink);
  background: var(--white);
  border-radius: 18px;
  padding: 12px 16px;
  box-shadow: 0 3px 0 rgba(67,51,31,.10);
  cursor: pointer;
  text-align: left;
}
.pick-option:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(67,51,31,.10); }
.pick-option[disabled] { opacity: .42; cursor: default; }
.pick-dot {
  width: clamp(20px, 4.4vmin, 26px);
  height: clamp(20px, 4.4vmin, 26px);
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: clamp(12px, 2.8vmin, 15px);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
}
.pick-robot { background: #E7DCC8; box-shadow: none; }
.pick-empty { background: transparent; border: 2px dashed rgba(67,51,31,.3); box-shadow: none; }
.pick-name { font-weight: 700; font-size: clamp(14px, 3.4vmin, 18px); flex: 1; }
.pick-tick { color: var(--green-d); font-weight: 800; }
.pick-note { color: var(--ink-soft); font-size: clamp(10px, 2.4vmin, 12px); }

/* the seat cards are now buttons that open the picker */
.seat-who {
  font-size: clamp(12px, 2.7vmin, 16px);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seat[data-state="off"] .seat-who { color: var(--ink-soft); font-weight: 600; }

/* ───────────── creatures ─────────────
   A five-year-old reads a fox instantly and "Mamma" not at all, so every
   person has an animal that follows them onto the seats, the turn card
   and the podium. Picking your own is half the point. */
.face-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin: 4px 0 10px;
}
.face {
  border: 3px solid transparent;
  background: var(--cream);
  border-radius: 12px;
  padding: 4px 0;
  font-size: clamp(17px, 4.4vmin, 23px);
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
}
.face[aria-pressed="true"] { border-color: var(--ink); background: var(--white); }
.face[disabled] { opacity: .28; cursor: default; }
.face:active { transform: translateY(2px); }

.member-dot {
  display: grid;
  place-items: center;
  font-size: clamp(12px, 3vmin, 16px);
  line-height: 1;
}

.seat-face { font-size: clamp(15px, 3.8vmin, 21px); line-height: 1; }
.pick-dot { display: grid; place-items: center; font-size: 14px; }

/* ───────────── what happened last ─────────────
   One fact, quietly. Never a streak, never a target. */
.last-round {
  margin: clamp(4px, 1.4vh, 10px) 0 0;
  color: var(--ink-soft);
  font-size: clamp(11px, 2.6vmin, 14px);
  font-weight: 700;
  text-align: center;
}
.last-round[hidden] { display: none; }

/* ───────────── motion at the moments that matter ─────────────
   Movement reads as the game responding to you, so the places that earn
   an animation are the ones carrying feeling: winning, and the tablet
   arriving in front of you. */
.win-card { animation: land-in .42s cubic-bezier(.2,1.5,.4,1); }
@keyframes land-in {
  0%   { transform: scale(.82) translateY(18px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.win-crown { animation: crown 1.1s ease-in-out .18s both; transform-origin: 50% 90%; }
@keyframes crown {
  0%, 100% { transform: rotate(0) scale(1); }
  25%      { transform: rotate(-9deg) scale(1.12); }
  60%      { transform: rotate(7deg) scale(1.08); }
}
.game-card:active { transform: translateY(3px) scale(.985); }

@media (prefers-reduced-motion: reduce) {
  .win-card, .win-crown { animation: none; }
}

/* The build this device is running. Deliberately tiny — it is a fact for
   whoever is debugging, not something a player should ever notice. */
.version {
  margin: 6px 0 0;
  color: var(--ink-soft);
  opacity: .45;
  font-size: 10px;
  letter-spacing: .5px;
}
.version[hidden] { display: none; }

/* ═══════════ heritage ═══════════
   The shelf as a cloth board: a block-printed border under the name,
   the line of where each game comes from above its title, and the
   story behind it one tap away. Colours borrowed from madder, indigo
   and turmeric rather than from a screen. */
:root {
  --madder: #B8452F;
  --indigo: #2F4A8A;
  --turmeric: #E0A21B;
}

.tagline {
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(17px, 4.2vmin, 26px);
  letter-spacing: .2px;
}
.promise { margin: 0; color: var(--ink-soft); font-size: clamp(12px, 2.8vmin, 15px); }

.band {
  width: min(320px, 70vw);
  height: 14px;
  flex: none;
  background-repeat: repeat-x;
  background-size: 28px 14px;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M7 1.5 12.5 7 7 12.5 1.5 7z' fill='%23B8452F'/%3E%3Ccircle cx='7' cy='7' r='1.8' fill='%23FFF6E5'/%3E%3Ccircle cx='21' cy='3.5' r='1.7' fill='%232F4A8A'/%3E%3Ccircle cx='21' cy='10.5' r='1.7' fill='%232F4A8A'/%3E%3Ccircle cx='21' cy='7' r='1.3' fill='%23E0A21B'/%3E%3C/svg%3E");
  opacity: .9;
}

.game-slot { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.game-slot .game-card { width: 100%; }

.game-card .card-kicker {
  font-size: clamp(10px, 2.2vmin, 12px);
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--madder);
  opacity: .85;
}

.story-link {
  align-self: center;
  border: none;
  background: none;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(11px, 2.5vmin, 13px);
  color: var(--indigo);
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.story-link:active { color: var(--ink); }

@media (max-width: 520px) {
  .game-card .card-kicker { font-size: 10px; }
}

/* the story card */
.story-card { text-align: left; max-width: min(520px, 92vw); }
.story-card .band { width: 100%; margin: 0 0 10px; }
.story-kicker {
  margin: 0;
  font-size: clamp(11px, 2.5vmin, 13px);
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--madder);
}
.story-card h2 { margin: 2px 0 10px; }
.story-body p {
  margin: 0 0 10px;
  font-size: clamp(15px, 3.5vmin, 18px);
  line-height: 1.5;
}
.story-names, .story-here {
  margin: 0 0 8px;
  font-size: clamp(13px, 3vmin, 15px);
  line-height: 1.45;
  color: var(--ink-soft);
}
.story-names b, .story-here b {
  color: var(--ink);
  margin-right: 4px;
}
.story-names[hidden], .story-ask[hidden] { display: none; }
.story-ask {
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(224, 162, 27, .16);
  border: 2px dashed rgba(184, 69, 47, .35);
  font-size: clamp(15px, 3.4vmin, 18px);
  line-height: 1.4;
}
.story-ask span {
  display: block;
  font-size: clamp(10px, 2.3vmin, 12px);
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--madder);
  margin-bottom: 2px;
}
.story-card .big-btn { display: block; margin: 16px auto 4px; }
.story-card .ghost-btn { display: block; margin: 0 auto; }
.story-card { padding: clamp(18px, 4vmin, 32px); }
.story-card .story-body p { font-size: clamp(14px, 3.1vmin, 17px); line-height: 1.45; margin-bottom: 8px; }
.story-card .story-ask { margin-top: 8px; }
.story-card .big-btn { margin-top: 12px; font-size: clamp(18px, 4.4vmin, 26px); }