/* Safari Bet Book — the Clubhouse Ledger.
   A scorer's desk book, not a fintech dashboard: ruled lines, gilt double-rules,
   engraved numerals, red ink only for what's owed. Ink, champagne gold, tabular numerals. */

:root {
  --ink: #0a0a0a;
  --ink-2: #111111;
  --ink-3: #1a1a1a;
  --rule: rgba(214, 200, 160, 0.14);
  --rule-strong: rgba(214, 200, 160, 0.32);
  --text: #eee9dc;
  --mist: rgba(238, 233, 220, 0.52);
  --gold: #c9a84c;
  --gold-hi: #e2c97e;
  --gold-lo: #a08535;
  --red: #a8392c;
  --red-hi: #c65640;
  --display: "Marcellus", Georgia, serif;
  --ui: "Manrope", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { margin: 0; box-sizing: border-box; }
html { height: 100%; }

body {
  position: relative;
  min-height: 100%;
  background:
    radial-gradient(ellipse 60% 40% at 50% -8%, rgba(201, 168, 76, 0.06), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(0, 0, 0, 0.7), transparent 65%),
    var(--ink);
  color: var(--text);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* paper-grain overlay — cheap, tasteful, non-interactive */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------- masthead ---------------- */
#masthead {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(16px, 4vw, 44px);
  border-bottom: 1px solid var(--rule-strong);
  box-shadow: 0 5px 0 -4px var(--rule);
}
.mast-left { display: flex; gap: 14px; align-items: center; }
/* brand mark: gold-on-ink artwork; lighten blend melts its ink tile into the page */
.mast-mark-img { width: 44px; height: 44px; object-fit: cover; mix-blend-mode: lighten; }
.login-mark { width: 96px; height: 96px; object-fit: cover; mix-blend-mode: lighten; margin: 0 auto 14px; display: block; }
.mast-mark {
  position: relative;
  font-family: var(--display); font-size: 1.05rem; color: var(--ink);
  background: linear-gradient(160deg, var(--gold-hi), var(--gold-lo));
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 3px; letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 3px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.mast-left b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; display: block; letter-spacing: 0.01em; }
.mast-sub { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); }
.mast-right { display: flex; gap: 26px; align-items: center; }
#pub-nav { display: flex; gap: 22px; align-items: center; }
#pub-nav a {
  color: var(--mist); text-decoration: none; font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
#pub-nav a:hover { color: var(--gold-hi); border-bottom-color: var(--gold); }
#mast-nav { display: flex; gap: 26px; align-items: center; }
#mast-nav[hidden] { display: none; } /* explicit display beats the hidden attr otherwise */
#mast-nav a {
  color: var(--mist); text-decoration: none; font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
#mast-nav a:hover { color: var(--gold-hi); }
#mast-nav a.active { color: var(--gold-hi); border-bottom-color: var(--gold); }
.who {
  background: none; border: 1px solid var(--rule-strong); color: var(--text);
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.who:hover { border-color: var(--gold); color: var(--gold-hi); }

main {
  position: relative;
  flex: 1; width: 100%; max-width: 1080px; margin: 0 auto;
  padding: clamp(20px, 3.5vw, 48px) clamp(16px, 4vw, 44px) 72px;
}
#colophon {
  border-top: 1px solid var(--rule);
  padding: 14px clamp(16px, 4vw, 44px);
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.07em; color: var(--mist);
}

/* ---------------- typography ---------------- */
h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.55rem, 3.4vw, 2.3rem); letter-spacing: 0.005em;
  line-height: 1.15;
}
h2 {
  font-family: var(--display); font-weight: 400; font-size: 1.18rem;
  letter-spacing: 0.005em;
  padding-bottom: 11px; margin-bottom: 20px;
  /* gilt double-rule under every section head */
  background-image: linear-gradient(var(--rule-strong), var(--rule-strong)),
                     linear-gradient(var(--rule), var(--rule));
  background-repeat: no-repeat;
  background-size: 64px 1px, 100% 1px;
  background-position: left bottom, left calc(100% - 6px);
}
/* engraved section numerals — pure CSS counters, no markup change */
#app { counter-reset: sec; }
.section.num { counter-increment: sec; }
.section.num > h2::before {
  content: counter(sec, decimal-leading-zero) "  ·  ";
  font-family: var(--mono); font-size: 0.6em; letter-spacing: 0.1em;
  color: var(--gold); opacity: 0.85; vertical-align: 2px;
}

