/* UFC +EV — professional odds terminal with a neon edge.
   UI accents (cyan / money-green / magenta) are for interface states only;
   chart series use the validated data palette (--series-*), checked against the dark surface. */
:root {
  color-scheme: dark;
  --bg: #07090d;
  --surface-1: #0f131a;
  --surface-2: #141a23;
  --surface-3: #1a212c;
  --line: #222b38;
  --line-2: #2c3747;
  --text-primary: #e8edf4;
  --text-secondary: #a3afc0;
  --text-muted: #6d7a8d;
  --accent: #22e6ff;          /* interaction */
  --accent-dim: rgba(34, 230, 255, .14);
  --money: #3dffa2;           /* +EV, best line (status: good) */
  --money-dim: rgba(61, 255, 162, .12);
  --hot: #ff3d81;             /* arbitrage alerts, used sparingly */
  --hot-dim: rgba(255, 61, 129, .13);
  --warn: #ffb547;
  --neg: #ff6b6b;             /* status: critical */
  --gold: #f5c86b;
  /* validated data palette (dark, surface #0f131a): all six checks pass */
  --series-1: #17a2c0;
  --series-2: #c98500;
  --series-3: #9085e9;
  --good: #2fbf71;
  --critical: #e66767;
  --radius: 10px;
  --mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, ui-monospace, monospace;
  --sans: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text-primary); }
body {
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(34, 230, 255, .07), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(255, 61, 129, .05), transparent 60%),
    var(--bg);
}
/* subtle grid backdrop */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.num, .mono, td.n, .odds { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.sec { color: var(--text-secondary); }
.pos { color: var(--money); }
.neg { color: var(--neg); }
.hidden, [hidden] { display: none !important; }

/* ------------------------------------------------------------------ top bar */
header.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 0 28px; height: 60px;
  background: rgba(7, 9, 13, .82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .04em; color: var(--text-primary); }
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #6c5cff 55%, var(--hot));
  color: #05070a; font: 900 13px var(--mono);
  box-shadow: 0 0 24px rgba(34, 230, 255, .35);
}
.brand .word { font-size: 16px; }
.brand .word b { color: var(--accent); text-shadow: 0 0 12px rgba(34, 230, 255, .55); }
nav.main { display: flex; gap: 2px; }
nav.main a {
  color: var(--text-secondary); padding: 8px 12px; border-radius: 8px; font-weight: 550; font-size: 13.5px;
  position: relative;
}
nav.main a:hover { color: var(--text-primary); background: var(--surface-2); text-decoration: none; }
nav.main a.active { color: var(--text-primary); }
nav.main a.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -11px; height: 2px;
  background: var(--accent); box-shadow: 0 0 10px var(--accent); border-radius: 2px;
}
.top .right { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 430px; }
#statusPill { min-width: 200px; justify-content: center; }
#acct { display: inline-flex; gap: 8px; min-width: 210px; justify-content: flex-end; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px;
  background: var(--surface-1); border: 1px solid var(--line); color: var(--text-secondary); font-size: 12px;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--money); box-shadow: 0 0 8px var(--money); }
.dot.stale { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.dot.live { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* tier chips: holographic */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px;
  font: 700 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line-2); color: var(--text-secondary); background: var(--surface-2);
}
.chip.classic { color: #ffd1e1; border-color: rgba(255, 61, 129, .45); background: linear-gradient(120deg, rgba(255, 61, 129, .18), rgba(255, 61, 129, .04)); }
.chip.frontier { color: #c9f8ff; border-color: rgba(34, 230, 255, .45); background: linear-gradient(120deg, rgba(34, 230, 255, .18), rgba(34, 230, 255, .04)); }
.chip.pro {
  color: #1b1405; border-color: transparent;
  background: linear-gradient(110deg, #f5c86b, #fff1c9 35%, #b2f5ff 55%, #f5c86b 80%);
  background-size: 220% 100%; animation: holo 6s linear infinite;
}
@keyframes holo { to { background-position: -220% 0; } }
.chip.exch { font-size: 9px; padding: 1px 5px; letter-spacing: .08em; color: var(--series-3); border-color: rgba(144, 133, 233, .45); background: transparent; }

/* ------------------------------------------------------------------ buttons + inputs */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--text-primary); font: 600 13.5px var(--sans); cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.btn:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); text-decoration: none; }
.btn.primary { background: var(--accent); color: #04121a; border-color: var(--accent); box-shadow: 0 0 22px rgba(34, 230, 255, .3); }
.btn.primary:hover { box-shadow: 0 0 0 3px var(--accent-dim), 0 0 28px rgba(34, 230, 255, .45); }
.btn.ghost { background: transparent; }
.btn.sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select {
  height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--surface-1); color: var(--text-primary); font: 14px var(--sans);
}
input[type=number] { font-family: var(--mono); }
input[type=range] { accent-color: var(--accent); width: 150px; }
label.field { display: grid; gap: 6px; font-size: 12px; color: var(--text-secondary); font-weight: 600; letter-spacing: .02em; }
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-secondary); font-size: 13px; }

/* ------------------------------------------------------------------ ticker */
.ticker {
  position: relative; z-index: 1; overflow: hidden; white-space: nowrap;
  border-bottom: 1px solid var(--line); background: rgba(15, 19, 26, .7);
  font: 600 11.5px/30px var(--mono); letter-spacing: .06em; color: var(--text-secondary); text-transform: uppercase;
}
.ticker .track { display: inline-block; padding-left: 0; animation: tick 60s linear infinite; will-change: transform; }
.ticker span.item { display: inline-block; padding: 0 22px; }
.ticker b { color: var(--text-primary); }
.ticker .hot { color: var(--hot); }
.ticker .ok { color: var(--money); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ layout */
main { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 28px; min-height: calc(100vh - 92px); }  /* footer starts below the fold: no load-time shift */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 4px 0 22px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.page-head p { margin: 6px 0 0; color: var(--text-secondary); max-width: 760px; }
.eyebrow { font: 700 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.panel {
  background: linear-gradient(180deg, rgba(26, 33, 44, .55), rgba(15, 19, 26, .85));
  border: 1px solid var(--line); border-radius: var(--radius); position: relative;
}
.panel.pad { padding: 18px 20px; }
.grid { display: grid; gap: 14px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 22px; }
.kpi { padding: 14px 16px; }
.kpi .k { font: 700 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.kpi .v { font: 700 24px/1.25 var(--mono); margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.kpi.hot .v { color: var(--hot); text-shadow: 0 0 16px rgba(255, 61, 129, .4); }
.kpi.ok .v { color: var(--money); }

/* ------------------------------------------------------------------ controls rail */
.rail { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 22px; }
.rail .val { font: 600 12px var(--mono); color: var(--accent); margin-left: 6px; }
.rail .note { font-size: 12px; color: var(--text-muted); margin-left: auto; max-width: 360px; }

/* ------------------------------------------------------------------ event board */
.event { margin-bottom: 26px; overflow: hidden; }
.event-head {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(34, 230, 255, .06), transparent 40%);
}
.event-head h2 { margin: 0; font-size: 17px; }
.event-head .when { font: 600 12px var(--mono); color: var(--text-secondary); }
.event-head .count { font: 700 11px var(--mono); color: var(--accent); padding: 2px 8px; border: 1px solid rgba(34, 230, 255, .35); border-radius: 6px; }
.event-head .stake { margin-left: auto; font: 600 12.5px var(--mono); color: var(--text-secondary); }
.event-head .stake b { color: var(--money); }
.scroll { overflow-x: auto; scrollbar-color: var(--line-2) transparent; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th {
  font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-1);
}
td { padding: 10px 12px; border-bottom: 1px solid rgba(34, 43, 56, .7); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: rgba(34, 230, 255, .035); }
.board th.book { text-align: center; min-width: 74px; }
.board th.book .chip { margin-top: 3px; }
.board td.sticky, .board th.sticky { position: sticky; left: 0; z-index: 2; background: var(--surface-1); }
.board tbody tr:hover td.sticky { background: #111821; }
.fighters { min-width: 210px; }
.fighters .f { display: flex; align-items: center; gap: 8px; line-height: 1.35; }
.fighters .f + .f { margin-top: 7px; }
.fighters .name { font-weight: 650; white-space: nowrap; }
.fighters .meta { font: 11px var(--mono); color: var(--text-muted); white-space: nowrap; }
.fighters .wc { font: 600 10px var(--mono); color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.warnmark { color: var(--warn); font-size: 11px; cursor: help; }
.odds-cell { text-align: center; padding: 6px 6px; }
.odds-cell .o {
  display: block; font: 600 13px/22px var(--mono); border-radius: 6px; padding: 0 6px; color: var(--text-primary);
  border: 1px solid transparent;
}
.odds-cell .o + .o { margin-top: 6px; }
.odds-cell .o.best { color: var(--money); background: var(--money-dim); border-color: rgba(61, 255, 162, .35); box-shadow: 0 0 12px rgba(61, 255, 162, .18); }
.odds-cell .o.rec { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: 0 0 14px rgba(34, 230, 255, .45); }
.odds-cell .o.out { color: var(--text-muted); text-decoration: line-through; }
.odds-cell .o.na { color: var(--line-2); }
.odds-cell .e { display: block; font: 10px var(--mono); line-height: 12px; }

/* prediction meters (single series per meter: confidence of the pick) */
.pred { min-width: 168px; }
.pred .who { font-weight: 650; white-space: nowrap; font-size: 13px; }
.pred .row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.meter { position: relative; flex: 1; height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; min-width: 80px; }
.meter > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.meter.elo > i { background: var(--series-3); }
.meter.model > i { background: var(--series-1); }
.meter::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line-2); }
.pred .pct { font: 700 12.5px var(--mono); min-width: 46px; text-align: right; }
.pred .sub { font: 11px var(--mono); color: var(--text-muted); margin-top: 3px; }
.betcell { min-width: 200px; }
.bet {
  border: 1px solid rgba(61, 255, 162, .35); background: var(--money-dim); border-radius: 8px; padding: 7px 10px;
  box-shadow: inset 0 0 18px rgba(61, 255, 162, .06);
}
.bet .t { font-weight: 700; white-space: nowrap; }
.bet .t .odds { color: var(--money); }
.bet .d { font: 11px var(--mono); color: var(--text-secondary); margin-top: 2px; white-space: nowrap; }
.nobet { font: 11.5px var(--mono); color: var(--text-muted); }

/* locked (paywalled) cells: placeholder shapes under frost — real data is never sent */
.locked-cell { position: relative; min-width: 168px; }
.locked-cell .ghost { filter: blur(5px); opacity: .55; pointer-events: none; user-select: none; }
.locked-cell .ghost .bar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--series-1), transparent); margin-top: 6px; }
.locked-cell .ghost .ln { height: 9px; width: 70%; border-radius: 4px; background: var(--line-2); }
.lock-tag {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary);
  cursor: pointer;
}
.lock-tag:hover { color: var(--accent); }
.lock-tag svg { width: 12px; height: 12px; }
.locked-panel { position: relative; overflow: hidden; display: grid; }
.locked-panel > .ghost, .locked-panel > .overlay { grid-area: 1 / 1; }
.locked-panel .ghost { filter: blur(6px); opacity: .45; pointer-events: none; user-select: none; }
.locked-panel .overlay {
  position: relative; display: grid; place-items: center; text-align: center;
  background: linear-gradient(180deg, rgba(7, 9, 13, .35), rgba(7, 9, 13, .82));
}
.locked-panel .overlay .box { max-width: 420px; padding: 22px; }
.locked-panel .overlay h3 { margin: 10px 0 6px; font-size: 19px; }
.locked-panel .overlay p { color: var(--text-secondary); margin: 0 0 16px; }

