/* Color emoji for browsers without one (the Tesla panel draws outlines otherwise).
   Twemoji Mozilla (COLRv0), subset to the emoji this app uses. See fonts/EMOJI-LICENSE.txt. */
@font-face {
  font-family: "TF Emoji";
  src: url("../fonts/emoji.woff2") format("woff2");
  font-display: swap;
}

/* Plate lettering. Open-license (OFL) fonts served from teslafun/fonts. */
@font-face { font-family: "TF Oswald"; font-weight: 600; font-display: swap; src: url("../fonts/oswald-600.woff2") format("woff2"); }
@font-face { font-family: "TF Bebas"; font-weight: 400; font-display: swap; src: url("../fonts/bebas-neue.woff2") format("woff2"); }
@font-face { font-family: "TF Barlow"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "TF Archivo"; font-weight: 400; font-display: swap; src: url("../fonts/archivo-black.woff2") format("woff2"); }
@font-face { font-family: "TF Baskerville"; font-weight: 700; font-display: swap; src: url("../fonts/libre-baskerville-700.woff2") format("woff2"); }
@font-face { font-family: "TF Kaushan"; font-weight: 400; font-display: swap; src: url("../fonts/kaushan-script.woff2") format("woff2"); }

:root {
  --font: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif, "TF Emoji";
  --emoji: "TF Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --ease: cubic-bezier(0.22, 1.2, 0.36, 1);
  --left: #3de0ff;
  --right: #ff7ad9;
  --gold: #ffd36e;
  --card: #1c2538;
  --plus: #e2ffef;
  --glass: rgba(255, 255, 255, 0.14);
  --glass-2: rgba(255, 255, 255, 0.07);
  --stroke: rgba(255, 255, 255, 0.28);
  --ink: #f6fbff;
  --muted: rgba(246, 251, 255, 0.72);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  --pad: max(12px, env(safe-area-inset-top, 0px));
  --gap: 10px;
}

[data-theme="day"] {
  --left: #0077aa;
  --right: #d44800;
  --gold: #e0a800;
  --card: #ffffff;
  --plus: #11804f;
  --glass: rgba(255, 255, 255, 0.5);
  --glass-2: rgba(255, 255, 255, 0.28);
  --stroke: rgba(255, 255, 255, 0.7);
  --ink: #16304a;
  --muted: rgba(22, 48, 74, 0.7);
  --shadow: 0 16px 40px rgba(70, 110, 160, 0.18);
}

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

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

[data-theme="day"] body,
[data-theme="day"] {
  background: #c9e7ff;
}

button {
  font-family: inherit;
}

.sky {
  position: fixed;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(900px 600px at 15% 10%, color-mix(in srgb, var(--left) 40%, transparent), transparent 55%),
    radial-gradient(800px 700px at 90% 90%, color-mix(in srgb, var(--right) 38%, transparent), transparent 50%),
    radial-gradient(1200px 500px at 50% 120%, rgba(160, 90, 255, 0.35), transparent 55%),
    linear-gradient(160deg, #070a16, #141a33 55%, #1b1230);
  animation: drift 22s var(--ease) infinite alternate;
}

[data-theme="day"] .sky {
  background:
    radial-gradient(800px 500px at 20% 0%, #fff6c4, transparent 50%),
    radial-gradient(900px 600px at 100% 100%, #ffd0b8, transparent 50%),
    radial-gradient(700px 400px at 70% 20%, #b8f3ff, transparent 45%),
    linear-gradient(180deg, #9ad6ff, #e8f6ff 40%, #ffe9d2);
}

.bloom {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.025) 0 8deg, transparent 8deg 18deg);
  mix-blend-mode: overlay;
  animation: spin 48s linear infinite;
  opacity: 0.45;
}

[data-theme="day"] .bloom {
  opacity: 0.22;
  mix-blend-mode: soft-light;
}

@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  to { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.app {
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--vh, 100dvh);
  max-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--pad) 14px 12px;
  gap: 10px;
  overflow: hidden;
}

/* Handheld: lay out on the virtual (cabin-proportioned) viewport, then shrink to the screen. */
html[data-scaled] .app,
html[data-scaled] .burst-layer {
  width: var(--vw);
  height: var(--vh);
  max-height: none;
  transform: scale(var(--ui-scale, 1));
  transform-origin: 0 0;
}

html[data-scaled] .burst-layer {
  inset: auto;
  left: 0;
  top: 0;
}

/* Fitted grids must never push their container wider; Fit measures the
   container, so the container has to be the boss. */
[data-fit] {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

/* ---------- chrome ---------- */

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

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-family: var(--emoji);
  font-size: 36px;
  line-height: 1;
  /* An outline on the glyph itself (four hard shadows), not a box behind it. */
  --edge: color-mix(in srgb, var(--ink) 85%, var(--left));
  filter:
    drop-shadow(1.2px 0 0 var(--edge)) drop-shadow(-1.2px 0 0 var(--edge))
    drop-shadow(0 1.2px 0 var(--edge)) drop-shadow(0 -1.2px 0 var(--edge))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.brand h1 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.chrome-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.theme-cycle,
.share-btn,
.tip-btn {
  min-height: 44px;
  padding: 0 14px;
  gap: 6px;
  font-weight: 650;
  white-space: nowrap;
}

.theme-cycle {
  min-width: 108px;
  color: var(--ink);
}

.theme-ico,
.tip-ico {
  font-family: var(--emoji);
  font-size: 1.15em;
  line-height: 1;
}

.share-btn { color: var(--ink); }
.share-ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

.tip-btn {
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05)),
    color-mix(in srgb, var(--gold) 38%, var(--glass));
  border-color: color-mix(in srgb, var(--gold) 55%, var(--stroke));
}

input,
textarea,
.name-edit {
  user-select: text !important;
  -webkit-user-select: text !important;
  pointer-events: auto;
}

.glass {
  background: var(--glass);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
}

.pill {
  border: 0;
  color: inherit;
  font: inherit;
  border-radius: 999px;
  min-height: 48px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), filter 0.18s var(--ease), background 0.2s;
}

.pill:active {
  transform: scale(0.96);
  filter: brightness(1.12);
}

.look-switch {
  display: flex;
  padding: 4px;
  border-radius: 999px;
  gap: 4px;
}

.look-switch button {
  min-width: 72px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.look-switch button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.look-switch button[aria-pressed="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 55%, transparent), color-mix(in srgb, var(--gold) 25%, transparent));
}

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

.name-edit {
  min-width: min(140px, 22vw);
  text-align: center;
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  color: inherit;
  font: inherit;
  font-weight: 700;
  min-height: 48px;
  padding: 0 14px;
}

.name-edit.left { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--left) 55%, transparent); }
.name-edit.right { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--right) 55%, transparent); }

/* Name bubble plus, once someone has won something, the trophy tally and a
   trash can for clearing both. */
.seat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.name-edit .wins {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 10px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 28%, transparent);
  color: inherit;
  font-size: 0.9em;
  font-weight: 800;
  letter-spacing: -0.02em;
  vertical-align: 1px;
}

.name-edit .wins .cup {
  font-family: var(--emoji);
  font-size: 0.95em;
}

.trash {
  border: 1px solid var(--stroke);
  border-radius: 999px;
  width: 40px;
  min-height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  color: inherit;
  font: inherit;
  font-family: var(--emoji);
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.12s var(--ease);
}

.trash:hover { opacity: 1; }
.trash:active { transform: scale(0.9); }

/* The pencil inside the bubble says "tap to rename" without a label. */
.name-edit .pencil {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--emoji);
  font-size: 0.85em;
  opacity: 0.8;
  vertical-align: -1px;
}

.name-big {
  width: 100%;
  min-height: 72px;
  font-size: 1.8rem;
  margin: 12px 0;
}

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

.screen {
  min-height: 0;
  min-width: 0;
  height: 100%;
  border-radius: 28px;
  padding: 14px;
  display: grid;
  animation: rise 0.5s var(--ease);
  overflow: hidden;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.play,
.setup {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.play.has-bar {
  grid-template-rows: auto auto minmax(0, 1fr);
}

/* The title sits on the screen's centre line: equal columns either side,
   each at least as wide as what it holds. */
.play-top {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.top-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  font-weight: 700;
}

.top-center > b {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(1.1rem, 2.4vh, 1.45rem);
  letter-spacing: -0.02em;
}

.setup .play-top { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }

.pill.tiny.back-btn {
  white-space: nowrap;
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.88rem;
}

.look-switch button { display: inline-flex; align-items: center; gap: 6px; }
.look-switch .look-ico { font-family: var(--emoji); }

.top-right {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.mode-label { color: var(--muted); font-weight: 700; white-space: nowrap; }

.count-pill {
  border-radius: 999px;
  padding: 0 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ---------- hub ---------- */

.hub {
  min-height: 0;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
  height: 100%;
}

.game-btn {
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 4px;
  border-radius: 24px;
  padding: 10px 12px 12px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(220px 140px at 80% 0%, color-mix(in srgb, var(--game-tint, var(--left)) 55%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--game-tint, var(--left)) 28%, var(--glass)), var(--glass-2));
  transition: transform 0.22s var(--ease), filter 0.22s var(--ease);
}

.game-btn:active { transform: scale(0.97); filter: brightness(1.1); }

.game-btn::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 65%);
  pointer-events: none;
}

.game-btn .game-ico {
  font-size: clamp(2.4rem, 12vh, 6.4rem);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.28));
  transition: transform 0.4s var(--ease);
}

.game-btn:hover .game-ico { transform: translateY(-3px) scale(1.04); }

.game-btn h3 {
  margin: 0;
  font-size: clamp(0.95rem, 1.7vw, 1.4rem);
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.game-btn h3 .game-tally {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--muted);
  margin-left: 0.3em;
  font-size: 0.85em;
}

.game-btn.open {
  cursor: default;
  background: var(--glass-2);
  border-style: dashed;
  box-shadow: none;
  opacity: 0.55;
}

.game-btn.open::after { display: none; }
.game-btn.open .game-ico {
  font-size: 1.4rem;
  color: var(--muted);
  filter: none;
  opacity: 0.5;
}

/* ---------- mode pickers ---------- */

.modes {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), var(--cell-w, 40px));
  grid-auto-rows: var(--cell-h, 40px);
  gap: 18px;
  justify-content: center;
  align-content: center;
  min-height: 0;
  padding: 8px;
}

.mode-card {
  border-radius: 28px;
  padding: 12px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 6px;
  min-height: 0;
  min-width: 0;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 70% 0%, color-mix(in srgb, var(--mode-tint, var(--left)) 55%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--mode-tint, var(--left)) 28%, var(--glass)), var(--glass-2));
  transition: transform 0.22s var(--ease), filter 0.22s var(--ease);
}

.mode-card:active { transform: scale(0.96); filter: brightness(1.1); }

.mode-ico {
  font-size: calc(var(--cell-w, 40px) * 0.42);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.3));
}

/* Drawn vehicles instead of an emoji: the starship stands tall, the truck
   sits wide, both fill the same space. */
.mode-art {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.3));
  animation: art-hover 3s ease-in-out infinite;
}

.mode-art svg { display: block; max-width: 100%; max-height: 100%; }
.mode-art.starship svg { height: 100%; width: auto; }
.mode-art.cybertruck svg { width: 88%; height: auto; max-height: 100%; }

@keyframes art-hover {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

.mode-card b {
  font-size: clamp(0.85rem, calc(var(--cell-w, 40px) * 0.085), 1.5rem);
  letter-spacing: -0.03em;
  line-height: 1.35;
  padding: 0 0.1em 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---------- alphabet ---------- */

.letter-stage {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), var(--cell-w, 40px));
  grid-auto-rows: var(--cell-h, 40px);
  justify-content: center;
  align-content: center;
  min-height: 0;
  height: 100%;
  gap: 16px;
  padding: 4px 6px 8px;
  overflow: hidden;
}

.letter-pad {
  border: 0;
  color: inherit;
  font: inherit;
  border-radius: 32px;
  min-height: 0;
  min-width: 0;
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  overflow: visible;
  isolation: isolate;
  touch-action: manipulation;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.4), transparent 38%),
    linear-gradient(160deg, color-mix(in srgb, var(--tint, var(--left)) 62%, #fff), color-mix(in srgb, var(--tint2, var(--right)) 34%, var(--glass)));
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.32), inset 0 2px 0 rgba(255, 255, 255, 0.65);
  transition: background 0.5s ease, box-shadow 0.3s;
}

.letter-pad:disabled { cursor: default; filter: saturate(0.6); }

.letter-pad::after {
  content: "";
  position: absolute;
  inset: 6px -44px -52px;
  z-index: 3;
}

.glyph-juice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 28px 22px rgba(0, 0, 0, 0.48));
  transform: perspective(920px) rotateX(11deg);
  transform-origin: 50% 62%;
}

.letter-pad.left .glyph-juice { transform: perspective(920px) rotateX(10deg) rotateY(9deg); }
.letter-pad.right .glyph-juice { transform: perspective(920px) rotateX(10deg) rotateY(-9deg); }

.progress {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 12px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.progress b {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.95));
  transition: width 0.4s var(--ease);
}

.glyph {
  font-size: clamp(7rem, 22vw, 14rem);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 0.85;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.45);
}

.score-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-size: clamp(2.6rem, 8vh, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
}

.score-big b { min-width: 1.2em; text-align: center; }
.score-big .l { color: var(--left); text-shadow: 0 6px 24px color-mix(in srgb, var(--left) 55%, transparent); }
.score-big .r { color: var(--right); text-shadow: 0 6px 24px color-mix(in srgb, var(--right) 55%, transparent); }
.score-big i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.5;
}

.ripple {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%) scale(1);
  animation: pop 0.7s var(--ease) forwards;
  pointer-events: none;
}

@keyframes pop {
  to { transform: translate(-50%, -50%) scale(40); opacity: 0; }
}

/* ---------- find it ---------- */

.find-board {
  display: grid;
  grid-template-columns: 3fr 4fr 3fr;
  gap: var(--gap);
  min-height: 0;
  overflow: visible;
}

.side-col {
  display: grid;
  place-items: center;
  min-width: 0;
  position: relative;
  z-index: 0;
}

/* Watermark tally: the swiped tiles land on top of it, so it stays a soft
   background number instead of fighting the cards for attention. */
.tally {
  font-size: clamp(5rem, 42vh, 18rem);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 1;
  opacity: 0.22;
  transition: transform 0.4s var(--ease);
}

.side-col.left .tally { color: var(--left); }
.side-col.right .tally { color: var(--right); }

.tiles {
  display: grid;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
  overflow: visible;
  padding: 6px 0;
}

.tile {
  --ico: clamp(2rem, calc(var(--row-h, 80px) * 0.78), 7.5rem);
  border-radius: 22px;
  display: grid;
  grid-template-columns: calc(var(--ico) + 8px) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  padding: 2px 14px 2px 8px;
  position: relative;
  z-index: 1;
  isolation: isolate;
  touch-action: none;
  overflow: visible;
  min-height: 0;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tile-color, #fff) 45%, transparent), var(--glass));
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.26),
    inset 0 2px 0 rgba(255, 255, 255, 0.78),
    inset 0 -14px 24px rgba(0, 40, 20, 0.14);
  transition: transform 0.45s var(--ease), width 0.45s var(--ease), box-shadow 0.28s var(--ease), filter 0.28s;
}

