/* Oracle next's typeface for everything: Rubik, one variable file (Latin), weights 400, 500 and 700 used */
@font-face { font-family: "Rubik"; src: url("fonts/rubik-latin-var.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  /* Layers, from the ground up: oracle next's elevation on Casino's near black */
  --ground: #09090b;
  --sheet: #131317;
  --sheet-head: #18181d;
  --raised: #24242b;
  --raised-hover: #2c2c34;
  --chonk: #050506;
  --well: #070708;
  --rail: #17181a;
  --line: #222229;
  --line-strong: #2f2f37;
  --ring: rgb(255 255 255 / 0.06);

  --text: #f3f3f5;
  --text-2: #b8b8bf;
  --text-3: #8d8d96;
  --text-4: #5c5c64;

  --lime: #c3ff00;
  --lime-hover: #d4ff4d;
  --lime-chonk: #7a9e00;
  --on-lime: #07070a;
  --live: #ff4757;
  --live-text: #ff8a94;
  --live-bg: rgb(255 71 87 / 0.14);
  --warn: #ffb13d;
  --warn-bg: rgb(255 177 61 / 0.12);
  --up: #c3ff00;
  --down: #ff6b6b;

  --sans: "Rubik", ui-sans-serif, system-ui, sans-serif;

  /* One radius scale: cards, buttons, cells; pills only for filter chips */
  --r-card: 14px;
  --r-btn: 10px;
  --r-cell: 7px;

  /* One control scale: 52 for the hero's call to action, 40 for everything else (44 on phone) */
  --h-lg: 52px;
  --h-ctl: 40px;

  --top-h: 64px;
  --gutter: 24px;
  --when: 96px;
  --dope: 128px;
  --book: clamp(78px, 7.4vw, 104px);
  --cols: var(--when) minmax(0, 1fr) var(--dope) repeat(5, var(--book));
  --pad: 20px;
}

* { box-sizing: border-box; }
html { background: var(--ground); color: var(--text); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body {
  margin: 0;
  font: 400 15px/1.35 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
main { flex: 1; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd { margin: 0; }
.wrap { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.ico { width: 14px; height: 14px; flex: none; }
.lime { color: var(--lime); }
.t-short { display: none; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* One chonky edge: a 1 px ring and a 3 px darker drop the face sits on */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h-ctl); padding: 0 16px;
  border: 0; border-radius: var(--r-btn);
  font: 500 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
  background: var(--raised); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--ring), 0 3px 0 var(--chonk);
  transform: translateY(-1px);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 90ms;
  cursor: pointer;
}
.btn:hover { background: var(--raised-hover); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--ring), 0 0 0 var(--chonk); }
.btn-lime { background: var(--lime); color: var(--on-lime); box-shadow: 0 3px 0 var(--lime-chonk); }
.btn-lime:hover { background: var(--lime-hover); }
.btn-lime:active { box-shadow: 0 0 0 var(--lime-chonk); }
.btn-lime:focus-visible { outline-color: var(--text); }
.btn-lg { height: var(--h-lg); padding: 0 24px; font-size: 17px; }
.btn-lg .ico { width: 16px; height: 16px; }

/* Info control: one small button, text on hover, focus or tap */
.tip { position: relative; display: inline-flex; }
.info {
  position: relative;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--raised); color: var(--text-2);
  font: 500 12px/1 var(--sans); cursor: pointer;
}
.info::before, .fresh::before, .gain::before { content: ""; position: absolute; inset: -9px; }
.tip.up .tip-pop { top: auto; bottom: calc(100% + 10px); }
.fresh, .gain { position: relative; }
@media (max-width: 760px) { .fresh::before, .gain::before { inset: -6px -4px; } }
.info:hover, .tip.open .info { color: var(--text); background: var(--raised-hover); }
.tip-pop {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 40;
  width: min(280px, calc(100vw - 32px));
  padding: 12px 14px; border-radius: var(--r-cell);
  background: #26262d; color: var(--text);
  box-shadow: 0 0 0 1px var(--line-strong), 0 12px 32px rgb(0 0 0 / 0.55);
  font: 400 13px/1.4 var(--sans); text-align: left; white-space: normal;
  display: none; transform: translateX(var(--shift, 0px));
}
.tip-r .tip-pop { left: auto; right: 0; }
.tip:not(.shut):hover .tip-pop, .tip:not(.shut):focus-within .tip-pop, .tip.open .tip-pop { display: block; }
.tip-key.tip-pop { display: none; }
.tip:not(.shut):hover .tip-key, .tip:not(.shut):focus-within .tip-key, .tip.open .tip-key { display: grid; }

/* Header: A's content at B's height; neutral button, so the hero owns the one lime call to action */
.top { position: sticky; top: 0; z-index: 30; background: var(--ground); box-shadow: 0 1px 0 var(--line); }
.top-in { height: var(--top-h); display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; min-height: 44px; color: var(--text); }
.brand svg { width: 104px; height: 27px; display: block; }
.site-name { font: 500 15px/1 var(--sans); color: var(--text-2); padding-left: 14px; box-shadow: inset 1px 0 0 var(--line-strong); white-space: nowrap; }
.fresh-tip { margin-left: auto; }
.fresh {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line);
  font: 500 13px/1 var(--sans); color: var(--text-2); cursor: default; white-space: nowrap;
}
.fresh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-4); flex: none; }
.fresh[data-state="ok"] .fresh-dot { background: var(--lime); box-shadow: 0 0 0 3px rgb(195 255 0 / 0.16); }
.fresh[data-state="old"], .fresh[data-state="down"] { color: var(--warn); background: var(--warn-bg); box-shadow: none; }
.fresh[data-state="old"] .fresh-dot, .fresh[data-state="down"] .fresh-dot { background: var(--warn); }

