/* MARBLES side pages (races, race, ledger, fair). Same tokens as site.css. */
[hidden] { display: none !important; }
.page .sec { padding-top: 96px; padding-bottom: 0; }
body.page { background: radial-gradient(1200px 520px at 50% -120px, rgba(214,140,70,.16), rgba(11,9,7,0) 70%), var(--bg); min-height: 100vh; }
.pg { padding-top: 64px; }
.pg-head { padding-top: 64px; padding-bottom: 36px; }
.pg-head h1 { margin: 12px 0 14px; font: 800 clamp(40px, 5.4vw, 76px)/0.96 var(--display); font-stretch: 72%; text-transform: uppercase; letter-spacing: .005em; max-width: 18ch; }
.pg-head p { margin: 0; color: var(--ink2); max-width: 62ch; font-size: 16px; }
.pg-head a { color: var(--brass2); }
.mute { color: var(--ink4); } .gold { color: var(--brass2); } .red { color: var(--red); } .green { color: var(--green); } .b { font-weight: 600; }
.quiet { color: var(--ink3); font: 400 13px/1.5 var(--mono); margin: 18px 0 0; }

.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tile { background: var(--bg2); padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 8px; min-height: 108px; }
.tile b { font: 700 34px/1 var(--display); font-stretch: 78%; font-variant-numeric: tabular-nums; }
.tile em { font: 400 12px/1 var(--mono); font-style: normal; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs { display: flex; gap: 2px; margin: 34px 0 12px; flex-wrap: wrap; }
.tabs button { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); background: none; border: 1px solid transparent; padding: 9px 12px; border-radius: var(--r); cursor: pointer; }
.tabs button.on { color: var(--ink); border-color: var(--line2); background: rgba(243,226,200,.05); }