.tile.dragging { transition: none; z-index: 8; }

.tile::before {
  content: "";
  position: absolute;
  inset: 1px 10% auto 8%;
  height: 42%;
  border-radius: 20px 26px 80% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
  z-index: 0;
}

.tile.locked { cursor: default; }

/* Side columns are 3/10 of the board, the tile column 4/10. A claimed tile
   shrinks to 70% of the tile column and slides so it sits centred inside
   the winner's column, fully on screen. Percentages are of the new width. */
.tile.claimed-left {
  width: 70%;
  transform: translateX(calc(-103.57% - var(--gap))) rotate(-2deg);
  z-index: 6;
  filter: saturate(1.15);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--left) 80%, #fff), 0 18px 36px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.85);
}

.tile.claimed-right {
  width: 70%;
  transform: translateX(calc(146.43% + var(--gap))) rotate(2deg);
  z-index: 6;
  filter: saturate(1.15);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--right) 80%, #fff), 0 18px 36px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.85);
}

.tile.auto:not(.claimed-left):not(.claimed-right) {
  outline: 2px dashed color-mix(in srgb, var(--gold) 80%, white);
  outline-offset: -6px;
}

.tile .ico {
  width: var(--ico);
  height: 100%;
  display: grid;
  place-items: center;
  font-size: var(--ico);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.32));
  pointer-events: none;
  z-index: 0;
}

.duo {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  font-size: 0.62em;
  line-height: 1;
}

.duo span:first-child { transform: translate(6%, 8%); }
.duo span:last-child { transform: translate(-14%, -6%); }

.tile-title {
  position: relative;
  z-index: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(0.9rem, calc(var(--row-h, 80px) * 0.26), 1.6rem);
  line-height: 1.12;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tile.claimed-left .tile-title,
.tile.claimed-right .tile-title {
  font-size: clamp(0.8rem, calc(var(--row-h, 80px) * 0.22), 1.3rem);
}

/* ---------- how to play ----------
   The card that opens on every board. Tap anywhere to dismiss; the whole
   overlay is the button, so nothing on it needs precision. */
.help-btn {
  min-width: 40px;
  padding: 0 12px;
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1;
}
/* Fade only: the backdrop is the dismiss button, so it must cover every
   pixel from the first frame instead of sliding in from below. */
.overlay.help-overlay { cursor: pointer; animation: help-fade 0.3s var(--ease); }
@keyframes help-fade { from { opacity: 0; } to { opacity: 1; } }
.win-card.help-card {
  width: min(680px, 94%);
  padding: 26px 30px 22px;
  text-align: left;
}
.help-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.help-head .hint { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; }
.help-head > div { min-width: 0; flex: 1; }

/* Play-time badge, the way a board game box shows it. */
.help-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--tone) 70%, var(--ink));
  color: var(--ink);
  background: color-mix(in srgb, var(--tone) 18%, var(--glass));
  white-space: nowrap;
  align-self: flex-start;
  font-size: clamp(0.85rem, 2vh, 1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.help-time .clock { width: 1.6em; height: 1.6em; display: block; }
html[data-shape="phone"] .help-time { padding: 4px 9px 4px 6px; font-size: 0.75rem; gap: 5px; }
html[data-short] .help-time { padding: 4px 9px 4px 6px; font-size: 0.8rem; }
.help-head h2 { margin: 0; font-size: clamp(1.7rem, 5vh, 2.6rem); line-height: 1; }
.help-ico {
  font-family: var(--emoji);
  font-size: clamp(2.6rem, 8vh, 4rem);
  line-height: 1;
  width: 1.2em;
  height: 1.2em;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: color-mix(in srgb, var(--tone) 22%, transparent);
  flex: none;
}
.help-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.help-lines li {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--glass) 70%, transparent);
  border: 1px solid var(--stroke);
}
.help-glyph {
  font-family: var(--emoji);
  font-size: 1.9rem;
  line-height: 1;
  text-align: center;
}
.help-text { font-size: clamp(1rem, 2.4vh, 1.3rem); line-height: 1.35; font-weight: 600; text-wrap: pretty; }
.help-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.help-tap { color: var(--muted); font-weight: 700; animation: pulse-soft 1.6s ease-in-out infinite; }
@keyframes pulse-soft { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.notice-card .info-text { text-align: left; margin: 0 0 6px; }

.welcome-card { max-height: 96vh; overflow: auto; }
.welcome-card .help-text b { font-weight: 800; }
html[data-short] .win-card.welcome-card { padding: 14px 18px 12px; }
html[data-short] .welcome-card .help-head { margin-bottom: 8px; }
html[data-short] .welcome-card .help-lines { gap: 5px; }
html[data-short] .welcome-card .help-lines li { padding: 5px 10px; }
html[data-short] .welcome-card .help-text { font-size: 0.8rem; line-height: 1.25; }
html[data-short] .welcome-card .help-glyph { font-size: 1.3rem; }
html[data-short] .welcome-actions { margin-top: 8px; gap: 6px; }
.welcome-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.welcome-actions .quiet { opacity: 0.75; }
html[data-shape="phone"] .welcome-actions { gap: 8px; }
html[data-shape="phone"] .welcome-card .help-lines { gap: 8px; }
html[data-shape="phone"] .welcome-card .help-text { font-size: 0.85rem; }
.notice-card .help-foot { justify-content: center; }
html[data-shape="phone"] .win-card.help-card { padding: 20px 18px 16px; width: 94%; }
html[data-shape="phone"] .help-head { gap: 12px; }
html[data-shape="phone"] .help-ico { font-size: 2.2rem; border-radius: 16px; }
html[data-shape="phone"] .help-lines li { padding: 8px 10px; gap: 8px; grid-template-columns: 2em minmax(0, 1fr); }
html[data-shape="phone"] .help-glyph { font-size: 1.5rem; }
html[data-shape="phone"] .help-text { font-size: 0.98rem; }
html[data-shape="phone"] .help-foot { justify-content: center; }
html[data-short] .win-card.help-card { padding: 14px 18px 12px; }
html[data-short] .help-head { margin-bottom: 8px; }
html[data-short] .help-head h2 { font-size: 1.5rem; }
html[data-short] .help-ico { font-size: 2rem; border-radius: 14px; }
html[data-short] .help-lines { gap: 6px; }
html[data-short] .help-lines li { padding: 6px 10px; }
html[data-short] .help-glyph { font-size: 1.4rem; }
html[data-short] .help-text { font-size: 0.95rem; line-height: 1.25; }
html[data-short] .help-foot { margin-top: 8px; }
html[data-short] .help-overlay .help-card { animation: none; }

/* The ? on a rare find opens a card that says what to look for. */
.tile-help {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  z-index: 3;
  width: clamp(28px, calc(var(--row-h, 80px) * 0.4), 40px);
  height: clamp(28px, calc(var(--row-h, 80px) * 0.4), 40px);
  border-radius: 50%;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 800;
  font-size: clamp(0.9rem, calc(var(--row-h, 80px) * 0.24), 1.3rem);
  line-height: 1;
  color: #2a1d00;
  background: var(--gold);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  cursor: pointer;
  touch-action: manipulation;
}

.tile-help:active { transform: translateY(-50%) scale(0.9); }
.tile:has(.tile-help) .tile-title { padding-right: clamp(30px, calc(var(--row-h, 80px) * 0.45), 44px); }

.info-card { max-width: min(560px, 92vw); text-align: center; }
.info-card .info-cup { font-size: clamp(3rem, 12vh, 5.5rem); height: 1.15em; display: grid; place-items: center; margin: 0 auto 10px; }
.info-card .info-cup .duo { font-size: 0.72em; align-items: center; }
.info-card .hint { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; }
html[data-short] .info-card { padding: 18px 20px 16px; }
html[data-short] .info-card .info-cup { font-size: 2.6rem; margin-bottom: 4px; }
html[data-short] .info-card .info-text { font-size: 0.95rem; margin: 2px 0 6px; }
.info-card h2 { font-size: clamp(1.6rem, 5vh, 2.4rem); }
.info-card .info-text { font-size: clamp(1rem, 2.2vh, 1.25rem); line-height: 1.45; margin: 4px 0 8px; }

.hint { color: var(--muted); font-size: 0.82rem; }

/* ---------- overlay ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #000 42%, transparent);
  backdrop-filter: blur(10px) saturate(0.8);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  animation: rise 0.4s var(--ease);
}

.win-card {
  --tone: var(--ink);
  position: relative;
  width: min(560px, 92%);
  padding: 30px 28px 26px;
  border-radius: 32px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, var(--tone) 28%, transparent), transparent 70%),
    color-mix(in srgb, var(--card) 55%, var(--glass));
  animation: win-pop 0.55s var(--ease);
}

.win-card.left { --tone: var(--left); }
.win-card.right { --tone: var(--right); }
.win-card.team { --tone: #ffb02e; }

.win-cup {
  font-size: clamp(3.4rem, 12vh, 5.6rem);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.3));
  animation: cup-bounce 0.9s var(--ease) 0.1s both;
}

.win-card h2 {
  margin: 0 0 8px;
  font-size: clamp(2.2rem, 6vh, 3.2rem);
  letter-spacing: -0.04em;
  color: var(--tone);
}

@keyframes win-pop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: none; }
}

@keyframes cup-bounce {
  0% { transform: translateY(-40px) scale(0.6); opacity: 0; }
  50% { transform: translateY(6px) scale(1.08); opacity: 1; }
  75% { transform: translateY(-4px) scale(0.98); }
  100% { transform: none; }
}
.actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }

.primary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.08));
  min-width: 160px;
}

.tiny { min-height: 44px; min-width: 44px; border-radius: 16px; }

/* ---------- end of game banner ---------- */

/* Sits in the top bar's row so the final board stays fully visible below
   it. Everything else on the screen is locked until Games or Play again. */
.win-bar {
  --tone: var(--ink);
  order: -1;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: clamp(60px, 10vh, 84px);
  padding: 8px 16px 8px 14px;
  border-radius: 22px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 30%, transparent), color-mix(in srgb, var(--tone) 8%, transparent)), var(--glass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 75%, #fff), 0 14px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  animation: rise 0.45s var(--ease);
}

.win-bar.left { --tone: var(--left); }
.win-bar.right { --tone: var(--right); }
.win-bar.team { --tone: #ffb02e; }

.win-bar .win-cup {
  font-size: clamp(2.2rem, 7vh, 3.6rem);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.3));
}

.win-bar .win-text { min-width: 0; display: grid; gap: 2px; }

