/* ==========================================================================
   Degenerate Dealer: marketing site
   Committed dark theme: a basement card room at 3 a.m. Every color is
   painted explicitly so the page holds on any host ground. Neutrals are
   green-biased on purpose: this is felt, not grey.
   ========================================================================== */

:root {
  --felt-deep: #070f0a;
  --felt: #0c1a12;
  --felt-2: #0f2116;
  --panel: #13291c;
  --panel-2: #17311f;
  --line: #23452f;
  --line-soft: #1a3524;

  /* The accent walk, lifted straight out of the product's accent-palette.ts */
  --brass: #b0873f;
  --gold: #d4a24c;
  --gold-hi: #f0c66c;
  --copper: #dd7a38;

  /* The one hot pop: cigar cherry, the price, the word "clock", the stamp. */
  --neon: #ff3b6b;
  --neon-deep: #b81f45;

  --chalk: #f9f6ef;
  --smoke: #b5c3b7;
  --muted: #86998c;
  --on-gold: #0b0f0d;
  --outline: #050c07;

  /* Cartoon construction: hard edges, no soft blur */
  --sticker: 4px 4px 0 var(--outline);
  --sticker-sm: 3px 3px 0 var(--outline);
  --sticker-lg: 7px 7px 0 var(--outline);
  --bd: 3px solid var(--outline);

  --r-sm: 6px;
  --r: 12px;
  --r-lg: 20px;

  --ff-display: 'Unbounded', 'Arial Black', 'Segoe UI', system-ui, sans-serif;
  --ff-body: 'Outfit', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  --shell: 1160px;
}

* { box-sizing: border-box; }

/* The browser's own [hidden] rule is display:none at UA specificity, so ANY
   class that sets display beats it and the element stays on screen with
   .hidden === true. That is a genuinely baffling half hour, and it had already
   been patched five times, once per class. One rule instead. */
[hidden] { display: none !important; }
/* For a column that has a heading only screen readers need - the actions one. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  background:
    radial-gradient(120% 70% at 50% -10%, #16341f 0%, transparent 60%),
    radial-gradient(90% 60% at 100% 100%, #10261a 0%, transparent 55%),
    var(--felt);
  color: var(--chalk);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Felt grain. A tiny noise tile is generated on a canvas at load and dropped
   into --grain; without JS there is simply no grain. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--grain, none) repeat;
  background-size: 140px 140px;
  opacity: 0.09;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

img, svg { max-width: 100%; }

a { color: var(--gold); text-decoration-color: color-mix(in srgb, var(--gold) 40%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--gold-hi); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }

.shell { width: min(100% - 40px, var(--shell)); margin-inline: auto; }
.section { padding-block: clamp(64px, 8vw, 108px); }

/* --- shared bits ---------------------------------------------------------- */

.eyebrow {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--gold); }

.display {
  font-family: var(--ff-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--chalk);
  text-shadow: var(--sticker);
}
.h2 { font-size: clamp(26px, 3.6vw, 44px); }

.hot { color: var(--neon); }
.au { color: var(--gold); }

.lede { color: var(--smoke); font-size: clamp(17px, 1.4vw, 19px); max-width: 62ch; }

.btn {
  --btn-bg: var(--gold);
  --btn-ink: var(--on-gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: var(--bd);
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--sticker);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background 120ms ease-out;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--gold-hi); transform: translate(-2px, -2px); box-shadow: var(--sticker-lg); color: var(--on-gold); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--outline); }
.btn--ghost { --btn-bg: transparent; --btn-ink: var(--chalk); border-color: var(--line); box-shadow: none; }
.btn--ghost:hover { background: var(--panel-2); color: var(--chalk); transform: none; box-shadow: none; border-color: var(--gold); }
.btn--neon { --btn-bg: var(--neon); --btn-ink: #14060a; }
.btn--neon:hover { background: #ff5c85; color: #14060a; }
.btn--sm { padding: 10px 16px; font-size: 14px; }
.btn--block { width: 100%; justify-content: center; }

.rail { display: flex; align-items: center; gap: 12px; }
.rail::before, .rail::after {
  content: ""; flex: 1; height: 2px;
  background: linear-gradient(90deg, transparent, var(--line-soft) 20%, var(--line-soft) 80%, transparent);
}
.rail i { width: 13px; height: 13px; border-radius: 50%; background: var(--line); border: 2px solid var(--line-soft); display: block; }
.rail i:nth-child(2) { background: var(--brass); }

.head { display: grid; gap: 14px; max-width: 44ch; margin-bottom: 46px; }
.head--wide { max-width: 58ch; }

/* --- nav ------------------------------------------------------------------ */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--felt-deep) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--line-soft);
}
.nav__in { display: flex; align-items: center; gap: 16px; padding-block: 14px; position: relative; }
.mark { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.mark svg { display: block; flex-shrink: 0; }
.mark__txt { display: flex; flex-direction: column; line-height: 1; }
.mark__a { font-family: var(--ff-display); font-weight: 800; font-size: 14px; text-transform: uppercase; color: var(--chalk); letter-spacing: 0.02em; white-space: nowrap; }
.mark__b { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.3em; color: var(--brass); text-transform: uppercase; margin-top: 4px; }
.nav__links { display: flex; gap: 24px; }
.nav__links a { color: var(--smoke); text-decoration: none; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
/* Seven links: just above the fold into the menu, they close up a little. */
@media (min-width: 901px) and (max-width: 1080px) {
  .nav__links { gap: 15px; }
  .nav__links a { font-size: 14px; }
}
.nav__links a:hover { color: var(--chalk); }
.nav__links .only-m { display: none; }
.nav__menu { display: none; }

/* --- signed-in nav -------------------------------------------------------- */

.nav__guest { display: flex; align-items: center; gap: 10px; }
.nav__me { position: relative; }

.nav__who {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 2px solid var(--line-soft); border-radius: var(--r);
  padding: 7px 11px; cursor: pointer; color: var(--chalk);
  font: inherit; font-size: 13.5px; font-weight: 600;
}
.nav__who:hover { border-color: var(--brass); }

/* Their face from the deck once /me has said which, and the first letter of
   the address until then: a 26px circle wants a picture, not a form. */
.nav__pip {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; position: relative;
  background: var(--brass); color: var(--felt-deep);
  font-family: var(--ff-mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase;
}

/* Green only once /me has actually answered. Grey means we are painting from
   the remembered session and could not reach the API - which is the one state
   worth showing, because it is the difference between "signed in" and "signed
   in as far as this tab knows". A dot that is always green would be decoration
   claiming to be information. */
.nav__pip::after {
  content: ""; position: absolute; right: -2px; bottom: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted);
  /* Ringed in the nav's own colour so it reads as sitting on top of the pip
     rather than as a notch cut out of it. */
  box-shadow: 0 0 0 2px var(--felt-deep);
  transition: background 200ms ease, box-shadow 200ms ease;
}
.nav__pip.is-live::after {
  background: #3fbe7c;
  box-shadow: 0 0 0 2px var(--felt-deep), 0 0 7px #3fbe7c;
}
@media (prefers-reduced-motion: reduce) { .nav__pip::after { transition: none; } }
.nav__name { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__chev { color: var(--brass); font-size: 10px; }

.nav__drop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 256px; display: grid;
  background: var(--felt-deep);
  border: 2px solid var(--outline); border-radius: var(--r);
  box-shadow: var(--sticker); padding: 6px;
}
/* The menu opens on who this is: the face large, the name, the address. */
.nav__drop-me { display: flex; align-items: center; gap: 12px; padding: 10px 10px 8px; }
.nav__drop-pip {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; position: relative;
  background: var(--brass); color: var(--felt-deep);
  font-family: var(--ff-mono); font-size: 18px; font-weight: 700;
  text-transform: uppercase;
}
.nav__drop-pip:has(.av) { background: var(--felt-2); box-shadow: 0 0 0 2px var(--outline); }
.nav__drop-pip .av { width: 100%; height: 100%; border: 0; background: none; }
/* The same dot as the pip's, and the same rule: green once /me has answered. */
.nav__drop-pip::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 2px var(--felt-deep);
}
.nav__drop-pip.is-live::after { background: #3fbe7c; box-shadow: 0 0 0 2px var(--felt-deep), 0 0 7px #3fbe7c; }
.nav__drop-text { display: grid; gap: 2px; min-width: 0; }
.nav__drop-name { color: var(--chalk); font-size: 14.5px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__drop-who {
  margin: 0;
  font-family: var(--ff-mono); font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav__drop-edit { font-size: 13px !important; color: var(--brass) !important; padding-top: 4px !important; }
.nav__drop-cut { display: block; height: 1px; margin: 6px 4px; background: var(--line-soft); }
.nav__drop a,
.nav__drop button {
  display: block; width: 100%; text-align: left;
  padding: 10px; border: 0; border-radius: calc(var(--r) - 4px);
  background: none; color: var(--smoke); text-decoration: none;
  font: inherit; font-size: 14px; cursor: pointer;
}
.nav__drop a:hover,
.nav__drop button:hover { background: var(--line-soft); color: var(--chalk); }
/* Menu icons: brass beside the words, gold on hover; the way out in red. */
.ico { width: 18px; height: 18px; flex-shrink: 0; display: block; }
.nav__drop a:has(.ico), .nav__drop button:has(.ico) { display: flex; align-items: center; gap: 11px; }
.nav__drop .ico { color: var(--brass); transition: color 120ms, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav__drop a:hover .ico, .nav__drop button:hover .ico { color: var(--gold-hi); transform: rotate(-10deg) scale(1.1); }
.nav__drop .nav__drop-edit .ico { width: 16px; height: 16px; }
.nav__drop .nav__drop-out .ico { color: var(--neon); }
@media (prefers-reduced-motion: reduce) { .nav__drop .ico { transition: none; } .nav__drop a:hover .ico, .nav__drop button:hover .ico { transform: none; } }

/* --- hero ----------------------------------------------------------------- */

.hero { padding-block: clamp(36px, 5vw, 64px) clamp(48px, 6vw, 80px); position: relative; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero__title { font-family: var(--ff-display); font-weight: 900; font-size: clamp(34px, 4.7vw, 62px); line-height: 1.02; letter-spacing: -0.025em; margin: 18px 0 0; }
.hero__sub { margin-top: 20px; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; margin-top: 28px; }
/* Every "$7.99/mo" button carries the joke underneath, in small print. */
.tip-cta { display: inline-grid; justify-items: center; gap: 9px; }
.tip-cta__note { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
.hero__meta { margin-top: 20px; font-family: var(--ff-mono); font-size: 12.5px; color: var(--muted); letter-spacing: 0.04em; }

/* The room: lamp above, Sal behind the rail, a neon sign on the wall. */
.stage { position: relative; display: grid; place-items: end center; padding-top: 150px; }
.mascot { position: relative; z-index: 1; width: min(100%, 400px); display: block; cursor: pointer; }
.mascot:focus-visible { outline-offset: -3px; border-radius: 24px; }
/* Clicking a mascot focuses it, and the browser rings the whole drawing. The
   ring is for keyboards; :focus-visible above still draws it for them. */
.mascot:focus:not(:focus-visible) { outline: none; }

.lamp {
  position: absolute; top: -6px; left: 50%; translate: -50% 0;
  width: 320px; height: 320px; overflow: visible; z-index: 0;
  transform-origin: 50% 0;
  animation: swing 7s ease-in-out infinite;
}
.lamp .cone { filter: blur(7px); }
@keyframes swing {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}

.neon {
  position: absolute; top: 18px; right: 0; z-index: 2;
  display: grid; justify-items: center; gap: 2px;
  padding: 8px 14px 9px;
  border: 3px solid var(--neon);
  border-radius: 12px;
  font-family: var(--ff-mono); font-weight: 700; letter-spacing: 0.22em; line-height: 1;
  color: #fff;
  text-shadow: 0 0 6px var(--neon), 0 0 16px var(--neon), 0 0 34px var(--neon);
  box-shadow: 0 0 12px color-mix(in srgb, var(--neon) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--neon) 35%, transparent);
  background: rgb(7 15 10 / 0.6);
  transform: rotate(3deg);
  animation: flicker 9s linear infinite;
}
.neon b { font-size: 20px; }
.neon span { font-size: 9px; color: var(--gold-hi); text-shadow: 0 0 6px var(--gold), 0 0 14px var(--gold); letter-spacing: 0.3em; }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  41%      { opacity: 1; }
  42%      { opacity: 0.45; }
  43%      { opacity: 1; }
  71%      { opacity: 1; }
  72%      { opacity: 0.7; }
  73%      { opacity: 1; }
  88%      { opacity: 1; }
  89%      { opacity: 0.35; }
  90%      { opacity: 1; }
}

.shout {
  position: absolute; left: 0; top: 190px; z-index: 3;
  max-width: 220px;
  background: var(--chalk); color: #10160f;
  border: var(--bd); border-radius: 16px;
  padding: 12px 15px;
  font-weight: 700; font-size: 15px; line-height: 1.3;
  box-shadow: var(--sticker);
  opacity: 0;
  transform: translateY(8px) rotate(-3deg) scale(0.94);
  transition: opacity 180ms ease-out, transform 180ms cubic-bezier(.2,1.5,.4,1);
  pointer-events: none;
}
.shout::after {
  content: ""; position: absolute; right: 26px; bottom: -16px;
  border: 9px solid transparent; border-top-color: var(--outline); border-right-width: 16px;
}
.shout.is-on { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); }

/* --- the clock ------------------------------------------------------------ */

.clock {
  --now: var(--gold);
  position: relative;
  border: var(--bd); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--felt-2));
  box-shadow: var(--sticker-lg), inset 0 2px 0 rgb(255 255 255 / 0.05);
  padding: 20px 22px 18px;
  max-width: 520px;
  margin-top: 30px;
}
.clock__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.clock__lvl { color: var(--now); font-weight: 700; }
.clock__tag { border: 2px solid var(--line); border-radius: 999px; padding: 3px 9px; font-size: 10px; letter-spacing: 0.14em; color: var(--muted); }
.clock__time {
  font-family: var(--ff-mono); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(58px, 9vw, 92px); line-height: 1; letter-spacing: -0.02em;
  color: var(--now); margin: 10px 0 4px; text-align: center;
  text-shadow: 0 0 32px color-mix(in srgb, var(--now) 34%, transparent);
  transform-origin: center;
}
.clock__time.is-punch { animation: punch 340ms cubic-bezier(.2,1.6,.4,1); }
@keyframes punch { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
.clock__bar { height: 10px; border: 2px solid var(--outline); border-radius: 999px; background: var(--felt-deep); overflow: hidden; }
.clock__fill { height: 100%; width: 0%; background: var(--now); border-radius: 999px; transition: width 220ms linear; }
.clock__blinds { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 16px; font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
.clock__big { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; color: var(--chalk); }
.clock__ante { font-size: 13px; color: var(--smoke); }
.clock__next { text-align: center; margin-top: 6px; font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.clock__ctrls { display: flex; gap: 8px; justify-content: center; margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--line-soft); }
.key {
  font-family: var(--ff-mono); font-size: 13px; font-weight: 700;
  min-width: 44px; padding: 8px 12px;
  border: 2px solid var(--line); border-radius: var(--r-sm);
  background: var(--felt-2); color: var(--smoke);
  cursor: pointer; box-shadow: 0 2px 0 var(--outline);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out, color 120ms;
}
.key:hover { color: var(--chalk); border-color: var(--brass); }
.key:active { transform: translateY(2px); box-shadow: none; }
.key[aria-pressed="true"] { color: var(--on-gold); background: var(--gold); border-color: var(--outline); }

/* The rubber stamp that slams down on a raise */
.stamp {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; opacity: 0; z-index: 2;
}
.stamp span {
  font-family: var(--ff-display); font-size: clamp(34px, 5vw, 54px); line-height: 1;
  color: var(--neon);
  padding: 10px 22px;
  border: 5px double var(--neon);
  border-radius: 10px;
  background: rgb(7 15 10 / 0.72);
  text-shadow: 3px 3px 0 var(--outline);
  transform: rotate(-9deg);
}
.stamp.is-on { animation: slam 950ms cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes slam {
  0%   { opacity: 0; transform: scale(2.2) rotate(6deg); }
  22%  { opacity: 1; transform: scale(1) rotate(0); }
  78%  { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.05) rotate(0); }
}

/* --- ticker --------------------------------------------------------------- */

.ticker { position: relative; border-block: 3px solid var(--outline); background: #050a07; overflow: hidden; padding-block: 13px; }
.ticker::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.38) 0 1px, transparent 1px 3px);
}
.ticker__track { display: flex; width: max-content; animation: roll 48s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__set { display: flex; flex-shrink: 0; }
.ticker__set span {
  font-family: var(--ff-mono); font-size: 13px; font-weight: 700;
  color: var(--gold); text-shadow: 0 0 8px color-mix(in srgb, var(--gold) 60%, transparent);
  padding-inline: 26px; white-space: nowrap;
}
.ticker__set span::before { content: "♠"; color: var(--neon); margin-right: 26px; }
@keyframes roll { to { transform: translateX(-50%); } }

/* --- features ------------------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.card {
  border: 2px solid var(--line-soft); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel), var(--felt-2));
  padding: 26px 24px 28px;
  display: grid; gap: 12px; align-content: start;
  transition: border-color 160ms ease-out, transform 160ms ease-out;
}
.card:hover { border-color: var(--brass); transform: translateY(-3px); }
.card:hover .card__no { color: var(--copper); }
.card__no { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--brass); transition: color 160ms; }
.card__t { font-family: var(--ff-body); font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--chalk); }
.card p { color: var(--smoke); font-size: 15.5px; }

/* --- home: the membership sign ---------------------------------------------
   A second neon in the corner of "Three jobs, one dealer": what $7.99 buys and
   who is paying for it. Tilted the other way from the hero's, and out of step
   with its flicker. Where there is no corner to hang it in, it sits under the
   heading instead of over it. */
.signpost { position: relative; }
.neon.neon--deal {
  top: 6px; right: 10px;
  gap: 6px; padding: 11px 18px 12px;
  text-decoration: none; text-transform: uppercase;
  transform: rotate(-4deg);
  animation-delay: -5s;
  transition: box-shadow 160ms ease-out;
}
.neon--deal b { font-size: 26px; letter-spacing: 0.08em; }
.neon--deal span { font-size: 10px; }
.neon.neon--deal:hover, .neon.neon--deal:focus-visible {
  box-shadow: 0 0 22px var(--neon), inset 0 0 18px color-mix(in srgb, var(--neon) 50%, transparent);
}
@media (max-width: 900px) {
  .neon.neon--deal { position: static; width: max-content; margin: -18px 6px 30px auto; transform: rotate(-3deg); }
}

/* --- home: three jobs, one dealer --------------------------------------------
   Invites, the timer and the league side by side, the same weight each: the
   same card, the same little mock-up up top, three short lines and a jump. */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pillar {
  display: grid; gap: 12px; align-content: start;
  border: var(--bd); border-radius: var(--r-lg); box-shadow: var(--sticker);
  background: linear-gradient(180deg, var(--panel-2), var(--felt-2));
  padding: 22px 22px 24px; color: inherit; text-decoration: none;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out, border-color 160ms;
}
.pillar:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--outline); border-color: var(--brass); }
.pillar__art { height: 176px; display: grid; place-items: center; border-radius: var(--r); background: var(--felt-deep); border: 2px solid var(--line-soft); margin-bottom: 6px; overflow: hidden; }
.pillar__no { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.pillar:hover .pillar__no { color: var(--copper); }
.pillar__t { font-family: var(--ff-display); font-weight: 800; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; color: var(--chalk); margin: 0; }
.pillar__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pillar__list li { color: var(--smoke); font-size: 15px; padding-left: 18px; position: relative; }
.pillar__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.pillar__more { font-weight: 700; font-size: 14.5px; color: var(--gold); margin-top: 4px; }

/* The mock-ups: plain markup, no images, so they stay sharp and on-palette. */
.mini-invite, .mini-clock, .mini-league { width: min(86%, 240px); display: grid; gap: 6px; font-size: 13px; color: var(--smoke); }
.mini__k { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.mini__foot { font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted); }
.mini-invite b { font-family: var(--ff-display); font-weight: 800; font-size: 16px; color: var(--chalk); line-height: 1.15; }
.mini__when { font-size: 12.5px; }
.mini-invite__btns { display: flex; gap: 6px; margin-top: 4px; }
.mini-invite__btns i { font-style: normal; font-weight: 700; font-size: 11.5px; padding: 5px 10px; border-radius: 999px; border: 2px solid var(--line); color: var(--chalk); }
.mini-invite__btns i.is-on { background: var(--gold); border-color: var(--outline); color: var(--on-gold); box-shadow: var(--sticker-sm); }
.mini-clock { justify-items: center; text-align: center; }
.mini-clock__t { font-family: var(--ff-display); font-weight: 900; font-size: 44px; line-height: 1; color: var(--chalk); letter-spacing: -0.03em; }
.mini-clock__bar { width: 100%; height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.mini-clock__bar i { display: block; width: 58%; height: 100%; background: linear-gradient(90deg, var(--brass), var(--copper)); }
.mini-clock__blinds { font-family: var(--ff-display); font-weight: 800; font-size: 15px; color: var(--gold); }
.mini-league__row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 8px; }
.mini-league__row i { font-style: normal; font-family: var(--ff-mono); font-size: 11px; color: var(--muted); }
.mini-league__row b { color: var(--chalk); font-weight: 700; }
.mini-league__row em { font-style: normal; font-family: var(--ff-mono); font-weight: 700; color: var(--smoke); }
.mini-league__row.is-top { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.mini-league__row.is-top b::after { content: " \1F451"; }
.mini-league__row.is-top em { color: var(--gold); }
.mini-league__row.is-dave { opacity: 0.7; border-top: 1px dashed var(--line); border-radius: 0; margin-top: 2px; padding-top: 6px; }

/* --- home: one feature, four points -------------------------------------------
   The same layout for invites, timer and league: a short head on the left, four
   one-line points on the right. Nothing longer than it needs to be. */
.feat__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.feat__grid .head { margin-bottom: 0; }
.feat { border-top: 2px solid var(--line-soft); padding-top: clamp(48px, 6vw, 80px) !important; }
.pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pt { border: 2px solid var(--line-soft); border-radius: var(--r); background: linear-gradient(180deg, var(--panel), var(--felt-2)); padding: 18px 18px 16px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px 14px; align-content: start; }
.pt b { grid-column: 2; color: var(--chalk); font-weight: 800; font-size: 17px; line-height: 1.25; }
.pt p { grid-column: 2; margin: 0; color: var(--smoke); font-size: 15px; }
/* Each point's icon: a sticker, with the same hard shadow as everything else,
   and a little wobble when the card is pointed at. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pt__ico { grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; filter: drop-shadow(2px 2px 0 var(--outline)); transition: transform 200ms cubic-bezier(.3, 1.6, .6, 1); }
.pt:hover .pt__ico { transform: rotate(-8deg) scale(1.08); }

/* --- home: the timer, as a picture -----------------------------------------
   The app in a desktop window, mid-tournament, under the timer's headline. A
   picture only - the live demo is the hero's clock. Level seven, so it has
   warmed from brass to copper like the real one does as the night goes on. */
.feat__side { display: grid; gap: 34px; align-content: start; }
.feat__main { display: grid; gap: 16px; align-content: start; }
/* The headline plus the app window stand taller than the points plus the keys,
   so the points sit in the middle of that height rather than leaving a hole
   under the keys. Side by side only; stacked, they simply follow. */
@media (min-width: 901px) {
  #timer .feat__main { align-self: center; }
}
.appwin {
  --now: var(--copper);
  position: relative; margin: 0; max-width: 470px;
  border: var(--bd); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--felt-2));
  box-shadow: var(--sticker-lg);
}
.appwin__bar {
  display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  background: var(--felt-deep); border-bottom: 2px solid var(--outline);
  border-radius: calc(var(--r-lg) - 3px) calc(var(--r-lg) - 3px) 0 0;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted);
}
.appwin__bar i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--outline); background: var(--line); }
.appwin__bar i:nth-child(1) { background: var(--neon); }
.appwin__bar i:nth-child(2) { background: var(--gold); }
.appwin__bar i:nth-child(3) { background: #3fbe7c; }
.appwin__bar span { margin-left: 8px; }
.appwin__body { padding: 16px 20px 18px; }
.appwin__top { display: flex; justify-content: space-between; gap: 10px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.appwin__top b { color: var(--now); }
.appwin__time {
  font-family: var(--ff-mono); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(56px, 6.6vw, 80px); line-height: 1; letter-spacing: -0.02em; text-align: center;
  color: var(--now); margin: 12px 0 10px;
  text-shadow: 0 0 30px color-mix(in srgb, var(--now) 36%, transparent);
}
.appwin__prog { height: 9px; border: 2px solid var(--outline); border-radius: 999px; background: var(--felt-deep); overflow: hidden; }
.appwin__prog i { display: block; width: 62%; height: 100%; background: linear-gradient(90deg, var(--gold), var(--copper)); }
.appwin__blinds { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-top: 14px; font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
.appwin__blinds b { font-size: 28px; color: var(--chalk); }
.appwin__blinds span { font-size: 12.5px; color: var(--smoke); }
.appwin__next { text-align: center; margin-top: 4px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.appwin__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--line-soft); text-align: center; }
.appwin__stats span { display: block; font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.appwin__stats b { display: block; margin-top: 3px; font-family: var(--ff-mono); font-size: 15px; color: var(--chalk); }
.appwin__shout {
  position: absolute; top: -20px; right: -16px; transform: rotate(5deg);
  padding: 7px 13px; border: var(--bd); border-radius: 12px; box-shadow: var(--sticker);
  background: var(--chalk); color: var(--on-gold); font-weight: 800; font-size: 13.5px; white-space: nowrap;
}
.appwin__shout::after {
  content: ""; position: absolute; left: 22px; bottom: -11px; width: 14px; height: 14px;
  background: var(--chalk); border-right: var(--bd); border-bottom: var(--bd); transform: rotate(45deg);
}
@media (max-width: 520px) {
  /* No room to hang off the corner of the window on a phone. */
  .appwin__shout { right: 6px; top: -18px; font-size: 12.5px; }
}
/* Side by side, the three cards share their rows, so a title that runs to two
   lines pushes nothing out of step: every list starts level, every link sits on
   one line. Browsers without subgrid just stack each card on its own. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .trio { grid-template-rows: repeat(5, auto); row-gap: 0; }
    .pillar { grid-row: span 5; grid-template-rows: subgrid; row-gap: 12px; }
  }
}
@media (max-width: 900px) {
  .trio { grid-template-columns: minmax(0, 1fr); }
  .feat__grid { grid-template-columns: minmax(0, 1fr); }
}
/* A tablet: one card per row, full width, the mock-up beside the words rather
   than a narrow column stranded against the left edge. */
@media (min-width: 600px) and (max-width: 900px) {
  .pillar { grid-template-columns: 220px minmax(0, 1fr); column-gap: 22px; align-items: start; }
  .pillar__art { grid-column: 1; grid-row: 1 / span 5; height: 100%; min-height: 176px; margin: 0; }
  .pillar > :not(.pillar__art) { grid-column: 2; }
}
@media (max-width: 520px) {
  .pts { grid-template-columns: minmax(0, 1fr); }
}

/* The keyboard shortcuts: a small cheat sheet under the timer's points. Two
   columns filled top to bottom, keys in a fixed slot so every label starts on
   the same line, and keycaps that look like keys. */
.kbar { display: grid; gap: 12px; padding: 16px 18px 18px; border: 2px solid var(--line-soft); border-radius: var(--r); background: var(--felt-deep); }
.kbar__t { margin: 0; font-family: var(--ff-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.kbar__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 10px 28px; }
.kbar__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 14px; color: var(--smoke); }
.kbar__keys { display: flex; justify-content: flex-end; gap: 5px; }
.kbar kbd {
  display: inline-grid; place-items: center;
  min-width: 28px; height: 26px; padding: 0 8px;
  font-family: var(--ff-mono); font-size: 11.5px; font-weight: 700; line-height: 1; color: var(--chalk);
  background: linear-gradient(180deg, #264a33, #17311f);
  border: 1.5px solid var(--outline); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 3px 0 #0f2519, 0 4px 0 var(--outline);
  margin-bottom: 4px;
}
/* The arrow glyphs sit small in the mono face; a point or two evens them up. */
.kbar kbd[aria-label$="arrow"] { font-size: 14px; }
.kbar kbd[aria-label="Left arrow"], .kbar kbd[aria-label="Right arrow"] { font-size: 16px; }
@media (max-width: 520px) {
  .kbar__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}
kbd {
  font-family: var(--ff-mono); font-size: 12px; font-weight: 700; color: var(--chalk);
  background: var(--panel-2); border: 2px solid var(--line); border-bottom-width: 3px; border-radius: 5px;
  padding: 3px 8px; min-width: 34px; text-align: center; flex-shrink: 0;
}

/* --- head to head --------------------------------------------------------- */

.vs-wrap { overflow-x: auto; border: var(--bd); border-radius: var(--r-lg); background: var(--felt-deep); box-shadow: var(--sticker-lg); }
.vs { width: 100%; min-width: 680px; border-collapse: collapse; }
.vs th, .vs td { padding: 17px 20px; text-align: left; vertical-align: top; border-bottom: 2px solid var(--line-soft); }
.vs tbody tr:last-child td { border-bottom: none; }
.vs tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--panel) 45%, transparent); }
.vs thead th { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); background: var(--panel); border-bottom: 3px solid var(--outline); }
.vs thead th:nth-child(2) { color: var(--gold); }
.vs th .who { display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font-family: var(--ff-body); font-weight: 800; font-size: 15px; }
.vs th:nth-child(2) .who { color: var(--gold); }
.vs th:nth-child(3) .who { color: var(--smoke); }
.vs td:first-child { font-weight: 700; color: var(--chalk); width: 27%; font-size: 15.5px; }
.vs td:nth-child(2) { color: var(--chalk); font-size: 15.5px; }
.vs td:nth-child(3) { color: var(--smoke); font-style: italic; font-size: 15.5px; }
.vs .c { display: inline-flex; align-items: center; gap: 10px; }
.tick, .cross {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: inline-grid; place-items: center;
  font-family: var(--ff-mono); font-weight: 700; font-size: 13px; line-height: 1;
  border: 2px solid var(--outline);
}
.tick { background: var(--gold); color: var(--on-gold); }
.cross { background: transparent; color: var(--muted); border-color: var(--line); }
.who svg { width: 30px; height: 30px; }