/* Hero */
/* One card holds the whole top: the copy on the left, the featured line on the right */
.hero { padding-top: 32px; padding-bottom: 48px; }
.hero-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 496px);
  gap: 48px; align-items: center;
  padding: 40px; border-radius: var(--r-card);
  background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line);
}
h1 { font: 700 64px/1 var(--sans); letter-spacing: -0.03em; text-wrap: balance; }
.figs { display: flex; gap: 40px; margin-top: 40px; }
.fig { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fig dd { order: -1; display: flex; align-items: baseline; gap: 6px; }
.fig dt { font: 400 13px/1.3 var(--sans); color: var(--text-2); white-space: nowrap; }
.fig dt span { color: var(--text-3); }
.fig-n { font: 700 40px/1 var(--sans); letter-spacing: -0.02em; }
.fig-lime .fig-n { color: var(--lime); }
.fig-n.is-off { color: var(--text-3); }
.hero-cta { margin-top: 40px; }

/* Ladder: DOPE's bar against the others to true scale; names and prices share one column */
.ladder { display: flex; flex-direction: column; }
.ladder-k { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
.ladder-k svg { width: 10px; height: 10px; }
.ladder-k.is-off { color: var(--text-3); }
.ladder-t { margin-top: 14px; font: 500 22px/1.15 var(--sans); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ladder-m { margin-top: 4px; font: 400 13px/1.3 var(--sans); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ladder-m b { font-weight: 500; color: var(--text-2); }
.ladder-m + .ladder-m { margin-top: 2px; }
.bars { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 0 1 auto; min-height: 0; }
/* The card hugs the featured line (owner: equal padding on every side), so its height follows the number of books priced */
.bars li { display: flex; height: 52px; flex: 0 1 auto; min-height: 44px; }
.bars li.li-dope { height: 64px; min-height: 56px; }
.bars li > .bar { height: 100%; }
.bar {
  width: var(--w); min-width: 260px; height: 44px;
  display: grid; grid-template-columns: 104px 104px 1fr; align-items: center;
  padding: 0 14px; border-radius: var(--r-cell);
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--ring), 0 3px 0 var(--chonk);
  text-decoration: none; color: var(--text);
}
.bar-n { font: 500 13px/1 var(--sans); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-p { justify-self: end; font: 500 17px/1 var(--sans); }
.bar-x { justify-self: end; display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); }
.bar-x svg { width: 11px; height: 11px; }
.bar.is-old { background: var(--sheet-head); box-shadow: inset 0 0 0 1px var(--ring); }
.bar.is-old .bar-p { color: var(--text-3); }
.bar-dope { background: var(--lime); color: var(--on-lime); box-shadow: 0 3px 0 var(--lime-chonk); transition: background-color 90ms, transform 90ms ease-out, box-shadow 90ms ease-out; }
.bar-dope:hover { background: var(--lime-hover); }
.bar-dope:active { transform: translateY(3px); box-shadow: 0 0 0 var(--lime-chonk); }
.bar-dope:focus-visible { outline-color: var(--text); }
.bar-dope svg.wm { width: 72px; height: 19px; display: block; }
.bar-dope .bar-p { font: 700 30px/1 var(--sans); letter-spacing: -0.02em; }
.bar-dope .bar-x { color: var(--on-lime); }
.bar-dope .bar-x svg { width: 16px; height: 16px; }
.ladder-f { padding-top: 16px; display: flex; align-items: center; }
.gain {
  height: 32px; padding: 0 12px; border: 0; border-radius: 999px;
  background: rgb(195 255 0 / 0.1); color: var(--lime);
  font: 500 13px/1 var(--sans); cursor: default; white-space: nowrap;
}
.gain b { font-weight: 500; }
.gain.is-equal { background: var(--raised); color: var(--text-2); }
.ladder-f { margin-top: 0; }
.ladder-off { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.ladder-off .ladder-t { margin: 0; white-space: normal; }
.ladder-off .ladder-m { margin: 0; white-space: normal; }
.off-ico { width: 28px; height: 28px; color: var(--text-3); }

/* Board tools: filters, odds switch, the one key */
.board-sec:focus { outline: none; }
.tools-bar { background: var(--ground); }
.tools { display: flex; align-items: center; gap: 16px; padding-top: 4px; padding-bottom: 20px; }
.chips-scroll {
  flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none;
  margin: -4px 0; padding: 4px 0;
}
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll.fade { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.chips { display: flex; gap: 8px; width: max-content; padding-bottom: 3px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--h-ctl); padding: 0 16px;
  border: 0; border-radius: 999px;
  background: var(--raised); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--ring), 0 3px 0 var(--chonk);
  font: 500 15px/1 var(--sans); cursor: pointer; white-space: nowrap;
  transition: background-color 90ms, transform 90ms ease-out, box-shadow 90ms ease-out;
}
.chip:hover { background: var(--raised-hover); }
.chip:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--ring), 0 0 0 var(--chonk); }
.chip .n { font-size: 13px; color: var(--text-3); font-weight: 400; }
.chip[aria-pressed="true"] { background: var(--text); color: var(--on-lime); box-shadow: 0 3px 0 var(--text-3); }
.chip[aria-pressed="true"] .n { color: rgb(7 7 10 / 0.6); }
.chip[aria-pressed="true"]:focus-visible { outline-color: var(--text); }
.chip-sk { cursor: default; box-shadow: none; background: var(--sheet); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: none; }
.chip[aria-pressed="true"] .live-dot { background: var(--on-lime); }

.seg { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: 13px; background: var(--well); box-shadow: inset 0 2px 0 rgb(0 0 0 / 0.6), inset 0 0 0 1px var(--line); }
.seg button { height: var(--h-ctl); padding: 0 14px; border: 0; border-radius: var(--r-btn); background: transparent; font: 500 15px/1 var(--sans); color: var(--text-3); cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--ring), 0 3px 0 var(--chonk); transform: translateY(-1px); }