.win-bar h2 {
  margin: 0;
  font-size: clamp(1.4rem, 4.8vh, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--tone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-bar .win-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-weight: 700;
  font-size: clamp(0.95rem, 2.6vh, 1.25rem);
  color: var(--muted);
}

.win-bar .win-detail { color: var(--ink); font-weight: 800; }
.win-bar .actions { margin: 0; flex-wrap: nowrap; }
.win-bar .primary { min-width: 120px; }

.screen:has(.win-bar) .play-top { display: none; }
.screen:has(.win-bar) > :not(.win-bar) { pointer-events: none; }
.screen:has(.win-bar) .risk-hit,
.screen:has(.win-bar) .spy-hit { filter: saturate(0.5); }

/* ---------- tip jar ---------- */

.tip-card {
  --tone: var(--gold);
  width: min(760px, 94%);
  max-height: calc(var(--vh, 100dvh) - 24px);
  overflow: auto;
  padding: 22px 26px 22px;
}

.tip-card h2 { margin: 0 0 4px; font-size: clamp(1.8rem, 5vh, 2.6rem); }
.tip-card .tip-cup { font-size: clamp(2.4rem, 8vh, 3.6rem); }

.tip-x {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}

.tip-note {
  margin: 0 auto 14px;
  max-width: 44ch;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.35;
}

.tip-amounts {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  margin-bottom: 14px;
}

.tip-chip {
  min-width: 72px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 750;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.tip-chip[aria-pressed="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 70%, #fff), color-mix(in srgb, var(--gold) 85%, #000 10%));
  color: #2a1d00;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--gold) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

.tip-ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tip-way {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 22px;
  text-decoration: none;
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.15s var(--ease), filter 0.15s;
}

.tip-way:active { transform: scale(0.97); filter: brightness(1.1); }
.tip-way.venmo { background: linear-gradient(180deg, #2f9bf0, #1c7fd2); }
.tip-way.paypal { background: linear-gradient(180deg, #1f4bb8, #142f7a); }
.tip-way-name { font-weight: 850; font-size: 1.35rem; letter-spacing: -0.02em; }
.tip-way-to { font-size: 0.92rem; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tip-way-amt {
  margin: 8px auto 0;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-weight: 750;
}

/* ---------- share card ---------- */

.share-card { --tone: #ff7ad9; }

.share-preview {
  display: grid;
  gap: 4px;
  margin: 0 auto 14px;
  max-width: 56ch;
  padding: 12px 16px;
  border-radius: 18px;
  text-align: left;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--stroke);
  font-size: 0.92rem;
  line-height: 1.3;
}

.share-preview b { font-size: 1.05rem; }
.share-preview span { color: var(--ink); }
.share-preview em { color: var(--muted); font-style: normal; font-size: 0.85rem; }

.share-ways {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.share-way { text-decoration: none; min-height: 50px; padding: 0 20px; font-weight: 750; }
.share-way .share-ico { margin-right: 4px; }

.share-note {
  margin: 12px auto 0;
  padding: 8px 16px;
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--tone) 22%, transparent);
  font-weight: 750;
  animation: rise 0.3s var(--ease);
}

.share-scan .tip-qr figcaption { max-width: 34ch; text-align: center; color: var(--muted); }
.share-scan .tip-qr svg { width: clamp(110px, 22vh, 170px); }

.share-foot { margin-top: 14px; font-size: 0.9rem; }
.share-stats { color: var(--muted); text-decoration: none; font-weight: 700; }
.share-stats:hover { color: var(--ink); }

.share-ask .win-cup { font-size: clamp(2.4rem, 8vh, 3.6rem); }
.share-ask .actions .share-ico { margin-right: 4px; }

html[data-short] .share-scan .tip-qr svg { width: clamp(90px, 20vh, 130px); }
html[data-shape="phone"] .share-preview { font-size: 0.85rem; }

.tip-scan {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
}

.tip-scan-hint { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }

.tip-qrs {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.tip-qr {
  margin: 0;
  display: grid;
  gap: 4px;
  justify-items: center;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--muted);
}

.tip-qr svg {
  width: clamp(84px, 16vh, 132px);
  height: auto;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* Short landscape (phone dock, climate bar up): head on the left, ways + QR on the right. */
html[data-shape="dock"] .tip-card {
  width: min(880px, 96%);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: center;
  text-align: center;
}
html[data-shape="dock"] .tip-card .tip-cup { font-size: 2.2rem; }
html[data-shape="dock"] .tip-card h2 { font-size: 1.7rem; }
html[data-shape="dock"] .tip-note { font-size: 0.88rem; margin-bottom: 10px; }
html[data-shape="dock"] .tip-amounts { margin-bottom: 0; }
html[data-shape="dock"] .tip-way { padding: 10px 12px; }
html[data-shape="dock"] .tip-way-name { font-size: 1.15rem; }
html[data-shape="dock"] .tip-way-amt { margin-top: 5px; padding: 4px 12px; }
html[data-shape="dock"] .tip-scan { margin-top: 10px; padding-top: 8px; }
html[data-shape="dock"] .tip-scan-hint { margin-bottom: 6px; font-size: 0.82rem; }
html[data-shape="dock"] .tip-qr svg { width: 84px; }
html[data-shape="phone"] .tip-card { display: block; padding: 18px 16px; }
html[data-shape="phone"] .tip-ways { grid-template-columns: 1fr; gap: 8px; }
html[data-shape="phone"] .tip-way { padding: 10px 14px; grid-template-columns: 1fr auto; text-align: left; align-items: center; }
html[data-shape="phone"] .tip-way-name { grid-column: 1; }
html[data-shape="phone"] .tip-way-to { grid-column: 1; }
html[data-shape="phone"] .tip-way-amt { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
html[data-shape="phone"] .tip-qr svg { width: 96px; }

/* ---------- bursts ---------- */

.burst-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}

.burst-bit {
  position: fixed;
  left: 0;
  top: 0;
  line-height: 1;
  font-family: var(--emoji);
  transform: translate(-50%, -50%) scale(var(--s, 1));
  animation: burst-fly 1.4s cubic-bezier(0.12, 0.7, 0.2, 1) 40ms both;
  will-change: transform, opacity;
}

.burst-huge { z-index: 51; }

@keyframes burst-fly {
  0% {
    transform: translate(-50%, -50%) scale(calc(var(--s, 1) * 0.4));
    opacity: 0;
  }
  7% { opacity: 1; }
  18% {
    transform: translate(calc(-50% + var(--dx) * 0.22), calc(-50% + var(--dy) * 0.22)) rotate(calc(var(--rot) * 0.2)) scale(var(--s, 1));
    opacity: 1;
  }
  78% { opacity: 1; }
  to {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(var(--s-end, 0.9));
    opacity: 0;
  }
}

/* ---------- bingo ---------- */

.bingo-board {
  display: grid;
  grid-template-columns: repeat(4, var(--cell-w, 40px));
  grid-auto-rows: var(--cell-h, 40px);
  gap: 8px;
  justify-content: center;
  align-content: center;
  min-height: 0;
}

.bingo-duel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-height: 0;
}

.bingo-duel .bingo-board.left { border-radius: 24px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--left) 45%, transparent); padding: 8px; }
.bingo-duel .bingo-board.right { border-radius: 24px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--right) 45%, transparent); padding: 8px; }

/* A card and, under it, that card's one-time shuffle. */
.bingo-seat {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 6px;
  min-height: 0;
  min-width: 0;
}

.bingo-seat .bingo-board { width: 100%; }
.shuffle-btn { min-height: 36px; padding: 0 14px; font-size: 0.88rem; }
.shuffle-btn:disabled { opacity: 0.5; cursor: default; }

/* The free space: a gold-dashed square that is always a chip for the taking. */
.bingo-cell.free {
  background: linear-gradient(180deg, rgba(255, 214, 90, 0.22), rgba(255, 214, 90, 0.08));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent);
}

.bingo-cell.free .cap { color: var(--gold); }

.bingo-cell {
  position: relative;
  border-radius: 18px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 2px;
  padding: 6px 6px 8px;
  min-height: 0;
  min-width: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
  transition: transform 0.2s var(--ease);
}

.bingo-cell:active { transform: scale(0.95); }

.bingo-cell .ico {
  font-size: calc(var(--cell-w, 40px) * 0.5);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
}

.bingo-cell .cap {
  font-size: clamp(9px, calc(var(--cell-w, 40px) * 0.105), 18px);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bingo-duel .bingo-cell { padding: 4px 4px 6px; gap: 1px; }
.bingo-duel .bingo-cell .ico { font-size: calc(var(--cell-w, 40px) * 0.54); }
.bingo-duel .bingo-cell .cap {
  font-size: clamp(9px, calc(var(--cell-w, 40px) * 0.135), 24px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.pill.seat-left { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--left) 70%, transparent); }
.pill.seat-right { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--right) 70%, transparent); }

.link-toggle { gap: 6px; padding: 0 12px; color: var(--muted); }
.link-toggle[aria-pressed="true"] { color: var(--ink); background: color-mix(in srgb, var(--gold) 30%, var(--glass)); }
.link-toggle .link-ico { font-family: var(--emoji); font-size: 1.1em; line-height: 1; }
.link-toggle[aria-pressed="false"] .link-ico { filter: grayscale(1); opacity: 0.6; }

.chip-red {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45), transparent 42%),
    radial-gradient(circle, rgba(232, 40, 60, 0.62), rgba(180, 20, 40, 0.72));
  box-shadow: 0 8px 18px rgba(120, 0, 20, 0.35), inset 0 -4px 10px rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  opacity: 0;
  transform: scale(1.6) translateY(-30%);
  pointer-events: none;
  transition: transform 0.32s var(--ease), opacity 0.2s;
}

.bingo-cell.marked .chip-red { opacity: 1; transform: none; }
.bingo-cell.marked { cursor: default; }

/* ---------- plate collector ---------- */

.lp-board {
  --lp-gap: 10px;
  display: grid;
  place-items: center;
  min-height: 0;
  min-width: 0;
  padding: 6px;
  gap: var(--lp-gap);
}

.lp-rows {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lp-gap);
  width: calc(var(--cols, 10) * var(--cell-w, 40px) + (var(--cols, 10) - 1) * var(--lp-gap));
  max-width: 100%;
}

.lp-cell {
  flex: 0 0 var(--cell-w, 40px);
  width: var(--cell-w, 40px);
  height: var(--cell-h, 40px);
}

.lp-cell {
  flex: 0 0 var(--cell-w, 40px);
  width: var(--cell-w, 40px);
  height: var(--cell-h, 40px);
}

.lp-cell {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform 0.35s var(--ease), filter 0.3s;
  transform: scale(0.94);
  filter: saturate(0.4) brightness(0.72);
  z-index: 1;
}

.lp-plate {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  min-height: 0;
  border-radius: 8%/16%;
  overflow: hidden;
}

.lp-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.55), inset 0 -2px 4px rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(5, 8, 20, 0.28), rgba(5, 8, 20, 0.12));
  pointer-events: none;
  transition: opacity 0.3s;
}

.plate-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lp-cell.got {
  transform: scale(1.08) translateY(-2%);
  filter: none;
  z-index: 3;
}

.lp-cell.got .lp-plate::after { opacity: 0; }

.lp-cell.got .lp-plate {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--gold),
    0 14px 26px rgba(0, 0, 0, 0.4);
  animation: pop-out 0.5s var(--ease);
}

@keyframes pop-out {
  0% { transform: scale(0.94); }
  55% { transform: scale(1.12); }
  100% { transform: none; }
}

/* ---------- car collector ---------- */

.cb-board {
  --lp-gap: 10px;
  display: grid;
  place-items: center;
  min-height: 0;
  min-width: 0;
  padding: 6px;
  gap: var(--lp-gap);
}

.cb-cell {
  position: relative;
  flex: 0 0 var(--cell-w, 40px);
  width: var(--cell-w, 40px);
  height: var(--cell-h, 40px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  padding: calc(var(--cell-w, 40px) * 0.07) calc(var(--cell-w, 40px) * 0.07) calc(var(--cell-w, 40px) * 0.05);
  border: 0;
  border-radius: 18%;
  background: linear-gradient(180deg, #fbfcfe, #dfe5ee);
  color: #1d2330;
  font: inherit;
  cursor: pointer;
  transition: transform 0.35s var(--ease), filter 0.3s, box-shadow 0.3s;
  transform: scale(0.94);
  filter: saturate(0.25) brightness(0.62);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.35);
}

.cb-badge {
  display: grid;
  place-items: center;
  min-height: 0;
}

.make-svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.cb-name {
  font-size: clamp(0.5rem, calc(var(--cell-w, 40px) * 0.11), 0.95rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: #4a5568;
}

.cb-board.dense .cb-name { display: none; }

.cb-cell.emo { background: linear-gradient(180deg, #f6fbf5, #d9e8dc); }

.cb-emo {
  font-family: var(--emoji);
  font-size: calc(var(--cell-w, 40px) * 0.5);
  line-height: 1;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
}

.cb-cell.got {
  transform: scale(1.08) translateY(-2%);
  filter: none;
  z-index: 3;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--tint, var(--gold)),
    0 14px 26px rgba(0, 0, 0, 0.4);
  animation: pop-out 0.5s var(--ease);
}

/* ---------- bug collector ---------- */

.bug-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
}

.bug-side {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  min-width: 0;
  padding: 8px;
  border-radius: 24px;
  background: var(--glass-2);
  border: 1px solid var(--stroke);
}

.bug-side.left { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--left) 40%, transparent); }
.bug-side.right { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--right) 40%, transparent); }

.lot-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 8px;
  min-width: 0;
}

.lot-label {
  font-weight: 700;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lot-total {
  font-size: clamp(1.4rem, 4.5vh, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.lot-value.left .lot-label { color: var(--left); }
.lot-value.right .lot-label { color: var(--right); }
.lot-total.bump { animation: bump 0.4s var(--ease); }

.bug-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  height: clamp(130px, 28vh, 220px);
}

.bug-btn {
  border: 0;
  color: inherit;
  font: inherit;
  border-radius: 18px;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  gap: 4px;
  padding: 4px 6px 4px 4px;
  cursor: pointer;
  text-align: left;
  background: linear-gradient(180deg, color-mix(in srgb, #c4e87a 35%, var(--glass)), var(--glass-2));
  transition: transform 0.12s var(--ease), background 0.25s;
  touch-action: manipulation;
}

.bug-btn:active { transform: scale(0.92); background: linear-gradient(180deg, color-mix(in srgb, #c4e87a 65%, var(--glass)), var(--glass-2)); }

.bug-art {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  height: 100%;
}

.vw {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.3));
}

.bug-txt {
  display: grid;
  line-height: 1.1;
  min-width: 0;
  max-width: 100%;
}

.bug-txt b,
.bug-txt i,
.bug-txt em {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.bug-txt b { font-size: clamp(0.72rem, 1.9vh, 1rem); font-weight: 800; letter-spacing: -0.02em; white-space: normal; text-wrap: balance; }
.bug-txt i { font-size: clamp(0.6rem, 1.5vh, 0.8rem); font-style: normal; opacity: 0.75; }
.bug-txt em { font-size: clamp(0.7rem, 1.8vh, 0.95rem); font-style: normal; font-weight: 800; color: var(--gold); }

/* The parking lot: asphalt, painted stalls, one Volkswagen per stall. */
.lot {
  --lp-gap: 4px;
  display: grid;
  place-items: start center;
  min-height: 0;
  min-width: 0;
  padding: 8px 6px;
  gap: var(--lp-gap);
  border-radius: 16px;
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 255, 255, 0.05) 14px 15px),
    linear-gradient(180deg, #3b4048, #2a2e35);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.lot-rows {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lp-gap);
  width: calc(var(--cols, 4) * var(--cell-w, 40px) + (var(--cols, 4) - 1) * var(--lp-gap));
  max-width: 100%;
}

.spot {
  position: relative;
  flex: 0 0 var(--cell-w, 40px);
  width: var(--cell-w, 40px);
  height: var(--cell-h, 40px);
  display: grid;
  place-items: end center;
  border-left: 2px solid rgba(255, 244, 200, 0.75);
  border-right: 2px solid rgba(255, 244, 200, 0.75);
  border-top: 2px solid rgba(255, 244, 200, 0.75);
  border-radius: 3px 3px 0 0;
  min-width: 0;
  min-height: 0;
}

.spot.empty::after {
  content: "P";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: calc(var(--cell-h, 40px) * 0.5);
  color: rgba(255, 244, 200, 0.18);
}

.parked {
  display: block;
  width: 92%;
  height: 92%;
  animation: park-in 0.5s var(--ease);
}

.parked .vw { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); }

@keyframes park-in {
  0% { transform: translateX(-30%) scale(0.8); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* ---------- punch ---------- */

.punch-title {
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  letter-spacing: -0.03em;
}

.punch-board {
  display: grid;
  grid-template-columns: repeat(3, var(--cell-w, 40px));
  grid-auto-rows: var(--cell-h, 40px);
  gap: 12px;
  justify-content: center;
  align-content: center;
  min-height: 0;
}

.punch-cell {
  position: relative;
  border-radius: 24px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 4px;
  padding: 8px 10px 12px;
  min-height: 0;
  min-width: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(255, 255, 255, 0.38), transparent 70%),
    var(--glass);
  transition: transform 0.16s var(--ease), filter 0.3s, box-shadow 0.3s;
}

.punch-cell:active { transform: scale(0.92); }

.punch-cell .ico {
  font-size: calc(var(--cell-w, 40px) * 0.46);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s var(--ease), filter 0.3s;
}

.punch-cell .cap {
  font-size: clamp(0.8rem, calc(var(--cell-w, 40px) * 0.1), 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.punch-cell.out {
  cursor: default;
  transform: scale(0.94);
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(0, 0, 0, 0.2), transparent 70%),
    color-mix(in srgb, #000 22%, var(--glass));
  box-shadow: inset 0 8px 18px rgba(0, 0, 0, 0.5), inset 0 -2px 0 rgba(255, 255, 255, 0.2);
  animation: punched 0.45s var(--ease);
}

.punch-cell.out .ico { filter: grayscale(0.7) brightness(0.7); transform: scale(0.88); }
.punch-cell.out .cap { opacity: 0.55; }

@keyframes punched {
  0% { transform: scale(1); }
  30% { transform: scale(0.86) rotate(-2deg); }
  60% { transform: scale(0.97) rotate(1.5deg); }
  100% { transform: scale(0.94); }
}

.fx-fist {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
  font-family: var(--emoji);
  font-size: calc(var(--cell-w, 40px) * 0.62);
  line-height: 1;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
  animation: slam 0.42s var(--ease);
}

@keyframes slam {
  0% { transform: scale(2.4) rotate(-20deg); opacity: 0; }
  55% { transform: scale(0.9) rotate(4deg); opacity: 1; }
  100% { transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- i spy ---------- */

.spy-board {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 0;
  padding-bottom: 4px;
}

.spy-side {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  min-height: 0;
  align-items: stretch;
}

.spy-hit {
  width: clamp(120px, 21vw, 320px);
  min-height: 0;
  border: 0;
  border-radius: 28px;
  color: inherit;
  font: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.14s var(--ease), filter 0.2s;
}

.spy-hit:active { transform: scale(0.94); filter: brightness(1.15); }
.spy-hit.left { background: linear-gradient(180deg, color-mix(in srgb, var(--left) 55%, #fff), color-mix(in srgb, var(--left) 30%, var(--glass))); }
.spy-hit.right { background: linear-gradient(180deg, color-mix(in srgb, var(--right) 55%, #fff), color-mix(in srgb, var(--right) 30%, var(--glass))); }

.spy-hit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  aspect-ratio: 1;
  margin: -39% 0 0 -39%;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.5);
  animation: pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.35; }
  50% { transform: scale(1.06); opacity: 0.85; }
}

.bullseye {
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.35));
}

.thermo {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  width: 46px;
  min-height: 0;
  --fill: var(--left);
}

.thermo.right { --fill: var(--right); }

.thermo .tube {
  position: relative;
  width: 22px;
  height: 100%;
  min-height: 0;
  border-radius: 999px 999px 0 0;
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  border-bottom: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.thermo .tube::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, 0.35) calc(10% - 1px) 10%);
  pointer-events: none;
  z-index: 2;
}

.thermo .tube b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--p, 0) * 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fill) 70%, #fff), var(--fill));
  box-shadow: 0 0 16px color-mix(in srgb, var(--fill) 70%, transparent);
  transition: height 0.45s var(--ease);
}

.thermo .bulb {
  width: 42px;
  height: 42px;
  margin-top: -4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fill) 60%, #fff), var(--fill) 70%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--fill) 45%, transparent), inset 0 -3px 8px rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.spy-stage {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 18px;
  min-height: 0;
  border-radius: 28px;
  gap: 8px;
  animation: rise 0.35s var(--ease);
}

.spy-ico {
  font-size: clamp(4.5rem, 24vh, 11rem);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.35));
}

.spy-stage h2 {
  margin: 0;
  font-size: clamp(1.6rem, 4.2vw, 3.4rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

/* ---------- oregon trail ---------- */

.trail-board {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr;
  gap: 12px;
  min-height: 0;
}

.trail-side {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background: var(--glass-2);
  border: 1px solid var(--stroke);
}

.trail-side.left { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--left) 40%, transparent); }
.trail-side.right { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--right) 40%, transparent); }