/* --- it talks dirty ------------------------------------------------------- */

.sound { background: var(--felt-deep); border-block: 3px solid var(--outline); }
.sound__head { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 40px; }
.sound__head .head { margin-bottom: 0; }
.advisory {
  display: grid; justify-items: center; gap: 3px;
  padding: 12px 18px; background: #0a0a0a; color: #fff;
  border: 3px solid #fff; border-radius: 6px;
  font-family: var(--ff-mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px;
  transform: rotate(-4deg); box-shadow: var(--sticker);
}
.advisory b { font-family: var(--ff-display); font-weight: 800; font-size: 15px; letter-spacing: 0; }
.lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.line {
  border: var(--bd); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--felt-2));
  box-shadow: var(--sticker);
  padding: 22px 22px 20px;
  display: grid; gap: 16px; align-content: start;
}
.line__top { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.line__when { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.line__q { font-size: 17.5px; line-height: 1.45; font-weight: 500; font-style: italic; color: var(--chalk); }
.line__q::before { content: "“"; color: var(--neon); font-family: var(--ff-display); font-weight: 800; font-size: 1.5em; line-height: 0; margin-right: 3px; vertical-align: -0.2em; font-style: normal; }
.line__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 2px solid var(--line-soft); padding-top: 14px; }
.line__n { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); }
.line__draw { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.play {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 13px;
  border: var(--bd); border-radius: 999px;
  background: var(--neon); color: #14060a;
  font-family: var(--ff-body); font-weight: 800; font-size: 14px;
  cursor: pointer; box-shadow: var(--sticker-sm);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.play:hover { background: #ff5c85; transform: translate(-1px, -1px); box-shadow: var(--sticker); }
.play:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--outline); }
.play__ic { width: 0; height: 0; border-left: 11px solid #14060a; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.play.is-playing .play__ic { width: 11px; height: 13px; border: none; border-left: 4px solid #14060a; border-right: 4px solid #14060a; }
.bars { display: none; gap: 2px; align-items: flex-end; height: 14px; }
.play.is-playing .bars { display: inline-flex; }
.bars i { width: 3px; background: #14060a; animation: bar 520ms ease-in-out infinite alternate; }
.bars i:nth-child(2) { animation-delay: 130ms; }
.bars i:nth-child(3) { animation-delay: 260ms; }
.bars i:nth-child(4) { animation-delay: 90ms; }
@keyframes bar { from { height: 3px; } to { height: 14px; } }
.bag__pips { display: flex; flex-wrap: wrap; gap: 5px; }
.bag__pips i { width: 10px; height: 10px; border-radius: 50%; background: var(--brass); display: block; opacity: 0.85; transition: background 160ms, transform 160ms, opacity 160ms; }
.bag__pips i.is-drawn { background: var(--neon); opacity: 1; transform: scale(1.35); }
.bag__pips i.is-last { box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon) 40%, transparent); }
.draw__out { font-family: var(--ff-mono); font-size: 12px; color: var(--smoke); line-height: 1.5; }
.draw__out b { color: var(--neon); font-weight: 700; }

/* --- anatomy -------------------------------------------------------------- */

.anat { overflow-x: auto; }
.anat svg { display: block; width: 100%; min-width: 820px; height: auto; }
.anat .lbl { font-family: var(--ff-body); font-weight: 800; font-size: 17px; fill: var(--chalk); }
.anat .quip { font-family: var(--ff-body); font-weight: 400; font-size: 14px; fill: var(--smoke); }
.anat .lead { stroke: var(--gold); stroke-width: 2; fill: none; }
.anat .dot { fill: var(--neon); stroke: var(--outline); stroke-width: 2; }

/* --- regulars ------------------------------------------------------------- */

.regulars { position: relative; overflow: hidden; }
.carpet { position: absolute; inset: 0; opacity: 0.11; pointer-events: none; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; position: relative; }
.quote {
  background: var(--chalk); color: #131a12;
  border: var(--bd); border-radius: 18px; padding: 22px 22px 20px;
  box-shadow: var(--sticker); display: grid; gap: 14px; align-content: start;
}
.quote:nth-child(2) { transform: rotate(1.1deg); }
.quote:nth-child(3) { transform: rotate(-0.8deg); }
.quote p { font-size: 17px; font-weight: 500; line-height: 1.45; }
.quote footer { display: flex; align-items: center; gap: 11px; border-top: 2px dashed #b9b3a2; padding-top: 13px; }
.quote__who { font-weight: 800; font-size: 14px; color: #131a12; }
.quote__what { font-size: 12.5px; color: #5c6357; font-family: var(--ff-mono); }
.pfp { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--outline); background: var(--felt-2); flex-shrink: 0; overflow: hidden; display: grid; place-items: center; }
.pfp svg { width: 100%; height: 100%; display: block; }
.disclaim { margin-top: 22px; font-family: var(--ff-mono); font-size: 12px; color: var(--muted); position: relative; }

/* --- pricing -------------------------------------------------------------- */

.price__grid {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 60px); align-items: center;
  border: var(--bd); border-radius: 26px;
  background: linear-gradient(150deg, var(--panel-2), var(--felt-2) 70%);
  box-shadow: var(--sticker-lg);
  padding: clamp(28px, 4vw, 46px);
}
.chipwrap { perspective: 900px; animation: wobble 7s ease-in-out infinite; display: grid; justify-items: center; gap: 10px; }
.chip {
  position: relative;
  width: clamp(190px, 22vw, 236px); aspect-ratio: 1; border-radius: 50%;
  transform-style: preserve-3d;
  transition: transform 750ms cubic-bezier(.3,1.3,.4,1);
  cursor: pointer;
  border: none; padding: 0; background: none;
}
.chipwrap:hover .chip, .chip:focus-visible { transform: rotateY(180deg); }
.chip__face {
  position: absolute; inset: 0; border-radius: 50%;
  backface-visibility: hidden;
  display: grid; place-items: center;
  background: repeating-conic-gradient(from 15deg, var(--neon) 0 45deg, var(--chalk) 45deg 60deg);
  border: 4px solid var(--outline);
  box-shadow: var(--sticker), inset 0 0 0 7px color-mix(in srgb, var(--outline) 45%, transparent);
}
.chip__face--back { transform: rotateY(180deg); background: repeating-conic-gradient(from 15deg, var(--gold) 0 45deg, var(--chalk) 45deg 60deg); }
.chip__in {
  width: 74%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, var(--panel-2), var(--felt-deep));
  border: 3px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  display: grid; place-content: center; justify-items: center; gap: 3px;
}
.chip__amt { font-family: var(--ff-mono); font-weight: 700; font-size: clamp(30px, 4vw, 40px); color: var(--gold); line-height: 1; letter-spacing: -0.02em; }
.chip__per { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.24em; color: var(--muted); }
.chip__back { font-family: var(--ff-display); font-weight: 800; font-size: clamp(15px, 2vw, 19px); color: var(--chalk); line-height: 1.1; text-align: center; letter-spacing: -0.02em; }
.chip__suit { font-size: 22px; color: var(--neon); line-height: 1; }
.chip__hint { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
@keyframes wobble { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

.incl { display: grid; gap: 9px; margin: 22px 0 26px; padding: 0; list-style: none; }
.incl li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15.5px; color: var(--smoke); }
.incl li b { color: var(--chalk); font-weight: 700; }
.incl svg { margin-top: 4px; }
.fine { font-family: var(--ff-mono); font-size: 11.5px; color: var(--muted); margin-top: 14px; }

/* --- roadmap -------------------------------------------------------------- */

.road { display: grid; gap: 10px; }
.road__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center;
  padding: 18px 22px; border: 2px solid var(--line-soft); border-radius: var(--r); background: var(--panel);
}
.road__n { font-weight: 800; font-size: 17.5px; }
.road__n span { color: var(--smoke); font-weight: 400; font-size: 15.5px; }
.road__s { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); border: 2px solid var(--line); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.road__bar { grid-column: 1 / -1; height: 8px; border: 2px solid var(--outline); border-radius: 999px; background: var(--felt-deep); overflow: hidden; }
.road__bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--brass), var(--gold)); }

/* --- faq ------------------------------------------------------------------ */

.faq__grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(26px, 4vw, 54px); align-items: start; }
details { border-bottom: 2px solid var(--line-soft); padding-block: 4px; }
summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 700; font-size: 17.5px; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 6px; top: 15px; font-family: var(--ff-mono); font-size: 24px; color: var(--brass); line-height: 1; }
details[open] summary::after { content: "–"; }
details p { color: var(--smoke); padding-bottom: 20px; max-width: 66ch; font-size: 15.5px; }

/* --- footer --------------------------------------------------------------- */

.foot { border-top: 3px solid var(--outline); background: var(--felt-deep); padding-block: 48px 36px; }
/* Brand on the left, the link columns sharing the rest of the width evenly.
   A grid rather than a wrapping row: with four columns the row no longer fit
   beside the brand and dropped onto a line of its own, bunched to the left. */
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.8fr); gap: 32px 56px; align-items: start; }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px 40px; }
@media (max-width: 960px) {
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
}
/* A phone: the link columns two across, the house rules full width below. */
@media (max-width: 520px) {
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .foot__col:last-child { grid-column: 1 / -1; }
}
.foot__col { display: grid; gap: 9px; align-content: start; }
.foot__h { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.foot__col a { color: var(--smoke); text-decoration: none; font-size: 14.5px; }
.foot__col a:hover { color: var(--gold); }
.rules { margin: 0; padding: 0 0 0 18px; color: var(--smoke); font-size: 14px; display: grid; gap: 5px; max-width: 30ch; }
.rules li::marker { color: var(--brass); font-family: var(--ff-mono); font-weight: 700; }
.foot__base { margin-top: 40px; padding-top: 22px; border-top: 2px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 13px; color: var(--muted); }

/* --- modal ---------------------------------------------------------------- */

.scrim { position: fixed; inset: 0; z-index: 90; background: rgb(3 8 5 / 0.78); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.modal { width: min(100%, 420px); background: linear-gradient(180deg, var(--panel-2), var(--felt-2)); border: var(--bd); border-radius: 22px; box-shadow: var(--sticker-lg); padding: 26px 26px 24px; position: relative; }
.modal__x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); background: var(--felt-2); color: var(--smoke); font-size: 17px; cursor: pointer; line-height: 1; }
.modal__x:hover { color: var(--chalk); border-color: var(--brass); }
.modal__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.modal__t { font-family: var(--ff-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.tabs { display: flex; gap: 6px; background: var(--felt-deep); border: 2px solid var(--line-soft); border-radius: 10px; padding: 4px; margin: 18px 0; }
.tab { flex: 1; padding: 9px 10px; border: none; border-radius: 7px; background: transparent; color: var(--smoke); font-family: var(--ff-body); font-weight: 700; font-size: 14px; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--gold); color: var(--on-gold); }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
/* min-width: 0, or an input will not shrink below its built-in width of about
   twenty characters: a dialog on a small phone scrolls sideways, and three
   money fields in a row spill out of it. */
.field input { min-width: 0; font-family: var(--ff-body); font-size: 15px; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--line); background: var(--felt-deep); color: var(--chalk); }
/* A set height, not the font's: a browser's autofill button or a password manager's icon
   inside one field otherwise makes it a few pixels off from the field beside it. */
.field input:not([type="checkbox"]):not([type="radio"]) { height: 48px; line-height: 20px; }
.field input::placeholder { color: #56685c; }
.field input:focus { border-color: var(--gold); outline: none; }
/* A value worked out from something else on the form (the stack, from the chips): shown, not typed. */
.field input.field--derived { color: var(--gold); border-style: dashed; cursor: default; }
.field input.field--derived:focus { border-color: var(--line); }

/* type=date and type=time are already pickers - the calendar and clock are
   native, keyboard accessible and localised, which is why there is no hand-
   built widget here. What was wrong is that the indicator is a small dark glyph
   on a dark field, so the control read as something you had to type into. Make
   it look like the button it is; the script opens it from anywhere on the field. */
.field input[type="date"], .field input[type="time"] { cursor: pointer; }
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator {
  width: 18px; height: 18px; padding: 4px; margin-left: 4px;
  border-radius: 8px; cursor: pointer; opacity: 0.7;
  /* The glyph ships black. On this felt it has to be inverted to be seen. */
  filter: invert(0.85);
  transition: opacity 140ms ease, background 140ms ease;
}
.field input[type="date"]::-webkit-calendar-picker-indicator:hover,
.field input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1; background: color-mix(in srgb, var(--gold) 28%, transparent);
}
.demo-note { margin-top: 16px; font-family: var(--ff-mono); font-size: 11.5px; line-height: 1.5; color: var(--muted); border-top: 2px dashed var(--line-soft); padding-top: 14px; }
.demo-note b { color: var(--brass); }
.said { margin-top: 14px; padding: 12px 14px; border: 2px solid var(--brass); border-radius: 10px; background: color-mix(in srgb, var(--brass) 12%, transparent); color: var(--chalk); font-size: 14.5px; font-weight: 500; }

/* --- mascot motion ---------------------------------------------------------
   Sal lives in <defs> and is drawn through <use>, so the only way to reach
   his parts from the page is through inherited custom properties:
     --px / --py  pupil offset, follows the cursor
     --brow       right eyebrow lift, on hover
     --drag       cigar cherry scale, when poked
   ------------------------------------------------------------------------- */
.pupil { transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform 120ms ease-out; }
.brow { transform-box: fill-box; transform-origin: center; transition: transform 220ms cubic-bezier(.2,1.4,.4,1); }
.brow--l { transform: rotate(-7deg); }
.brow--r { transform: rotate(6deg) translateY(var(--brow, 0px)); }
.stage:hover .mascot { --brow: -8px; }
.mascot.is-poked { --drag: 1.55; }

.wisp { animation: puff 5.5s ease-in infinite; transform-box: fill-box; }
.wisp--2 { animation-duration: 6.4s; animation-delay: 1.6s; }
.wisp--3 { animation-duration: 7.1s; animation-delay: 3.2s; }
@keyframes puff {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  22%  { opacity: 0.5; }
  100% { opacity: 0; transform: translate(-14px, -78px) scale(1.7); }
}
.cherry { transform-box: fill-box; transform-origin: center; transform: scale(var(--drag, 1)); transition: transform 260ms cubic-bezier(.2,1.6,.4,1); animation: ember 2.6s ease-in-out infinite; }
@keyframes ember { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
.lid { transform-box: fill-box; transform-origin: top center; transform: scaleY(0); animation: blink 6.2s ease-in-out infinite; }
.lid--2 { animation-delay: 0.04s; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(0); } 95%, 97% { transform: scaleY(1); } }
.fan { transform-box: fill-box; transform-origin: 60% 100%; animation: sway 5.8s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(2.4deg); } }

/* Big puffs when he's poked. These live in the hero document tree */
.bigpuff { opacity: 0; transform-box: fill-box; transform-origin: center; }
.mascot.is-poked .bigpuff { animation: bigpuff 1100ms ease-out forwards; }
.mascot.is-poked .bigpuff--2 { animation-delay: 120ms; }
.mascot.is-poked .bigpuff--3 { animation-delay: 240ms; }
@keyframes bigpuff {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  20%  { opacity: 0.55; }
  100% { opacity: 0; transform: translate(-20px, -110px) scale(2.2); }
}

/* Sally (partials/sally.html) is built and steered the same way. She shares
   --px / --py with Sal, and adds:
     --brow  her right brow: half his lift, there's a visor brim right above it
     --wink  0 or 1, her right eye, when poked or when her card is hovered
   Her lids are drawn lines, not shapes, so a blink swaps .s-open for .s-shut. */
.s-brow--r { transform: translateY(calc(var(--brow, 0px) / 2)); transition: transform 220ms cubic-bezier(.2,1.4,.4,1); }
.s-wink-open { opacity: calc(1 - var(--wink, 0)); transition: opacity 60ms; }
.s-wink-shut { opacity: var(--wink, 0); transition: opacity 60ms; }
.s-open { animation: s-open 6.4s infinite; }
.s-shut { opacity: 0; animation: s-shut 6.4s infinite; }
@keyframes s-open { 0%, 93%, 97%, 100% { opacity: 1; } 94%, 96% { opacity: 0; } }
@keyframes s-shut { 0%, 93%, 97%, 100% { opacity: 0; } 94%, 96% { opacity: 1; } }

/* --- hero load sequence (runs immediately, never waits on scroll) ---------- */
.in { animation: rise 620ms cubic-bezier(.16,1,.3,1) backwards; }
.in--1 { animation-delay: 60ms; }
.in--2 { animation-delay: 150ms; }
.in--3 { animation-delay: 240ms; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

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

/* On a laptop the hero ran past the fold and cut the demo clock in half. The
   headline alone was 253px of a 1000px viewport, and everything below it had to
   fit in what was left.

   Gated on HEIGHT, not width: on a tall monitor the hero already fits and the
   original proportions are the ones that were designed. Gated above 980px too,
   because below that the grid is already one column and this stack does not
   apply. Nothing here changes what is on the page - only how much room it takes
   on a screen that does not have it to spare. */
@media (min-width: 981px) and (max-height: 1100px) {
  .hero { padding-block: 28px 48px; }
  .hero__title { font-size: clamp(34px, 4.2vw, 50px); margin-top: 10px; }
  .hero__sub { margin-top: 14px; font-size: 17.5px; }
  .hero__cta { margin-top: 18px; }
  .hero__meta { margin-top: 12px; }
  .hero .clock { margin-top: 16px; }
}


@media (max-width: 980px) {
  .hero__grid, .sound__grid, .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .price__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .price__grid .incl li { text-align: left; }
  .price__grid .head { justify-items: center; }
  .stage { order: -1; padding-top: 130px; }
  .mascot { width: min(78%, 340px); }
  .lamp { width: 260px; height: 260px; }
  .faq__grid .head { max-width: none; }
}
/* The nav folds into its menu a little before phones do: at tablet width the
   full row of links and buttons ran past the right edge of the screen. */
@media (max-width: 900px) {
  .nav__in { gap: 10px; }
  .mark__a { font-size: 12px; }
  .mark__b { display: none; }
  .nav__menu { display: inline-flex; }
  .nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--felt-deep); border-bottom: 3px solid var(--outline);
    padding: 6px 20px 12px;
  }
  .nav__links a { padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 16px; }
  .nav__links .only-m { display: block; }
  .nav.is-open .nav__links { display: flex; }
  .nav__signin { display: none; }
  .nav__name, .nav__chev { display: none; }
  .nav__who { padding: 4px; border-color: transparent; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .btn--sm { padding: 9px 12px; font-size: 13px; }
  .bag__row { grid-template-columns: 1fr auto; }
  .bag__pips { grid-column: 1 / -1; }
  .road__row { grid-template-columns: 1fr; }
  .clock__ctrls { flex-wrap: wrap; }
  .neon { top: 6px; transform: rotate(3deg) scale(0.85); transform-origin: top right; }
  .shout { top: 150px; max-width: 180px; font-size: 14px; }
}

