:root {
  --bg: #14111f;
  --card: #221d33;
  --card-2: #2d2644;
  --text: #f4f1ff;
  --muted: #a59fc2;
  --accent: #ffcc33;
  --accent-text: #1a1400;
  --danger: #ff4d6d;
  --ok: #3ddc97;
  --radius: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

main {
  max-width: 480px;
  margin: 0 auto;
  /* (A clear strip along the bottom: on iPhones a tap near the bottom edge brings up Safari's
     address and tab bars instead of reaching the button.) */
  padding: max(20px, env(safe-area-inset-top)) 16px calc(max(24px, env(safe-area-inset-bottom)) + 44px);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

h1 { font-size: clamp(1.8rem, 9.5vw, 2.4rem); margin: 24px 0 0; text-align: center; letter-spacing: -0.02em; white-space: nowrap; }
h1 span { color: var(--accent-ink, var(--accent)); }
h1 .logo-emoji { color: inherit; font-size: 0.8em; display: inline-block; }
h1 .logo-emoji:first-child { transform: rotate(-12deg); }
h1 .logo-emoji:last-child { transform: rotate(12deg); }
h2 { margin: 0; font-size: 1.1rem; color: var(--muted); font-weight: 600; }
p { margin: 0; }

.tagline { text-align: center; color: var(--muted); }
.muted { color: var(--muted); }
.center { text-align: center; }
.spacer { flex: 1; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

input {
  width: 100%;
  font: inherit;
  font-size: 1.15rem;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: var(--card-2);
  color: var(--text);
  outline: none;
}
input:focus { border-color: var(--accent); }
input.code { text-transform: uppercase; letter-spacing: 0.3em; font-weight: 700; text-align: center; }

button {
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 16px;
  border-radius: 12px;
  border: none;
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
  width: 100%;
}
button { touch-action: manipulation; }
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.4; }
button.secondary { background: var(--card-2); color: var(--text); }
button.link { background: none; color: var(--muted); font-weight: 500; padding: 8px; font-size: 0.95rem; }

.or { text-align: center; color: var(--muted); font-size: 0.9rem; }
.error { color: var(--danger); text-align: center; min-height: 1.2em; }

.room-code {
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-align: center;
  color: var(--accent-ink, var(--accent));
}
.qr { width: 180px; height: 180px; margin: 0 auto; background: #fff; border-radius: 12px; padding: 8px; }

.players { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.players li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-2);
  padding: 12px 14px;
  border-radius: 12px;
}
.players li.offline { opacity: 0.45; }
.players .name { flex: 1; font-weight: 600; }
.players .tag { font-size: 0.8rem; color: var(--muted); }
.players .kick { width: auto; padding: 4px 10px; font-size: 0.9rem; background: none; color: var(--muted); }

.games { display: flex; flex-direction: column; gap: 8px; }
.game-option { text-align: left; background: var(--card-2); color: var(--text); border: 2px solid transparent; }
.game-option.selected { border-color: var(--accent); }
.game-option small { display: block; font-weight: 400; color: var(--muted); margin-top: 4px; }

.timer { font-variant-numeric: tabular-nums; color: var(--accent-ink, var(--accent)); }


.vote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vote-grid button { background: var(--card-2); color: var(--text); border: 2px solid transparent; padding: 18px 8px; word-break: break-word; }
.vote-grid button.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--card-2)); }
.vote-grid button .check { color: var(--ok); font-size: 0.85rem; display: block; font-weight: 500; }

.drink {
  border-radius: var(--radius);
  padding: 28px 16px;
  text-align: center;
  background: var(--card);
}
.drink.me { background: var(--danger); color: #fff; animation: pulse 0.6s ease-in-out 3; }
.drink .big { font-size: 2.2rem; font-weight: 900; }
.drink .sips { font-size: 1.2rem; margin-top: 6px; }

@keyframes pulse { 50% { transform: scale(1.04); } }


.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--card-2);
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* ---------- Shared game components ---------- */

.vote-grid button.offline { opacity: 0.45; }
.players .count { font-weight: 800; color: var(--accent-ink, var(--accent)); }

.turn {
  text-align: center;
  font-weight: 800;
  font-size: 1.3rem;
  padding: 12px;
  border-radius: 12px;
  background: var(--card);
}
.turn.mine { background: var(--accent); color: var(--accent-text); }
.turn span { display: block; font-size: 0.95rem; font-weight: 500; opacity: 0.8; }
/* PB.turn: whose turn, in their colour. Yours is a big solid banner (it pulses when it's just become
   yours); anyone else's is their avatar and name on a tint of their colour. */
.turn[style*="--pc"].mine {
  background: var(--pc);
  color: var(--pc-ink, #fff);
  font-size: clamp(1.5rem, 8vw, 1.9rem);
  letter-spacing: 0.04em;
  padding: 14px 12px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 45%, transparent), 0 8px 28px color-mix(in srgb, var(--pc) 45%, transparent);
}
.turn[style*="--pc"].mine .av { background: color-mix(in srgb, #fff 35%, transparent); box-shadow: inset 0 0 0 2px var(--pc-ink, #fff); }
.turn[style*="--pc"].mine span { letter-spacing: 0; font-size: 1rem; opacity: 0.9; }
.turn.mine.fresh { animation: turn-pop 0.5s ease-out 2; }
@keyframes turn-pop { 50% { transform: scale(1.045); } }
.turn[style*="--pc"].theirs {
  background: color-mix(in srgb, var(--pc) 16%, var(--card));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc) 55%, transparent);
  font-size: 1.25rem;
}
.turn.theirs .turn-who { flex-wrap: wrap; }
.turn.theirs .turn-who .av { font-size: 1.05rem; }
.turn .turn-next { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-size: 0.85rem; font-weight: 600; opacity: 0.85; letter-spacing: 0; }
.turn .turn-next .av { font-size: 0.65rem; }
.turn .turn-next.you { opacity: 1; font-weight: 800; color: var(--accent-ink, var(--accent)); }
/* The edge of the screen glows in your colour while the game is waiting on you (app.js). */
body.my-turn::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  box-shadow: inset 0 0 0 4px var(--me-color, var(--accent)), inset 0 0 28px color-mix(in srgb, var(--me-color, var(--accent)) 55%, transparent);
}