.kicker {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 9px;
}
.kicker::before { content: "— "; opacity: 0.7; }
.section { margin-top: 46px; }
.muted { color: var(--mist); }
.mono { font-family: var(--mono); }
.money { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pos { color: var(--gold-hi); }
.neg { color: var(--red-hi); }

/* ---------------- live money — count-up + glow on change ---------------- */
@keyframes moneyGlowGold { 0% { text-shadow: 0 0 0 rgba(226, 201, 126, 0); } 28% { text-shadow: 0 0 9px rgba(226, 201, 126, 0.85); } 100% { text-shadow: 0 0 0 rgba(226, 201, 126, 0); } }
@keyframes moneyGlowRed { 0% { text-shadow: 0 0 0 rgba(198, 86, 64, 0); } 28% { text-shadow: 0 0 9px rgba(198, 86, 64, 0.85); } 100% { text-shadow: 0 0 0 rgba(198, 86, 64, 0); } }
.money.pulse-gold { animation: moneyGlowGold 900ms ease-out; }
.money.pulse-red { animation: moneyGlowRed 900ms ease-out; }

/* oversized ledger totals — hairline underline, additive .total class
   (covers both a .total ancestor and .total on the .money element itself) */
.total .money, td.total .money, .money.total { font-size: 1.18em; font-weight: 700; }
.total .money.pos, td.total .money.pos, .money.total.pos { border-bottom: 1px solid rgba(226, 201, 126, 0.55); padding-bottom: 3px; }
.total .money.neg, td.total .money.neg, .money.total.neg { border-bottom: 1px solid rgba(198, 86, 64, 0.55); padding-bottom: 3px; }

/* ---------------- ruled ledger tables — the core artifact ---------------- */
.ledger { width: 100%; border-collapse: collapse; margin-top: 10px; }
.ledger th {
  text-align: left; font-family: var(--mono); font-weight: 400; font-size: 0.6rem;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--mist);
  padding: 8px 10px; border-bottom: 1px solid var(--rule-strong);
}
.ledger td { padding: 12px 10px; border-bottom: 1px solid var(--rule); font-size: 0.92rem; vertical-align: top; }
.ledger td.num, .ledger th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ledger tr.clickable { cursor: pointer; transition: background 0.15s ease; }
.ledger tr.clickable:hover td { background: rgba(214, 200, 160, 0.045); }
.ledger .lead td { color: var(--gold-hi); }
.ledger .lead td:first-child { position: relative; }
.ledger .lead td:first-child::before { content: "★ "; color: var(--gold); font-size: 0.75em; }

/* scorecard grid — engraved-numeral ruled sheet */
.scorecard { overflow-x: auto; margin-top: 14px; border: 1px solid var(--rule); border-radius: 2px; }
.scorecard table { border-collapse: collapse; width: 100%; }
.scorecard th, .scorecard td {
  font-family: var(--mono); font-size: 0.78rem; padding: 8px 9px; text-align: center;
  border-bottom: 1px solid var(--rule); min-width: 34px;
}
.scorecard th { color: var(--mist); font-weight: 400; font-size: 0.6rem; letter-spacing: 0.1em; background: rgba(255, 255, 255, 0.015); }
.scorecard td.name { text-align: left; font-family: var(--ui); font-size: 0.85rem; min-width: 96px; font-weight: 600; }
.scorecard td.editable { cursor: pointer; }
.scorecard td.editable:hover { outline: 1px solid var(--rule-strong); }

/* current-hole column — first hole with any score still missing */
.scorecard th.current-hole { color: var(--gold-hi); background: rgba(201, 168, 76, 0.1); }
.scorecard td.current-hole { background: rgba(201, 168, 76, 0.07); }

/* hole cells stack the score mark over its handicap pips.
   NOTE: td must stay display:table-cell — flex on a td collapses the table. */
.scorecard td.hole { padding: 7px 6px; text-align: center; vertical-align: middle; }
.cell-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; line-height: 1; font-variant-numeric: tabular-nums;
}
/* birdie or better: gold ring; eagle+: double ring */
.cell-num.mark-birdie { color: var(--gold-hi); border: 1.5px solid var(--gold-hi); border-radius: 50%; }
.cell-num.mark-eagle {
  color: var(--gold-hi); border: 1.5px solid var(--gold-hi); border-radius: 50%;
  box-shadow: 0 0 0 2.5px var(--ink-2), 0 0 0 3.5px var(--gold-hi);
  margin: 0 2px;
}
.cell-num.mark-par { color: var(--text); }
/* bogey: thin square in red-ink tint */
.cell-num.mark-bogey { color: var(--red-hi); border: 1px solid rgba(198, 86, 64, 0.6); border-radius: 2px; }
/* double bogey or worse: filled darker square */
.cell-num.mark-doublebogey { color: var(--text); background: rgba(168, 57, 44, 0.55); border-radius: 2px; }