@media (max-width: 520px) {
  /* Two-line wordmark so the icon, the CTA and the menu all fit at 375px */
  .mark__a { white-space: normal; max-width: 96px; line-height: 1.05; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  /* The ticker stands still: each quote once, wrapped onto centred lines, no scrollbar.
     A quote wider than the screen wraps inside itself rather than poking out. */
  .ticker { padding-inline: 16px; }
  .ticker__track { animation: none; display: block; width: auto; }
  .ticker__set { flex-wrap: wrap; justify-content: center; gap: 10px 32px; }
  .ticker__set[aria-hidden="true"] { display: none; }
  .ticker__set span { padding-inline: 0; white-space: normal; text-align: center; line-height: 1.4; }
  .ticker__set span::before { margin-right: 10px; }
  .lid { transform: scaleY(0); }
  .wisp { opacity: 0.35; }
  .lamp, .neon, .chipwrap { animation: none; }
  .neon { opacity: 1; }
}

/* --- inner pages ---------------------------------------------------------- */

.chip { display: block; text-decoration: none; }
/* The signed-in pages: the heading is a label, not a billboard, so the work
   - the guest list, the games, the standings - starts above the fold. */
.pg { padding-block: clamp(22px, 3vw, 36px) clamp(64px, 8vw, 108px); }
.pg__head { display: grid; gap: 8px; max-width: 60ch; margin-bottom: 20px; }
.pg__head .display { font-size: clamp(26px, 3.4vw, 40px); }
.pg__head .lede { font-size: 16px; }
.banner {
  display: flex; gap: 14px; align-items: flex-start;
  border: 3px solid var(--gold); border-radius: var(--r);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  padding: 14px 16px; font-size: 14.5px; color: var(--chalk); max-width: 76ch; margin-bottom: 30px;
}
.banner b { color: var(--gold); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; padding-top: 3px; }

.auth { display: grid; grid-template-columns: minmax(0, 440px); justify-content: center; }
.auth--wide { grid-template-columns: minmax(0, 500px) minmax(0, 380px); gap: 24px; align-items: start; }
.panel { border: var(--bd); border-radius: 22px; background: linear-gradient(180deg, var(--panel-2), var(--felt-2)); box-shadow: var(--sticker-lg); padding: 28px 26px 24px; }
.panel__head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.panel__head svg { width: 64px; flex-shrink: 0; }
.panel__t { font-family: var(--ff-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; margin: 4px 0 0; }
.panel__sub { color: var(--smoke); font-size: 15px; margin: 10px 0 20px; }
.field select, .field textarea { font-family: var(--ff-body); font-size: 15px; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--line); background: var(--felt-deep); color: var(--chalk); }
.field textarea { min-height: 130px; resize: vertical; }
.field textarea.gm-details { min-height: 84px; }
/* The host's details for guests, on the invite page: their words, their line breaks. */
.rv-details {
  margin: 0; padding: 12px 14px; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  color: var(--chalk); font-size: 15px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere;
}
.gp-details { max-width: 720px; margin-top: 4px; }
/* The guest's note to the host, on the invite page: one quiet line under the
   answers until it is opened. 16px in the box, or a phone zooms in on it. */
.rv-note { display: grid; gap: 8px; justify-items: start; }
.rv-note .linkish { font-size: 14px; }
.rv-note__said { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--smoke); overflow-wrap: anywhere; }
.rv-note__said q { color: var(--chalk); font-style: italic; }
.rv-note__said .linkish { margin-left: 6px; }
.rv-note__form { display: flex; gap: 8px; width: 100%; }
.rv-note__form input {
  flex: 1 1 auto; min-width: 0; font-family: var(--ff-body); font-size: 16px; padding: 8px 12px;
  border-radius: 10px; border: 2px solid var(--line); background: var(--felt-deep); color: var(--chalk);
}
.rv-note__form input::placeholder { color: #56685c; }
.rv-note__form input:focus { border-color: var(--gold); outline: none; }
/* And on the host's guest list, under the name. */
.gp-note { font-size: 14px; line-height: 1.4; color: var(--chalk); font-style: italic; overflow-wrap: anywhere; }
/* A select is as wide as its longest option unless told otherwise, and on a
   phone the contact form's longest one pushed the page sideways. */
.field select { min-width: 0; max-width: 100%; }
.field select:focus, .field textarea:focus { border-color: var(--gold); outline: none; }
/* Contacts: a table of people, with add and edit in a dialog over the top.
   Modelled on .vs, the comparison table on the home page, so the two read as
   the same product - a scroll wrapper carrying the border and the shadow, a
   mono uppercase head, and rows separated by rules rather than boxes. */
.pane__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.pane__count { flex: none; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 999px; border: 2px solid var(--line); color: var(--muted); }
.pane__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.find { width: min(100%, 22rem); font-family: var(--ff-body); font-size: 14px; padding: 10px 12px 10px 34px; border-radius: 10px; border: 2px solid var(--line); background: var(--felt-deep) no-repeat 11px 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2386998c' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); color: var(--chalk); }
.find::placeholder { color: #56685c; }
.find:focus { border-color: var(--gold); outline: none; }

/* Toggles on the left, search on the right, and the buttons that act on the
   whole table down at the bottom next to the pager - so the controls that
   narrow the list sit above it and the ones that change it sit below. */
.pane__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pane__foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pane__chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 5.6rem; overflow-y: auto; }
.pane__chip { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 2px solid var(--line); background: transparent; color: var(--smoke); cursor: pointer; transition: border-color 140ms ease, color 140ms ease, background 140ms ease; }
.pane__chip:hover { border-color: var(--brass); color: var(--chalk); }
.pane__chip[aria-current="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 700; }
.pane__chip--ask:not([aria-current="true"]) { border-color: var(--gold); color: var(--gold); }

/* position: relative so the absolutely placed sr-only header labels are clipped
   by this scroller rather than escaping it and widening the whole page on a phone. */
.tbl-wrap { position: relative; overflow-x: auto; border: 2px solid var(--line); border-radius: var(--r); background: var(--felt-deep); }
.tbl { width: 100%; min-width: 640px; border-collapse: collapse; }
.tbl th, .tbl td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 2px solid var(--line-soft); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--panel) 55%, transparent); }
.tbl thead th { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); background: var(--panel); border-bottom: 3px solid var(--outline); white-space: nowrap; }
.tbl__who { display: flex; align-items: center; gap: 11px; }
.tbl__pip { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--felt-2); border: 2px solid var(--line); font-family: var(--ff-mono); font-size: 11.5px; font-weight: 700; color: var(--gold); }
/* A game's date at a glance: a calendar leaf, the month over the day. A bare
   number in a circle read as "game 2". */
.tbl__pip--date { width: 40px; height: 44px; border-radius: 8px; place-items: stretch; grid-template-rows: auto 1fr; overflow: hidden; }
.tbl__pip--date small { font-size: 8.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; line-height: 1; padding: 3px 0 2px; color: var(--on-gold); background: var(--gold); }
.tbl__pip--date b { display: grid; place-items: center; font-size: 15px; line-height: 1; color: var(--chalk); }
/* Account status as a dot, because spelled out it was always the half of the
   line that got ellipsised away. */
.tbl__dot { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 999px; background: var(--gold); border: 2px solid var(--felt-deep); }
.tbl__name { font-weight: 700; font-size: 14.5px; }
.tbl__stack { display: grid; gap: 2px; min-width: 0; }
.tbl__by { font-size: 12.5px; color: var(--muted); }
.tbl tr.tbl__more > td { text-align: left; white-space: normal; padding-top: 0; }
/* What opens under a row (a night's results) spans the whole table, which a
   phone scrolls sideways: it was as wide as that, names and money off the
   screen. Held to the part of the table in view, and pinned to its left edge. */
.tbl-wrap:has(tr.tbl__more) { container-type: inline-size; }
.tbl tr.tbl__more > td > * { position: sticky; left: 14px; max-width: calc(100cqw - 28px); }
/* A game's name opens its own page: chalk like the rest of the row, gold on hover. */
a.tbl__name { color: var(--chalk); text-decoration: none; }
a.tbl__name:hover { color: var(--gold); text-decoration: underline; }
.tbl__mono { font-family: var(--ff-mono); font-size: 12px; color: var(--smoke); }
/* Under a game's time, the reader's own when their clock reads another. */
.tbl__also { font-family: var(--ff-mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.tbl__none { font-family: var(--ff-mono); font-size: 12px; color: #56685c; }
.tbl__acts { display: flex; gap: 8px; justify-content: flex-end; }
.tbl td:last-child { text-align: right; white-space: nowrap; }

.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 2px solid var(--line-soft); color: var(--brass); white-space: nowrap; }

.pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pager__at { font-family: var(--ff-mono); font-size: 11.5px; color: var(--muted); }
.pager__b { display: flex; gap: 6px; }
.pager__b button { font-family: var(--ff-mono); font-size: 11px; min-width: 32px; padding: 6px 9px; border-radius: 8px; border: 2px solid var(--line); background: transparent; color: var(--smoke); cursor: pointer; }
.pager__b button:hover:not(:disabled) { border-color: var(--brass); color: var(--chalk); }
.pager__b button:disabled { opacity: 0.35; cursor: default; }
.pager__b button[aria-current="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 700; }

/* The modal vocabulary already existed in this stylesheet and nothing used it.
   Only the width needed a second option - a contact form does not fit in the
   420px a confirmation dialog wants. */
.modal--wide { width: min(100%, 560px); }
/* A game: wide enough that a chip, its three boxes and its x sit on one line. */
.modal--game { width: min(100%, 920px); }

/* .modal is a plain padded block, unlike .panel whose children carry their own
   margins. Without a gap here the form, the list and the message sit flush
   against each other. */
.modal__body { display: grid; gap: 14px; margin-top: 18px; }

/* Nothing inside a dialog may make the dialog taller than the screen. Twenty
   groups would otherwise push its buttons off the bottom with no way back. */
.modal .dl { max-height: 19rem; overflow-y: auto; }
.checks { display: grid; gap: 2px; max-height: 12rem; overflow-y: auto; }

/* Grid centring clips the TOP of anything taller than the viewport, and the
   close button lives up there. Start-aligned with an auto block margin centres
   it while it fits and pins it to the top once it does not. */
.scrim { align-items: start; }
.modal { margin-block: auto; }

@media (max-width: 620px) { .pane__tools { width: 100%; } .find { width: 100%; } }

.tel { display: grid; grid-template-columns: minmax(0, 12rem) 1fr; gap: 10px; align-items: start; }
@media (max-width: 520px) { .tel { grid-template-columns: 1fr; } }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--smoke); margin-bottom: 14px; line-height: 1.4; }
.check input { width: 18px; height: 18px; accent-color: var(--gold); flex-shrink: 0; margin-top: 1px; }
.links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: 14px; }
.links a { color: var(--smoke); }
.links a:hover { color: var(--gold); }
.step { display: flex; align-items: center; gap: 10px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin: 22px 0 12px; }
.step::after { content: ""; flex: 1; height: 2px; background: var(--line-soft); }
.paybox { border: 3px dashed var(--line); border-radius: 14px; padding: 16px 18px; color: var(--smoke); font-size: 14.5px; display: grid; gap: 6px; margin-bottom: 18px; }
.paybox b { color: var(--chalk); }
.paybox .badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.paybox .badges span { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.12em; border: 2px solid var(--line); border-radius: 6px; padding: 3px 8px; color: var(--muted); }

.summary { border: 2px solid var(--line-soft); border-radius: 22px; background: var(--felt-deep); padding: 24px 24px 22px; display: grid; gap: 14px; }
.summary__plan { display: flex; align-items: center; gap: 14px; }
.summary__chip { width: 64px; height: 64px; border-radius: 50%; background: repeating-conic-gradient(from 15deg, var(--neon) 0 45deg, var(--chalk) 45deg 60deg); border: 3px solid var(--outline); display: grid; place-items: center; flex-shrink: 0; }
.summary__chip i { width: 70%; height: 70%; border-radius: 50%; background: var(--felt-deep); border: 2px dashed color-mix(in srgb, var(--gold) 55%, transparent); display: block; }
.summary__name { font-weight: 800; font-size: 17px; }
.summary__price { font-family: var(--ff-mono); font-size: 13px; color: var(--gold); }
.summary .incl { margin: 4px 0 0; }
.summary .incl li { font-size: 14.5px; }
.total { display: flex; justify-content: space-between; border-top: 2px solid var(--line-soft); padding-top: 12px; font-family: var(--ff-mono); font-size: 13px; color: var(--smoke); }
.total b { color: var(--chalk); font-size: 16px; }

.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.dash .panel { padding: 20px 22px 18px; display: grid; gap: 12px; align-content: start; box-shadow: var(--sticker); }
.dash .panel--wide { grid-column: 1 / -1; }
/* My Account: the seat card (subscription and download side by side, the
   machines across under them) two columns wide, and account maintenance in
   the third. */
.dash--acct { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.dash--acct .acct { grid-column: span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.acct__sec { display: grid; gap: 12px; align-content: start; min-width: 0; }
.acct__dl { border-left: 2px solid var(--line-soft); padding-left: 24px; }
.acct__mach { grid-column: 1 / -1; border-top: 2px solid var(--line-soft); padding-top: 20px; }
/* The emails, a switch to a card, under the seat card and as wide; the side
   column runs down beside both. */
.dash--acct .acct { grid-row: 1; }
.dash--acct .acct__mail { grid-column: 1 / span 2; grid-row: 2; }
.dash--acct .acct__side { grid-column: 3; grid-row: 1 / span 2; }
.dash--acct { grid-template-rows: auto 1fr; }
.acct__mail .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Account maintenance: each thing done to the account is one big button, an
   icon, what it is and a line on what it does. */
.acts { display: grid; gap: 10px; }
.act {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  width: 100%; padding: 14px 14px 14px 12px; text-align: left; cursor: pointer;
  border: 2px solid var(--line-soft); border-radius: var(--r); background: var(--felt-deep);
  color: var(--chalk); font: inherit;
  transition: border-color 120ms, background-color 120ms;
}
/* A link that goes somewhere (My Games, Edit profile) looks like the buttons. */
a.act { text-decoration: none; }
/* A second group in the same panel: the heading set apart from the cards above. */
.acts + .panel__k { display: block; margin-top: 24px; }
.act:hover { border-color: var(--brass); background: color-mix(in srgb, var(--felt-deep) 70%, var(--line-soft)); }
.act:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.act:disabled { opacity: 0.6; cursor: default; }
/* A setting, not a way somewhere: the switch is what you press, so the card
   itself does not light up as if it were. */
.act--switch { cursor: default; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
/* Under its words, which keep the card's width in a narrow column. */
.act--switch .switch { margin-top: 8px; }
.act--switch:hover { border-color: var(--line-soft); background: var(--felt-deep); }
/* Two classes, to outrank .act:hover .act__ico further down. (Found in review.) */
.act.act--switch:hover .act__ico { color: var(--brass); transform: none; }
.act--switch + .said { margin-top: 0; }
.act__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--line-soft); color: var(--brass); transition: color 120ms, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.act__ico .ico { width: 21px; height: 21px; }
.act__txt { display: grid; gap: 3px; }
.act__t { font-weight: 700; font-size: 15.5px; }
.act__d { font-size: 13px; line-height: 1.4; color: var(--muted); }
.act__go { font-size: 22px; line-height: 1; color: var(--muted); transition: color 120ms, transform 120ms; }
.act:hover .act__ico { color: var(--gold-hi); transform: rotate(-8deg) scale(1.06); }
.act:hover .act__go { color: var(--gold); transform: translateX(3px); }
.act--danger .act__ico { color: var(--neon); background: color-mix(in srgb, var(--neon) 12%, transparent); }
.act--danger:hover { border-color: var(--neon); }
.act--danger:hover .act__ico { color: var(--neon); }
.act--danger:hover .act__go { color: var(--neon); }
@media (prefers-reduced-motion: reduce) {
  .act, .act__ico, .act__go { transition: none; }
  .act:hover .act__ico, .act:hover .act__go { transform: none; }
}
.modal--danger { border-color: color-mix(in srgb, var(--neon) 45%, var(--outline)); }

@media (max-width: 960px) {
  .dash--acct { grid-template-columns: minmax(0, 1fr); }
  .dash--acct { grid-template-rows: none; }
  .dash--acct .acct, .dash--acct .acct__mail, .dash--acct .acct__side { grid-column: auto; grid-row: auto; }
  .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dash--acct .acct { grid-template-columns: minmax(0, 1fr); }
  .acct__dl { border-left: 0; padding-left: 0; border-top: 2px solid var(--line-soft); padding-top: 20px; }
  .acts, .acct__mail .acts { grid-template-columns: minmax(0, 1fr); }
}
/* One row of tabs across an area's pages - My Games (games, leagues,
   contacts) and My Account (subscription, profile). A strip like the in-page
   tab controls, the current one filled gold, so it does not get lost under
   the heading. */
.bye { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.55; color: var(--smoke); }
.bye li { padding-left: 2px; }
.bye b { color: var(--chalk); font-weight: 700; }

.subnav {
  display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; padding: 4px;
  background: var(--felt-deep); border: 2px solid var(--line-soft); border-radius: 12px;
  box-shadow: var(--sticker);
}
.subnav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px 10px 14px; border-radius: 8px;
  color: var(--smoke); text-decoration: none;
  font-family: var(--ff-mono); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.subnav a:hover { color: var(--chalk); background: var(--line-soft); }
.subnav a[aria-current="page"] { background: var(--gold); color: var(--on-gold); }
.subnav .ico { width: 17px; height: 17px; }

/* Panels stack their children with a gap already; a form is one child, so its
   own fields need saying. */
.stack { display: grid; gap: 12px; }
.stack .field { margin: 0; }

.panel__k { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); }
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #3fbe7c; box-shadow: 0 0 10px #3fbe7c; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14.5px; margin: 0; }
.kv dt { color: var(--muted); font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.08em; padding-top: 2px; }
.kv dd { margin: 0; color: var(--chalk); }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.dl { display: grid; gap: 8px; }
.dl__row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 2px solid var(--line-soft); border-radius: var(--r); background: var(--felt-deep); }
.dl__os { font-weight: 700; }
.dl__meta { font-family: var(--ff-mono); font-size: 11.5px; color: var(--muted); }
.code { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.code code { font-family: var(--ff-mono); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; color: var(--gold); background: var(--felt-deep); border: 2px solid var(--line); border-radius: 8px; padding: 9px 12px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.stat { border: 2px solid var(--line-soft); border-radius: var(--r); background: var(--felt-deep); padding: 12px 14px; display: grid; gap: 2px; }
.stat b { font-family: var(--ff-mono); font-size: 22px; font-weight: 700; color: var(--chalk); font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--muted); }
.plea { border: var(--bd); border-radius: 16px; background: var(--chalk); color: #10160f; padding: 16px 18px; display: grid; gap: 12px; box-shadow: var(--sticker); }
.plea p { font-weight: 600; }
/* A ghost button's cream ink vanished into the cream: "Yes, I'm out" was a
   blank outline. */
.plea .btn--ghost { --btn-ink: #10160f; border-color: var(--outline); }
.btn--danger { --btn-bg: transparent; --btn-ink: var(--neon); border-color: var(--neon); box-shadow: none; }
.btn--danger:hover { background: color-mix(in srgb, var(--neon) 14%, transparent); color: var(--neon); transform: none; box-shadow: none; }
.note { color: var(--smoke); font-size: 14.5px; }

.doc { max-width: 70ch; display: grid; gap: 10px; }
.doc h2 { font-family: var(--ff-body); font-weight: 800; font-size: 20px; margin-top: 22px; color: var(--chalk); scroll-margin-top: 100px; }
.doc h2 span { font-family: var(--ff-mono); font-size: 12px; color: var(--brass); letter-spacing: 0.12em; margin-right: 10px; }
.doc p, .doc li { color: var(--smoke); font-size: 15.5px; }
.doc ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.doc li::marker { color: var(--brass); }
.doc li b { color: var(--chalk); }
.doc .meta { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.toc a { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--smoke); text-decoration: none; border: 2px solid var(--line-soft); border-radius: 999px; padding: 5px 11px; }
.toc a:hover { border-color: var(--brass); color: var(--gold); }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 24px; align-items: start; }
.aside { display: grid; gap: 14px; }
.aside .panel { box-shadow: var(--sticker); padding: 22px 22px 20px; display: grid; gap: 8px; }
.aside p { color: var(--smoke); font-size: 14.5px; }

.lost { display: grid; justify-items: center; text-align: center; gap: 16px; padding-block: clamp(30px, 6vw, 70px); }
.lost__n { font-family: var(--ff-display); font-weight: 900; font-size: clamp(90px, 18vw, 200px); line-height: 0.9; letter-spacing: -0.05em; color: var(--chalk); }
.lost__n span { color: var(--neon); }
.lost svg { width: 180px; }

@media (max-width: 900px) {
  .auth--wide, .contact { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   AUTH SCREENS
   Dedicated full-viewport pages, not a card floating in a marketing page.
   Reuses the same tokens as everything else: felt grounds, the brass-to-copper
   accent walk, the hard sticker shadows, Unbounded for display.
   ========================================================================== */

/* The single-file build renders nav and footer once and swaps templates, so it
   hides them here rather than omitting them. The dist build never emits them. */
.auth-body .nav,
.auth-body .footer { display: none; }

.auth-body { background: var(--felt-deep); }

.auth-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

/* --- left: the brand half ------------------------------------------------ */

.auth-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(120% 90% at 15% 10%, color-mix(in srgb, var(--gold) 13%, transparent) 0%, transparent 60%),
    radial-gradient(110% 80% at 85% 95%, color-mix(in srgb, var(--copper) 11%, transparent) 0%, transparent 62%),
    linear-gradient(165deg, var(--panel-2), var(--felt) 55%, var(--felt-deep));
  border-right: var(--bd);
}

/* Grain. A large low-alpha gradient bands badly on a cheap panel; a few percent
   of noise dithers it away. Same trick the timer's clock stage uses. */
.auth-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.auth-brand > * { position: relative; z-index: 1; }

.auth-brand__mark {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--chalk);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.auth-brand__mark:hover { color: var(--gold); }
.auth-brand__mark span { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: var(--sticker-sm); }

.auth-brand__art { display: flex; justify-content: center; align-items: center; flex: 1; min-height: 0; }
.auth-brand__art svg { width: min(62%, 320px); height: auto; filter: drop-shadow(6px 6px 0 var(--outline)); }

.auth-brand__line {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--chalk);
  margin: 0;
  max-width: 19ch;
}
.auth-brand__sub { color: var(--smoke); font-size: 15px; margin: 10px 0 0; max-width: 34ch; }
/* Centred under Sal, who is centred in the panel: left-aligned, the lines read as
   stranded in the corner. Each keeps its measure and sits on the middle line. */
.auth-brand__line, .auth-brand__sub { margin-inline: auto; text-align: center; }

/* --- right: the form half ------------------------------------------------ */

.auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px);
  background: var(--felt-deep);
}

.auth-form { width: min(100%, 380px); margin-inline: auto; }

.auth-form__eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 8px;
}

.auth-form__t {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.03em;
  margin: 0 0 10px;
  color: var(--chalk);
}

.auth-form__sub { color: var(--smoke); font-size: 15px; margin: 0 0 26px; line-height: 1.5; }

.auth-form .field { margin-bottom: 16px; }
.auth-form .field input { width: 100%; }

/* Password field with its reveal toggle sitting inside the box. */
.auth-pass { position: relative; display: block; }
.auth-pass input { padding-right: 76px; }
.auth-pass__toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 6px 8px;
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-radius: var(--r-sm);
}
.auth-pass__toggle:hover { color: var(--gold); }

.auth-caps {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin: -8px 0 14px;
}
/* A password's rule sits right under its box, and caps lock under the rule. */
.field > .fine { margin: 0; }
.field > .fine + .auth-caps { margin: 0; }

/* One error region per form, announced to screen readers. */
.auth-msg {
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: var(--r);
  font-size: 14px;
  line-height: 1.45;
  border: 2px solid var(--neon-deep);
  background: color-mix(in srgb, var(--neon) 12%, transparent);
  color: var(--chalk);
}
.auth-msg--ok { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 14%, transparent); }

.auth-form .btn--block { width: 100%; }
.auth-form .btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

.auth-links {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 14px;
}
.auth-links a { color: var(--smoke); }
.auth-links a:hover { color: var(--gold); }
/* A button that reads as one of the links beside it: for actions, like "stop
   invites", that must be a POST and so cannot be an href. */
.linkish { font: inherit; color: var(--smoke); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: var(--gold); }

.auth-legal {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 2px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--muted);
}
.auth-legal a { color: var(--muted); text-decoration: underline; }
.auth-legal a:hover { color: var(--smoke); }

/* Terms, privacy and contact under every full-screen auth page, which has no
   site footer. Hidden everywhere else - the single-file build carries it once
   for every route and only auth routes show it. */
.auth-foot { display: none; }
.auth-body .auth-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 10px; padding: 16px 16px 22px; font-size: 12.5px; color: var(--muted); background: var(--felt-deep); border-top: 2px solid var(--line-soft); }
.auth-foot a { color: var(--smoke); }
.auth-foot a:hover { color: var(--gold); }
.auth-foot__co { flex-basis: 100%; text-align: center; }