/* PB.giveSips: handing out sips. */
.give-panel { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc, var(--accent)) 60%, transparent); }
.give-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 1.15rem; }
.give-ask { color: var(--muted); font-size: 0.9rem; margin-top: -6px; }
.give-people { display: flex; flex-direction: column; gap: 6px; }
.give-row { display: flex; gap: 6px; align-items: stretch; }
.give-row .give-who {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 8px 12px;
  background: var(--card-2);
  color: var(--text);
  border: 2px solid transparent;
  min-width: 0;
}
.give-row .give-who span:not(.av) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.give-row.on .give-who { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 22%, var(--card-2)); }
.give-n { min-width: 1.9em; padding: 2px 8px; border-radius: 99px; background: var(--pc); color: #141018; text-align: center; font-size: 1.1rem; }
.give-step { width: 48px; flex: none; padding: 8px 0; font-size: 1.3rem; }
.give-tools { display: flex; gap: 8px; }
.give-tools button { padding: 10px; font-size: 0.95rem; }
.give-done { font-size: 1.15rem; }
.give-note { color: var(--muted); font-size: 0.8rem; text-align: center; margin-top: -4px; }
.give-wait { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.give-wait-who { display: flex; gap: 4px; justify-content: center; }
.give-wait .link { width: auto; }

.option { display: flex; flex-direction: column; gap: 6px; }
.segmented { display: flex; gap: 6px; flex-wrap: wrap; }
.segmented button { flex: 1; padding: 10px; font-size: 0.95rem; background: var(--card-2); color: var(--text); border: 2px solid transparent; width: auto; }
.segmented button.selected { border-color: var(--accent); }

.row { display: flex; gap: 10px; }
.row > * { flex: 1; }

.feed { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.feed li:first-child { color: var(--text); }

/* Playing cards */
.cards { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pcard {
  position: relative;
  /* (rem, like its text: the TV's text is bigger, so its cards are too and the pips fit) */
  width: 4rem;
  height: 5.75rem;
  border-radius: 8px;
  background: #fff;
  color: #111;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex: none;
}
.pcard.red { color: #d61f3c; }
.pcard.joker { color: #7b3fe4; }
.pcard .pip { font-size: 2rem; }
.pcard .corner { position: absolute; top: 4px; left: 6px; font-size: 0.85rem; line-height: 1; text-align: center; }
.pcard .corner.br { top: auto; left: auto; bottom: 4px; right: 6px; transform: rotate(180deg); }
.pcard.back {
  background: repeating-linear-gradient(45deg, var(--back-1, #5b3fd1) 0 6px, var(--back-2, #4a31b5) 6px 12px);
  border: 4px solid #fff;
}
.pcard.lg { width: 6.875rem; height: 9.875rem; }
.pcard.lg .pip { font-size: 3.6rem; }
.pcard.lg .corner { font-size: 1.2rem; top: 6px; left: 8px; }
.pcard.lg .corner.br { top: auto; left: auto; bottom: 6px; right: 8px; }
.pcard.xl { width: 9.375rem; height: 13.5rem; border-radius: 12px; }
.pcard.xl .pip { font-size: 5rem; }
.pcard.xl .corner { font-size: 1.7rem; top: 8px; left: 10px; }
.pcard.xl .corner.br { top: auto; left: auto; bottom: 8px; right: 10px; }
.pcard.md { width: 4.25rem; height: 6.125rem; border-radius: 8px; }
.pcard.md .pip { font-size: 2rem; }
.pcard.md .corner { font-size: 0.95rem; top: 4px; left: 6px; }
.pcard.md .corner.br { display: none; }
.pcard.sm { width: 2.75rem; height: 4rem; border-radius: 6px; }
.pcard.sm .pip { font-size: 1.3rem; }
.pcard.sm .corner { font-size: 0.65rem; top: 3px; left: 4px; }
.pcard.sm .corner.br { display: none; }

/* Dice */
.dice { display: flex; gap: 16px; justify-content: center; }
.die {
  width: 76px;
  height: 76px;
  background: var(--die, #fff);
  border-radius: 14px;
  padding: 10px;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.die i { border-radius: 50%; margin: 3px; }
.die i.on { background: var(--pip, #111); }
.die.rolling { animation: roll 0.5s ease-out; }
@keyframes roll {
  0% { transform: rotate(-200deg) scale(0.6); }
  70% { transform: rotate(15deg) scale(1.08); }
  100% { transform: rotate(0) scale(1); }
}

/* "Drink!" alert when someone hands you sips */
.drink-alert {
  position: fixed;
  inset: 0;
  background: rgba(255, 77, 109, 0.96);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  font-size: 1.2rem;
  z-index: 10;
  animation: pulse 0.6s ease-in-out 2;
}
.drink-alert[hidden] { display: none; }
/* Your turn: a strip across the top (app.js), leaving the controls below free to use. */
.drink-alert.compact { inset: max(8px, env(safe-area-inset-top)) 8px auto; padding: 10px 14px; gap: 2px; border-radius: 14px; font-size: 0.95rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); animation: none; }
.drink-alert.compact .big { font-size: 1.5rem; }
.drink-alert.compact .drink-from { font-size: 1rem; }
.drink-alert.compact small { margin-top: 2px; }
.drink-alert .big { font-size: 3rem; font-weight: 900; }
.drink-alert .drink-from { font-size: 1.5rem; }
.drink-alert .drink-from b { font-weight: 900; }
.drink-alert small { opacity: 0.75; margin-top: 16px; }

/* ---------- Full-screen game layout ---------- */

.fs-screen {
  position: fixed;
  inset: 0;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 12px calc(max(12px, env(safe-area-inset-bottom)) + 30px);
}
.fs-header { display: flex; gap: 8px; align-items: stretch; }
.fs-header .turn { flex: 1; font-size: 1.05rem; padding: 8px 12px; }
.fs-header .turn span { font-size: 0.85rem; }
.fs-header .turn[style*="--pc"].mine, .fs-header .turn[style*="--pc"].theirs { font-size: 1.1rem; padding: 8px 10px; letter-spacing: 0.02em; }
.fs-header .turn .turn-who { flex-wrap: nowrap; }
.fs-header .turn .turn-who .av { font-size: 0.75rem; }
.exit-menu { position: relative; display: flex; }
.exit-menu summary { list-style: none; display: flex; align-items: center; border-radius: 12px; cursor: pointer; }
.exit-menu summary::-webkit-details-marker { display: none; }
.exit-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; gap: 8px; padding: 10px; min-width: 190px; background: var(--card); border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); }
.end-mini {
  width: auto;
  padding: 0 12px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--card);
  color: var(--muted);
}

.pad {
  position: relative;
  flex: 1;
  border-radius: 20px;
  background: var(--card);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.pad-top {
  position: absolute;
  top: 12px;
  left: 16px;
  right: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  pointer-events: none;
}
.pad-top.notice { color: var(--danger); font-weight: 700; font-size: 1rem; }
.pad-feed {
  position: absolute;
  left: 16px;
  right: 84px;
  bottom: 22px;
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* ---------- Slevens ---------- */

.dice-centre {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.dice-centre .dice { gap: 20px; }
.dice-centre .die { width: 96px; height: 96px; padding: 13px; border-radius: 18px; }
.dice-centre.faded { opacity: 0.18; }
.dice.spinning .die { transform: rotate(var(--r, 12deg)); }
.dice.spinning .die:nth-child(2) { --r: -14deg; }

.roll-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 176px;
  height: 176px;
  border-radius: 50%;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  box-shadow: 0 0 0 12px rgba(255, 204, 51, 0.15), 0 10px 30px rgba(0,0,0,0.4);
}
.roll-btn:active { transform: translate(-50%, -50%) scale(0.95); }

.dot {
  position: absolute;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(255, 204, 51, 0.16);
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 8px rgba(255, 204, 51, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  animation: pop 0.2s ease-out;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.dot[hidden] { display: none; }
.dot.start { animation: pop 0.2s ease-out, glow 1.2s ease-in-out infinite; }
.dot.reached { background: rgba(61, 220, 151, 0.22); border-color: var(--ok); box-shadow: 0 0 0 8px rgba(61, 220, 151, 0.2); animation: none; transform: scale(1.08); }
.trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.trail polyline { fill: none; stroke: var(--ok); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
@keyframes pop { from { transform: scale(0); } }
@keyframes glow { 50% { box-shadow: 0 0 0 16px rgba(255, 204, 51, 0.1); } }


.reverse {
  position: absolute;
  left: 0;
  right: 0;
  top: 18%;
  text-align: center;
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--ok);
  pointer-events: none;
  animation: pulse 0.5s ease-in-out 3;
}
.pad-picker {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 64%;
  max-height: calc(36% - 84px);
  overflow-y: auto;
  touch-action: pan-y;
}

.next-arrow {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 77, 109, 0.14);
  color: var(--danger);
  font-size: 1.7rem;
  line-height: 1;
  z-index: 3;
}

/* Slevens streak banner and HIT */
.pad-top.race { color: var(--accent-ink, var(--accent)); font-weight: 700; }
.reverse.hit { color: var(--accent-ink, var(--accent)); }
.reverse.long { font-size: 2.1rem; }

/* ---------- Mad Max ---------- */
/* The pile: top card in front, the two before it fanned out behind so their numbers show. */
.mm-pile { position: relative; height: 240px; }
.mm-fan { position: absolute; left: 50%; bottom: 8px; margin-left: -75px; transform-origin: 50% 100%; }
.mm-fan .pcard { box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.mm-fan.fan-1 { transform: translateX(-14px) rotate(-12deg); }
.mm-fan.fan-2 { transform: translateX(-26px) rotate(-24deg); }
.mm-pile-label { margin: 0; font-size: 0.85rem; }
.mm-last { text-align: center; margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--card); }
.mm-last.right { color: var(--ok); }
.mm-last.wrong { color: var(--danger); }
.mm-calls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-calls button { padding: 16px 8px; }
.mm-suits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mm-suits button { font-size: 1.8rem; padding: 10px 0; color: var(--text); }
.mm-suits button.red { color: var(--danger); }
.mm-suits button svg.pip { width: 1.6rem; height: 1.6rem; display: block; margin: 0 auto; fill: currentColor; }
.mm-seats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mm-seat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--card); min-width: 76px; font-size: 0.85rem; border: 2px solid transparent; }
.mm-seat b { font-variant-numeric: tabular-nums; }
.mm-seat.turn { border-color: var(--accent); }
.mm-seat.out, .mm-seat.offline { opacity: 0.45; }
.mm-war-row-btns { display: flex; gap: 10px; }
.mm-war-row-btns .mm-war-btn { flex: 1; }
.mm-pass { width: 76px; flex: none; background: var(--card-2); color: var(--muted); font-size: 1.6rem; }
.mm-war-btn { background: var(--danger); color: #fff; font-size: 1.6rem; font-weight: 900; padding: 20px; animation: pulse 0.9s ease-in-out infinite; }
.turn.war-head { background: var(--danger); color: #fff; }
.mm-war { display: flex; flex-direction: column; gap: 10px; }
.mm-war-row { display: flex; gap: 10px; align-items: center; background: var(--card); border-radius: 12px; padding: 10px; }
.mm-war-name { display: flex; flex-direction: column; width: 76px; flex: none; }
.mm-war-name small { color: var(--muted); }
.mm-wins { color: var(--accent-ink, var(--accent)); letter-spacing: 2px; }
.mm-war-cards { justify-content: flex-start; flex: 1; min-width: 0; gap: 6px; flex-wrap: wrap; }
.mm-war-card { border-radius: 8px; }
.mm-war-card.won { box-shadow: 0 0 0 3px var(--accent); }
.mm-war-card.tb { outline: 2px dashed var(--muted); outline-offset: 2px; }
.mm-round { margin: 0; }
.mm-outright { color: var(--danger); font-weight: 700; margin: 0; }
.drink.win { background: var(--accent); color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) { .mm-war-btn { animation: none; } }

/* ---------- Full screen ---------- */
.fs-btn { font-size: 0.95rem; padding: 12px; }
.fs-btn[hidden] { display: none; }
.stay-btn { font-size: 0.95rem; padding: 12px; }
.stay-btn.on { color: var(--accent-ink, var(--accent)); box-shadow: inset 0 0 0 2px var(--accent); }

/* ---------- Pass and play links ---------- */
.pass-play { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-link {
  display: block;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 14px 8px;
  border-radius: 12px;
  background: var(--card-2);
  color: var(--text);
}
.btn-link:active { transform: scale(0.98); }

/* ---------- Ride the Bus ---------- */
.red-btn { background: var(--danger); color: #fff; }
.black-btn { background: #0b0a10; color: #fff; box-shadow: inset 0 0 0 2px var(--card-2); }
.rb-label { margin: 0; font-size: 0.95rem; color: var(--muted); }
.rb-hand { justify-content: flex-start; gap: 8px; }
.rb-card-btn { width: auto; padding: 0; background: none; border-radius: 10px; box-shadow: 0 0 0 3px var(--accent); }
.rb-card-btn.selected { box-shadow: 0 0 0 4px var(--ok); transform: translateY(-6px); }
.rb-card.dim { opacity: 0.45; }
.rb-pyramid { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0; }
.rb-row { position: relative; display: flex; gap: 6px; justify-content: center; }
.rb-sips { position: absolute; left: -26px; top: 50%; transform: translateY(-50%); color: var(--accent-ink, var(--accent)); font-weight: 800; font-size: 0.85rem; }
.rb-spot { border-radius: 8px; }
.rb-spot.current { box-shadow: 0 0 0 3px var(--accent); }
.rb-claim { border: 2px solid var(--danger); }
.rb-claim p { margin: 0; }
.rb-plays { margin-top: -4px; }
.rb-bus { display: flex; gap: 10px; align-items: flex-start; justify-content: center; }
.rb-bus-start { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: 0.75rem; }
.rb-bus-row { gap: 6px; flex: 1; justify-content: flex-start; }

/* ---------- Kings Cup ---------- */
.kc-card { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kc-rule { background: var(--card); border-radius: 16px; padding: 14px 16px; text-align: center; width: 100%; }
.kc-rule p { margin: 6px 0 0; line-height: 1.4; }
.kc-title { font-size: 1.6rem; font-weight: 900; color: var(--accent-ink, var(--accent)); }
.kc-prompt { margin-top: 10px; font-size: 1.5rem; font-weight: 800; padding: 10px; border-radius: 12px; background: var(--card-2); }
.kc-cup { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); }
.kc-crowns { display: flex; gap: 10px; font-size: 1.6rem; }
.kc-crowns span { filter: grayscale(1); opacity: 0.35; }
.kc-crowns span.on { filter: none; opacity: 1; }
.kc-effects { list-style: none; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--card); display: flex; flex-direction: column; gap: 6px; font-size: 0.95rem; }
.kc-effects small { color: var(--muted); }
.kc-tap { font-size: 1.8rem; font-weight: 900; padding: 48px 16px; background: var(--danger); color: #fff; animation: pulse 0.7s ease-in-out infinite; }
.kc-tapped { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; border-radius: 16px; background: var(--card); font-size: 1.6rem; font-weight: 900; color: var(--ok); }
.kc-tapped small { font-size: 0.95rem; font-weight: 500; color: var(--muted); }
.kc-rule-form { display: flex; flex-direction: column; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .kc-tap { animation: none; } }

/* Name rows on pass-and-play setup screens */
.name-row-l { display: flex; gap: 8px; }
.name-row-l input { flex: 1; min-width: 0; }
.name-row-l button { width: 52px; flex: none; }

/* Kings Cup ring: the deck fanned face down around the cup */
.kc-ring {
  --size: min(340px, 88vw);
  --r: calc(var(--size) / 2 - 36px);
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  margin: 4px auto;
}
.kc-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 64px;
  margin: -32px 0 0 -22px;
  padding: 0;
  background: none;
  border-radius: 6px;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r)));
  transition: transform 0.15s ease-out;
  pointer-events: none;
}
.kc-slot .pcard { box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
/* Your ring: touching it never scrolls the page, selects text or opens the long-press menu. */
.kc-broke { color: var(--danger); font-weight: 800; font-size: 1.1rem; margin: 4px 0; }
/* On the TV: whose turn it is, big, in their colour (and who's next). */
.kc-up { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; padding: 10px 18px; border-radius: 16px; background: color-mix(in srgb, var(--pc) 22%, var(--card)); box-shadow: inset 0 0 0 3px var(--pc), 0 0 24px color-mix(in srgb, var(--pc) 50%, transparent); font-size: 1.5rem; }
.kc-up b { color: var(--pc); font-weight: 900; }
.kc-up small { width: 100%; text-align: center; color: var(--muted); font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 6px; }
.kc-ring.active { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
/* A picked card slides out of the ring toward the cup. */
.kc-slot.picked { z-index: 2; transform: rotate(var(--a)) translateY(calc(-1 * var(--r) + 30px)) scale(1.15); }
.kc-slot.picked .pcard { box-shadow: 0 0 0 3px var(--accent), 0 8px 20px rgba(0,0,0,0.5); }
/* Dealing: each card sweeps out from the middle to its spot, one after another. */
.kc-slot.dealing { animation: kc-deal 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i) * 28ms); }
@keyframes kc-deal {
  from { transform: rotate(0deg) translateY(0) scale(0.6); opacity: 0; }
  30% { opacity: 1; }
}
.kc-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none; }
.kc-cup-emoji { font-size: 3.4rem; line-height: 1; }
.kc-center .kc-crowns { font-size: 1.1rem; gap: 4px; }
@media (prefers-reduced-motion: reduce) { .kc-slot.dealing { animation: none; } .kc-slot { transition: none; } }

/* Liar's Dice */
.ld-dice { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ld-die .dice { gap: 0; }
.ld-die .die { width: 46px; height: 46px; padding: 6px; border-radius: 10px; }
.ld-die .die i { margin: 2px; }
.ld-die.dim { opacity: 0.25; }
.ld-die.mini .die { width: 30px; height: 30px; padding: 4px; border-radius: 7px; }
.ld-die.mini .die i { margin: 1px; }
.ld-bid { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ld-bid-main { display: flex; align-items: center; gap: 10px; font-size: 1.8rem; }
.ld-builder { display: flex; flex-direction: column; gap: 12px; }
.ld-qty { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ld-qty button { width: 56px; font-size: 1.6rem; padding: 6px 0; }
.ld-qty b { font-size: 2.2rem; min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.ld-faces { display: flex; gap: 6px; justify-content: center; }
.ld-faces button { width: auto; flex: 1; max-width: 56px; padding: 4px; background: transparent; border: 2px solid transparent; border-radius: 12px; }
.ld-faces button.selected { border-color: var(--accent); }
.ld-faces button.low { opacity: 0.35; }
.ld-faces .dice { gap: 0; }
.ld-faces .die { width: 100%; height: auto; aspect-ratio: 1; padding: 5px; border-radius: 8px; }
.ld-faces .die i { margin: 1px; }
.mm-calls.one { grid-template-columns: 1fr; }
.ld-pass { display: flex; flex-direction: column; gap: 12px; padding: 24px 16px; }
.ld-reveal { display: flex; flex-direction: column; gap: 8px; }
.ld-hand { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--card); border: 2px solid transparent; }
.ld-hand > span { font-size: 0.9rem; color: var(--muted); text-align: center; }
.ld-hand.loser { border-color: var(--danger); }
.ld-mine-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ld-mine-head button { width: auto; padding: 6px 12px; font-size: 0.9rem; }
.ld-die.covered { width: 46px; height: 46px; border-radius: 10px; background: var(--card-2); border: 2px dashed var(--muted); display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 800; font-size: 1.2rem; }

/* Settings button beside "End game" */
.game-foot { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.game-foot .link { width: auto; }

/* Player looks: avatar in a circle of the player's colour */
.av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  background: color-mix(in srgb, var(--pc) 30%, transparent);
  box-shadow: inset 0 0 0 2px var(--pc);
  vertical-align: middle;
}
.av.sm { font-size: 0.8rem; }
.av.lg { font-size: 1.8rem; }
.turn .turn-who { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: inherit; }
.turn .turn-who .av { display: inline-flex; font-size: 0.8rem; opacity: 1; font-weight: 400; }
.vote-grid button { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.players li > .av { margin-right: 2px; }
.mm-seat .av { font-size: 0.75rem; }
.av-btn { width: auto; padding: 0; background: none; border-radius: 50%; flex: none; }
.name-card { flex-direction: row; align-items: center; gap: 12px; }
.name-card input { flex: 1; min-width: 0; }
.look-panel header .av { font-size: 1.4rem; }
.look-colors { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.look-colors button { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--pc); border: 3px solid transparent; }
.look-colors button.on { border-color: var(--text); }
.look-avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.look-avatars button { aspect-ratio: 1; padding: 0; font-size: 1.6rem; background: var(--card); border: 2px solid transparent; border-radius: 50%; }
.look-avatars button.on { background: color-mix(in srgb, var(--pc) 30%, transparent); border-color: var(--pc); }
.look-panel h3 { margin: 4px 0 0; font-size: 1rem; display: flex; gap: 8px; align-items: baseline; }
.look-panel h3 small { font-size: 0.8rem; font-weight: 500; }
.look-drinks .house { position: relative; }
.look-drinks .house small { position: absolute; left: 0; right: 0; bottom: -0.15rem; font-size: 0.55rem; font-weight: 700; color: var(--muted); }
.look-panel > button[data-look-done] { background: var(--accent); color: var(--accent-text); padding: 14px; font-weight: 700; font-size: 1.05rem; }
.players .name small { display: block; font-weight: 400; font-size: 0.78rem; }

/* Custom game content editor (opens in the settings sheet style from prefs.js) */
.cx-panel { gap: 18px; }
.cx-field { display: flex; flex-direction: column; gap: 8px; }
.cx-field h3 { margin: 0; }
.cx-hint { margin: 0; font-size: 0.85rem; color: var(--muted); }
.cx-panel textarea, .cx-panel input { width: 100%; font: inherit; font-size: 0.95rem; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--card-2); background: var(--card); color: var(--text); resize: vertical; }
.cx-panel textarea::placeholder, .cx-panel input::placeholder { color: var(--muted); opacity: 0.8; }
.cx-card { display: flex; gap: 10px; align-items: flex-start; }
.cx-rank { flex: none; width: 34px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #fff; color: #111; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,0.3); margin-top: 2px; }
.cx-card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cx-reset, .cx-clear { background: none !important; color: var(--muted); padding: 6px; text-decoration: underline; width: auto; align-self: flex-start; font-size: 0.9rem; }
.cx-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; bottom: -18px; background: var(--bg); padding: 10px 0; }
.cx-save { background: var(--accent) !important; color: var(--accent-text); padding: 14px 28px; font-weight: 700; font-size: 1.05rem; }
.custom-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.custom-row .secondary { width: auto; padding: 10px 14px; font-size: 0.95rem; }
.custom-row small { color: var(--muted); }
/* Middle suit as a shape: square, filled in the card's ink colour */
.pcard svg.pip { width: 0.8em; height: 0.8em; fill: currentColor; display: block; }

/* Shot Poker */
.sp-banner { position: sticky; top: 0; z-index: 5; margin: -4px -4px 0; padding: 10px 12px; border-radius: 12px; background: #0b0a10; color: #fff; border: 2px solid var(--danger); text-align: center; font-weight: 800; letter-spacing: 0.01em; box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
.sp-table { display: flex; flex-direction: column; gap: 8px; padding: 14px 8px; border-radius: 18px; background: radial-gradient(ellipse at center, #1f7a4d 0%, #135c39 70%, #0e4a2e 100%); box-shadow: inset 0 0 0 4px rgba(0,0,0,0.25); }
.sp-board { gap: 6px; flex-wrap: nowrap; }
.sp-board .pcard { width: 3.5rem; height: 5rem; }
.sp-pot { text-align: center; color: #e9fff3; font-weight: 600; font-size: 0.95rem; }
.sp-hole { gap: 12px; }
.sp-actions { gap: 10px; }
.sp-actions > button[data-act="raise"] { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sp-actions > button small { font-weight: 500; opacity: 0.8; font-size: 0.85rem; }
.sp-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-quick button { padding: 10px 6px; font-size: 0.95rem; }
.sp-seats { display: flex; flex-direction: column; gap: 6px; }
.sp-seat { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--card); border: 2px solid transparent; }
.sp-seat.acting { border-color: var(--accent); }
.sp-seat.won { border-color: var(--ok); }
.sp-seat.folded { opacity: 0.45; }
.sp-seat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sp-seat-main small { color: var(--muted); }
.sp-seat-cards { gap: 4px; flex-wrap: nowrap; }
.sp-seat-cards .pcard.sm { width: 2.125rem; height: 3rem; }
.sp-in { min-width: 34px; text-align: center; font-weight: 800; padding: 4px 8px; border-radius: 999px; background: var(--card-2); font-variant-numeric: tabular-nums; }
.sp-in::before { content: '🍺 '; font-size: 0.8em; }
.sp-dealer { display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: #fff; color: #111; font-size: 0.7rem; font-weight: 900; vertical-align: middle; }
.sp-tab ul, .sp-debts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-tab li, .sp-debts li { display: flex; align-items: center; gap: 10px; }
.sp-tab li > span:not(.av), .sp-debts li > span:not(.av) { flex: 1; }
.sp-tab li b { font-variant-numeric: tabular-nums; }
.sp-tab li.offline { opacity: 0.45; }
.sp-debts li > span:not(.av) small { display: block; color: var(--muted); }
.sp-debts .ok { color: var(--ok); font-weight: 700; }
.sp-debts .owed { color: var(--danger); font-weight: 700; }
.sp-pay { width: auto; padding: 8px 14px; font-size: 0.95rem; background: var(--ok); color: #04210f; animation: pulse 0.9s ease-in-out infinite; }
/* Tonight's tab */
.tab-n { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.tab-n small { display: block; font-weight: 500; font-size: 0.78rem; color: var(--muted); }
.sp-tab li b, .sp-tab li em { width: 96px; text-align: right; font-style: normal; font-size: 0.9rem; }
.sp-tab li em { color: var(--muted); width: 64px; }
.sp-tab-head { color: var(--muted); }
.sp-tab-head small { text-align: right; width: 96px; }
.sp-tab-head small:last-child { width: 64px; }
.tab-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tab-head button { width: auto; padding: 6px 12px; font-size: 0.9rem; }

/* Ace Race */
.ar-track { display: flex; flex-direction: column; gap: 3px; padding: 10px 8px; border-radius: 18px; background: radial-gradient(ellipse at center, #1f7a4d 0%, #135c39 70%, #0e4a2e 100%); box-shadow: inset 0 0 0 4px rgba(0,0,0,0.25); }
.ar-row { display: grid; grid-template-columns: 48px repeat(4, 1fr); align-items: center; gap: 4px; min-height: 46px; }
.ar-row.finish { border-bottom: 3px dashed rgba(255,255,255,0.7); padding-bottom: 3px; }
.ar-row.start { border-top: 3px solid rgba(255,255,255,0.35); padding-top: 3px; }
.ar-lane { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; min-height: 40px; border-radius: 8px; background: rgba(0,0,0,0.12); }
.ar-bettors { min-height: 0; }
.ar-bettors .ar-lane { background: none; min-height: 0; }
.ar-side { display: flex; justify-content: center; }
.ar-side .pcard.sm { width: 1.875rem; height: 2.625rem; border-width: 0.125rem; }
.ar-side .pcard.sm .pip { font-size: 1rem; }
.ar-side .pcard.sm .corner { font-size: 0.55rem; }
.ar-side.flash .pcard { box-shadow: 0 0 0 3px var(--danger); }
.ar-flag { font-size: 1.6rem; text-align: center; }
.ar-start { font-size: 0.75rem; font-weight: 800; color: #e9fff3; text-align: center; text-transform: uppercase; }
.ar-horse { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #111; box-shadow: 0 3px 8px rgba(0,0,0,0.4); }
.ar-horse.red { color: #d61f3c; }
.ar-horse svg.pip { width: 22px; height: 22px; fill: currentColor; display: block; }
.ar-horse.moved { animation: ar-hop 0.45s ease-out; }
.ar-horse.knocked { animation: ar-knock 0.6s ease-out; box-shadow: 0 0 0 3px var(--danger); }
.ar-horse.won { box-shadow: 0 0 0 4px var(--accent); animation: pulse 0.9s ease-in-out infinite; }
@keyframes ar-hop { 0% { transform: translateY(46px); } 70% { transform: translateY(-6px); } 100% { transform: none; } }
@keyframes ar-knock { 0% { transform: translateY(-46px) rotate(-20deg); } 60% { transform: rotate(10deg); } 100% { transform: none; } }
.ar-last { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 64px; }
.ar-last p { font-weight: 700; }
.ar-knock { color: var(--danger); }
.ar-place { gap: 12px; }
.ar-suits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ar-suits button { padding: 12px 0; background: var(--card-2); color: var(--text); border: 2px solid transparent; }
.ar-suits button.red { color: var(--danger); }
.ar-suits button.selected { border-color: var(--accent); }
.ar-suits svg.pip { width: 1.8rem; height: 1.8rem; display: block; margin: 0 auto; fill: currentColor; }
.ar-bets { gap: 8px; }
.ar-bet-row { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; }
.ar-bet-row > span:not(.av):not(.ar-horse) { flex: 1; }
.ar-bet-row .ar-horse { width: 30px; height: 30px; flex: none; }
.ar-bet-row .ar-horse svg.pip { width: 16px; height: 16px; }
.ar-give { gap: 8px; }
.ar-give-row { display: flex; align-items: center; gap: 10px; }
.ar-give-row > span:not(.av) { flex: 1; font-weight: 600; }
.ar-give-row button { width: 44px; padding: 6px 0; font-size: 1.3rem; }
.ar-give-row b { min-width: 24px; text-align: center; font-size: 1.2rem; font-variant-numeric: tabular-nums; }

/* Horse Race (oval) */
.hz-wrap { border-radius: 18px; background: #135c39; padding: 6px; box-shadow: inset 0 0 0 4px rgba(0,0,0,0.25); }
.hz-track { display: block; width: 100%; height: auto; }
.hz-dirt { fill: none; stroke: #b98552; }
.hz-infield { fill: #1f7a4d; }
.hz-divider { fill: none; stroke: rgba(255,255,255,0.35); stroke-width: 0.8; stroke-dasharray: 4 4; }
.hz-laps { fill: #e9fff3; font-size: 15px; font-weight: 800; text-anchor: middle; }


.hz-emoji { font-size: 25px; text-anchor: middle; dominant-baseline: central; transform-box: fill-box; transform-origin: 50% 90%; }
.hz-shadow { fill: rgba(0,0,0,0.28); transform-box: fill-box; transform-origin: center; }
.hz-num { font-size: 10px; font-weight: 900; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: rgba(0,0,0,0.75); stroke-width: 2.5px; }
.hz-horse.won .hz-emoji { filter: drop-shadow(0 0 3px #ffcc33) drop-shadow(0 0 3px #ffcc33); }
.hz-horse.won .hz-num { fill: #ffcc33 !important; font-size: 13px; }
/* Trotting: a two-beat bounce that rocks forward and back while the race is on, with the shadow
   shrinking as the animal lifts. */
.hz-track.running .hz-emoji { animation: hz-trot 0.38s linear infinite; }
.hz-track.running .hz-shadow { animation: hz-step 0.19s ease-in-out infinite alternate; }
@keyframes hz-trot {
  0% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(-4px) rotate(-7deg); }
  45% { transform: translateY(0) rotate(1deg); }
  70% { transform: translateY(-3px) rotate(6deg); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes hz-step { from { transform: scale(1); opacity: 1; } to { transform: scale(0.7); opacity: 0.6; } }
.hz-chip { display: inline-flex; align-items: flex-end; flex: none; gap: 1px; }
.hz-chip-a { font-size: 1.5rem; line-height: 1; }
.hz-chip b { font-size: 0.75rem; font-weight: 900; line-height: 1; -webkit-text-stroke: 0.4px rgba(0,0,0,0.5); }
.hz-place { gap: 12px; }
.hz-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hz-pick button { display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--card-2); color: var(--text); border: 2px solid transparent; text-align: left; font-size: 0.9rem; }
.hz-pick button > span:not(.hz-chip):not(.av) { flex: 1; font-weight: 700; }
.hz-pick button small { display: flex; gap: 2px; }
.hz-pick button.selected { border-color: var(--accent); }
.hz-standings { gap: 6px; }
.hz-stand { display: flex; align-items: center; gap: 10px; }
.hz-stand.won { font-weight: 800; }
.hz-pos { width: 18px; text-align: center; color: var(--muted); }
.hz-name { flex: 1; font-weight: 600; }
.hz-backers { display: flex; gap: 2px; }
.hz-winner .big { display: flex; align-items: center; justify-content: center; gap: 10px; }
.hz-winner .hz-chip-a { font-size: 2.6rem; }
.hz-winner .hz-chip b { font-size: 1rem; }
.hz-pick button:disabled { opacity: 0.4; }
.hz-speed { color: var(--muted); font-variant-numeric: tabular-nums; }
.hz-dial { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 12px 14px; background: var(--card); color: var(--text); border-radius: 18px; border: 3px solid transparent; touch-action: none; user-select: none; -webkit-user-select: none; transition: border-color 0.1s; }
.hz-dial > svg { width: 100%; max-width: 320px; height: auto; }
.hz-zones path { fill: none; stroke-width: 26; }
#hz-needle line { stroke: var(--text); stroke-width: 5; stroke-linecap: round; }
#hz-needle circle { fill: var(--text); }
#hz-needle { transform-origin: 100px 100px; }
.hz-dial-info { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
.hz-dial-info small { color: var(--muted); font-size: 0.85rem; }
.hz-dial[data-hit="green"] { border-color: #3ddc97; background: color-mix(in srgb, #3ddc97 18%, var(--card)); }
.hz-dial[data-hit="yellow"] { border-color: #ffcc33; }
.hz-dial[data-hit="red"] { border-color: #ff4d6d; background: color-mix(in srgb, #ff4d6d 18%, var(--card)); }

/* Big Tom */
.bt-write, .bt-done { gap: 10px; }
.bt-write textarea { width: 100%; font: inherit; font-size: 1.05rem; padding: 12px; border-radius: 12px; border: 2px solid var(--card-2); background: var(--bg); color: var(--text); resize: vertical; }
.bt-write textarea:focus { outline: none; border-color: var(--accent); }
.bt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bt-q { font-weight: 800; font-size: 1.15rem; }
.bt-a { font-size: 1.05rem; }
.bt-done small { color: var(--muted); }
.bt-prompt { font-size: 1.6rem; font-weight: 800; line-height: 1.2; text-align: center; padding: 8px 0; }
.bt-answers { display: flex; flex-direction: column; gap: 8px; }
.bt-vs { text-align: center; font-weight: 900; color: var(--muted); letter-spacing: 0.1em; }
.bt-answer { display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; border-radius: 14px; background: var(--card-2); color: var(--text); border: 3px solid transparent; font-size: 1.2rem; font-weight: 700; text-align: center; }
.bt-answer.selected { border-color: var(--accent); }
.bt-answer:disabled { opacity: 1; }
.bt-answer.won { border-color: var(--ok); }
.bt-answer.lost { opacity: 0.7; }
.bt-answer small { font-size: 0.85rem; font-weight: 500; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; }
.bt-voters { display: flex; justify-content: center; gap: 3px; }
.bt-results p { margin: 0; }
.bt-results small { color: var(--muted); }
.bt-poll { gap: 8px; }
.bt-poll h2 { margin: 0; }
.bt-poll button { padding: 14px 12px; border-radius: 12px; background: var(--card-2); color: var(--text); font-size: 1.02rem; font-weight: 700; text-align: left; line-height: 1.25; }
.bt-poll button.bt-none { background: transparent; border: 2px dashed var(--card-2); color: var(--muted); text-align: center; }
.bt-poll .bt-thanks { font-size: 1.1rem; font-weight: 700; margin: 0; }
@media (prefers-reduced-motion: reduce) { .hz-track.running .hz-emoji, .hz-track.running .hz-shadow { animation: none; } }
.bt-canvas { width: 100%; aspect-ratio: 1; border-radius: 14px; background: #fff; touch-action: none; box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
.bt-palette { display: flex; justify-content: center; gap: 8px; }
.bt-swatch { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 3px solid var(--card-2); flex: none; }
.bt-swatch.on { border-color: var(--accent); transform: scale(1.12); }
.bt-tools { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; }
.bt-tools button { padding: 10px 6px; font-size: 0.9rem; border: 2px solid transparent; }
.bt-tools button.on { border-color: var(--accent); }
.bt-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bt-art { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border-radius: 14px; background: var(--card-2); border: 3px solid transparent; color: var(--text); }
.bt-art img { width: 100%; aspect-ratio: 1; border-radius: 10px; background: #fff; display: block; }
.bt-art small { font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.bt-art.selected { border-color: var(--accent); }
.bt-art.won { border-color: var(--ok); }
.bt-art.lost { opacity: 0.75; }
.bt-art:disabled { opacity: 0.6; }
/* Racehorses: legs swing from the hip in a gallop, the body rises and falls. */
.hz-leg { transform-box: fill-box; transform-origin: 50% 0; }
.hz-track.running .hz-leg { animation: hz-leg 0.34s ease-in-out infinite alternate; }
.hz-track.running .hz-leg.b { animation-delay: -0.17s; }
.hz-track.running .hz-leg.f.far { animation-delay: -0.08s; }
.hz-track.running .hz-leg.b.far { animation-delay: -0.25s; }
@keyframes hz-leg { from { transform: rotate(32deg); } to { transform: rotate(-30deg); } }
.hz-track.running .hz-bob { animation: hz-bob 0.17s ease-in-out infinite alternate; }
@keyframes hz-bob { from { transform: translateY(0.6px) rotate(1.5deg); } to { transform: translateY(-1.6px) rotate(-1.5deg); } }
.hz-chip-h { width: 38px; height: 27px; overflow: visible; }
.hz-style-open { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hz-style { gap: 10px; }
.hz-style h3 { margin: 0; font-size: 0.9rem; color: var(--muted); }
.hz-style-head { display: flex; align-items: center; gap: 10px; }
.hz-style-head h2 { flex: 1; }
.hz-style-head .link { width: auto; }
.hz-style-name { display: flex; gap: 8px; }
.hz-style-name input { flex: 1; min-width: 0; }
.hz-style-name button { width: auto; padding: 10px 14px; }
.hz-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.hz-swatch { aspect-ratio: 1; padding: 0; border-radius: 50%; border: 3px solid var(--card-2); }
.hz-swatch.on { border-color: var(--text); }
.hz-swatch:disabled { opacity: 0.2; }
.hz-coats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hz-coats button { display: flex; align-items: center; gap: 6px; padding: 8px; font-size: 0.85rem; background: var(--card-2); color: var(--text); border: 2px solid transparent; }
.hz-coats button.on { border-color: var(--accent); }
.hz-coats span { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3); }
@media (prefers-reduced-motion: reduce) { .hz-track.running .hz-leg, .hz-track.running .hz-bob { animation: none; } }

/* ---------- Sideways ----------
   Phone turned sideways: the screen splits into the stage (left, pinned while the right side
   scrolls) and the panel. Big things shrink to fit the short height. */
main.ls {
  max-width: 1040px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  /* Room at the top that grows with the screen: tight on a phone turned sideways, roomy on a laptop. */
  padding: max(clamp(10px, 4.5vh, 48px), env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(max(12px, env(safe-area-inset-bottom)) + 36px) max(16px, env(safe-area-inset-left));
}
.ls-stage, .ls-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ls-stage { position: sticky; top: max(clamp(10px, 4.5vh, 48px), env(safe-area-inset-top)); }
main.ls h1 { margin-top: 6px; }
main.ls .spacer { display: none; }
main.ls .ls-stage .qr { width: 140px; height: 140px; }
main.ls .room-code { font-size: 2.4rem; }
/* Cards and tables sized to the short side */
main.ls .ls-stage .pcard.xl { width: 7rem; height: 10.125rem; }
main.ls .ls-stage .pcard.xl .pip { font-size: 3.6rem; }
main.ls .ls-stage .pcard.xl .corner { font-size: 1.25rem; }
main.ls .mm-pile { height: 190px; }
main.ls .mm-fan { margin-left: -56px; }
main.ls .kc-ring { --size: min(300px, 44vw, calc(100dvh - 40px)); }
main.ls .rb-pyramid .pcard.md { width: 3.125rem; height: 4.5rem; }
main.ls .rb-pyramid .pcard.md .pip { font-size: 1.4rem; }
main.ls .hz-wrap, main.ls .ar-track { max-height: calc(100dvh - 24px); }
main.ls .hz-track { max-height: calc(100dvh - 40px); }
main.ls .bt-canvas { width: auto; height: calc(100dvh - 120px); max-width: 100%; align-self: center; }
main.ls .bt-gallery { grid-template-columns: repeat(3, 1fr); }
main.ls .bt-prompt { font-size: 1.3rem; }
main.ls .drink-alert .big { font-size: 2.2rem; }
main.ls .sp-hole .pcard.lg { width: 4.625rem; height: 6.625rem; }
main.ls .sp-hole .pcard.lg .pip { font-size: 2.4rem; }
main.ls .sp-hole .pcard.lg .corner { font-size: 0.9rem; }
main.ls .sp-board .pcard { width: 2.875rem; height: 4.125rem; }
main.ls .sp-table { padding: 10px 8px; }
main.ls .ar-row { min-height: 34px; }
main.ls .ar-lane { min-height: 30px; }
main.ls .ar-horse { width: 30px; height: 30px; }
main.ls .ar-horse svg.pip { width: 17px; height: 17px; }
main.ls .ar-side .pcard.sm { width: 1.5rem; height: 2.0625rem; }
main.ls .ar-track { padding: 6px; gap: 2px; }
/* Full-screen games (Slevens) use the whole width sideways. */
@media (orientation: landscape) and (min-width: 560px) {
  .fs-screen { max-width: none; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}
.tv-card { padding: 12px 16px; font-size: 0.95rem; }
.tv-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--card-2); color: var(--text); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.players-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tv-note { text-align: center; color: var(--muted); font-size: 0.9rem; line-height: 1.45; padding: 0 8px; }
.tv-note b { color: var(--text); }

/* ---------- Darts ---------- */
.dt-board { display: block; width: 100%; max-width: min(100%, 46vh); margin: 0 auto; }
.dt-board text { fill: #fff; font-size: 0.13px; font-weight: 800; text-anchor: middle; dominant-baseline: central; font-family: system-ui, sans-serif; }
.dt-wire { fill: none; stroke: #b8b8b8; stroke-width: 0.006; opacity: 0.8; }
.dt-aim { fill: none; stroke: #fff; stroke-width: 0.018; filter: drop-shadow(0 0 0.02px #000); pointer-events: none; }
.dt-aim circle { stroke: var(--accent); }
.dt-dart.new { animation: dt-hit 0.28s ease-out; }
@keyframes dt-hit { from { transform: scale(3); opacity: 0; } 70% { opacity: 1; } to { transform: scale(1); } }

.dt-turn { display: flex; gap: 8px; justify-content: center; align-items: center; }
.dt-slot { min-width: 64px; padding: 6px 10px; border-radius: 10px; background: var(--card); text-align: center; font-weight: 800; font-size: 1.1rem; }
.dt-slot.empty { color: var(--muted); }
.dt-slot.miss { color: var(--danger); }
.dt-note { min-width: 48px; text-align: center; font-size: 1.3rem; color: var(--accent-ink, var(--accent)); }
.dt-note.bust { color: var(--danger); animation: pulse 0.5s ease-in-out 3; }

.dt-pad {
  position: relative; height: 24vh; min-height: 150px; border-radius: 20px; background: var(--card);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.dt-pad.big { height: 56vh; }
.dt-hint { position: absolute; top: 10px; left: 0; right: 0; text-align: center; color: var(--muted); font-size: 0.85rem; pointer-events: none; }
.dt-readout { position: absolute; top: 32px; left: 0; right: 0; text-align: center; font-weight: 700; pointer-events: none; }
.dt-pad.big .dt-readout { font-size: 1.4rem; top: 40px; }
.dt-held { width: 34px; height: auto; margin-bottom: 8px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); }
.dt-pad.big .dt-held { width: 48px; margin-bottom: 18px; }

.dt-scores table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.dt-scores th { color: var(--muted); font-weight: 600; font-size: 0.8rem; padding: 2px 4px; }
.dt-scores td { padding: 5px 4px; text-align: center; }
.dt-scores td.dt-who { text-align: left; }
.dt-who { display: flex; align-items: center; gap: 8px; }
.dt-who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9em; }
.dt-scores tr.up td { background: var(--card-2); }
.dt-scores tr.up td:first-child { border-radius: 8px 0 0 8px; }
.dt-scores tr.up td:last-child { border-radius: 0 8px 8px 0; }
.dt-big { font-size: 1.3rem; }
.dt-mark { font-weight: 800; color: var(--muted); }
.dt-mark.closed { color: var(--ok); }
.dt-round p { font-size: 1.05rem; }
.dt-wait { padding: 4px 0; }
main.ls .dt-board { max-width: min(100%, 86vh); }

/* ---------- Room styles (lib/roomStyles.js) ---------- */
.room-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.room-styles button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; font-size: 0.9rem; background: var(--card-2); color: var(--text); border: 2px solid transparent; }
.room-styles button span { font-size: 1.6rem; }
.room-styles button.selected { border-color: var(--accent); }
.room-welcome b { font-size: 1.2rem; }

/* Liar's Dice on the TV: everyone's dice in front of them. */
.ld-front { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 120px; }
.ld-front .ld-die.mini.dim { opacity: 0.35; }
.ld-front .ld-die.mini.match .die { box-shadow: 0 0 0 2px var(--accent), 0 0 10px var(--accent); }
.ld-front.loser { animation: pulse 0.6s ease-in-out 3; }
.ld-hidden { width: 30px; height: 30px; border-radius: 7px; background: linear-gradient(145deg, #3a3550, #1d1a2a); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12), 0 2px 4px rgba(0, 0, 0, 0.4); }

/* ---------- The water reminder between games ---------- */
.drink-alert.water { background: rgba(34, 140, 230, 0.96); }
.drink.water { background: #228ce6; color: #fff; }

/* ---------- End-of-night recap (public/recap.js) ---------- */
.recap { display: flex; flex-direction: column; gap: 14px; }
.recap-head { text-align: center; }
.recap-head h1 { white-space: normal; font-size: clamp(1.7rem, 8vw, 2.3rem); color: var(--accent-ink, var(--accent)); }
.recap-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.recap-award { align-items: center; text-align: center; gap: 4px; padding: 14px 10px; }
.recap-emoji { font-size: 2rem; }
.recap-award small { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; }
.recap-award span.muted { font-size: 0.85rem; }
.recap-cols { display: flex; flex-direction: column; gap: 12px; }
.recap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.recap-list li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.recap-n { margin-left: auto; font-weight: 700; }
.recap-host { display: flex; flex-direction: column; gap: 8px; }

/* How to play: the game's rules, tucked away until you open them. */
.how-to summary { cursor: pointer; font-weight: 700; color: var(--accent-ink, var(--accent)); }
.how-to ul { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--text); }

/* Shot Poker: "All debts must be paid" flashes across the whole screen, then stays at the bottom
   with everyone who owes and a "Tab settled" button for you. */
.sp-takeover {
  position: fixed; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; color: #fff; pointer-events: none;
  animation: sp-takeover 2.6s ease-in-out forwards;
}
.sp-takeover span { font-size: clamp(2rem, 11vw, 4rem); font-weight: 900; line-height: 1.05; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); }
@keyframes sp-takeover {
  0%, 30%, 60% { background: rgba(200, 20, 50, 0.95); opacity: 1; }
  15%, 45%, 75% { background: rgba(10, 8, 14, 0.96); opacity: 1; }
  100% { background: rgba(10, 8, 14, 0); opacity: 0; }
}
.sp-flash {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px;
  background: #0b0a10; color: #fff; border-top: 3px solid var(--danger); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}
.sp-flash-text { text-align: center; font-weight: 900; color: var(--danger); animation: sp-blink 1s steps(2, start) infinite; }
@keyframes sp-blink { to { visibility: hidden; } }
.sp-flash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sp-flash-list li { display: flex; align-items: center; gap: 8px; }
.sp-flash-list li span { color: #bbb; font-size: 0.9rem; }
.sp-flash-list li em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--danger); }
.sp-flash-list li.paid em { color: var(--ok); }
.sp-settle { background: var(--ok); color: #04210f; font-size: 1.2rem; font-weight: 900; animation: pulse 0.9s ease-in-out infinite; }

/* The water reminder: a banner that slides down from the top for a few seconds. */
.water-banner {
  position: fixed; left: 12px; right: 12px; top: 12px; z-index: 11; padding: 14px 16px; border-radius: 14px;
  background: #228ce6; color: #fff; font-weight: 700; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transform: translateY(-140%); transition: transform 0.35s ease;
}
.water-banner.show { transform: none; }

/* ---------- Around the World (public/trip.js) ---------- */
.trip { display: flex; flex-direction: column; gap: 14px; }
.trip-head { display: flex; align-items: center; gap: 12px; }
.trip-globe { font-size: 2.4rem; animation: br-go 0.8s ease-out; }
@keyframes spin { to { transform: rotate(360deg); } }
.trip-head small { display: block; color: var(--muted); }
.trip-head b { font-size: 1.3rem; }
.trip-clock { margin-left: auto; font-weight: 800; color: var(--accent-ink, var(--accent)); font-variant-numeric: tabular-nums; }
.trip-route { display: flex; gap: 4px; }
.trip-route span { flex: 1; min-width: 0; padding: 6px 4px; border-radius: 8px; background: var(--card); color: var(--muted); font-size: 0.7rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-route span.done { background: var(--card-2); color: var(--text); }
.trip-route span.here { background: var(--accent); color: var(--accent-text); font-weight: 700; }
.trip-options { display: flex; flex-direction: column; gap: 10px; }
.trip-option { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: var(--card); color: var(--text); border: 2px solid transparent; padding: 14px 16px; }
.trip-option b { font-size: 1.2rem; }
.trip-option small { color: var(--muted); font-weight: 400; }
.trip-option.mine { border-color: var(--accent); }
.trip-voters { display: flex; gap: 4px; min-height: 22px; }
.trip-next { text-align: center; align-items: center; padding: 28px 16px; animation: pop-in 0.4s ease-out; }
.trip-next small { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.trip-next-name { font-size: 2.4rem; font-weight: 900; color: var(--accent-ink, var(--accent)); }
@keyframes pop-in { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.trip-host { display: flex; flex-direction: column; gap: 8px; }
.trip-chip { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 0.9rem; }
.trip-chip .link { width: auto; padding: 4px 8px; }

/* The page sits above the room's moving scenery (public/scenery.js, styled in scenery.css, which
   only the TV loads: phones never show it, so they don't parse it). */
main#app, #tv { position: relative; z-index: 1; }

/* "Best with a TV", on the games that are. */
.tv-best { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 0.72em; font-weight: 600; vertical-align: 0.12em; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }

/* Boat Race: the teams side by side, each in its colour; GO! and the race clock. */
.br-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 10px 0; }
.br-team { background: var(--card); border-radius: 14px; padding: 10px; border-top: 5px solid var(--team); }
.br-team.won { box-shadow: 0 0 0 3px var(--team), 0 0 24px color-mix(in srgb, var(--team) 60%, transparent); }
.br-team h3 { margin: 0 0 8px; color: var(--team); font-size: 1.05em; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.br-team h3 small { color: var(--muted); font-weight: 600; font-size: 0.75em; }
.br-player { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 6px; margin: 0 0 4px; border-radius: 10px; background: var(--card-2); color: var(--text); font: inherit; text-align: left; border: 0; }
button.br-player { cursor: pointer; }
.br-player.me { outline: 2px solid var(--team); }
.br-player.again { opacity: 0.6; font-style: italic; }
.br-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-n { width: 1.4em; text-align: center; font-weight: 800; color: var(--muted); }
.br-move { color: var(--muted); }
.br-go { text-align: center; margin: 6px 0 12px; padding: 10px; border-radius: 16px; background: var(--card); }
.br-hint { text-align: center; margin: 8px 0; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--card) 80%, transparent); color: var(--muted); font-size: 0.9em; }
.br-go b { display: block; font: 900 72px/1 system-ui, sans-serif; color: var(--accent); animation: br-go 0.8s ease-out; }
.br-go .br-clock { display: block; font: 700 32px/1.2 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.br-go small { color: var(--muted); }
@keyframes br-go { from { transform: scale(2.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.br-pick { display: grid; gap: 8px; }
.br-pick button { background: var(--team); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.br-score { display: flex; justify-content: center; gap: 16px; margin: 8px auto; padding: 6px 14px; width: max-content; border-radius: 999px; background: var(--card); font-weight: 700; }
.br-score span { color: var(--team); }
.br-score b { color: var(--text); font-size: 1.3em; margin-left: 4px; }
.br-twice { background: var(--card); border-radius: 14px; padding: 10px; margin: 0 0 10px; border-left: 5px solid var(--team); }
.br-twice h3 { margin: 0 0 8px; font-size: 1em; color: var(--team); }
.br-twice-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.br-twice-pick button { width: auto; flex: 1 1 40%; display: flex; align-items: center; gap: 6px; padding: 8px 10px; }

/* Horse Race at the castle's tournament: a sand track round the green lists, in the castle's colours. */
html[data-room="castleTournament"] .hz-wrap { background: #4f8a3a; box-shadow: inset 0 0 0 4px #d4af37; }
html[data-room="castleTournament"] .hz-dirt { stroke: #d8bf86; }
html[data-room="castleTournament"] .hz-infield { fill: #3f7a30; }

/* The host's switch between one game and Around the World, at the top of the game card. */
.play-mode { margin: -4px 0 12px; }
.play-mode .segmented button { font-weight: 700; }

/* Beer Pong: the table from above (a pong table's green with its lines), red cups, the ball. */
.bp-table-wrap { display: flex; justify-content: center; }
.bp-board { width: min(100%, 340px); aspect-ratio: 100 / 240; background: var(--felt, #1f6a3a); border: 5px solid var(--rim, #f4f4f4); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.15); overflow: hidden; }
.bp-table { width: 100%; height: 100%; display: block; }
.bp-line { stroke: rgba(255, 255, 255, 0.7); stroke-width: 0.8; fill: none; }
.bp-label { font: 700 7px system-ui, sans-serif; text-anchor: middle; paint-order: stroke; stroke: rgba(0, 0, 0, 0.5); stroke-width: 1.5px; }
.bp-close { display: flex; justify-content: center; margin: 6px 0; }
.bp-rack { position: relative; width: min(100%, 360px); aspect-ratio: 360 / 230; border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, 0.25); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
.bp-rack svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bp-felt { position: absolute; inset: 0; background: var(--felt, #1f6a3a); }
.bp-edge { stroke: var(--rim, #f4f4f4); stroke-width: 7; fill: none; stroke-linecap: round; }
/* Beer Pong's swipe: a faint arc across the close-up, and a faint arrow up from the ball, the way
   the swipe's heading (no crosshair: the swipe's the aim). A thrown pad takes no more. */
.bp-arc { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
.bp-arrow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bp-arrow path { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.dt-pad.bp-pad.thrown { pointer-events: none; }
.bp-fly.fresh { animation: bp-fly 1.1s cubic-bezier(0.35, 0.1, 0.45, 1) both; }
@keyframes bp-fly { 0% { translate: var(--fx) var(--fy); scale: 1.4; } 50% { scale: 3; } 100% { translate: 0 0; scale: 1; } }
.bp-ball.in .bp-fly { opacity: 0.85; }
.bp-splash { fill: rgba(255, 240, 200, 0.6); opacity: 0; }
.bp-splash.fresh { animation: bp-splash 0.7s ease-out 1.05s both; }
@keyframes bp-splash { 0% { opacity: 0.9; scale: 0.4; } 100% { opacity: 0; scale: 1.6; } }
.bp-last { text-align: center; margin: 6px 0; font-weight: 600; }
.bp-last.hit { color: var(--ok); }
.br-team.up { box-shadow: 0 0 0 2px var(--team); }
.bp-pad .dt-held { width: 44px; height: 44px; }
/* A long pad, for a proper flick. */
.dt-pad.bp-pad, .dt-pad.qt-pad { height: 44vh; min-height: 260px; }
/* On a phone the whole throw fits on screen without scrolling: the pad takes what's left of the
   visible screen (svh: with the address and tab bars showing), and you hold the ball in its
   middle, not down by the tab bar. */
@supports (height: 1svh) {
  .dt-pad.bp-pad, .dt-pad.qt-pad { height: max(210px, calc(100svh - 480px)); min-height: 0; }
}
.dt-pad.bp-pad, .dt-pad.qt-pad { justify-content: center; padding-top: 44px; }
/* The ball in the air in the close-up: up in an arc from your hand, and down onto the rack. */
.bp-fly3d { animation: bp-fly3d 1.1s cubic-bezier(0.3, 0.05, 0.5, 1) both; }
@keyframes bp-fly3d { 0% { translate: var(--sx) var(--sy); scale: 3; } 50% { translate: calc(var(--sx) * 0.45) calc(var(--sy) * 0.45 - 110px); scale: 2; } 100% { translate: 0 0; scale: 1; } }
.bp-splash3d { fill: rgba(255, 240, 200, 0.7); opacity: 0; animation: bp-splash 0.7s ease-out 1.1s both; }
.bp-last.flying { color: var(--muted); }

/* Quarters: the table and the glass in 3D, the quarter flying in and bouncing. */
.qt-view { position: relative; width: min(100%, 380px); margin: 6px auto; aspect-ratio: 360 / 260; border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, 0.25); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
.qt-view svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.qt-felt { position: absolute; inset: 0; background: var(--felt, #1f6a3a); }
.qt-aim { stroke: #ffd23f; stroke-width: 2; stroke-dasharray: 5 5; fill: none; opacity: 0.8; }
.qt-coin.fresh { animation: qt-fly 0.9s cubic-bezier(0.3, 0.2, 0.4, 1) both; }
@keyframes qt-fly { 0% { translate: var(--sx) var(--sy); scale: 2.4; } 45% { translate: var(--bx) var(--by); scale: 1.2; } 60% { translate: calc(var(--bx) * 0.6) calc(var(--by) * 0.6 - 30px); scale: 1.4; } 100% { translate: 0 0; scale: 1; } }
.qt-coin.in.fresh { animation-name: qt-fly, qt-sink; animation-duration: 0.9s, 0.4s; animation-delay: 0s, 0.9s; animation-fill-mode: both, forwards; }
@keyframes qt-sink { to { opacity: 0.35; } }
.qt-last { text-align: center; margin: 6px 0; font-weight: 600; }
.qt-last.hit { color: var(--ok); }
.qt-score { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; }
.qt-name { flex: 1; }
.qt-score.up { background: var(--card-2); outline: 2px solid var(--accent); }
.qt-pad .dt-held { width: 54px; height: 54px; }

/* Pass and play's music switch. */
.music-btn { width: auto; padding: 8px 14px; font-size: 0.9rem; }

/* A ball or a dart in the air, flying across the screen (PB.fly). */
.pb-fly { position: fixed; z-index: 60; pointer-events: none; will-change: transform; }
.pb-shadow { width: 30px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); filter: blur(2px); z-index: 59; }
.pb-ball { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #fffdf0 40%, #d8d0c0); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.35); }
.pb-dart { width: 34px; height: 120px; }
.pb-dart svg { width: 100%; height: 100%; display: block; }
/* The thrower's phone: the ball's flight is the one across the screen, so in the close-up it just
   arrives (after PB.fly's 0.9s) and drops in, or skips away. */
/* (1.1s: FLIGHT_MS in public/games/beerPong.js) */
.bp-fly3d.handoff { animation: bp-show 0.01s linear 1.1s both; }
.bp-close .bp-splash3d:has(+ .handoff) { animation-delay: 1.1s; }
/* A miss: the ball hits the table and bounces away from you (smaller as it goes), twice, then
   off the end of the table; its shadow runs along the table under it. A rim-out spins off
   sideways first. */
.bp-fly3d.handoff.out, .bp-fly3d.handoff.rim { animation: bp-show 0.01s linear var(--land) both; }
.bp-bounce { animation: bp-away 1s linear var(--after, var(--land)) both; }
.bp-hop { animation: bp-hops 1s linear var(--after, var(--land)) both; }
.bp-bounce-shadow { fill: rgba(0, 0, 0, 0.35); animation: bp-shadow 1s linear var(--after, var(--land)) both; }
/* Off a cup: it pings up off the rim and drops onto the table beside it (--kx, --ky), then
   bounces away as above. */
.bp-kick { animation: bp-kick 0.45s linear var(--land) both; }
.bp-kick .bp-bounce-shadow { opacity: 0; animation: bp-show 0.01s linear var(--after) both, bp-shadow 1s linear var(--after) both; }
@keyframes bp-kick {
  0% { translate: 0 0; animation-timing-function: ease-out; }
  40% { translate: calc(var(--kx) * 0.45) calc(var(--ky) * 0.2 - 26px); animation-timing-function: ease-in; }
  100% { translate: var(--kx) var(--ky); }
}
.bp-fly3d.rim .bp-bounce { animation-name: bp-away-rim; }
@keyframes bp-away {
  0% { translate: 0 0; scale: 1; opacity: 1; }
  80% { opacity: 1; }
  100% { translate: var(--bx) -95px; scale: 0.55; opacity: 0; }
}
@keyframes bp-away-rim {
  0% { translate: 0 0; scale: 1; opacity: 1; }
  25% { translate: calc(var(--bx) * 0.2 + 14px) -6px; }
  80% { opacity: 1; }
  100% { translate: calc(var(--bx) + 50px) -80px; scale: 0.55; opacity: 0; }
}
/* Two hops off the table, the second lower. */
@keyframes bp-hops {
  0% { translate: 0 0; animation-timing-function: ease-out; }
  22% { translate: 0 -34px; animation-timing-function: ease-in; }
  45% { translate: 0 0; animation-timing-function: ease-out; }
  60% { translate: 0 -14px; animation-timing-function: ease-in; }
  75% { translate: 0 0; animation-timing-function: ease-out; }
  84% { translate: 0 -5px; animation-timing-function: ease-in; }
  92%, 100% { translate: 0 0; }
}
@keyframes bp-shadow { 0%, 45%, 75%, 92% { opacity: 1; } 22% { opacity: 0.35; } 60% { opacity: 0.6; } }
.bp-rebuttal { text-align: center; margin: 4px 0; font-weight: 700; color: var(--accent); }
.bp-wet { fill: #d8a63a; stroke: #fff5d6; stroke-width: 1; opacity: 0; animation: bp-show 0.01s linear var(--land) both; }
/* A ball that goes in floats in the cup (it lands at --land, set by the screen), with a ripple on
   the beer and drops thrown up out of the cup. */
.bp-landed .bp-fly3d.in { animation: bp-fly3d 1.1s cubic-bezier(0.3, 0.05, 0.5, 1) both; }
.bp-landed .bp-fly3d.handoff.in { animation: bp-show 0.01s linear var(--land) both; }
.bp-float { animation: bp-plop 0.45s ease-out var(--land) both, bp-bob 1.6s ease-in-out calc(var(--land) + 0.45s) infinite; }
@keyframes bp-plop { 0% { translate: 0 -6px; } 45% { translate: 0 3px; } 100% { translate: 0 0; } }
@keyframes bp-bob { 50% { translate: 0 1.5px; rotate: 8deg; } }
.bp-ripple { fill: none; stroke: #fffbe8; stroke-width: 2.5; opacity: 0; animation: bp-ripple 0.8s ease-out var(--land) both; }
@keyframes bp-ripple { 0% { opacity: 1; scale: 0.2; } 100% { opacity: 0; scale: 1.05; } }
.bp-drops circle { fill: #fff8df; stroke: #e0a93a; stroke-width: 0.8; opacity: 0; animation: bp-drop-fly 0.7s cubic-bezier(0.2, 0.6, 0.4, 1) calc(var(--land) + var(--dd)) both; }
@keyframes bp-drop-fly {
  0% { opacity: 1; translate: 0 0; }
  45% { opacity: 1; translate: calc(var(--dx) * 0.6) var(--dy); }
  100% { opacity: 0; translate: var(--dx) calc(var(--dy) * -0.2); }
}
@keyframes bp-show { from { opacity: 0; } to { opacity: 1; } }
.dt-dart.new.late { animation: bp-show 0.01s linear 0.45s both, dt-hit 0.28s ease-out 0.45s both; }

/* Noir (Slevens in the Speakeasy): everything in shades of grey, red only for emphasis (the neon,
   whose turn it is, the scores). Players' avatars and colours, the drinks, the emoji in the
   feed go grey (and the scenery: see scenery.css). */
html[data-room="speakeasyNoir"] .av,
html[data-room="speakeasyNoir"] .tv-glass,
html[data-room="speakeasyNoir"] .tv-seat small,
html[data-room="speakeasyNoir"] .tv-side h2,
html[data-room="speakeasyNoir"] .card > h2,
html[data-room="speakeasyNoir"] .feed,
html[data-room="speakeasyNoir"] .tv-feed { filter: grayscale(1); }

/* Bots in the lobby: their tag, and the host's row for adding them. */
.tag.bot { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.players .make-host { width: auto; padding: 4px 10px; font-size: 0.8rem; background: none; color: var(--muted); border: 1px solid var(--card-2); border-radius: 999px; white-space: nowrap; }
.bot-row { display: grid; gap: 6px; margin-top: 10px; }
.bot-row .segmented button { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.bot-row .segmented button small { color: var(--muted); font-size: 0.72em; font-weight: 600; }

/* ---------- Track Racing (public/games/trackRacing.js) ---------- */
/* The track: three canvases (track, skid marks, cars) over the room's felt, which is the grass. */
.tr-stage { position: relative; width: 100%; aspect-ratio: 1000 / 625; border-radius: 14px; overflow: hidden; background: var(--felt, radial-gradient(ellipse at center, #3f8f4f 0%, #2f7a3e 65%, #235f30 100%)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); flex: none; }
.tr-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 3; }
.tr-count b { font-size: 6rem; font-weight: 900; color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), 0 0 30px rgba(0, 0, 0, 0.5); animation: tr-count 1s ease-out both; }
.tr-count.go b { color: var(--ok); animation: tr-go 1.3s ease-out both; }
@keyframes tr-count { 0% { transform: scale(1.6); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.85); opacity: 0.85; } }
@keyframes tr-go { 0% { transform: scale(0.6); opacity: 0; } 20% { transform: scale(1.15); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
#tv-center:has(.tr-stage) { width: 1000px; }
#tv-center .tr-stage { border-radius: 20px; }
#tv-center .tr-count b { font-size: 14rem; }

/* Standings and bets. */
.tr-board, .tr-results { gap: 8px; }
.tr-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; font-size: 0.95rem; }
.tr-row.me { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.tr-pos { width: 1.4em; text-align: center; font-size: 1.2rem; color: var(--accent); }
.tr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15; }
.tr-lap { display: block; color: var(--muted); font-size: 0.78em; font-variant-numeric: tabular-nums; }
.tr-backers { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px; max-width: 45%; }
.tr-backers i { font-style: normal; font-size: 0.75rem; font-weight: 800; margin-right: 4px; }
#tv-left .tr-row { font-size: 1.1rem; }
.tr-winner .big { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.tr-winner { border: 3px solid var(--pc, var(--accent)); }

/* Betting. */
.tr-place-bet { gap: 12px; }
.tr-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tr-pick button { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--card-2); color: var(--text); border: 2px solid transparent; padding: 10px 6px; font-size: 0.95rem; }
.tr-pick button.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--card-2)); }
.tr-pick small { min-height: 1.2em; display: flex; gap: 2px; align-items: center; color: var(--muted); }
.tr-ready { gap: 10px; text-align: center; }
.tr-ready p { margin: 0; }
.tr-enable { width: auto; align-self: center; padding: 12px 18px; }
.tr-small { width: auto; padding: 8px 12px; font-size: 0.85rem; }

/* Driving: the whole phone is the view from your car, with the pedals over it. */
.tr-drive {
  position: fixed; inset: 0; z-index: 5; overflow: hidden;
  background: #000; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none;
  --pad-t: max(8px, env(safe-area-inset-top)); --pad-r: max(8px, env(safe-area-inset-right)); --pad-b: max(8px, env(safe-area-inset-bottom)); --pad-l: max(8px, env(safe-area-inset-left));
}
.tr-view { position: absolute; inset: 0; }
.tr-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tr-view .tr-count b { font-size: 7rem; }
/* A new lap, the last lap, the flag. */
.tr-banner { position: absolute; left: 0; right: 0; top: 24%; display: flex; justify-content: center; pointer-events: none; z-index: 3; opacity: 0; }
.tr-banner b { padding: 6px 22px; border-radius: 14px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 2.2rem; font-weight: 900; letter-spacing: 0.02em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); border: 2px solid var(--accent); }
.tr-banner.on { animation: tr-banner 1.8s ease-out forwards; }
@keyframes tr-banner { 0% { opacity: 0; transform: scale(1.5); } 15% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0.0; } }
/* The pedals: the screen's two halves (four quarters with steering buttons), clear but for a
   label at the bottom, lit up from below while held. */
.tr-zones { position: absolute; inset: 0; display: flex; z-index: 1; }
.tr-zone {
  flex: 1; min-width: 0; height: 100%; padding: 0 0 calc(var(--pad-b) + 6px); border-radius: 0; background: transparent; box-shadow: none;
  display: flex; align-items: flex-end; justify-content: center; touch-action: none; color: #fff; transition: background 0.08s;
}
.tr-zone span { padding: 4px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.38); font-size: 0.8rem; font-weight: 900; letter-spacing: 0.08em; opacity: 0.85; }
.tr-zone.steer span { font-size: 1.5rem; padding: 4px 16px; letter-spacing: 0; }
.tr-zone.gas.on { background: linear-gradient(to top, rgba(61, 220, 132, 0.4), transparent 45%); }
.tr-zone.brake.on { background: linear-gradient(to top, rgba(255, 90, 90, 0.42), transparent 45%); }
.tr-zone.steer.on { background: linear-gradient(to top, rgba(255, 255, 255, 0.22), transparent 45%); }
.tr-zone.on span { opacity: 1; background: rgba(0, 0, 0, 0.6); }
/* Your place and lap, the horn and the way out along the top. */
.tr-hud { position: absolute; top: var(--pad-t); left: var(--pad-l); right: var(--pad-r); display: flex; align-items: stretch; gap: 6px; z-index: 2; pointer-events: none; }
.tr-hud > * { pointer-events: auto; }
.tr-place, .tr-laps { pointer-events: none; }
.tr-place { display: flex; align-items: baseline; gap: 4px; background: rgba(0, 0, 0, 0.5); border-radius: 12px; padding: 2px 12px; color: #fff; }
.tr-place b { font-size: 1.7rem; font-weight: 900; color: var(--accent); }
.tr-place small { color: rgba(255, 255, 255, 0.75); }
.tr-laps { display: flex; align-items: center; padding: 0 12px; background: rgba(0, 0, 0, 0.5); color: #fff; border-radius: 12px; font-weight: 800; font-size: 1.05rem; margin-right: auto; }
.tr-horn { width: 46px; padding: 0; font-size: 1.3rem; background: rgba(0, 0, 0, 0.5); }
.tr-carsound { font-size: 1.1rem; }
.tr-hud .end-mini { background: rgba(0, 0, 0, 0.5); }
/* With no TV, the map in the corner. */
.tr-minimap { position: absolute; top: calc(var(--pad-t) + 50px); right: var(--pad-r); width: min(34vw, 190px); z-index: 2; pointer-events: none; opacity: 0.88; }
.tr-minimap .tr-stage { border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
.tr-drive.land .tr-minimap { width: min(24vw, 210px); }
/* The wheel, small and see-through, at the bottom in the middle. */
.tr-wheel-box { position: absolute; left: 50%; bottom: calc(var(--pad-b) + 2px); width: 84px; transform: translateX(-50%); z-index: 2; pointer-events: none; opacity: 0.6; }
.tr-drive.port .tr-wheel-box { width: 72px; bottom: calc(var(--pad-b) + 34px); }
.tr-wheel { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); transition: transform 0.05s linear; }
.tr-modes { position: absolute; left: 50%; top: calc(var(--pad-t) + 52px); transform: translateX(-50%); display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; z-index: 2; width: max-content; max-width: 60%; }
.tr-modes:empty { display: none; }
.tr-modes .tr-small { padding: 5px 10px; font-size: 0.78rem; background: rgba(0, 0, 0, 0.5); color: #fff; border-color: transparent; }
.tr-modes .tr-enable { padding: 7px 12px; font-size: 0.85rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
.tr-drive.port .tr-modes { top: auto; bottom: calc(var(--pad-b) + 120px); max-width: 90%; }
/* The race's weather on the track from above: a tint under the cars (night, dusk, fog, rain), and
   rain or snow falling over everything (a tile of drops slid down the screen, so it costs nothing). */
.tr-wx, .tr-fall { position: absolute; inset: 0; pointer-events: none; }
.tr-wx-sunset { background: linear-gradient(160deg, rgba(255, 140, 60, 0.28), rgba(120, 40, 120, 0.22)); mix-blend-mode: multiply; }
.tr-wx-night { background: radial-gradient(ellipse at center, rgba(10, 16, 48, 0.5), rgba(4, 6, 20, 0.72)); }
.tr-wx-rain { background: rgba(30, 44, 66, 0.32); }
.tr-wx-fog { background: radial-gradient(ellipse at center, rgba(215, 220, 226, 0.3), rgba(215, 220, 226, 0.62)); }
.tr-wx-snow { background: rgba(200, 215, 235, 0.12); }
.tr-fall { overflow: hidden; }
.tr-fall::before { content: ''; position: absolute; left: -120px; right: 0; top: -240px; bottom: 0; animation: tr-fall 0.5s linear infinite; }
.tr-fall-rain::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='240'%3E%3Cg stroke='%23d8e4f4' stroke-opacity='0.5' stroke-width='1.4'%3E%3Cpath d='M14 10 l10 20M60 70 l10 20M100 30 l10 20M36 140 l10 20M84 180 l10 20M112 120 l10 20M8 200 l10 20'/%3E%3C/g%3E%3C/svg%3E"); }
.tr-fall-snow::before { animation-duration: 6s; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='240'%3E%3Cg fill='%23fff' fill-opacity='0.85'%3E%3Ccircle cx='14' cy='20' r='2.4'/%3E%3Ccircle cx='70' cy='60' r='1.8'/%3E%3Ccircle cx='104' cy='110' r='2.8'/%3E%3Ccircle cx='40' cy='150' r='2'/%3E%3Ccircle cx='90' cy='200' r='2.4'/%3E%3Ccircle cx='20' cy='222' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); }
@keyframes tr-fall { to { transform: translate3d(120px, 240px, 0); } }
.tr-stage.mini .tr-fall { display: none; }
@media (prefers-reduced-motion: reduce) { .tr-fall::before { animation: none; } }
/* Halloween (see "Halloween" in public/games/trackRacing.js): the night tinted purple, low fog
   drifting over the track, bats crossing it, lightning now and then; the countdown ends in BOO. */
.tr-stage.haunted .tr-wx-night { background: radial-gradient(ellipse at center, rgba(36, 12, 58, 0.32), rgba(10, 4, 22, 0.66)); }
.tr-stage.haunted .tr-wx-fog { background: radial-gradient(ellipse at center, rgba(150, 140, 180, 0.2), rgba(110, 100, 140, 0.5)); }
.tr-haunt { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tr-haunt i { position: absolute; display: block; }
/* (Twice as wide as the track, the same fog in each half, slid along by half: it loops.) */
.tr-fog {
  left: 0; top: 0; width: 200%; height: 100%;
  background:
    radial-gradient(ellipse 16% 11% at 12% 22%, rgba(196, 186, 226, 0.26), transparent 70%),
    radial-gradient(ellipse 22% 9% at 38% 64%, rgba(196, 186, 226, 0.22), transparent 70%),
    radial-gradient(ellipse 14% 12% at 70% 36%, rgba(180, 230, 200, 0.14), transparent 70%),
    radial-gradient(ellipse 20% 10% at 84% 84%, rgba(196, 186, 226, 0.24), transparent 70%);
  background-size: 50% 100%; background-repeat: repeat-x;
  animation: tr-drift 70s linear infinite;
}
@keyframes tr-drift { to { transform: translate3d(-50%, 0, 0); } }
.tr-bats, .tr-haunt::before { content: ''; position: absolute; left: 0; top: 14%; width: 14%; height: 6%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cg fill='%2308040e' stroke='%23b9a0ff' stroke-opacity='0.35' stroke-width='0.8'%3E%3Cpath id='b' d='M32 15 Q20 4 2 6 Q10 15 8 18 Q18 17 24 22 Q28 18 32 20 Q36 18 40 22 Q46 17 56 18 Q54 15 62 6 Q44 4 32 15Z'/%3E%3Cuse href='%23b' transform='translate(90 22) scale(0.7)'/%3E%3Cuse href='%23b' transform='translate(160 4) scale(0.85)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; animation: tr-bats 16s linear infinite; }
.tr-haunt::before { top: 58%; width: 11%; animation-duration: 23s; animation-delay: -9s; animation-direction: reverse; }
@keyframes tr-bats { 0% { transform: translate3d(-110%, 0, 0); } 25% { transform: translate3d(60%, -40%, 0); } 50% { transform: translate3d(230%, 20%, 0); } 75% { transform: translate3d(400%, -30%, 0); } 100% { transform: translate3d(560%, 10%, 0); } }
.tr-flash { inset: 0; background: #ece6ff; opacity: 0; animation: tr-flash 12s linear infinite; }
@keyframes tr-flash { 0%, 50% { opacity: 0; } 50.6% { opacity: 0.28; } 51.3% { opacity: 0; } 52% { opacity: 0.18; } 54%, 100% { opacity: 0; } }
.tr-count.spooky b { font-family: "Creepster", Impact, system-ui, sans-serif; font-weight: 400; color: #c8ffb0; text-shadow: 0 0 24px rgba(124, 255, 154, 0.7), 0 4px 0 rgba(0, 0, 0, 0.55); }
.tr-count.boo b { font-family: "Creepster", Impact, system-ui, sans-serif; font-weight: 400; letter-spacing: 0.04em; color: var(--accent); text-shadow: 0 0 30px rgba(255, 122, 26, 0.85), 0 5px 0 rgba(0, 0, 0, 0.6); animation: tr-boo 1.3s ease-out both; }
.tr-count.boo b::before { content: '👻 '; }
@keyframes tr-boo { 0% { transform: scale(0.3) rotate(-10deg); opacity: 0; } 15% { transform: scale(1.25) rotate(5deg); opacity: 1; } 30% { transform: scale(1) rotate(-3deg); } 70% { opacity: 1; } 100% { transform: scale(1.5) rotate(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tr-fog, .tr-bats, .tr-haunt::before { animation: none; } .tr-flash { display: none; } }

/* Your car: a little picture of each car in the lists, and the garage (pick a body, a paint, a
   stripe and an extra, the car turning above). */
.tr-carpic { width: 36px; height: 24px; flex: none; }
.tr-pick-car { display: flex; align-items: center; gap: 4px; }
.tr-pick-car .tr-carpic { width: 48px; height: 32px; }
.tr-garage { gap: 0; }
.tr-garage summary { cursor: pointer; font-weight: 800; font-size: 1.1rem; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tr-garage summary small { color: var(--muted); font-weight: 500; font-size: 0.85rem; }
.tr-garage[open] summary { margin-bottom: 8px; }
.tr-garage-in { display: flex; flex-direction: column; gap: 6px; }
.tr-preview { width: 100%; height: 150px; display: block; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--accent) 18%, var(--card-2)) 0%, var(--card-2) 70%); }
.tr-garage-opts { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tr-garage h3 { margin: 4px 0 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.tr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-chips button { width: auto; padding: 8px 11px; font-size: 0.88rem; background: var(--card-2); color: var(--text); border: 2px solid transparent; }
.tr-chips button.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--card-2)); }
.tr-swatches { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.tr-swatch { width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--sw); border: 2px solid rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); position: relative; }
.tr-swatch.selected { outline: 3px solid var(--accent); outline-offset: 2px; }
/* The first swatch says what it is: your own colour, or no stripe at all. */
.tr-swatch.none { width: auto; min-width: 32px; padding: 0 10px; border-radius: 16px; font-size: 0.78rem; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.tr-swatch.none[data-k="stripe"] { background: repeating-linear-gradient(135deg, var(--card-2) 0 6px, transparent 6px 9px); color: var(--text); text-shadow: none; }
.tr-preview canvas { width: 100%; height: 100%; display: block; }
.tr-edit-car { align-self: center; }
@media (orientation: landscape) and (min-width: 560px) {
  .tr-garage-in { flex-direction: row; align-items: flex-start; }
  .tr-preview { width: 42%; height: 170px; flex: none; }
}