.trail-side .pen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.trail-side .pen::after { content: ""; }

.herd-count {
  position: relative;
  z-index: 1;
  font-size: clamp(2.4rem, 8vh, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  text-align: center;
  padding-top: 8px;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.herd-count.left { color: var(--left); }
.herd-count.right { color: var(--right); }
.herd-count.bump { animation: bump 0.4s var(--ease); }

@keyframes bump {
  30% { transform: scale(1.18); }
}

.stock-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 10px;
  height: clamp(124px, 25vh, 230px);
}

/* Wildlife: one small row right under the livestock. */
.wild-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  padding: 0 10px;
  height: clamp(44px, 8vh, 68px);
}

.wild-btn {
  border: 0;
  color: inherit;
  font: inherit;
  border-radius: 14px;
  min-height: 0;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 2px;
  cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, #c4e87a 40%, var(--glass)), var(--glass-2));
  transition: transform 0.12s var(--ease), background 0.25s;
  touch-action: manipulation;
}

.wild-btn:active { transform: scale(0.88); background: linear-gradient(180deg, color-mix(in srgb, #c4e87a 65%, var(--glass)), var(--glass-2)); }

.wild-btn span {
  font-size: clamp(1.3rem, 4.6vh, 2.3rem);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
}

.stock-btn {
  border: 0;
  color: inherit;
  font: inherit;
  border-radius: 20px;
  min-height: 0;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 4px;
  cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, #7ef0c3 45%, var(--glass)), var(--glass-2));
  transition: transform 0.12s var(--ease), background 0.25s;
  touch-action: manipulation;
}

.stock-btn:active { transform: scale(0.9); background: linear-gradient(180deg, color-mix(in srgb, #7ef0c3 70%, var(--glass)), var(--glass-2)); }

.stock-btn span {
  font-size: clamp(2rem, 8vh, 4rem);
  line-height: 1;
  font-family: var(--emoji);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

/* Running "+n" for a burst of taps, over everything on that side. */
.tap-pop {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  pointer-events: none;
  opacity: 0;
}

.tap-pop.show { animation: tap-pop 0.9s var(--ease) forwards; }

.tap-pop b {
  font-size: clamp(4rem, 22vh, 11rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 3px color-mix(in srgb, var(--plus) 80%, #000);
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 40px color-mix(in srgb, #7ef0c3 70%, transparent);
}

.tap-pop.left b { -webkit-text-stroke-color: var(--left); }
.tap-pop.right b { -webkit-text-stroke-color: var(--right); }

.tap-pop span {
  font-family: var(--emoji);
  font-size: clamp(2rem, 9vh, 4.5rem);
  line-height: 1;
  margin-top: -0.2em;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}

@keyframes tap-pop {
  0% { opacity: 0; transform: scale(0.6); }
  12% { opacity: 1; transform: scale(1.08); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15) translateY(-10px); }
}

/* Bridge on top, the two cemeteries under it, each on its own side, and the
   road rolling by underneath. The buttons take most of the column so they
   are easy to hit; the road gets what is left. */
.trail-mid {
  display: grid;
  grid-template-rows: minmax(0, 1.7fr) minmax(40px, 1fr);
  gap: 10px;
  min-height: 0;
  padding: 4px 0;
}

.trail-events {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "b b" "l r";
  gap: 10px;
  min-height: 0;
  min-width: 0;
}

.bridge-btn { grid-area: b; }
.grave-btn.left { grid-area: l; }
.grave-btn.right { grid-area: r; }

.grave-btn,
.bridge-btn {
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 22px;
  display: grid;
  place-items: center;
  min-height: 0;
  min-width: 0;
  container-type: size;
  line-height: 1;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
  transition: transform 0.16s var(--ease);
}

.grave-btn > span,
.bridge-btn > span {
  font-family: var(--emoji);
  font-size: min(58cqw, 62cqh);
  line-height: 1;
}

.grave-btn:active,
.bridge-btn:active { transform: scale(0.92); }

.bridge-btn { background: linear-gradient(180deg, color-mix(in srgb, #4aa3ff 55%, var(--glass)), color-mix(in srgb, #4aa3ff 25%, var(--glass-2))); }
.grave-btn { background: linear-gradient(180deg, color-mix(in srgb, #3a3a4a 55%, var(--glass)), color-mix(in srgb, #1b1b1b 45%, var(--glass-2))); }

.trail-road {
  position: relative;
  min-height: 0;
  border-radius: 999px;
  background: color-mix(in srgb, #000 18%, transparent);
  width: 34px;
  justify-self: center;
  overflow: hidden;
}

.trail-road::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--gold) 0 22px, transparent 22px 44px);
  opacity: 0.7;
  animation: road 1.6s linear infinite;
}

@keyframes road {
  to { transform: translate(-50%, 44px); }
}

/* ---------- risk it ---------- */

.risk-board {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 14px;
  min-height: 0;
}

.risk-side {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.5fr);
  gap: 10px;
  min-height: 0;
}

.risk-side.right { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.55fr); }

.risk-stack {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
}

.risk-hit { width: auto; min-width: 0; }
.risk-hit:disabled { filter: saturate(0.3) brightness(0.7); cursor: default; }

.bank {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 6px;
  min-height: 0;
  justify-items: center;
  align-items: end;
  padding: 6px 4px 4px;
}

.pig-wrap {
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.pig {
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: visible;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.35));
}

.pig-glow ellipse { opacity: 0; }
.bank.glow .pig-glow ellipse { animation: pig-glow 1s var(--ease); }
.bank.glow .pig-body { animation: pig-bright 1s var(--ease); }

@keyframes pig-glow {
  0% { opacity: 0; transform: scale(1); }
  20% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.12); transform-origin: center; }
}

@keyframes pig-bright {
  20% { filter: brightness(1.7) saturate(1.3); }
  100% { filter: none; }
}

/* Newly stacked coins drop in through the slot; older ones stay put. */
.pig .coin {
  transform-box: fill-box;
  transform-origin: center;
  animation: coin-land 0.55s var(--ease) both;
}

@keyframes coin-land {
  0% { transform: translateY(-70px) scale(0.6); opacity: 0; }
  55% { transform: translateY(5px) scale(1.06); opacity: 1; }
  100% { transform: none; }
}

.coin-fall {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  pointer-events: none;
  animation: coin-fall 0.85s cubic-bezier(0.4, 0, 0.8, 0.4) both;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35));
}

.coin-fall .qtr { display: block; }

@keyframes coin-fall {
  0% { transform: translate(calc(-50% + var(--jx, 0px)), -64px) rotateX(0deg); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(-50%, 0) rotateX(82deg) scale(0.5); opacity: 0; }
}

.bank-total {
  font-size: clamp(1.6rem, 5vh, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.bank.left .bank-total { color: var(--left); }
.bank.right .bank-total { color: var(--right); }

.bank-meter {
  width: 82%;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border: 1px solid var(--stroke);
}

.bank-meter b {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8ad4, #ffd36e);
  box-shadow: 0 0 12px rgba(255, 138, 212, 0.6);
  transition: width 0.5s var(--ease);
}

.risk-mid {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

.wager {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 22px;
}

.wager.left { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--left) 45%, transparent); }
.wager.right { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--right) 45%, transparent); }

.wager-btn {
  min-width: 60px;
  min-height: 60px;
  font-size: 2rem;
  font-weight: 800;
  border-radius: 18px;
}

.wager-btn:disabled { opacity: 0.35; cursor: default; }

/* The middle of the bet box is a size container: as it narrows the coin
   row folds to a few coins, then one coin and a count, so nothing ever
   pokes out of the box on the shared-window and phone layouts. */
.wager-mid {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  container-type: inline-size;
  animation: rise 0.3s var(--ease);
}

/* Coins overlap like a fanned stack; as the box narrows the coins shrink
   and overlap more rather than hiding behind a count. */
.wager-coins {
  --coin: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  max-width: 100%;
}

@container (max-width: 190px) {
  .wager-coins { --coin: 30px; }
}

@container (max-width: 160px) {
  .wager-coins { --coin: 26px; }
  .wager-coin { margin-left: calc(var(--coin) * -0.5); }
}

@container (max-width: 120px) {
  .wager-coins { --coin: 20px; }
  .wager-coin { margin-left: calc(var(--coin) * -0.55); }
  .wager-amt .hint { display: none; }
  .ride-x2 { margin-left: 4px; padding: 1px 5px; font-size: 0.8rem; }
}

.wager-coin {
  display: inline-grid;
  place-items: center;
  margin-left: calc(var(--coin) * -0.4);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35));
  animation: coin-in 0.35s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.wager-coin:first-child { margin-left: 0; }
.wager-coin .qtr, .wager-coin .dlr { display: block; width: var(--coin); height: var(--coin); }
/* Gold sits a touch proud of the silver, like a real stack of mixed change. */
.wager-coin.dollar { transform: translateY(-2px); }

@keyframes coin-in {
  from { transform: translateY(-14px) scale(0.6); opacity: 0; }
}

.wager-amt {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Only the seat that sets the bet has buttons; the other shows the same
   amount, locked. */
.wager.locked { grid-template-columns: minmax(0, 1fr); opacity: 0.82; }
.wager.mine { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--gold) 85%, #fff), 0 0 24px color-mix(in srgb, var(--gold) 40%, transparent); }
.wager.mine.left { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--left) 85%, #fff), 0 0 24px color-mix(in srgb, var(--left) 35%, transparent); }
.wager.mine.right { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--right) 85%, #fff), 0 0 24px color-mix(in srgb, var(--right) 35%, transparent); }
/* Two lines tall on both seats, so the setter's longer label never makes one
   bet box taller than the other and knocks the banks out of line. */
.wager-who {
  display: grid;
  align-items: center;
  height: calc(2 * 1.15em);
  max-width: 100%;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

.wager-who > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wager.mine .wager-who { color: var(--ink); }
.wager.riding .wager-amt { color: #c2410c; }
.ride-x2 {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb02e, #ff7a1a);
  color: #2a1400;
  font-weight: 900;
  font-size: 0.95rem;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: ride-pop 0.5s var(--ease);
}

@keyframes ride-pop {
  from { transform: scale(0.4) rotate(-20deg); opacity: 0; }
}

.risk-mid { grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }

/* Let it ride: the winner's offer, with a bar that drains over RIDE_MS. */
.ride {
  --tone: var(--gold);
  position: relative;
  overflow: hidden;
  justify-content: center;
  min-height: clamp(56px, 9vh, 76px);
  font-weight: 800;
  font-size: clamp(1rem, 2.8vh, 1.45rem);
  border-radius: 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 55%, #fff), color-mix(in srgb, var(--tone) 30%, transparent)), var(--glass);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 80%, #fff), 0 10px 24px rgba(0, 0, 0, 0.25);
  animation: rise 0.35s var(--ease);
}

.ride.left { --tone: var(--left); }
.ride.right { --tone: var(--right); }
.ride .ride-label { position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ride .ride-timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 6px;
  width: 100%;
  background: color-mix(in srgb, var(--tone) 90%, #000);
  transform-origin: left;
  animation: ride-drain var(--ms, 6s) linear forwards;
}

@keyframes ride-drain {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.ride-on {
  --tone: #ff7a1a;
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 16px;
  font-weight: 900;
  font-size: clamp(0.95rem, 2.4vh, 1.15rem);
  color: #2a1400;
  background: linear-gradient(180deg, #ffd36e, #ff9b3a);
  box-shadow: 0 8px 20px rgba(255, 122, 26, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  animation: ride-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes ride-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.03); box-shadow: 0 10px 26px rgba(255, 122, 26, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
}

.series { color: var(--ink); }

/* ---------- haunted escape ---------- */

.haunt {
  background: linear-gradient(180deg, rgba(20, 10, 40, 0.55), rgba(5, 3, 12, 0.78)), var(--glass);
}

.haunt-board {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}

.haunt-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 0;
  height: clamp(110px, 22vh, 190px);
}

.haunt-hit { width: clamp(110px, 16vw, 220px); border-radius: 22px; }
.haunt-hit:disabled { filter: saturate(0.3) brightness(0.7); cursor: default; }
.haunt-hit:disabled::before { animation: none; opacity: 0.2; }

.haunt-stage {
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, auto);
  justify-content: center;
  justify-items: center;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 8px 20px;
}

.haunt-stage .spy-ico { font-size: clamp(3rem, 14vh, 7rem); }
.haunt-stage h2 { font-size: clamp(1.4rem, 3.2vw, 2.6rem); }
.haunt-stage.locked { opacity: 0.45; filter: grayscale(0.6); }

.rooms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-height: 0;
}

.room {
  --wall: hsl(var(--room-hue, 270) 30% 16%);
  --trim: hsl(var(--room-hue, 270) 40% 34%);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
  min-height: 0;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  padding: 10px 12px 8px;
  color: #f6f0ff;
  background:
    radial-gradient(70% 60% at 50% 0%, hsl(var(--room-hue, 270) 60% 40% / 0.45), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.025) 22px 24px),
    linear-gradient(180deg, var(--wall), #07050d 85%);
  border: 1px solid hsl(var(--room-hue, 270) 40% 40% / 0.5);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6), var(--shadow);
  animation: rise 0.5s var(--ease);
}

.room.left { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--left) 45%, transparent), inset 0 0 60px rgba(0, 0, 0, 0.6); }
.room.right { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--right) 45%, transparent), inset 0 0 60px rgba(0, 0, 0, 0.6); }
.room.mine { box-shadow: inset 0 0 0 3px var(--gold), 0 0 30px color-mix(in srgb, var(--gold) 50%, transparent); }

/* The one bulb in the room is on its last legs. */
.room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(60% 50% at 50% 10%, rgba(255, 230, 170, 0.2), transparent 70%);
  animation: flicker 5s steps(1, end) infinite;
  animation-delay: calc(var(--room-hue, 0) * -0.013s);
  mix-blend-mode: screen;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  7% { opacity: 0.2; }
  9% { opacity: 1; }
  11% { opacity: 0.5; }
  12% { opacity: 1; }
  43% { opacity: 0.95; }
  45% { opacity: 0.1; }
  46% { opacity: 0.9; }
  47% { opacity: 0.3; }
  48% { opacity: 1; }
  72% { opacity: 1; }
  73% { opacity: 0.35; }
  74% { opacity: 1; }
}

.room-head {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.room-name {
  font-family: "TF Baskerville", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: hsl(var(--room-hue, 270) 60% 85%);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  font-size: clamp(0.95rem, 1.6vw, 1.3rem);
}

.room-dots { display: flex; gap: 4px; }
.room-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.room-dots i.done { background: var(--gold); }
.room-dots i.here { background: #fff; box-shadow: 0 0 8px #fff; }

.room-body {
  position: relative;
  z-index: 3;
  min-height: 0;
  display: grid;
  border-radius: 16px;
}

/* Picked right: rush toward that way out, then the next room rises in. */
.room.zooming .room-body { animation: zoom-go 0.7s cubic-bezier(0.5, 0, 0.9, 0.5) forwards; }
.room.zooming.to-left .room-body { transform-origin: 12% 62%; }
.room.zooming.to-right .room-body { transform-origin: 88% 62%; }
.room.zooming .exit.going { filter: brightness(1.4) drop-shadow(0 0 24px rgba(255, 220, 150, 0.9)) !important; animation: none !important; }
.room.zooming .exit:not(.going) { opacity: 0.4; transition: opacity 0.3s; }

@keyframes zoom-go {
  0% { transform: scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: scale(3.4); opacity: 0; filter: brightness(1.8); }
}

.room-floor {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.7fr) minmax(0, 0.85fr);
  gap: 10px;
  min-height: 0;
  align-items: end;
  padding: 0 4px;
  height: 100%;
}

.exit {
  position: relative;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: end center;
  transition: transform 0.2s var(--ease), filter 0.3s;
}

.exit:disabled { cursor: default; }
.room:not(.mine) .exit { filter: brightness(0.7); }
.room.mine .exit { animation: exit-glow 1.4s ease-in-out infinite alternate; }
.room.mine .exit:active { transform: scale(0.94); }

@keyframes exit-glow {
  from { filter: brightness(0.95); }
  to { filter: brightness(1.25) drop-shadow(0 0 14px rgba(255, 220, 150, 0.5)); }
}

.exit.door svg.door-svg {
  height: 96%;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}

.exit.stair svg.stairs {
  width: 100%;
  height: 100%;
  border-radius: 12px 12px 4px 4px;
  background: #07050d;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}

.exit .arrow {
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
  font-family: var(--emoji);
  font-size: clamp(1.2rem, 3.4vh, 2.2rem);
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
  pointer-events: none;
}

.exit.stair.down .arrow { top: auto; bottom: 8%; }

/* Two glowing eyes in the dark end of the stairwell, open for a blink about
   once a minute. Up-stairs are dark at the top, down-stairs at the bottom. */
.exit.stair .eyes {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  display: flex;
  gap: 12%;
  width: 34%;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  animation: eyes 61s linear infinite;
  animation-delay: var(--d, 0s);
}

.exit.stair.down .eyes { top: auto; bottom: 26%; }

.exit.stair .eyes i {
  width: 11%;
  aspect-ratio: 1.6;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff6b0 0 30%, #ffc400 60%, transparent 100%);
  box-shadow: 0 0 10px 3px rgba(255, 210, 60, 0.7);
}

@keyframes eyes {
  0%, 91.5% { opacity: 0; }
  92%, 94% { opacity: 1; }
  94.4% { opacity: 0; }
  94.8%, 96.5% { opacity: 1; }
  97%, 100% { opacity: 0; }
}

/* The middle of the room: a wall with a picture and a window, a floor in
   the room's material, and its furniture. */
.room-scene {
  position: relative;
  height: 100%;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, 0.03) 18px 20px),
    linear-gradient(180deg, hsl(var(--room-hue, 270) 28% 20%), hsl(var(--room-hue, 270) 30% 12%) 60%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.55);
  font-family: var(--emoji);
}

.room-scene::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  border-top: 2px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, hsl(var(--room-hue, 270) 20% 18%), hsl(var(--room-hue, 270) 20% 8%));
}