.tbl { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: rgba(17,14,11,.6); }
.tbl .tr { display: grid; align-items: center; gap: 14px; min-height: 46px; padding: 0 18px; border-top: 1px solid var(--line); font-size: 14px; text-decoration: none; color: inherit; }
.tbl .tr:first-child { border-top: 0; }
.tbl .th { min-height: 38px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); background: rgba(243,226,200,.03); }
.tbl .tr.empty { color: var(--ink3); font: 400 13px/1 var(--mono); grid-template-columns: 1fr; }
.tbl .r { text-align: right; } .tbl .tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl .tr.link:hover { background: rgba(243,226,200,.04); }
.tbl a.tx { color: var(--ink2); text-decoration: none; border-bottom: 1px dotted var(--ink4); } .tbl a.tx:hover { color: var(--brass2); }
.tbl .dot { vertical-align: -3px; margin-right: 8px; width: 14px; height: 14px; }
.ledger-tbl .tr { grid-template-columns: 150px 120px 130px 80px minmax(0, 1fr) 150px; }
.races-tbl .tr { grid-template-columns: 210px 160px minmax(0, 1fr) 90px 120px 140px; }
.rules-tbl .tr { grid-template-columns: minmax(0, 1fr) auto; }
.field-tbl .tr { grid-template-columns: 56px minmax(0, 1fr) 120px 90px 180px; }
.field-tbl .tr.is-win { background: linear-gradient(90deg, rgba(214,167,92,.14), transparent 70%); }
.field-tbl .tr.dq span:nth-child(2) { opacity: .6; }
.chip.k-payout { color: var(--brass2); border-color: rgba(243,201,105,.4); } .chip.k-claim, .chip.k-fees { color: var(--green); border-color: rgba(99,214,156,.35); }
.chip.k-burn { color: #ff9a6a; border-color: rgba(255,154,106,.35); } i.chip { font-style: normal; }
.more-row { display: flex; justify-content: center; margin-top: 18px; }

.chain { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; counter-reset: c; }
.chain li { background: var(--bg2); padding: 20px 20px 22px; position: relative; min-height: 196px; }
.chain .n { font: 600 12px/1 var(--mono); color: var(--brass); display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border: 1px solid rgba(214,167,92,.4); border-radius: 50%; }
.chain b { display: block; margin: 16px 0 8px; font: 700 18px/1.15 var(--display); font-stretch: 86%; }
.chain p { margin: 0; color: var(--ink2); font-size: 13.5px; }
.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.lead { color: var(--ink2); margin: 0 0 18px; max-width: 60ch; }
.code { margin: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: #0d0b09; font: 400 13.5px/1.7 var(--mono); color: var(--ink); overflow-x: auto; white-space: pre-wrap; }
.code i { font-style: normal; color: var(--brass2); }
.facts { margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.facts div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; background: var(--bg2); padding: 11px 16px; align-items: center; }
.facts dt { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.facts dd { margin: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facts a.tx { color: var(--ink2); text-decoration: none; border-bottom: 1px dotted var(--ink4); }
.facts .dot { vertical-align: -2px; }
.sec-h.small h3 { margin: 6px 0 0; font: 700 26px/1 var(--display); font-stretch: 80%; text-transform: uppercase; }

/* race replay */
.race-pg { padding-top: 0; }
.replay { position: relative; height: min(78vh, 820px); min-height: 520px; overflow: hidden; }
.replay canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hud.replay .inset, .hud.replay .tagline { display: none; }
.ctl { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(940px, calc(100% - 56px)); display: flex; align-items: center; gap: 12px; z-index: 8;
  padding: 10px 14px; border-radius: var(--r); background: linear-gradient(180deg, rgba(15,12,10,.92), rgba(15,12,10,.86)); border: 1px solid var(--line2); }
.ib { height: 32px; min-width: 32px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line2); border-radius: var(--r); background: rgba(243,226,200,.04); color: var(--ink); font: 500 12px/1 var(--mono); cursor: pointer; }
.ib svg { width: 14px; height: 14px; }
.scrub { position: relative; flex: 1; height: 32px; cursor: pointer; touch-action: none; }
.scrub::before { content: ''; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: rgba(243,226,200,.14); border-radius: 2px; }
.scrub .fill { position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: var(--brass); transform-origin: left; transform: scaleX(0); }
.scrub .knob { position: absolute; top: 9px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, #f3c969 30%, #a66a2c 100%); box-shadow: 0 0 0 3px rgba(243,201,105,.18); }
.scrub .m { position: absolute; top: 9px; width: 2px; height: 14px; margin-left: -1px; background: var(--ink3); }
.scrub .m.fin { background: var(--brass2); } .scrub .m.dq { background: var(--red); height: 8px; top: 12px; }
.tm { font-size: 14px; min-width: 64px; text-align: right; }
.speeds { display: flex; gap: 2px; } .speeds button { font: 500 12px/1 var(--mono); color: var(--ink3); background: none; border: 1px solid transparent; border-radius: var(--r); padding: 8px 8px; cursor: pointer; }
.speeds button.on { color: var(--ink); border-color: var(--line2); }
.rec { padding-top: 56px; }
.verify { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); padding: 18px 20px 20px; }
.verify p { color: var(--ink2); margin: 10px 0 14px; font-size: 14px; }
.vbar { height: 2px; background: rgba(243,226,200,.1); margin: 14px 0 12px; overflow: hidden; } .vbar i { display: block; height: 100%; background: var(--brass); transform-origin: left; transform: scaleX(0); }
.verify .code { min-height: 70px; font-size: 12.5px; }
.rec .split { margin-bottom: 56px; }

@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .chain { grid-template-columns: 1fr 1fr; } .split { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .tiles { grid-template-columns: 1fr 1fr; } .chain { grid-template-columns: 1fr; } .chain li { min-height: 0; }
  .ledger-tbl .tr { grid-template-columns: 1fr 90px 90px; } .ledger-tbl .tr > span:nth-child(1), .ledger-tbl .tr > span:nth-child(4), .ledger-tbl .tr > span:nth-child(5) { display: none; }
  .races-tbl .tr { grid-template-columns: 1fr 1fr 70px; } .races-tbl .tr > span:nth-child(2), .races-tbl .tr > span:nth-child(4), .races-tbl .tr > span:nth-child(6) { display: none; }
  .field-tbl .tr { grid-template-columns: 34px 1fr 70px; } .field-tbl .tr > span:nth-child(3), .field-tbl .tr > span:nth-child(5) { display: none; }
  .facts div { grid-template-columns: 100px minmax(0, 1fr); }
  .replay { height: 72svh; } .ctl { bottom: 10px; width: calc(100% - 20px); gap: 6px; padding: 8px; } .speeds button:first-child { display: none; } .tm { min-width: 50px; font-size: 12px; }
}