/* handicap pips — dots under the score, one per stroke received on the hole */
.pips { display: flex; gap: 2px; justify-content: center; height: 4px; }
.pips i { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); display: block; }

/* newly-filled cells pop in */
@keyframes scorePop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.score-pop .cell-num { animation: scorePop 250ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* per-player trend sparkline in the leaderboard row */
.spark-cell { padding: 4px 8px !important; }
.spark { display: block; margin-left: auto; }

/* ---------------- the race — diverging live-balance bars ---------------- */
.race { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.race-row { display: flex; align-items: center; gap: 14px; }
.race-name { width: 108px; flex-shrink: 0; font-family: var(--ui); font-size: 0.82rem; font-weight: 600; text-align: right; }
/* overflow-hidden = hard guarantee: bars/labels can never reach the names */
.race-track { position: relative; flex: 1; height: 24px; min-width: 0; overflow: hidden; }
.race-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--gold-lo); opacity: 0.65; }
.race-bar { position: absolute; top: 3px; bottom: 3px; transition: width 380ms cubic-bezier(0.22, 1, 0.36, 1); min-width: 0; }
.race-bar.pos { background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); }
.race-bar.neg { background: linear-gradient(270deg, var(--red), var(--red-hi)); }
.race-amt {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 0.7rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.race-amt.pos { color: var(--gold-hi); }
.race-amt.neg { color: var(--red-hi); }
/* label riding inside a long bar: contrast against the bar fill */
.race-amt.inside.pos { color: var(--ink); font-weight: 500; }
.race-amt.inside.neg { color: #f7ece7; font-weight: 500; }

/* ---------------- skins carry chip — stacked coins ---------------- */
.skins-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-hi);
}
.coins { display: inline-flex; width: 21px; height: 14px; position: relative; flex-shrink: 0; }
.coins i {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: linear-gradient(160deg, var(--gold-hi), var(--gold-lo));
  border: 1px solid var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.coins i:nth-child(1) { left: 0; top: 2px; z-index: 3; }
.coins i:nth-child(2) { left: 5px; top: 1px; z-index: 2; }
.coins i:nth-child(3) { left: 10px; top: 0; z-index: 1; }

/* ---------------- side-bet tickets ---------------- */
.ticket {
  border: 1px solid var(--rule-strong); border-radius: 3px; padding: 14px 16px;
  margin-top: 10px; background: var(--ink-2);
}
.ticket-open { border-style: dashed; }
@keyframes ticketPulse {
  0%, 100% { border-color: var(--rule-strong); box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
  50% { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.08); }
}
.ticket-live { animation: ticketPulse 2.6s ease-in-out infinite; }
.ticket-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ticket-names { font-family: var(--display); font-size: 1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ticket-vs { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; }
.ticket-names .leader { color: var(--gold-hi); }
.ticket-names .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-hi); display: inline-block; margin-right: 3px; }
.ticket-stake { font-size: 1.3rem; font-weight: 700; font-variant-numeric: normal; color: var(--gold-hi); white-space: nowrap; }
.ticket-desc { margin-top: 6px; font-size: 0.85rem; }
.ticket-top .ticket-desc b { font-family: var(--display); font-weight: 400; }
.ticket-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px; flex-wrap: wrap; }
.take-it:hover { border-color: var(--gold); color: var(--gold-hi); }

/* ---------------- settlement arc diagram ---------------- */
.settle-svg { display: block; width: 100%; max-width: 640px; margin: 10px auto 6px; }
.settle-arc-g { cursor: pointer; }
.settle-arc { opacity: 0.82; transition: opacity 150ms ease, filter 150ms ease; }
.settle-arc-g:hover .settle-arc, .settle-arc-g.active .settle-arc, .settle-arc-g:focus-visible .settle-arc {
  opacity: 1; filter: drop-shadow(0 0 4px rgba(226, 201, 126, 0.55));
}
.settle-arc-label { font-family: var(--mono); font-size: 9px; fill: var(--mist); }
.settle-node text { font-family: var(--ui); font-size: 10px; fill: var(--text); font-weight: 600; }
.transfer.highlight { background: rgba(201, 168, 76, 0.07); border-radius: 3px; }