.room-scene.floor-boards::before {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #5a3d2c, #2a1b12);
}

.room-scene.floor-tile::before {
  background:
    repeating-conic-gradient(from 45deg, rgba(255, 255, 255, 0.12) 0 25%, transparent 0 50%) 0 0 / 34px 34px,
    linear-gradient(180deg, #3b3b48, #15151c);
}

.room-scene.floor-stone::before {
  background:
    radial-gradient(18px 10px at 20% 30%, rgba(255, 255, 255, 0.07), transparent 70%),
    radial-gradient(22px 12px at 65% 70%, rgba(255, 255, 255, 0.06), transparent 70%),
    radial-gradient(16px 9px at 85% 25%, rgba(255, 255, 255, 0.05), transparent 70%),
    linear-gradient(180deg, #2f2f3a, #0e0e14);
}

.room-scene.floor-rug::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 6%;
  height: 24%;
  border-radius: 50% / 100%;
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 10px, rgba(0, 0, 0, 0.18) 10px 12px),
    hsl(var(--room-hue, 270) 45% 32%);
  box-shadow: inset 0 0 0 3px hsl(var(--room-hue, 270) 50% 50% / 0.5);
}

.room-scene span { position: absolute; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }

.room-scene .frame {
  left: 12%;
  top: 8%;
  font-size: clamp(1.4rem, 5vh, 2.6rem);
  transform: rotate(-4deg);
  opacity: 0.85;
}

.room-scene .pane {
  right: 10%;
  top: 6%;
  width: clamp(2rem, 8vh, 4rem);
  aspect-ratio: 0.8;
  display: grid;
  place-items: center;
  border-radius: 40% 40% 6px 6px;
  background: linear-gradient(180deg, #0b1233, #1a1040);
  box-shadow: inset 0 0 0 3px hsl(var(--room-hue, 270) 30% 30%), 0 0 24px rgba(120, 140, 255, 0.25);
  font-size: clamp(1rem, 3.6vh, 1.9rem);
}

.room-scene .pane i { font-style: normal; animation: moon-glow 4s ease-in-out infinite; }

@keyframes moon-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(200, 210, 255, 0.5)); }
  50% { filter: drop-shadow(0 0 14px rgba(200, 210, 255, 0.95)); }
}

.room-scene .prop { bottom: 12%; font-size: clamp(1.6rem, 6.5vh, 3.4rem); }
.room-scene .p1 { left: 50%; transform: translateX(-50%); font-size: clamp(2.2rem, 10vh, 5rem); bottom: 8%; z-index: 2; }
.room-scene .p2 { left: 8%; transform: rotate(-5deg); }
.room-scene .p3 { right: 8%; transform: rotate(6deg); }

.room-scene .candle {
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  font-size: clamp(1rem, 3.4vh, 1.8rem);
  animation: candle 2.6s ease-in-out infinite;
}

@keyframes candle {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 200, 100, 0.8)); }
  50% { filter: drop-shadow(0 0 16px rgba(255, 180, 80, 1)); }
}

.exit.wrong,
.tb-item.nope { animation: shake 0.5s var(--ease); }

@keyframes shake {
  0%, 100% { transform: rotate(var(--r, 0deg)); }
  20% { transform: translateX(-8px) rotate(calc(var(--r, 0deg) - 3deg)); }
  40% { transform: translateX(8px) rotate(calc(var(--r, 0deg) + 3deg)); }
  60% { transform: translateX(-6px) rotate(var(--r, 0deg)); }
  80% { transform: translateX(6px) rotate(var(--r, 0deg)); }
}

.room-note {
  position: relative;
  z-index: 3;
  text-align: center;
  font-weight: 700;
  color: var(--muted);
  font-size: 0.9rem;
  min-height: 1.2em;
}

.room.mine .room-note { color: var(--gold); }

.room.escaped {
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 60% at 50% 30%, rgba(120, 140, 255, 0.35), transparent 70%),
    linear-gradient(180deg, #0b1233, #1a1040);
}

.room-out {
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
}

.room-out span {
  font-family: var(--emoji);
  font-size: clamp(4rem, 18vh, 9rem);
  line-height: 1;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

/* Critters sit above the exits and the scene so they read as in the room,
   not painted on the back wall. */
.haunt-fx {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  font-family: var(--emoji);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}

.haunt-fx span { position: absolute; line-height: 1; }
.haunt-fx .web { font-size: clamp(1.6rem, 5vh, 3rem); opacity: 0.35; top: -8px; }
.haunt-fx .web.tl { left: -8px; transform: scaleX(-1); }
.haunt-fx .web.tr { right: -8px; }

/* Critters are a treat, not wallpaper: each one shows up once in a long
   cycle, is on screen for a few seconds, then hides for the rest. The cycles
   are all different lengths and each room hands out its own delays, so what
   appears, and when, is a surprise. */
.haunt-fx .bat {
  font-size: clamp(1.2rem, 4vh, 2.2rem);
  top: 18%;
  left: -12%;
  opacity: 0;
  animation: bat 42s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes bat {
  0% { left: -12%; transform: translateY(0) scaleX(1); opacity: 0; }
  0.8% { opacity: 1; }
  7.5% { left: 96%; transform: translateY(-20px) scaleX(1); }
  8.3% { left: 96%; transform: translateY(-20px) scaleX(-1); }
  15.8% { opacity: 1; }
  16.7%, 100% { left: -12%; transform: translateY(10px) scaleX(-1); opacity: 0; }
}

.haunt-fx .ghost {
  font-size: clamp(1.6rem, 6vh, 3.2rem);
  right: 12%;
  top: 26%;
  opacity: 0;
  animation: ghost 48s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes ghost {
  0%, 12.5%, 100% { opacity: 0; transform: translateY(10px); }
  3.75% { opacity: 0.85; transform: translateY(-6px); }
  6.9% { opacity: 0.2; transform: translate(-30px, -14px); }
  8.75% { opacity: 0.7; transform: translate(-40px, 0); }
}

.haunt-fx .spider {
  font-size: clamp(1rem, 3.4vh, 1.8rem);
  left: 38%;
  top: -10%;
  animation: spider 54s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

/* The thread hangs from the ceiling to the spider, however far down it is. */
.haunt-fx .spider .thread {
  position: absolute;
  left: 50%;
  bottom: 60%;
  width: 1.5px;
  height: 600px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.55));
}

@keyframes spider {
  0%, 16.7%, 100% { transform: translateY(0); }
  5% { transform: translateY(400%); }
  6% { transform: translateY(430%) rotate(10deg); }
  7% { transform: translateY(400%) rotate(-10deg); }
  8% { transform: translateY(420%) rotate(0); }
  9.7% { transform: translateY(140%); }
  11.7% { transform: translateY(260%); }
}

.haunt-fx .rat {
  font-size: clamp(1rem, 3.4vh, 1.8rem);
  bottom: 1%;
  left: 100%;
  animation: rat 64s steps(440) infinite;
  animation-delay: var(--d, 0s);
}

/* The black cat pads across the floor, stops to sit and watch, then slips off
   the other side. The glyph faces left; it flips to walk right. */
.haunt-fx .cat {
  font-size: clamp(1.3rem, 4.4vh, 2.4rem);
  bottom: 2%;
  left: 100%;
  animation: cat 84s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes cat {
  0%, 2.7% { left: 100%; transform: scaleX(1); }
  7.3% { left: 58%; transform: scaleX(1); }
  8%, 14.7% { left: 58%; transform: scaleX(1) translateY(0); }
  15.3% { left: 58%; transform: scaleX(1) translateY(-6%); }
  16%, 20.7% { left: 58%; transform: scaleX(1); }
  26% { left: -14%; transform: scaleX(1); }
  26.2%, 100% { left: -14%; transform: scaleX(1); }
}

/* The rat glyph faces left, so it runs left as drawn and flips to come back. */
@keyframes rat {
  0%, 9.5% { left: 100%; transform: scaleX(1); }
  15% { left: -12%; transform: scaleX(1); }
  15.1%, 17% { left: -12%; transform: scaleX(-1); }
  22.5% { left: 100%; transform: scaleX(-1); }
  22.6%, 100% { left: 100%; transform: scaleX(1); }
}

.scare {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 0, 40, 0.35), rgba(120, 0, 20, 0.78));
  animation: scare-flash 1.3s var(--ease) forwards;
}

.scare span {
  font-family: var(--emoji);
  font-size: clamp(6rem, 40vh, 18rem);
  line-height: 1;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.7));
  animation: scare-pop 1.3s cubic-bezier(0.1, 1.4, 0.3, 1) forwards;
}

@keyframes scare-flash {
  0% { opacity: 0; }
  6% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes scare-pop {
  0% { transform: scale(0.1) rotate(-20deg); opacity: 0; }
  12% { transform: scale(1.35) rotate(6deg); opacity: 1; }
  22% { transform: scale(1.1) rotate(-3deg); }
  30% { transform: scale(1.2); }
  75% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.6) translateY(40px); opacity: 0; }
}

/* ---------- tractor beam ---------- */

.tb-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-height: 0;
}

.tb-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
}

.tb-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.tb-side.right .tb-head { grid-template-columns: minmax(0, 1fr) auto; }
.tb-side.right .tb-score { order: 2; }
.tb-side.right .tb-left { justify-self: start; }

