@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Space+Mono:wght@400;700&family=Archivo:wght@400;500;600;700;800&display=swap');

/* =====================================================================
   ROBIN RACING — THE TOTE BOARD

   Grounded in one real object: the mechanical totalisator board that
   hangs over a racecourse, showing the odds and the dividend in big
   split-flap numerals. Every card on this site is a physical panel
   bolted to that board — cream flap faces, tabular mono digits, an
   amber lamp for anything you can press. One deliberate visual world,
   lit from above; no light theme.
   ===================================================================== */

:root{
  --bg:#15130f;         /* the wall the board hangs on */
  --card:#221e18;       /* a tile's casing */
  --border:#2c271f;     /* a tile's lip / seam */
  --chalk:#ece3d0;      /* the cream flap face */
  --dim:#9a8f7c;
  --brass:#ff9a2e;      /* the indicator lamp — action, heat, "press me" */
  --red:#e14f45;        /* the correction chalk — alert, withdrawn */
  --green:#3ecf7a;      /* the phosphor digit — paid, positive */
  --display:'Fjalla One', 'Arial Narrow', sans-serif;
  --body:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'Space Mono', 'Courier New', monospace;
  --r:7px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--chalk);font-family:var(--body);font-size:1.1875rem;
  line-height:1.5;min-height:100vh;overflow-x:hidden;
  padding-bottom:calc(32px + env(safe-area-inset-bottom))}
body{
  background-image:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(255,154,46,.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0px, rgba(0,0,0,.1) 1px, transparent 1px, transparent 3px);
  background-attachment:fixed;
}

/* ── layout ── */
.page{max-width:480px;margin:0 auto;padding:0 16px}

/* every physical tile shares a seam line and a top-lit sheen — the
   two things that make a flat card read as a bolted-on board panel */
.action,.crew,.lb,.card,.how-it-works,.tabs,.top{position:relative}
.action::after,.crew::after,.lb::after,.card::after,.how-it-works::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%);
}

/* ── the pot strip — always top ── */
.pot-strip{
  padding:calc(env(safe-area-inset-top) + 14px) 0 14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--border);margin-bottom:20px;
}
.pot-strip .brand{font-family:var(--display);font-size:1.375rem;
  letter-spacing:.06em;text-transform:uppercase;line-height:1;
  text-shadow:0 0 14px rgba(255,154,46,.3)}
.pot-strip .brand em{color:var(--brass);font-style:normal}
.pot-fig{text-align:right}
.pot-fig .amount{font-family:var(--mono);font-weight:700;font-size:2.25rem;
  line-height:.95;color:var(--brass);font-variant-numeric:tabular-nums;
  text-shadow:0 0 12px rgba(255,154,46,.35)}
.pot-fig .label{font-family:var(--display);font-size:0.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-top:3px}
.pot-fig.roll .amount{color:var(--red);text-shadow:none}
.pot-fig.roll .label{color:var(--red)}

/* ── section label ── */
.sec{font-family:var(--mono);font-size:0.6875rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin:26px 0 10px}

/* ── action zone — the big centre thing ── */
.action{border:1px solid var(--border);border-radius:var(--r);
  background:var(--card);overflow:hidden;margin-bottom:10px;
  box-shadow:0 10px 18px rgba(0,0,0,.3)}

/* between races — countdown card */
.next-race{padding:22px 20px}
.nr-label{font-family:var(--mono);font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px}
.nr-race{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.nr-time{font-family:var(--mono);font-weight:700;font-size:2.875rem;line-height:.9;
  color:var(--chalk);font-variant-numeric:tabular-nums}
.nr-course{font-family:var(--display);font-size:1.6875rem;
  line-height:.9;text-transform:uppercase;letter-spacing:.02em;color:var(--chalk)}
.nr-name{font-size:0.9375rem;color:var(--dim);margin-bottom:14px}
.countdown-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;
  border-radius:99px;background:var(--bg);border:1px solid var(--border);
  font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim)}
.countdown-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.countdown-pill.soon{background:rgba(225,79,69,.15);border-color:var(--red);color:var(--red)}