/* ---------------- plates & docket corners ---------------- */
.plate {
  position: relative;
  border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: 22px 24px; margin-top: 16px; background: var(--ink-2);
}
.plate::before, .plate::after {
  content: ""; position: absolute; top: -1px; width: 14px; height: 14px;
  border-top: 1px solid var(--gold-lo); pointer-events: none; opacity: 0.8;
}
.plate::before { left: -1px; border-left: 1px solid var(--gold-lo); }
.plate::after { right: -1px; border-right: 1px solid var(--gold-lo); }

/* ---------------- buttons ---------------- */
button.act {
  background: linear-gradient(165deg, var(--gold-hi), var(--gold-lo));
  color: var(--ink); border: none; font-family: var(--ui); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 12px 22px; border-radius: 3px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: filter 0.15s ease, transform 0.1s ease;
}
button.act:hover { filter: brightness(1.08); }
button.act:active { transform: translateY(1px); }
button.quiet {
  background: none; border: 1px solid var(--rule-strong); color: var(--text);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 3px; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
button.quiet:hover { border-color: var(--gold); color: var(--gold-hi); }
button:disabled { opacity: 0.4; cursor: default; }

input, select {
  background: var(--ink-3); border: 1px solid var(--rule-strong); color: var(--text);
  font-family: var(--mono); font-size: 0.9rem; padding: 10px 12px; border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
input:focus, select:focus { outline: 1px solid var(--gold); }
label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); display: block; margin: 12px 0 6px; }

/* ---------------- login — a members-only door ---------------- */
.login-wrap {
  max-width: 400px; margin: 11vh auto 0; text-align: center;
  position: relative; padding: 44px 38px 38px;
  border: 1px solid var(--rule-strong); border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 40%), var(--ink-2);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  animation: doorSettle 0.6s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.login-wrap::before, .login-wrap::after {
  content: ""; position: absolute; top: 10px; width: 16px; height: 16px;
  border-top: 1px solid var(--gold-lo); opacity: 0.9;
}
.login-wrap::before { left: 10px; border-left: 1px solid var(--gold-lo); }
.login-wrap::after { right: 10px; border-right: 1px solid var(--gold-lo); }
.login-wrap .mast-mark {
  margin: 0 auto 22px; width: 60px; height: 60px; font-size: 1.5rem;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 5px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.5);
}
.login-wrap h1 { letter-spacing: 0.01em; }
.login-divider {
  display: block; margin: 16px auto 0; font-family: var(--mono); color: var(--gold-lo);
  font-size: 0.7rem; letter-spacing: 0.4em; opacity: 0.7;
}
.login-wrap p.muted { margin-top: 12px; font-size: 0.88rem; }
.login-wrap input {
  width: 100%; text-align: center; letter-spacing: 0.28em; text-transform: uppercase;
  margin-top: 22px; padding: 13px 12px; font-size: 0.95rem;
}
.login-wrap button { width: 100%; margin-top: 16px; }
.err { color: var(--red-hi); font-size: 0.8rem; margin-top: 10px; min-height: 1.1em; }

@keyframes doorSettle {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------- status chips — stamped, not card soup ---------------- */
.chip {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase;
  border: 1px solid var(--rule-strong); border-radius: 999px; padding: 3px 10px;
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.chip.live { color: var(--gold-hi); border-color: var(--gold); background: rgba(201, 168, 76, 0.07); }
.chip.live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-hi); animation: pulse 1.7s infinite; }
.chip.closed { color: var(--mist); }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }

/* ---------------- game rail entries ---------------- */
.game-entry { border-bottom: 1px solid var(--rule); padding: 15px 2px; }
.game-entry .g-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.g-type { font-family: var(--display); font-size: 1.04rem; }
.g-status { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--mist); text-align: right; }
.g-lines { margin-top: 9px; }
.g-line { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 0.85rem; }
.g-line-wrap .why { display: none; font-size: 0.78rem; color: var(--mist); padding: 7px 0 5px 14px; border-left: 2px solid var(--rule-strong); margin: 4px 0 4px 2px; }
.g-line-wrap.open .why { display: block; animation: rowIn 220ms ease both; }
.g-line-wrap { cursor: pointer; }
.g-line-wrap:hover .g-line { color: var(--gold-hi); }