.tb-score {
  font-size: clamp(2rem, 6.5vh, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  display: grid;
  justify-items: center;
  min-width: 2.2em;
}

.tb-score small {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.tb-side.left .tb-score { color: var(--left); }
.tb-side.right .tb-score { color: var(--right); }

.tb-left {
  justify-self: end;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.tb-left b { font-size: 1.2rem; color: var(--ink); letter-spacing: -0.03em; }

/* The yard: a suburban street the boxes rain down on. It keeps a fixed
   width:height so the heap's percentage positions mean the same thing on
   every screen; it shrinks to whichever of width or height is tighter. */
.tb-sky {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;
}

.tb-yard {
  --asp: 1.25;
  position: relative;
  width: min(100cqw, calc(var(--asp) * 100cqh));
  aspect-ratio: var(--asp);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, #0b1236 0%, #1f2b66 45%, #5a3d7a 74%, #2a4a26 74.5%, #1b3319 100%);
  touch-action: manipulation;
}

[data-theme="day"] .tb-yard {
  background: linear-gradient(180deg, #5fb0f0 0%, #b9e2ff 50%, #ffe8c9 74%, #6fbf4f 74.5%, #4f9c38 100%);
}

.tb-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.tb-sun {
  position: absolute;
  right: 10%;
  top: 9%;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7d6, #ffe08a 60%, transparent 62%);
  box-shadow: 0 0 40px 10px rgba(255, 220, 140, 0.35);
}

[data-theme="day"] .tb-sun { background: radial-gradient(circle, #fffbe6, #ffd54a 60%, transparent 62%); }

.tb-cloud {
  position: absolute;
  top: 16%;
  font-family: var(--emoji);
  font-size: 7cqw;
  opacity: 0.8;
  animation: tb-cloud 60s linear infinite;
}

.tb-cloud.a { left: 8%; }
.tb-cloud.b { left: 55%; top: 26%; font-size: 5cqw; animation-duration: 84s; }

@keyframes tb-cloud {
  from { transform: translateX(-30%); }
  to { transform: translateX(130%); }
}

/* Houses along the back of the yard, drawn big enough to read as a street. */
.tb-street {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 22%;
  font-family: var(--emoji);
  font-size: 11.5cqw;
  line-height: 1;
  letter-spacing: -0.12em;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.25));
}

.tb-lawn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 30%),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(255, 210, 80, 0.55) 40px 70px) 0 76% / 100% 3px no-repeat,
    linear-gradient(180deg, #4d8f3a 0 38%, #2f3542 38% 100%);
}

[data-theme="day"] .tb-lawn { background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 30%),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(255, 210, 80, 0.8) 40px 70px) 0 76% / 100% 3px no-repeat,
    linear-gradient(180deg, #6fbf4f 0 38%, #6b7078 38% 100%); }

/* The boxes. Square, labelled, dropped where the deal says and left lying
   however they landed. left/bottom come from the heap layout in app.js. */
.tb-item {
  position: absolute;
  z-index: 2;
  /* --cy is the box's bottom edge in yard-width units; the yard's aspect turns it into a share of the height */
  bottom: calc(var(--cy, 0) * var(--asp, 1.25) * 100%);
  width: 11%;
  aspect-ratio: 1;
  box-sizing: border-box;
  /* No padding here: % padding resolves against the yard, not the box, and
     ate most of a 79px box. Spacing lives on the children in cqw. */
  padding: 0;
  border-radius: 12%;
  color: #1a1d2a;
  font: inherit;
  cursor: pointer;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 0;
  text-align: center;
  transform: rotate(var(--r, 0deg));
  background: linear-gradient(180deg, #fffaf0, #e9d6ae);
  border: 2px solid #b8925a;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 #fff;
  transition: left 0.5s var(--ease), bottom 0.5s cubic-bezier(0.3, 0.7, 0.4, 1.15), transform 0.5s var(--ease), filter 0.2s;
  touch-action: manipulation;
  container-type: inline-size;
}

/* Box flaps: a seam across the top third, not a stripe behind the picture. */
.tb-item::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 8%;
  height: 0;
  border-top: 2px dashed rgba(184, 146, 90, 0.45);
  pointer-events: none;
}

.tb-item:active { filter: brightness(0.92); }

.tb-item.top { box-shadow: 0 6px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 #fff, 0 0 0 2px rgba(127, 255, 200, 0.45); }

.tb-item .ico {
  position: relative;
  z-index: 1;
  font-family: var(--emoji);
  font-size: 50cqw;
  line-height: 1;
  padding-top: 8cqw;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.tb-item .cap {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding: 2cqw 5cqw 7cqw;
  font-size: 13.5cqw;
  font-weight: 800;
  line-height: 1.05;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Fresh heap: boxes rain in one after another and land the way they lie. */
.tb-item.drop {
  animation: tb-drop 0.75s cubic-bezier(0.45, 0, 0.7, 0.8) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes tb-drop {
  0% { transform: translateY(-140cqh) rotate(calc(var(--r, 0deg) - 160deg)); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translateY(0) rotate(var(--r, 0deg)); }
}

/* Being lifted: drifts up to the saucer over TB_LIFT_MS. Still a button. */
.tb-item.beamed {
  z-index: 40;
  bottom: 80%;
  transition: left 6s linear, bottom 6s cubic-bezier(0.4, 0, 0.8, 0.8), transform 6s linear, filter 0.3s;
  filter: brightness(1.35) saturate(0.7) drop-shadow(0 0 14px #7fffc8);
  animation: tb-tug 0.6s ease-in-out infinite alternate;
}

@keyframes tb-tug {
  from { box-shadow: 0 0 0 3px rgba(127, 255, 200, 0.6), 0 6px 10px rgba(0, 0, 0, 0.35); }
  to { box-shadow: 0 0 0 8px rgba(127, 255, 200, 0.25), 0 6px 10px rgba(0, 0, 0, 0.35); }
}

.ufo {
  --ship: clamp(2.6rem, 9vh, 4.6rem);
  position: absolute;
  top: 2%;
  width: 0;
  height: 0;
  z-index: 30;
}

.ufo-ship {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--emoji);
  font-size: var(--ship);
  line-height: 1;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
  animation: hover 1.8s ease-in-out infinite;
}

@keyframes hover {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -8px); }
}

.ufo-ring {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--ship);
  height: var(--ship);
  transform: translate(-50%, 0);
  border-radius: 50%;
  background: conic-gradient(#7fffc8 calc(var(--p, 1) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%);
  mask: radial-gradient(circle, transparent 60%, #000 62%);
  opacity: 0.8;
}

.ufo-count {
  position: absolute;
  left: 50%;
  top: calc(var(--ship) + 2px);
  transform: translateX(-50%);
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #7fffc8;
  text-shadow: 0 0 8px #7fffc8;
}

.ufo.soon .ufo-count { color: #ffb3b3; text-shadow: 0 0 10px #ff5a5a; animation: soon 0.5s ease-in-out infinite alternate; }
.ufo.soon .ufo-ring { background: conic-gradient(#ff8a8a calc(var(--p, 1) * 360deg), transparent 0); }

@keyframes soon {
  from { transform: translateX(-50%) scale(1); }
  to { transform: translateX(-50%) scale(1.25); }
}

.ufo .beam {
  position: absolute;
  left: 50%;
  top: calc(var(--ship) * 0.7);
  width: clamp(80px, 12vw, 200px);
  height: 120cqh;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(127, 255, 200, 0.85), rgba(127, 255, 200, 0.15) 70%, transparent);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  transition: opacity 0.2s;
}

.ufo.beaming .beam { opacity: 1; animation: beam-pulse 0.5s ease-in-out infinite alternate; }
.ufo.beaming .ufo-ship { animation: none; transform: translateX(-50%); filter: drop-shadow(0 0 18px #7fffc8); }

@keyframes beam-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.5); }
}

/* ---------- sticker sheet ---------- */

.stickers {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)), var(--glass);
}

/* Tray on one half, whiteboard on the other. touch-action: none here is
   what lets a finger drag a sticker without the browser calling it a pan. */
.wb {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 0;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.tray {
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), var(--cell-w, 56px));
  grid-auto-rows: var(--cell-h, 56px);
  gap: 4px;
  justify-content: center;
  align-content: center;
  min-height: 0;
  padding: 6px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--glass-2);
  border: 1px solid var(--stroke);
}

.tray-cell {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--stroke);
  border-radius: 18%;
  padding: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  color: inherit;
  font: inherit;
  cursor: grab;
  display: grid;
  place-items: center;
  position: relative;
  touch-action: none;
  transition: transform 0.15s var(--ease), background 0.2s;
}

.tray-cell:active { transform: scale(0.92); }

.tray-cell.sel {
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 45%, transparent), color-mix(in srgb, var(--gold) 15%, transparent));
}

.tray-cell.sel::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20%;
  border: 3px dashed var(--gold);
  animation: spin 8s linear infinite;
  pointer-events: none;
}

.stk-ico {
  font-family: var(--emoji);
  line-height: 1;
  display: block;
  transform: rotate(var(--r, 0deg)) scaleX(var(--f, 1));
  transition: transform 0.25s var(--ease);
}

.tray-cell .stk-ico { font-size: calc(var(--cell-w, 56px) * 0.66); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3)); }

.board {
  position: relative;
  min-height: 0;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background: #fbfbf7;
  border: 3px solid #d9d9d3;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.06), var(--shadow);
  cursor: crosshair;
  touch-action: none;
  transition: box-shadow 0.2s;
}

.board-paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(0, 0, 0, 0.035) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(0, 0, 0, 0.035) 39px 40px);
}

.board.over { box-shadow: inset 0 0 0 4px var(--gold), inset 0 0 40px rgba(0, 0, 0, 0.06), var(--shadow); }
.wb.has-pending .tray { opacity: 0.55; pointer-events: none; }

/* Stickers sit at a fraction of the board, scaled from the board's short
   side so they keep their size when the window changes shape. */
.stuck,
.pending {
  --base: calc(var(--cell-w, 240px) * 0.2);
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: grid;
  place-items: center;
}

.stuck .stk-ico,
.pending .stk-ico,
.wb-ghost .stk-ico {
  font-size: calc(var(--base, 48px) * var(--s, 1));
  filter:
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
}

.stuck .stk-ico { animation: stuck-pop 0.4s var(--ease); }

@keyframes stuck-pop {
  0% { transform: rotate(var(--r, 0deg)) scaleX(var(--f, 1)) scale(1.3); }
  100% { transform: rotate(var(--r, 0deg)) scaleX(var(--f, 1)) scale(1); }
}

.pending {
  z-index: 5;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.pending .stk-ico {
  filter:
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 14px 16px rgba(0, 0, 0, 0.35));
  animation: peel-hover 1.6s ease-in-out infinite alternate;
}

@keyframes peel-hover {
  from { translate: 0 0; }
  to { translate: 0 -5px; }
}

.pending .ring {
  position: absolute;
  inset: -14px;
  border-radius: 22%;
  border: 3px dashed var(--gold);
  animation: spin 8s linear infinite;
  pointer-events: none;
}

.pending .tip {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  font-weight: 800;
  font-size: 0.8rem;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold);
  color: #2a1d00;
  pointer-events: none;
}

.pending.lift { cursor: grabbing; }
.pending.lift .stk-ico { animation: none; }
.pending.lift .tip { opacity: 0; }

.wb-ghost {
  position: absolute;
  z-index: 60;
  transform: translate(-50%, -50%);
  pointer-events: none;
  --base: 64px;
}

.wb-ghost .stk-ico { filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.45)); }

/* Board plus the four save boxes under it. */
.board-col {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
}
.board-col .board { min-height: 0; height: 100%; }
.stk-slots {
  --slot: clamp(44px, 9vh, 72px);
  display: grid;
  grid-template-columns: repeat(4, var(--slot));
  grid-auto-rows: var(--slot);
  gap: 8px;
  justify-content: center;
}
.stk-slot {
  position: relative;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent);
  background: color-mix(in srgb, var(--glass) 60%, transparent);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s var(--ease), border-color 0.15s;
}
.stk-slot:active { transform: scale(0.94); }
.stk-slot .slot-plus { font-size: 1.4rem; line-height: 1; color: var(--muted); }
.stk-slot .slot-word { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.stk-slot.full {
  border: 2px solid #d9d9d3;
  background: #fbfbf7;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.06);
}
.stk-slot .slot-n {
  position: absolute;
  right: 3px;
  bottom: 3px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.68rem;
  line-height: 18px;
  color: #fff;
  background: color-mix(in srgb, var(--ink) 80%, transparent);
}
/* A tiny copy of a sheet: stickers at their fractions of the box. */
.mini {
  position: absolute;
  inset: 0;
  --base: calc(var(--slot, 56px) * 0.2);
  pointer-events: none;
}
.mini-stk {
  position: absolute;
  font-family: var(--emoji);
  font-size: calc(var(--base) * var(--s, 1));
  line-height: 1;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scaleX(var(--f, 1));
}
.win-card.slot-card { width: min(520px, 92%); text-align: center; }
.slot-card .help-head { justify-content: center; }
.slot-card .slot-ico { --slot: 4.8rem; width: var(--slot); height: var(--slot); background: #fbfbf7; border: 2px solid #d9d9d3; position: relative; overflow: hidden; }
.slot-card .slot-ico .mini { inset: 4px; }
.slot-actions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 8px; }
.slot-actions .pill { min-height: 48px; font-size: 1.05rem; }
.slot-actions .danger { color: #ff8a8a; }
.slot-hint { margin: 10px 0 0; }
html[data-shape="phone"] .stk-slots { --slot: 44px; gap: 6px; }
html[data-short] .stk-slots { --slot: 40px; gap: 6px; }
html[data-short] .board-col { gap: 5px; }

.stk-tools { position: relative; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.stk-tools .pill { font-size: 1.2rem; font-weight: 800; min-width: 44px; }
.stk-tools .pill.primary { font-size: 1rem; }

/* The first time a sticker lands, the controls get a running gold border,
   a pulse on each button, and a line under them saying what they are for. */
@property --cue-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.stk-tools.cue {
  padding: 4px 8px;
  border-radius: 999px;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--glass), var(--glass)) padding-box,
    conic-gradient(from var(--cue-a), var(--gold), transparent 30%, var(--gold) 50%, transparent 80%, var(--gold)) border-box;
  animation: cue-spin 1.6s linear infinite;
  box-shadow: 0 0 22px color-mix(in srgb, var(--gold) 55%, transparent);
}

@keyframes cue-spin { to { --cue-a: 360deg; } }

.stk-tools.cue .pill { animation: cue-pulse 1s ease-in-out infinite alternate; }

@keyframes cue-pulse {
  from { box-shadow: 0 0 0 0 transparent; }
  to { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 85%, #fff), 0 0 14px color-mix(in srgb, var(--gold) 60%, transparent); }
}

.stk-cue {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 8;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #2a1f00;
  background: linear-gradient(180deg, #ffe08a, var(--gold));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  animation: cue-bob 1.1s ease-in-out infinite alternate;
}

.stk-cue::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-bottom-color: #ffe08a;
}

@keyframes cue-bob {
  from { transform: translateX(-50%) translateY(0); }
  to { transform: translateX(-50%) translateY(6px); }
}

/* Phone: the controls wrap into a narrow block, so the label hangs off the
   whole top bar instead and centres on the screen. */
html[data-shape="phone"] .stickers .play-top { position: relative; }
html[data-shape="phone"] .stk-tools.cue { position: static; }
html[data-shape="phone"] .stk-cue { white-space: normal; text-align: center; width: max-content; max-width: 86vw; font-size: 0.85rem; top: calc(100% + 8px); }

/* ---------- finish line ---------- */

.finish-board {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
}

.track {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: 24px;
  overflow: hidden;
}

.race-svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.race-svg .emoji { font-family: var(--emoji); }

.race-svg .vehicle .flames {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transform: scaleY(0.6);
  opacity: 0.8;
  transition: transform 0.3s, opacity 0.3s;
}

.race-svg .vehicle.go .flames {
  opacity: 1;
  animation: flame 0.12s linear infinite alternate;
}

@keyframes flame {
  from { transform: scaleY(1.3); }
  to { transform: scaleY(1.7) scaleX(1.1); }
}

.race-svg .vehicle .dust { opacity: 0; transition: opacity 0.3s; }
.race-svg .vehicle.go .dust { opacity: 1; }

/* Orbit rings, leg labels and the Mars landers on the starship map. */
.race-svg .ring { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.2; stroke-dasharray: 3 5; }
.race-svg .moon-ring { stroke: rgba(255, 255, 255, 0.1); }
.race-svg .map-label {
  font-family: var(--font, inherit);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  fill: rgba(255, 255, 255, 0.62);
  paint-order: stroke;
  stroke: rgba(11, 18, 51, 0.8);
  stroke-width: 3px;
  stroke-linejoin: round;
}
/* The outer g carries the SVG translate to Mars; CSS only moves the body,
   so it drops in from orbit under its chute and the chute folds away. */
.race-svg .lander .body { opacity: 0; transform: translateY(-70px); transition: opacity 0.4s, transform 1.6s cubic-bezier(0.3, 0.6, 0.4, 1); }
.race-svg .lander .chute { transition: opacity 0.4s 1.4s; }
.race-svg .lander.down .body { opacity: 1; transform: none; }
.race-svg .lander.down .chute { opacity: 0; }

.race-svg .stars circle { animation: twinkle 3s ease-in-out infinite; }
.race-svg .stars circle:nth-child(3n) { animation-delay: -1s; }
.race-svg .stars circle:nth-child(3n + 1) { animation-delay: -2s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.lap {
  position: absolute;
  top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: clamp(0.8rem, 1.6vw, 1.1rem);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lap.left { left: 10px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--left) 70%, transparent); }
.lap.right { right: 10px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--right) 70%, transparent); }