/* live race header */
.race-header{padding:20px 20px 0}
.race-header .nr-race{margin-bottom:4px}
.race-meta{font-size:0.9375rem;color:var(--dim);padding:0 20px 6px}
.race-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;
  background:var(--bg);border:1px solid var(--border);font-family:var(--mono);
  font-size:0.75rem;font-weight:700;letter-spacing:.04em;color:var(--dim);margin-bottom:16px}
.race-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.race-pill.live{background:rgba(255,154,46,.14);border-color:var(--brass);color:var(--brass)}
@media (prefers-reduced-motion: no-preference){
  .race-pill.live::before{animation:pulse 1.8s ease-in-out infinite}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* the BIG button — an amber indicator lamp, obviously a switch you press */
.hero-btn{
  display:block;width:100%;padding:21px 20px;text-align:left;
  background:linear-gradient(180deg, #ffb257, var(--brass));color:#1a0e00;
  font-family:var(--display);font-size:1.6875rem;
  letter-spacing:.03em;text-transform:uppercase;line-height:1.05;
  border:0;border-bottom:4px solid #a35f13;cursor:pointer;
  box-shadow:0 0 20px rgba(255,154,46,.25), 0 8px 14px rgba(0,0,0,.3);
}
.hero-btn:active{filter:brightness(.95)}
.hero-btn .lbl{font-family:var(--mono);font-size:0.78125rem;letter-spacing:.08em;
  font-weight:700;text-transform:uppercase;margin-bottom:5px;opacity:.75}
.hero-btn .sub{font-size:0.9375rem;font-family:var(--body);font-weight:500;
  margin-top:6px;opacity:.85;text-transform:none;letter-spacing:0}
/* the claim button — the one tap in this game somebody actually wants
   to make, but it must never read as a status that's already true.
   A pulsing lamp glow says "this is live, press me" rather than "done". */
.claim-btn{border-bottom-color:#1f6b3f}
@media (prefers-reduced-motion: no-preference){
  .claim-btn{animation:claimPulse 1.8s ease-out infinite}
}
@keyframes claimPulse{
  0%{box-shadow:0 0 20px rgba(255,154,46,.25), 0 0 0 0 rgba(62,207,122,.5), 0 8px 14px rgba(0,0,0,.3)}
  70%{box-shadow:0 0 20px rgba(255,154,46,.25), 0 0 0 16px rgba(62,207,122,0), 0 8px 14px rgba(0,0,0,.3)}
  100%{box-shadow:0 0 20px rgba(255,154,46,.25), 0 0 0 0 rgba(62,207,122,0), 0 8px 14px rgba(0,0,0,.3)}
}
.hero-btn.red{background:var(--red);color:#fff;border-bottom-color:#7a2a24}
.hero-btn.dim{background:var(--card);color:var(--chalk);border:1px solid var(--border);border-bottom:1px solid var(--border)}

/* dead-time nudge toward the mini-game — a real button with Gaz's
   face on it, not a line of text, so it reads as a thing to press
   rather than a footnote */
.gaz-btn{display:flex;align-items:center;gap:14px;width:100%;margin-top:10px;
  padding:12px 16px;text-align:left;text-decoration:none;
  background:var(--card);border:1px solid var(--brass);border-radius:var(--r)}
.gaz-btn:active{background:rgba(255,154,46,.1)}
.gaz-btn img{width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:2px solid var(--brass);flex-shrink:0}
.gaz-btn-text{flex:1;min-width:0}
.gaz-btn-title{font-family:var(--display);font-size:1.0625rem;letter-spacing:.02em;
  color:var(--brass);text-transform:uppercase}
.gaz-btn-sub{font-size:0.8125rem;color:var(--dim);margin-top:2px}
.gaz-btn-arrow{font-family:var(--mono);color:var(--brass);font-size:1.125rem;flex-shrink:0}

/* your horse display (not a button — just showing) */
.your-horse{display:flex;align-items:center;gap:16px;padding:20px}

/* the reveal — a beat of suspense the first time you see a draw, then
   the real card. The suspense text is hidden by default (for anyone
   without JS, or once already revealed) — only shown while .revealing
   is toggled on for that brief window. */
.reveal .reveal-suspense{display:none}
.reveal.revealing{padding:26px 20px;justify-content:center}
.reveal.revealing .reveal-suspense{
  display:block;font-family:var(--display);font-size:1.375rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--brass);text-align:center}
.reveal.revealing .saddle,.reveal.revealing .yh-text{display:none}
@media (prefers-reduced-motion: no-preference){
  .reveal.revealing .reveal-suspense{animation:suspensePulse .9s ease-in-out}
  .reveal.revealed{animation:revealPop .35s cubic-bezier(.2,.8,.3,1.15) both}
}
@keyframes suspensePulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes revealPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.yh-text .lbl{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass);margin-bottom:4px}
.yh-text .horse{font-family:var(--display);font-size:1.9375rem;
  line-height:1;text-transform:uppercase;word-break:break-word}
.yh-text .sub{font-size:0.9375rem;color:var(--dim);margin-top:4px}

/* result card */
.result-card{padding:22px 20px}
.result-card .res-lbl{font-family:var(--mono);font-size:0.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.result-card .winner-name{font-family:var(--display);font-size:2.375rem;
  line-height:.95;text-transform:uppercase;word-break:break-word;margin-bottom:4px}
.result-card .winner-sub{font-size:1rem;color:var(--dim);margin-bottom:16px}
.result-card .payout{font-family:var(--mono);font-weight:700;font-size:2.875rem;
  color:var(--brass);line-height:1;font-variant-numeric:tabular-nums}
.result-card .payout-sub{font-size:0.9375rem;color:var(--dim);margin-top:4px}
.rollover-card{padding:22px 20px;text-align:center}
.rollover-card .rl-num{font-family:var(--display);font-size:2.875rem;
  color:var(--red);line-height:.95;text-transform:uppercase}
.rollover-card .rl-label{font-size:1rem;color:var(--dim);margin-top:8px}

/* the "what just happened" banner — smaller than a full result screen,
   since it now sits above whatever's happening now rather than
   replacing it */
.last-result{margin-bottom:14px}
.result-card.compact{padding:16px 18px}
.result-card.compact .winner-name{font-size:1.6875rem;margin-bottom:2px}
.result-card.compact .payout{font-size:1.875rem}
.result-card.compact .winner-sub,.result-card.compact .payout-sub{margin-bottom:0;font-size:0.875rem}
.rollover-card.compact{padding:16px 18px}
.rollover-card.compact .rl-num{font-size:1.75rem;display:inline}
.rollover-card.compact .rl-label{font-size:0.875rem;margin-top:2px}

/* claim in progress */
.claim-bar{padding:16px 20px;background:rgba(255,154,46,.1);
  border-top:1px solid var(--border);display:flex;align-items:center;gap:12px}
.claim-bar .who{flex:1;font-size:1rem;font-weight:600}
.claim-bar .timer{font-family:var(--mono);font-weight:700;font-size:1.875rem;
  color:var(--brass);min-width:42px;text-align:right;line-height:1;font-variant-numeric:tabular-nums}

/* secondary buttons — a real button, not a thin link. Easy to read
   and easy to hit, since the same finger will find every button here
   whether it's a big decision or a small one. */
.sec-btn{display:block;width:100%;padding:17px 20px;text-align:center;
  background:transparent;color:var(--chalk);border:0;border-top:1px dashed var(--border);
  font-family:var(--body);font-size:0.9375rem;font-weight:600;cursor:pointer;line-height:1.35}
.sec-btn:active{background:rgba(255,255,255,.04)}
.confirm-btn.confirming{color:var(--red);font-weight:700;background:rgba(225,79,69,.1)}

/* roll-it-over — the one action people most often need and most
   easily miss. Full-width, high contrast, unmissable. */
.roll-btn{display:block;width:100%;padding:19px;text-align:center;
  background:var(--card);color:var(--chalk);border:2px solid var(--brass);
  border-radius:var(--r);font-family:var(--display);
  font-size:1.25rem;letter-spacing:.03em;text-transform:uppercase;
  cursor:pointer;margin-top:10px}
.roll-btn:active{background:rgba(255,154,46,.1)}

/* delayed flag — a rare, low-stakes correction (getting it wrong just
   means a longer wait, not a wrong payout), so it stays visually
   quiet next to the roll-over button rather than competing with it */
.delay-btn{display:block;width:100%;padding:14px;text-align:center;
  background:transparent;color:var(--dim);border:1px dashed var(--border);
  border-radius:var(--r);font-family:var(--body);font-size:0.875rem;font-weight:600;
  cursor:pointer;margin-top:8px}
.delay-btn:active{border-color:var(--brass);color:var(--brass)}

/* ── name screen ── */
.name-screen{padding:32px 0 8px;text-align:center}
.ns-hero{font-family:var(--display);font-size:3.375rem;line-height:.9;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;
  text-shadow:0 0 18px rgba(255,154,46,.3)}
.ns-hero em{color:var(--brass);font-style:normal;display:block}
.ns-sub{font-family:var(--mono);font-size:0.8125rem;letter-spacing:.06em;color:var(--dim);margin-bottom:28px}
.ns-input{
  width:100%;padding:17px;font-size:1.1875rem;font-family:var(--display);letter-spacing:.02em;
  text-transform:uppercase;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r);color:var(--chalk);margin-bottom:10px;
}
.ns-input:focus{outline:none;border-color:var(--brass)}
.ns-input::placeholder{color:var(--dim);text-transform:none;font-family:var(--body)}
.ns-go{width:100%;padding:19px;font-family:var(--display);
  font-size:1.4375rem;letter-spacing:.04em;text-transform:uppercase;
  background:linear-gradient(180deg, #ffb257, var(--brass));color:#1a0e00;
  border:0;border-bottom:4px solid #a35f13;border-radius:var(--r);cursor:pointer;
  box-shadow:0 0 20px rgba(255,154,46,.25)}
.ns-go:active{filter:brightness(.95)}
.ns-or{font-family:var(--mono);font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  text-align:center;margin:20px 0 14px}
.known-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.known-names button{
  padding:16px 8px;font-family:var(--display);font-size:1.375rem;
  letter-spacing:.03em;text-transform:uppercase;line-height:1;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  color:var(--chalk);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.known-names button:active{border-color:var(--brass);color:var(--brass)}

/* ── who's in list ── */
.crew{border:1px solid var(--border);border-radius:var(--r);background:var(--card);
  overflow:hidden;box-shadow:0 10px 18px rgba(0,0,0,.3)}
.crew-row{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--border)}
.crew-row:last-child{border-bottom:0}
.crew-row .saddle{flex:0 0 auto}
.crew-info{flex:1;min-width:0}
.crew-name{font-family:var(--display);font-size:1.0625rem;letter-spacing:.02em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crew-horse{font-size:0.9375rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crew-row.me .crew-name{color:var(--brass)}
.crew-row.won .crew-name::after{content:' ✓';color:var(--brass)}
.crew-row.out .crew-name,.crew-row.out .crew-horse{opacity:.4;text-decoration:line-through}
.spare-row,.nr-row{padding:13px 16px;border-top:1px solid var(--border);
  font-size:0.875rem;color:var(--dim)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{background:var(--bg);border:1px solid var(--border);border-radius:6px;
  padding:7px 12px;font-size:0.875rem;font-family:var(--mono)}
.chip strong{color:var(--brass);font-variant-numeric:tabular-nums;margin-right:3px}
.chip.nr{opacity:.45;text-decoration:line-through}

/* ── leaderboard ── */
.lb{border:1px solid var(--border);border-radius:var(--r);background:var(--card);
  overflow:hidden;box-shadow:0 10px 18px rgba(0,0,0,.3)}
.lb-row{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--border)}
.lb-row:last-child{border-bottom:0}
.lb-pos{font-family:var(--mono);font-weight:700;font-size:1.25rem;color:var(--dim);
  width:22px;flex:0 0 auto;text-align:right;line-height:1;font-variant-numeric:tabular-nums}
.lb-pos.top{color:var(--brass)}
.lb-info{flex:1;min-width:0}
.lb-name{font-family:var(--display);font-size:1.0625rem;letter-spacing:.02em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-detail{font-size:0.875rem;color:var(--dim)}
.lb-net{font-family:var(--mono);font-weight:700;font-size:1.375rem;line-height:1;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.lb-net.up{color:var(--green)}
.lb-net.dn{color:var(--dim)}
.lb-row.me .lb-name{color:var(--brass)}
.lb-empty{padding:24px;text-align:center;color:var(--dim);font-size:0.9375rem}
.lb-tabs{display:flex;border-bottom:1px solid var(--border)}
.lb-tab{flex:1;padding:14px;text-align:center;font-family:var(--display);font-size:0.875rem;
  letter-spacing:.03em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;border-bottom:2px solid transparent}
.lb-tab.on{color:var(--brass);border-bottom-color:var(--brass)}

/* ── how it works — up near the top, deliberately loud, so it never
   just blends into the background like another muted row ── */
.how-it-works{border:2px solid var(--brass);border-radius:var(--r);
  background:rgba(255,154,46,.08);overflow:hidden;margin-bottom:14px}
.how-it-works summary{font-family:var(--display);font-weight:400;color:var(--brass);font-size:1rem;
  letter-spacing:.02em;text-transform:uppercase;border-top:0;padding:16px}
.how-it-works[open] summary{border-bottom:2px solid var(--brass)}
.help-list{padding:4px 18px 18px 34px;counter-reset:step}
.help-list li{font-size:0.9375rem;line-height:1.55;color:var(--chalk);margin-bottom:12px;
  list-style:none;position:relative}
.help-list li::before{
  counter-increment:step;content:counter(step);position:absolute;left:-30px;top:1px;
  font-family:var(--mono);font-weight:700;font-size:0.75rem;color:var(--bg);
  background:var(--brass);width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.help-list li:last-child{margin-bottom:0}

/* ── notice banners ── */
.notice{padding:16px 18px;border-radius:var(--r);border:1px solid var(--border);
  font-size:0.9375rem;line-height:1.5;margin-bottom:10px}
.notice.warn{background:rgba(255,154,46,.1);border-color:var(--brass)}
.notice.bad{background:rgba(225,79,69,.12);border-color:var(--red);color:#f5b3ae}

/* ── shared pages — board / check / sign ──
   index.php styles its own zones directly; these are the plainer
   pages (standings, diagnostics, the printable sign) that share the
   same look via generic classes instead. */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:480px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 14px) 16px 14px;
  border-bottom:1px solid var(--border)}
.top .house a{font-size:0.875rem;font-weight:600}
.brand{font-family:var(--display);font-size:1.375rem;
  letter-spacing:.06em;text-transform:uppercase;line-height:1;
  text-shadow:0 0 14px rgba(255,154,46,.3)}
.brand span{color:var(--brass)}
.wrap{max-width:480px;margin:0 auto;
  padding:20px 16px calc(32px + env(safe-area-inset-bottom))}

.tabs{display:flex;border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;margin-bottom:16px}
.tabs a{flex:1;padding:14px;text-align:center;font-family:var(--display);font-size:0.875rem;
  letter-spacing:.03em;text-transform:uppercase;color:var(--dim);background:var(--card)}
.tabs a.on{color:var(--brass);background:rgba(255,154,46,.1)}

.card{border:1px solid var(--border);border-radius:var(--r);
  background:var(--card);padding:16px;margin-bottom:14px;box-shadow:0 10px 18px rgba(0,0,0,.3)}
.card.sign{padding:36px 24px}
.empty{padding:24px;text-align:center;color:var(--dim);font-size:0.9375rem}
.eyebrow{font-family:var(--mono);font-size:0.6875rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin:22px 0 10px}
.racemeta{font-size:0.875rem;color:var(--dim)}

.line{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--border)}
.line:last-child{border-bottom:0}
.line.won .line-a{color:var(--brass)}
.rank{font-family:var(--mono);font-weight:700;font-size:1.25rem;color:var(--dim);
  width:24px;flex:0 0 auto;text-align:right;line-height:1;font-variant-numeric:tabular-nums}
.line-main{flex:1;min-width:0}
.line-a{font-family:var(--display);font-size:1.0625rem;letter-spacing:.02em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-b{font-size:0.875rem;color:var(--dim)}
.fig{font-family:var(--mono);font-weight:700;font-size:1.375rem;line-height:1;flex:0 0 auto;
  font-variant-numeric:tabular-nums}

.strip{display:flex;flex-wrap:wrap;gap:10px;font-size:0.875rem;color:var(--dim);font-family:var(--mono)}
.strip strong{color:var(--chalk)}

.note{padding:14px 16px;border-radius:var(--r);border:1px solid var(--border);font-size:0.9375rem;line-height:1.5}
.note.bad{background:rgba(225,79,69,.12);border-color:var(--red);color:#f5b3ae}

.row-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.btn{display:inline-block;padding:12px 18px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--border);color:var(--chalk);font-family:var(--display);font-size:0.875rem;
  letter-spacing:.02em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn:active{border-color:var(--brass);color:var(--brass)}
.row-btns button:not(.btn){font-family:var(--display);letter-spacing:.02em;text-transform:uppercase;
  padding:12px 18px;border-radius:var(--r);background:var(--brass);color:#1a0e00;border:0;
  font-size:0.875rem;cursor:pointer}

.big{width:100%;padding:16px;font-family:var(--display);font-size:1rem;letter-spacing:.02em;
  text-transform:uppercase;background:linear-gradient(180deg, #ffb257, var(--brass));color:#1a0e00;
  border:0;border-bottom:4px solid #a35f13;border-radius:var(--r);cursor:pointer}

table{width:100%;border-collapse:collapse;font-size:0.875rem;font-family:var(--mono)}
th{text-align:left;color:var(--dim);font-weight:700;padding:8px 10px;
  border-bottom:1px solid var(--border);white-space:nowrap;text-transform:uppercase;font-size:0.6875rem;
  letter-spacing:.06em}
td{padding:8px 10px;border-bottom:1px solid var(--border)}
tr:last-child td{border-bottom:0}
.n{text-align:right}

label{display:block;font-family:var(--mono);font-size:0.8125rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--dim);margin-bottom:6px}
input[type=text],input[type=password]{
  width:100%;padding:14px;font-size:1rem;font-family:var(--body);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r);color:var(--chalk)}
input:focus{outline:none;border-color:var(--brass)}

/* ── saddle cloths — the deterministic silks stay exactly as they
   are; just seated in a die-stamped plate bezel to match the board ── */
.saddle{border-radius:6px;display:block;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.4)}

/* ── misc ── */
.tiny{font-size:0.8125rem;color:var(--dim);line-height:1.55}
a{color:var(--brass);text-decoration:none}
details summary{cursor:pointer;font-family:var(--body);font-size:0.9375rem;color:var(--dim);
  padding:8px 0;list-style:none;padding:14px 16px;border-top:1px solid var(--border)}
details summary::-webkit-details-marker{display:none}
details[open] summary{border-bottom:1px solid var(--border)}

/* ── non-runner picker — big numbers first, no native confirm().
   The wave-off window is the safety net, not a popup. ── */
.nr-flag summary{color:var(--red);font-family:var(--display);font-size:0.9375rem;
  letter-spacing:.02em;text-transform:uppercase}
.nr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  gap:10px;padding:4px 16px 18px}
.nr-pick{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 6px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  color:var(--dim);font-size:0.8125rem;
  text-align:center;line-height:1.25;cursor:pointer}
.nr-pick:active{border-color:var(--red);color:var(--red)}

/* ── a felt press on every tap — a quick, unmistakable scale-down,
   the same on every phone regardless of whether it can vibrate ── */
@media (prefers-reduced-motion: no-preference){
  .hero-btn,.roll-btn,.delay-btn,.sec-btn,.ns-go,.known-names button,
  .nr-pick,.btn,.big,.lb-tab,.tabs a,.row-btns button,
  button[name=sitin],button[name=sitout],button[name=notme]{
    transition:transform .08s ease;
  }
  .hero-btn:active,.roll-btn:active,.delay-btn:active,.sec-btn:active,
  .ns-go:active,.known-names button:active,.nr-pick:active,.btn:active,
  .big:active,.lb-tab:active,.tabs a:active,.row-btns button:active,
  button[name=sitin]:active,button[name=sitout]:active,button[name=notme]:active{
    transform:scale(.96);
  }
}

/* ── entrance — the room's tiles settle into place once when a page
   loads (including the auto-reload when something changes), rather
   than just appearing. Plays once per load, never loops. ── */
@media (prefers-reduced-motion: no-preference){
  .action,.crew,.lb,.card,.how-it-works{animation:settleIn .35s cubic-bezier(.2,.7,.3,1) both}
}
@keyframes settleIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

@media print{
  body{background:#fff;color:#000}
  .noprint{display:none!important}
}