/* --- narrow ---------------------------------------------------------------
   The brand column becomes a slim strip rather than stacking a full-height hero
   above the fields, so the form stays above the fold on a phone. */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 14px 18px;
    border-right: 0;
    border-bottom: var(--bd);
    min-height: 0;
  }
  .auth-brand__art { flex: 0 0 auto; }
  .auth-brand__art svg { width: 54px; }
  .auth-brand__line, .auth-brand__sub { display: none; }
  .auth-panel { padding: 28px 18px 44px; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-form, .auth-brand__art { animation: none !important; }
}

/* A game's own page: its guest list, how the answers stand, and more to ask. */
.gp-crumb a { color: var(--brass); text-decoration: none; }
.gp-crumb a:hover { color: var(--gold); text-decoration: underline; }
.gp-crumb span[aria-hidden] { color: var(--line); }
.gp-crumb span:last-child { color: var(--muted); }
.gp-facts:empty { display: none; }
/* The game page's head runs the full width: its facts and actions share a
   row, the actions keeping to the right. */
.gp-head { max-width: none; }
.gp-head__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.gp-head__acts { margin-left: auto; }

/* Every answer has one colour, the same wherever it shows: the bar, its tile,
   the pill on a guest and the ring round their initials. */
.gp-k-all { --k: var(--chalk); }
.gp-k-in { --k: #3fbe7c; }
.gp-k-waiting { --k: var(--gold); }
.gp-k-maybe { --k: var(--brass); }
.gp-k-pending { --k: var(--muted); }
.gp-k-out { --k: var(--neon); }

/* The guest list's head: its name, the count and Refresh on one line, the
   search beside them (under them on a phone). */
.gp-top__k { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gp-refresh { padding: 6px 12px; font-size: 13px; }
/* The count, as a strip between the head and the guests: small, but every chip still a filter. */
/* The game page's tables scroll inside their panels on a phone. Grid items
   grow to fit their widest child unless told not to, so a 640px table made
   the panel, and the whole page, 640px wide. */
#gp-dash > .panel { min-width: 0; grid-template-columns: minmax(0, 1fr); }
#gp-cloud-nights, #gp-results-nights { grid-template-columns: minmax(0, 1fr); }

/* A night saved to the cloud: each player's money, folded under their name. */
#gp-cloud-nights > div + div { border-top: 2px solid var(--line-soft); padding-top: 14px; }
#gp-cloud-nights .tags { margin-bottom: 2px; }
/* A machine can be called anything up to 80 characters: the tag wraps rather than run off a phone. */
#gp-cloud-nights .tag { white-space: normal; overflow-wrap: anywhere; }
/* The FAQ's fold is too big for a table cell: reset to a small toggle. */
.gp-log { margin-top: 2px; border-bottom: 0; padding-block: 0; }
.gp-log summary { cursor: pointer; width: max-content; padding: 2px 16px 2px 0; font-family: var(--ff-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); }
.gp-log summary::after { top: 1px; right: 0; font-size: 13px; }
.gp-log summary:hover { color: var(--gold); }
/* Never narrower than a line fits on: the table scrolls sideways instead. */
.gp-log ol { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; gap: 2px; min-width: 15.5rem; }
.gp-log li { display: grid; grid-template-columns: 5.4em minmax(max-content, 1fr) auto; gap: 10px; font-family: var(--ff-mono); font-size: 12px; color: var(--smoke); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-log li span:first-child { color: var(--muted); }
.gp-log li span:last-child { text-align: right; color: var(--chalk); }
.gp-log__paid span:nth-child(2), .gp-log__paid span:last-child { color: #3fbe7c; }
.gp-log__back span:nth-child(2), .gp-log__back span:last-child { color: var(--gold); }

.gp-sum { display: grid; gap: 8px; margin-bottom: 14px; padding: 10px 12px 12px; border: 2px solid var(--line-soft); border-radius: var(--r); background: var(--felt-2); }
.gp-sum__line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.gp-seats { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--smoke); }
.gp-rate { font-family: var(--ff-mono); font-size: 11.5px; color: var(--muted); }
.gp-rate:empty { display: none; }
.gp-bar { display: flex; gap: 3px; height: 8px; padding: 1px; border-radius: 999px; background: var(--felt-deep); border: 2px solid var(--line-soft); }
.gp-bar__seg { background: var(--k); min-width: 6px; border-radius: 999px; }
.gp-bar__seg.gp-k-pending { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.gp-bar__seg.gp-k-out { background: color-mix(in srgb, var(--neon) 70%, transparent); }

/* One chip per answer: its colour, how many, what. A press shows only those guests. */
.gp-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-stat {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px;
  font: inherit; color: inherit; cursor: pointer; border: 2px solid var(--line-soft);
  border-radius: 999px; background: var(--felt-deep); transition: border-color 140ms, background 140ms;
}
.gp-stat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k); flex-shrink: 0; }
.gp-stat b { font-family: var(--ff-mono); font-size: 13px; font-weight: 700; color: var(--chalk); font-variant-numeric: tabular-nums; }
.gp-stat span { font-size: 12.5px; color: var(--muted); }
.gp-stat:hover { border-color: var(--brass); }
.gp-stat[aria-pressed="true"] { border-color: var(--k); background: color-mix(in srgb, var(--k) 16%, var(--felt-deep)); }
.gp-stat[aria-pressed="true"] span { color: var(--chalk); }
.gp-stat:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Asking more people: whole groups as chips, everybody else as tiles you
   tick, the tick itself a gold coin once it is on. */
.gp-ask__n { color: var(--gold); border-color: var(--brass); }
.gp-ask__groups { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.gp-ask__k { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.gp-ask__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-grp {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 7px 5px 11px;
  font: inherit; font-size: 13.5px; color: var(--smoke); cursor: pointer;
  border: 2px solid var(--line); border-radius: 999px; background: var(--felt-deep);
  transition: border-color 140ms, background 140ms, color 140ms;
}
.gp-grp .ico { width: 15px; height: 15px; color: var(--brass); }
.gp-grp b { font-family: var(--ff-mono); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--line-soft); color: var(--chalk); }
.gp-grp:hover { border-color: var(--brass); color: var(--chalk); }
.gp-grp[aria-pressed="true"] { background: var(--gold); border-color: var(--outline); color: var(--on-gold); font-weight: 700; box-shadow: var(--sticker-sm); }
.gp-grp[aria-pressed="true"] .ico { color: var(--on-gold); }
.gp-grp[aria-pressed="true"] b { background: var(--on-gold); color: var(--gold-hi); }
.gp-grp:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.gp-pick {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px;
  max-height: 23rem; overflow-y: auto; padding: 2px 6px 6px 2px; margin: 0 -6px 14px 0;
  scrollbar-width: thin; scrollbar-color: var(--brass) transparent;
}
.gp-pick::-webkit-scrollbar { width: 8px; }
.gp-pick::-webkit-scrollbar-thumb { background: var(--brass); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.gp-pick__p {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 24px; align-items: center; gap: 11px;
  padding: 9px 11px; border: 2px solid var(--line-soft); border-radius: var(--r); background: var(--felt-deep);
  cursor: pointer; transition: border-color 140ms, background 140ms, transform 120ms, box-shadow 120ms;
}
.gp-pick__p:hover { border-color: var(--brass); }
.gp-pick__p.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 13%, var(--felt-deep)); box-shadow: 3px 3px 0 var(--outline); transform: translate(-1px, -1px); }
.gp-pick__p.is-locked { cursor: default; }
.gp-pick__p.is-locked:hover { border-color: var(--line-soft); }
.gp-pick__p.is-asked, .gp-pick__p.is-bare { opacity: 0.62; }
.gp-pick__p:has(.gp-pick__box:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.gp-pick__box { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.gp-pick__p .av { width: 36px; height: 36px; }
.gp-pick__initials { display: grid; place-items: center; font-family: var(--ff-mono); font-size: 12px; font-weight: 700; color: var(--chalk); }
.gp-pick__txt { display: grid; gap: 2px; min-width: 0; }
.gp-pick__name { font-size: 14.5px; font-weight: 600; color: var(--chalk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-pick__texts { flex-shrink: 0; font-style: normal; font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #3fbe7c; border: 1.5px solid color-mix(in srgb, #3fbe7c 55%, transparent); border-radius: 999px; padding: 0 6px; }
.gp-pick__sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--muted); }
.gp-pick__sub span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-pick__p.is-bare .gp-pick__sub { color: var(--gold); }
.gp-pick__tick { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--felt-2); transition: background 140ms, border-color 140ms; }
.gp-pick__tick svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; color: transparent; }
.gp-pick__p:hover:not(.is-locked) .gp-pick__tick svg { color: var(--line); }
.gp-pick__p.is-on .gp-pick__tick { background: var(--gold); border-color: var(--outline); box-shadow: 2px 2px 0 var(--outline); }
.gp-pick__p.is-on .gp-pick__tick svg, .gp-pick__p.is-on:hover .gp-pick__tick svg { color: var(--on-gold); }
.gp-pick__p.is-asked .gp-pick__tick { background: var(--line); border-color: var(--line); }
.gp-pick__p.is-asked .gp-pick__tick svg { color: var(--smoke); }
.gp-pick__p.is-bare .gp-pick__tick { border-style: dashed; }
.gp-ask__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.gp-ask__foot .linkish { font-size: 13.5px; }
.gp-ask__how { margin: 0; max-width: 72ch; }
@media (prefers-reduced-motion: reduce) { .gp-pick__p, .gp-pick__p.is-on { transition: none; transform: none; } }

/* A guest: initials, name and answer, when, how they are reached - then the
   host's controls, which drop under the name on a narrow screen. */
.gp-list { display: grid; gap: 8px; }
.gp-guest {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center;
  padding: 12px 14px; border: 2px solid var(--line-soft); border-radius: var(--r); background: var(--felt-deep);
}
.gp-av {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--ff-mono); font-size: 13px; font-weight: 700; color: var(--chalk);
  background: color-mix(in srgb, var(--k) 16%, var(--panel)); border: 2px solid var(--k);
}
.gp-who { min-width: 0; display: grid; gap: 3px; }
.gp-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gp-name { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.gp-k-out .gp-name { color: var(--smoke); }
.gp-pill {
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; color: var(--k);
  border: 2px solid color-mix(in srgb, var(--k) 55%, transparent); background: color-mix(in srgb, var(--k) 10%, transparent);
}
.gp-sub { font-family: var(--ff-mono); font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-who .tags { margin-top: 3px; }
.gp-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.gp-acts .btn--sm { padding: 8px 12px; font-size: 13px; }
/* Resend and Remove are there when needed, not shouting from every row. */
.gp-acts .gp-quiet { border-color: transparent; color: var(--smoke); }
.gp-acts .gp-quiet:hover { border-color: var(--line); color: var(--chalk); }
@media (max-width: 760px) {
  .gp-guest { grid-template-columns: 40px minmax(0, 1fr); }
  .gp-acts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* A guest's own link, opened under their row: the link to copy, then the QR
   code. Black on white whatever the theme - a camera needs the contrast. */
.share-link { grid-column: 1 / -1; display: grid; gap: 10px; padding-top: 10px; border-top: 2px dashed var(--line-soft); }
.share-link .fine { margin: 0; }
.share-link__line { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.share-link__line input { flex: 1 1 220px; min-width: 0; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; border: 2px solid var(--line-soft); background: rgba(0, 0, 0, 0.3); color: var(--chalk); }
.share-link__qrrow { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.share-link__qrrow > div { flex: 1 1 180px; display: grid; gap: 8px; justify-items: start; }
.share-link__qr { width: 148px; height: 148px; border-radius: 8px; background: #fff; flex: none; }

/* What the server made of a field, said under it as somebody leaves it. Neon
   for "this will not save", brass for "this saves, but know this". */
.field-say { font-family: var(--ff-mono); font-size: 11.5px; line-height: 1.5; color: var(--muted); margin: 2px 0 0; }
.field-say--bad { color: var(--neon); }
.field-say--warn { color: var(--brass); }
/* "Your last game was booked in Central time." and the button that picks it. */
.gm-tz-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; }
.gm-tz-nudge .field-say { margin: 0; color: var(--brass); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--neon-deep); }

/* A honeypot: off-screen rather than display:none, because the lazier bots
   skip fields that are not rendered. aria-hidden and tabindex=-1 on it keep
   people - and screen readers - from ever landing in it. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Three small money boxes side by side in the game form; stacked on a phone. */
.money-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.money-row .field { margin: 0; }
/* A price that is switched off: in the box's place, a button that allows it
   again, so it never reads as a box that will not take a number. */
.money-off { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 48px; padding: 0 14px; border-radius: 10px; border: 2px dashed var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.money-off__go { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.money-off:hover, .money-off:focus-visible { border-color: var(--gold); color: var(--chalk); outline: none; }
.money-off-say { margin: 8px 0 0; }
.money-off-say a { color: var(--gold); }
@media (max-width: 520px) { .money-row { grid-template-columns: 1fr; } }

/* --- leagues ---------------------------------------------------------------
   A season's standings. The league list reuses .dl rows; the one on screen is
   marked the same gold way a current chip or page button is. */
.lg-row[aria-current="true"] { border-color: var(--brass); }
.tag--gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, var(--line-soft)); }
/* Grid items default to their content's width, and a results table inside a
   folded night is wider than a phone. Let them shrink so the table scrolls in
   its own box instead of widening the page. */
.board > *, .board .stack > *, .nights > * { min-width: 0; }
.board__head { align-items: flex-start; }
.board__who { display: grid; gap: 6px; }
.board__t { font-family: var(--ff-display); font-weight: 800; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.02em; margin: 0; color: var(--chalk); overflow-wrap: anywhere; }
.board__rule { margin-top: 0; }

/* Numbers line up on the right and in columns, so a table of them can be read
   down as well as across. */
.tbl th.num { text-align: right; }
.tbl td.num { text-align: right; font-family: var(--ff-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td.num--big { font-weight: 700; color: var(--chalk); font-size: 14px; }
.net--up { color: var(--gold); }
.net--down { color: var(--neon); }
.tbl--tight { min-width: 480px; }
.tbl--tight th, .tbl--tight td { padding: 10px 11px; }
.tbl__sub { margin-top: 6px; }
.tbl .tags { margin-top: 5px; }

.share { display: grid; gap: 10px; padding: 14px 16px; border: 2px dashed var(--line); border-radius: var(--r); }
.share .fine { margin: 0; }
.share code { font-size: 12px; letter-spacing: 0; word-break: break-all; flex: 1 1 16rem; }

/* One night in a league: a folded row that opens onto its results. The FAQ's
   details styling is too big for a list, so it is reset here. */
.nights { display: grid; gap: 8px; }
.night { border: 2px solid var(--line-soft); border-radius: var(--r); background: var(--felt-deep); padding: 0 14px; }
.night[open] { padding-bottom: 14px; }
.night summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 13px 30px 13px 0; font-size: 14.5px; font-weight: 700; }
.night summary::after { top: 11px; font-size: 20px; right: 0; }
.night__when { font-family: var(--ff-mono); font-size: 12px; font-weight: 400; color: var(--brass); }
.night__what { overflow-wrap: anywhere; }
.night__meta { font-family: var(--ff-mono); font-size: 11.5px; font-weight: 400; color: var(--muted); }
.night__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-top: 12px; }
.night__foot .fine { margin: 0; padding: 0; flex: 1 1 18rem; }

/* A fold inside a form - "Pay handles" on a contact. Sized like a field label
   rather than a FAQ question. */
/* The game form, a step at a time: numbered, every step a press away, the one
   showing lit; Back, Next and the booking under it. */
.gm-form { display: grid; gap: 16px; container-type: inline-size; }
.gm-steps { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--felt-deep); border: 2px solid var(--line-soft); }
.gm-steps__b {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--smoke);
  font: 600 13.5px/1.2 var(--ff-body); white-space: nowrap; cursor: pointer; min-width: 0;
}
.gm-steps__b:hover { color: var(--chalk); }
.gm-steps__b[aria-selected="true"] { background: var(--gold); color: var(--on-gold); }
.gm-steps__b:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gm-steps__n { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; border: 2px solid currentColor; font: 700 11px/1 var(--ff-mono); }
.gm-step-btns { padding-top: 14px; border-top: 2px solid var(--line-soft); }
/* Too narrow for five names in a row (a phone, a small tablet): five numbered
   circles spread across, the one showing lit, and its name on a line under
   them. The names stay in the strip for screen readers. */
.gm-form > * { min-width: 0; }
.gm-steps__now { display: none; margin: -6px 0 0; font: 700 15px/1.3 var(--ff-body); color: var(--chalk); }
@container (max-width: 679px) {
  .gm-steps__b { flex: 1 1 0; padding: 6px 4px; }
  .gm-steps__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gm-steps__n { width: 28px; height: 28px; font-size: 12px; }
  .gm-steps__now { display: block; }
}

/* Settings, a tab at a time as in the timer, and Save under all of them. */
.st-tabs { flex-wrap: wrap; margin: 4px 0 6px; }
.st-tabs .tab { flex: 1 1 auto; white-space: nowrap; }
@media (max-width: 560px) { .st-tabs .tab { flex: 1 1 calc(50% - 6px); } }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.st-save { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; padding-top: 18px; border-top: 2px solid var(--line-soft); }

.fold { border: 2px solid var(--line-soft); border-radius: var(--r); padding: 0 14px; }
.fold[open] { padding-bottom: 12px; }
.fold summary { font-family: var(--ff-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 13px 30px 13px 0; }
.fold summary .fine, .fold summary .pane__count { margin: 0 0 0 8px; letter-spacing: 0.04em; text-transform: none; }
.fold summary::after { top: 9px; font-size: 20px; right: 0; }
.fold > .fine { margin: 0 0 12px; padding: 0; }
.fold .field { margin: 0; }
.fold .field-say { padding: 0; }
/* align-items: start, or a box with a message under it stretches its row and
   the box beside it drifts down out of line. */
.pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 520px) { .pay-grid { grid-template-columns: 1fr; } }
/* Your own, on the profile page: the name form's width, its button under the boxes. */
.pay-form { max-width: 560px; margin-top: 10px; }
.pay-form .field { margin: 0; }
.pay-form .row-btns { margin-top: 14px; }
.pay-form + .auth-msg { margin-top: 16px; max-width: 560px; }

/* --- season crown ----------------------------------------------------------
   An ended season's banner: the champion big, the side awards in small cards.
   A chip-edge stripe along the top and a gold glow in the corner - a party,
   but the same basement it has always been. */
.crown {
  position: relative; overflow: hidden; display: grid; gap: 16px; min-width: 0;
  padding: 24px 20px 18px; border: 3px solid var(--gold); border-radius: var(--r-lg);
  background:
    radial-gradient(90% 130% at 0% 0%, color-mix(in srgb, var(--gold) 24%, transparent) 0%, transparent 60%),
    radial-gradient(60% 90% at 100% 100%, color-mix(in srgb, var(--neon) 9%, transparent) 0%, transparent 70%),
    linear-gradient(160deg, var(--panel-2), var(--felt-deep));
  box-shadow: var(--sticker);
}
.crown::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 18px, var(--chalk) 18px 24px, var(--gold-hi) 24px 42px, var(--neon) 42px 48px);
}
.crown__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; align-items: center; }
.crown__icon { grid-row: 1 / span 3; width: 60px; height: 60px; fill: var(--gold); filter: drop-shadow(3px 3px 0 var(--outline)); animation: crown-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.crown__k { font-family: var(--ff-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.crown__who { margin: 0; font-family: var(--ff-display); font-weight: 800; font-size: clamp(26px, 4.2vw, 40px); line-height: 1.05; letter-spacing: -0.03em; color: var(--chalk); overflow-wrap: anywhere; }
.crown__line { margin: 2px 0 0; font-family: var(--ff-mono); font-size: 12.5px; color: var(--smoke); }
.crown__awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.award { min-width: 0; padding: 12px 14px; border: 2px solid var(--line-soft); border-radius: var(--r); background: color-mix(in srgb, var(--felt-deep) 78%, transparent); }
.award dt { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.award dd { margin: 5px 0 0; font-weight: 700; font-size: 15px; color: var(--chalk); overflow-wrap: anywhere; }
.award__n { display: block; margin-top: 2px; font-family: var(--ff-mono); font-size: 12px; font-weight: 400; color: var(--gold); }
@keyframes crown-in { from { transform: translateY(-10px) rotate(-12deg) scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .crown__icon { animation: none; } }
@media (max-width: 520px) {
  .crown { padding: 20px 14px 14px; }
  .crown__icon { width: 42px; height: 42px; grid-row: 1 / span 2; }
  .crown__line { grid-column: 1 / -1; }
}

/* "Start next season": the name box and its button on one line when there is room. */
.next { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.next .field { flex: 1 1 14rem; margin: 0; min-width: 0; }

/* The public standings want more room than a sign-in form. */
.auth-form--wide { width: min(100%, 640px); }
@media (max-width: 620px) { .board__head .row-btns { width: 100%; } }

/* --- texts: player-owned numbers ------------------------------------------
   A button that cannot be pressed yet has to look it. The consent send button
   is the one that matters: it stays dead until the box is ticked. */
.btn:disabled, .btn:disabled:hover { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.field__k { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
/* A read-only value where an input would otherwise be. */
.ro { margin: 0; padding: 10px 14px; border-radius: 10px; border: 2px dashed var(--line-soft); color: var(--smoke); font-size: 14.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; overflow-wrap: anywhere; }
.tag--live { color: #3fbe7c; border-color: color-mix(in srgb, #3fbe7c 55%, var(--line-soft)); }
.gp-table .panel__k { display: flex; align-items: center; gap: 10px; }
.gp-table__now { margin: 8px 0 12px; color: var(--chalk); }
.status--off::before { background: var(--muted); box-shadow: none; }
.status--stop::before { background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.consent { padding: 12px 14px; border: 2px solid var(--line-soft); border-radius: 10px; background: color-mix(in srgb, var(--felt-deep) 70%, transparent); margin: 0; }
.consent:has(input:checked) { border-color: var(--brass); }
.consent__links { margin-top: 0; }
.consent__links a, .ro a { color: var(--smoke); }
.otp { font-family: var(--ff-mono) !important; font-size: 22px !important; letter-spacing: 0.4em; max-width: 12rem; text-align: center; }
/* Two ways forward, side by side where there is room: play free, or host. */
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.path { border: 2px solid var(--line-soft); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.path b { color: var(--chalk); }
.path p { margin: 0; color: var(--smoke); font-size: 14.5px; }
/* The sign-up page's "which one are you" switch. */
.seg { display: flex; gap: 6px; background: var(--felt-deep); border: 2px solid var(--line-soft); border-radius: 12px; padding: 4px; margin: 0 0 18px; }
.seg button { flex: 1; min-width: 0; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--smoke); font: 700 14px/1.25 var(--ff-body); cursor: pointer; }
.seg button small { display: block; font: 400 11px/1.3 var(--ff-mono); letter-spacing: 0.04em; color: inherit; opacity: 0.8; }
.seg button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }

/* --- Texts for game invites: the shared component (partials/texts.html) --- */
.txc { display: grid; gap: 14px; }
.txc .note, .txc p { margin: 0; }
.txc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.txc__gate { display: grid; gap: 10px; padding: 14px 16px; border: 2px dashed var(--brass); border-radius: 14px; }
.txc__gate b:first-child { color: var(--chalk); font-size: 15.5px; }
.txc__gate p { color: var(--smoke); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.txc .auth-msg { margin: 0; }
.auth-form .txc .tel select { width: 100%; }

/* Where you are in a two-step sign-up. */
.steps { display: flex; gap: 6px; margin: 0 0 16px; max-width: 120px; }
.steps i { flex: 1; height: 6px; border-radius: 999px; background: var(--line-soft); }
.steps i.is-done { background: var(--brass); }
.steps i.is-now { background: var(--gold); }

.skip { margin: 18px 0 0; text-align: center; font-size: 14px; }

/* A panel that wants a look: the profile's texts section while texts are off. */
.dash .panel--nudge { border-color: var(--gold); box-shadow: 4px 4px 0 var(--outline), 0 0 0 1px var(--gold) inset; }
.panel--nudge .tag { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, var(--line-soft)); }

/* The RSVP page's after-you-answered card. */
.nudge { display: grid; gap: 8px; justify-items: start; margin: 0 0 16px; padding: 14px 16px; border: 2px solid color-mix(in srgb, var(--gold) 55%, var(--line-soft)); border-radius: 14px; background: color-mix(in srgb, var(--gold) 7%, transparent); }
.nudge b { color: var(--chalk); font-size: 15.5px; }
.nudge p { margin: 0; color: var(--smoke); font-size: 14.5px; line-height: 1.45; }
/* The invite page's texts card: the number box and the free account, on screen at once. */
.rv-texts { justify-items: stretch; gap: 10px; padding: 18px; margin-top: 28px; }
.rv-texts .rv-texts__t { font-family: var(--ff-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.rv-texts__row { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-texts__row input {
  flex: 1 1 190px; min-width: 0; height: 46px; padding: 10px 14px; border-radius: 10px;
  border: 2px solid var(--line); background: var(--felt-deep); color: var(--chalk); font: 600 16px var(--ff-body);
}
.rv-texts__row input::placeholder { color: #56685c; font-weight: 400; }
.rv-texts__row input:focus { border-color: var(--gold); outline: none; }
.rv-texts__row .btn { flex: 1 1 auto; }
.rv-texts .rv-texts__fine { margin: 0; font-size: 12.5px; line-height: 1.5; }

/* ==========================================================================
   Voice packs: the home page teaser (#voices) and Sally's page (sally.html).
   Sal keeps the gold; Sally gets the pink.
   ========================================================================== */
.vp { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.vp .head { margin-bottom: 0; }
.vp__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 8px; }
.vp__meta { font-family: var(--ff-mono); font-size: 12.5px; color: var(--muted); letter-spacing: 0.04em; }

/* A dealer card: the teaser shows two, the picker on Sally's page three. */
.vp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vp-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vp-card {
  position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px; align-content: start;
  padding: 18px 18px 16px; border: 3px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel), var(--felt-2));
  color: var(--chalk); text-decoration: none;
  transition: border-color 140ms, box-shadow 140ms, transform 140ms, background 140ms;
}
.vp-card--sal { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.vp-card--sally { border-color: var(--neon); box-shadow: var(--sticker); }
a.vp-card:hover { color: var(--chalk); transform: translate(-2px, -2px); box-shadow: var(--sticker-lg); }
/* Hover her card and she winks: --wink inherits into the <use> clone. */
a.vp-card--sally:hover .vp-card__pic, a.vp-card--sally:focus-visible .vp-card__pic { --wink: 1; }
.vp-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.vp-card__pic { width: 124px; height: 124px; flex: none; display: block; border-radius: 50%; border: 3px solid var(--outline); background: radial-gradient(90% 90% at 50% 20%, #1d4a31, var(--felt)); }
.vp-card--sally .vp-card__pic { background: radial-gradient(90% 90% at 50% 20%, #5a1f38, #1a0d14); }
.vp-card__tag { font-family: var(--ff-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 2px solid currentColor; white-space: nowrap; }
.vp-card--sal .vp-card__tag { color: var(--gold); }
.vp-card--sally .vp-card__tag { color: var(--neon); }
.vp-card--locked .vp-card__tag { color: var(--muted); }
.vp-card__name { font-family: var(--ff-display); font-weight: 800; font-size: 17px; line-height: 1.2; margin-top: 6px; }
.vp-card__name i { font-style: normal; color: var(--smoke); }
.vp-card__vibe { font-family: var(--ff-mono); font-size: 12px; color: var(--smoke); letter-spacing: 0.04em; }
.vp-card__line { font-style: italic; font-weight: 500; font-size: 15.5px; line-height: 1.45; }
.vp-card__line::before { content: "“"; color: var(--neon); font-family: var(--ff-display); font-weight: 800; font-size: 1.4em; line-height: 0; margin-right: 2px; vertical-align: -0.2em; font-style: normal; }
.vp-card--sal .vp-card__line::before { color: var(--gold); }
.vp-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 2px solid var(--line-soft); padding-top: 12px; margin-top: 4px; font-family: var(--ff-mono); font-size: 12px; color: var(--muted); }
.vp-card__go { color: var(--neon); font-weight: 700; }
.vp-card--sal .vp-card__go { color: var(--gold); }
/* Hover Sal's card and he glares a little harder. */
a.vp-card--sal:hover .vp-card__pic, a.vp-card--sal:focus-visible .vp-card__pic { --brow: -8px; }
a.vp-card--sal:hover { border-color: var(--gold); }
.vp-card--locked { border-style: dashed; background: transparent; }
.vp-card--locked .vp-card__line, .vp-card--locked .vp-card__line::before { color: var(--muted); }

/* The picker preview on Sally's page: the cards become radio buttons. */
.vp-picker { border: var(--bd); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--panel), var(--felt-2)); box-shadow: var(--sticker-lg); overflow: hidden; }
.vp-picker__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 3px solid var(--outline); background: var(--felt-deep); }
.vp-picker__bar b { font-family: var(--ff-display); font-weight: 800; font-size: 16px; }
.vp-picker__crumb { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.vp-picker .vp-cards { padding: 22px; }
.vp-picker__status { padding: 16px 22px 20px; border-top: 2px solid var(--line-soft); color: var(--smoke); }
.vp-picker__status b { font-weight: 800; }
label.vp-card { cursor: pointer; border-color: var(--line); box-shadow: none; background: var(--felt-2); }
label.vp-card:hover { border-color: var(--brass); }
.vp-card input { position: absolute; opacity: 0; pointer-events: none; }
label.vp-card:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
label.vp-card--sal:has(input:checked) { border-color: var(--gold); box-shadow: var(--sticker); background: color-mix(in srgb, var(--gold) 8%, var(--felt-2)); }
label.vp-card--sally:has(input:checked) { border-color: var(--neon); box-shadow: var(--sticker); background: color-mix(in srgb, var(--neon) 9%, var(--felt-2)); }
.vp-card__pick { font-weight: 700; color: var(--smoke); }
label.vp-card:has(input:checked) .vp-card__pick { color: var(--chalk); }
label.vp-card--sal:has(input:checked) .vp-card__pick::before { content: "● "; color: var(--gold); }
label.vp-card--sally:has(input:checked) .vp-card__pick::before { content: "● "; color: var(--neon); }

/* Who deals a booked game: the same cards, pocket size, in the game dialog. */
.deal-pick { display: grid; gap: 6px; margin-bottom: 14px; }
.deal-pick__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.deal-pick__card {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--felt-deep);
  cursor: pointer; transition: border-color 140ms, box-shadow 140ms, background 140ms;
}
.deal-pick__card:hover { border-color: var(--brass); }
.deal-pick__card input { position: absolute; opacity: 0; pointer-events: none; }
.deal-pick__card:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.deal-pick__card--sal:has(input:checked) { border-color: var(--gold); box-shadow: var(--sticker-sm); background: color-mix(in srgb, var(--gold) 8%, var(--felt-2)); }
.deal-pick__card--sally:has(input:checked) { border-color: var(--neon); box-shadow: var(--sticker-sm); background: color-mix(in srgb, var(--neon) 9%, var(--felt-2)); }
.deal-pick__pic { width: 52px; height: 52px; flex: none; display: block; border-radius: 50%; border: 2px solid var(--outline); background: radial-gradient(90% 90% at 50% 20%, #1d4a31, var(--felt)); }
.deal-pick__card--sally .deal-pick__pic { background: radial-gradient(90% 90% at 50% 20%, #5a1f38, #1a0d14); }
.deal-pick__txt { display: grid; gap: 2px; min-width: 0; }
.deal-pick__txt b { font-family: var(--ff-display); font-weight: 800; font-size: 15px; color: var(--chalk); }
.deal-pick__txt span { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--smoke); }
.deal-pick__card:has(input:checked) .deal-pick__txt b::after { content: " ●"; font-size: 0.7em; vertical-align: 0.15em; }
.deal-pick__card--sal:has(input:checked) .deal-pick__txt b::after { color: var(--gold); }
.deal-pick__card--sally:has(input:checked) .deal-pick__txt b::after { color: var(--neon); }
@media (max-width: 420px) { .deal-pick__cards { grid-template-columns: minmax(0, 1fr); } }
.tag--neon { color: var(--neon); border-color: color-mix(in srgb, var(--neon) 55%, var(--line-soft)); }
/* A game called off: struck through in red, and its row faded, but still
   there to bring back. The tag and the buttons keep full strength. */
.tag.tag--off { color: var(--neon); border-color: var(--neon); border-style: dashed; }
.tbl tr.is-off td:not(:last-child) { color: var(--muted); }
.tbl tr.is-off .tbl__pip { opacity: 0.5; }
.tbl tr.is-out td:not(:last-child) { color: var(--muted); }
.tbl tr.is-out .tbl__pip, .tbl tr.is-out .tbl__name { opacity: 0.7; }
.tbl tr.is-off .tbl__name { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--neon) 70%, transparent); }

/* Sally's hero: her sign hangs on the left and she talks to the right, the
   mirror of Sal's. Two classes, so these beat the phone-width .neon rule. */
.vp-nameplate { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 22px; padding: 10px 16px; border: var(--bd); border-radius: var(--r); background: var(--panel); box-shadow: var(--sticker); }
.vp-nameplate b { font-family: var(--ff-display); font-weight: 800; font-size: 18px; }
.vp-nameplate i { font-style: normal; color: var(--neon); }
.vp-nameplate span { font-family: var(--ff-mono); font-size: 12px; color: var(--smoke); letter-spacing: 0.06em; }
.vp-nameplate--sal i { color: var(--gold); }

/* Sal's page: his résumé, on paper that has seen things, and his house rules. */
.sal-cv {
  position: relative; max-width: 880px; margin-inline: auto; overflow: hidden;
  padding: clamp(22px, 4vw, 44px); border: var(--bd); border-radius: 14px;
  background: var(--chalk); color: #1a1f1b; box-shadow: var(--sticker-lg); transform: rotate(-0.6deg);
}
.sal-cv__ring { position: absolute; left: -34px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%; border: 10px solid rgb(120 72 30 / 0.16); box-shadow: inset 0 0 0 3px rgb(120 72 30 / 0.08); pointer-events: none; }
.sal-cv__stamp {
  position: absolute; right: clamp(16px, 4vw, 40px); top: clamp(18px, 4vw, 34px); transform: rotate(9deg);
  padding: 7px 13px; border: 4px solid var(--neon-deep); border-radius: 8px; color: var(--neon-deep);
  font-family: var(--ff-display); font-weight: 900; font-size: 14px; line-height: 1.1; letter-spacing: 0.06em;
  text-transform: uppercase; text-align: center; opacity: 0.85; mix-blend-mode: multiply;
}
.sal-cv__head { display: flex; align-items: center; gap: 18px; padding: 0 130px 16px 0; margin-bottom: 20px; border-bottom: 3px solid #1a1f1b; }
.sal-cv__head svg { width: 84px; height: 84px; flex: none; border-radius: 50%; border: 3px solid var(--outline); background: radial-gradient(90% 90% at 50% 20%, #1d4a31, var(--felt)); }
.sal-cv__name { margin: 0; font-family: var(--ff-display); font-weight: 900; font-size: clamp(21px, 2.8vw, 30px); line-height: 1.08; color: #1a1f1b; }
.sal-cv__role { margin: 6px 0 0; font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #5b6a5f; }
.sal-cv__grid { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px 26px; margin: 0; }
.sal-cv__k { padding-top: 3px; font-family: var(--ff-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8a5b12; }
.sal-cv__v { margin: 0; font-size: 15.5px; line-height: 1.55; color: #2b332d; }
.sal-cv__v p { margin: 0; }
.sal-cv__v ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.sal-cv__v b { color: #1a1f1b; }
.sal-cv__skills { list-style: none; padding: 0 !important; display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.sal-cv__skills li { padding: 4px 11px; border: 2px solid #1a1f1b; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: #fff; }
@media (max-width: 640px) {
  .sal-cv { transform: none; }
  .sal-cv__head { padding-right: 0; }
  .sal-cv__stamp { position: static; display: inline-block; margin-bottom: 14px; transform: rotate(-3deg); }
  .sal-cv__grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sal-cv__k { padding-top: 14px; }
}

.sal-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: rule; }
.sal-rules li {
  position: relative; counter-increment: rule; padding: 18px 18px 18px 66px;
  border: var(--bd); border-radius: var(--r); background: linear-gradient(180deg, var(--panel-2), var(--felt-2));
  box-shadow: var(--sticker); color: var(--smoke); font-size: 15.5px; line-height: 1.5;
}
.sal-rules li::before {
  content: counter(rule); position: absolute; left: 16px; top: 16px; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--outline);
  background: var(--gold); color: var(--on-gold); box-shadow: 2px 2px 0 var(--outline);
  font-family: var(--ff-display); font-weight: 900; font-size: 15px;
}
.sal-rules b { display: block; margin-bottom: 4px; color: var(--chalk); font-size: 16.5px; }
.vs--dealers .who svg { border-radius: 50%; border: 2px solid var(--outline); background: var(--felt); }
.vs--dealers th:nth-child(3) .who { color: var(--neon); }
.neon.neon--left { right: auto; left: 0; transform: rotate(-4deg); }
.shout.shout--right { left: auto; right: 0; top: 150px; transform: translateY(8px) rotate(3deg) scale(0.94); }
.shout.shout--right.is-on { transform: translateY(0) rotate(3deg) scale(1); }
.shout.shout--right::after { right: auto; left: 26px; border-right-width: 9px; border-left-width: 16px; }
.vp-hint { position: absolute; bottom: 14px; left: 50%; translate: -50% 0; z-index: 2; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke); background: rgb(7 15 10 / 0.72); padding: 4px 10px; border-radius: 999px; pointer-events: none; white-space: nowrap; }

/* Her anatomy: numbered pins on the drawing, the notes in columns either side. */
.vp-anat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; }
.vp-anat__art svg { display: block; width: 100%; height: auto; }
.vp-anat__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; counter-reset: pin var(--start, 0); }
.vp-anat__list li { counter-increment: pin; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; }
.vp-anat__list li::before { content: counter(pin); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--neon); color: #14060a; border: 3px solid var(--outline); font-family: var(--ff-display); font-weight: 800; font-size: 14px; line-height: 1; }
.vp-anat__list b { font-weight: 800; font-size: 17px; }
.vp-anat__list p { color: var(--smoke); font-size: 15px; line-height: 1.5; }
.vp-pin circle { fill: var(--neon); stroke: var(--outline); stroke-width: 3; }
.vp-pin text { font-family: var(--ff-display); font-weight: 800; font-size: 15px; fill: #14060a; text-anchor: middle; dominant-baseline: central; }
.vp-lead { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vp-lead--under { stroke: var(--outline); stroke-width: 5; }
.vp-lead--over { stroke: var(--gold); stroke-width: 2; }
.vp-dot { fill: var(--neon); stroke: var(--outline); stroke-width: 2; }

/* Her script: the site's line cards, lined up so the draw buttons sit level. */
.vp-lines .line { grid-template-rows: auto 1fr auto; }
.vp-all__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; padding-bottom: 18px; }
.vp-all h3 { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.vp-all ol { margin: 0; padding-left: 26px; display: grid; gap: 9px; color: var(--smoke); font-size: 15px; line-height: 1.45; }
.vp-all ol li::marker { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); }

.vp-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vp-how div { padding: 20px 20px 22px; border: 2px solid var(--line-soft); border-radius: var(--r); background: linear-gradient(180deg, var(--panel), var(--felt-2)); display: grid; gap: 8px; align-content: start; }
.vp-how b { font-weight: 800; font-size: 17px; line-height: 1.25; }
.vp-how p { color: var(--smoke); font-size: 15px; }

@media (max-width: 980px) {
  .vp { grid-template-columns: minmax(0, 1fr); }
  .vp-anat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vp-anat__art { grid-column: 1 / -1; order: -1; justify-self: center; width: min(100%, 480px); }
  .vp-cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-cards--three .vp-card--locked { grid-column: 1 / -1; }
  .vp-all__cols, .vp-how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .neon.neon--left { transform: rotate(-3deg) scale(0.85); transform-origin: top left; }
}
@media (max-width: 600px) {
  .vp-cards, .vp-cards--three, .vp-anat { grid-template-columns: minmax(0, 1fr); }
  .vp-picker .vp-cards { padding: 16px; }
  .vp-card__pic { width: 104px; height: 104px; }
}

/* --- faces ---------------------------------------------------------------- */
/* A face from the deck (avatars.svg), wherever a person is shown: a felt disc
   with the outline ring and the drawing filling it. Hosts that draw a ring of
   their own - the nav pip, a guest's answer-coloured circle, a contact's pip -
   let the face fill them instead. */
.av { display: block; width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden; background: var(--felt-2); border: 2px solid var(--outline); }
.av--sm { width: 28px; height: 28px; }
.av--lg { width: 64px; height: 64px; }
.nav__pip .av, .tbl__pip .av, .gp-av .av { width: 100%; height: 100%; border: 0; background: none; }
.nav__pip:has(.av) { background: var(--felt-2); }
.tbl__who .av--sm { margin-right: -3px; }
.check .av, .crown__who .av, .night__meta .av, .dl__row .tbl__mono .av { display: inline-block; vertical-align: middle; }
.crown__who .av { margin-right: 6px; }
.night__meta .av, .dl__row .tbl__mono .av { width: 22px; height: 22px; margin: 0 4px 0 6px; }
/* Sal's deal, on the last sign-up screen of a guest who skipped the face step. */
.wl-face { display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; }
.wl-face p { line-height: 1.5; }

/* Who is seated, on a game row: the faces stacked, the names on hover. */
.faces { display: inline-flex; align-items: center; margin-left: 4px; }
.faces .av { margin-left: -9px; }
.faces .av:first-child { margin-left: 0; }
.faces__more { margin-left: 8px; font-family: var(--ff-mono); font-size: 11px; color: var(--smoke); }

/* Who's in, on the RSVP page: a face and a short name each. */
.goers { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.goers li { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 3px; border: 2px solid var(--line-soft); border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--chalk); }
.goers .av { width: 26px; height: 26px; }

/* --- your face at the table (profile) ------------------------------------- */
.face { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px 22px; align-items: start; }
.face__me { display: grid; justify-items: center; gap: 5px; text-align: center; }
.face__big { width: 112px; height: 112px; border-radius: 50%; border: 3px solid var(--outline); background: var(--felt-deep); box-shadow: 0 0 0 3px var(--gold), 5px 5px 0 3px var(--outline); display: grid; place-items: center; margin: 4px 0 8px; }
.face__big .av { width: 96px; height: 96px; border: 0; background: none; }
.face__name { font-family: var(--ff-display); font-weight: 800; font-size: 16px; line-height: 1.2; }
.face__rank { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.face__line { font-style: italic; color: var(--smoke); font-size: 13px; }
.face__me .row-btns { margin-top: 6px; justify-content: center; }
/* The name form beside the face: the two fields side by side, the button under them. */
.face__k { display: block; margin-top: 18px; }
.face__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; margin-top: 10px; max-width: 560px; }
@media (max-width: 480px) { .face__form { grid-template-columns: minmax(0, 1fr); } }
.face__form .field { margin-bottom: 10px; }
.face__form-go { grid-column: 1 / -1; }
/* "Saved" under the button: clear of its shadow, and as wide as the form it answers. */
.face__form + .auth-msg { margin-top: 16px; max-width: 560px; }
/* Text invites, as a small card in the face card: a switch, the state in a
   line, and the number, the consent and the code in a dialog. */
.face__texts { margin-top: 18px; padding: 12px 14px 12px; border: 2px solid var(--line-soft); border-radius: 12px; background: var(--felt-2); display: grid; gap: 6px; max-width: 560px; }
.face__texts-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.face__texts-k { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); }
.face__texts-status { margin: 0; font-size: 14px; color: var(--smoke); }
.face__texts-tip { justify-self: start; margin: 2px 0 0; padding: 4px 11px 5px; border: 2px solid var(--brass); border-radius: 10px; line-height: 1.35; background: rgba(212, 162, 76, 0.12); color: var(--gold-hi); font-size: 13px; font-weight: 600; }
.face__texts-tip span { color: var(--gold); }
.face__texts-change { justify-self: start; font-size: 13px; }
/* The switch is built like the buttons: a chunky outlined track with a hard
   shadow, and a poker chip for the knob. Flipped on, the chip rolls across
   with a bounce, turns from red to gold, and the track lights up green. The
   ON/OFF lettering is decoration; the switch role and aria-checked say it. */
@property --chip { syntax: '<color>'; inherits: true; initial-value: #ff3b6b; }
.switch {
  --chip: var(--neon); --x: 0px; --spin: 0deg; --sx: 1; --sy: 1;
  position: relative; width: 78px; height: 38px; padding: 0; flex-shrink: 0;
  border-radius: 999px; border: var(--bd); background: var(--line); cursor: pointer;
  box-shadow: var(--sticker-sm), inset 0 -5px 0 rgba(0, 0, 0, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.06);
  transition: background 220ms, transform 120ms, box-shadow 120ms, --chip 220ms;
}
.switch::before {
  content: "OFF" / ""; position: absolute; top: 50%; right: 9px; transform: translateY(-52%);
  font: 800 10px/1 var(--ff-display); letter-spacing: 0.06em; color: var(--smoke); pointer-events: none;
}
.switch[aria-checked="true"] { --chip: var(--gold); --x: 40px; --spin: 180deg; background: #3fbe7c; }
.switch[aria-checked="true"]::before { content: "ON" / ""; right: auto; left: 11px; color: var(--outline); }
.switch__knob {
  position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--outline); box-shadow: 2px 2px 0 var(--outline);
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.7) 0 2.5px, transparent 3px),
    radial-gradient(circle, var(--chip) 0 5.5px, var(--chalk) 6px 7.5px, transparent 8px),
    repeating-conic-gradient(var(--chalk) 0 18deg, var(--chip) 18deg 45deg);
  transform: translateX(var(--x)) rotate(var(--spin)) scale(var(--sx), var(--sy));
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.switch:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: var(--sticker), inset 0 -5px 0 rgba(0, 0, 0, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.06); }
.switch:active:not(:disabled) { --sx: 1.14; --sy: 0.88; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--outline), inset 0 -5px 0 rgba(0, 0, 0, 0.35); }
.switch:disabled { opacity: 0.6; cursor: progress; }
.switch:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.modal--texts { width: min(100%, 560px); }
.modal--texts > .note { margin-bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .switch, .switch__knob { transition: none; } .switch:hover:not(:disabled), .switch:active:not(:disabled) { transform: none; } }
.face__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
.face__tab, .face__chip { border-radius: 999px; background: transparent; cursor: pointer; }
.face__tab { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 10px; border: 2px solid var(--line); color: var(--smoke); }
.face__tab:hover, .face__chip:hover { border-color: var(--brass); }
.face__tab[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-hi); background: var(--panel-2); }
.face__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.face__chip { padding: 3px 9px; border: 2px solid var(--line-soft); color: var(--smoke); font: 600 12px/1.3 var(--ff-body); }
.face__chip[aria-pressed="true"] { border-color: var(--neon); color: var(--neon); }
.face__count { margin-left: auto; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); }
.face__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px 10px; padding: 6px 8px 2px 2px; }
.face-card { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 6px 7px; border: 3px solid var(--outline); border-radius: 10px; background: #f7f2e6; color: #151a13; cursor: pointer; font: inherit; transition: transform 120ms, box-shadow 120ms, border-color 120ms; }
.face-card:hover { transform: rotate(-2deg); border-color: var(--brass); }
.face-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.face-card__rank { position: absolute; left: 6px; top: 4px; font-family: var(--ff-mono); font-size: 10px; font-weight: 700; line-height: 1; }
.face-card__rank--red { color: #c8434a; }
.face-card .av { width: 60px; height: 60px; margin-top: 8px; }
.face-card__name { font-family: var(--ff-body); font-weight: 800; font-size: 11.5px; text-align: center; line-height: 1.1; }
/* The worn card: hot pink, not gold, so it does not blend into fifty-three cream cards on green. */
.face-card[aria-checked="true"] { border-color: var(--neon); box-shadow: var(--sticker), 0 0 0 3px color-mix(in srgb, var(--neon) 35%, transparent); transform: translate(-2px, -2px); }
.face-card[aria-checked="true"]::after { content: "YOURS"; position: absolute; right: -7px; top: -9px; padding: 3px 7px; border-radius: 999px; border: 2px solid var(--outline); background: var(--neon); color: #fff; font-family: var(--ff-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; }
.face__said { margin: 0; padding-top: 10px; border-top: 2px solid var(--line-soft); color: var(--smoke); font-size: 13.5px; }
/* The profile's face is the button that opens the deck; a pencil on its corner says so. */
.face__big--btn { cursor: pointer; padding: 0; font: inherit; position: relative; transition: transform 120ms, box-shadow 120ms; }
.face__big--btn:hover { transform: translate(-2px, -2px); box-shadow: 0 0 0 3px var(--gold-hi), 7px 7px 0 3px var(--outline); }
.face__big--btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.face__pic { display: grid; place-items: center; width: 96px; height: 96px; }
.face__pen { position: absolute; right: -8px; bottom: -4px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--on-gold); border: 3px solid var(--outline); box-shadow: 2px 2px 0 var(--outline); }
.face__pen svg { display: block; }
/* The deck in its dialog: wide enough for a row of six cards, and the grid scrolls inside it. */
.modal--deck { width: min(100%, 760px); }
.modal--deck .face__tabs { margin-top: 14px; }
.modal--deck .face__grid { max-height: min(58vh, 540px); overflow-y: auto; padding-right: 6px; margin-top: 12px; }
/* What scrolls inside a dialog scrolls behind a slim brass thumb on nothing,
   not the browser's grey gutter: the deck's grid, and the contacts' lists. */
.modal--deck .face__grid, .modal .dl { scrollbar-width: thin; scrollbar-color: var(--brass) transparent; }
.modal--deck .face__grid::-webkit-scrollbar, .modal .dl::-webkit-scrollbar { width: 8px; }
.modal--deck .face__grid::-webkit-scrollbar-track, .modal .dl::-webkit-scrollbar-track { background: transparent; }
.modal--deck .face__grid::-webkit-scrollbar-thumb, .modal .dl::-webkit-scrollbar-thumb { background: var(--brass); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.modal--deck .face__grid::-webkit-scrollbar-thumb:hover, .modal .dl::-webkit-scrollbar-thumb:hover { background: var(--gold); background-clip: padding-box; }
@media (prefers-reduced-motion: reduce) { .face__big--btn, .face__big--btn:hover { transition: none; transform: none; } }
/* The sign-up's face step: the face alone on the auth panel, the deck below it when asked for. */
.fc-me { margin: 18px 0 22px; }
.fc-deck { margin: 0 0 22px; }
.face__said:empty { display: none; }
@media (max-width: 560px) { .face { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .face-card, .face-card:hover, .face-card[aria-checked="true"] { transition: none; transform: none; } }

/* Sober or drunk, on the game form: a two-stop slider, coffee-cool on the
   left and whiskey-warm on the right, the knob sliding to the one picked. */
.mood-pick { display: grid; gap: 8px; }
.mood-pick__track {
  --sober: #6fb3c9; --drunk: #d9a441;
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; justify-self: start;
  padding: 4px; border: var(--bd); border-radius: 999px; background: var(--felt-deep);
  box-shadow: var(--sticker-sm); isolation: isolate;
}
.mood-pick__knob {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 50%; width: calc(50% - 4px);
  border-radius: 999px; border: 2px solid var(--outline);
  background: var(--drunk); box-shadow: 2px 2px 0 var(--outline);
  transition: left 280ms cubic-bezier(0.34, 1.56, 0.64, 1), background 160ms;
}
.mood-pick__track:has(input[value="sober"]:checked) .mood-pick__knob { left: 4px; background: var(--sober); }
.mood-pick__opt {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  font-family: var(--ff-display); font-weight: 800; font-size: 13px; letter-spacing: 0.02em; color: var(--smoke);
  transition: color 160ms;
}
.mood-pick__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.mood-pick__opt svg { width: 18px; height: 18px; flex: none; transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.mood-pick__opt:hover { color: var(--chalk); }
.mood-pick__opt:has(input:checked) { color: var(--on-gold); }
.mood-pick__opt--drunk:has(input:checked) svg { transform: rotate(-12deg); }
.mood-pick__opt:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.tag.tag--sober { color: #6fb3c9; border-color: color-mix(in srgb, #6fb3c9 60%, transparent); }

/* Church mode, in small print under the slider. On, the slider goes: nothing to choose. */
.church-pick { position: relative; display: inline-flex; align-items: center; gap: 7px; justify-self: start; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.church-pick:hover { color: var(--smoke); }
.church-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.church-pick svg { width: 15px; height: 15px; flex: none; }
.church-pick__sw { position: relative; width: 26px; height: 14px; flex: none; border: 2px solid var(--line); border-radius: 999px; background: var(--felt-deep); transition: background 160ms, border-color 160ms; }
.church-pick__sw::after { content: ""; position: absolute; top: 1px; left: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); transition: left 200ms cubic-bezier(0.34, 1.56, 0.64, 1), background 160ms; }
.church-pick:has(input:checked) { color: var(--chalk); }
.church-pick:has(input:checked) svg { color: #e8dcc0; }
.church-pick:has(input:checked) .church-pick__sw { border-color: #e8dcc0; background: color-mix(in srgb, #e8dcc0 25%, var(--felt-deep)); }
.church-pick:has(input:checked) .church-pick__sw::after { left: 13px; background: #e8dcc0; }
.church-pick:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.mood-pick.is-church .mood-pick__track { display: none; }
.tag.tag--church { color: #e8dcc0; border-color: color-mix(in srgb, #e8dcc0 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .church-pick__sw, .church-pick__sw::after { transition: none; } }
@media (prefers-reduced-motion: reduce) { .mood-pick__knob, .mood-pick__opt svg { transition: none; } }

/* --- sober or drunk ----------------------------------------------------------
   The page (sober-or-drunk.html) and its call-out on the home page. Coffee-cool
   and whiskey-warm, the two colours of the slider on the game form. The hero is
   one data-mood attribute away from either night: the drink on the rail, Sal's
   flush and sway, the sign on the wall. */
:root { --sober: #6fb3c9; --drunk: #d9a441; --church: #e8dcc0; }

/* Sal's cigar and its smoke, which a page can put away (church mode). The
   drawing is a <use> clone, so an inherited property is the only way in. */
.sal-cigar { visibility: var(--cigar, visible); }

.sd-w { transition: color 220ms, opacity 220ms; }
.sd-hero[data-mood="drunk"] .sd-w--drunk { color: var(--neon); }
.sd-hero[data-mood="sober"] .sd-w--sober { color: var(--sober); }
.sd-hero[data-mood="drunk"] .sd-w--sober, .sd-hero[data-mood="sober"] .sd-w--drunk,
.sd-hero[data-mood="church"] .sd-w { opacity: 0.5; }
/* Church mode takes the switch away: there is nothing to choose. */
.sd-hero[data-mood="church"] .mood-pick__track { display: none; }
.church-pick--big { font-size: 13.5px; }
.church-pick--big svg { width: 17px; height: 17px; }

.sd-try { display: grid; gap: 12px; margin-top: 26px; justify-items: start; }
.sd-try__k { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--ff-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.sd-try__k span { font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--muted); }
.sd-try__k kbd { font-size: 11px; min-width: 0; padding: 1px 7px; }
.mood-pick__track--big { padding: 5px; }
.mood-pick__track--big .mood-pick__knob { top: 5px; bottom: 5px; width: calc(50% - 5px); }
.mood-pick__track--big:has(input[value="sober"]:checked) .mood-pick__knob { left: 5px; }
.mood-pick__track--big .mood-pick__opt { padding: 13px 28px; gap: 10px; font-size: 16px; }
.mood-pick__track--big .mood-pick__opt svg { width: 24px; height: 24px; }
.sd-meter {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; max-width: 100%;
  padding: 8px 14px; border: 2px solid var(--line); border-radius: 10px; background: #050a07;
  box-shadow: inset 0 0 14px rgb(0 0 0 / 0.6); font-family: var(--ff-mono); font-size: 12px; color: var(--muted);
}
.sd-meter__k { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); }
.sd-meter b { color: var(--drunk); text-shadow: 0 0 8px color-mix(in srgb, var(--drunk) 60%, transparent); }
.sd-hero[data-mood="sober"] .sd-meter b { color: var(--sober); text-shadow: 0 0 8px color-mix(in srgb, var(--sober) 60%, transparent); }
.sd-hero[data-mood="church"] .sd-meter b { color: var(--church); text-shadow: 0 0 8px color-mix(in srgb, var(--church) 50%, transparent); }

.sd-hero[data-mood="sober"] .sd-neon {
  border-color: var(--sober);
  text-shadow: 0 0 6px var(--sober), 0 0 16px var(--sober), 0 0 34px var(--sober);
  box-shadow: 0 0 12px color-mix(in srgb, var(--sober) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--sober) 35%, transparent);
}
.sd-hero[data-mood="church"] .sd-neon {
  border-color: var(--church);
  text-shadow: 0 0 6px var(--church), 0 0 16px var(--church), 0 0 30px color-mix(in srgb, var(--church) 70%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--church) 45%, transparent), inset 0 0 12px color-mix(in srgb, var(--church) 30%, transparent);
}
.sd-neon.is-switching { animation: sd-buzz 560ms linear; }
@keyframes sd-buzz { 0% { opacity: 1; } 12% { opacity: 0.15; } 24% { opacity: 1; } 36% { opacity: 0.3; } 52% { opacity: 1; } 64% { opacity: 0.55; } 100% { opacity: 1; } }

.sd-flush, .sd-prop { transition: opacity 260ms ease-out, transform 420ms cubic-bezier(.2,1.5,.4,1); }
.sd-prop { transform-box: fill-box; transform-origin: 50% 100%; }
.sd-hero:not([data-mood="drunk"]) .sd-flush { opacity: 0; }
.sd-hero:not([data-mood="drunk"]) .sd-prop--drunk,
.sd-hero:not([data-mood="sober"]) .sd-prop--sober,
.sd-hero:not([data-mood="church"]) .sd-prop--church { opacity: 0; transform: translateY(10px) scale(0.3); }
/* Best behavior: the cigar goes in his pocket, and pokes get no puff. */
.sd-hero[data-mood="church"] .sd-sal { --cigar: hidden; }
.sd-hero[data-mood="church"] .bigpuff { display: none; }
.sd-hero[data-mood="drunk"] .sd-sal { transform-origin: 50% 96%; animation: sd-sway 3.6s ease-in-out infinite; }
@keyframes sd-sway { 0%, 100% { rotate: -1.8deg; } 50% { rotate: 1.8deg; } }
/* Low enough to leave the drink on the rail in sight. */
.sd-stage .vp-hint { bottom: 4px; }
.sd-steam { transform-box: fill-box; animation: sd-steam 2.6s ease-in infinite; }
.sd-steam--2 { animation-delay: 1.3s; }
@keyframes sd-steam { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-14px); } }

/* What it does: a card per mood, and what stays the same. */
.sd-duo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sd-card {
  --mood: var(--drunk);
  display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: 24px 24px 22px;
  border: var(--bd); border-radius: var(--r-lg); box-shadow: var(--sticker);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mood) 10%, var(--panel-2)), var(--felt-2));
}
.sd-card--sober { --mood: var(--sober); }
.sd-card--church { --mood: var(--church); }
/* The tag on a row of its own: three cards across leave no room beside the title. */
.sd-card__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; }
.sd-card__tag { grid-column: 1 / -1; justify-self: start; }
.sd-card__ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--outline); background: var(--mood); color: var(--on-gold); box-shadow: var(--sticker-sm); }
.sd-card__ic svg { width: 32px; height: 32px; }
.sd-card__t { margin: 0; font-family: var(--ff-display); font-weight: 800; font-size: 26px; line-height: 1.05; color: var(--mood); }
.sd-card__sub { margin: 4px 0 0; font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--smoke); }
.sd-card__tag { padding: 4px 10px; border: 2px solid color-mix(in srgb, var(--mood) 55%, transparent); border-radius: 999px; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mood); white-space: nowrap; }
.sd-card__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; align-content: start; }
.sd-card__list li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.5; color: var(--chalk); }
.sd-card__list li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--mood); box-shadow: 0 0 0 2px var(--outline); }
.sd-card__foot { margin: 0; padding-top: 14px; border-top: 2px dashed var(--line-soft); font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
.sd-same { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 20px; border: 2px solid var(--line-soft); border-radius: var(--r); background: var(--felt-deep); }
.sd-same b { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); }
.sd-same ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.sd-same li { padding: 6px 12px; border: 2px solid var(--line); border-radius: 999px; background: var(--felt-2); font-size: 14px; color: var(--chalk); }

/* Hear it: the same moment from each dealer, both ways. */
.sd-hear { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sd-clip { --mood: var(--drunk); background: linear-gradient(180deg, color-mix(in srgb, var(--mood) 8%, var(--panel-2)), var(--felt-2)); }
.sd-clip--sober { --mood: var(--sober); }
.sd-clip__who { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-display); font-weight: 800; font-size: 16px; color: var(--chalk); }
.sd-clip__who svg { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--outline); background: radial-gradient(90% 90% at 50% 20%, #1d4a31, var(--felt)); }
.sd-clip__who--sally svg { background: radial-gradient(90% 90% at 50% 20%, #5a1f38, #1a0d14); }
.sd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border: 2px solid var(--outline); border-radius: 999px; background: var(--mood); color: var(--on-gold); font-family: var(--ff-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.sd-chip svg { width: 16px; height: 16px; }
.sd-clip__say { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--smoke); }
.sd-clip--sober .play { background: var(--sober); }
.sd-clip--sober .play:hover { background: #8cc6d8; }
.sd-clip--church { --mood: var(--church); }
.sd-clip--church .play { background: var(--church); }
.sd-clip--church .play:hover { background: #f4ecd8; }

/* Church mode, the section: the pair of them on their best behavior, then the facts. */
.sd-cream { color: var(--church); }
.sd-church { border-top: 3px solid var(--outline); background: linear-gradient(180deg, color-mix(in srgb, var(--church) 5%, var(--felt)), var(--felt)); }
.sd-church__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sd-church__facts { margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sd-church__facts li { padding: 16px 18px; border: 2px solid var(--line-soft); border-radius: var(--r); background: var(--felt-deep); color: var(--smoke); font-size: 15px; line-height: 1.5; }
.sd-church__facts b { display: block; margin-bottom: 4px; color: var(--church); font-size: 16px; }

.sal-rules.sd-where { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The quiz: questions on the left, the verdict keeping up on the right. */
.sd-quiz { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 20px; align-items: start; }
.sd-quiz__qs { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: q; }
.sd-q { counter-increment: q; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 14px 16px 14px 18px; border: 2px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, var(--panel), var(--felt-2)); }
.sd-q__t { font-weight: 700; font-size: 16px; color: var(--chalk); }
.sd-q__t::before { content: counter(q) ". "; font-family: var(--ff-mono); font-size: 13px; color: var(--brass); }
.sd-q__a { display: inline-flex; gap: 8px; }
.sd-verdict {
  --mood: var(--gold);
  position: sticky; top: 100px; display: grid; gap: 12px; padding: 22px;
  border: var(--bd); border-radius: var(--r-lg); background: var(--felt-deep); box-shadow: var(--sticker-lg);
}
.sd-verdict[data-mood="drunk"] { --mood: var(--drunk); }
.sd-verdict[data-mood="sober"] { --mood: var(--sober); }
.sd-verdict[data-mood="church"] { --mood: var(--church); }
.sd-verdict__k { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.sd-verdict__row { display: flex; align-items: center; gap: 12px; }
.sd-verdict__ic { display: none; width: 40px; height: 40px; flex: none; color: var(--mood); }
.sd-verdict[data-mood="sober"] .sd-verdict__ic--sober, .sd-verdict[data-mood="drunk"] .sd-verdict__ic--drunk,
.sd-verdict[data-mood="church"] .sd-verdict__ic--church { display: block; }
.sd-verdict__t { font-family: var(--ff-display); font-weight: 800; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; color: var(--mood); }
.sd-verdict__why { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--smoke); }
.sd-verdict .btn { justify-self: start; }

.vs--moods th:nth-child(2) .who { color: var(--drunk); }
.vs--moods th:nth-child(3) .who { color: var(--sober); }
.vs--moods th:nth-child(4) .who { color: var(--church); }
.vs.vs--moods { min-width: 860px; }
.vs--moods td:first-child { width: 19%; }
.vs--moods td:nth-child(4) { color: var(--chalk); font-size: 15.5px; }
.vs--moods .who svg { width: 24px; height: 24px; }

.sd-ask__pair { display: flex; gap: 12px; }
.sd-ask__ic { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--outline); color: var(--on-gold); box-shadow: var(--sticker); }
.sd-ask__ic svg { width: 40px; height: 40px; }
.sd-ask__ic--sober { background: var(--sober); transform: rotate(-6deg); }
.sd-ask__ic--drunk { background: var(--drunk); transform: rotate(8deg); }

/* The home page: under the two voice cards, a little switch that can't make up its mind. */
.vp__side { display: grid; gap: 16px; min-width: 0; }
.sd-callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: center;
  padding: 14px 18px; border: 3px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(90deg, color-mix(in srgb, var(--sober) 10%, var(--felt-2)), color-mix(in srgb, var(--drunk) 10%, var(--felt-2)));
  color: var(--chalk); text-decoration: none;
  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
}
.sd-callout:hover, .sd-callout:focus-visible { border-color: var(--gold); transform: translate(-2px, -2px); box-shadow: var(--sticker); }
.sd-callout__sw { grid-row: span 2; position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 78px; height: 40px; padding: 3px; border: 2px solid var(--outline); border-radius: 999px; background: var(--felt-deep); }
.sd-callout__sw::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border: 2px solid var(--outline); border-radius: 999px; background: var(--sober); animation: sd-flip 6s ease-in-out infinite; }
.sd-callout__sw svg { position: relative; z-index: 1; width: 18px; height: 18px; justify-self: center; color: var(--chalk); }
@keyframes sd-flip { 0%, 42% { left: 3px; background: var(--sober); } 50%, 92% { left: 50%; background: var(--drunk); } 100% { left: 3px; background: var(--sober); } }
.sd-callout__t { font-size: 15px; line-height: 1.45; color: var(--smoke); }
.sd-callout__t b { font-weight: 800; color: var(--chalk); }
.sd-callout__go { font-family: var(--ff-mono); font-size: 12.5px; font-weight: 700; color: var(--gold); }

@media (max-width: 980px) {
  .sd-duo, .sd-hear, .sd-quiz, .sal-rules.sd-where, .sd-church__pair, .sd-church__facts { grid-template-columns: minmax(0, 1fr); }
  .sd-verdict { position: static; }
}
@media (max-width: 520px) {
  .mood-pick__track--big .mood-pick__opt { padding: 12px 20px; font-size: 15px; }
  .sd-callout { grid-template-columns: minmax(0, 1fr); }
  .sd-callout__sw { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .sd-flush, .sd-prop, .sd-w { transition: none; } }

/* --- feedback (feedback.html) ----------------------------------------------
   The writers' room: Sal and Sally under one lamp, heckling, and the pitch
   form below them. The pick cards are the game form's dealer cards grown to
   three, the third a mystery dealer in silhouette. */

/* Two dealers shoulder to shoulder behind their rails. */
.fb-stage { padding-top: 132px; }
.fb-duo { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; width: 100%; }
.fb-duo .mascot { width: 50%; max-width: 270px; }
.fb-duo .mascot + .mascot { margin-left: -3%; }
.neon.fb-neon { top: 6px; }
.shout.fb-shout { top: 64px; max-width: 200px; }
.shout.fb-shout--sally { top: 104px; }

/* Who it's for: three cards, the picked one lifts and takes its colour. */
.fb-who { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.fb-k { padding: 0; margin-bottom: 8px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.fb-who__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fb-who__card {
  --pick: var(--gold);
  position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; min-width: 0;
  padding: 14px 10px 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--felt-deep);
  text-align: center; cursor: pointer;
  transition: border-color 140ms, box-shadow 140ms, background 140ms, transform 140ms;
}
.fb-who__card--sally { --pick: var(--neon); }
.fb-who__card--other { --pick: var(--copper); }
.fb-who__card:hover { border-color: var(--brass); }
.fb-who__card input { position: absolute; opacity: 0; pointer-events: none; }
.fb-who__card:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.fb-who__card:has(input:checked) {
  border-color: var(--pick); box-shadow: var(--sticker-sm); transform: translate(-2px, -2px);
  background: color-mix(in srgb, var(--pick) 9%, var(--felt-2));
}
.fb-who__pic {
  width: 64px; height: 64px; display: block; flex: none; border-radius: 50%; border: 2px solid var(--outline);
  background: radial-gradient(90% 90% at 50% 20%, #1d4a31, var(--felt));
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fb-who__card--sally .fb-who__pic { background: radial-gradient(90% 90% at 50% 20%, #5a1f38, #1a0d14); }
/* The mystery dealer: a silhouette in a spotlight, like a game show reveal. */
.fb-who__card--other .fb-who__pic { background: radial-gradient(80% 80% at 50% 30%, var(--gold-hi), var(--brass) 75%); }
.fb-who__q { font-family: var(--ff-display); font-weight: 900; font-size: 150px; fill: var(--neon); stroke: var(--outline); stroke-width: 10px; paint-order: stroke; }
.fb-who__card:has(input:checked) .fb-who__pic { transform: rotate(-7deg) scale(1.08); }
.fb-who__card--sal:has(input:checked) .fb-who__pic { --brow: -8px; }
.fb-who__txt { display: grid; gap: 2px; min-width: 0; }
.fb-who__txt b { font-family: var(--ff-display); font-weight: 800; font-size: 14.5px; line-height: 1.2; color: var(--chalk); transition: color 140ms; }
.fb-who__txt span { font-size: 12.5px; line-height: 1.35; color: var(--smoke); }
.fb-who__card:has(input:checked) .fb-who__txt b { color: var(--pick); }

/* The pitch box, its prompt deck and its meter. */
.fb-idea__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.fb-deal {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px;
  border: 2px solid var(--line); border-radius: 999px; background: transparent; color: var(--gold);
  font-family: var(--ff-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; line-height: 1.2;
  cursor: pointer; transition: border-color 140ms, color 140ms, background 140ms;
}
.fb-deal svg { width: 16px; height: 16px; flex: none; transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.fb-deal:hover { border-color: var(--gold); color: var(--gold-hi); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.fb-deal:hover svg { transform: rotate(-14deg) scale(1.12); }

/* A dealt prompt: an index card on the felt, with an x to take it back. */
.fb-prompt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
  padding: 10px 10px 11px 14px; border: 2px solid var(--outline); border-radius: 10px;
  background: var(--chalk); color: #131a12; box-shadow: var(--sticker-sm); transform: rotate(-0.6deg);
}
.fb-prompt__k { font-family: var(--ff-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--neon-deep); }
.fb-prompt__q { grid-column: 1; font-weight: 700; font-size: 15px; line-height: 1.4; }
.fb-prompt__x {
  grid-column: 2; grid-row: 1 / span 2; width: 30px; height: 30px; display: grid; place-items: center;
  padding: 0; border: 2px solid #b9b3a2; border-radius: 50%; background: transparent; color: #5c6357; cursor: pointer;
}
.fb-prompt__x svg { width: 10px; height: 10px; }
.fb-prompt__x:hover { border-color: var(--neon-deep); color: var(--neon-deep); }
.fb-prompt.is-dealt { animation: fb-deal 420ms cubic-bezier(.2, 1.4, .4, 1); }
@keyframes fb-deal {
  from { opacity: 0; transform: translate(20px, -12px) rotate(6deg); }
  to   { opacity: 1; transform: rotate(-0.6deg); }
}
.fb-idea textarea { min-height: 150px; }

/* The Laugh-o-meter: the gradient runs the whole bar, and a cover slides off it. */
.fb-meter { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.fb-meter__k { font-family: var(--ff-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); white-space: nowrap; }
.fb-meter__n { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fb-meter__bar {
  position: relative; flex: 1; height: 12px; overflow: hidden;
  border: 2px solid var(--outline); border-radius: 999px;
  background: linear-gradient(90deg, var(--brass), var(--gold) 40%, var(--copper) 72%, var(--neon));
}
.fb-meter__bar i { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; background: var(--felt-deep); transition: width 300ms cubic-bezier(.2, 1.3, .4, 1); }
.fb-meter__say { margin: 0; font-family: var(--ff-mono); font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.fb-meter__say b { color: var(--gold); font-weight: 700; }

.fb-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.fb-panel .field label i { font-style: normal; letter-spacing: 0.08em; color: #56685c; }
.fb-fine { margin: 12px 0 0; line-height: 1.55; }

/* Sent: the stamp comes down and stays down. */
.fb-done { display: grid; justify-items: center; gap: 12px; padding: 8px 4px 2px; text-align: center; }
.fb-done:focus { outline: none; }
.fb-stamp { padding: 10px 0 16px; }
.fb-stamp span {
  display: inline-block; padding: 10px 22px;
  font-family: var(--ff-display); font-weight: 900; font-size: clamp(30px, 5vw, 46px); line-height: 1;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--neon);
  border: 5px double var(--neon); border-radius: 10px; background: rgb(7 15 10 / 0.72);
  text-shadow: 3px 3px 0 var(--outline); transform: rotate(-8deg);
}
.fb-stamp.is-on span { animation: fb-slam 620ms cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes fb-slam {
  0%   { opacity: 0; transform: scale(2.3) rotate(4deg); }
  60%  { opacity: 1; transform: scale(0.94) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}
.fb-done__t { max-width: 44ch; font-weight: 700; font-size: 18px; line-height: 1.45; color: var(--chalk); }
/* An address has nowhere to break, and in a centred grid it would widen the
   whole card past a phone's edge rather than just its own line. */
.fb-done__sub { max-width: 48ch; font-size: 15px; color: var(--smoke); overflow-wrap: anywhere; }
.fb-done__fine { margin-top: 2px; }

.fb-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.fb-list li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.45; color: var(--smoke); }
.fb-list li::before { content: "♠"; position: absolute; left: 0; top: 1px; font-size: 11px; color: var(--neon); }

@media (max-width: 560px) {
  .fb-who__cards, .fb-two { grid-template-columns: minmax(0, 1fr); }
  .fb-who__card { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; }
  .fb-who__pic { width: 52px; height: 52px; }
  /* Two bubbles on a phone: each keeps to its own half of the stage. */
  .shout.fb-shout { max-width: 46%; }
}
@media (prefers-reduced-motion: reduce) { .fb-who__card, .fb-who__pic, .fb-deal svg, .fb-meter__bar i { transition: none; } }

/* The footer's house rules end on a way to add one: a link that reads as one. */
.rules a { font-size: inherit; color: var(--gold); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.rules a:hover { color: var(--gold-hi); }

/* --- the chip tray ----------------------------------------------------------
   Settings and the game form: one row a color of chip. The first cell is the
   chip itself, edge stripes and all, with what is printed on it; clicking it
   opens the color picker hidden inside. Each box is as wide as what goes in
   it, with its name beside it, so a row reads across: marked 1, worth 100,
   10 each. */
.chips { display: grid; gap: 10px; }
.chips__rows { display: grid; gap: 10px; }
.chips__rows:empty { display: none; }
.chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.chip-row .field {
  width: 84px; height: 40px; font: 600 15px var(--ff-body); font-variant-numeric: tabular-nums; padding: 8px 10px;
  border-radius: 10px; border: 2px solid var(--line); background: var(--felt-deep); color: var(--chalk);
}
.chip-row .chip-row__label { width: 56px; }
.chip-row__f:last-of-type .field { width: 64px; }
.chip-row .field::placeholder { color: #56685c; font-weight: 400; }
.chip-row .field:focus { border-color: var(--gold); outline: none; }
.chip-row__chip {
  --chip-c: #f5f5f0; --ink: #111;
  position: relative; flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%; cursor: pointer;
  background:
    radial-gradient(circle, var(--chip-c) 0 52%, transparent 53%),
    repeating-conic-gradient(var(--chip-c) 0 30deg, rgba(255, 255, 255, 0.92) 30deg 45deg);
  border: 3px solid var(--outline); box-shadow: var(--sticker-sm), inset 0 0 0 3px var(--chip-c);
  display: grid; place-items: center;
}
.chip-row__f { display: inline-flex; align-items: center; gap: 8px; }
.chip-row__f span { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.chip-row__chip:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.chip-row__chip input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.chip-row__face {
  font-family: var(--ff-display); font-size: 11.5px; font-weight: 800; color: var(--ink);
  max-width: 32px; overflow: hidden; white-space: nowrap; text-overflow: clip; pointer-events: none;
}
.chip-row__x {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); background: transparent;
  color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.chip-row__x:hover, .chip-row__x:focus-visible { color: var(--neon); border-color: var(--neon); outline: none; }
.chips__foot { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.chips__total { font-family: var(--ff-mono); font-size: 12px; color: var(--gold); }
/* No chips yet: a set to start from, drawn as chips, and one press to use it. */
.chips__empty {
  display: grid; gap: 10px; padding: 16px; border-radius: 14px;
  border: 2px dashed color-mix(in srgb, var(--gold) 45%, var(--line));
  background: color-mix(in srgb, var(--gold) 6%, transparent);
}
.chips__empty[hidden] { display: none; }
.chips__demo { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.chips__coin { display: grid; justify-items: center; gap: 6px; }
.chips__face { cursor: default; width: 54px; height: 54px; }
.chips__face .chip-row__face { max-width: 36px; font-size: 12.5px; }
.chips__n { font-family: var(--ff-mono); font-size: 12px; color: var(--chalk); }
.chips__pitch { margin: 0; color: var(--smoke); font-size: 14.5px; line-height: 1.45; }
.chips__pitch b { color: var(--chalk); }
.chips__sum { margin: 0; font-family: var(--ff-mono); font-size: 12px; color: var(--gold); }
.chips__empty .row-btns { margin: 0; }
/* A phone: each name above its box, so a chip still takes one line. */
@media (max-width: 560px) {
  .chip-row { display: grid; grid-template-columns: 50px repeat(3, minmax(0, 1fr)) 32px; gap: 10px; align-items: end; }
  .chip-row__f { display: grid; gap: 4px; }
  .chip-row__f span { font-size: 10px; }
  .chip-row .field, .chip-row .chip-row__label, .chip-row__f:last-of-type .field { width: 100%; }
  .chip-row__x { margin-bottom: 4px; }
}

/* --- settings, one a row ----------------------------------------------------
   A setting's name and a line on what it does on the left, and a control as
   wide as its value on the right: prices, counts and two-way choices, where
   there was a wall of full-width boxes. Settings, and the game form's table. */
.opts { display: grid; }
.opt {
  display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 8px 32px; align-items: start;
  padding: 18px 0; border-top: 1px solid var(--line-soft);
}
.opts > .opt:first-child { border-top: 0; padding-top: 6px; }
/* Inside a fold too, which is a details element: the FAQ's answer spacing is not for these. */
.opt p { padding: 0; max-width: none; }
.opt__t { margin: 0; font: 700 16px/1.3 var(--ff-body); color: var(--chalk); }
.opt__say { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.opt__v { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-width: 0; }
.opt__v--stack { flex-direction: column; align-items: stretch; }
.opt__word { font-size: 15px; color: var(--smoke); margin: 0; }
/* A number and the words after it, kept on one line when the row wraps. */
.opt__pair { display: inline-flex; align-items: center; gap: 10px; }
.opt__line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; }
.opt__line[hidden] { display: none; }
@media (max-width: 640px) { .opt { grid-template-columns: 1fr; gap: 12px; } }
/* In a dialog: the name above the control, whatever the width of the page. */
.opts--stack .opt { grid-template-columns: 1fr; gap: 10px; padding: 14px 0; }

/* An amount: the box as wide as a price, the currency inside it. */
.amt { position: relative; display: inline-flex; align-items: center; }
.amt > span { position: absolute; left: 12px; font: 600 15px var(--ff-body); color: var(--muted); pointer-events: none; }
.amt input, .num {
  width: 108px; height: 42px; padding: 8px 12px 8px 27px; border-radius: 10px;
  border: 2px solid var(--line); background: var(--felt-deep); color: var(--chalk);
  font: 600 16px var(--ff-body); font-variant-numeric: tabular-nums;
}
.num { width: 88px; padding-left: 12px; }
.num--stack { width: 124px; }
.amt input:focus, .num:focus { border-color: var(--gold); outline: none; }
.amt input::placeholder, .num::placeholder { color: #56685c; font-weight: 400; }
.num[hidden] { display: none; }
.opt input[type="number"], .chip-row input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.opt input[type="number"]::-webkit-inner-spin-button, .opt input[type="number"]::-webkit-outer-spin-button,
.chip-row input[type="number"]::-webkit-inner-spin-button, .chip-row input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Two ways, the second with a number: "All night" or "Through level 4". */
.pick { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--felt-deep); border: 2px solid var(--line-soft); }
.pick button {
  padding: 7px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--smoke);
  font: 600 14px/1.2 var(--ff-body); cursor: pointer;
}
.pick button:hover { color: var(--chalk); }
.pick button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }
.pick--wrap { flex-wrap: wrap; }
/* The invite page of a game played online. */
.rv-seat { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 2px solid color-mix(in srgb, #3fbe7c 55%, var(--line-soft)); border-radius: 12px; background: color-mix(in srgb, #3fbe7c 8%, var(--felt-deep)); }
.rv-seat__t { margin: 0; color: var(--chalk); }
/* A choice inside an option row (the game form's online table): the same as a field's. */
.opt__line select { font-family: var(--ff-body); font-size: 15px; padding: 9px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--felt-deep); color: var(--chalk); min-width: 0; max-width: 100%; }
.opt__line select:focus { border-color: var(--gold); outline: none; }
.opt__line label.opt__word { min-width: 9.5em; }
.pick button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* How the pot is paid: the way, then a box a place for dollars or shares. */
.po { display: grid; gap: 10px; min-width: 0; }
.po__pick { flex-wrap: wrap; justify-self: start; }
.po__places { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.po__places[hidden] { display: none; }
.po__place { display: grid; gap: 4px; }
.po__k { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.po__place .amt input { width: 104px; }
/* A share: the sign after the number, where it is read. */
.amt--pct > span { left: auto; right: 12px; }
.amt--pct input { padding: 8px 27px 8px 12px; }
.po__acts { display: inline-flex; gap: 14px; padding-bottom: 11px; font-size: 13.5px; }
.po__say { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.po__say:empty { display: none; }
.po__say--warn { color: var(--neon); }
/* A night worked out by the schedule as it is picked: so many players at the
   buy-in, and what each paid place takes home. */
.po__eg { display: grid; gap: 10px; padding: 12px 14px; border: 2px dashed var(--line-soft); border-radius: 12px; background: color-mix(in srgb, var(--felt-deep) 60%, transparent); }
.po__eg[hidden] { display: none; }
.po__eg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 14px; color: var(--smoke); }
.po__eg-k { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-right: 4px; }
.po__eg-n { color: var(--chalk); font-variant-numeric: tabular-nums; min-width: 6.5ch; text-align: center; }
.po__eg-step { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); background: var(--felt-deep); color: var(--chalk); font: 700 15px/1 var(--ff-body); cursor: pointer; }
.po__eg-step:hover:not(:disabled) { border-color: var(--gold); }
.po__eg-step:disabled { opacity: 0.4; cursor: default; }
.po__eg-step:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.po__eg-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.po__eg-list li { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 10px; padding: 8px 12px; border: 2px solid var(--line-soft); border-radius: 10px; background: var(--felt-deep); }
.po__eg-list li.is-first { border-color: color-mix(in srgb, var(--gold) 60%, var(--line-soft)); }
.po__eg-list b { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.po__eg-list li.is-first b { color: var(--gold); }
.po__eg-list span { font: 700 16px var(--ff-body); color: var(--chalk); font-variant-numeric: tabular-nums; }
.po__eg-list small { grid-column: 2; font-size: 12px; color: var(--muted); }
.po__eg-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.po__eg-note[hidden] { display: none; }


/* ------------------------------------------------------------------ *
 * Blinds: one ladder's levels, a row each, every number a box. A break
 * is a row of its own, lit brass, its name where the blinds would be.
 * ------------------------------------------------------------------ */
.bl-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-family: var(--ff-mono); font-size: 12.5px; color: var(--gold); }
.bl-dirty { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 2px solid var(--neon-deep); color: var(--neon); }
.bl-dirty[hidden] { display: none; }
.bl-booked { margin: 0; }
.bl-bulk .num { width: 76px; }
.bl-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.bl-foot__add, .bl-foot__go { display: flex; flex-wrap: wrap; gap: 10px; }
.bl-foot__go { margin-left: auto; }
.tbl tr[aria-current="true"] td { background: color-mix(in srgb, var(--gold) 9%, transparent); }
.tbl tr[aria-current="true"] .tbl__name { color: var(--gold); }

.lv-tbl { min-width: 640px; }
.lv-tbl th, .lv-tbl td { padding: 7px 8px; }
.lv-tbl th:first-child, .lv-tbl td:first-child { padding-left: 14px; }
.lv-tbl .num { width: 96px; height: 38px; font-size: 15px; padding: 6px 10px; }
.lv-tbl .num--min { width: 72px; }
.lv-tbl input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.lv-tbl input[type="number"]::-webkit-inner-spin-button, .lv-tbl input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lv__n { width: 34px; font-family: var(--ff-mono); font-size: 12px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.lv__at { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv--break td { background: color-mix(in srgb, var(--brass) 9%, transparent); }
.lv--break .lv__n::before { content: ""; display: block; width: 14px; height: 3px; border-radius: 2px; background: var(--brass); }
.lv__label {
  width: 100%; height: 38px; padding: 6px 12px; border-radius: 10px;
  border: 2px solid var(--line); background: var(--felt-deep); color: var(--brass);
  font: 600 15px var(--ff-body);
}
.lv__label:focus { border-color: var(--gold); outline: none; }
.lv__label::placeholder { color: #56685c; font-weight: 400; }
.lv__tools { display: flex; gap: 4px; justify-content: flex-end; }
.lv__btn {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border-radius: 8px; border: 2px solid var(--line); background: transparent; color: var(--smoke); cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.lv__btn svg { width: 14px; height: 14px; }
.lv__btn:hover:not(:disabled) { border-color: var(--gold); color: var(--chalk); }
.lv__btn--x:hover:not(:disabled) { border-color: var(--neon); color: var(--neon); }
.lv__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lv__btn:disabled { opacity: 0.3; cursor: default; }
/* A game's ladder on the games list, a way to change it. */
.tbl__ladder { color: var(--smoke); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.tbl__ladder:hover { color: var(--gold); text-decoration-color: currentColor; }
/* Brought into view below the sticky nav, not under it. */
#bl-edit { scroll-margin-top: 92px; }
/* A phone: each level a card of its own. The blinds across the top, then its
   minutes, when it starts and the tools; every box captioned, since the
   table's header has no room. */
@media (max-width: 640px) {
  .lv-tbl { min-width: 0; }
  .lv-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lv-tbl tbody { display: block; }
  .lv-tbl tr.lv {
    display: grid; grid-template-columns: 22px repeat(3, minmax(0, 1fr)); gap: 8px 8px; align-items: end;
    padding: 12px 12px 12px 10px; border-bottom: 2px solid var(--line-soft);
  }
  .lv-tbl tbody tr.lv:last-child { border-bottom: 0; }
  .lv-tbl tr.lv td { display: block; padding: 0; border: 0; background: none; }
  .lv-tbl tr.lv--break { background: color-mix(in srgb, var(--brass) 9%, transparent); }
  .lv-tbl td[data-k]::before {
    content: attr(data-k); display: block; margin-bottom: 4px;
    font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  }
  .lv-tbl .lv__n { width: auto; align-self: center; grid-row: 1; }
  .lv-tbl .lv__what { grid-column: 2 / -1; }
  .lv-tbl .lv__min { grid-column: 2; }
  .lv-tbl .lv__at { align-self: center; }
  .lv-tbl .lv__at::before { margin-bottom: 6px; }
  .lv-tbl .num, .lv-tbl .num--min { width: 100%; }
  .lv-tbl .lv__do { align-self: center; }
  .lv-tbl .lv__tools { display: grid; grid-template-columns: repeat(2, 32px); justify-content: end; gap: 4px; }
  .bl-foot__go { margin-left: 0; }
}
/* The editor's fields as one, for disabling while a save is out. */
.bl-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.bl-fields:disabled { opacity: 0.6; }

/* ------------------------------------------------------------------ *
 * Dealing: what a page shows while it waits on the API.
 *
 * Three cards come off the deck, flip face up in a fan, and gather again,
 * over a line of Sal's that changes as the wait goes on. It fades in only
 * after a moment, so a quick answer never flashes it. A count pill waiting
 * on the same answer spins a chip. With reduced motion the hand lies still,
 * face up. Built by DD.dealing in site.js.
 * ------------------------------------------------------------------ */
.deal { display: grid; justify-items: center; gap: 14px; padding: 26px 12px 22px; animation: deal-in 0.3s ease-out 0.25s both; }
.deal__hand { position: relative; width: 140px; height: 72px; perspective: 520px; }
.deal__card { position: absolute; left: 50%; top: 6px; width: 42px; height: 58px; margin-left: -21px; transform-style: preserve-3d; transform: rotateY(180deg); animation: deal-card 2.6s cubic-bezier(0.3, 0.7, 0.2, 1) infinite; }
.deal__card:nth-child(1) { --x: -46px; --r: -12deg; --y: 4px; }
.deal__card:nth-child(2) { --x: 0px; --r: 0deg; --y: -2px; animation-delay: 0.14s; }
.deal__card:nth-child(3) { --x: 46px; --r: 12deg; --y: 4px; animation-delay: 0.28s; }
.deal__face, .deal__back { position: absolute; inset: 0; border: 3px solid var(--outline); border-radius: 7px; box-shadow: var(--sticker-sm); backface-visibility: hidden; }
.deal__back { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, var(--gold) 0 4px, var(--brass) 4px 8px); }
.deal__back::after { content: ''; position: absolute; inset: 4px; border: 2px solid var(--gold-hi); border-radius: 3px; opacity: 0.7; }
.deal__face { display: grid; place-items: center; background: var(--chalk); color: var(--outline); font-family: var(--ff-display); font-size: 23px; line-height: 1; }
.deal__face b { position: absolute; top: 3px; left: 4px; font-size: 11px; font-weight: 800; }
.deal__face--red { color: var(--neon-deep); }
.deal__say { margin: 0; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); transition: opacity 0.2s; }
.deal__say::after { content: '...'; display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; animation: deal-dots 1.6s steps(4, jump-none) infinite; }
.deal__say.is-out { opacity: 0; }
td.deal-cell, .tbl td.deal-cell:last-child { padding: 0; text-align: center; }
@keyframes deal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes deal-card {
  0%, 6% { transform: translate(0, 0) rotate(0) rotateY(180deg); }
  24% { transform: translate(var(--x), var(--y)) rotate(var(--r)) rotateY(180deg); }
  36%, 74% { transform: translate(var(--x), var(--y)) rotate(var(--r)) rotateY(0deg); }
  86% { transform: translate(var(--x), var(--y)) rotate(var(--r)) rotateY(180deg); }
  100% { transform: translate(0, 0) rotate(0) rotateY(180deg); }
}
@keyframes deal-dots { to { width: 3ch; } }

.pane__count.is-dealing:empty { display: inline-grid; place-items: center; padding: 3px 7px; }
.pane__count.is-dealing:empty::before { content: ''; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--outline); background: repeating-conic-gradient(var(--gold) 0 30deg, var(--chalk) 30deg 60deg); animation: deal-chip 1.1s linear infinite; }
@keyframes deal-chip { to { transform: rotateY(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .deal { animation: none; }
  .deal__card { animation: none; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
  .deal__say::after { animation: none; width: 3ch; }
  .pane__count.is-dealing:empty::before { animation: none; }
}

/* ------------------------------------------------------------------ *
 * A night's results being fixed or recorded (game.html): a row per
 * player in the order they finished, dragged by its grip. The name and
 * the tools on one line, what they bought and were paid on the next.
 * ------------------------------------------------------------------ */
.fo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fo:empty { display: none; }
.fo__row {
  display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) auto;
  grid-template-areas: "grip at who tools" "grip . money money";
  column-gap: 10px; row-gap: 8px; align-items: center;
  padding: 8px 10px; border: 2px solid var(--line-soft); border-radius: 12px; background: var(--felt-deep);
}
.fo.is-dragging .fo__row { transition: transform 0.16s ease; }
.fo.is-dragging .fo__row.is-lifted { transition: none; position: relative; z-index: 2; border-color: var(--gold); box-shadow: var(--sticker); }
.fo__grip {
  grid-area: grip; align-self: stretch; display: grid; place-items: center; width: 30px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: grab; touch-action: none;
}
.fo__grip svg { width: 16px; height: 16px; fill: currentColor; }
.fo__grip:hover, .fo__grip:focus-visible { color: var(--gold); background: var(--panel); }
.fo.is-dragging .fo__grip { cursor: grabbing; }
.fo__at { grid-area: at; font: 700 13px var(--ff-mono); color: var(--gold); }
.fo__row:first-child .fo__at { color: var(--gold-hi); }
.fo__who { grid-area: who; display: flex; align-items: center; gap: 8px; min-width: 0; }
.fo__name { font-weight: 600; color: var(--chalk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A place a take-out left empty: there, and nobody in it. */
.fo__row--gap { border-style: dashed; background: transparent; }
.fo__row--gap .fo__name { color: var(--muted); font-weight: 500; font-style: italic; }
.fo__row--gap .fo__money { margin: 0; }
.fo__tools { grid-area: tools; display: flex; gap: 2px; }
.fo__tool {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer;
}
.fo__tool svg { width: 15px; height: 15px; }
.fo__tool:hover:not(:disabled) { color: var(--chalk); background: var(--panel); }
.fo__tool:disabled { opacity: 0.3; cursor: default; }
.fo__money { grid-area: money; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.fo__k { font: 600 11px var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fo__buys, .fo__in, .fo__paid { display: inline-flex; align-items: center; gap: 8px; }
.fo__in b { font-weight: 600; color: var(--chalk); font-variant-numeric: tabular-nums; }
.fo__addon { display: inline-flex; align-items: center; gap: 6px; color: var(--smoke); font-size: 14px; cursor: pointer; }
.fo__addon:empty { display: none; }
.fo__addon input { width: 17px; height: 17px; accent-color: var(--gold); }
.fo__money .amt input { width: 104px; height: 36px; font-size: 15px; }
.fo__money .amt > span { font-size: 14px; }
.fo-step { display: inline-flex; align-items: center; gap: 2px; border: 2px solid var(--line); border-radius: 10px; padding: 2px; }
.fo-step button {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent;
  color: var(--chalk); font: 700 16px var(--ff-body); cursor: pointer;
}
.fo-step button:hover:not(:disabled) { background: var(--panel); }
.fo-step button:disabled { opacity: 0.3; cursor: default; }
.fo-step b { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.fo-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fo-add select { flex: 1 1 14rem; min-width: 0; }
.fo-add input { flex: 1 1 10rem; min-width: 0; }
/* The site's field look, at the Add button's height. 16px, or a phone zooms in. */
.fo-add select, .fo-add input {
  height: 42px; padding: 0 12px; border-radius: 10px; border: 2px solid var(--line);
  background: var(--felt-deep); color: var(--chalk); font: 16px var(--ff-body);
}
.fo-add input::placeholder { color: #56685c; }
.fo-add select:focus, .fo-add input:focus { border-color: var(--gold); outline: none; }
.fo-unnamed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--smoke); font-size: 14px; }
.fo-sum { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--panel); color: var(--smoke); font-size: 14px; }
.fo-sum--warn { color: var(--chalk); border: 2px solid var(--copper); }
@media (max-width: 520px) {
  .fo__row { grid-template-columns: 26px 34px minmax(0, 1fr) auto; column-gap: 8px; padding: 8px; }
  .fo__money { gap: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .fo.is-dragging .fo__row { transition: none; }
}

/* --- a player's games -------------------------------------------------------
   My Games' results rows, the record and the invite page: read-only,
   a night's places in a small table with their own row lit. */
.results-tbl .tbl { min-width: 0; }
/* One line a player, wherever it opens: under a row it inherits the row's wrapping. */
.results-tbl td { white-space: nowrap; }
.results-tbl__who { display: flex; align-items: center; gap: 10px; }
.results-tbl tr.is-me td { background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--chalk); font-weight: 700; }
.stat--up b { color: #3fbe7c; }
.stat--down b { color: var(--neon); }
.pl-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .pl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- the master admin's page ------------------------------------------------
   Counts in .stats tiles, the account list in .tbl with the guest list's
   filter chips, and one account at a time under it. */
.ad-find { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ad-find .field { flex: 1 1 240px; margin: 0; }
.ad-find .btn { height: 48px; }
#ad-one .kv { max-width: 640px; }
#ad-one .kv dd { overflow-wrap: anywhere; }

/* --- online tables (online.html, and the home page's #online) ---------------
   The table in the browser, as a picture that plays: a window, Sal behind the
   top rail, seven seats wearing faces from the deck, and a hand dealt by the
   page's script (the home page shows the same drawing, stopped at the all-in).
   Drawn to match the real table app (projects/table): the same rail, felt and
   brass, so the demo and the real thing read as one product. Everything on the
   felt is sized in container units, so the table scales as one drawing; under
   560px the box goes squarer and the faces and cards grow so a phone can read
   them. */
.ot-hero { padding-bottom: clamp(30px, 4vw, 52px); }
.ot-hero__copy { display: grid; justify-items: center; text-align: center; max-width: 860px; margin: 0 auto; }
.ot-hero__copy .lede { margin-inline: auto; }
.ot-hero__copy .hero__cta { justify-content: center; }

.otwin {
  position: relative; margin: clamp(30px, 4vw, 46px) auto 0; max-width: 1080px;
  border: var(--bd); border-radius: var(--r-lg);
  background: #070f0a; box-shadow: var(--sticker-lg); overflow: hidden;
}
.otwin__bar { border-radius: 0; }
.appwin__bar .otwin__url {
  margin-left: 10px; padding: 3px 14px; border-radius: 999px;
  background: var(--panel); border: 1.5px solid var(--line-soft); color: var(--smoke);
  letter-spacing: 0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ot-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-bottom: 2px solid var(--line-soft);
  background: linear-gradient(180deg, #0f2116, #0c1a12);
}
.ot-hud__lvl { display: grid; line-height: 1.2; font-family: var(--ff-mono); }
.ot-hud__lvl b { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.ot-hud__lvl span { font-size: 13.5px; font-weight: 700; color: var(--chalk); }
.ot-hud__clock { font-family: var(--ff-mono); font-weight: 700; font-size: clamp(20px, 2.4vw, 28px); line-height: 1; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.ot-hud__btns { display: flex; gap: 6px; }
.ot-hud__btns i { font-style: normal; font-family: var(--ff-display); font-weight: 700; font-size: 11px; padding: 7px 11px; border: 2px solid var(--line); border-radius: 10px; color: var(--chalk); background: var(--felt-2); }
.ot-hud__btns i.is-on { border-color: var(--gold); color: var(--gold); }

.otwin__main { display: grid; grid-template-columns: minmax(0, 1fr) 250px; }
.ot-stage {
  container: ot / inline-size; padding: 8px 14px 4px;
  background: radial-gradient(60% 75% at 50% 48%, #12271a, transparent 72%), #070f0a;
}

.ot-table {
  --face: 6.6cqw; --card: 5.2cqw; --hole: 3.2cqw; --sal: 14cqw;
  position: relative; aspect-ratio: 16 / 10;
  font-size: max(9px, 1.25cqw); line-height: 1.2;
}
@container ot (max-width: 560px) {
  .ot-table { --face: 10cqw; --card: 6.6cqw; --hole: 4.6cqw; --sal: 19cqw; aspect-ratio: 5 / 4; font-size: max(9px, 2.3cqw); }
}
/* The felt, the wooden rail round it, and a brass line inside the rail. */
.ot-felt {
  position: absolute; inset: 20% 8% 19%; z-index: 1; border-radius: 999px;
  background: radial-gradient(70% 70% at 50% 45%, #1d3f29, #13291c 62%, #0f2116);
  border: max(7px, 2.2cqw) solid #2a1910;
  box-shadow: 0 0 0 3px #050c07, inset 0 0 0 3px #050c07, inset 0 0 0 calc(3px + max(2px, 0.4cqw)) rgb(176 135 63 / 0.6), 0 max(4px, 1.1cqw) 0 3px #050c07;
}
.ot-felt::before { content: ""; position: absolute; inset: 10% 6%; border: 1.5px dashed rgb(79 209 139 / 0.16); border-radius: 999px; }
.ot-felt__brand {
  position: absolute; left: 0; right: 0; top: 13%; text-align: center;
  font-family: var(--ff-display); font-weight: 800; font-size: 1.9cqw; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgb(249 246 239 / 0.07);
}
/* Sal, behind the top rail: the rail covers his collar, like the real table. */
.ot-dealer { position: absolute; z-index: 0; left: 50%; top: 20%; width: var(--sal); height: var(--sal); translate: -50% -88%; overflow: visible; }
.ot-say {
  position: absolute; z-index: 6; left: calc(50% + var(--sal) * 0.55); top: 1%; max-width: 30cqw;
  padding: 0.6em 0.85em; background: var(--chalk); color: #10160f;
  border: 2px solid var(--outline); border-radius: 12px; box-shadow: 3px 3px 0 var(--outline);
  font-weight: 700; font-size: max(10.5px, 1.3cqw); line-height: 1.25;
  opacity: 0; transform: translateY(6px) scale(0.94); transform-origin: left center;
  transition: opacity 180ms ease-out, transform 180ms cubic-bezier(.2,1.5,.4,1); pointer-events: none;
}
.ot-say::after { content: ""; position: absolute; left: -11px; top: 10px; border: 6px solid transparent; border-right: 10px solid var(--outline); border-left: 0; }
.ot-say.is-on { opacity: 1; transform: none; }
@container ot (max-width: 560px) { .ot-say { max-width: 40cqw; } }

/* The middle: the pot over the five board slots. */
.ot-mid { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: max(4px, 0.9cqw); }
.ot-pot { font-family: var(--ff-mono); font-weight: 700; padding: 0.2em 0.85em; border-radius: 999px; background: rgb(5 12 7 / 0.6); color: var(--gold-hi); visibility: hidden; }
.ot-pot.is-on { visibility: visible; }
.ot-board { display: flex; gap: max(3px, 0.9cqw); }
.ot-slot { display: block; width: var(--card); aspect-ratio: 5 / 7; border-radius: max(3px, 0.5cqw); border: 1.5px dashed rgb(79 209 139 / 0.22); position: relative; }
.ot-slot > .ot-card { position: absolute; inset: -1.5px; width: auto; animation: ot-flip 380ms cubic-bezier(.2,1.3,.4,1); }
@keyframes ot-flip { from { transform: rotateY(90deg) scale(0.9); } to { transform: none; } }

/* A card. Four colours, as the real table deals them. */
.ot-card {
  position: relative; display: block; width: var(--card); aspect-ratio: 5 / 7; flex: none;
  border-radius: max(3px, 0.5cqw); border: max(1.5px, 0.2cqw) solid #050c07;
  background: #f9f6ef; box-shadow: 0 max(2px, 0.25cqw) 0 rgb(5 12 7 / 0.8);
  font-style: normal; color: #1d1410; overflow: hidden;
}
.ot-card b { position: absolute; left: 10%; top: 5%; font-family: var(--ff-display); font-weight: 800; font-size: calc(var(--w, var(--card)) * 0.4); line-height: 1; }
.ot-card span { position: absolute; right: 9%; bottom: 4%; font-size: calc(var(--w, var(--card)) * 0.56); line-height: 1; font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', system-ui, sans-serif; }
.ot-card[data-s="h"] { color: #d6283f; }
.ot-card[data-s="d"] { color: #2a6fd6; }
.ot-card[data-s="c"] { color: #1f8a4c; }
.ot-card--back { background: #17311f; }
.ot-card--back::before { content: ""; position: absolute; inset: 9%; border: max(1px, 0.15cqw) solid rgb(212 162 76 / 0.7); border-radius: max(2px, 0.3cqw); }
.ot-card--back::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; translate: -50% -50%; rotate: 45deg; background: var(--gold); }

/* A seat: the face, the ring that runs down on a turn, the plate under it, and
   two cards peeking out behind once they're dealt. */
.ot-seat { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: var(--face); height: var(--face); translate: -50% -50%; }
.ot-seat__face {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: 50%;
  background: #0c1a12; border: max(2px, 0.28cqw) solid var(--outline);
  box-shadow: 0 0 0 max(1.5px, 0.22cqw) #b0873f;
  transition: opacity 300ms, filter 300ms;
}
.ot-seat.is-you .ot-seat__face { box-shadow: 0 0 0 max(2px, 0.32cqw) var(--gold-hi), 0 0 max(8px, 1.4cqw) rgb(240 198 108 / 0.5); }
.ot-seat.is-folded .ot-seat__face { opacity: 0.45; filter: grayscale(0.6); }
.ot-seat.is-out .ot-seat__face { opacity: 0.3; filter: grayscale(1); }
.ot-seat__plate {
  position: absolute; z-index: 2; left: 50%; top: calc(100% - max(3px, 0.5cqw)); translate: -50% 0;
  display: grid; justify-items: center; min-width: calc(var(--face) * 1.55); padding: 0.22em 0.65em 0.28em;
  background: #0c1a12; border: max(1.5px, 0.2cqw) solid #050c07; border-radius: 0.6em;
  box-shadow: 0 max(2px, 0.3cqw) 0 #050c07; white-space: nowrap;
}
.ot-seat__plate b { color: var(--chalk); font-weight: 700; }
.ot-seat__plate em { font-style: normal; font-family: var(--ff-mono); font-weight: 700; font-size: 0.95em; color: var(--gold); }
.ot-seat__plate em.is-act { color: var(--chalk); }
.ot-seat__plate em.is-allin { color: var(--neon); text-shadow: 0 0 8px rgb(255 59 107 / 0.6); }
.ot-seat__plate em.is-out { color: var(--muted); }
.ot-seat__plate em.is-win { color: #4fd18b; }
.ot-hole { position: absolute; z-index: 0; left: 58%; top: -26%; display: flex; visibility: hidden; }
.ot-hole .ot-card { --w: var(--hole); width: var(--hole); }
.ot-hole .ot-card + .ot-card { margin-left: calc(var(--hole) * -0.55); rotate: 10deg; }
.ot-hole .ot-card:first-child { rotate: -6deg; }
.ot-seat.has-cards .ot-hole { visibility: visible; animation: ot-deal 360ms cubic-bezier(.2,1.2,.4,1) backwards; }
.ot-seat.is-folded .ot-hole { visibility: hidden; }
@keyframes ot-deal { from { transform: translateY(-6cqw) scale(0.4); opacity: 0; } }
/* A showdown: the hole cards turn over and come forward. */
.ot-seat.is-shown .ot-hole { z-index: 4; left: 50%; top: -88%; translate: -50% 0; }
.ot-seat.is-shown .ot-hole .ot-card { --w: var(--card); width: var(--card); }
.ot-seat.is-shown .ot-hole .ot-card + .ot-card { margin-left: calc(var(--card) * -0.25); }
/* max-width: none: the page's svg { max-width: 100% } held it to the seat's width, so the ring ran small
   and to the left of the face. */
.ot-ring { position: absolute; z-index: 2; inset: -16%; width: 132%; height: 132%; max-width: none; rotate: -90deg; opacity: 0; pointer-events: none; overflow: visible; }
.ot-ring circle { fill: none; stroke: var(--gold-hi); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 100; }
.ot-seat.is-turn .ot-ring { opacity: 1; }
.ot-seat.is-turn .ot-ring circle { animation: ot-ring var(--turn, 4s) linear forwards; }
.ot-seat.is-bank .ot-ring circle { stroke: var(--neon); filter: drop-shadow(0 0 4px var(--neon)); }
@keyframes ot-ring { to { stroke-dashoffset: -100; } }

/* Your two cards, face up in front of your seat, and what you're holding. */
.ot-mine { position: absolute; z-index: 4; left: 50%; top: 70%; translate: -50% -50%; display: flex; visibility: hidden; }
.ot-mine .ot-card { --w: calc(var(--card) * 1.1); width: calc(var(--card) * 1.1); }
.ot-mine .ot-card:first-child { rotate: -7deg; }
.ot-mine .ot-card + .ot-card { margin-left: calc(var(--card) * -0.3); rotate: 6deg; }
.ot-mine.is-on { visibility: visible; animation: ot-deal 380ms cubic-bezier(.2,1.2,.4,1) backwards; }
.ot-hand {
  position: absolute; z-index: 5; left: 50%; bottom: calc(100% + max(3px, 0.4cqw)); translate: -50% 0;
  padding: 0.15em 0.7em; border-radius: 999px; white-space: nowrap;
  background: var(--gold); color: var(--on-gold); border: max(1.5px, 0.2cqw) solid #050c07;
  font-weight: 800; font-size: 0.92em;
}
.ot-hand:empty { display: none; }

/* Chips in front of a seat, and the dealer button. */
.ot-bet {
  position: absolute; z-index: 2; left: var(--x); top: var(--y); translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 0.35em;
  font-family: var(--ff-mono); font-weight: 700; font-size: 0.95em; color: var(--chalk);
  padding: 0.12em 0.55em 0.12em 0.2em; border-radius: 999px; background: rgb(5 12 7 / 0.55);
  opacity: 0; transition: opacity 200ms;
}
.ot-bet::before { content: ""; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--gold); border: 2px solid #050c07; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.45); }
.ot-bet.is-on { opacity: 1; animation: ot-pop 220ms ease-out; }
.ot-dbtn {
  position: absolute; z-index: 2; left: var(--x); top: var(--y); translate: -50% -50%;
  width: max(15px, 2.4cqw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--chalk); border: 2px solid #050c07; box-shadow: 0 2px 0 #050c07;
  font-family: var(--ff-display); font-weight: 800; font-size: max(8px, 1.2cqw); color: #0b0f0d;
}
@keyframes ot-pop { from { transform: scale(0.6); opacity: 0; } }

/* SHIP IT, slammed on the winner. */
.ot-stamp {
  position: absolute; z-index: 7; left: var(--x, 50%); top: var(--y, 50%); translate: -50% -50%; rotate: -10deg;
  font-family: var(--ff-display); font-weight: 900; font-size: max(13px, 2.4cqw); letter-spacing: 0.04em; white-space: nowrap;
  color: var(--neon); border: max(2px, 0.32cqw) solid var(--neon); border-radius: 0.3em; padding: 0.1em 0.45em;
  background: rgb(7 15 10 / 0.8);
  text-shadow: 0 0 10px rgb(255 59 107 / 0.7); box-shadow: 0 0 16px rgb(255 59 107 / 0.45), inset 0 0 10px rgb(255 59 107 / 0.3);
  opacity: 0; pointer-events: none;
}
.ot-stamp.is-on { opacity: 1; animation: ot-slam 420ms cubic-bezier(.2,1.6,.4,1); }
@keyframes ot-slam { from { opacity: 0; scale: 2.2; } }

/* A reaction, floating up off the thrower's seat. */
.ot-float {
  position: absolute; z-index: 8; translate: -50% -50%; pointer-events: none;
  font-size: max(20px, 3.6cqw); line-height: 1;
  animation: ot-float 1900ms ease-out forwards;
}
@keyframes ot-float {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(-12deg); }
  14%  { opacity: 1; transform: translate(calc(var(--dx, 0px) * 0.3), -3cqw) scale(1.25) rotate(6deg); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -13cqw) scale(1) rotate(-4deg); }
}
.ot-float.is-still { animation: none; transform: translate(0, -5.5cqw) rotate(-10deg); }

/* The chat, with the dealer's log running through it, as on the real table. */
.ot-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; border-left: 2px solid var(--line-soft); background: #0a150e; }
.ot-chat__h { margin: 0; padding: 10px 14px; font-family: var(--ff-display); font-weight: 800; font-size: 13px; color: var(--chalk); border-bottom: 2px solid var(--line-soft); }
.ot-chat__log {
  list-style: none; margin: 0; padding: 10px 14px; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 7px;
  font-size: 13.5px; line-height: 1.35; color: var(--chalk);
}
.ot-chat__log li { animation: ot-pop 240ms ease-out; overflow-wrap: anywhere; flex: none; }
.ot-chat__log li b { font-weight: 800; margin-right: 0.4em; }
.ot-chat__log li.is-log { font-family: var(--ff-mono); font-size: 11.5px; color: var(--muted); }
.ot-chat__box { margin: 10px; padding: 9px 12px; border: 2px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--muted); }

/* The dock under the table: what's happening, your buttons on your turn, and
   the odds bar while an all-in runs out. A fixed height, so nothing above it
   moves when the buttons come and go (the real table's rule too). */
.ot-dock {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px;
  height: 66px; padding: 10px 16px; overflow: hidden;
  border-top: 2px solid var(--line-soft); background: linear-gradient(180deg, #0f2116, #0c1a12);
}
.ot-dock__msg { margin: 0; font-family: var(--ff-display); font-weight: 800; font-size: clamp(13px, 1.4vw, 16px); color: var(--chalk); text-align: center; }
.ot-dock__msg.is-bank { color: var(--neon); }
.ot-dock__turn { font-family: var(--ff-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-right: 4px; }
.ot-dock__btn {
  font-family: var(--ff-display); font-weight: 800; font-size: 13px; padding: 9px 16px;
  border: 2px solid var(--outline); border-radius: 10px; background: var(--panel-2); color: var(--chalk);
  box-shadow: 3px 3px 0 var(--outline); transition: transform 90ms ease-out, box-shadow 90ms ease-out, background 120ms;
}
.ot-dock__btn.is-go { background: var(--gold); color: var(--on-gold); }
.ot-dock__btn.is-press { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--outline); background: var(--gold-hi); color: var(--on-gold); }
.ot-odds { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: min(100%, 560px); font-family: var(--ff-mono); font-weight: 800; font-size: 13.5px; }
.ot-odds__you { color: var(--gold-hi); }
.ot-odds__them { color: var(--neon); }
.ot-odds__track { height: 16px; border-radius: 999px; border: 2px solid var(--outline); background: var(--neon); overflow: hidden; }
.ot-odds__track i { display: block; height: 100%; width: var(--you, 50%); background: var(--gold); border-right: 2px solid var(--outline); transition: width 900ms cubic-bezier(.2,.8,.2,1); }

/* Under the window: throw something, then what you were looking at. */
.ot-throw { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 20px; }
.ot-throw__k { font-family: var(--ff-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.ot-throw__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.ot-throw__btns button {
  width: 46px; height: 46px; display: grid; place-items: center; padding: 0;
  font-size: 22px; line-height: 1; cursor: pointer;
  border: 2px solid var(--outline); border-radius: 12px; background: var(--panel-2); box-shadow: 3px 3px 0 var(--outline);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background 120ms;
}
.ot-throw__btns button:hover { background: var(--line); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--outline); }
.ot-throw__btns button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--outline); }
.ot-throw__note { flex-basis: 100%; text-align: center; margin: 0; font-family: var(--ff-mono); font-size: 11.5px; color: var(--muted); }
.ot-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 26px; margin-top: clamp(34px, 4.5vw, 54px); }
.ot-legend__i { display: grid; gap: 6px; align-content: start; padding-top: 14px; border-top: 3px solid var(--gold); }
.ot-legend__i b { color: var(--chalk); font-weight: 800; font-size: 17px; line-height: 1.25; }
.ot-legend__i p { margin: 0; color: var(--smoke); font-size: 15px; }

/* How it works: the trio's cards, three steps, not links. */
.pillar--flat:hover { transform: none; box-shadow: var(--sticker); border-color: var(--outline); }
.pillar--flat:hover .pillar__no { color: var(--brass); }
.pillar__p { margin: 0; color: var(--smoke); font-size: 15px; }
.mini-pick, .mini-open { width: min(88%, 250px); display: grid; gap: 8px; font-size: 13px; color: var(--smoke); }
.mini-pick__btns { display: grid; gap: 6px; }
.mini-pick__btns i { font-style: normal; font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 10px; border: 2px solid var(--line); color: var(--chalk); }
.mini-pick__btns i.is-on { background: var(--gold); border-color: var(--outline); color: var(--on-gold); box-shadow: var(--sticker-sm); }
.mini-open { justify-items: center; text-align: center; }
.mini-open__btn { font-family: var(--ff-display); font-weight: 800; font-size: 15px; padding: 10px 18px; border: 2px solid var(--outline); border-radius: 10px; background: var(--neon); color: #14060a; box-shadow: var(--sticker-sm); }
.mini-open .faces .av { width: 28px; height: 28px; }

/* Tournament or cash: two cards, a stamp on each. */
.ot-formats__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px; margin-bottom: 40px; }
.ot-formats__head .head { margin-bottom: 0; }
.ot-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ot-format {
  position: relative; display: grid; gap: 14px; align-content: start; padding: 26px 26px 28px;
  border: var(--bd); border-radius: var(--r-lg); box-shadow: var(--sticker);
  background: linear-gradient(180deg, var(--panel-2), var(--felt-2));
}
.ot-format__tag { font-family: var(--ff-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.ot-format h3 { margin: 0; max-width: 17ch; font-family: var(--ff-display); font-weight: 800; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.15; letter-spacing: -0.02em; color: var(--chalk); }
.ot-format > p { margin: 0; color: var(--smoke); }
.ot-format__stamp {
  position: absolute; top: 20px; right: 18px; rotate: 7deg;
  font-family: var(--ff-display); font-weight: 900; font-size: 12.5px; letter-spacing: 0.06em; white-space: nowrap;
  padding: 4px 10px; border: 3px solid var(--neon); border-radius: 8px; color: var(--neon);
  text-shadow: 0 0 8px rgb(255 59 107 / 0.6); box-shadow: 0 0 12px rgb(255 59 107 / 0.35), inset 0 0 8px rgb(255 59 107 / 0.25);
}
.ot-format--cash .ot-format__stamp { color: var(--gold-hi); border-color: var(--gold); text-shadow: 0 0 8px rgb(212 162 76 / 0.6); box-shadow: 0 0 12px rgb(212 162 76 / 0.35), inset 0 0 8px rgb(212 162 76 / 0.25); }
.pts--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .pts--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ot-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .otwin__main { grid-template-columns: minmax(0, 1fr); }
  .ot-chat { border-left: 0; border-top: 2px solid var(--line-soft); height: 150px; }
  .ot-chat__h, .ot-chat__box { display: none; }
  .ot-hud__btns i:not(.is-on) { display: none; }
}
@media (max-width: 760px) {
  .ot-formats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .pts--wide, .ot-legend { grid-template-columns: minmax(0, 1fr); }
  .ot-hud { padding: 8px 12px; }
  .ot-hud__btns { display: none; }
  .ot-dock { height: 84px; padding: 8px 10px; }
  .ot-dock__btn { padding: 8px 12px; font-size: 12px; }
  .ot-dock__turn { flex-basis: 100%; text-align: center; margin: 0; }
  .ot-format__stamp { position: static; justify-self: start; rotate: -3deg; }
}

/* The home page: the wide fourth card under the trio, and the online section's
   still picture (the table stopped at the all-in, no chat panel). */
.pillar--wide { grid-column: 1 / -1; position: relative; margin-top: 20px; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 28px; align-items: center; }
.pillar--wide .pillar__art { grid-column: 1; grid-row: 1 / span 4; height: 100%; min-height: 200px; margin: 0; }
.pillar--wide > :not(.pillar__art) { grid-column: 2; }
.pillar--wide .pillar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
.pillar__new {
  position: absolute; top: -14px; right: 22px; rotate: 4deg;
  padding: 5px 12px; border: var(--bd); border-radius: 10px; box-shadow: var(--sticker-sm);
  background: var(--neon); color: #14060a; font-family: var(--ff-display); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .trio .pillar--wide { grid-row: auto; grid-template-rows: none; row-gap: 12px; }
  }
}
@media (max-width: 900px) {
  .pillar--wide .pillar__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .pillar--wide { grid-template-columns: minmax(0, 1fr); }
  .pillar--wide .pillar__art { grid-column: auto; grid-row: auto; min-height: 176px; height: 176px; margin-bottom: 6px; }
  .pillar--wide > :not(.pillar__art) { grid-column: auto; }
}
.mini-online { width: min(84%, 280px); display: grid; justify-items: center; gap: 6px; }
/* Sal's head stands above the table: room for it inside the 176px art box. */
@media (max-width: 599px) { .mini-online { width: min(70%, 280px); padding-top: 20px; } }
.mini-table { position: relative; width: 100%; aspect-ratio: 2 / 1.15; }
.mini-table__felt {
  position: absolute; inset: 16% 7%; border-radius: 999px;
  background: radial-gradient(70% 70% at 50% 45%, #1d3f29, #13291c 62%);
  border: 6px solid #2a1910; box-shadow: 0 0 0 2px #050c07, inset 0 0 0 2px #050c07, inset 0 0 0 4px rgb(176 135 63 / 0.6);
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.mini-table__felt .ot-card { --card: 21px; }
.mini-table .av { position: absolute; width: 30px; height: 30px; translate: -50% -50%; box-shadow: 0 0 0 2px #b0873f; }
.mini-table .av.is-turn { box-shadow: 0 0 0 2px #050c07, 0 0 0 4px var(--neon); }
/* Before the felt in the markup, so the rail paints over his collar. */
.mini-table__sal { position: absolute; left: 50%; top: 16%; width: 50px; height: 50px; translate: -50% -86%; overflow: visible; }
.mini-table__say {
  white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; background: var(--neon); color: #14060a; border: 2px solid #050c07;
  font-family: var(--ff-mono); font-weight: 700; font-size: 10.5px;
}
.otwin--still { max-width: 470px; margin: 0; }
.otwin--still .otwin__main { grid-template-columns: minmax(0, 1fr); }
.otwin--still .ot-hud__btns { display: none; }
.otwin--still .ot-dock { height: auto; min-height: 58px; }
@media (min-width: 901px) {
  #online .feat__main { align-self: center; }
}
.ot-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }

/* The home hero's announcement: one line, the new thing, a link. */
.newpill {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 5px 14px 5px 5px; margin-bottom: 14px; border: 2px solid var(--line); border-radius: 999px;
  background: rgb(7 15 10 / 0.6); color: var(--chalk); text-decoration: none; font-size: 14px; font-weight: 600;
  transition: border-color 160ms, background 160ms;
}
.newpill b { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--neon); color: #14060a; font-family: var(--ff-display); font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.newpill span { min-width: 0; }
.newpill i { font-style: normal; color: var(--gold); }
.newpill:hover { border-color: var(--gold); background: var(--panel); color: var(--chalk); }
/* On a laptop the hero is already tight for the demo clock (see the
   height-gated block above): the pill takes as little of it as it can. */
@media (min-width: 981px) and (max-height: 1100px) {
  .newpill { margin-bottom: 6px; padding-block: 3px; font-size: 13px; }
}
@media (max-width: 520px) {
  .newpill { font-size: 13px; }
}