.board-ctl { display: flex; align-items: center; gap: 16px; flex: none; }
.tip-key.tip-pop { width: min(300px, calc(100vw - 32px)); gap: 8px; }
.key-state:empty { display: none; }
.key-state { color: var(--warn); }
.key-row { display: flex; align-items: center; gap: 10px; }
.key-note { color: var(--text-2); margin-top: 2px; }
.mk { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 52px; height: 24px; padding: 0 6px; border-radius: var(--r-cell); font: 500 13px/1 var(--sans); flex: none; }
.mk svg { width: 9px; height: 9px; }
.mk-win { background: var(--lime); color: var(--on-lime); }
.mk-equal { background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--lime); }

/* Board */
.board { display: flex; flex-direction: column; gap: 32px; padding-bottom: 48px; }
.board:empty { padding: 0; }
.section-head { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.section-head h2 { font: 500 22px/1.15 var(--sans); letter-spacing: -0.01em; }
.section-head .count { font-size: 15px; color: var(--text-3); }
.section-head .live-dot { width: 9px; height: 9px; box-shadow: 0 0 0 4px var(--live-bg); }
.paused-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--warn-bg); color: var(--warn); font: 500 13px/1 var(--sans); }
.sheets { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }

.sheet { position: relative; overflow: clip; border-radius: var(--r-card); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); }
/* DOPE's rail: one tinted column through the sheet, so the column reads as ours without a side line */
.sheet::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  right: calc(var(--pad) + 5 * var(--book)); width: var(--dope);
  background: var(--rail); box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line);
  pointer-events: none;
}
.sheet-head {
  position: sticky; top: var(--top-h); z-index: 5;
  display: grid; grid-template-columns: var(--cols); align-items: center;
  min-height: 48px; padding: 0 var(--pad);
  background: var(--sheet-head); box-shadow: inset 0 0 0 1px var(--line);
}
.sheet-head h3 { grid-column: 1 / 3; font: 500 15px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 16px; }
.sheet-head h3 small { font-size: 13px; color: var(--text-3); font-weight: 400; }
.bk { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 13px/1 var(--sans); color: var(--text-2); white-space: nowrap; }
.bk-dope { position: relative; z-index: 1; color: var(--text); }
.bk-dope svg { width: 52px; height: 14px; display: block; }
.bk-off { color: var(--text-3); }