/* parlays */
.parlays { padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.parlays h4 { margin: 0 0 8px; font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.parlay { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; flex-wrap: wrap; }
.parlay:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------ arbitrage */
.arb-row .margin { font: 800 15px var(--mono); color: var(--hot); text-shadow: 0 0 12px rgba(255, 61, 129, .35); }
.legs { display: grid; gap: 4px; }
.leg { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; }
.leg .stake { font: 700 12.5px var(--mono); color: var(--money); }

/* ------------------------------------------------------------------ rankings */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters .seg { flex: 1 1 420px; min-width: 0; }
.seg { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  max-width: 100%; padding: 2px 18px 2px 2px; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: none; white-space: nowrap; scroll-snap-align: start;
  height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-1);
  color: var(--text-secondary); font: 600 12px var(--sans); cursor: pointer;
}
.seg button:hover { color: var(--text-primary); border-color: var(--line-2); }
.seg button.on { color: #04121a; background: var(--accent); border-color: var(--accent); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
.rank { font: 700 13px var(--mono); color: var(--text-muted); width: 44px; }
.rank.top { color: var(--gold); }
tr.click { cursor: pointer; }
tr.sel td { background: rgba(34, 230, 255, .07) !important; }
.side { position: sticky; top: 80px; }

/* ------------------------------------------------------------------ charts */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .axis text { fill: var(--text-muted); font: 10.5px var(--mono); }
.chart .xl { fill: var(--text-muted); font: 11px var(--mono); }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .zero { stroke: var(--line-2); stroke-dasharray: 3 3; }
.chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { opacity: .14; }
.chart .xhair { stroke: var(--text-muted); stroke-width: 1; }
.chart .dotm { stroke: var(--surface-1); stroke-width: 2; }
.chart .tip {
  position: absolute; pointer-events: none; z-index: 5; min-width: 150px; padding: 8px 10px; border-radius: 8px;
  background: rgba(10, 13, 18, .96); border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  font: 12px/1.45 var(--sans); color: var(--text-primary); transform: translate(-50%, calc(-100% - 12px)); white-space: nowrap;
}
.chart .tip .tk { color: var(--text-muted); font: 11px var(--mono); }
.chart .tip .tv { font: 700 13px var(--mono); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary); margin: 4px 0 8px; }
.legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.chart-title { font-weight: 650; margin: 0 0 2px; }
.chart-sub { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; }
.callout {
  border: 1px solid rgba(255, 181, 71, .35); background: rgba(255, 181, 71, .07); color: #ffe1b0;
  border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 18px;
}
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }

/* ------------------------------------------------------------------ pricing */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.plan { padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.plan > .chip { align-self: flex-start; }
.plan .price { font: 800 34px/1 var(--mono); }
.plan .price small { font: 600 13px var(--sans); color: var(--text-muted); }
.plan ul { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 8px; font-size: 13.5px; color: var(--text-secondary); flex: 1; align-content: start; }
.plan li::before { content: "▸"; color: var(--accent); margin-right: 8px; }
.plan li.off { color: var(--text-muted); text-decoration: line-through; }
.plan li.off::before { color: var(--text-muted); }
.plan.featured { border-color: rgba(245, 200, 107, .55); box-shadow: 0 0 0 1px rgba(245, 200, 107, .25), 0 0 50px rgba(245, 200, 107, .12); }
.plan .badge { position: absolute; top: -11px; right: 16px; }
.plan .save { font: 600 12px var(--mono); color: var(--money); }
.plan.current { border-color: var(--accent); }

/* ------------------------------------------------------------------ account / forms / modal */
.auth { max-width: 420px; margin: 30px auto; padding: 26px; }
.auth h2 { margin: 0 0 4px; }
.auth form, form.authf { display: grid; gap: 14px; margin-top: 18px; }
.err { color: var(--neg); font-size: 13px; min-height: 18px; }
.ok-msg { color: var(--money); font-size: 13px; }
.modal-bg { position: fixed; inset: 0; z-index: 50; background: rgba(3, 5, 8, .72); backdrop-filter: blur(6px); display: grid; place-items: center; }
.modal { width: min(480px, 94vw); max-height: 92vh; overflow-y: auto; }
.keybox { font: 600 13px var(--mono); padding: 12px; border-radius: 8px; background: var(--surface-1); border: 1px dashed var(--money); color: var(--money); word-break: break-all; }
pre.code { font: 12.5px/1.6 var(--mono); background: #05070a; border: 1px solid var(--line); border-radius: 8px; padding: 14px; overflow-x: auto; color: #cfe7ff; margin: 8px 0 0; }
.endpoint { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.endpoint .verb { font: 800 11px var(--mono); color: var(--money); min-width: 34px; }
.endpoint code { font: 600 13px var(--mono); }
.prose { max-width: 820px; color: var(--text-secondary); }
.prose h2 { color: var(--text-primary); font-size: 17px; margin-top: 26px; }

/* ------------------------------------------------------------------ footer */
footer.site { position: relative; z-index: 1; border-top: 1px solid var(--line); margin-top: 40px; padding: 22px 28px 34px; color: var(--text-muted); font-size: 12.5px; }
footer.site .in { max-width: 1440px; margin: 0 auto; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
footer.site .age { font: 800 11px var(--mono); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 7px; color: var(--text-secondary); }
footer.site nav { margin-left: auto; display: flex; gap: 16px; }
footer.site a { color: var(--text-secondary); }

.empty { padding: 40px; text-align: center; color: var(--text-secondary); }
.skeleton { height: 120px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-1), var(--surface-2), var(--surface-1)); background-size: 200% 100%; animation: sk 1.4s linear infinite; margin-bottom: 14px; }
@keyframes sk { to { background-position: -200% 0; } }
.toast { position: fixed; bottom: 22px; right: 22px; z-index: 60; padding: 12px 16px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0,0,0,.5); }

@media (max-width: 1100px) {
  .plans { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .side { position: static; }
  .two { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  header.top { padding: 0 14px; gap: 10px; height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 6px; }
  nav.main { order: 3; width: 100%; overflow-x: auto; }
  nav.main a { white-space: nowrap; }
  nav.main a.active::after { bottom: -4px; }
  main { padding: 18px 14px; }
  .plans { grid-template-columns: 1fr; }
  .rail .note { margin-left: 0; }
  .top .right .pill.status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ticker .track { padding-left: 0; }
}
@media (forced-colors: active) {
  .meter > i { background: Highlight; }
  .odds-cell .o.best { border-color: Highlight; }
}

/* ---------- legal: clickwrap, renewal terms, danger zone, legal pages ---------- */
.consents { display: grid; gap: 10px; margin: 4px 0 2px; }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.45;
  color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.consent a { color: var(--accent); text-decoration: underline; }
.consent:has(input:checked) { border-color: rgba(34, 230, 255, .45); }
.authf button[type=submit]:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.4); }
.fine { font-size: 12px; color: var(--text-secondary); margin: 6px 0 0; }
.renew-terms { margin: 12px 0; padding: 12px 14px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 13px; line-height: 1.5; }
.btn.danger { border-color: rgba(230, 103, 103, .55); color: #ffb3b3; }
.btn.danger:hover { background: rgba(230, 103, 103, .12); }
.privacy-box { margin-top: 18px; }
.danger-zone { margin-top: 14px; padding: 14px; border: 1px solid rgba(230, 103, 103, .4); border-radius: 8px; background: rgba(230, 103, 103, .05); max-width: 560px; }
.legal .meta { color: var(--text-muted); font-family: var(--mono); font-size: 12px; margin-top: 0; }
.legal h3 { margin: 26px 0 8px; font-size: 16px; }
.legal li { margin: 4px 0; }
.legal .keybox { background: var(--surface-2); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px 16px; }
.legal .keybox ul { margin: 8px 0 0; padding-left: 18px; }
.legal .draft { background: rgba(255, 181, 71, .1); border: 1px solid rgba(255, 181, 71, .45); color: var(--warn); border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.ltable { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.ltable th, .ltable td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }

/* =================================================================== v3 visual layer
   Motion lives in marketing chrome (hero, story, cards); data tables only get calm hover states.
   All movement is opt-in under prefers-reduced-motion: no-preference. */

/* ---------- ambient mesh-gradient backdrop + film grain (no image files) */
.bg-mesh { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
/* soft blobs are radial gradients (painted once), not filter: blur() - only their transform animates */
.bg-mesh span { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; }
.bg-mesh span:nth-child(1) { background: radial-gradient(closest-side, rgba(34, 230, 255, .11), transparent); left: -24vmax; top: -30vmax; }
.bg-mesh span:nth-child(2) { background: radial-gradient(closest-side, rgba(108, 92, 255, .09), transparent); right: -28vmax; top: 0; }
.bg-mesh span:nth-child(3) { background: radial-gradient(closest-side, rgba(255, 61, 129, .06), transparent); left: 20vmax; bottom: -38vmax; }
/* static film grain, normal blending (no full-page blend-mode compositing) */
body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- scroll progress */
.progress { position: sticky; top: 60px; z-index: 19; height: 2px; }
#progress { height: 100%; background: linear-gradient(90deg, var(--accent), #6c5cff, var(--hot)); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 10px rgba(34, 230, 255, .6); }

/* ---------- cursor spotlight on panels (opacity fade only) */
.panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(760px circle at var(--x, 50%) var(--y, 50%), rgba(34, 230, 255, .045), rgba(34, 230, 255, .018) 38%, rgba(34, 230, 255, 0) 72%); }
.panel:hover::after { opacity: 1; }
.panel.event::after, .panel.ledger-wrap::after, details.stats-minded::after, .panel.scroll::after { display: none; }   /* keep big data surfaces calm */

/* ---------- fighter monogram avatars (procedural, no photos) */
.av { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 800 10.5px var(--mono); letter-spacing: .02em;
  color: hsl(var(--h) 90% 82%); background: linear-gradient(140deg, hsl(var(--h) 70% 30% / .9), hsl(calc(var(--h) + 40) 60% 18% / .9));
  box-shadow: inset 0 0 0 1px hsl(var(--h) 80% 60% / .35); }

/* ---------- odds grid: calm row focus, best price stays bright */
table.board tbody tr { transition: background-color .15s; }
table.board tbody tr:hover { background: rgba(34, 230, 255, .035); }
@media (hover: hover) { table.board tbody tr:hover .o:not(.best):not(.rec) { opacity: .55; } }
.event { overflow: clip; }
.event-head { position: sticky; top: var(--hdr, 62px); z-index: 3; background: rgba(15, 19, 26, .94); backdrop-filter: blur(8px); }
section.event:not(:first-of-type) { content-visibility: auto; contain-intrinsic-size: auto 720px; }
.ledger-wrap { content-visibility: auto; contain-intrinsic-size: auto 600px; }
.head-tools { display: flex; gap: 8px; align-items: center; }
body.compact table.board td, body.compact table.board th { padding-top: 5px; padding-bottom: 5px; }
body.compact table.board { font-size: 12.5px; }
body.compact .fighters .f .meta, body.compact .av { display: none; }
body.compact .fighters .f + .f { margin-top: 2px; }

/* ---------- hero */
.hero { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: center; min-height: 520px; margin: -6px 0 18px; }
.hero h1 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -.025em; margin: 12px 0 14px; }
.hero h1 .grad { background: linear-gradient(90deg, var(--accent), #8f7bff 60%, var(--hot)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--text-secondary); font-size: 16px; max-width: 560px; }
.hero .cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 26px; }
.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.hero-stats div { display: grid; }
.hero-stats b { font: 800 26px var(--mono); }
.hero-stats span { font-size: 12px; color: var(--text-muted); }
.hero-stats sup a { color: var(--text-muted); }
.hero-art { position: relative; aspect-ratio: 1; width: min(100%, 560px); justify-self: center; }
.hero-art svg, .hero-art .l3 { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art .cage { fill: none; stroke: rgba(34, 230, 255, .28); stroke-width: 1.2; }
.hero-art .cage polygon:first-of-type { stroke: rgba(34, 230, 255, .55); stroke-width: 2; }
.hero-art .mat { fill: rgba(34, 230, 255, .035); stroke: none; }
.hero-art .scan { stroke: var(--accent); stroke-width: 1.5; opacity: .5; filter: drop-shadow(0 0 6px var(--accent)); }
.hero-art .chip-o rect { fill: rgba(15, 19, 26, .92); stroke: var(--line-2); }
.hero-art .chip-o text { text-anchor: middle; font-family: var(--mono); }
.hero-art .chip-o .o { fill: var(--text-primary); font-size: 13px; font-weight: 800; }
.hero-art .chip-o .b { fill: var(--text-muted); font-size: 8.5px; letter-spacing: .08em; }
.hero-art .chip-o:nth-child(3n) rect { stroke: rgba(61, 255, 162, .6); }
.hero-art .chip-o:nth-child(3n) .o { fill: var(--money); }
.hero-core { display: grid; place-content: center; text-align: center; pointer-events: none; }
.hero-core .k { font: 700 11px var(--mono); letter-spacing: .2em; color: var(--accent); }
.hero-core .v { font: 900 64px/1 var(--mono); text-shadow: 0 0 30px rgba(34, 230, 255, .45); }
.hero-core .v small { font-size: 16px; color: var(--text-secondary); font-weight: 600; }
.hero-core .s { font: 600 12px var(--mono); color: var(--text-secondary); margin-top: 6px; }

/* ---------- story: sticky stage whose tiles re-arrange as the steps scroll past */
.story { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; margin: 10px 0 40px; }
.story-step { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .4s; }
.story-step.on { opacity: 1; }
.story-step .n { font: 800 12px var(--mono); color: var(--accent); letter-spacing: .2em; }
.story-step h3 { font-size: 26px; margin: 6px 0 8px; letter-spacing: -.01em; }
.story-step p { color: var(--text-secondary); font-size: 15px; max-width: 420px; margin: 0; }
.story-stage { position: relative; }
.story-vis { position: sticky; top: 24vh; height: 52vh; min-height: 340px; overflow: hidden; }
.story-vis .tile { position: absolute; left: 50%; top: 50%; width: 78%; padding: 16px 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2);
  transform: translate(-50%, -50%) translate(var(--tx, 0), var(--ty, 0)) scale(var(--sc, .55)); opacity: var(--op, .4); transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.story-vis .tk { font: 700 10.5px var(--mono); letter-spacing: .16em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 10px; }
/* parked positions: four corners; the active tile comes to the centre at full size */
.story-vis .t1 { --tx: -34%; --ty: -110%; }
.story-vis .t2 { --tx: 34%; --ty: -110%; }
.story-vis .t3 { --tx: -34%; --ty: 110%; }
.story-vis .t4 { --tx: 34%; --ty: 110%; }
.story-vis[data-step="1"] .t1, .story-vis[data-step="2"] .t2, .story-vis[data-step="3"] .t3, .story-vis[data-step="4"] .t4 {
  --tx: 0; --ty: 0; --sc: 1; --op: 1; border-color: rgba(34, 230, 255, .45); box-shadow: 0 0 40px rgba(34, 230, 255, .12); z-index: 2; }
.cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.cloud span { font: 600 11.5px var(--mono); padding: 4px 9px; border-radius: 7px; background: var(--surface-3); border: 1px solid var(--line-2); color: var(--text-secondary); }
.mrow { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 8px; font: 700 14px var(--mono); padding: 6px 0; border-bottom: 1px solid var(--line); }
.mrow .nm { font-family: var(--sans); font-weight: 650; color: var(--text-secondary); }
.mrow .best { color: var(--money); text-shadow: 0 0 10px rgba(61, 255, 162, .5); }
.edge { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; font: 600 14px var(--mono); color: var(--text-secondary); }
.edge b { color: var(--money); font-size: 22px; }
.stakec b { display: block; font: 900 34px var(--mono); color: var(--text-primary); }
.stakec span { color: var(--text-secondary); font-size: 13px; }

/* ---------- Track Record: simulator, dotplot, glossary */
.lead { font-size: 16px; line-height: 1.6; color: var(--text-primary) !important; max-width: 880px !important; }
.sim { padding: 20px 22px; margin-bottom: 18px; border-color: rgba(34, 230, 255, .3); box-shadow: 0 0 60px rgba(34, 230, 255, .06); }
.sim h2 { margin: 4px 0 14px; font-size: 20px; }
.sim-grid { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 26px; }
.sim-ctl { display: grid; gap: 16px; align-content: start; }
.sim-ctl .row { display: grid; grid-template-columns: 1fr 96px; gap: 10px; align-items: center; }
.sim-ctl input[type=range] { accent-color: var(--accent); width: 100%; }
.toggle2 { display: inline-grid; grid-auto-flow: column; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 3px; gap: 3px; justify-self: start; }
.toggle2 button { background: transparent; border: 0; color: var(--text-secondary); font: 600 13px var(--sans); padding: 7px 12px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.toggle2 button[aria-checked="true"] { background: var(--accent); color: #04121a; }
label.check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
label.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.sim-out { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-content: start; }
.sim-out .big { grid-column: 1 / -1; }
.sim-out .k { font: 700 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.sim-out .big .v { font: 900 clamp(38px, 5vw, 58px)/1.05 var(--mono); letter-spacing: -.02em; margin-top: 4px; }
.sim-out .big .s { font-size: 15px; margin-top: 4px; color: var(--text-secondary); }
.sim-out .mini { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; }
.sim-out .mini .v { font: 700 18px var(--mono); margin-top: 4px; }
.sim-say { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); margin: 16px 0 6px; max-width: 980px; }
.sim-say b { color: var(--text-primary); }
.luck { margin-bottom: 18px; }
.dotplot { width: 100%; height: auto; display: block; margin: 8px 0 0; }
.dotplot circle.up { fill: var(--good); }
.dotplot circle.down { fill: var(--critical); }
.dotplot circle { stroke: var(--surface-1); stroke-width: 2; }
.dotplot circle:hover { stroke: var(--text-primary); }
.dotplot .start { stroke: var(--text-secondary); stroke-dasharray: 4 4; }
.dotplot .lbl { fill: var(--text-secondary); font: 600 11px var(--mono); }
.dotplot .axis text { fill: var(--text-muted); font: 11px var(--mono); }
.glossary { margin-bottom: 18px; }
.glossary p { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.gl { position: relative; display: inline-block; padding: 5px 11px; border-radius: 999px; border: 1px dashed var(--line-2); font-size: 13px; color: var(--text-primary); cursor: help; }
.gl:hover, .gl:focus { border-color: var(--accent); outline: none; }
.gl::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); width: 260px; padding: 10px 12px; border-radius: 9px; background: var(--surface-3); border: 1px solid var(--line-2);
  color: var(--text-primary); font-size: 12.5px; line-height: 1.45; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s, transform .15s; z-index: 5; }
.gl:hover::after, .gl:focus::after { opacity: 1; transform: none; }
details.stats-minded { padding: 0; margin-bottom: 18px; }
details.stats-minded > summary { cursor: pointer; padding: 16px 20px; font-weight: 650; list-style: none; display: flex; gap: 12px; align-items: center; }
details.stats-minded > summary::before { content: "\25B8"; color: var(--accent); transition: transform .2s; }
details.stats-minded[open] > summary::before { transform: rotate(90deg); }
details.stats-minded > :not(summary) { margin-left: 20px; margin-right: 20px; }
details.stats-minded[open] { padding-bottom: 20px; }

/* ---------- pricing: holographic shimmer on PROFESSIONAL, gentle tilt on cards */
.plan.featured::before { content: ""; position: absolute; inset: 0; border-radius: inherit; clip-path: inset(0 round var(--radius)); pointer-events: none; opacity: 0; transition: opacity .3s;
  background-image: linear-gradient(115deg, transparent 40%, rgba(34, 230, 255, .14) 47%, rgba(143, 123, 255, .14) 52%, rgba(255, 61, 129, .1) 56%, transparent 62%);
  background-size: 250% 100%; background-position: 100% 0; }
.plan.featured:hover::before { opacity: 1; }
.plan .badge { z-index: 2; }
.hero .btn { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .25s ease-out, box-shadow .2s; }

/* ---------- motion (opt-in) */
@media (prefers-reduced-motion: no-preference) {
  .bg-mesh span:nth-child(1) { animation: drift1 38s ease-in-out infinite alternate; }
  .bg-mesh span:nth-child(2) { animation: drift2 46s ease-in-out infinite alternate; }
  .bg-mesh span:nth-child(3) { animation: drift1 52s ease-in-out infinite alternate-reverse; }
  .rv { opacity: 0; transform: translateY(14px); transition: opacity .55s ease-out, transform .55s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 45ms); }
  .rv.in { opacity: 1; transform: none; }
  .hero-art .l1 { transform: translate(calc(var(--hx, 0) * -14px), calc(var(--hy, 0) * -14px)); transition: transform .4s ease-out; }
  .hero-art .l2 { transform: translate(calc(var(--hx, 0) * 26px), calc(var(--hy, 0) * 26px)); transition: transform .4s ease-out; }
  .hero-art .l3 { transform: translate(calc(var(--hx, 0) * 40px), calc(var(--hy, 0) * 40px)); transition: transform .4s ease-out; }
  .hero-art .orbit { transform-origin: 300px 300px; animation: spin 80s linear infinite; }
  .hero-art .scan { animation: scan 5.5s ease-in-out infinite; }
  .plan.featured:hover::before { animation: holo 1.8s ease-out; }
  /* scroll-driven extras where supported (Chrome 115+, Safari 26, Firefox 159) */
  @supports (animation-timeline: view()) {
    /* (chart lines are always drawn in full: the scroll-linked draw-in was removed) */
    #progress { animation: grow linear both; animation-timeline: scroll(root); }
    .hero-copy { animation: heroOut linear both; animation-timeline: scroll(root); animation-range: 0 520px; }
  }
}
@keyframes drift1 { to { transform: translate(18vmax, 10vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-14vmax, 16vmax) scale(.9); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scan { 0%, 100% { transform: translateY(-190px); opacity: 0; } 15%, 85% { opacity: .55; } 50% { transform: translateY(190px); } }
@keyframes holo { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes heroOut { to { opacity: .25; transform: translateY(-40px) scale(.98); } }

/* ---------- responsive */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-art { width: min(100%, 420px); }
  .story { grid-template-columns: 1fr; gap: 16px; }
  .story-stage { display: none; }
  .story-step { min-height: 0; opacity: 1; padding: 14px 0; }
  .sim-grid { grid-template-columns: 1fr; }
  .sim-out { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) { .top .right, #acct, #statusPill { min-width: 0; } }


/* =================================================================== v3.1 */
/* ---------- scroll choreography: children fly in and settle, scrubbed by scroll position */
.asm > *, .asm-item { --fx: 0px; --fy: 40px; --fs: .96; --fr: 0deg; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .asm > *, .asm-item { animation: assemble linear both; animation-timeline: view(); animation-range: entry 5% cover 38%; }
  }
  @supports not (animation-timeline: view()) {
    .asm > *, .asm-item { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(var(--fs)) rotate(var(--fr)); transition: opacity .7s ease-out, transform .8s cubic-bezier(.2, .8, .2, 1); }
    .asm.in > *, .asm-item.in { opacity: 1; transform: none; }
  }
}
@keyframes assemble { from { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(var(--fs)) rotate(var(--fr)); } to { opacity: 1; transform: none; } }
.dotplot circle { transform-box: fill-box; transform-origin: center; }
.lazy-ph { min-height: var(--ph, 420px); }

/* ---------- Rankings: photos, Current / All-time */
.rk-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pic { flex: none; width: 34px; height: 34px; border-radius: 9px; object-fit: cover; object-position: 50% 18%; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.av.lg, .pic.lg { width: 30px; height: 30px; }
td.who { display: flex; align-items: center; gap: 10px; font-weight: 650; }
td.who .sub { display: block; font: 500 11px var(--mono); color: var(--text-muted); }
.decay { font: 600 11.5px var(--mono); }
.credits { font-size: 11px; color: var(--text-muted); margin: 8px 2px 0; }
.credits a { color: var(--text-muted); text-decoration: underline; }

/* ---------- fighter names + hover card */
[data-fighter] { cursor: pointer; text-decoration: underline dotted rgba(163, 175, 192, .35); text-underline-offset: 3px; }
[data-fighter]:hover, [data-fighter]:focus-visible { text-decoration-color: var(--accent); outline: none; }
.fcard { position: fixed; z-index: 60; width: 300px; padding: 14px; border-radius: 12px; pointer-events: auto;
  background: rgba(16, 21, 29, .97); border: 1px solid var(--line-2); box-shadow: 0 18px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(34, 230, 255, .06);
  opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .16s ease-out, transform .16s ease-out; }
.fcard.on { opacity: 1; transform: none; }
.fcard .top { display: flex; gap: 12px; align-items: center; }
.fcard .ph { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; object-position: 50% 15%; background: var(--surface-3); flex: none; }
.fcard .av.xl { width: 72px; height: 72px; border-radius: 12px; font-size: 22px; }
.fcard .nm { font-weight: 750; font-size: 16px; line-height: 1.2; }
.fcard .dv { font: 600 11px var(--mono); color: var(--accent); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
.fcard .bio { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.fcard .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 6px; }
.fcard .nums > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; }
.fcard .nums .k { font: 700 9.5px var(--mono); letter-spacing: .12em; color: var(--text-muted); text-transform: uppercase; }
.fcard .nums .v { font: 800 17px var(--mono); margin-top: 2px; }
.fcard .nums .s { font-size: 10.5px; color: var(--text-muted); }
.fcard .spark { width: 100%; height: 34px; display: block; }
.fcard .spark path { fill: none; stroke: var(--series-3); stroke-width: 1.6; }
.fcard .meta2 { font-size: 11.5px; color: var(--text-secondary); }
.fcard .credit { font-size: 10px; color: var(--text-muted); margin-top: 8px; line-height: 1.35; }
.fcard .credit a { color: var(--text-muted); text-decoration: underline; }

/* =================================================================== v3.2: decks, dock, sticky headers, mobile */
/* ---------- overflow guards (nothing may widen the page) */
main > *, .split > *, .filters, .rk-tools { min-width: 0; }
.filters { max-width: 100%; }
.filters .seg { flex: 1 1 0; width: 100%; min-width: 0; }
html, body { overflow-x: clip; }

/* ---------- deck: full-height slides, mandatory snapping while a deck is on screen */
html.deck-mode { scroll-snap-type: y mandatory; scroll-padding-top: var(--hdr, 62px); }
html.deck-mode .ticker, html.deck-mode .progress { display: none; }
html.deck-mode main { padding-top: 0; padding-bottom: 0; }
html.deck-mode footer.site { scroll-snap-align: end; }
.deck { position: relative; }
.slide { position: relative; min-height: calc(100svh - var(--hdr, 62px)); scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 34px 0 40px; }
.slide.slide-tall { justify-content: flex-start; }
.s-head h2 { margin: 6px 0 0; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.01em; }
.s-lead { max-width: 860px !important; font-size: clamp(16px, 1.5vw, 19px) !important; line-height: 1.6; margin: 0; }
.s-note { color: var(--text-secondary); font-size: 14px; max-width: 900px; margin: 0; }
.s-fine { margin: 0; }
.s-gloss .eyebrow { margin-bottom: 10px; }
.glossary-row { display: flex; flex-wrap: wrap; gap: 8px; }
.s-full { width: 100%; }
.s-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.s-three.charts .chart-title { margin-top: 0; }
.takeaway { margin: 10px 0 0; font-size: 13.5px; color: var(--text-primary); }
.stat { padding: 22px 20px; border-left: 2px solid var(--accent); background: linear-gradient(90deg, rgba(34, 230, 255, .06), transparent); border-radius: 0 10px 10px 0; }
.stat b { display: block; font: 900 clamp(34px, 4.2vw, 58px)/1 var(--mono); letter-spacing: -.02em; }
.stat span { display: block; margin-top: 10px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.note-card { padding: 22px 22px 24px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); }
.note-card .n { font: 800 12px var(--mono); color: var(--accent); letter-spacing: .2em; }
.note-card h3 { margin: 8px 0 8px; font-size: 20px; }
.note-card p { margin: 0; color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }
.tier-card { display: grid; gap: 10px; padding: 22px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text-primary); }
.tier-card:hover { text-decoration: none; border-color: rgba(34, 230, 255, .45); }
.tier-card.featured { border-color: rgba(245, 200, 107, .55); }
.tier-card b { font: 900 42px var(--mono); }
.tier-card b small { font-size: 14px; color: var(--text-muted); font-weight: 600; }
.tier-card > span:last-child { color: var(--text-secondary); font-size: 14px; }
.tier-card .chip { justify-self: start; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.slide-end { align-items: flex-start; }
.scroll-cue { margin-top: 28px; font: 700 10.5px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--text-muted); }
.scroll-cue::after { content: ""; display: block; width: 1px; height: 34px; margin: 8px 0 0 18px; background: linear-gradient(var(--accent), transparent); }
.slide-hero .hero { margin: 0; min-height: 0; }

/* ---------- Tarantino chapter cards */
.chapter { position: relative; padding: 26px 0 6px; }
.ch-no { font: 800 12px var(--mono); letter-spacing: .5em; color: var(--accent); text-transform: uppercase; }
.ch-no::before { content: ""; display: inline-block; width: 46px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 14px; }
.ch-title { margin: 14px 0 10px; font: 900 clamp(40px, 7.2vw, 108px)/.95 "Bodoni 72", "Didot", "Bodoni MT", "Playfair Display", "Times New Roman", Georgia, serif;
  letter-spacing: -.02em; text-transform: uppercase; color: #f4f1ea; text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 40px rgba(244, 241, 234, .08); }
.ch-sub { margin: 0; font: italic 400 clamp(16px, 1.6vw, 21px)/1.5 Georgia, "Times New Roman", serif; color: var(--text-secondary); max-width: 760px; }
/* letterbox bars on chapter slides */
.slide:has(> .chapter)::before, .slide:has(> .chapter)::after { content: ""; position: absolute; left: -28px; right: -28px; height: 18px; background: #000; opacity: .55; pointer-events: none; }
.slide:has(> .chapter)::before { top: 0; }
.slide:has(> .chapter)::after { bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .slide > .chapter .ch-title { animation: chapterIn linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .slide > .chapter .ch-no, .slide > .chapter .ch-sub { animation: fadeUp linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .slide > :not(.chapter) { animation: slideOut linear both; animation-timeline: view(); animation-range: exit 0% exit 80%; }
  }
}
@keyframes chapterIn { from { opacity: 0; transform: scale(1.08); letter-spacing: .04em; } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes slideOut { to { opacity: .15; transform: scale(.97) translateY(-24px); } }

/* ---------- deck navigation: dot rail + counter (desktop), progress bar (mobile) */
.deck-nav { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 30; display: grid; justify-items: center; gap: 12px; }
.deck-nav .dots { display: grid; gap: 10px; }
.deck-nav .dots button { position: relative; width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; cursor: pointer; }
.deck-nav .dots button::before { content: ""; position: absolute; inset: -8px; }   /* bigger hit target */
.deck-nav .dots button.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px var(--accent); }
.deck-nav .tip { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 11px var(--sans); color: var(--text-secondary);
  background: var(--surface-2); border: 1px solid var(--line-2); padding: 4px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.deck-nav .dots button:hover .tip, .deck-nav .dots button:focus-visible .tip { opacity: 1; }
.deck-nav .count { font: 700 10.5px var(--mono); color: var(--text-muted); }
.deck-nav .count b { color: var(--text-primary); }
.deck-nav .bar { display: none; }

/* ---------- landing story: one sticky stage beside four snapping slides */
.story-deck { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px; }
.story-slides .slide { justify-content: center; }
.story-copy { margin: 0; font-size: clamp(16px, 1.5vw, 19px); color: var(--text-secondary); max-width: 460px; line-height: 1.6; }
.story-stage-col { position: relative; }
.story-stage-col .story-vis { position: sticky; top: calc(var(--hdr, 62px) + (100svh - var(--hdr, 62px) - 52vh) / 2); }
.tile-inline { display: none; }
.tile-inline .tile { position: static; transform: none; opacity: 1; width: 100%; }

/* ---------- Board: floating control dock */
.dock { position: fixed; right: 0; top: 50%; z-index: 25; width: 290px; transform: translate(calc(100% - 0px), -50%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.dock.open { transform: translate(0, -50%); }
.dock-tab { position: absolute; left: -38px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; padding: 14px 8px; border-radius: 0 10px 10px 0;
  background: rgba(16, 21, 29, .95); border: 1px solid var(--line-2); border-left: 0; color: var(--accent); font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.dock-body { display: grid; gap: 14px; padding: 18px; max-height: 80vh; overflow: auto; background: rgba(16, 21, 29, .94); backdrop-filter: blur(14px);
  border: 1px solid var(--line-2); border-right: 0; border-radius: 12px 0 0 12px; box-shadow: -20px 0 60px rgba(0, 0, 0, .4); }
.dock-body .field input[type=range] { width: 100%; }
.dock-body .field input[type=number] { width: 100%; }
.dock-body .note { margin: 0; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.dock-lock { display: grid; gap: 10px; justify-items: start; }
.dock-lock svg { width: 22px; height: 22px; color: var(--accent); }
.dock-lock p { margin: 0; font-size: 13px; color: var(--text-secondary); }
.dock-fab { display: none; }

/* ---------- Board: sticky column-header strip (clone of the real thead) */
.sticky-head { position: sticky; top: var(--sh-top, 112px); height: 0; z-index: 4; }
.sticky-head .in { overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .12s; background: rgba(15, 19, 26, .97); border-bottom: 1px solid var(--line-2); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.sticky-head.show .in { opacity: 1; }
.sticky-head table { table-layout: fixed; border-collapse: collapse; }

/* ---------- Rankings: profile panel */
.profile { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: end; }
.portrait { width: 160px; height: 160px; border-radius: 18px; object-fit: cover; object-position: 50% 15%; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px rgba(0, 0, 0, .35); }
.av.portrait { font-size: 48px; display: grid; place-items: center; }
.pname { margin: 4px 0 2px; font-size: 22px; line-height: 1.15; }
.pbio { font-size: 12.5px; color: var(--text-secondary); }
.pnums { display: flex; gap: 16px; margin-top: 12px; }
.pnums b { display: block; font: 800 20px var(--mono); }
.pnums span { font-size: 11px; color: var(--text-muted); }
.pcredit { font-size: 10.5px; color: var(--text-muted); margin: 8px 0 0; }
.pcredit a { color: var(--text-muted); text-decoration: underline; }
.split { grid-template-columns: minmax(0, 1fr) 460px; }
.chart .series-dash { fill: none; stroke-width: 2; stroke-dasharray: 5 5; opacity: .9; }
.chart .yr { stroke: var(--line); stroke-dasharray: 2 4; }

/* ---------- mobile fight cards (Board under 760px) */
.event.cards { padding-bottom: 6px; }
.fc { padding: 14px 16px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.fc .wc { font: 700 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.fc-fighters { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.fc-fighters .vs { font: 700 11px var(--mono); color: var(--text-muted); }
.fc-f { display: flex; gap: 8px; align-items: center; min-width: 0; }
.fc-f .name { font-weight: 700; font-size: 14px; line-height: 1.2; }
.fc-f .meta { font: 500 11px var(--mono); color: var(--text-muted); }
.fc-preds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fc .k { font: 700 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.fc-bet { font-size: 13px; }
.fc-odds { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; scroll-snap-type: x proximity; }
.fc-odds::-webkit-scrollbar { display: none; }
.oc { flex: none; display: grid; gap: 2px; min-width: 74px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); scroll-snap-align: start; text-align: center; }
.oc i { font: 600 9.5px var(--sans); font-style: normal; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc b { font: 700 13px var(--mono); }
.oc b.best { color: var(--money); text-shadow: 0 0 10px rgba(61, 255, 162, .45); }
.oc.out { opacity: .45; text-decoration: line-through; }

/* ---------- tablet + mobile */
@media (max-width: 1099px) {
  .dock { top: auto; bottom: 0; right: 0; left: 0; width: auto; transform: translateY(105%); }
  .dock.open { transform: none; }
  .dock-tab { display: none; }
  .dock-body { border-radius: 16px 16px 0 0; border: 1px solid var(--line-2); border-bottom: 0; max-height: 70vh; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .dock-fab { display: inline-flex; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 26; align-items: center; gap: 6px;
    padding: 12px 16px; border-radius: 999px; border: 1px solid rgba(34, 230, 255, .5); background: rgba(16, 21, 29, .95); color: var(--accent); font: 700 13px var(--sans);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5); cursor: pointer; }
  .split { grid-template-columns: 1fr; }
  .s-three { grid-template-columns: 1fr; }
  .story-deck { grid-template-columns: 1fr; }
  .story-stage-col { display: none; }
  .tile-inline { display: block; }
  .profile { grid-template-columns: 120px 1fr; }
  .portrait { width: 120px; height: 120px; }
}
@media (max-width: 760px) {
  main { padding: 16px 14px; }
  header.top { padding: 0 12px; gap: 10px; }
  .page-head h1 { font-size: 22px; }
  .slide { padding: 22px 0 28px; gap: 16px; }
  .deck-nav { right: 0; left: 0; top: auto; bottom: 0; transform: none; display: block; }
  .deck-nav .dots, .deck-nav .count { display: none; }
  .deck-nav .bar { display: block; height: 3px; background: var(--line); }
  .deck-nav .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #6c5cff); transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s; }
  .ch-no { letter-spacing: .3em; }
  .ch-no::before { width: 24px; margin-right: 10px; }
  .hero { grid-template-columns: 1fr; }
  .hero-art { width: min(100%, 340px); }
  .sim-grid { grid-template-columns: 1fr; }
  .sim-out { grid-template-columns: repeat(2, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hide-sm { display: none; }
  td.who .sub { display: none; }
  /* arbitrage rows -> cards */
  table.cards-sm thead { display: none; }
  table.cards-sm, table.cards-sm tbody, table.cards-sm tr { display: block; width: 100%; }
  table.cards-sm tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  table.cards-sm td { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 4px 0; border: 0; text-align: right; }
  table.cards-sm td::before { content: attr(data-label); font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); text-align: left; }
  table.cards-sm td:first-child { display: block; text-align: left; }
  table.cards-sm td:first-child::before { display: none; }
  .filters, .rk-tools { gap: 8px; }
  .rk-tools input[type=text] { margin-left: 0 !important; width: 100% !important; }
  .profile { grid-template-columns: 96px 1fr; }
  .portrait { width: 96px; height: 96px; border-radius: 14px; }
  .plans { grid-template-columns: 1fr !important; }
  .fcard { width: min(300px, calc(100vw - 20px)); }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  .btn, .seg button, .toggle2 button { min-height: 40px; }
  .event-head { flex-wrap: wrap; gap: 6px 10px; }
  footer.site .in { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* decks: entrances are time-based and fire when a slide becomes active (snapped slides don't scroll,
   so scroll-scrubbed assembly would freeze mid-flight) */
@media (prefers-reduced-motion: no-preference) {
  .deck .asm > *, .deck .asm-item {
    animation: none !important; opacity: 0; transform: translate(var(--fx), var(--fy)) scale(var(--fs)) rotate(var(--fr));
    transition: opacity .55s ease-out, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--k, 0) * 55ms);
  }
  .deck .slide.is-on .asm > *, .deck .slide.is-on .asm-item { opacity: 1; transform: none; }
}

/* mobile board: fights first (KPIs become a swipeable strip, intro copy hidden) */
@media (max-width: 760px) {
  body.on-board .page-head p { display: none; }
  body.on-board .kpis { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  body.on-board .kpis > .kpi { flex: 0 0 62%; scroll-snap-align: start; }
}

/* ---------- Rankings: "Project to today" switch + evidence panel */
.switch { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-secondary); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .sw { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-2); transition: background-color .2s; }
.switch .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-secondary); transition: transform .2s, background-color .2s; }
.switch input:checked + .sw { background: rgba(34, 230, 255, .25); border-color: rgba(34, 230, 255, .6); }
.switch input:checked + .sw::after { transform: translateX(16px); background: var(--accent); }
.switch input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
details.sig { margin: -2px 0 12px; font-size: 12.5px; color: var(--text-secondary); }
details.sig > summary { cursor: pointer; list-style: none; display: block; line-height: 1.5; }
details.sig > summary::-webkit-details-marker { display: none; }
details.sig .dot { display: inline-block; margin-right: 6px; vertical-align: middle; }
details.sig .more { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
details.sig .sig-body { margin-top: 10px; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); }
details.sig .sig-body p { margin: 0 0 10px; }
details.sig table td, details.sig table th { font-size: 12px; white-space: nowrap; }

/* Board uses (nearly) the full page width; other pages keep the 1440px reading width */
body.on-board main { max-width: none; padding-left: clamp(20px, 4vw, 96px); padding-right: clamp(20px, 4vw, 96px); }
body.on-board.dock-open main { padding-right: clamp(20px, 4vw, 96px); }   /* centered; the dock floats over it */
@media (max-width: 760px) { body.on-board main { padding-left: 12px; padding-right: 12px; } }


/* =================================================================== mobile portrait fixes */
@media (max-width: 760px) {
  /* slides now fit one phone screen, so keep the full slide-by-slide snapping (mandatory, set above) */
  /* hero fits one screen: the octagon becomes a faint backdrop behind the copy */
  .slide-hero { overflow: hidden; }
  .slide-hero .hero { display: block; position: relative; }
  .slide-hero .hero-copy { position: relative; z-index: 1; }
  .slide-hero .hero-art { position: absolute; z-index: 0; width: 125vw; max-width: none; left: 50%; top: 50%; transform: translate(-50%, -42%); opacity: .22; pointer-events: none; }
  .slide-hero .hero-core { display: none; }
  .slide-hero .scroll-cue { margin-top: 18px; }
  .hero h1 { font-size: 30px; }
  /* simulator: compact so it reads as one block */
  .sim { padding: 14px; }
  .sim .sim-say { display: none; }
  .sim-ctl { gap: 10px; }
  .sim-out .big .v { font-size: 40px; }
  .sim-out .mini { padding: 8px 10px; }
  .sim-out .mini .v { font-size: 15px; }
  .s-head h2 { font-size: 20px; }
}
/* Elo: profile as a bottom-sheet modal on small screens */
@media (max-width: 980px) {
  #rkSide { display: none; }
  #rkSide.open { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 56; max-height: 88vh; overflow-y: auto;
    border-radius: 18px 18px 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(0, 0, 0, .6); animation: sheetUp .25s ease-out; }
  .sheet-bg { position: fixed; inset: 0; z-index: 55; background: rgba(3, 5, 8, .6); backdrop-filter: blur(3px); }
  body.sheet-open { overflow: hidden; }
}
.sheet-close { display: none; }
@media (max-width: 980px) {
  .sheet-close { display: grid; place-items: center; position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-primary); font-size: 20px; cursor: pointer; }
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #rkSide.open { animation: none; } }

/* phones: three-up rows become a horizontal swipe carousel so every slide stays one screen tall */
@media (max-width: 760px) {
  .slide .s-three { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -14px; padding: 2px 14px 6px; }
  .slide .s-three::-webkit-scrollbar { display: none; }
  .slide .s-three > * { flex: 0 0 86%; scroll-snap-align: center; }
  .slide .s-three.charts > * { flex-basis: 92%; }
  .note-card p { font-size: 13.5px; }
  .ch-title { font-size: clamp(34px, 11vw, 52px); }
  .slide { gap: 14px; padding: 16px 0 20px; }
  .stat b { font-size: 34px; }
  .stat { padding: 16px; }
}

@media (max-width: 760px) {
  .slide-tall .ledger-wrap .scroll { max-height: calc(100svh - var(--hdr, 87px) - 250px) !important; }
  .slide-tall .cta-row .btn { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 760px) and (max-height: 800px) {
  .s-head h2 { display: none; }
  .sim-ctl .field { gap: 4px; }
  .sim-out { gap: 8px; }
  .sim-out .big .v { font-size: 34px; }
}

/* ledger slide: exactly one screen; the table takes the remaining space and scrolls inside */
.slide.slide-tall { height: calc(100svh - var(--hdr, 62px)); min-height: 0; }
.slide-tall .ledger-wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.slide-tall .ledger-wrap .scroll { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow: auto; }

.tile-inline .tile { padding: 16px 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid rgba(34, 230, 255, .35); box-shadow: 0 0 30px rgba(34, 230, 255, .08); }
.tile-inline .tk { font: 700 10.5px var(--mono); letter-spacing: .16em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 10px; }

/* =================================================================== v3.4: desktop octagon size, landscape phones, stickier mobile decks */
/* desktop: the octagon scales with the slide (was capped at 560px) */
@media (min-width: 981px) {
  .slide-hero .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .slide-hero .hero-art { width: min(100%, calc(100svh - var(--hdr, 62px) - 120px), 720px); }
}
/* nav labels never wrap mid-label (tablet / landscape widths) */
nav.main a { white-space: nowrap; }
@media (max-width: 1100px) { nav.main { overflow-x: auto; scrollbar-width: none; } nav.main::-webkit-scrollbar { display: none; } }

/* touch devices: slides fill the *visible* viewport (dynamic height), so after a swipe settles you see one slide only */
@media (pointer: coarse) {
  @supports (height: 100dvh) {
    .slide { min-height: calc(100dvh - var(--hdr, 62px)); }
    .slide.slide-tall { height: calc(100dvh - var(--hdr, 62px)); }
  }
}

/* ---------- landscape phones (short and wide) */
@media (orientation: landscape) and (max-height: 520px) {
  /* header: one compact row, nav centered horizontally and vertically */
  header.top { height: 48px; padding: 0 14px; gap: 10px; flex-wrap: nowrap; }
  .brand .word { display: none; }
  nav.main { flex: 1 1 auto; justify-content: center; align-items: center; align-self: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  nav.main a { padding: 6px 9px; font-size: 13px; display: flex; align-items: center; }
  nav.main a.active::after { bottom: 4px; left: 9px; right: 9px; }
  .top .right { min-width: 0; margin-left: 0; gap: 8px; }
  #statusPill { display: none; }
  #acct { min-width: 0; }
  #acct .btn.sm { padding: 5px 10px; font-size: 12px; }
  .progress { top: 48px; }
  .ticker { display: none; }

  /* decks: two columns (chapter left, content right), compact type */
  html.deck-mode main { padding-left: 18px; padding-right: 44px; }
  .slide { padding: 10px 0; gap: 10px; }
  .slide:has(> .chapter) { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 22px; row-gap: 8px; align-content: center; }
  .slide > .chapter { grid-column: 1; grid-row: 1 / span 4; align-self: center; padding: 0; }
  .slide:has(> .chapter) > :not(.chapter) { grid-column: 2; }
  .ch-title { font-size: clamp(26px, 6.2vh + 1.2vw, 46px); margin: 8px 0 6px; }
  .ch-sub { font-size: 13.5px; }
  .ch-no { font-size: 10px; letter-spacing: .32em; }
  .slide:has(> .chapter)::before, .slide:has(> .chapter)::after { height: 8px; }
  .s-lead { font-size: 13.5px !important; line-height: 1.5; }
  .s-note, .story-copy { font-size: 12.5px; }
  .s-fine, .glossary-row .gl { font-size: 11.5px; }
  .gl { padding: 3px 8px; }
  .s-three { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .s-three::-webkit-scrollbar { display: none; }
  .s-three > * { flex: 0 0 78%; scroll-snap-align: start; }
  .note-card { padding: 14px; } .note-card h3 { font-size: 16px; margin: 4px 0; } .note-card p { font-size: 12.5px; line-height: 1.45; }
  .stat { padding: 12px; } .stat b { font-size: 28px; } .stat span { font-size: 12px; margin-top: 6px; }
  .tier-card { padding: 14px; gap: 6px; } .tier-card b { font-size: 28px; }
  .s-three.charts .chart-sub, .s-three.charts .takeaway { display: none; }
  .s-three.charts .panel.pad { padding: 10px 12px; }
  .cta-row .btn { padding: 7px 12px; }
  /* hero: copy left, octagon right */
  .slide-hero .hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 14px; align-items: center; }
  .slide-hero .hero-art { position: relative; width: min(100%, calc(100dvh - 90px)); transform: none; left: auto; top: auto; opacity: 1; }
  .slide-hero .hero-core { display: grid; } .hero-core .v { font-size: 40px; }
  .hero h1 { font-size: 24px; margin: 6px 0 8px; }
  .hero p { font-size: 13px; margin: 0; }
  .hero .cta { margin: 10px 0 8px; } .hero-stats b { font-size: 18px; } .hero-stats { gap: 18px; }
  .scroll-cue { display: none; }
  /* landing story: hide the big stage, show the inline tile in the right column */
  .story-deck { grid-template-columns: 1fr; }
  .story-stage-col { display: none; }
  .tile-inline { display: block; }
  /* simulator: controls left, results right; the chart and sentence are dropped to fit */
  .s-head h2 { display: none; }
  .sim { padding: 10px 12px; }
  .sim-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .sim-ctl { gap: 6px; } .sim-ctl .field { gap: 2px; font-size: 11px; }
  .sim-ctl input[type=number] { padding: 4px 8px; }
  .toggle2 button { padding: 5px 9px; font-size: 12px; min-height: 0; }
  .sim-out { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .sim-out .big .v { font-size: 30px; } .sim-out .big .s { font-size: 12px; }
  .sim-out .mini { padding: 6px 8px; } .sim-out .mini .v { font-size: 14px; }
  .sim .sim-say, #simChart { display: none; }
  .luck { padding: 8px 10px !important; } .luck .sim-say { font-size: 12px; margin: 4px 0 0; }
  .dotplot { max-height: 34vh; }
  .callout.s-note { padding: 8px 10px; }
  .deck-nav { right: 8px; } .deck-nav .dots { gap: 7px; } .deck-nav .dots button { width: 8px; height: 8px; }
  /* sheets / dock fit the short screen */
  #rkSide.open { max-height: 92vh; }
  .dock-body { max-height: 80vh; }
}
@media (orientation: landscape) and (max-height: 520px) { nav.main { order: 0; width: auto; } header.top { padding-top: 0; padding-bottom: 0; } }

/* mobile board: fight cards snap under their event header */
/* (mobile board card snapping is JS-driven: see boardSnap in app.js) */
/* profile sheet: sized to the *visible* viewport; the close button stays pinned while the sheet scrolls */
@media (max-width: 980px) {
  #rkSide.open { max-height: 88vh; max-height: 88dvh; padding-top: 0; }
  #rkSide.open .sheet-close { position: sticky; top: 0; float: right; margin: 10px -4px 0 0; z-index: 2; }
  #rkSide.open .profile { padding-top: 22px; }
}

/* charts inside decks always render fully (the scroll-linked draw-in could stop half-drawn on a snapped slide) */
.deck .chart .series { animation: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }

/* =================================================================== v3.5 */
/* ---------- inputs never overflow their box */
input, select, textarea { max-width: 100%; min-width: 0; box-sizing: border-box; }
.field, .kpi, .kpi > *, .sim-ctl .row > * { min-width: 0; }
.kpi .field input { width: 100%; }
.push { margin-left: auto; }

/* ---------- search box with a clear button */
.search { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.search input { width: 100%; padding-right: 34px; }
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search .clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: 0;
  background: var(--surface-3); color: var(--text-secondary); font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.search .clear:hover { color: var(--text-primary); background: var(--line-2); }

/* ---------- avatars match the photo they stand in for (no resizing when a photo is missing) */
td.who .av, td.who .pic { width: 34px; height: 34px; border-radius: 9px; }
td.who { min-height: 46px; }
.chart-title .av, .chart-title .pic.lg { width: 30px; height: 30px; }
.tph .av, .tph .tpic { width: 64px; height: 64px; border-radius: 12px; font-size: 18px; object-fit: cover; object-position: 50% 15%; }

/* ---------- landing scroll cue: centered, gently floating; on phones a sharper downward bounce every 20 s */
.slide-hero { position: relative; }
.scroll-cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px;
  background: none; border: 0; color: var(--text-muted); cursor: pointer; font: 700 10.5px var(--mono); letter-spacing: .3em; text-transform: uppercase; padding: 8px 14px; margin: 0; }
.scroll-cue::after { content: none; }
.scroll-cue svg { color: var(--accent); }
.scroll-cue:hover { color: var(--text-primary); }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue { animation: cueFloat 2.4s ease-in-out infinite; }
  @media (max-width: 980px) { .scroll-cue svg { animation: cuePoint 20s ease-in-out infinite; } }
}
@keyframes cueFloat { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@keyframes cuePoint { 0%, 93% { transform: none; } 94.5% { transform: translateY(14px); } 96% { transform: translateY(0); } 97.5% { transform: translateY(10px); } 99% { transform: translateY(0); } }
@media (max-width: 760px) { .slide-hero .scroll-cue { bottom: 10px; } }

/* ---------- arbitrage cards (mobile): consistent rows */
@media (max-width: 760px) {
  table.cards-sm tr { display: grid; row-gap: 6px; padding: 14px 16px; }
  table.cards-sm td { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; padding: 0; min-height: 26px; text-align: right; }
  table.cards-sm td::before { text-align: left; }
  table.cards-sm td:first-child { grid-template-columns: 1fr; text-align: left; padding-bottom: 4px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
  table.cards-sm td .legs { justify-items: end; }
  table.cards-sm td .legs .leg { text-align: right; }
}

/* ---------- board: book filter chips, viable highlights, dimmed books, vs button */
.book-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.bchip { font: 600 11px var(--sans); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-muted); cursor: pointer; }
.bchip.on { color: var(--text-primary); border-color: rgba(34, 230, 255, .5); background: rgba(34, 230, 255, .1); }
.dock-body .field > span a { font-weight: 500; }
.odds-cell .o.viable, .tbooks .bo.viable { box-shadow: inset 0 0 0 1px rgba(61, 255, 162, .55); background: rgba(61, 255, 162, .06); border-radius: 6px; }
body.hl-top .odds-cell .o.viable:not(.rec), body.hl-top .tbooks .bo.viable { box-shadow: none; background: none; }
.odds-cell .o.rec { box-shadow: inset 0 0 0 2px var(--money) !important; }
th.book.off, td.odds-cell.off { opacity: .38; }
.vs-btn { display: block; margin: 4px 0 4px 34px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--accent); font: 800 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.vs-btn:hover { border-color: var(--accent); background: rgba(34, 230, 255, .1); }
.fc-fighters .vs.vs-btn { margin: 0; padding: 6px 10px; }

/* ---------- tale of the tape modal */
.tape-bg { position: fixed; inset: 0; z-index: 70; background: rgba(3, 5, 8, .72); backdrop-filter: blur(5px); display: grid; place-items: center; padding: 20px; }
.tape { position: relative; width: min(760px, 100%); max-height: 92vh; max-height: 92dvh; overflow-y: auto; padding: 22px 24px 18px; }
.tape-x { display: grid !important; place-items: center; position: sticky; top: 0; float: right; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-primary); font-size: 20px; cursor: pointer; z-index: 2; }
.tape-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 14px 0 6px; }
.tf { display: grid; justify-items: center; text-align: center; gap: 6px; }
.tn { font-weight: 750; font-size: 16px; }
.tm { font: 500 11.5px var(--mono); color: var(--text-muted); }
.tvs { font: 900 28px "Bodoni 72", Didot, Georgia, serif; color: var(--accent); }
.tsec { margin: 16px 0 8px; font: 700 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.wbar { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; margin: 6px 0; }
.wl { font-size: 12.5px; color: var(--text-secondary); }
.wtrack { display: flex; height: 26px; border-radius: 7px; overflow: hidden; background: var(--surface-3); }
.wtrack i { display: flex; align-items: center; font-style: normal; font: 700 11.5px var(--mono); padding: 0 8px; min-width: 0; }
.wtrack .wa { background: linear-gradient(90deg, rgba(23, 162, 192, .65), rgba(23, 162, 192, .35)); color: #e8f9ff; }
.wtrack .wb { flex: 1; justify-content: flex-end; background: linear-gradient(90deg, rgba(144, 133, 233, .3), rgba(144, 133, 233, .6)); color: #f0eeff; }
.wtrack.locked { align-items: center; gap: 8px; padding: 0 10px; color: var(--text-muted); font: 700 11px var(--mono); }
.wtrack.locked svg { width: 14px; height: 14px; }
.trow { display: grid; grid-template-columns: 1fr minmax(110px, auto) 1fr; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.tv { font: 700 14px var(--mono); }
.tv.r { text-align: right; }
.tv.lead { color: var(--money); }
.tv small { font: 500 11px var(--sans); color: var(--text-muted); }
.tl { text-align: center; font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.tlock { display: inline-flex; gap: 6px; align-items: center; font: 700 11px var(--mono); color: var(--text-muted); }
.tlock svg { width: 13px; height: 13px; }
.verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.verdict > div { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 13px; line-height: 1.5; }
.verdict .k { font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.tbooks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.tb { display: grid; grid-template-columns: 1fr 64px 64px; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); font-size: 12.5px; }
.tb .bn { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb .bo { font: 700 13px var(--mono); text-align: center; padding: 2px 0; }
.tb .bo.best { color: var(--money); }
.tb.out { opacity: .45; text-decoration: line-through; }
.tb.off { opacity: .5; }
@media (max-width: 760px) {
  .tape-bg { padding: 0; place-items: end stretch; }
  .tape { width: 100%; border-radius: 18px 18px 0 0; max-height: 90vh; max-height: 90dvh; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); }
  .tape-x { margin: 10px -4px 0 0; }
  .tape > .eyebrow { padding-top: 20px; }
  .wbar { grid-template-columns: 1fr; gap: 4px; }
  .verdict { grid-template-columns: 1fr; }
  .tvs { font-size: 22px; }
  .tn { font-size: 14px; }
}

/* ---------- docs */
.docs { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 34px; align-items: start; max-width: 1180px; margin: 0 auto; }
.docs-toc { position: sticky; top: calc(var(--hdr, 62px) + 20px); }
.docs-toc nav { display: grid; gap: 18px; }
.toc-h { font: 700 10.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.toc-sec a { display: block; padding: 6px 10px; border-radius: 7px; color: var(--text-secondary); font-size: 14px; }
.toc-sec a:hover { background: var(--surface-2); color: var(--text-primary); text-decoration: none; }
.toc-sec a.on { background: rgba(34, 230, 255, .1); color: var(--text-primary); box-shadow: inset 2px 0 0 var(--accent); }
.docs-toc-toggle { display: none; }
.docs-body { min-width: 0; font-size: 15.5px; line-height: 1.7; }
.docs-body h1 { font-size: 34px; letter-spacing: -.02em; margin: 6px 0 6px; }
.docs-body h2 { font-size: 21px; margin: 32px 0 8px; }
.docs-body h3 { font-size: 15px; margin: 18px 0 6px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; }
.docs-body .lede { font-size: 18px; color: var(--text-secondary); margin: 0 0 18px; }
.docs-body .note { font-size: 13.5px; color: var(--text-muted); border-left: 2px solid var(--line-2); padding-left: 12px; }
.docs-body pre { background: #05070a; border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.55; }
.docs-body code { font-family: var(--mono); font-size: .9em; }
.docs-body :not(pre) > code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; }
.docs-pn { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); }
.docs-pn a { padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 9px; }
.ep { padding-top: 10px; border-top: 1px solid var(--line); margin-top: 26px; }
.ep h2 { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ep .verb { font: 800 11px var(--mono); padding: 3px 8px; border-radius: 6px; background: rgba(61, 255, 162, .15); color: var(--money); }
.ep-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 10px; }
.ep-toc a { font: 600 12.5px var(--mono); padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line-2); }
.req { font: 700 9.5px var(--mono); color: var(--warn); text-transform: uppercase; letter-spacing: .08em; }
dl.fields { display: grid; grid-template-columns: minmax(160px, auto) 1fr; gap: 6px 16px; font-size: 14px; }
dl.fields dt { margin: 0; } dl.fields dd { margin: 0; color: var(--text-secondary); }
@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; gap: 14px; }
  .docs-toc { position: sticky; top: var(--hdr, 62px); z-index: 5; background: rgba(7, 9, 13, .95); backdrop-filter: blur(8px); margin: 0 -14px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
  .docs-toc-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-primary); font: 600 13px var(--sans); cursor: pointer; }
  .docs-toc nav { display: none; padding-top: 10px; max-height: 60vh; overflow-y: auto; }
  .docs-toc.open nav { display: grid; }
  .docs-body h1 { font-size: 27px; }
  dl.fields { grid-template-columns: 1fr; } dl.fields dd { margin-bottom: 8px; }
}

/* scroll cue: a direct child of the (one-screen) hero slide, so it hugs the bottom on every screen and sits above the copy */
.slide-hero > .scroll-cue { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 5; margin: 0; }
@media (max-width: 760px) { .slide-hero > .scroll-cue { bottom: max(6px, env(safe-area-inset-bottom)); } }
@media (orientation: landscape) and (max-height: 520px) { .slide-hero > .scroll-cue { display: grid; bottom: 4px; } }
.search input[type=search] { -webkit-appearance: none; appearance: none; }

.dock-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#savePrefs.saved { border-color: rgba(61, 255, 162, .6); color: var(--money); }
.saved-note { color: var(--money) !important; }

/* =================================================================== v3.6: component slides + richer docs */
/* ---------- comparison bars (landing + docs) */
.cmp { display: grid; gap: 8px; }
.cmp-row { display: grid; grid-template-columns: 130px 1fr 64px; gap: 10px; align-items: center; font-size: 13.5px; }
.cmp-row .cl { color: var(--text-secondary); }
.cmp-row .cb { height: 14px; border-radius: 7px; background: var(--surface-3); overflow: hidden; }
.cmp-row .cb i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, rgba(109, 122, 141, .6), rgba(109, 122, 141, .9)); }
.cmp-row.us .cb i { background: linear-gradient(90deg, rgba(34, 230, 255, .55), var(--accent)); box-shadow: 0 0 14px rgba(34, 230, 255, .35); }
.cmp-row b { font: 800 14px var(--mono); text-align: right; }
.cmp-row.us b { color: var(--accent); }
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cmp-grid h5 { margin: 0 0 8px; font: 700 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

/* ---------- landing component slides */
.slide.comp .comp-vis { display: grid; gap: 14px; max-width: 980px; }
.comp-stat { margin: 0; font-size: 15px; color: var(--text-secondary); max-width: 860px; }
.comp-stat b { color: var(--text-primary); }
.comp-note { color: var(--text-secondary); font-size: 14px; align-self: center; }
.funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; align-items: stretch; }
.funnel > div { position: relative; display: grid; place-content: center; text-align: center; padding: 18px 10px; background: var(--surface-2); border: 1px solid var(--line-2);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); margin-right: -6px; }
.funnel > div:first-child { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.funnel > div:last-child { background: rgba(34, 230, 255, .12); border-color: rgba(34, 230, 255, .5); }
.funnel b { font: 900 clamp(26px, 3vw, 40px) var(--mono); }
.funnel > div:last-child b { color: var(--accent); }
.funnel span { font-size: 12.5px; color: var(--text-secondary); }
.ev-line, .arb-legs { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.ev-line .evx, .arb-legs > div:not(.plus) { flex: 1 1 150px; display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); }
.ev-line span, .arb-legs span { font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.ev-line b, .arb-legs b { font: 800 22px var(--mono); }
.ev-line small, .arb-legs small { color: var(--text-secondary); font-size: 12px; }
.ev-line .win, .arb-legs .win { border-color: rgba(61, 255, 162, .5) !important; background: rgba(61, 255, 162, .07) !important; }
.ev-line .win b, .arb-legs .win b { color: var(--money); }
.evarrow, .arb-legs .plus { align-self: center; font: 800 18px var(--mono); color: var(--text-muted); }
.code-snip { margin: 0; background: #05070a; border: 1px solid var(--line-2); border-radius: 12px; padding: 16px 18px; overflow-x: auto; font: 13px/1.6 var(--mono); color: var(--text-secondary); }
@media (max-width: 760px) {
  .cmp-grid { grid-template-columns: 1fr; gap: 12px; }
  .cmp-row { grid-template-columns: 96px 1fr 52px; font-size: 12px; }
  .funnel { grid-template-columns: repeat(2, 1fr); row-gap: 6px; }
  .funnel > div, .funnel > div:first-child { clip-path: none; margin: 0; border-radius: 10px; padding: 12px 8px; }
  .ev-line .evx, .arb-legs > div:not(.plus) { flex-basis: 40%; padding: 10px 12px; } .ev-line b, .arb-legs b { font-size: 17px; }
  .evarrow, .arb-legs .plus { display: none; }
  .code-snip { font-size: 11px; padding: 12px; }
  .comp-stat { font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .cmp-grid { gap: 10px; } .cmp-row { font-size: 11.5px; } .funnel b { font-size: 20px; } .funnel > div { padding: 8px 6px; }
  .ev-line .evx, .arb-legs > div:not(.plus) { padding: 8px 10px; } .ev-line b, .arb-legs b { font-size: 15px; }
  .code-snip { font-size: 10.5px; padding: 8px 10px; max-height: 40vh; } .comp-stat { font-size: 12px; } .comp-note { display: none; }
}

/* ---------- docs TOC: collapsible sections + API endpoint sub-list that slides out */
.docs-toc nav { gap: 6px; }
details.toc-sec { border-radius: 10px; }
details.toc-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; }
details.toc-sec > summary::-webkit-details-marker { display: none; }
details.toc-sec > summary::after { content: "▸"; color: var(--text-muted); transition: transform .2s; }
details.toc-sec[open] > summary::after { transform: rotate(90deg); }
details.toc-sec > summary:hover { background: var(--surface-2); }
details.toc-sec > a { margin-left: 8px; }
.toc-eps { display: grid; gap: 2px; margin: 2px 0 6px 18px; padding-left: 8px; border-left: 1px solid var(--line-2);
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.toc-eps.open { max-height: 600px; opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .toc-eps.open .toc-ep { animation: epIn .35s ease-out both; } .toc-eps.open .toc-ep:nth-child(n) { animation-delay: calc(var(--n, 0) * 30ms); } }
@keyframes epIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.toc-ep { display: flex !important; gap: 8px; align-items: center; padding: 4px 8px !important; font: 600 12.5px var(--mono) !important; }
.toc-ep .verb { font: 800 9px var(--mono); padding: 1px 5px; border-radius: 4px; background: rgba(61, 255, 162, .15); color: var(--money); }
.toc-ep.on { color: var(--text-primary) !important; background: rgba(34, 230, 255, .08); }

/* ---------- docs components */
.docs-body .callout { margin: 18px 0; padding: 14px 16px 14px 18px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); }
.docs-body .callout > b { display: block; margin-bottom: 4px; }
.docs-body .callout p { margin: 4px 0 0; color: var(--text-secondary); font-size: 14.5px; }
.docs-body .callout.tip { border-left-color: var(--accent); }
.docs-body .callout.warn { border-left-color: var(--warn); background: rgba(255, 181, 71, .06); }
.docs-body .callout.evidence { border-left-color: var(--money); background: rgba(61, 255, 162, .05); }
.docs-body .story { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; margin: 22px 0; padding: 18px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(34, 230, 255, .06), rgba(144, 133, 233, .05)); border: 1px solid var(--line-2); }
.docs-body .story figcaption > b { display: block; font-size: 17px; margin-bottom: 6px; }
.docs-body .story figcaption p { margin: 6px 0 0; font-size: 14.5px; color: var(--text-secondary); }
.dphoto { display: grid; gap: 4px; }
.dphoto img, .dphoto .av { width: 120px; height: 120px; border-radius: 14px; object-fit: cover; object-position: 50% 15%; font-size: 34px; display: grid; place-items: center; }
.dphoto small { font-size: 10px; line-height: 1.3; color: var(--text-muted); }
.dphoto small a { color: var(--text-muted); text-decoration: underline; }
.docs-body .pull { margin: 26px 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--accent); font: italic 400 21px/1.45 Georgia, "Times New Roman", serif; color: var(--text-primary); }
.docs-body .pull cite { display: block; margin-top: 8px; font: 600 12.5px var(--sans); font-style: normal; color: var(--text-muted); }
.docs-body .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 18px 0; }
.docs-body .stat-row .stat b { font-size: clamp(26px, 3.4vw, 38px); }
.docs-body ol.steps { counter-reset: st; list-style: none; padding: 0; display: grid; gap: 12px; margin: 16px 0; }
.docs-body ol.steps > li { counter-increment: st; position: relative; padding: 12px 14px 12px 52px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.docs-body ol.steps > li::before { content: counter(st); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 800 12px var(--mono); color: #04121a; background: var(--accent); }
.docs-body ol.steps > li > b { display: block; }
.docs-body figure.diagram, .docs-body figure.embed { margin: 22px 0; padding: 16px 18px; border-radius: 14px; background: var(--surface-1); border: 1px solid var(--line-2); }
.docs-body figure.diagram svg { display: block; width: 100%; height: auto; max-height: 420px; }
.docs-body figure figcaption { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.docs-body figure.diagram figcaption { margin: 10px 0 0; }
.docs-body .embed .dotplot { margin-top: 6px; }
.docs-body .calc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 6px 0 10px; }
.docs-body .calc-out p { margin: 6px 0 0; font-size: 14px; color: var(--text-secondary); }
.docs-body table.ltable { margin: 12px 0; }
.docs-body h2 { padding-top: 6px; border-top: 1px solid var(--line); }
.docs-body h1 + .lede + h2, .docs-body .lede + h2 { border-top: 0; }
.docs-pn a { display: grid; gap: 2px; min-width: 40%; }
.docs-pn a small { font: 700 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.docs-pn a.nx { text-align: right; }
@media (max-width: 760px) {
  .docs-body .story { grid-template-columns: 1fr; }
  .dphoto img, .dphoto .av { width: 96px; height: 96px; }
  .docs-body .pull { font-size: 18px; }
}

/* =================================================================== hardening: nothing may break out of its container */
img, svg, video, canvas, iframe { max-width: 100%; }
img { height: auto; }
pre { max-width: 100%; overflow-x: auto; }
main, #view, .panel, .slide, .docs, .docs-body, .modal, .tape, .dock-body, .fcard { min-width: 0; }
.docs-body { overflow-wrap: anywhere; word-break: normal; }
.docs-body > *, .docs-body figure, .docs-body .callout, .docs-body .story, .docs-body .stat-row { max-width: 100%; box-sizing: border-box; }
.docs-body table { display: block; max-width: 100%; overflow-x: auto; }
.docs-body ul, .docs-body ol { padding-left: 1.3em; }
.docs-body code { overflow-wrap: anywhere; }
.docs-body .callout, .docs-body .callout * { position: static; transform: none; white-space: normal; min-width: 0; }
.chart .tip { max-width: min(320px, 80vw); white-space: normal; }

/* every table in long-form content scrolls inside itself instead of widening the page */
.prose table, .legal table, .ltable { display: block; max-width: 100%; overflow-x: auto; }
.prose, .legal { overflow-wrap: anywhere; min-width: 0; }
.ch-title { transform-origin: 0 50%; }

/* =================================================================== v3.8 */
/* octagon: chips never clipped */
.hero-art svg { overflow: visible; }
/* scroll cue on any deck's first slide */
.slide > .scroll-cue { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 5; margin: 0; }
@media (max-width: 760px) { .slide > .scroll-cue { bottom: max(6px, env(safe-area-inset-bottom)); } }

/* phones: the four Board chapters are one slide with horizontally swiping panels */
@media (max-width: 760px), (orientation: landscape) and (max-height: 520px) {
  .story-slides.slide-group { position: relative; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-snap-align: start;
    scroll-snap-stop: always; overscroll-behavior-x: contain; scrollbar-width: none; min-height: calc(100svh - var(--hdr, 62px)); }
  @supports (height: 100dvh) { .story-slides.slide-group { min-height: calc(100dvh - var(--hdr, 62px)); } }
  .story-slides.slide-group::-webkit-scrollbar { display: none; }
  .story-slides.slide-group > .slide { flex: 0 0 100%; min-height: 0; scroll-snap-align: start; scroll-snap-stop: always; padding-bottom: 48px; }
  .story-slides.slide-group > .slide::before, .story-slides.slide-group > .slide::after { display: none; }
  .story-deck { position: relative; }
  .hpager { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 10px; }
  /* scroll-linked entrance animations can't run inside a sideways scroller: show panel content plainly */
  .slide-group .chapter .ch-title, .slide-group .chapter .ch-no, .slide-group .chapter .ch-sub, .slide-group .slide > :not(.chapter) { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hpager button[data-p] { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; cursor: pointer; }
  .hpager button[data-p]::before { content: ""; display: block; margin: -10px; width: 28px; height: 28px; }
  .hpager button[data-p].on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px var(--accent); }
  .hpager .swipe { font: 700 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); margin-left: 6px; transition: opacity .3s; }
  .hpager.done .swipe { opacity: 0; }
}
/* labels instead of chapter numbers keep the blue dash */
.ch-no { white-space: nowrap; }

/* horizontal strips never scroll vertically */
.seg, .fc-odds, body.on-board .kpis, nav.main, .book-chips, .docs-toc nav .toc-eps { overflow-y: hidden; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 520px) { .slide .s-three { overflow-y: hidden; } }
body.on-board .kpis { overscroll-behavior-x: contain; padding-bottom: 4px; }

/* bet controls: the toggle sits flush ON the screen edge */
.dock-tab { left: auto; right: 100%; }
@media (max-width: 1099px) {
  .dock-fab { right: 0; bottom: calc(96px + env(safe-area-inset-bottom)); border-radius: 12px 0 0 12px; border-right: 0; padding: 12px 14px 12px 16px; }
}

/* last Board panel on phones: point down to the rest of the deck */
.hpager .down { display: none; font: 700 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-left: 6px; align-items: center; gap: 4px; }
.hpager.last .swipe { display: none; }
.hpager.last .down { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) { .hpager.last .down svg { animation: cuePoint 3s ease-in-out infinite; } }
.hpager .down { background: none; border: 0; padding: 4px 2px; cursor: pointer; }

/* phones: the scroll cue is part of the slide's layout (never on top of text). Equal free space above the content
   and above the cue keeps the content centered with the cue at the bottom. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 520px) {
  .slide > .scroll-cue { position: static; transform: none; left: auto; bottom: auto; align-self: center; margin-top: auto; flex: none; padding: 4px 14px 2px; }
  .slide:has(> .scroll-cue) > :first-child { margin-top: auto; }
  .slide:has(> .scroll-cue) { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .slide:has(> .chapter) > .scroll-cue { grid-column: 1 / -1; grid-row: auto; justify-self: center; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px), (prefers-reduced-motion: no-preference) and (orientation: landscape) and (max-height: 520px) {
  .slide > .scroll-cue { animation: cueFloatFlow 2.4s ease-in-out infinite; }
}
@keyframes cueFloatFlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
/* landscape phones: the landing hero has no spare height; its cue floats (it clears the text there) */
@media (orientation: landscape) and (max-height: 520px) {
  .slide-hero > .scroll-cue { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); margin: 0 0 0 -42px; animation: none; }
  .slide-hero:has(> .scroll-cue) > :first-child { margin-top: 0; }
}

/* engine slides: the visual's supporting line and buttons follow the pieces in (same timing as the other deck slides),
   and the Elo comparison bars grow from zero once the slide is active */
@media (prefers-reduced-motion: no-preference) {
  .deck .slide.comp .comp-stat, .deck .slide.comp > .cta-row, .deck .slide#receipts > .cta-row, .deck .slide:has(> .s-three[data-asm="sides"]) > .cta-row {
    opacity: 0; transform: translateY(26px); transition: opacity .55s ease-out .35s, transform .8s cubic-bezier(.2, .8, .2, 1) .35s; }
  .deck .slide.is-on.comp .comp-stat, .deck .slide.is-on.comp > .cta-row, .deck .slide.is-on#receipts > .cta-row, .deck .slide.is-on:has(> .s-three[data-asm="sides"]) > .cta-row { opacity: 1; transform: none; }
  .deck .slide .cmp-row .cb i { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s cubic-bezier(.2, .8, .2, 1) .45s; }
  .deck .slide.is-on .cmp-row .cb i { transform: none; }
  .deck .slide-group .comp-stat, .deck .slide-group > .slide > .cta-row { opacity: 1 !important; transform: none !important; }
}

/* a fling can never carry past a slide: every deck slide (and the Board group on phones) is a hard stop */
html.deck-mode .deck .slide, html.deck-mode .deck .slide-group { scroll-snap-stop: always; }