/* Each seat: its boost gauge on top, then the two bullseye buttons. */
.finish-ctl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  height: clamp(150px, 30vh, 250px);
  min-height: 0;
}

.finish-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  min-width: 0;
}

.finish-pair {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  min-width: 0;
}

/* The two finds are the two buttons. Same pair on both seats; the bullseye
   says "tap when you see it". */
.finish-card {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 0;
  min-width: 0;
  padding: 4px 14px;
  border-radius: 20px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s var(--ease), filter 0.2s;
  overflow: hidden;
}

.finish-card.right { grid-template-columns: minmax(0, 1fr) auto auto; text-align: right; }
.finish-card.right .spy-ico { order: 2; }
.finish-card.right .bull { order: 3; }
.finish-card.left { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--left) 55%, transparent); }
.finish-card.right { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--right) 55%, transparent); }
.finish-card:active { transform: scale(0.96); }
.finish-card:active .bull { transform: scale(1.2) rotate(-8deg); }
.finish-card:disabled { filter: saturate(0.3) brightness(0.7); cursor: default; }

.finish-card .bull {
  font-family: var(--emoji);
  font-size: clamp(1.6rem, 7vh, 3.2rem);
  line-height: 1;
  transition: transform 0.15s var(--ease);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
}
.finish-card .spy-ico { font-size: clamp(1.6rem, 7vh, 3.4rem); }
.finish-card .finish-words b { font-size: clamp(1.1rem, 2.4vw, 1.9rem); line-height: 1.1; letter-spacing: -0.03em; display: block; }

.finish-card.boost { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 26%, var(--glass)), var(--glass-2)); }
.finish-card.launch { background: linear-gradient(160deg, color-mix(in srgb, #ff7a59 26%, var(--glass)), var(--glass-2)); }

.finish-words { display: grid; gap: 2px; min-width: 0; }

.finish-words small {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Boost gauge: a wide bar with the word and the number on it. */
.tank {
  position: relative;
  height: clamp(30px, 5.2vh, 44px);
  min-height: 0;
  --fill: var(--left);
}

.tank.right { --fill: var(--right); }

.tank .tube {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, var(--glass-2));
  border: 2px solid color-mix(in srgb, var(--fill) 60%, transparent);
  overflow: hidden;
}

/* Starts at the level the seat has banked (--b) and drains to empty over
   the time left on it; a new key after every find restarts the run. */
.tank .tube b {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--b, 0) * 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--fill), #ffd36e 70%, #ff5a1f);
  box-shadow: 0 0 16px color-mix(in srgb, var(--fill) 80%, transparent), inset 0 2px 0 rgba(255, 255, 255, 0.5);
  animation: boost-drain 90s linear forwards;
}
.tank.right .tube b { left: auto; right: 0; background: linear-gradient(270deg, var(--fill), #ffd36e 70%, #ff5a1f); }

.tank.full .tube { animation: tank-glow 0.9s ease-in-out infinite alternate; }
@keyframes tank-glow {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fill) 60%, transparent); }
  to { box-shadow: 0 0 0 6px color-mix(in srgb, var(--fill) 0%, transparent), 0 0 18px var(--fill); }
}

@keyframes boost-drain {
  from { width: calc(var(--b, 0) * 100%); }
  to { width: 0%; }
}