.game { position: relative; display: grid; grid-template-columns: var(--cols); padding: 8px var(--pad); box-shadow: inset 0 1px 0 var(--line); }
.sheet-head + .game { box-shadow: none; }
.line { display: contents; }
.when { grid-column: 1; grid-row: 1 / span 3; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-right: 12px; }
.when .t { font: 500 15px/1.2 var(--sans); }
.when .d, .when .clock { font: 400 13px/1.2 var(--sans); color: var(--text-3); }
.tag-live { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 5px; background: var(--live-bg); color: var(--live-text); font: 500 11px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.tag-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }

.team { grid-column: 2; display: flex; align-items: center; gap: 12px; min-width: 0; height: 46px; padding-right: 16px; }
.who { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.team .nm { flex: 0 1 auto; font: 500 15px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The matchup beside a partly shown game's line: small, muted context */
.ctx { flex: 0 10 auto; min-width: 0; font: 400 13px/1.2 var(--sans); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team.draw .nm { color: var(--text-2); font-weight: 400; }
.sc { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 7px; border-radius: 6px; background: var(--raised); font: 500 15px/1 var(--sans); }

/* Prices: rivals one step muted; the one that beats DOPE in white bold with an up mark */
.px {
  position: relative; z-index: 1; align-self: center; justify-self: center;
  display: inline-flex; align-items: center; justify-content: flex-end;
  width: 80px; height: var(--h-ctl); padding: 0 10px 0 22px; border-radius: var(--r-cell);
  font: 400 15px/1 var(--sans); color: var(--text-2); text-decoration: none; white-space: nowrap;
}
.px-i { position: absolute; left: 8px; top: 50%; width: 9px; height: 9px; transform: translateY(-50%); }
.px.old { color: var(--text-3); }
.px.old .px-i { width: 11px; height: 11px; left: 6px; }
.px.susp, .px.none { justify-content: center; padding: 0; }
.px.susp { color: var(--text-3); }
.px.susp svg { width: 12px; height: 12px; }
.px.dope {
  width: 100px; padding: 0 16px 0 24px; font-size: 17px; font-weight: 500; color: var(--text);
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--ring), 0 3px 0 var(--chonk);
  transform: translateY(-1px);
  transition: background-color 90ms, transform 90ms ease-out, box-shadow 90ms ease-out;
}
a.px.dope:hover { background: var(--raised-hover); }
a.px.dope:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--ring), 0 0 0 var(--chonk); }
.px.dope.equal { box-shadow: inset 0 0 0 1.5px var(--lime), 0 3px 0 var(--chonk); }
a.px.dope.equal:active { box-shadow: inset 0 0 0 1.5px var(--lime), 0 0 0 var(--chonk); }
.px.dope.win { background: var(--lime); color: var(--on-lime); box-shadow: 0 3px 0 var(--lime-chonk); }
a.px.dope.win:hover { background: var(--lime-hover); }
a.px.dope.win:active { box-shadow: 0 0 0 var(--lime-chonk); }
a.px.dope.win:focus-visible { outline-color: var(--text); }
.px.dope.susp, .px.dope.none { background: transparent; box-shadow: none; transform: none; color: var(--text-3); font-size: 13px; font-weight: 400; }