/* ---------------- offers ---------------- */
.offer-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--rule); font-size: 0.88rem; }
.offer-desc b { font-family: var(--display); font-weight: 400; }

/* ---------------- transfers ---------------- */
.transfer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 2px; border-bottom: 1px solid var(--rule); }
.transfer .route { font-size: 0.95rem; }
.transfer .route b { font-family: var(--display); font-weight: 400; }
.pay-links { display: flex; gap: 8px; align-items: center; }
.pay-links a {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-decoration: none;
  color: var(--gold-hi); border: 1px solid var(--rule-strong); padding: 6px 11px; border-radius: 999px;
  transition: border-color 0.15s ease;
}
.pay-links a:hover { border-color: var(--gold); }
.t-status { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; }
.t-status.confirmed { color: var(--gold-hi); }
.t-status.marked { color: var(--gold); }
.t-status.pending { color: var(--mist); }

/* ---------------- audit ---------------- */
.audit-row { font-family: var(--mono); font-size: 0.7rem; color: var(--mist); padding: 6px 0; border-bottom: 1px dotted var(--rule); }
.audit-row .a-actor { color: var(--gold); }

.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.grow { flex: 1; }

/* ---------------- restrained, physical motion ---------------- */
@keyframes rowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
:is(.ledger tbody tr, .game-entry, .transfer, .offer-row, .audit-row, .g-line-wrap, .scorecard tbody tr) {
  animation: rowIn 380ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
:is(.ledger tbody tr, .game-entry, .transfer, .offer-row, .audit-row, .g-line-wrap, .scorecard tbody tr):nth-child(1) { animation-delay: 0ms; }
:is(.ledger tbody tr, .game-entry, .transfer, .offer-row, .audit-row, .g-line-wrap, .scorecard tbody tr):nth-child(2) { animation-delay: 35ms; }
:is(.ledger tbody tr, .game-entry, .transfer, .offer-row, .audit-row, .g-line-wrap, .scorecard tbody tr):nth-child(3) { animation-delay: 70ms; }
:is(.ledger tbody tr, .game-entry, .transfer, .offer-row, .audit-row, .g-line-wrap, .scorecard tbody tr):nth-child(4) { animation-delay: 105ms; }
:is(.ledger tbody tr, .game-entry, .transfer, .offer-row, .audit-row, .g-line-wrap, .scorecard tbody tr):nth-child(5) { animation-delay: 140ms; }
:is(.ledger tbody tr, .game-entry, .transfer, .offer-row, .audit-row, .g-line-wrap, .scorecard tbody tr):nth-child(6) { animation-delay: 175ms; }
:is(.ledger tbody tr, .game-entry, .transfer, .offer-row, .audit-row, .g-line-wrap, .scorecard tbody tr):nth-child(7) { animation-delay: 210ms; }
:is(.ledger tbody tr, .game-entry, .transfer, .offer-row, .audit-row, .g-line-wrap, .scorecard tbody tr):nth-child(8) { animation-delay: 245ms; }
.section { animation: rowIn 460ms cubic-bezier(0.16, 0.84, 0.44, 1) both; }

/* live round view: play the settle-in entrance once, not on every WS tick —
   see the .repaint toggle in paintRound(). Money count-up, the leaderboard
   FLIP, race-bar width and score-cell pop-ins remain (they are opt-in per
   changed value, not a blanket re-entrance of the whole tree). */
#r-body.repaint :is(.ledger tbody tr, .game-entry, .transfer, .offer-row, .audit-row, .g-line-wrap, .scorecard tbody tr),
#r-body.repaint .section,
#r-body.repaint .g-line-wrap.open .why {
  animation: none;
}

@media (max-width: 700px) {
  #mast-nav a { display: none; }
  .transfer { flex-wrap: wrap; }
  .login-wrap { margin-top: 6vh; padding: 34px 24px 28px; }
}

@media (max-width: 480px) {
  .race-row { flex-direction: column; align-items: flex-start; gap: 5px; }
  .race-name { width: auto; text-align: left; }
  .race-track { width: 100%; }
  .ticket-top { flex-direction: column; gap: 4px; }
  .ticket-stake { font-size: 1.1rem; }
  .trend-col { display: none; }
  .ledger { display: block; overflow-x: auto; }
}