.tank .cap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-style: normal;
  font-weight: 900;
  font-size: clamp(0.85rem, 2vh, 1.15rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.tank.right .cap { flex-direction: row-reverse; }
.tank .cap-pct { font-size: 1.15em; }

/* ---------- responsive shapes ---------- */

/* Phone portrait only. Do not use a 900px width query: Tesla shared
   windows are often ~773×601 and must keep two-column cabin layouts. */
@media (max-width: 560px) and (orientation: portrait) {
  .chrome { grid-template-columns: 1fr auto; }
  .names { grid-column: 1 / -1; }
}

html[data-shape="phone"] .chrome {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand theme"
    "names names";
  gap: 6px;
}
html[data-shape="phone"] .brand { grid-area: brand; }
html[data-shape="phone"] .names { grid-column: auto; grid-area: names; }
html[data-shape="phone"] .names.scored .name-edit { min-width: 0; padding: 0 10px; }
html[data-shape="phone"] .names.scored .pencil { display: none; }
html[data-shape="phone"] .name-edit .wins { margin-left: 6px; padding: 1px 6px 1px 4px; }
html[data-shape="phone"] .trash { width: 34px; min-height: 34px; font-size: 0.85rem; }
html[data-shape="phone"] .chrome-right { grid-area: theme; justify-self: end; }
html[data-shape="phone"] .theme-cycle,
html[data-shape="phone"] .share-btn,
html[data-shape="phone"] .tip-btn { min-width: 0; padding: 0 12px; min-height: 40px; }
html[data-shape="phone"] .theme-word,
html[data-shape="phone"] .tip-word,
html[data-shape="phone"] .share-word,
html[data-shape="phone"] .link-word { display: none; }
html[data-shape="phone"] .link-toggle { padding: 0 8px; }
html[data-shape="phone"] .brand p { display: none; }
html[data-shape="phone"] .brand h1 { font-size: 1.05rem; }
html[data-shape="phone"] .logo { width: 32px; height: 32px; font-size: 28px; }
html[data-shape="phone"] .game-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
html[data-shape="phone"] .game-btn { border-radius: 18px; padding: 8px; }
html[data-shape="phone"] .game-btn .game-ico { font-size: clamp(2rem, 7vh, 3.4rem); }
html[data-shape="phone"] .game-btn h3 { font-size: 0.8rem; }
html[data-shape="phone"] .modes { grid-template-columns: repeat(var(--cols, 3), var(--cell-w)); gap: 10px; }
html[data-shape="phone"] .find-board { grid-template-columns: 1fr; }
html[data-shape="phone"] .side-col { display: none; }
html[data-shape="phone"] .tile.claimed-left,
html[data-shape="phone"] .tile.claimed-right { width: 100%; transform: none; }
html[data-shape="phone"] .bingo-duel { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
html[data-shape="phone"] .spy-board { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
html[data-shape="phone"] .spy-board .spy-stage { grid-column: 1 / -1; order: -1; overflow: hidden; padding: 10px; }
html[data-shape="phone"] .spy-ico { font-size: clamp(3.5rem, 16vh, 8rem); }
html[data-shape="phone"] .spy-stage h2 { font-size: clamp(1.4rem, 6vw, 2.2rem); }
html[data-shape="phone"] .spy-side { grid-template-rows: 1fr; height: 24vh; grid-template-columns: minmax(0, 1fr) auto; }
html[data-shape="phone"] .spy-side.right { grid-template-columns: auto minmax(0, 1fr); }
html[data-shape="phone"] .spy-hit { width: auto; }
html[data-shape="phone"] .bullseye { font-size: 3.2rem; }
html[data-shape="phone"] .trail-board { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; gap: 8px; }
html[data-shape="phone"] .trail-mid { grid-template-rows: auto; }
html[data-shape="phone"] .trail-road { display: none; }
html[data-shape="phone"] .trail-events { height: 64px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "l b r"; gap: 6px; }
html[data-shape="phone"] .trail-side { gap: 4px; }
html[data-shape="phone"] .herd-count { font-size: 2rem; padding-top: 4px; }
html[data-shape="phone"] .stock-grid { height: 96px; gap: 4px; padding: 0 6px; }
html[data-shape="phone"] .stock-btn { border-radius: 12px; }
html[data-shape="phone"] .stock-btn span { font-size: 1.8rem; }
html[data-shape="phone"] .wild-row { height: 40px; gap: 3px; padding: 0 6px; }
html[data-shape="phone"] .bug-board { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
html[data-shape="phone"] .bug-side { padding: 6px; gap: 4px; }
html[data-shape="phone"] .bug-btns { height: 104px; gap: 4px; }
html[data-shape="phone"] .bug-btn { border-radius: 10px; padding: 2px 3px; gap: 2px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html[data-shape="phone"] .bug-txt i { display: none; }
html[data-shape="phone"] .bug-txt b { font-size: 0.62rem; }
html[data-shape="phone"] .bug-txt em { font-size: 0.6rem; }
html[data-shape="phone"] .lot-total { font-size: 1.3rem; }
html[data-shape="phone"] .cb-board { --lp-gap: 5px; padding: 4px; }
html[data-shape="phone"] .wild-btn { border-radius: 9px; }
html[data-shape="phone"] .wild-btn span { font-size: 1.15rem; }
html[data-shape="phone"] .tap-pop b { font-size: 3.2rem; }
html[data-shape="phone"] .play-top { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
html[data-shape="phone"] .setup .play-top { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
html[data-shape="phone"] .play-top .tiny { padding: 0 10px; font-size: 0.85rem; }
html[data-shape="phone"] .pill.tiny.back-btn { padding: 0 9px; font-size: 0.8rem; min-height: 32px; }
html[data-shape="phone"] .top-center { gap: 6px; font-size: 0.9rem; }
html[data-shape="phone"] .top-center > b { font-size: 1rem; }
html[data-shape="phone"] .punch-title { font-size: 1rem; }
html[data-shape="phone"] .count-pill { display: none; }
html[data-shape="phone"] .look-switch button { min-width: 0; padding: 0 10px; font-size: 0.85rem; }
html[data-shape="phone"] .look-word, html[data-shape="share"] .look-word, html[data-shape="dock"] .look-word { display: none; }
html[data-shape="share"] .look-switch button, html[data-shape="dock"] .look-switch button { min-width: 0; padding: 0 10px; }
html[data-shape="phone"] .mode-label { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; }
html[data-shape="phone"] .find-title { display: none; }
html[data-shape="phone"] .lp-board { --lp-gap: 4px; padding: 0; }

html[data-shape="dock"] .chrome { gap: 6px; }
html[data-shape="dock"] .brand p { display: none; }

html[data-shape="share"] .trail-board, html[data-shape="dock"] .trail-board { grid-template-columns: 1fr 0.55fr 1fr; gap: 8px; }
html[data-shape="share"] .stock-grid, html[data-shape="dock"] .stock-grid { padding: 0 6px; gap: 6px; }
html[data-shape="share"] .wild-row, html[data-shape="dock"] .wild-row { padding: 0 6px; gap: 4px; }
html[data-shape="share"] .bug-board, html[data-shape="dock"] .bug-board { gap: 8px; }
html[data-shape="share"] .bug-side, html[data-shape="dock"] .bug-side { padding: 6px; gap: 6px; }
html[data-shape="share"] .bug-btns, html[data-shape="dock"] .bug-btns { gap: 5px; height: clamp(110px, 30vh, 180px); }
html[data-shape="share"] .bug-btn, html[data-shape="dock"] .bug-btn { padding: 2px 4px 2px 3px; gap: 2px; }
html[data-shape="share"] .bug-txt b, html[data-shape="dock"] .bug-txt b { font-size: 0.7rem; }
html[data-shape="share"] .bug-txt em, html[data-shape="dock"] .bug-txt em { font-size: 0.68rem; }
html[data-shape="share"] .bug-txt i, html[data-shape="dock"] .bug-txt i { display: none; }
html[data-shape="share"] .cb-board, html[data-shape="dock"] .cb-board { --lp-gap: 6px; }
html[data-shape="share"] .wild-btn span, html[data-shape="dock"] .wild-btn span { font-size: clamp(1.1rem, 4vh, 1.8rem); }
html[data-shape="share"] .spy-hit, html[data-shape="dock"] .spy-hit { width: clamp(80px, 13vw, 140px); }

html[data-short] { --pad: 6px; }
html[data-short] .app { padding: 6px 8px 8px; gap: 6px; }
html[data-short] .logo { width: 32px; height: 32px; font-size: 28px; }
html[data-short] .brand h1 { font-size: 1rem; }
html[data-short] .brand p { display: none; }
html[data-short] .pill,
html[data-short] .name-edit { min-height: 40px; }
html[data-short] .name-edit { min-width: 96px; padding: 0 10px; }
html[data-short] .trash { width: 34px; min-height: 34px; font-size: 0.85rem; }
html[data-short] .names.scored .name-edit { min-width: 0; }
html[data-short] .look-switch button { min-width: 52px; min-height: 36px; padding: 0 10px; }
html[data-short] .theme-cycle,
html[data-shape="dock"] .tip-btn, html[data-shape="dock"] .share-btn { min-width: 0; min-height: 36px; padding: 0 10px; }
html[data-shape="dock"] .share-word { display: none; }
html[data-short] .theme-word { display: none; }
html[data-short] .screen { padding: 8px; border-radius: 18px; }
html[data-short] .play,
html[data-short] .setup { gap: 6px; }
html[data-short] .game-grid { gap: 8px; }
html[data-short] .game-btn { padding: 6px 8px 8px; border-radius: 18px; }
html[data-short] .game-btn .game-ico { font-size: clamp(1.6rem, 9vh, 3.6rem); }
html[data-short] .game-btn h3 { font-size: clamp(0.8rem, 1.6vw, 1.1rem); }
html[data-short] .modes { gap: 10px; padding: 4px; }
html[data-short] .mode-card { border-radius: 20px; padding: 8px; }
html[data-short] .tile { border-radius: 16px; column-gap: 8px; padding: 2px 10px 2px 4px; }
html[data-short] .tiles { gap: 5px; padding: 2px 0; }
html[data-short] .find-board { --gap: 8px; }
html[data-short] .herd-count { font-size: clamp(1.8rem, 6vh, 3rem); padding-top: 4px; }
html[data-short] .stock-grid { height: clamp(100px, 32vh, 160px); gap: 5px; padding: 0 6px; }
html[data-short] .stock-btn { border-radius: 12px; }
html[data-short] .stock-btn span { font-size: clamp(1.6rem, 9vh, 2.6rem); }
html[data-short] .wild-row { height: clamp(34px, 9vh, 48px); gap: 3px; padding: 0 6px; }
html[data-short] .bug-btns { height: clamp(88px, 30vh, 140px); gap: 4px; }
html[data-short] .bug-txt i { display: none; }
html[data-short] .lot-total { font-size: clamp(1.1rem, 5vh, 1.8rem); }
html[data-short] .wild-btn span { font-size: clamp(1rem, 5vh, 1.5rem); }
html[data-short] .lp-board { --lp-gap: 5px; padding: 2px; }
html[data-short] .bingo-board { gap: 5px; }
html[data-short] .punch-board { gap: 8px; }
html[data-short] .play-top { gap: 6px; min-height: 36px; }
html[data-short] .tiny { min-height: 36px; }
html[data-short] .count-pill { min-height: 36px; padding: 0 10px; font-size: 0.85rem; }
html[data-short] .win-card h2 { font-size: 1.8rem; }
html[data-short] .win-bar { padding: 6px 10px; gap: 10px; border-radius: 18px; }
html[data-short] .win-bar .primary { min-width: 96px; }
html[data-short] .win-bar .pill { min-height: 40px; }
html[data-short] .wager-who { display: none; }
html[data-short] .ride { min-height: 44px; }
html[data-short] .ride-on { min-height: 40px; }
html[data-shape="phone"] .win-bar { grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; padding: 8px 10px; }
html[data-shape="phone"] .win-bar .actions { order: 2; }
html[data-shape="phone"] .win-bar .actions { grid-column: 1 / -1; }
html[data-shape="phone"] .win-bar .actions .pill { flex: 1; min-width: 0; min-height: 40px; }
html[data-shape="phone"] .win-bar h2 { font-size: 1.2rem; }
html[data-shape="phone"] .wager-who { display: none; }
html[data-shape="phone"] .series { display: none; }
html[data-short] .score-big { font-size: clamp(1.8rem, 7vh, 3rem); }
html[data-short] .thermo { width: 34px; }
html[data-short] .thermo .bulb { width: 34px; height: 34px; font-size: 0.95rem; }
html[data-short] .thermo .tube { width: 16px; }
html[data-short] .spy-board { gap: 8px; }
html[data-short] .spy-side { gap: 6px; }
html[data-short] .spy-stage { padding: 8px; gap: 2px; }
html[data-short] .letter-stage { gap: 10px; padding: 2px; }

/* Newer games: phone portrait stacks the two seats; short and dock shapes
   drop the help lines and shrink the strips. */

html[data-shape="phone"] .risk-board { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
html[data-shape="phone"] .risk-mid { grid-column: 1 / -1; order: -1; }
html[data-shape="phone"] .risk-side { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 64px; height: 44vh; }
html[data-shape="phone"] .risk-side .risk-hit { order: 2; }
html[data-shape="phone"] .bank-total { font-size: 1.3rem; }
html[data-shape="phone"] .wager-coins { height: 30px; }
html[data-shape="phone"] .wager-coins { --coin: 28px; }
html[data-shape="phone"] .wager-amt { font-size: 0.9rem; }
html[data-shape="phone"] .haunt-strip { height: auto; grid-template-columns: 1fr 1fr; gap: 8px; }
html[data-shape="phone"] .haunt-strip .haunt-stage { grid-column: 1 / -1; order: -1; padding: 8px 12px; }
html[data-shape="phone"] .haunt-stage .spy-ico { font-size: 3rem; }
html[data-shape="phone"] .haunt-stage h2 { font-size: 1.3rem; }
html[data-shape="phone"] .haunt-hit { width: auto; height: 60px; }
html[data-shape="phone"] .rooms { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
html[data-shape="phone"] .room { padding: 6px 8px; border-radius: 16px; }
html[data-shape="phone"] .room-note { font-size: 0.75rem; }
html[data-shape="phone"] .tb-board { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
html[data-shape="phone"] .tb-item .cap { display: none; }
html[data-shape="phone"] .tb-item .ico { font-size: 66cqw; padding-top: 0; }
html[data-shape="phone"] .tb-item { grid-template-rows: minmax(0, 1fr); }
html[data-shape="phone"] .tb-score { font-size: 1.8rem; }
html[data-shape="phone"] .finish-ctl { height: 196px; gap: 6px; }
html[data-shape="phone"] .finish-side, html[data-shape="phone"] .finish-pair { gap: 5px; }
html[data-shape="phone"] .finish-card { padding: 2px 6px; gap: 5px; border-radius: 14px; }
html[data-shape="phone"] .finish-card .spy-ico, html[data-shape="phone"] .finish-card .bull { font-size: 1.5rem; }
html[data-shape="phone"] .finish-card .finish-words b { font-size: 0.85rem; }
html[data-shape="phone"] .finish-card .finish-words small { font-size: 0.55rem; }
html[data-shape="phone"] .tank { height: 26px; }
html[data-shape="phone"] .tank .cap { padding: 0 8px; font-size: 0.72rem; }
html[data-shape="phone"] .tank .cap-word { display: none; }
html[data-shape="phone"] .wb { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
html[data-shape="phone"] .tray { padding: 4px; gap: 3px; }
html[data-shape="phone"] .stuck, html[data-shape="phone"] .pending { --base: calc(var(--cell-w, 160px) * 0.24); }
html[data-shape="phone"] .stk-tools .pill { min-width: 38px; min-height: 38px; padding: 0 8px; }

html[data-shape="share"] .risk-board, html[data-shape="dock"] .risk-board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
html[data-shape="share"] .risk-side, html[data-shape="dock"] .risk-side { gap: 6px; }
html[data-shape="share"] .haunt-hit, html[data-shape="dock"] .haunt-hit { width: clamp(80px, 13vw, 140px); }
/* Narrow layouts: the bet box is too slim for coins between two pills, so
   the setter's − and + move to a row underneath. Both seats get that row
   (empty on the locked side) so the two boxes stay the same height. */
html[data-shape="share"] .risk-board .wager, html[data-shape="dock"] .risk-board .wager, html[data-shape="phone"] .risk-board .wager {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 44px;
  grid-template-areas: "m m" "d u";
  padding: 6px;
  gap: 6px;
}
html[data-shape="share"] .risk-board .wager-mid, html[data-shape="dock"] .risk-board .wager-mid, html[data-shape="phone"] .risk-board .wager-mid { grid-area: m; width: 100%; }
html[data-shape="share"] .risk-board .wager-btn, html[data-shape="dock"] .risk-board .wager-btn, html[data-shape="phone"] .risk-board .wager-btn { min-width: 0; min-height: 44px; padding: 0; font-size: 1.5rem; border-radius: 14px; }
html[data-shape="share"] .risk-board [data-wager="down"], html[data-shape="dock"] .risk-board [data-wager="down"], html[data-shape="phone"] .risk-board [data-wager="down"] { grid-area: d; }
html[data-shape="share"] .risk-board [data-wager="up"], html[data-shape="dock"] .risk-board [data-wager="up"], html[data-shape="phone"] .risk-board [data-wager="up"] { grid-area: u; }
html[data-shape="share"] .wager-coins, html[data-shape="dock"] .wager-coins { height: 36px; }
html[data-shape="share"] .wager-amt, html[data-shape="dock"] .wager-amt { font-size: 1rem; }
html[data-shape="share"] .finish-ctl, html[data-shape="dock"] .finish-ctl { gap: 8px; }
html[data-shape="share"] .finish-side, html[data-shape="dock"] .finish-side, html[data-shape="share"] .finish-pair, html[data-shape="dock"] .finish-pair { gap: 6px; }
html[data-shape="share"] .finish-card, html[data-shape="dock"] .finish-card { padding: 2px 10px; gap: 8px; }
html[data-shape="share"] .finish-card .spy-ico, html[data-shape="dock"] .finish-card .spy-ico, html[data-shape="share"] .finish-card .bull, html[data-shape="dock"] .finish-card .bull { font-size: clamp(1.4rem, 6vh, 2.4rem); }
html[data-shape="share"] .finish-card .finish-words b, html[data-shape="dock"] .finish-card .finish-words b { font-size: clamp(0.95rem, 2.2vw, 1.3rem); }
html[data-shape="share"] .tank, html[data-shape="dock"] .tank { height: 28px; }
html[data-shape="share"] .tank .cap, html[data-shape="dock"] .tank .cap { font-size: 0.8rem; padding: 0 10px; }
html[data-shape="share"] .wb, html[data-shape="dock"] .wb { gap: 8px; }
html[data-shape="share"] .tb-item, html[data-shape="dock"] .tb-item { grid-template-rows: minmax(0, 1fr); border-width: 1px; }
html[data-shape="share"] .tb-item .cap, html[data-shape="dock"] .tb-item .cap { display: none; }
html[data-shape="share"] .tb-item .ico, html[data-shape="dock"] .tb-item .ico { font-size: 66cqw; padding-top: 0; }

html[data-short] .wager-btn { min-width: 48px; min-height: 48px; font-size: 1.5rem; border-radius: 14px; }
html[data-short] .wager { padding: 6px 8px; gap: 6px; }
html[data-short] .wager-coins { height: 36px; }
html[data-short] .bank-total { font-size: clamp(1.2rem, 4vh, 1.8rem); }
html[data-short] .haunt-strip { height: clamp(80px, 20vh, 130px); gap: 8px; }
html[data-short] .haunt-board { gap: 6px; }
html[data-short] .rooms { gap: 8px; }
html[data-short] .room { padding: 6px 8px 4px; gap: 4px; }
html[data-short] .room-note { font-size: 0.75rem; }
html[data-short] .tb-board { gap: 8px; }
html[data-shape="dock"] .tb-yard { --asp: 1.5; }
html[data-short] .tb-score { font-size: clamp(1.6rem, 6vh, 2.6rem); }
html[data-short] .wb { gap: 8px; }
html[data-short] .finish-ctl { height: clamp(110px, 30vh, 170px); gap: 8px; }
html[data-short] .finish-side, html[data-short] .finish-pair { gap: 4px; }
html[data-short] .tank { height: 24px; }
html[data-short] .tank .cap { font-size: 0.75rem; }
html[data-short] .finish-card { padding: 2px 10px; }
html[data-short] .finish-board { gap: 6px; }
html[data-short] .lap { top: 6px; padding: 4px 10px; }

/* A phone held sideways lays out 1:1 in the dock shape, so the piles get a
   real 390px or so of height: flatter cards, icon only, small saucer gap. */
html[data-shape="dock"] .tile .ico { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3)); }

/* ---------- /stats page ----------
   Games lock html/body to overflow:hidden so the cabin never scrolls.
   This page is a long report, so unlock the root and let the body grow. */

html.stats-root,
html.stats-root body.stats-body {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: auto;
  touch-action: pan-y;
  user-select: text;
  -webkit-user-select: text;
}

html.stats-root .sky {
  pointer-events: none;
}

.stats-page {
  position: relative;
  z-index: 2;
  width: min(880px, 94vw);
  margin: 0 auto;
  padding: 18px 0 40px;
  display: grid;
  gap: 16px;
}

.stats-page #stats {
  display: grid;
  gap: 16px;
}

.stats-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.stats-head h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  letter-spacing: -0.03em;
}

.stats-head .back-btn { text-decoration: none; }
.stats-scope { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

.stats-range {
  justify-self: end;
  appearance: auto;
  border: 1px solid var(--stroke);
  color: inherit;
  font: inherit;
  font-weight: 700;
  border-radius: 999px;
  min-height: 40px;
  padding: 0 12px;
  cursor: pointer;
}

.stat-panel h3 {
  margin: 16px 0 8px;
  font-size: 0.95rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stat-card {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 16px 12px;
  border-radius: 22px;
  text-align: center;
}

.stat-card b { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1; letter-spacing: -0.04em; }
.stat-card b small { font-size: 0.5em; color: var(--muted); }
.stat-card span { font-weight: 700; color: var(--muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-card em { margin-top: 6px; font-style: normal; font-size: 0.8rem; color: var(--muted); }
.stat-card-sites {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  margin-top: 8px;
}
.stat-card-sites em {
  margin: 0;
  display: grid;
  gap: 1px;
  justify-items: center;
  font-size: 0.68rem;
  line-height: 1.15;
}
.stat-card-sites i {
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.stat-card-sites b { font-size: 0.92rem; letter-spacing: -0.03em; }

.stat-panel { padding: 18px 20px; border-radius: 26px; }
.stat-panel h2 { margin: 0 0 12px; font-size: 1.25rem; letter-spacing: -0.02em; }

.stat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.stat-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.stat-row.zero { opacity: 0.55; }
.stat-emoji { font-family: var(--emoji); font-size: 1.5rem; line-height: 1; }
.stat-main { display: grid; gap: 4px; min-width: 0; }
.stat-main b { font-size: 1.05rem; }
.stat-sub { font-size: 0.85rem; color: var(--muted); }
.stat-n { font-weight: 850; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.stat-split {
  display: grid;
  grid-template-columns: repeat(4, minmax(2.35rem, auto));
  gap: 2px 5px;
  justify-items: end;
  align-items: end;
  font-variant-numeric: tabular-nums;
}
.stat-split i {
  font-style: normal;
  font-weight: 700;
  font-size: 0.56rem;
  line-height: 1.1;
  color: var(--muted);
  letter-spacing: -0.04em;
  text-align: right;
  max-width: 4.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-split b {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}
.stat-split .tot { font-weight: 900; }
.stat-row.stat-split-head {
  padding-top: 2px;
  padding-bottom: 0;
  background: transparent;
  opacity: 1;
}
.stat-row.stat-split-head .stat-split { align-items: end; }

.stat-modes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.stat-modes li {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  font-size: 0.85rem;
  color: var(--muted);
}
.stat-modes li b { color: var(--ink); font-variant-numeric: tabular-nums; }

.stat-empty { margin: 0; color: var(--muted); }
.stat-note { margin: 12px 0 0; font-size: 0.85rem; line-height: 1.4; color: var(--muted); }

.stats-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--muted);
}
.stats-foot .pill { text-decoration: none; }

@media (max-width: 640px) {
  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .stats-head h1 { text-align: left; font-size: 1.2rem; }
}

@media (max-width: 430px) {
  .stat-row { gap: 8px; padding: 8px; }
  .stat-main b { font-size: 0.95rem; }
  .stat-split {
    grid-template-columns: repeat(4, minmax(2.05rem, auto));
    gap: 2px 3px;
  }
  .stat-split i { font-size: 0.5rem; max-width: 3.8rem; }
  .stat-split b { font-size: 0.84rem; }
  .stat-card-sites { gap: 2px; margin-top: 6px; }
  .stat-card-sites i { font-size: 0.58rem; }
  .stat-card-sites b { font-size: 0.8rem; }
}
html[data-shape="phone"] .share-card h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }

.stat-days { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-top: 6px; }
.stat-day { flex: 1; min-width: 0; display: grid; grid-template-rows: 1fr auto; align-items: end; justify-items: center; height: 100%; }
.stat-day i { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--left), color-mix(in srgb, var(--left) 40%, transparent)); }
.stat-day span { font-size: 0.6rem; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.stat-day:nth-child(odd) span { visibility: hidden; }