/* Near-certain and suspended lines step back */
.quiet .nm { color: var(--text-3); font-weight: 400; }
.quiet .px:not(.dope) { color: var(--text-3); font-weight: 400; }
.quiet a.px.dope:not(.win):not(.equal) { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); transform: none; color: var(--text-2); font-size: 15px; }

.paused-books .px:not(.dope), .paused-books .alt-px { color: var(--text-3); font-weight: 400; }
.is-old .px, .is-old .alt, .is-old .sc { opacity: 0.55; }

@keyframes up { from { color: var(--up); } }
@keyframes down { from { color: var(--down); } }
.flash-up { animation: up 1.6s ease-out; }
.flash-down { animation: down 1.6s ease-out; }
.px.dope.win.flash-up, .px.dope.win.flash-down { animation: none; }

.more { position: relative; z-index: 2; display: flex; align-items: center; padding: 12px var(--pad) 16px; background: var(--sheet); box-shadow: 0 -1px 0 var(--line); }

.closer { display: flex; justify-content: center; padding: 8px 0 0; }

/* States */
.state {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 40px 24px; border-radius: var(--r-card);
  background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); text-align: center;
}
.state h2 { font: 500 22px/1.15 var(--sans); letter-spacing: -0.01em; }
.state p { color: var(--text-3); }
.sk { display: inline-block; vertical-align: middle; border-radius: 6px; background: var(--raised); opacity: 0.55; }
.sk-shine { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
.px.sk-dope { background: var(--raised); box-shadow: none; transform: none; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 50; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-btn); background: var(--lime); color: var(--on-lime); font-weight: 500; text-decoration: none; }
.skip:focus { top: 10px; }

.foot { padding-top: 24px; padding-bottom: 32px; font: 400 13px/1.3 var(--sans); color: var(--text-3); background: linear-gradient(var(--line), var(--line)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 1180px) {
  .hero-card { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; padding: 32px; }
  h1 { font-size: 54px; }
}
@media (max-width: 960px) {
  .hero-card { grid-template-columns: minmax(0, 1fr); }
  .ladder { padding-top: 28px; box-shadow: 0 -1px 0 var(--line); }
}

/* Phone: a game is a short card (DOPE beside the best other book); all six books behind a tap */
@media (max-width: 760px) {
  :root { --top-h: 56px; --gutter: 16px; --pad: 12px; --h-ctl: 44px; --tools-h: 60px; }
  html { scroll-padding-top: calc(var(--top-h) + var(--tools-h) + 8px); }
  .t-long { display: none; }
  .t-short { display: inline; }
  .brand svg { width: 80px; height: 21px; }
  .site-name { font-size: 14px; padding-left: 12px; }
  .fresh { height: 32px; padding: 0 10px; }
  .top-in { gap: 10px; }
  .top-cta { padding: 0 14px; }

  .hero { padding-top: 16px; padding-bottom: 28px; }
  .hero-card { gap: 24px; padding: 20px; }
  h1 { font-size: 40px; line-height: 1.02; letter-spacing: -0.03em; }
  .figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
  .fig-n { font-size: 30px; }
  .fig dt span { display: block; }
  .hero-cta { margin-top: 24px; width: 100%; }
  .ladder { padding-top: 20px; }
  .ladder.is-off .ladder-off { padding: 20px 0; }
  .ladder-t { font-size: 22px; }
  .bar { grid-template-columns: 84px 96px 1fr; min-width: 228px; padding: 0 12px; }
  .bars li.li-dope { height: 60px; min-height: 52px; }
  .bars li { height: 48px; }
  .bar-dope svg.wm { width: 64px; height: 17px; }
  .bar-dope .bar-p { font-size: 26px; }

  .tools-bar { position: sticky; top: var(--top-h); z-index: 20; box-shadow: 0 1px 0 var(--line); margin-bottom: 20px; }
  .tools { gap: 8px; height: var(--tools-h); padding-top: 0; padding-bottom: 0; }
  .chips-scroll { margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter); }
  .section-head .board-ctl { margin-left: auto; gap: 12px; }
  .section-head { flex-wrap: wrap; row-gap: 8px; }
  .paused-tag { order: 10; }
  .seg button { padding: 0 10px; }
  .info::before { inset: -11px; }

  .board { gap: 28px; }
  .sheet::before { display: none; }
  .sheet-head { display: block; top: calc(var(--top-h) + var(--tools-h)); min-height: 44px; padding: 12px var(--pad); }
  .sheet-head h3 { padding: 0; }

  .game { display: block; padding: 0 var(--pad) 8px; }
  .when { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding: 0; min-height: 44px; }
  .tag-live { align-self: center; }
  .when .d::before { content: "· "; }
  .all-books { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 0 0 12px; border: 0; background: none; font: 500 13px/1 var(--sans); color: var(--text-2); cursor: pointer; }
  .all-books svg { width: 14px; height: 14px; }
  .all-books[aria-expanded="true"] svg { transform: rotate(180deg); }

  .pline { display: grid; grid-template-columns: minmax(0, 1fr) 84px 76px; align-items: center; column-gap: 8px; min-height: 52px; }
  .pline + .pline { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04); }
  .pline .team { grid-column: auto; height: auto; padding: 4px 0; gap: 8px; }
  .pline .who { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pline .team .nm { line-height: 1.3; max-width: 100%; }
  .pline .ctx { max-width: 100%; font-size: 12px; }
  .pline .sc { height: 24px; }
  .pline .px.dope { width: 100%; height: 44px; padding: 0 14px 0 22px; }
  .pline .px.dope.susp, .pline .px.dope.none { background: var(--rail); flex-direction: column; gap: 2px; }
  .alt { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; height: 44px; padding-right: 4px; }
  .alt-bk { font: 400 11px/1 var(--sans); color: var(--text-3); white-space: nowrap; }
  .alt-px { position: relative; font: 400 15px/1 var(--sans); color: var(--text-2); }
  .alt-px .px-i { left: auto; right: calc(100% + 4px); }
  .alt.old .alt-px { color: var(--text-3); }
  .alt.old .alt-px .px-i { width: 11px; height: 11px; }
  .quiet .alt-px { color: var(--text-3); }

  .full { margin-top: 8px; padding: 8px; border-radius: var(--r-cell); background: var(--well); }
  .full-head, .full .line { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 4px; }
  .full-head .bk { font-size: 11px; color: var(--text-3); }
  .full .line { margin-top: 4px; }
  .full .team { grid-column: 1 / -1; height: 24px; padding: 0; }
  .full .team .nm { font-size: 13px; color: var(--text-2); }
  .full .px, .full .px.dope { width: 100%; height: 40px; padding: 0 6px 0 14px; font-size: 13px; }
  .full .px-i { left: 3px; }
  .full-head .bk { font-size: 10px; overflow: hidden; text-overflow: ellipsis; display: block; text-align: center; }

  .more { padding: 12px var(--pad); }
  .closer .btn { width: 100%; }
  .state { padding: 32px 16px; }
}

@media (max-width: 420px) {
  .site-name { display: none; }
}

/* Games exist but DOPE leads none of their lines */
.board-none { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 0 8px; }
.board-none p { font: 500 17px/1.3 var(--sans); color: var(--text-2); }