--
need padding to keep their text off the top edge. */
.who-me,.sim-diachip,.ostat,.claimbub,.rm-chip,.livebubble,.fd-comp-b,.pf-tail1,
.fd-comp-go,.pf-fc,.pe-leg,.pe-bot,.fd-comp,.pe-card,.rc-modecard,.mini,.rm-rb,
.wrx-share{min-height:44px}
/* mirrors the existing mobile rules exactly, so nothing shifts between the two */
.ochip{min-height:44px;padding:9px 14px;display:inline-flex;align-items:center}
.sc-bet{min-height:44px;padding:11px 14px;display:inline-flex;align-items:center}
/* square-ish: a round log-out button and a vote pill -- width misses as badly as height */
.who-lock,.idea-vote{min-height:44px;min-width:44px}
/* not buttons: a
tab and a avatar cell, so they take padding */
.zgbtn,.av-cell{min-height:44px;padding-top:12px;padding-bottom:12px;align-content:center}
/* Avatars. .avwrap is a decorative ring -- 38 of its 39 uses are not clickable at
all -- so growing it would inflate every avatar on the site to fix one target.
The real element is .fd-ava, and its three bare rules cascade down to 34x34
everywhere while keeping the cursor:pointer from the 36px rule above them: a
34px target that looks clickable because it is. Matched on the attributes that
make one tappable (an inline handler, or the data-prof the delegated listener
reads) so ONLY avatars you can actually open grow, and the decorative ones in
bot cards and leaderboards keep the density they were designed with. */
.fd-ava[onclick],.fd-ava[data-prof],.avwrap[onclick]{min-width:44px;min-height:44px}
/* CLOSERS. A modal X, a chat X and a History day collapse are all small BY DESIGN -- a 44px box would
look broken -- but they are also the only exit from what they close, and .gcbox/.chatpanel leave
almost no backdrop to tap instead. So the pixels stay and only the TOUCH REGION grows, the same
invisible-overlay trick already used for .gq. .lc-gc/.trk-gc/.gc-link are ~14px inline links.
Purely additive: nothing moves, nothing reflows. */
.gq,.tour-x,.dw-bal,.gcclose,.hd-close,.cp-x,.lc-gc,.trk-gc,.gc-link{position:relative}
.gq::after,.tour-x::after,.dw-bal::after,.gcclose::after,.hd-close::after,.cp-x::after,
.lc-gc::after,.trk-gc::after,.gc-link::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;min-width:44px;height:44px}
}
/* ---- EVENT DETAIL: PICK-FIRST ------------------------------------------------------------------------
Rewritten 2026-08-14. The panel opened on pitchers -> weather -> 120 player-form chips -> and only then
the pick you clicked to read about. Now the pick leads and context folds, with each fold's summary
carrying its own signal so a closed row still answers its own question.
LAST IN THE SHEET, like the other late additions here: .evblk and .evh already have rules earlier in
this file, and a rule that loses on source order loses regardless of specificity. */
/* The lead block is the only one with weight. Everything else recedes. */
.evblk.evlead{border:1px solid rgba(var(--gold-rgb),.28);background:linear-gradient(165deg,rgba(var(--gold-rgb),.07),rgba(var(--gold-rgb),.02));
border-radius:13px;padding:13px 14px;margin-bottom:12px}
/* FLEX, or margin-left:auto on .evsum does nothing and the count welds itself to the heading — shipped
exactly that way for one build and read "What MIDAS bet17 picks". Caught from a screenshot, not code. */
.evblk.evlead>.evh{color:var(--gold);display:flex;align-items:baseline;gap:9px}
/* ---- CONTEXT CHIPS: conditions first, no clicking required ---- */
.evchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.evchip{display:inline-flex;align-items:baseline;gap:5px;padding:5px 9px;border-radius:8px;
border:1px solid var(--line);background:rgba(255,255,255,.025);font-size:11px;color:var(--mut);
font-weight:600;letter-spacing:.02em}
.evchip b{color:var(--txt);font-weight:800;font-size:12px;font-variant-numeric:tabular-nums}
.evchip-roof{border-color:rgba(var(--gold-rgb),.30);background:rgba(var(--gold-rgb),.07);color:rgba(var(--gold-rgb),.85)}
.evchip-roof b{color:var(--gold)}
/* Rain gets louder as it gets likelier. A washout can void the game, not just move the total. */
.evchip-warn{border-color:rgba(245,158,11,.38);background:rgba(245,158,11,.10);color:var(--gold2)}
.evchip-warn b{color:var(--gold2)}
.evchip-alert{border-color:rgba(239,68,68,.42);background:rgba(239,68,68,.12);color:var(--bad-hi)}
.evchip-alert b{color:var(--bad-hi)}
.evchip-mut{opacity:.62}
/* The honest contrast under the hero: curated Best 3 vs any 3 off the board. Quieter than the headline
because it is the control, not the claim — but present, because the gap between them IS the claim. */
.ps-contrast{font-size:11.5px;line-height:1.6;color:var(--mut);margin:-4px 0 14px;padding:0 2px}
.ps-contrast b{color:var(--txt);font-weight:700}
/* Provenance sits quieter than the contrast, because it qualifies the claim rather than making it.
It is present at all because a record that is partly modelled and partly measured must say which. */
.ps-prov{display:inline-block;margin-top:5px;font-size:11.5px;line-height:1.55;color:#6f7590}
.ps-prov b{color:var(--mut);font-weight:700}
/* ---- BOARD AS AN OPERATE SURFACE -----------------------------------------------------------------------
A tracker is a tool, not a landing page: someone opens it dozens of times a day to find a bet, so
scanability outranks expression. Two changes follow from that.
1. The prose moved into .boardhow. It is one row closed instead of two paragraphs holding the fold.
2. The game row became a GRID. It was flex with .gname{flex:1} and everything after it flex:none, so the
status, time, chips and bet-count each started wherever that row's team names happened to end. Down a
list of 15 games nothing lined up vertically, and the eye has to re-find every column on every row.
Fixed tracks mean status is always in the status place. This is the single biggest scanability win on
the board and it costs no vertical space. */
.boardhow{margin:0 0 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.015)}
.boardhow>summary{cursor:pointer;list-style:none;padding:9px 12px;font-size:11.5px;font-weight:700;
color:var(--mut);min-height:38px;display:flex;align-items:center;gap:8px;user-select:none}
.boardhow>summary::-webkit-details-marker{display:none}
.boardhow>summary::after{content:'';margin-left:auto;width:6px;height:6px;border-right:1.5px solid var(--mut);
border-bottom:1.5px solid var(--mut);transform:rotate(45deg) translate(-2px,-2px);
transition:transform 180ms cubic-bezier(0.23,1,0.32,1)}
.boardhow[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.boardhow>summary:hover{color:var(--txt)}
.boardhow p{font-size:12px;line-height:1.6;color:var(--mut);margin:0 12px 10px}
.boardhow p:first-of-type{margin-top:2px}
/* ---- LAYER SCALE ---------------------------------------------------------------------------------------
There was no scale, just 32 ad-hoc z-index values from 2 to 99999 accreted one bump at a time. That
produced FIVE ties where two overlays share a number and the winner is decided by DOM order:
70 .livebubble .lp-sticky .moresheet <- the add-bet sheet
80 .fd-sheet .pe-slip
120 .obetscrim .pslip .xp-float <- a scrim tied with what it must sit behind
130 .levelup-overlay .shareopts
200 .gcoverlay .touchtip
"A collision resolved by arrival order is a bug" is already a hard-won rule in this codebase (coin-flip
default, score-index key, doubleheader scorer, dictionary-order Best 3). This is the same defect in CSS:
nothing is WRONG until someone reorders markup, and then a sheet silently renders under a bubble.
The tokens below name the tiers so the next overlay picks a rung instead of inventing a number. The
fixes are DELIBERATELY SURGICAL -- ties broken inside their existing tier, not a wholesale renumber.
Renumbering all 32 would risk regressing layouts that cannot be verified without eyes on every surface,
and this is days from launch. The scale documents the intent; the offsets fix the actual defect.
Ordering rule, low to high: ambient float < scrim < sheet < popover < modal scrim < modal < toast < fx. */
:root{
--z-sticky:30; /* subnav, landing header */
--z-float:65; /* ambient floating affordances */
--z-scrim:69; /* the dimmer behind a bottom sheet */
--z-sheet:70; /* bottom sheets (add, more) */
--z-popover:90; /* anchored popovers, tooltips */
--z-modal:310; /* full modals (event detail, chat) */
--z-toast:400; /* transient confirmation */
}
/* A SHEET MUST COVER THE BUTTONS THAT OPENED IT. .fab sat at 72 against a sheet at 70, so the floating
action button drew on top of the open sheet. Ambient furniture now sits below the scrim, where an open
sheet hides it -- which is what a scrim is for. */
.fab{z-index:68}
.livebubble{z-index:66}
.lp-sticky{z-index:67}
/* Ties broken within tier. Higher = closer to the reader, chosen by what must remain reachable. */
.pe-slip{z-index:81} /* a slip opened FROM the props sheet sits above it */
.xp-float{z-index:118} /* ambient reward animation, never above a live scrim */
.pslip{z-index:119} /* ...and the slip sits under its own scrim at 120 */
.levelup-overlay{z-index:132} /* a full-screen celebration outranks a share popover */
.touchtip{z-index:201} /* a tooltip is useless if the overlay it explains covers it */
/* The win receipt was tied with .obetscrim at 120 and therefore sat UNDER .obetsheet (121) -- the sheet
you just confirmed a bet in would cover the receipt telling you it won. A full-screen receipt outranks
the sheet that produced it. */
#winrx{z-index:122}
/* CARET. Impeccable's craft floor lists the browser surfaces a themed product is expected to own:
text selection, the caret, scrollbars, focus rings, underline offset. We already theme four of the five.
The caret was the miss, so every input still blinked in the OS default blue against a gold-on-graphite
product. One line, and it is the kind of detail that reads as care without ever being noticed. */
input,textarea,[contenteditable]{caret-color:var(--gold)}
/* Meta atoms, replacing the middots. Same information, one less thing competing for attention. */
.gm-n{font-weight:800;color:var(--txt);font-variant-numeric:tabular-nums}
.gm-k{margin-left:4px;margin-right:9px;color:var(--mut)}
.gm-lg{margin-right:9px;color:var(--mut)}
/* The day-count readout only appears once a filter actually narrows something, so an unfiltered
History is not carrying a line that always says the same thing. */
.hist-n{font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums;min-height:16px;margin:0 2px 8px}
/* Says what the number is NOT, right where it is read. Quieter than the label, louder than a tooltip. */
.rb-nb{font-size:11.5px;font-weight:800;letter-spacing:.03em;padding:1px 6px;border-radius:20px;
background:rgba(var(--push-rgb),.16);color:#9fa8bd;vertical-align:middle;margin-left:2px}
/* ================= MOTION SYSTEM =========================================================================
The site did not read as generated because it lacked motion. It read that way because it had 107
transitions written one at a time: 15 distinct durations from 100ms to 800ms, 9 `transition: all`,
8 different :active scales, and 185 hover rules with only 4 gated for touch. Each was locally sensible.
Together they had no rhythm, which is exactly what accreted assistance produces.
One token set, named for the job each curve does. Frequency decides duration, not element size. */
:root{
--ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* enters, exits, press release. the default */
--ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* bottom sheets only. settles like a panel */
--ease-move: cubic-bezier(0.77, 0, 0.175, 1); /* something on screen moving to a new place */
--ease-tint: cubic-bezier(0.4, 0, 0.6, 1); /* colour only. symmetric, since colour has no position */
--ease-decay: cubic-bezier(0.16, 1, 0.3, 1); /* settle flash. peak early, long fade */
--dur-press: 60ms; /* press down: must land in the same perceptual moment as the touch */
--dur-1: 120ms; /* release, tint, focus */
--dur-2: 160ms; /* small movement */
--dur-3: 220ms; /* exits. always faster than enters */
--dur-4: 280ms; /* sheet entry. the longest travel in the app */
--dur-settle: 900ms; /* money changed. this one earns its length */
}
/* ONE PRESS SCALE. There were eight (.9 .94 .95 .955 .96 .97 .98 .99), so no two controls answered a
finger the same way. Asymmetric on purpose: down fast because the system is reacting, up slower
because it is relaxing. Bounce is deliberately absent, a button released from a spring curve grows
past its resting size, which on a dense row list reads as wobble. */
.btn,.chip,.segbtn,.mi,.slipbtn,.tab,.evtab,.sbtn,.ps-go,.evbtn,.evmore,.mkttl{
transition:transform var(--dur-1) var(--ease-out),
background var(--dur-1) var(--ease-tint),
border-color var(--dur-1) var(--ease-tint),
color var(--dur-1) var(--ease-tint)}
.btn:active,.chip:active,.segbtn:active,.mi:active,.slipbtn:active,.tab:active,
.evtab:active,.sbtn:active,.ps-go:active,.evbtn:active,.evmore:active{
transform:scale(0.97);transition-duration:var(--dur-press)}
/* TOUCH: a phone has no hover, but :hover still fires on tap and then STICKS until you tap elsewhere.
181 of 185 hover rules were ungated, so tapping a row left it lit. Killing the lift and the shadow is
enough: those are the artefacts you can see stuck. Colour changes are harmless and stay. */
@media (hover: none), (pointer: coarse){
.card:hover,.layer:hover,.bcard:hover,.pm-card:hover,.zt-card:hover,.setcard:hover,
.btn:hover,.slipbtn:hover,.sbtn:hover,.tailbtn:hover,.evbtn:hover,.ps-go:hover,
.gamehdr:hover,.sporthdr:hover,.grphdr:hover,.subhdr:hover,.hd-row:hover,.evfold:hover{
transform:none;box-shadow:none;filter:none}
}
/* REDUCED MOTION means fewer and gentler, not none. Colour and opacity carry meaning and stay; movement
goes. A blanket `animation:none !important` would also kill the loading skeletons, which are the one
place motion is load-bearing information. */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
transition-duration:var(--dur-1) !important;
animation-duration:var(--dur-1) !important;
animation-iteration-count:1 !important}
.btn:active,.chip:active,.segbtn:active,.mi:active,.slipbtn:active,.tab:active,.evtab:active{
transform:none !important}
.mz-skel,.skel{animation:none !important}
}
/* ---- SHEETS: ONE MOTION, AND A SCRIM THAT ACTUALLY FADES ------------------------------------------------
The single grossest detail in the product. Four hand-rolled bottom sheets, three different curves
(.2,.7,.2,1 / .22,1,.36,1 / none) across .2s, .24s and .28s. Worse, `.sheetscrim` was
`display:none` toggled to `display:block`, and DISPLAY CANNOT TRANSITION, so on every open the backdrop
appeared in a single frame while the panel glided for 240ms behind it. You feel that mismatch without
being able to name it, and it fires on the most common interaction in the app.
Now: one curve, one enter duration, one exit duration, and the scrim fades on the same frame as the
panel it belongs to. pointer-events carries the "is it there" job that display used to do, so a closed
scrim still cannot intercept a tap. */
.sheetscrim{display:block;opacity:0;pointer-events:none;
transition:opacity var(--dur-3) var(--ease-tint)}
.sheetscrim.on{opacity:1;pointer-events:auto;transition-duration:var(--dur-4)}
.obetscrim{transition:opacity var(--dur-3) var(--ease-tint)}
.obetscrim.on{transition-duration:var(--dur-4)}
/* Exits are faster than enters, always. The panel is leaving because you asked it to, so waiting on it is
pure tax; arriving is the only half that has anything to communicate. */
.moresheet,.obetsheet,.pe-slip{transition:transform var(--dur-3) var(--ease-sheet)}
.moresheet.open,.obetsheet.open,.pe-slip.open{transition-duration:var(--dur-4)}
.fd-sheet{transition:opacity var(--dur-3) var(--ease-tint)}
/* ---- NO `transition: all` ---------------------------------------------------------------------------
Nine controls used it. `all` animates every property that changes, including ones that trigger layout,
so a width or padding change that was never meant to be animated gets a 200ms tween and a reflow per
frame. It also silently picks up any property added later. These are all button-shaped controls, so
they want exactly what every other control here gets: transform, plus colour. */
.zgbtn,.dh-chip,.ochip,.obtn,.pe-ob,.pe-ub,.m-opt,.obs-chips button,button.ocell.otail,.pf-obtn{
transition:transform var(--dur-1) var(--ease-out),
background var(--dur-1) var(--ease-tint),
border-color var(--dur-1) var(--ease-tint),
color var(--dur-1) var(--ease-tint) !important}
.zgbtn:active,.dh-chip:active,.ochip:active,.obtn:active,.pe-ob:active,.pe-ub:active,
.m-opt:active,.obs-chips button:active,button.ocell.otail:active,.pf-obtn:active{
transform:scale(0.97);transition-duration:var(--dur-press)}
/* ---- will-change IS NOT A STYLESHEET PROPERTY -------------------------------------------------------
Seven selectors declared it permanently. `will-change` tells the browser to promote an element to its
own compositor layer AND KEEP IT THERE, so a rule in a stylesheet holds that memory for the life of the
page whether the element ever animates or not. On a board of hundreds of rows that is the single
biggest scroll-performance cost in the product. Released here; the browser promotes on demand, which is
what it is good at. */
.card,.layer,.bcard,.pm-card,.setcard,.pick,.gamegrp{will-change:auto}
/* ---- ONE PRESS SCALE, FOR REAL --------------------------------------------------------------------
The earlier pass in this block set 0.97 on the main controls but left thirty-odd other selectors on
their own values (.9 .94 .95 .955 .96 .98 .99), so it ADDED a ninth scale rather than replacing eight.
Overridden by name here. The spread was not a style choice, it is what happens when each control is
authored on the day it is needed: a .9 press on the FAB next to a .99 press on a card reads as two
different products. One value, one duration, everywhere a finger lands. */
.sharebtn:active,.who-lock:active,.dw-swap:active,.claimbub:active,.idea-send:active,
.idea-vote:active,.pe-qs button:active,.pe-go:not(:disabled):active,.compete-card:active,
.m-lock:not(:disabled):active,.obs-lock:active,.pf-followbtn:active,.sc-bet:active,
.rm-rb:active,.promo-btn:active,.dw-store:active,.toast-act:active,.pm-opt:active,
.pe-card:active,.pe-slip-auto:active,.pe-slip-share:active,.pm-share:active,.te-cta:active,
.livebubble:active,.fab:active,.bt-add:active,.addbig:active,.bt:active{
transform:scale(0.97) !important;
transition-duration:var(--dur-press) !important}
/* The remaining permanent will-change declarations. Same reasoning as above: a compositor layer held for
the life of the page whether or not the element ever moves. .fly-coin and .mz-fly are genuinely
transient (they exist only while flying) so they keep theirs. */
.slipbtn,.addbig,.setseg .segbtn,.reel-track,.fab,.livebubble{will-change:auto}
/* ==========================================================================================================
VISUAL SYSTEM :: "INSTRUMENT"
==========================================================================================================
The product looked generic because its surfaces were generic: three flat greys, a border on everything,
and one light source implied by nothing. Colour alone does not fix that. What reads as expensive in a
dark interface is LIGHT BEHAVIOUR, so this layer changes four things and only four:
1. One light source. A single cool key light from top centre, so the page has a top and a bottom
instead of being a flat field. Everything else derives from it.
2. Elevation replaces outlines. A raised surface is lighter, carries a 1px top rim where the light
catches it, and drops a soft shadow. Borders drop to hairlines because they no longer do the work
of separating things.
3. Real black is refused. #05070C, not #000. A true black kills every shadow you draw on it, which is
precisely how a dark UI ends up looking flat.
4. Numbers get their own treatment. This is a product about figures, so every figure is tabular and
slightly tighter than the prose around it. Nothing else in the app signals "instrument" harder.
Gold stays. It is the brand and it is now RATIONED: signal only, never decoration. */
:root{
/* Cool near black, hue held at 250 so the whole ramp is one family */
--bg: #05070c;
--bg-2: #070a11;
--surf: #0d1119; /* z1: cards, rows */
--surf2: #131826; /* z2: raised panels, sheets */
--surf3: #1a2032; /* z3: popovers */
--line: #1c2233; /* hairline. deliberately low contrast */
--line2: #141926;
--txt: #f4f6fb;
--mut: #79819b;
--gold: #ffd166;
--gold2: #f0b544;
--good: #3ddc97;
--bad: #ff6b81;
/* Elevation: offset AND blur, never a zero offset halo */
--e1: 0 1px 2px rgba(0,0,0,.40);
--e2: 0 4px 16px -6px rgba(0,0,0,.70);
--e3: 0 18px 48px -18px rgba(0,0,0,.86);
--rim: inset 0 1px 0 rgba(255,255,255,.045); /* where the key light catches an edge */
--r1: 8px; --r2: 12px; --r3: 16px;
}
/* THE LIGHT SOURCE. One cool key from top centre plus a faint gold bloom low down, so the page reads as a
lit space rather than a flat colour. Fixed attachment so it does not slide under scrolling content. */
body{
background:
radial-gradient(1200px 620px at 50% -8%, rgba(120,150,255,.055), transparent 62%),
radial-gradient(900px 520px at 88% 108%, rgba(var(--gold-rgb),.030), transparent 60%),
var(--bg) !important;
background-attachment:fixed;
}
/* SURFACES: lighter as they rise, rim where the light lands, shadow underneath. The border is a hairline
now because elevation is doing the separating. */
.card,.layer,.bcard,.pm-card,.setcard,.panel,.zt-card,.zoo-card,.gamegrp,.sport,.trackrow,.pe-slip{
/* AURORA, SITE-WIDE — and the cheap half of it on purpose. The look is the translucent sheet letting the
wash through; the expensive part is backdrop-filter, and with several hundred cards on a full board it
stays off. Translucency alone costs nothing and is what makes every tab read as one product.
Was an opaque gradient, which is why the wash behind it was invisible everywhere except Practice. */
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.12);
/* 14px, matching Aurora's sheet. Was 16 (--r3); the two-pixel disagreement between a Practice sheet and
a Record card is exactly the kind of thing that reads as "different app" without being nameable. */
border-radius:14px;
box-shadow:var(--e2),var(--rim)}
.gamehdr,.sporthdr,.grphdr,.subhdr{
background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0))}
.gamegrp,.sport,.sportgrp{border-color:var(--line) !important}
/* Sheets and modals sit highest, so they get the deepest shadow and the clearest rim. */
.moresheet,.obetsheet,.evpanel,.gcbox,.pe-slip{
background:linear-gradient(180deg,var(--surf3),var(--surf2)) !important;
box-shadow:var(--e3),var(--rim) !important;
border-color:var(--line) !important}
/* NUMBERS ARE THE PRODUCT. Tabular everywhere, so columns line up and a digit never shifts as it updates. */
.gm-n,.hd-u,.hd-rec,.hd-n,.ps-v,.evpick-p,.evpick-e,.sc-rec,.sc-u,.gres,.gru,.gwhen,.gmeta,
.bk-big,.b3wl,.evtab-n,.evsum,.cnt,.n{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
/* Headings get tighter tracking than body. Confidence reads as compression. */
.seghead,.sportname,.grpname,.gname,.evtitle,.bk-big,.ps-v{letter-spacing:-.015em}
.bk-big,.ps-v{letter-spacing:-.03em}
/* Gold is a SIGNAL, not a texture: current selection, our pick, money in our favour. Nothing else. */
.navg.on{background:rgba(var(--gold-rgb),.09);box-shadow:inset 0 -2px 0 var(--gold)}
.subtab.on{box-shadow:var(--e1)}
.pick.tracked{border-left-color:var(--gold);box-shadow:inset 1px 0 0 rgba(var(--gold-rgb),.25)}
/* Themed browser surfaces, per the craft floor: selection, scrollbar, focus ring. */
::selection{background:rgba(var(--gold-rgb),.26);color:var(--txt)}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--surf3);background-clip:content-box}
:focus-visible{outline:2px solid rgba(var(--gold-rgb),.55);outline-offset:2px;border-radius:4px}
/* ==========================================================================================================
TYPE SYSTEM
==========================================================================================================
The stack was `-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif`, which is the default
every AI-assisted site ships and reads as exactly that. No webfont is loaded here on purpose: this page
is already ~10MB and a render-blocking third-party request would undo the caching work. Character comes
from faces ALREADY on the device instead.
Two families, each with one job.
DISPLAY, for headings, figures and anything that has to look measured:
Bahnschrift is Microsoft's DIN 1451 interpretation, ships with Windows 10+, and is a variable font with
a real width axis. DIN is the lettering standard for German road signs and engineering drawings, which
is precisely the register this product wants. On Apple it falls to SF Pro Display, which is the closest
equivalent in tone.
NUMERALS, which in a product about numbers is not a detail:
A monospace stack so every figure occupies identical width. A price ticking from -110 to -115 must not
reflow the row it sits in, and a column of units has to align on the decimal without being told to.
Body text stays on the refined system face: it is the most-read text in the app and legibility outranks
personality there. Display carries the identity; body carries the reading. */
:root{
--font-ui: 'Segoe UI Variable Text','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--font-display: 'Bahnschrift','DIN Next','SF Pro Display','Segoe UI Variable Display',var(--font-ui);
--font-num: 'Cascadia Mono','SF Mono','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
body{font-family:var(--font-ui) !important}
/* DISPLAY: the surfaces that should feel engineered rather than typed. */
.seghead,.sportname,.grpname,.gname,.evtitle,.ps-k,.evh,.navg,.subtab,.evtab,
.hd-date,.bk-lab,.sc-rec,.gst{
font-family:var(--font-display);
font-stretch:92%; /* Bahnschrift's width axis. A touch condensed reads as instrument, not
as cramped, and gracefully ignored by faces without the axis. */
letter-spacing:.005em}
/* FIGURES: monospace, tabular, slightly tighter than the prose beside them. */
.gm-n,.hd-u,.hd-rec,.hd-n,.ps-v,.evpick-p,.evpick-e,.gres,.gru,.gwhen,.bk-big,
.b3wl,.evtab-n,.cnt,.sc-u,.evsum{
font-family:var(--font-num);
font-variant-numeric:tabular-nums;
letter-spacing:-.01em}
/* The hero figures earn a size and a weight nothing else gets. One moment of scale per screen. */
.bk-big,.ps-v{font-family:var(--font-num);font-weight:700;letter-spacing:-.035em}
/* Prose keeps a readable measure. Data and tables are exempt: density is the point there. */
.boardhow p,.evpick-r,.evread,.ps-contrast,.tr-scope{max-width:68ch}
/* ---- IN PLAY: a game, then your positions in it ------------------------------------------------------ */
.ip-game{border:1px solid var(--line);border-radius:var(--r2);background:linear-gradient(180deg,var(--surf2),var(--surf));
box-shadow:var(--e1),var(--rim);margin-bottom:8px;overflow:hidden}
.ip-ghead{display:flex;align-items:center;gap:9px;padding:11px 13px;min-height:46px;flex-wrap:wrap}
.ip-mu{font-family:var(--font-display);font-stretch:92%;font-weight:700;font-size:13.5px;color:var(--txt);
flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-score{font-family:var(--font-num);font-weight:800;font-size:14px;color:var(--txt);font-variant-numeric:tabular-nums}
.ip-clock{font-size:11.5px;color:var(--mut);margin-left:5px}
/* Stated once per game, in the header, at the weight of a caveat rather than a headline. */
.ip-noodds{font-size:11.5px;color:var(--mut);font-style:italic}
.ip-n{font-family:var(--font-num);font-size:11px;font-weight:800;color:var(--txt);
background:rgba(255,255,255,.07);padding:1px 7px;border-radius:99px}
.ip-legs{border-top:1px solid var(--line2)}
.ip-leg{display:flex;align-items:center;gap:10px;padding:8px 13px;font-size:12.5px;
border-top:1px solid rgba(255,255,255,.035)}
.ip-leg:first-child{border-top:0}
.ip-leg-s{flex:1;min-width:0;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-leg .ip-price{font-family:var(--font-num);font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums}
/* ==========================================================================================================
CHROME :: the frame you see on every screen
==========================================================================================================
Three changes, each replacing a pattern that is generic rather than wrong.
1. THE WORDMARK WAS GRADIENT TEXT. The craft floor bans it outright and it is one of the loudest
generated-design tells there is. A wordmark should be a shape, not a fill effect. It is now set in
the display face at heavy weight with wide tracking, in flat gold, with a drawn mark beside it.
2. NAVIGATION WAS FIVE FLOATING PILLS. Separate rounded pills on a dark field is the default every dark
UI arrives at, and it reads as five unrelated buttons rather than one control with five positions.
It is now ONE segmented instrument switch: a single recessed housing, hairline dividers, and the
active position lit from within. You are moving a selector, not pressing unrelated buttons.
3. THE HEADER FLOATED IN THE MIDDLE OF THE PAGE. Full bleed now, with a hairline rule and the content
still held to the reading column. An instrument's chrome meets the edges of its case. */
/* Full bleed header, hairline rule, no gold tint on the border. */
header{
background:linear-gradient(180deg,rgba(7,10,17,.92),rgba(5,7,12,.86)) !important;
border-bottom:1px solid var(--line) !important;
box-shadow:0 1px 0 rgba(255,255,255,.03), 0 18px 40px -30px rgba(0,0,0,.9) !important}
/* WORDMARK: a shape, not a fill. Flat gold, display face, wide tracking, with a hairline keyline mark. */
.brand{
background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important;
color:var(--gold) !important; -webkit-text-fill-color:var(--gold) !important;
font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:.20em;
text-transform:uppercase; display:inline-flex; align-items:center; gap:9px}
.brand::before{
content:''; width:16px; height:16px; flex:none; border-radius:3px;
border:1.5px solid var(--gold); box-shadow:inset 0 0 0 2.5px var(--bg), 0 0 0 1px rgba(var(--gold-rgb),.18)}
.brand small{
-webkit-text-fill-color:var(--mut) !important; color:var(--mut) !important;
font-family:var(--font-ui); letter-spacing:.04em; font-size:11px; text-transform:none}
/* NAV: one housing, five positions. Recessed, hairline-divided, the live one lit from inside. */
.navwrap,.navrow,.bar>.navs{display:inline-flex}
.navg{
border-radius:0 !important;
padding:8px 15px !important;
border-left:1px solid var(--line);
background:transparent !important;
box-shadow:none !important;
font-family:var(--font-display); font-stretch:92%; font-weight:600; letter-spacing:.02em}
.navg:first-child{border-left:0}
.navg.on{
color:var(--gold) !important;
background:linear-gradient(180deg,rgba(var(--gold-rgb),.14),rgba(var(--gold-rgb),.05)) !important;
box-shadow:inset 0 1px 0 rgba(var(--gold-rgb),.22), inset 0 -2px 0 var(--gold) !important}
/* The housing itself. Applied to whatever element wraps the group, matched loosely so markup can vary. */
.bar>div:has(> .navg){
display:inline-flex; border:1px solid var(--line); border-radius:var(--r2);
background:rgba(0,0,0,.28); box-shadow:inset 0 1px 2px rgba(0,0,0,.5); overflow:hidden}
/* SUB NAV: reads as a filter rail under the switch, not a second row of buttons competing with it. */
.subnav{background:rgba(5,7,12,.90) !important;border-bottom:1px solid var(--line) !important}
.subtab{
border-radius:var(--r1) !important;
background:transparent !important;
border:1px solid transparent !important;
font-family:var(--font-display); font-stretch:94%; letter-spacing:.015em}
.subtab:hover{background:rgba(255,255,255,.035) !important;border-color:var(--line) !important}
.subtab.on{
color:var(--gold) !important; background:rgba(var(--gold-rgb),.10) !important;
border-color:rgba(var(--gold-rgb),.30) !important; box-shadow:none !important}
/* LIGHT THEME. Killing the gradient globally is right (a wordmark is a shape, not a fill), but #ffd166 on
a near-white page fails contrast badly. Light mode gets a deepened gold that still reads as the same
brand colour and clears 4.5:1 against the paper. */
body.theme-light .brand{color:#8a5a00 !important;-webkit-text-fill-color:#8a5a00 !important}
body.theme-light .brand::before{border-color:#8a5a00;box-shadow:inset 0 0 0 2.5px #fff,0 0 0 1px rgba(138,90,0,.18)}
body.theme-light .navg.on{
color:#8a5a00 !important;
background:linear-gradient(180deg,rgba(138,90,0,.10),rgba(138,90,0,.04)) !important;
box-shadow:inset 0 -2px 0 #8a5a00 !important}
body.theme-light .subtab.on{color:#8a5a00 !important;background:rgba(138,90,0,.09) !important;
border-color:rgba(138,90,0,.28) !important}
body.theme-light .bar>div:has(> .navg){background:rgba(0,0,0,.04);box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
/* ==========================================================================================================
THE BOARD :: rebuilt to the instrument language
==========================================================================================================
The board carried FOUR nesting levels to reach 31 picks: sport group, league, game, market, pick. Every
level was a with the same visual weight, so the eye could not tell a sport from a market and
the whole thing read as one indented list with five headers of chrome per bet.
The rebuild does not remove levels, it RANKS them. Depth now maps to ELEVATION AND WEIGHT rather than to
indentation, so you can see which level you are looking at without reading it:
sport group a quiet rail. A label, not a container. No box, no fill.
league a hairline header with a rule under it.
GAME the unit. A raised card with rim light and its own shadow. It is what a person actually
thinks in, so it is the only level that gets a surface.
market a divider inside the card, not another box.
pick a row on that surface, on the fixed columns.
The gold left edge is reserved for OUR tracked picks and appears nowhere else, so the thing you came for
is findable by colour before you read a word. */
/* Level 1: the sport group stops being a box. */
.sportgrp{border:0 !important;background:none !important;box-shadow:none !important;
border-radius:0 !important;margin:0 0 6px !important;padding:0 !important}
.grphdr{
background:none !important;border:0 !important;padding:14px 2px 6px !important;
font-family:var(--font-display);font-stretch:92%;font-weight:700;font-size:12px;
letter-spacing:.14em;text-transform:uppercase;color:var(--mut) !important;
min-height:0 !important;box-shadow:none !important}
/* Level 2: the league is a hairline header, not a panel. */
.sport{border:0 !important;background:none !important;box-shadow:none !important;
border-radius:0 !important;margin:0 0 4px !important}
.sporthdr{
background:none !important;border:0 !important;border-bottom:1px solid var(--line) !important;
padding:9px 2px !important;border-radius:0 !important;box-shadow:none !important}
.sportname{font-family:var(--font-display);font-stretch:92%;font-weight:700;font-size:13.5px;
letter-spacing:.01em;color:var(--txt)}
/* Level 3: THE GAME. The only level that becomes a surface. */
.gamegrp{
background:linear-gradient(180deg,var(--surf2),var(--surf)) !important;
border:1px solid var(--line) !important;
border-radius:var(--r2) !important;
box-shadow:var(--e1),var(--rim) !important;
margin:6px 0 !important;overflow:hidden}
.gamegrp[open]{box-shadow:var(--e2),var(--rim) !important;border-color:#252c40 !important}
.gamehdr{
background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0)) !important;
border:0 !important;padding:12px 14px !important;min-height:52px}
.gamegrp[open] .gamehdr{border-bottom:1px solid var(--line) !important}
.gt-a,.gt-h{font-family:var(--font-display);font-stretch:94%;font-weight:700;letter-spacing:.005em}
.gt-at{color:var(--mut);margin:0 6px;font-weight:400}
/* Level 4: the market is a divider, not another container. */
.subcat{border:0 !important;background:none !important;border-radius:0 !important;box-shadow:none !important}
.subhdr{
background:none !important;border:0 !important;border-top:1px solid var(--line2) !important;
padding:8px 14px !important;border-radius:0 !important;min-height:40px}
.subcat:first-of-type>.subhdr{border-top:0 !important}
/* Level 5: the pick. Flat row on the card, gold edge only when it is ours. */
.pick{
background:none !important;border-top:1px solid rgba(255,255,255,.035) !important;
border-left:2px solid transparent !important;padding:9px 14px !important}
.pick.tracked{border-left-color:var(--gold) !important;
background:linear-gradient(90deg,rgba(var(--gold-rgb),.055),transparent 42%) !important}
.pick.unproven{background:none !important;opacity:.62}
.pick.unproven:hover{opacity:1}
/* Status and market chips in the display face so the game row reads as instrumentation. */
.gst{font-family:var(--font-display);font-stretch:90%;font-weight:700;letter-spacing:.06em}
.gc{font-family:var(--font-display);font-stretch:90%;letter-spacing:.03em}
/* ==========================================================================================================
SHARED COMPONENTS :: the layer every tab inherits
==========================================================================================================
Applied globally rather than per tab, so a surface nobody has touched still arrives in the new language.
These are the pieces that appear on every screen: tables, panels, inputs, buttons, badges. */
/* TABLES. This product is mostly tables pretending to be lists, so they get instrument treatment: figures
monospaced and right aligned so decimals stack, headers quiet and lettered, rules hairline. A ruled box
around every cell is a spreadsheet; a rule under every row is a ledger. */
table{font-variant-numeric:tabular-nums}
th{
font-family:var(--font-display);font-stretch:92%;font-weight:700 !important;
font-size:11.5px !important;letter-spacing:.10em !important;color:var(--mut) !important;
border-bottom:1px solid var(--line) !important;padding:9px 10px !important;
position:sticky;top:0;background:var(--surf);z-index:1}
td{border-bottom:1px solid var(--line2) !important;padding:9px 10px !important}
tr:last-child td{border-bottom:0 !important}
/* Numeric columns: monospace, right aligned, so a column of units reads as a column. */
td:not(:first-child),th:not(:first-child){text-align:right}
td:not(:first-child){font-family:var(--font-num);font-variant-numeric:tabular-nums}
@media(hover:hover){tbody tr:hover td{background:rgba(255,255,255,.022)}}
/* PANELS. Same elevation grammar as the game card, so a table and a board row feel like one product. */
.panel{
background:linear-gradient(180deg,var(--surf2),var(--surf)) !important;
border:1px solid var(--line) !important;border-radius:var(--r3) !important;
box-shadow:var(--e1),var(--rim) !important;overflow:hidden}
/* INPUTS. Recessed rather than raised: a field is a hole you put something into, and that reads as depth
inward. Focus lights the edge instead of drawing a second box around it. */
.tinput,.bq,input:not([type]),input[type=text],input[type=search],input[type=number],input[type=password],input[type=email],input[type=date],textarea,select{
background:rgba(0,0,0,.30) !important;
border:1px solid var(--line) !important;
border-radius:var(--r1) !important;
color:var(--txt) !important;
box-shadow:inset 0 1px 2px rgba(0,0,0,.45) !important;
font-family:var(--font-ui)}
.tinput:focus,.bq:focus,input:focus,textarea:focus,select:focus{
outline:none !important;border-color:rgba(var(--gold-rgb),.42) !important;
box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 0 0 3px rgba(var(--gold-rgb),.10) !important}
::placeholder{color:#5f6780;opacity:1}
/* BUTTONS. One primary treatment, gold, used for the single most likely action on a screen and nothing
else. Everything else is a quiet outline, because a screen where six things shout has no primary. */
.btn{
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)) !important;
border:1px solid var(--line) !important;border-radius:var(--r1) !important;
color:var(--txt) !important;box-shadow:var(--e1),var(--rim) !important;
font-family:var(--font-display);font-stretch:94%;font-weight:600;letter-spacing:.015em}
.btn.primary,.btn.gold,.ps-go,.addbig{
background:linear-gradient(180deg,var(--gold),var(--gold2)) !important;
border-color:rgba(var(--gold-rgb),.55) !important;color:#120d02 !important;font-weight:700 !important;
box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 18px -8px rgba(var(--gold-rgb),.45) !important}
/* BADGES. Lettered and quiet. A badge labels something, it does not compete with it. */
.badge{
font-family:var(--font-display);font-stretch:90%;font-weight:700;letter-spacing:.06em;
border-radius:5px;padding:2px 7px}
/* SEGMENTED CONTROLS everywhere inherit the nav's housing idea, so one interaction pattern reads the same
in every context instead of four dialects of the same control. */
.segrp{display:inline-flex;border:1px solid var(--line);border-radius:var(--r2);
background:rgba(0,0,0,.28);box-shadow:inset 0 1px 2px rgba(0,0,0,.45);overflow:hidden}
.segrp .segbtn{border-radius:0 !important;border:0 !important;border-left:1px solid var(--line) !important;
background:transparent !important;box-shadow:none !important}
.segrp .segbtn:first-child{border-left:0 !important}
.segrp .segbtn.on{color:var(--gold) !important;
background:linear-gradient(180deg,rgba(var(--gold-rgb),.13),rgba(var(--gold-rgb),.04)) !important;
box-shadow:inset 0 -2px 0 var(--gold) !important}
/* TOASTS pick up the sheet elevation so transient surfaces match permanent ones. */
.toast{border-radius:var(--r2) !important;box-shadow:var(--e3),var(--rim) !important}
/* ---- INFINITE ANIMATIONS: PAUSED WHEN NOBODY IS LOOKING ---------------------------------------------
There are 43 of them. Deleting them wholesale would be wrong, because they are not one thing:
live indicators (.mz-live-dot, .livechip, .olive, .gc-livedot, .sc-live) carry STATE, a game is on;
skeletons (.mz-skel, .wal-load) carry "loading", which is information;
the .bd-* border effects are cosmetics users BOUGHT, so their whole value is that they move.
What they share is that every one keeps a compositor layer busy forever, including in a background tab
where nobody can see them. A tracker sits open in a tab all day, so this is the battery cost of the
product. Pausing on hidden costs nothing visually and stops the work when it cannot be perceived. */
body.midas-idle *,body.midas-idle *::before,body.midas-idle *::after{
animation-play-state:paused !important}
/* ---- EVENT PANEL: PANES, MOBILE FIRST ------------------------------------------------------------------
Written unprefixed so it applies on PHONES, which is where this panel is actually read. The previous
pass put its only layout work behind @media(min-width:760px) and shipped mobile unchanged, which is why
"nothing changed" was a fair description of it. */
.evtabs{display:flex;gap:6px;position:static;padding:2px 0 10px;background:none}
.evtab{flex:1;min-height:40px;padding:9px 10px;border-radius:10px;border:1px solid var(--line);
background:rgba(255,255,255,.02);color:var(--mut);font-size:12px;font-weight:700;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.evtab.on{color:var(--gold);border-color:rgba(var(--gold-rgb),.38);background:rgba(var(--gold-rgb),.10)}
.evtab-n{font-size:11.5px;font-weight:800;padding:1px 6px;border-radius:20px;
background:rgba(255,255,255,.09);color:var(--txt);font-variant-numeric:tabular-nums}
.evtab.on .evtab-n{background:rgba(var(--gold-rgb),.20);color:var(--gold)}
.evpane[hidden]{display:none}
/* A pick is ONE LINE until you ask for more. This is what stops a 17-prop game being a wall of prose. */
.evpick-x>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center}
.evpick-x>summary::-webkit-details-marker{display:none}
.evpick-x>summary::after{content:'';flex:none;margin-left:8px;width:6px;height:6px;
border-right:1.5px solid var(--mut);border-bottom:1.5px solid var(--mut);
transform:rotate(45deg) translate(-2px,-2px);transition:transform 160ms cubic-bezier(0.23,1,0.32,1)}
.evpick-x[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.evpick-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;flex:1}
.evpick-s{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--txt);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evpick-r{font-size:12px;line-height:1.6;color:var(--mut);padding:2px 0 10px}
.evpick+.evpick,.evpick-x+.evpick-x,.evpick+.evpick-x,.evpick-x+.evpick{border-top:1px solid rgba(255,255,255,.05)}
@media(prefers-reduced-motion:reduce){.evpick-x>summary::after{transition:none}}
/* ---- MOTION BY FREQUENCY (Emil Kowalski's rule) ---------------------------------------------------------
Animate by how often a thing is SEEN, not by how nice it looks once. Opening a game row is list
navigation: it happens tens of times in a session, and at that frequency an animated disclosure stops
reading as polish and starts reading as lag. Modals and sheets, seen occasionally, keep their motion.
So the chevrons go instant here while .evfold (opened rarely) keeps its 180ms curve.
What replaces it is FEEDBACK, which is a valid purpose: the row acknowledges the press immediately. A
background flash rather than a scale, because scaling a full-width row looks like the layout broke. */
.grphdr::before,.sporthdr .chev,.gamehdr .chev,.subhdr .chev{transition:none}
@media(hover:hover) and (pointer:fine){
.gamehdr:hover,.sporthdr:hover,.grphdr:hover{background:#1b2036}
}
.gamehdr:active,.sporthdr:active,.grphdr:active,.subhdr:active{background:#20263f}
/* Reduced motion means fewer/gentler, not zero: opacity and colour stay, movement goes. */
@media(prefers-reduced-motion:reduce){
.evfold>summary::after,.evgrp>summary::after,.boardhow>summary::after{transition:none!important}
}
@media(min-width:760px){
/* chev | matchup | status | time | markets | count/result | Details */
/* THE COUNT TRACK HAS TO FIT THE COUNT. It was a flat 92px while .gmeta is white-space:nowrap, and a
fully ungraded game reads "32 bets · 32 no result" -- about 130px at 11px tabular. The text
overflowed its track, and because it is justify-self:end the overflow spills LEFT, straight across the
markets track: "F1 Total" landed on top of "7 bets · 7 no result" and rendered as "F17otals -7 no
result". max-content sizes the track to the longest count and the 1fr matchup track gives up the room. */
.gamehdr{display:grid;
grid-template-columns:14px minmax(0,1fr) 78px 68px minmax(0,164px) minmax(92px,max-content) 74px;
align-items:center;gap:10px}
.gamehdr>.gname{min-width:0}
.gamehdr>.gst{justify-self:start}
.gamehdr>.gwhen{justify-self:end}
/* min-width:0 IS THE WHOLE FIX AND overflow:hidden ALONE NEVER WAS. A grid item's automatic minimum size
is its CONTENT size, so .gchips refused to shrink below the width of five chips and overflowed its
164px track no matter what overflow said -- the chips drew straight across the count beside them and
produced "F5 ML" struck through "18 bets". Widening the count track (done earlier) moved the collision
without removing it, because the overflow was coming from this side. */
/* justify-self:start WAS THE ACTUAL BUG, and neither overflow:hidden nor min-width:0 could beat it.
A grid item defaults to justify-self:stretch, which sizes it to the TRACK. justify-self:start opts out
of that and sizes it to its CONTENT -- so with five market chips the box rendered 243px wide inside a
164px track and overflowed by 79px, straight across the count beside it. overflow:hidden clipped
nothing because the box itself was 243px; min-width:0 permitted a shrink that nothing was asking for.
Measured on the live page before the fix: track 164px, element width 243px, scrollWidth 245px,
17px of overlap into .gmeta. Stretching it to the track is what makes overflow:hidden mean something. */
.gamehdr>.gchips{overflow:hidden;flex-wrap:nowrap;justify-self:stretch;min-width:0;max-width:100%}
/* margin-left:auto was doing the right-alignment under flex and fights the grid track. */
.gamehdr>.gmeta,.gamehdr>.gres{margin-left:0;justify-self:end;text-align:right;min-width:0}
.gamehdr>.evbtn{justify-self:end}
}
.evroofnote{font-size:11px;line-height:1.5;color:var(--mut);margin:-6px 0 12px;font-style:italic}
/* ---- PICK GROUPS: 17 props become "Player props 17", opened when you want them ---- */
.evgrp{border-top:1px solid rgba(255,255,255,.06);margin-top:8px}
.evgrp:first-of-type{border-top:0;margin-top:2px}
.evgrp>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:8px 0;
font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);
min-height:38px;user-select:none}
.evgrp>summary::-webkit-details-marker{display:none}
.evgrp>summary::after{content:'';margin-left:auto;width:6px;height:6px;border-right:1.5px solid var(--mut);
border-bottom:1.5px solid var(--mut);transform:rotate(45deg) translate(-2px,-2px);
transition:transform 180ms cubic-bezier(0.23,1,0.32,1)}
.evgrp[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.evgrp>summary:hover{color:var(--txt)}
.evgrpn{font-size:11px;font-weight:800;color:var(--txt);background:rgba(255,255,255,.07);
padding:1px 7px;border-radius:20px;letter-spacing:0}
/* Folded context. summary::-webkit-details-marker is killed so the row reads as a line of type, not a widget. */
.evfold{border:1px solid var(--line);border-radius:11px;margin-bottom:8px;background:rgba(255,255,255,.015);
overflow:hidden;transition:border-color .16s ease}
.evfold:hover{border-color:var(--line3)}
.evfold>summary{cursor:pointer;list-style:none;padding:11px 13px;display:flex;align-items:center;gap:9px;
user-select:none;min-height:44px;box-sizing:border-box}
.evfold>summary::-webkit-details-marker{display:none}
.evfold>summary::after{content:'';margin-left:auto;flex:none;width:7px;height:7px;border-right:1.5px solid var(--mut);
border-bottom:1.5px solid var(--mut);transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.evfold[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.evfold[open]>summary{border-bottom:1px solid var(--line)}
.evfold>*:not(summary){padding:0 13px 12px}
.evfold>.evwx{padding-top:11px}
/* The summary line does the work of the closed panel: it must carry real information, not a count of rows. */
.evsum{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--mut);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;max-width:56%;font-variant-numeric:tabular-nums}
.evfold>summary>.evsum{margin-right:2px}
.evblk.evlead .evsum{color:rgba(var(--gold-rgb),.72)}
/* A pick reads as a unit: side and price on one line, the written case under it. */
.evpick-trk{border-left:2px solid var(--gold);padding-left:10px}
.evpick-p{font-size:13px;font-weight:800;color:var(--txt);font-variant-numeric:tabular-nums;white-space:nowrap}
.evpick-b{font-size:11.5px;font-weight:600;color:var(--mut);margin-left:5px;text-transform:uppercase;letter-spacing:.03em}
.evpick-nb{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:4px;
background:rgba(var(--push-rgb),.16);color:#9fa8bd;white-space:nowrap}
@media(max-width:560px){
.evsum{max-width:44%}
.evfold>summary{padding:12px 12px}
}
body.theme-light{
--bg:#f5f6fb;--surf:#ffffff;--surf2:#f0f2f9;--line:#e2e6f0;--line2:#eceff7;
--txt:#12151f;--mut:#5a6078;--gold:#b8860b;--gold2:#a9760a;
--good:#0f8a52;--bad:#d13b53;--gold-dim:#8a6a12;--ice2:#0f6f9e}
body.theme-light{background:
radial-gradient(1000px 520px at 8% -10%,rgba(255,193,7,.10),transparent 60%),
radial-gradient(1100px 640px at 102% -4%,rgba(16,150,90,.07),transparent 55%),var(--bg);
color:var(--txt)}
body.theme-light ::selection{background:rgba(184,134,11,.24);color:#12151f}
body.theme-light ::-webkit-scrollbar-thumb{background:#c9cfe0;border:2px solid var(--bg)}
body.theme-light header{background:rgba(255,255,255,.82);border-bottom:1px solid rgba(184,134,11,.20);box-shadow:0 10px 30px -24px rgba(30,40,80,.5)}
body.theme-light .brand{background:linear-gradient(120deg,#a9760a,#c9920f 45%,#e0a112);-webkit-background-clip:text;background-clip:text;color:transparent}
body.theme-light .navg.on{background:rgba(184,134,11,.12)}
body.theme-light h2{color:#3a4a6a}
body.theme-light .subnav{background:rgba(245,246,251,.92);border-bottom:1px solid var(--line)}
body.theme-light .subtab{background:var(--surf2);border-color:var(--line2);color:var(--mut)}
body.theme-light .subtab:hover{color:var(--txt);border-color:var(--line)}
body.theme-light .subtab.on{background:var(--gold);border-color:var(--gold);color:#fff}
body.theme-light .subadd{color:#fff;background:linear-gradient(120deg,var(--gold),var(--gold2));border-color:var(--gold)}
body.theme-light .botnav{background:rgba(255,255,255,.94);border-top:1px solid rgba(184,134,11,.18);box-shadow:0 -8px 26px -18px rgba(30,40,80,.4)}
body.theme-light .seghead,body.theme-light .trk-lbl,body.theme-light .zoo-cat{background:rgba(245,246,251,.94)}
body.theme-light .card{background:linear-gradient(165deg,#ffffff,#f4f6fc);border-color:var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(30,40,80,.04)}
body.theme-light .card:hover{border-color:#cfd6ea;box-shadow:0 16px 34px -26px rgba(30,40,80,.35)}
body.theme-light .grid-primary .card{border-color:#d5dbec;background:linear-gradient(165deg,#ffffff,#eef1fa)}
body.theme-light .card.hero{background:linear-gradient(135deg,#f2f5ff,#e8ecfa);border-color:rgba(15,138,82,.35)}
body.theme-light .panel{background:var(--surf);border-color:var(--line)}
body.theme-light th,body.theme-light td{border-bottom:1px solid var(--line2)}
body.theme-light tr:hover td{background:#f2f4fb}
body.theme-light .chip{background:var(--surf);border-color:var(--line);color:#3a4a6a}
body.theme-light .chip.on{background:var(--gold);color:#fff;border-color:var(--gold)}
body.theme-light .segrp{background:#eef1f8;border-color:var(--line)}
body.theme-light .segbtn{color:#5a6078}
body.theme-light .segbtn:hover{color:#12151f}
body.theme-light .segbtn.on{background:var(--gold);color:#fff}
body.theme-light input[type=text],body.theme-light input[type=number],body.theme-light input[type=password],body.theme-light input[type=search],body.theme-light input:not([type]),body.theme-light textarea,body.theme-light #q,body.theme-light .tinput,body.theme-light .tsel,body.theme-light .loginbox input,body.theme-light #chat-text,body.theme-light .tsearch input,body.theme-light .pb-form input,body.theme-light .pe-stakerow input,body.theme-light .rm-in input,body.theme-light .oddssearch,body.theme-light select{background:#ffffff;border-color:var(--line);color:var(--txt)}
body.theme-light input::placeholder,body.theme-light textarea::placeholder{color:#9aa1b8}
body.theme-light input:focus,body.theme-light textarea:focus,body.theme-light select:focus,body.theme-light .tinput:focus,body.theme-light .tsel:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,134,11,.15)}
body.theme-light .btn,body.theme-light .loginbox button,body.theme-light .pe-go,body.theme-light .lp-cta,body.theme-light .addfab{background:linear-gradient(135deg,#e0a112,#c9920f);color:#fff}
body.theme-light .btn.ghost,body.theme-light .lp-ghost{background:transparent;border-color:var(--line);color:var(--txt)}
body.theme-light .so-btn,body.theme-light .rm-rb{background:var(--surf2);border-color:var(--line);color:var(--txt)}
body.theme-light .mini{background:#eef2fb;border-color:#d3ddf2;color:#33518c}
body.theme-light .calnav button{background:var(--surf);border-color:var(--line);color:var(--txt)}
body.theme-light .sportgrp,body.theme-light .osportgrp{background:#f7f9fe;border-color:#dde3f1}
body.theme-light .grphdr,body.theme-light .osgrp-hdr{background:linear-gradient(90deg,#eef2fb,#f6f8fe)}
body.theme-light .grpname,body.theme-light .osgrp-name{color:#1c2a44}
body.theme-light .sport,body.theme-light .game{background:#ffffff;border-color:var(--line)}
body.theme-light .sporthdr{background:linear-gradient(90deg,#f0f3fb,#f7f9fe)}
body.theme-light .subhdr,body.theme-light .gamehdr{background:#f2f4fb}
body.theme-light .pick{border-top:1px solid var(--line2);border-left:3px solid #b7c0dc;background:#fbfcfe}
body.theme-light .pick.win{border-left-color:#0f8a52;background:#eef8f2}
body.theme-light .pick.loss{border-left-color:#d13b53;background:#fdf0f2}
body.theme-light .reason{border-top:1px dashed var(--line);color:#3d4560}
body.theme-light .ctxline,body.theme-light .setl,body.theme-light .gc-sit{background:#eef4fc;border-color:#d6e2f2;color:#3d4d70}
body.theme-light .cal-day{border-color:#dde3f1}
body.theme-light .cal-green{background:#e5f5ec}
body.theme-light .cal-red{background:#fbeaed}
body.theme-light .cal-flat{background:#eef1f8}
body.theme-light .cal-g1{background:#e3f6ea}body.theme-light .cal-g2{background:#c3ecd2}body.theme-light .cal-g3{background:#96deb1}
body.theme-light .cal-r1{background:#fce8ec}body.theme-light .cal-r2{background:#f7ccd4}body.theme-light .cal-r3{background:#efa8b5}
body.theme-light .port,body.theme-light .bankhero{background:radial-gradient(700px 240px at 6% -34%,rgba(184,134,11,.10),transparent 62%),linear-gradient(160deg,#ffffff,#eef1fa);border-color:#d9dfef;box-shadow:0 26px 60px -44px rgba(30,40,80,.4)}
body.theme-light .bankhero.sim{background:radial-gradient(700px 240px at 6% -34%,rgba(20,140,190,.12),transparent 62%),linear-gradient(160deg,#ffffff,#e9f4fb)}
body.theme-light .port-label,body.theme-light .bankhero .bk-lab{color:#9a7d2f}
body.theme-light .port-big.pos,body.theme-light .bankhero .bk-big.pos{background:linear-gradient(120deg,#12a866,#0c7a49);-webkit-background-clip:text;background-clip:text;color:transparent}
body.theme-light .port-big.neg,body.theme-light .bankhero .bk-big.neg{background:linear-gradient(120deg,#e0596e,#c22f47);-webkit-background-clip:text;background-clip:text;color:transparent}
body.theme-light .trackrow{border-top:1px solid var(--line2)}
body.theme-light .trackrow.locked{background:#f4f6fc;border-color:#dde3f1}
body.theme-light .daygrp{background:var(--surf);border-color:var(--line)}
body.theme-light .dayhdr,body.theme-light .bd-hdr{background:#eef2fb}
body.theme-light .badge{background:#e7eaf4;color:#3d4560}
body.theme-light .badge.shop{background:#e0f3e7;color:#0f7a48}
body.theme-light .badge.res-w,body.theme-light .legchip.lw,body.theme-light .lp-res.w{background:#dff2e7;color:#0d7a47}
body.theme-light .badge.res-l,body.theme-light .legchip.ll,body.theme-light .lp-res.l{background:#fbe3e7;color:#c22f47}
body.theme-light .livechip,body.theme-light .tmg-live,body.theme-light .vbadge.vlive,body.theme-light .sc-live{background:#fbe3e7;color:#c22f47;border-color:#f0bcc5}
body.theme-light .dw-dia,body.theme-light .dw-bal{background:#e0f2fb;color:#0d6a9a;border-color:#a9d8ef}
body.theme-light .dw-coin{background:rgba(184,134,11,.12);color:#9a7d2f;border-color:rgba(184,134,11,.3)}
body.theme-light .rc-card,body.theme-light .rc-kpi,body.theme-light .rc-mkt,body.theme-light .zoo-st,body.theme-light .pf-st,body.theme-light .sim-mkt,body.theme-light .sc-card,body.theme-light .locker,body.theme-light .learn-card,body.theme-light .pg-ladder{background:var(--surf);border-color:var(--line)}
body.theme-light .zoo-card{background:linear-gradient(165deg,#ffffff,#f4f6fc);border-color:var(--line)}
body.theme-light .zoo-ava{background:#eef2fb;border-color:#d6def0}
body.theme-light .zoo-nm{color:#1c2a44}
body.theme-light .zoo-follow.on{background:var(--gold);color:#fff}
body.theme-light .orow,body.theme-light .ogame,body.theme-light .pe-prop{background:linear-gradient(165deg,#ffffff,#f4f6fc);border-color:#dde3f1}
body.theme-light .oaway,body.theme-light .ohome,body.theme-light .og-tm,body.theme-light .pe-gmu,body.theme-light .pe-pname,body.theme-light .sc-nm{color:#1c2a44}
body.theme-light .obtn,body.theme-light .pe-ob,body.theme-light .pe-ub,body.theme-light .m-opt{background:#eef2fb;border-color:#cfd9ef;color:#25467e}
body.theme-light .obtn:hover{background:#dde8fb;border-color:#7fa4de}
body.theme-light .pe-ob.on,body.theme-light .m-opt.on{background:#dff2e7;border-color:#35a06a;color:#0d7a47}
body.theme-light .pe-ub.on{background:#fdf1dc;border-color:#d99a1e;color:#8a6a12}
body.theme-light .pe-game,body.theme-light .pe-entry,body.theme-light .m-card,body.theme-light .compete-card{background:linear-gradient(180deg,#ffffff,#f5f7fd);border-color:#dde3f1}
body.theme-light .pe-slip-in,body.theme-light .obetsheet,body.theme-light .moresheet{background:linear-gradient(180deg,#ffffff,#f4f6fc);border-color:#d9dfef}
body.theme-light .sheet-grip{background:#c3cadd}
body.theme-light .pe-topbar .pe-freepill{background:#e0f2fb;border-color:#a9d8ef;color:#0d6a9a}
body.theme-light .layer{background:linear-gradient(165deg,#ffffff,#f4f6fc);border-color:var(--line)}
body.theme-light .bcard{background:linear-gradient(165deg,#eefaf5,#f4fbf8);border-color:#bfe6d5}
body.theme-light .pg-hero{background:linear-gradient(150deg,#f2effc,#eef1fb);border-color:#d9d3ef}
body.theme-light .pg-lvl{color:#1c2a44}
body.theme-light .pg-xpbar,body.theme-light .pg-st,body.theme-light .pg-ach{background:#f0f2f9;border-color:var(--line)}
body.theme-light .pg-tier{background:var(--surf2);border-color:var(--line2)}
body.theme-light .pg-tier.got{border-color:rgba(184,134,11,.45);background:rgba(184,134,11,.08)}
body.theme-light .gcbox{background:linear-gradient(180deg,#ffffff,#f4f6fc);border-color:var(--line);box-shadow:0 30px 70px -30px rgba(30,40,80,.4)}
body.theme-light .gc-wp,body.theme-light .gc-subtabs{background:#f4f6fc;border-color:var(--line)}
body.theme-light .gcbtn{color:#5a6078}
body.theme-light .gcbtn.on{background:var(--gold);color:#fff}
body.theme-light .gc-play,body.theme-light .gc-box td{border-bottom:1px solid var(--line2)}
body.theme-light .rm-list,body.theme-light .rm-row{border-color:var(--line);border-bottom-color:var(--line2)}
body.theme-light .rm-ride{background:#eef8f2;border-color:#a9dcc2}
body.theme-light #overlay,body.theme-light .shareopts{background:rgba(240,242,250,.86)}
body.theme-light .loginbox,body.theme-light .so-card,body.theme-light .wheelbox,body.theme-light .betbox,body.theme-light .tourbox{background:linear-gradient(160deg,#ffffff,#f2f4fc);border-color:var(--line);box-shadow:0 24px 64px -30px rgba(30,40,80,.4)}
body.theme-light .so-x{background:#1a1a1a;border-color:#1a1a1a;color:#fff}
body.theme-light .glosspop{background:#ffffff;border-color:#d9dfef;color:#1c2a44;box-shadow:0 16px 40px -18px rgba(30,40,80,.4)}
body.theme-light .gq{color:#0d6a9a;background:rgba(20,140,190,.14)}
body.theme-light #winrx{background:radial-gradient(900px 500px at 50% 30%,rgba(184,134,11,.10),transparent 70%),rgba(240,242,250,.92)}
body.theme-light .wrx-card{background:linear-gradient(160deg,#ffffff,#f2f4fc);border-color:var(--line);box-shadow:0 24px 64px -30px rgba(30,40,80,.4),0 0 0 1px rgba(184,134,11,.14) inset}
body.theme-light .wrx-profit{color:#c9920f;text-shadow:none}
body.theme-light .wrx-kick{color:#0d7a47}
body.theme-light .toast{background:#dff2e7;color:#0d7a47;border-color:#a9dcc2}
body.theme-light .sliperr{background:#fbe3e7;border-color:#f0bcc5;color:#c22f47}
body.theme-light .slipbtn{background:linear-gradient(135deg,rgba(184,134,11,.14),rgba(184,134,11,.07));border-color:rgba(184,134,11,.4);color:#12151f}
body.theme-light .msg.me{background:#dce6fb;color:#1c2a44}
body.theme-light .msg.bot{background:#f0f2f9;border-color:var(--line)}
body.theme-light .who-me{background:rgba(18,21,31,.04);border-color:var(--line)}
body.theme-light .who a,body.theme-light .who-lock{color:#2f56a8}
body.theme-light .who-ava{background:#c3cee6;color:#1c2a44}
body.theme-light .mz-skel{background:rgba(18,21,31,.06)}
body.theme-light .mz-skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
body.theme-light .livebubble{background:linear-gradient(135deg,#ffffff,#f2f4fc);border-color:rgba(184,134,11,.45);color:#a9760a;box-shadow:0 12px 30px -12px rgba(30,40,80,.35)}
body.theme-light .livebubble .lb-count{background:var(--gold);color:#fff}
body.theme-light .askbubble{color:#0d6a9a;border-color:rgba(20,140,190,.4)}
body.theme-light .lb-row{border-bottom:1px solid var(--line2)}
body.theme-light .pm-card,body.theme-light .setcard{background:var(--surf);border-color:var(--line)}
body.theme-light .pm-opt{background:var(--surf2);border-color:var(--line2);color:var(--txt)}
body.theme-light .pm-opt:hover{border-color:var(--gold);background:#ffffff}
body.theme-light .pm-add{background:#e2e6f0;color:var(--mut)}
body.theme-light .zeus-edge{background:linear-gradient(160deg,rgba(184,134,11,.08),rgba(240,242,250,.6));border-color:rgba(184,134,11,.28)}
body.theme-light .zeus-edge.ze-empty{background:var(--surf);border-color:var(--line)}
body.theme-light .ze-gap.up{background:#dff2e7;color:#0d7a47}
body.theme-light .ze-gap.down{background:#fbe3e7;color:#c22f47}
body.theme-light .morestat>summary{color:var(--mut)}
body.theme-light .unproven{background:#e7eaf4;color:#5a6078;border-color:#d3d8e8}
body.theme-light .trk-empty .te-cta{background:linear-gradient(120deg,#e0a112,#c9920f);color:#fff}
body.theme-light .te-alt{color:var(--mut)}
body.theme-light .pos,body.theme-light .lk-win b,body.theme-light .shadowline .pos{color:#0f8a52}
body.theme-light .neg,body.theme-light .rm,body.theme-light .shadowline .neg{color:#d13b53}
body.theme-light .lp-hdr{background:rgba(255,255,255,.85);border-bottom:1px solid rgba(184,134,11,.18)}
body.theme-light .lp-sub,body.theme-light .lp-fc p,body.theme-light .lp-panel p{color:#4a5170}
body.theme-light .lp-zc,body.theme-light .lp-slip,body.theme-light .lp-panel{background:linear-gradient(165deg,#ffffff,#f4f6fc);border-color:#d9dfef;box-shadow:0 40px 80px -50px rgba(30,40,80,.4)}
body.theme-light .lp-zrow,body.theme-light .lp-brow{border-bottom:1px solid var(--line2)}
body.theme-light .lp-res.p{background:#e3ebfb;color:#2f56a8}
body.theme-light .lp-list .ic{background:rgba(15,138,82,.14);color:#0d7a47}
body.theme-light .lp-sticky{background:rgba(255,255,255,.94);border-top:1px solid rgba(184,134,11,.2)}
body.theme-light .lp-cta{background:linear-gradient(135deg,#e0a112,#c9920f);color:#fff}
body.theme-light .lp-ghost{border-color:var(--line);color:var(--txt)}
/* ==========================================================================================
MIDAS DENSITY PASS v2 — APPEND LAST, AFTER LIGHT_CSS.
Everything is driven by the tokens in :root. To make the whole app looser or tighter,
change --fs-3 and --s-3; nothing else needs to move.
========================================================================================== */
/* BATCHES 1-2 of the density pass: type scale, spacing/radius snap, de-nesting.
Group order is the AUTHOR'S, not append order. 8 and 9 share 50 selectors and 9 must win on all
of them (`.ob-best{padding:0}` beats `.ob-best{padding:2px 6px}`), so 8 is inserted ahead of 9
rather than appended after it. Group 11 restates the 44px touch targets and the text floor and
MUST stay last -- this whole block sits after them in source order and would otherwise undo them.
Still held back: the column width, settled separately at 1040/1120 with the floating-control
offsets recomputed to match. */
/* --- 1. TOKENS ---------------------------------------------------------------------------
Eight type steps replacing 39 ad-hoc sizes; six spacing steps replacing 60+ padding pairs;
four radii replacing 19. The point is not that 13px is better than 14px — it is that one
scale makes the hierarchy legible, which is what "overwhelming" actually means. */
:root{
--fs-0:10px; --fs-1:11px; --fs-2:12px; --fs-3:13px;
--fs-4:14px; --fs-5:16px; --fs-6:18px; --fs-7:28px; --fs-page:20px;
--lh-1:1.2; --lh-2:1.35; --lh-3:1.5;
--s-1:4px; --s-2:6px; --s-3:8px; --s-4:12px; --s-5:16px; --s-6:24px;
--r-1:4px; --r-2:8px; --r-3:12px;
--measure:1040px; /* the ONE column width. See group 2. */
}
/* --- 3. BASE TYPE -------------------------------------------------------------------------
14/1.55 gives a 21.7px line box on every row in the app. 13/1.4 gives 18.2px — a ~19%
height cut across every list, table and card body, from one declaration.
tabular-nums moves to the body because the two hand-maintained lists (L287, L617) already
miss .b3d-u, .pf-bet-u, .decknet, .lbval, .bcnet, .lnet, .ob-o and .dh-big. */
body{
font-size:var(--fs-3); line-height:1.4;
font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
/* prose keeps generous leading — this is the only place 1.5 is right */
.reason,.rb-note,.foot-disc,.setsub,.zoo-method,.zoo-intro,.rep-body,.ub-note,
.unv-note,.pe-empty,.rc-hero-s,.hero p,.cc-d,.ppl-bio,.pf-bio,.fd-text,.msg{
line-height:var(--lh-3);
}
/* six line-heights collapse to one for chrome */
.pe-leg,.m-leg,.pml-steps,.pl-mstep,.gc-ptxt,.rm-row,.mq-text,.ip-mu,.fd-bet,
.pmk-q,.pmt-q,.pm-q,.pm-mq,.b3bet,.pe-pick{ line-height:var(--lh-2) }
/* --- 4. ONE HERO NUMBER --------------------------------------------------------------------
Seven hero sizes (56/46/46/42/40/40/34) meant every tab opened with a different-sized
headline. One size, one weight, one tracking. 28px still reads as the biggest thing on the
page when everything around it is 13px — that is the whole trick. */
.port-big,.bankhero .bk-big,.dh-big,.cmb-hero-v,.rb-big{
font-size:var(--fs-7); line-height:var(--lh-1); letter-spacing:-.02em; font-weight:800;
}
.port-big .u,.rb-big .u{ font-size:var(--fs-4); margin-left:2px }
.gc-sc{ font-size:22px; line-height:var(--lh-1); letter-spacing:-.01em }
.lu-lvl{ font-size:32px } /* level-up modal is a moment, not a dashboard figure */
@media(max-width:430px){
.port-big,.bankhero .bk-big,.dh-big,.cmb-hero-v,.rb-big{font-size:24px;letter-spacing:-.015em}
}
/* --- 5. ONE KPI SIZE -----------------------------------------------------------------------
Eleven sizes (27/26/26/24/22/22/21/18/18/17) for "a number in a stat tile". */
.card .v,.grid-primary .v,.grid-sub .v,.pms .v,.pmk-c .v,.pf-sv,.zoo-st div:last-child,
.rc-kpi>div:last-child,.pl-hs .v,.zt-u,.cmb-rec,.pg-lvl,.ps-v,.b3odds,.b3par-odds,
.obs-odds,.spv b,.pmv-r,.ip-score,.sc-sco,.pg-stn,.bcnet,.lnet,.pe-opt-ev{
font-size:var(--fs-6); line-height:var(--lh-1); font-weight:800; letter-spacing:-.01em;
}
.rb-mkt-u,.pf-bet-u,.decknet,.lbval,.hd-u,.b3d-u,.cald-btu,.cplay-u,.vs-v,.pmk-pnl{
font-size:var(--fs-3); font-weight:800;
}
/* --- 6. HEADERS AND TITLES -----------------------------------------------------------------
Ten sizes in the 15-26px band. Two survive: --fs-5 for section/group headers, --fs-page for
the two real page titles. --s-6 is the only gap between sections, replacing 18/20/22/24/26. */
.seghead{ font-size:var(--fs-5); line-height:var(--lh-2); font-weight:700; margin:var(--s-6) 0 var(--s-3) }
h2,.grpname,.sportname,.osgrp-name,.zoo-cat-h,.pg-hd,.m-hd,.cc-t,.fabname,.cp-title,
.so-h,.gc-nm,.ck-hd,.loginbox h2,.rc-h,.pf-name,.pe-bot-n,.b3bet,.obs-pick{
font-size:var(--fs-5); line-height:var(--lh-2); font-weight:700; margin-top:0;
}
h2{ margin:var(--s-6) 0 var(--s-3) }
.hero h1,.rc-hero-t{ font-size:var(--fs-page); line-height:var(--lh-1); letter-spacing:-.01em }
/* card / list-item leads */
.bcsport,.bcbt,.pe-gmu,.zoo-nm,.ppl-nm,.lname,.b3d-bet,.pmr-q,.tr-side,.pl-play,
.gmu,.play,.daydate,.bd-sp,.hd-date,.ovp-bet,.fd-att-b,.setlab,.mailfrom,.rep-who{
font-size:var(--fs-4); line-height:var(--lh-2); font-weight:600;
}
/* the one section rhythm */
.zoo-cat,.setgrp,.ideabox,.pm-hero,.sc-league,.zoo-idlewrap,.ogrp,.ovp,.b3,.pf-full,
.gc-sec,.softfold,.breakfold,.port-chart,.trk-lbl{
margin-top:var(--s-6); margin-bottom:var(--s-4);
}
section{ padding-top:var(--s-5) }
/* --- 7. LABELS AND MICRO TYPE --------------------------------------------------------------
Small uppercase labels are what makes a financial UI readable: they are structure, not
content, so they sit below the body size and above the noise floor. One size (11), one
tracking (.06em). The 59 declarations below 10px all come up to 10. */
.card .k,.rb-lab,.ps-k,.pl-hs .k,.pms .k,.pmk-c .k,.pf-sk,.trk-lbl,.hb-title,.port-label,
.bankhero .bk-lab,.cmb-hero-l,.rb-sk,.bt3-h,.ovp-x-k,.pf-sech,.gc-sech,.lbhd,.setgrp,
.pmk-sec,.pml-poshd,.ref-hd,.setprev-h,.pe-mk,.b3lg,.b3par-l,.ub-lab,.panel h3,.tlab,
.spk,.zsl,.pg-cat,.m-cw,.oghdr,.claim-or,.ck-or,.as-or,.sheet-or,.pmcal-dayhd,.fd-pick-h,
.rep-hd,.pm-evmeta,.pm-chd,.og-hdr .og-c,.olbl,.sc-mk,.bd-lgcap,.pmo-h,.lc-h,.pe-boardhd,
th,.lbtable th,.rc-stat th,.gc-box th{
font-size:var(--fs-1); line-height:var(--lh-1); letter-spacing:.06em; font-weight:700;
}
/* micro: badges, tags, res chips — a single floor at 10px */
.badge,.otag,.fd-badge,.fd-lvl,.fd-sp,.fd-ai,.fd-pend,.pf-lvl,.pf-bot,.crtag,.zc-live,
.zc-today,.zc-gsc,.zc-streak,.midaspx,.botpx-tag,.botpx-n,.pmr-v,.pmv-tag,.tmg,.srcb,
.livechip,.parlaytag,.beta-tag,.tbadge,.gapwarn,.xtag,.constag,.autog,.pmt-cons,.pmt-bt,
.pmk-tr,.mq-kind,.mq-v,.evp,.trk-score,.gm-score,.og-score,.ob-best,.ob-pm,.b3chip,.b3bots,
.hd-pend,.setauto,.pml-soon,.pml-ok,.unproven,.picksflag,.cc-soon,.cc-livetag,.ovp-midas,
.ovp-bot,.legchip,.sc-badge,.lb-livenow,.ip-src,.bctag,.zt-badge,.mst,.mtag,.pe-opt-tag,
.b3d-res,.pf-clvm,.oopen,.bt3-n,.pfc-u,.sh-desc,.bg-desc,.msg .nm{
font-size:var(--fs-0); line-height:var(--lh-1);
}
/* meta / secondary — 11.5/12/12.5 all become 12 */
.gm,.book,.gmeta,.bcsub,.lsub,.fd-when,.hd-n,.hd-rec,.submeta,.sportmeta,.grpmeta,
.daymeta,.zoo-cat-sub,.rc-mc-d,.pe-gwhen,.ovp-sub,.b3par-sub,.rb-sub,.ps-s,.pf-when,
.fl-bio,.fl-rec,.ip-bet,.ip-gd,.pmk-meta,.pe-bot-sub,.pe-c-foot,.mq-reason,.rep-meta,
.pf-bt,.zt-sub,.cald-sm,.bd-lg-m,.bd-meta,.cal-n,.eng-n,.eng-note,.rb-mkt-b,.bt3-m,
.pmt-more,.pm-xc-side,.pm-hero-sub,.zoo-form,.pf-form,.pg-prog,.pg-axp,.sc-pend{
font-size:var(--fs-2); line-height:var(--lh-2);
}
/* The league sub-line in the by-sport tree carries the record for a whole league and was nowrap, so on a
phone it ran off the row. It has to be overridden HERE, after both its base rule and the line-height set
directly above -- an earlier attempt sat 700 lines too high and lost to both. */
@media(max-width:560px){ .bd-lg-m{white-space:normal;line-height:1.35} }
/* CJK: uppercase tracking inserts visible gaps between ideographs */
:lang(zh) .card .k,:lang(zh) .rb-lab,:lang(zh) .b3lg,:lang(zh) .ub-lab,:lang(zh) .setgrp,
:lang(zh) .port-label,:lang(zh) .brand,:lang(zh) th,:lang(zh) .trk-lbl{ letter-spacing:0 }
/* --- 8. SPACING + RADIUS SNAP ---------------------------------------------------------------
Nothing here changes a layout; it removes the 60+ near-identical padding pairs and the 19
radii that make the page read as hand-assembled. 12px is the largest radius on any card:
above that a box starts to look like a widget rather than a surface. */
.card,.panel,.zoo-card,.b3card,.bcard,.layer,.pm-card,.setcard,.rc-card,.pe-game,.ogame,
.daygrp,.sport,.sportgrp,.osportgrp,.game,.fabsec,.pg-hero,.pg-ladder,.m-card,.mailcol,
.rep-wrap,.pml-card,.histbars,.pfcal,.unitbox,.ideabox,.pmo-chart,.sc-card,.cmb-card,
.pm-pred,.pe-card,.pm-xc,.compete-card,.zt-card,.ppl-card,.dash-hero{
border-radius:var(--r-3);
}
.hero,.port,.bankhero,.pl-hero,.realbox,.cmb-hero,.rc-hero,.pm-xhero,.gcbox,.loginbox,
.so-card,.chatpanel,.pe-slip-in,.obetsheet,.moresheet,.fd-pick-in{ border-radius:var(--r-3) }
.card,.zoo-card,.bcard,.layer,.pm-card,.rc-card,.b3card,.sc-card,.cmb-card,.pm-pred,
.pe-card,.pm-xc,.compete-card,.zt-card,.ppl-card,.pg-ach,.m-card{ padding:var(--s-3) var(--s-4) }
.panel,.setcard,.hero,.port,.bankhero,.pl-hero,.realbox,.cmb-hero,.rc-hero,.dash-hero,
.pm-xhero,.gcbox,.loginbox,.so-card,.pg-hero,.parsedbox{ padding:var(--s-4) var(--s-5) }
.port{ padding-bottom:var(--s-3) }
/* inner blocks and buttons */
.obtn,.pe-ob,.pe-ub,.m-opt,.pm-opt,.btn,.mini,.setbtn,.rc-mkt,.zgbtn,.so-btn,.pe-opt,
.rm-rb,.ps-go,.pf-obtn,.idea-send,.pm-more,.pm-evmore,.ub-clr,.b3tail,.gcbtn,.segbtn,
.pfcal-tab{ border-radius:var(--r-2) }
/* pills stay pills, badges get the smallest radius */
.badge,.otag,.fd-badge,.fd-lvl,.fd-sp,.zc-live,.zc-today,.zc-gsc,.midaspx,.botpx-tag,
.pmr-v,.pmv-tag,.tmg,.srcb,.livechip,.parlaytag,.beta-tag,.tbadge,.xtag,.b3chip,.b3bots,
.legchip,.sc-badge,.mst,.mtag,.trk-score,.gm-score,.og-score,.ob-best,.ob-pm,.pf-odds,
.pf-stk,.pf-gd,.pf-livesc,.fd-livesc,.zt-badge{ border-radius:var(--r-1); padding:2px var(--s-2) }
/* gaps: 1,2,3,5,7,9,10,11,14 all snap */
.grid,.bestgrid,.layers,.zoo-grid,.pm-grid,.pe-grid,.b3grid,.pl-method,.rc-modes,.rc-kpis,
.pf-stats,.zoo-stats,.pmstats,.pmsplit,.pmk-grid,.pg-grid,.pg-streaks,.compete-grid,
.ppl-grid,.sc-grid,.lbgrid,.cmb-grid,.pm-hero-grid,.pm-preds{ gap:var(--s-4) }
.filters,.trk-chips,.zoo-chiprow,.oddschips,.calfilter,.pe-topbar,.fd-acts,.tr-badges,
.pf-meta,.b3ev,.ovp-bots,.bcothers,.idlewrap,.pfcal-tabs,.setseg,.setfmt,.shoptabs,
.oddsstatus,.pmr-act,.zc-livescores,.oplays{ gap:var(--s-2) }
.sharerow,.pm-opts,.rb-mkts,.pf-types,.pmk-list,.pmt-list,.ip-list,.idea-list,.pe-legs,
.parlaylegs,.pleglist,.og-grid,.sc-lines{ gap:var(--s-1) }
/* --- 9. DE-NESTING. THE ACTUAL FIX. --------------------------------------------------------
A bordered box inside a bordered box reads as two objects; three levels reads as noise. The
sheet has three-level nests on its two densest screens and a five-level nest in the by-sport
tree. Every rule below is duplicated for body.theme-light because the light theme re-declares
these at 0,2,0 and would otherwise put the boxes straight back. */
/* 9a. Badges lose their outline, keep their tint. ~40 selectors, 2px of border around 9px of
text each. Single highest-leverage rule in this file.
Deliberately EXCLUDES .evp*, .vbadge, .pmk-tr and .mq-v — on those the border colour IS the
status signal (live / upcoming / final / blocked), so removing it removes information. */
.badge,body.theme-light .badge,
.fd-lvl,.fd-sp,.fd-ai,.pf-lvl,.pf-odds,.pf-stk,.pf-gd,.pf-livesc,.fd-livesc,.zc-live,
.zc-today,.zc-gsc,.zc-streak,.midaspx,.botpx-tag,.pmr-v,.pmv-tag,.tmg,.srcb,.livechip,
.parlaytag,.beta-tag,.tbadge,.gapwarn,.xtag,.constag,.autog,.b3chip,.b3bots,.ob-best,
.ob-pm,.trk-score,.gm-score,.og-score,.hd-pend,.setauto,.pml-soon,.unproven,.picksflag,
.ovp-midas,.ovp-bot,.sc-badge,.lb-livenow,.zt-badge,.pf-sport,.pl-sport,.pe-edge,.pe-move,
body.theme-light .fd-lvl,body.theme-light .fd-sp,body.theme-light .pf-odds,
body.theme-light .pf-stk,body.theme-light .zc-live,body.theme-light .zc-today,
body.theme-light .b3chip,body.theme-light .b3bots,body.theme-light .ob-best{
border-width:0;
}
/* 9b. Stat tiles inside cards. A Zoo card was carrying up to seven separately boxed children.
The tiles become columns separated by a hairline instead of seven little cards. */
.zoo-st,body.theme-light .zoo-st,
.pf-st,body.theme-light .pf-st,
.rc-kpi,body.theme-light .rc-kpi,
.pms,.pmk-c,.pmv-card,.pg-st,.pg-tier{
background:none; border-width:0 0 0 1px; border-radius:0;
padding:var(--s-2) var(--s-3);
}
.zoo-stats>:first-child,.pf-stats>:first-child,.rc-kpis>:first-child,
.pmstats>:first-child,.pmk-grid>:first-child,.pg-streaks>:first-child{ border-left-width:0 }
.zoo-stats,.pf-stats,.rc-kpis,.pmstats,.pmk-grid,.pg-streaks{ gap:0 }
/* 9c. List rows stop being cards. Eight components independently re-implemented
"border + radius:11-12px on a row inside a gap-ed column list". */
.ip-row,.pmk-row,.mq-row,.fl-row,.pmt-row,.pmrow,.pf-type,.pg-ach,.pe-entry,.m-match,
.ts-row,.pb-leg-row,.fd-attach,.fd-comp-att,.rc-hit,.ref-item,.mailrow,.rep-row,.lf-row,
body.theme-light .ip-row,body.theme-light .pmk-row,body.theme-light .fl-row,
body.theme-light .pf-type,body.theme-light .pg-ach{
background:none; border-width:0 0 1px 0; border-radius:0;
padding:var(--s-3) 0; margin-bottom:0;
}
.ip-row:last-child,.pmk-row:last-child,.mq-row:last-child,.fl-row:last-child,
.pmt-row:last-child,.pmrow:last-child,.pf-type:last-child,.pg-ach:last-child,
.pe-entry:last-child,.m-match:last-child,.rc-hit:last-child,.ref-item:last-child,
.rep-row:last-child,.lf-row:last-child{ border-bottom-width:0 }
.ip-list,.pmk-list,.pmt-list,.pmlist,.pf-types,.idea-list{ gap:0 }
.pmt-row{ padding-right:44px } /* keeps clearance for the absolutely-positioned .tailbtn */
/* 9d. Frames around already-ruled content. A bordered wrapper around a table whose cells
already carry border-bottom is a second box drawn over the first. */
.lbwrap,body.theme-light .lbwrap,
.ovp-list,.rc-hits,.ref-list,.rep-wrap,.mailcol,.rm-list,.b3d-rows{
border-width:0; border-radius:0;
}
.b3d-h{ border-width:0 0 1px 0; border-radius:0; padding:var(--s-2) 0 }
/* 9e. Sixteen callout treatments become one: a left rule, no box. border-width (not border)
so each keeps its own colour and the semantic tint survives; only the frame goes.
The three genuinely-urgent ones keep their background. */
.ctxline,.altline,.settline,.setl,.learn-note,.ps-ev,.pml-note,.pml-safe,.ip-note,
.pmk-note,.rc-howto,.unv-note,.pmnote,.zoo-clvbar,.pf-clv,.pmt-sum,.fd-note,.rb-full,
body.theme-light .ctxline,body.theme-light .settline,body.theme-light .learn-note,
body.theme-light .pf-clv,body.theme-light .fd-note{
background:none; border-width:0 0 0 2px; border-radius:0;
padding:var(--s-2) 0 var(--s-2) var(--s-4); margin-bottom:var(--s-3);
}
.slipwarn,.mq-warn,.ps-corr,.fd-comp-err.bad{
border-width:0 0 0 2px; border-radius:0; padding:var(--s-2) var(--s-4);
}
/* 9f. THE ODDS BOARD — the three-level nest. The .obtn border stays (it is a tap target and
needs an affordance) but its radius drops and the best-price pill inside it becomes text.
Same shape for Pick'em. */
.ogame,body.theme-light .ogame{ padding:var(--s-3) var(--s-4); border-radius:var(--r-3) }
.obtn,body.theme-light .obtn{ border-radius:var(--r-2); padding:var(--s-1) var(--s-1) }
.ob-best,.ob-pm{ background:none; border-width:0; padding:0; margin-top:1px }
.pe-game{ border-radius:var(--r-3) }
.pe-prop,body.theme-light .pe-prop{
background:none; border-width:0 0 1px 0; border-radius:0; padding:var(--s-2) 0;
}
.pe-ob,.pe-ub{ border-radius:var(--r-1) }
.pe-game .pe-grid{ padding:0 var(--s-4) var(--s-3) }
/* 9g. Settings: setcard > setprev > spv, plus a bordered icon square and a bordered pill. */
.setprev,body.theme-light .setprev{ border-width:1px 0 0 0; border-radius:0; margin-top:var(--s-4) }
.seticon{ border-width:0; width:28px; height:28px; border-radius:var(--r-2) }
.setauto{ border-width:0 }
/* 9h. The Best-3 card — the conversion surface, and it had five boxed children. */
.b3n{ border-width:0 }
.b3u{ border-width:0; padding:2px var(--s-3) }
.b3card{ gap:var(--s-2); padding:var(--s-3) var(--s-4) }
/* 9i. The by-sport tree: five levels of box. .pick already sits inside .subcat inside .sport
inside .sportgrp, so it does not also need a background and two borders of its own. */
.sportgrp,.osportgrp{ border-radius:var(--r-3) }
.sport{ border-radius:0; border-left-width:0; border-right-width:0 }
.pick{ background:none; border-top-width:1px; padding:var(--s-2) var(--s-4) }
.pick.win,.pick.loss,.pick.unproven{ background:none }
.altsum,body.theme-light .altsum{ background:none; border-width:0 0 0 2px; border-radius:0; margin:0 var(--s-4) }
/* 9j. Tracker: bordered box inside a bordered box under a bordered hero. */
.unitbox,body.theme-light .unitbox{
background:none; border-width:1px 0 0 0; border-radius:0; padding:var(--s-4) 0 0;
}
/* 9k. StatCluster pills: hard heights become min-heights so the smaller type does not float. */
.sc-rec,.sc-u,.sc-roi{ height:auto; min-height:19px }
.sc{ gap:var(--s-2) }
/* --- 11. TOUCH GUARDS — MUST STAY LAST -------------------------------------------------------
This block is appended after everything, which means the rules above would otherwise beat the
coarse-pointer sizing at L3609-3677 and the text floor at L3621-3626. Restated verbatim so a
density pass never silently shrinks a tap target or drops a label below the reading floor.
Non-negotiable: 44px minimum on coarse pointers. */
@media(pointer:coarse){
.subtab,.navg,.trk-chip,.fchip,.tailbtn,.fd-act,.sharebtn,.obtn,.rc-hit,
.who-me,.sim-diachip,.ostat,.claimbub,.rm-chip,.livebubble,.fd-comp-b,.pf-tail1,
.fd-comp-go,.pf-fc,.pe-leg,.pe-bot,.fd-comp,.pe-card,.rc-modecard,.mini,.rm-rb,
.wrx-share,.pm-evmore,.b3tail,.ps-go{ min-height:44px }
.hdr-gear,.setbtn,.dw-store,.pfcal-nav button,.who-lock,.idea-vote{ min-height:44px; min-width:44px }
.chip,.calchip,.dh-chip,.zchip,.pe-chip,.segbtn,.shoptab,.shoptab2,.inv-tab,.m-opt,.vq-opt,
.pmtail,.fd-tail,.sh-btn,.zoo-follow,.pf-followbtn,.pf-obtn,.ps-go,.gcbtn,.so-btn,.wl-btn,
.obs-cancel,.lp-cta,.lp-ghost,.li-swap,.idea-send,.pe-slip-auto,.pe-slip-clr,.pe-slip-share,
.ub-clr,.pm-more,.pm-evmore,.rc-mkt,.zgbtn,.av-cell,.pe-ob,.pe-ub{
min-height:44px; padding-top:12px; padding-bottom:12px; align-content:center;
}
.ochip{ min-height:44px; padding:9px 14px; display:inline-flex; align-items:center }
.sc-bet{ min-height:44px; padding:11px 14px; display:inline-flex; align-items:center }
.fd-ava[onclick],.fd-ava[data-prof],.avwrap[onclick]{ min-width:44px; min-height:44px }
/* TEXT FLOOR — these carry the date, the start time and every KPI label. Never below this. */
.pdate,.pstart{ font-size:11.5px }
.card .k{ font-size:11px; letter-spacing:.06em }
.olbl,.ob-best,.sc-mk,.b3lg,.pe-mk{ font-size:11.5px }
input[type=checkbox],input[type=radio]{ min-width:24px; min-height:24px }
/* iOS zoom-on-focus guard already carries !important at L3526 — do not lower it here. */
}
/* ==============================================================================================
DENSITY PASS — BATCH 3: mobile layout + per-language rules.
Sits AFTER group 11 on purpose. Group 11 says "must stay last"; group 7 below overrides its chip
sizing at <=640px and coarse pointer, replacing a 44px painted BOX with a 34px box plus a 44px
invisible hit overlay. The touch guarantee is kept, the chrome is not. Do not "restore" group 11
over this without also removing the ::after overlays, or the hit areas go with it.
============================================================================================== */
/* ══════════════════════════════════════════════════════════════════════════════════════════════════════
MOBILE DENSITY + I18N HARDENING (appended last)
Two problems, one block. (1) On a phone the chrome outweighs the data: a 296px-wide column carries a
card border, a row border, a row background and a radius at three nesting levels. Kalshi's phone list
is a hairline between rows and nothing else, and that is what "the boxes and bars are overtaking
everything" is describing. (2) Every constrained row in this sheet is sized to an ENGLISH string, and
the measured growth on the SHORT strings that live in those rows is +64% to +167%, not +25%.
Tap targets stay >=44px throughout; where a row must LOOK 34px the hit area is restored with the
invisible-overlay ::after already used for .gq / .lc-gc in the pointer:coarse block above.
══════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* ── 1. THE HEADER WALLET ROW OVERFLOWS AT 320px TODAY, IN ENGLISH ────────────────────────────────────
.dwallet is display:flex with no wrap; .segrp is inline-flex with no overflow; and .segrp>.segbtn is
flex:0 0 auto + nowrap, so the children refuse to shrink inside the max-width:100% that header .dwallet
.dw-toggle already sets. Two balance pills plus "Sportsbook | Prediction market | Shop" measure ~425px.
The page is overflow-x:clip, so the Shop button is not merely off-screen -- it cannot be scrolled to.
Spanish ("Mercado de predicción") and French ("Marché de prédiction") add ~25px on top.
Fix = the pattern .subnav-in already uses: let the pill scroll inside itself. */
@media(max-width:768px){
.dwallet{flex-wrap:wrap;max-width:100%}
.segrp.dw-toggle{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
scrollbar-width:none;overscroll-behavior-x:contain}
.segrp.dw-toggle::-webkit-scrollbar{display:none}
.segrp.dw-toggle>.segbtn{flex:0 0 auto}
}
@media(max-width:400px){
.dw-toggle .segbtn{padding-left:10px;padding-right:10px;font-size:11.5px}
.dw-bal{padding:5px 8px;font-size:12.5px}
}
/* ── 2. GRID TRACKS THAT SAY 1fr BUT MEAN minmax(auto,1fr) ────────────────────────────────────────────
`1fr` resolves to minmax(auto,1fr), and `auto` = min-content. When the child of that track is
white-space:nowrap + text-overflow:ellipsis, its min-content IS the full untruncated string -- so the
ellipsis never engages and the ROW grows instead. .zsp-row is the worst case: 66+52+74+62 fixed +4
gaps +28 padding = 314px of hard minimum against a 296px content box at 320px, before the name column
asks for anything. This is a live English overflow, and DE table headers make it worse.
minmax(0,1fr) is the correct spelling everywhere a track holds a truncating child. */
.zsp-head,.zsp-row{grid-template-columns:minmax(0,1fr) 66px 52px 74px 62px}
.og-row{grid-template-columns:minmax(90px,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
.lp-zrow{grid-template-columns:22px minmax(0,1fr) auto auto}
@media(max-width:430px){
.zsp-head,.zsp-row{grid-template-columns:minmax(0,1fr) 52px 42px 56px 46px;gap:6px;padding-left:10px;padding-right:10px}
.zsp-head{font-size:11.5px;letter-spacing:0}
.lp-zrec{white-space:normal;line-height:1.3;text-align:right}
}
/* ── 3. HARD PIXEL WIDTHS ON TRANSLATED LABELS ────────────────────────────────────────────────────────
Each of these reserves an English-sized box for a label: .m-lbl and .gc-per are `width:74px` with
flex-shrink:0, which is ~10 Latin characters at 12px -- so a French or German label overflows into the
control beside it with no ellipsis and no wrap. The same boxes are the reason Chinese looks sparse:
a 2-glyph label sits in 74px with 50px of dead air after it. .hd-date (line 402) already solves this
correctly with min-width:0;flex:1 at <=560; these are the ones that were missed. */
@media(max-width:768px){
.m-lbl{width:auto;min-width:0;flex:0 0 auto}
.gc-per{width:auto;min-width:52px}
.eng-k{min-width:0}
.cal-title{min-width:0;flex:1}
.play,.trackrow .side{min-width:0}
.pg-tier{min-width:0}
.idea-ta{min-width:0}
/* a 104px label track with a nowrap child is a guaranteed clip in any locale but English */
.pm-vbar{grid-template-columns:minmax(0,max-content) minmax(0,1fr) auto}
.pm-vbar-l{white-space:normal;line-height:1.25}
}
@media(max-width:430px){
.rb-mkt-m,.vs-v,.cald-btu,.cplay-u,.lbn{min-width:0}
}
/* ── 4. STATUS PILLS: LET THE WORD WRAP RATHER THAN CLIP ──────────────────────────────────────────────
These carry the words that grow MOST. "WON"->"GEWONNEN" is +167%; "CLOSING"->"BIENTÔT CLOS" is +71%.
They are all white-space:nowrap and several are flex:none, so they cannot shrink and cannot wrap --
the only remaining outcome is overflow. Allowing a break at the space costs one line of height in DE/FR
and nothing at all in EN or ZH. Deliberately NOT overflow-wrap:anywhere: breaking GESCHLOSSEN mid-word
is worse than a two-line pill. */
@media(max-width:768px){
.badge,.tdp-pill,.pl-badge,.pm-conf,.pm-xc-edge,.lb-livetag,.lb-pendtag,
.pmt-cons,.gapwarn,.tbadge,.legchip,.mst,.otag,.pmv-tag,.pmr-v,.srcb,.tmg{
white-space:normal;line-height:1.25;max-width:100%;text-align:center;
-webkit-hyphens:auto;hyphens:auto}
}
/* Fixed-square result chips. They hold one glyph today ("W"/"L"/"·", dashboard.py:6710/7730/7953) so
nothing is broken -- but the day any of them is wired to t('bet.won') a 26px box has to hold GEWONNEN.
min-width instead of width costs zero pixels now and makes that impossible later. */
.ip-res{width:auto;min-width:26px;padding:0 4px}
.cbadge,.fchip{width:auto;min-width:22px;padding:0 4px}
/* ── 5. KALSHI DENSITY, PART 1: THE CONTAINER AND THE HEADLINE NUMBERS ────────────────────────────────
Base is 14px/1.55 with .wrap padding 18px (12px under 640). The complaint is not the type size, it is
the ratio of chrome to content: a 24px KPI number in a 15px-radius card with 14/16px padding inside an
11px gap grid inside 12px page padding leaves ~112px of actual content width at 320px. Kalshi's phone
dashboard runs ~13px base, ~20px hero numbers and 10-11px padding. Nothing here goes below 11px on a
label, and no interactive element is touched. */
@media(max-width:640px){
body{font-size:13.5px;line-height:1.5}
.card{padding:10px 11px;border-radius:12px}
.card .v{font-size:20px}
.grid-primary .v{font-size:22px}
.grid-sub .card{padding:9px 10px}
.grid-sub .v{font-size:16px}
.card .sub{font-size:11.5px}
.grid{gap:8px}
.panel{padding:12px;border-radius:12px;margin-top:10px}
.panel h3{font-size:12px;letter-spacing:.4px;margin-bottom:6px}
section{padding-top:10px}
h2{font-size:13.5px;margin:14px 0 6px}
.hero{padding:14px;border-radius:13px;margin-bottom:10px}
.hero h1{font-size:20px;letter-spacing:.4px}
.port{padding:16px 15px 10px;border-radius:16px;margin-bottom:14px}
.port-big{font-size:40px;letter-spacing:-1.4px;margin:4px 0 5px}
.port-big .u{font-size:18px}
.mkchart,.rc-card,.pg-ladder,.ideabox{padding:12px 13px;border-radius:12px}
th,td{padding:7px 8px}
}
@media(max-width:430px){
.wrap{padding-left:10px;padding-right:10px}
.card .v{font-size:19px}
.port-big{font-size:36px}
}
/* ── 6. KALSHI DENSITY, PART 2: LIST ROWS COLLAPSE TO HAIRLINES ───────────────────────────────────────
This is the actual "boxes and bars are overtaking everything". Every one of these lists renders as a
column of independently bordered, rounded, background-filled cards separated by a gap -- so a 10-row
list draws 10 borders, 10 radii, 10 fills and 9 gaps. A phone list wants ONE hairline between rows and
the container border doing the framing. This reclaims ~22px of horizontal room and roughly 90px of
vertical scroll per 10 rows, changes no type size and touches no control.
Result colour cues are preserved: .pl-r keeps its 3px left border, which is the whole point of the row. */
@media(max-width:640px){
.pmlist,.ip-list,.pmt-list,.pm-preds{gap:0}
.pmlist>.pmrow,
.ip-list>.ip-row,
.pmt-list>.pmt-row,
.hd-row,
.os-row,
.m-match,
.pg-ach{
border:0;border-bottom:1px solid var(--line2);border-radius:0;background:transparent;
box-shadow:none;margin:0;padding-left:2px;padding-right:2px}
.pmlist>.pmrow:last-child,.ip-list>.ip-row:last-child,.pmt-list>.pmt-row:last-child{border-bottom:0}
/* .pl-r and .trackrow.locked carry a LEFT border that encodes win/loss -- keep it, drop the rest. */
.pl-r{border-top:0;border-right:0;border-bottom:1px solid var(--line2);border-radius:0;
background:transparent;margin-bottom:0;padding:10px 2px 10px 10px}
.trackrow.locked{border:0;border-bottom:1px solid var(--line2);border-radius:0;background:transparent;
margin:0;padding:11px 2px}
/* nested rounded borders: a .sportgrp inside a .panel inside .wrap draws three radii on a 296px column.
.sportgrp>.sport is already flattened (line 2830-ish); .game and .subcat were not. */
.game{border-left:0;border-right:0;border-radius:0;margin:0}
.sport{border-left:0;border-right:0;border-radius:0}
.lcard,.pe-card{border-radius:11px;padding:11px 12px}
}
/* ── 7. 34px ROWS AND CHIPS THAT STILL HAVE A 44px HIT AREA ────────────────────────────────────────────
The pointer:coarse block above inflates every chip to a 44px BOX (min-height:44 + 12px vertical padding),
which is right for accessibility and is the single biggest reason the UI reads as oversized: a filter row
of eight 44px pills is 100px of chrome before any data. The fix is the pattern this sheet already uses
for .gq / .tour-x / .lc-gc -- keep the pixels, grow only the TOUCH REGION via a centred invisible overlay.
Verified collision-free: none of these classes defines ::after anywhere in the sheet.
row-gap is raised to 12px so two stacked 44px overlays cannot overlap on a wrapped chip row (34px visual
+ 5px overhang each side needs >=10px of row gap; 12 gives margin). */
@media(pointer:coarse) and (max-width:640px){
/* .parbtn, .evbtn and .subhdr joined this group on 2026-08-12. All three sit INSIDE a , which
is the case where an undersized target is worse than a plain miss: the tap does not do nothing, it
toggles the accordion instead. .parbtn is the sharpest -- a hard height:30px sitting 5px from the 44px
.tailbtn, so a left-miss on "add to parlay" hits "add to your tracker" and logs a real bet. 168 of them
ship. .evbtn is the Details button added earlier today at 32px, under a comment that explicitly said it
must not be undersized for this exact reason; the comment was right and the value was not. */
.chip,.calchip,.zchip,.subtab,.segbtn,.trk-chip,.mini,.btn.sm,.ochip,.rc-mkt,.shoptab,
.parbtn,.evbtn{
min-height:34px;padding-top:7px;padding-bottom:7px;position:relative}
.parbtn{height:auto} /* it sets a hard height:30px, which min-height alone cannot lift */
.chip::after,.calchip::after,.zchip::after,.subtab::after,.segbtn::after,.trk-chip::after,
.mini::after,.btn.sm::after,.ochip::after,.rc-mkt::after,.shoptab::after,
.parbtn::after,.evbtn::after{
content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:100%;min-width:44px;height:44px}
/* .subhdr is a full-width row, so it needs real height rather than an overlay -- 39px measured, and it
is the bet-type accordion, 166 instances. */
.subhdr{min-height:44px}
.filters,.trk-chips,.zoo-chiprow,.calfilter,.rc-mkts,.spbar,.sharerow,.tr-badges{row-gap:12px}
/* the sub-nav strip is a single non-wrapping scroller, so it can go flat without any overlap risk */
.subtab{min-height:34px}
}
/* ── 8. BOTTOM NAV: SURVIVE THE LONGEST LABEL WITHOUT SHIFTING THE ICONS ───────────────────────────────
.bt is a centred flex column with min-height:62px and a 10.5px label. It ships English literals today
(_GROUPS, dashboard.py:13134) but is the first thing that will be wired to t('nav.*'), and German turns
"Board" into "Übersicht" (+80%) -- ~56px of text in a 64px cell at 320px. If ONE label wraps to two
lines, that cell's icon moves up relative to its four neighbours, because each grid cell centres its own
content. A fixed-height label box makes wrapping impossible, so the icon row can never break alignment.
The cell is still 56x64 -- comfortably over 44px in both axes. */
@media(max-width:768px){
.bt{min-height:56px;padding:9px 2px 8px;gap:4px}
.bt .ti{width:21px;height:21px}
.bt span{display:block;width:100%;height:12px;line-height:12px;font-size:11.5px;letter-spacing:.1px;
text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:360px){ .bt span{font-size:11px;letter-spacing:0} }
/* ── 9. HEADER BRAND ROW AT 320px ──────────────────────────────────────────────────────────────────────
.brand is 20px with 3px of letter-spacing (~70px for MIDAS alone), and in prediction-market mode
.mkt-flag adds an uppercase pill that reads "Prediction market" in English and "Mercado de predicción"
(21 chars) in Spanish, inside a .brandrow that is display:flex with no wrap. .bar does wrap, so this
pushes the header taller rather than clipping -- and --hdr-h is recomputed by a ResizeObserver
(dashboard.py:12362), so the sticky offsets follow correctly. It is a density cost, not a break. */
@media(max-width:430px){
.brand{font-size:17px;letter-spacing:2px}
.brandrow{flex-wrap:wrap}
/* white-space:normal here is what wrapped the pill into a square on a phone. It stays on one line and
hides below 400px instead, where the header has no room for it at all. */
.mkt-flag{font-size:11px;letter-spacing:.3px;white-space:nowrap;padding:2px 7px;margin-left:6px}
.bar{padding:9px 12px;gap:7px}
}
/* ══════════════════════════════════════════════════════════════════════════════════════════════════════
PER-LANGUAGE RULES REQUIRES — see above
══════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* ── ZH-1. LETTER-SPACING IS A BUG IN HAN, NOT A STYLE ────────────────────────────────────────────────
106 selectors set letter-spacing between .03em and 1.5px alongside text-transform:uppercase. On Latin
that is an eyebrow. On Han, uppercase is a no-op and the tracking inserts a gap between EVERY GLYPH:
已 结 算 instead of 已结算. At the 9-10px these labels use, it reads as a rendering fault.
Every one of the 106 sets the property directly on the element, so inheritance cannot fix it -- a
universal reset is the only single-line route, exactly as the pointer:coarse font-size:16px!important
fix above reasoned. The MIDAS wordmark is Latin and is re-asserted straight after. */
:lang(zh) *{letter-spacing:normal!important}
:lang(zh) .brand{letter-spacing:2px!important}
:lang(zh) .lu-ttl{letter-spacing:.12em!important}
/* ── ZH-2. TYPE SIZE AND LEADING ──────────────────────────────────────────────────────────────────────
Han needs more optical size than Latin at the same perceived weight -- a 10px Latin label is small,
a 10px Han label is unreadable, because the strokes do not resolve. 12px is the practical floor on a
2x phone screen. Leading goes from 1.55 to 1.75: Han glyphs are full-height boxes with no x-height
relief, so Latin leading reads as cramped. The font stack is explicit because the current one
(-apple-system, Segoe UI, Roboto) has no CJK coverage on Android or Windows, so Han falls through to
whatever the system substitutes -- usually a different weight and metric than the numerals beside it. */
:lang(zh) body,:lang(zh){
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",
-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
line-height:1.75}
:lang(zh) .card .k,:lang(zh) .pms .k,:lang(zh) .pl-hs .k,:lang(zh) .pmk-c .k,:lang(zh) .mk-lead .k,
:lang(zh) .b3rec-h .k,:lang(zh) th,:lang(zh) .lbtable th,:lang(zh) .gc-box th,:lang(zh) .rc-kpi .mut,
:lang(zh) .badge,:lang(zh) .tdp-pill,:lang(zh) .legchip,:lang(zh) .pl-badge,:lang(zh) .srcb,:lang(zh) .tmg,
:lang(zh) .olbl,:lang(zh) .otag,:lang(zh) .mst,:lang(zh) .pmt-bt,:lang(zh) .ip-src,:lang(zh) .zt-badge,
:lang(zh) .bctag,:lang(zh) .pmr-v,:lang(zh) .pmv-tag,:lang(zh) .fd-ai,:lang(zh) .fd-pend,:lang(zh) .unproven,
:lang(zh) .xtag,:lang(zh) .pg-tl,:lang(zh) .m-cw,:lang(zh) .cbt-n,:lang(zh) .spk,:lang(zh) .ub-lab,
:lang(zh) .rb-lab,:lang(zh) .ps-k,:lang(zh) .b3lg,:lang(zh) .b3par-l,:lang(zh) .settline .sl-k,
:lang(zh) .eng-k,:lang(zh) .ref-hd,:lang(zh) .pmo-h,:lang(zh) .pmk-sec,:lang(zh) .pf-sk,:lang(zh) .pf-sech,
:lang(zh) .os-sec,:lang(zh) .os-seglbl,:lang(zh) .lbhd,:lang(zh) .hb-title,:lang(zh) .claim-or,
:lang(zh) .fd-pick-h,:lang(zh) .pml-ok,:lang(zh) .pml-soon,:lang(zh) .mq-kind,:lang(zh) .mq-v,
:lang(zh) .cc-soon,:lang(zh) .cc-livetag,:lang(zh) .bg-desc,:lang(zh) .av-nm,:lang(zh) .zoo-st .mut{
font-size:12px}
:lang(zh) .bt span{font-size:11px;height:14px;line-height:14px}
:lang(zh) .subtab,:lang(zh) .chip,:lang(zh) .calchip,:lang(zh) .zchip{font-size:13px}
/* ── ZH-3. THE SPARSE-LAYOUT PROBLEM ──────────────────────────────────────────────────────────────────
Chinese strings measure ~40% of English. Every label box sized to an English string therefore holds a
2-4 glyph word with 50-80px of dead air after it -- .eng-k is a 118px box holding ~40px of text. Block 1
above already frees these below 768px; this repeats the release at ALL widths for zh, because the gap is
a function of the STRING, not the viewport, and looks just as wrong on a tablet. */
:lang(zh) .eng-k{min-width:0}
:lang(zh) .m-lbl,:lang(zh) .gc-per{width:auto;min-width:0}
:lang(zh) .cal-title{min-width:0}
:lang(zh) .pg-tier{min-width:48px}
:lang(zh) .vs-v,:lang(zh) .rb-mkt-m{min-width:0}
:lang(zh) .zsp-head,:lang(zh) .zsp-row{grid-template-columns:minmax(0,1fr) 58px 46px 64px 54px}
:lang(zh) .pm-vbar{grid-template-columns:minmax(0,max-content) minmax(0,1fr) auto}
/* ── ZH-4. ORPHANED GLYPHS AND UNBREAKABLE RUNS ───────────────────────────────────────────────────────
Two opposite failures. (a) A wrapped heading that leaves a SINGLE Han character alone on the last line
reads as a typo rather than as a line break -- text-wrap:balance on short headings and :pretty on body
copy both prevent it. (b) Han has no spaces, so a long unbroken run has no break opportunity at all and
will push its row wide unless told it may break anywhere; line-break:strict then stops it breaking
before punctuation that may not start a line. */
:lang(zh) h2,:lang(zh) .seghead,:lang(zh) .card .k,:lang(zh) .zt-name,:lang(zh) .rc-mc-n,
:lang(zh) .hero h1,:lang(zh) .te-h,:lang(zh) .pg-hd,:lang(zh) .m-hd{text-wrap:balance}
:lang(zh) p,:lang(zh) .port-sub,:lang(zh) .te-p,:lang(zh) .lp-sub,:lang(zh) .aggline,
:lang(zh) .rc-hero-s,:lang(zh) .reason,:lang(zh) .foot-disc,:lang(zh) .mk-head{text-wrap:pretty}
:lang(zh) .pmr-q,:lang(zh) .pm-q,:lang(zh) .pmt-q,:lang(zh) .tdp-desc,:lang(zh) .b3d-bet,
:lang(zh) .lb-rdesc,:lang(zh) .pl-play,:lang(zh) .tr-side{word-break:break-word;line-break:strict}
/* ── LATIN-LONG (fr/es/pt/de). +23% to +32% average, and +64% to +167% on the SHORT labels that sit in
constrained rows. Two levers that do not touch the design:
(1) hyphenation, which German compounds genuinely need and which is inert without a lang attribute --
this is the concrete payoff of the applyLang()-on-boot fix;
(2) the uppercase tracking, which multiplies against character COUNT: 1px of letter-spacing on a
12-character German label is 12 free pixels of overflow. Dropping it to .3px on the micro-labels
buys back most of the German growth at no legibility cost, because these are 800-weight already. */
:lang(de),:lang(fr),:lang(es),:lang(pt){-webkit-hyphens:auto;hyphens:auto}
@media(max-width:768px){
:lang(de) .card .k,:lang(fr) .card .k,:lang(es) .card .k,:lang(pt) .card .k,
:lang(de) th,:lang(fr) th,:lang(es) th,:lang(pt) th,
:lang(de) .lbtable th,:lang(fr) .lbtable th,:lang(es) .lbtable th,:lang(pt) .lbtable th,
:lang(de) .pl-hs .k,:lang(fr) .pl-hs .k,:lang(es) .pl-hs .k,:lang(pt) .pl-hs .k,
:lang(de) .rc-kpi .mut,:lang(fr) .rc-kpi .mut,:lang(es) .rc-kpi .mut,:lang(pt) .rc-kpi .mut,
:lang(de) .port-label,:lang(fr) .port-label,:lang(es) .port-label,:lang(pt) .port-label,
:lang(de) .bankhero .bk-lab,:lang(fr) .bankhero .bk-lab,:lang(es) .bankhero .bk-lab,:lang(pt) .bankhero .bk-lab,
:lang(de) .trk-lbl,:lang(fr) .trk-lbl,:lang(es) .trk-lbl,:lang(pt) .trk-lbl{letter-spacing:.3px}
/* German compounds are the only strings long enough to need a mid-word break in a badge */
:lang(de) .badge,:lang(de) .tdp-pill,:lang(de) .pl-badge{overflow-wrap:break-word}
}
/* German is the longest word-for-word: give the nav label one more pixel of room before it ellipses */
@media(max-width:400px){
:lang(de) .bt span,:lang(fr) .bt span,:lang(es) .bt span,:lang(pt) .bt span{font-size:11px;letter-spacing:0}
}
/* ---- Track Record: day header > game group > pick row ---- */
.pl-dayh{display:flex;align-items:baseline;gap:10px;margin:20px 0 9px;padding-bottom:6px;
border-bottom:1px solid var(--line)}
#pl-feed>.pl-dayh:first-child{margin-top:2px}
.pl-dd{font-family:var(--font-display);font-size:12.5px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--txt)}
.pl-dn{font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.pl-g{background:var(--surf);border:1px solid var(--line);border-radius:var(--r2);
box-shadow:var(--e1),var(--rim);margin-bottom:9px;overflow:hidden}
.pl-gh{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:9px 13px;
background:var(--surf2);border-bottom:1px solid var(--line)}
.pl-gm{font-weight:700;font-size:13.5px;color:var(--txt)}
.pl-gsc{font-family:var(--font-num);font-size:11.5px;color:var(--gold);
background:rgba(var(--gold-rgb),.09);border:1px solid rgba(var(--gold-rgb),.22);
border-radius:var(--r1);padding:1px 7px}
.pl-gn{font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.pl-grec{font-family:var(--font-num);font-size:12px;color:var(--mut)}
.pl-grec b{font-weight:800}
.pl-grec .pos{color:var(--good)}
.pl-grec .neg{color:var(--bad)}
.pl-gpre{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--mut)}
.pl-gpre svg{width:12px;height:12px}
.pl-g .pl-r{background:transparent;border:0;border-left:3px solid transparent;
border-top:1px solid var(--line2);border-radius:0;margin:0;padding:9px 13px;gap:4px}
.pl-g .pl-gh+.pl-r{border-top:0}
.pl-g .pl-r.w{border-left-color:var(--good)}
.pl-g .pl-r.l{border-left-color:var(--bad)}
.pl-g .pl-r.push{border-left-color:var(--mut)}
.pl-g .pl-r-bot{margin-top:2px}
@media(max-width:560px){
.pl-gh{padding:8px 11px;gap:6px}
.pl-gm{font-size:12.5px}
.pl-gpre{margin-left:0}
.pl-g .pl-r{padding:8px 11px}
}
/* ---- Performance: one table per sport, leagues as spanning rows ---- */
/* .bd-sport .lbtable th:first-child sets 40% + nowrap + ellipsis for the Bet-type column. A league row is
also a th:first-child, so it has to opt back out of all three or the league name gets clipped. */
.bd-sport .lbtable tr.bd-lgrow>th{width:auto;white-space:normal;overflow:visible;text-overflow:clip;
text-align:left;padding:11px 12px 5px;background:transparent;border-top:1px solid var(--line);
font-weight:400;letter-spacing:0;text-transform:none}
.bd-sport .lbtable tr.bd-lgrow:first-of-type>th{border-top:0}
.bd-lgrow .bd-lg-n{font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.05em;
text-transform:uppercase;color:var(--txt);margin-right:9px}
.bd-lgrow .bd-lg-m{font-family:var(--font-num);font-size:11px;color:var(--mut)}
.bdfold{margin:2px 12px 12px}
.bdfold>summary{font-size:11.5px}
.bdfold .lbwrap{margin-top:8px}
/* ---- Overview: the "last 7d" caption belongs to the whole list, not to every row ---- */
.layers-cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
font-size:11.5px;color:var(--mut);margin:0 0 8px}
/* ---- Best 3: the strip of facts every leg shares ---- */
.b3shared{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;margin:0 0 10px;padding:8px 12px;
background:var(--surf2);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--rim);
font-size:11.5px;color:var(--mut)}
.b3s-k{font-family:var(--font-display);font-size:11.5px;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--gold);margin-right:2px}
.b3s-v{display:inline-flex;align-items:center;gap:4px}
.b3s-v+.b3s-v::before{content:'';display:inline-block;width:3px;height:3px;border-radius:50%;
background:currentColor;opacity:.45;margin-right:6px}
.b3s-v b{color:var(--txt);font-weight:750;font-variant-numeric:tabular-nums}
.b3s-v .b3wl{font-family:var(--font-num);opacity:.8}
/* ---- Best 3: the sections the headline card no longer carries (b3alt-*, NOT b3sec-* --
.b3sec was already taken at the per-market track-record headers, and being defined LATER
in this stylesheet it wins: these row lists would have inherited display:flex and
collapsed onto one line. The CSS guard balances braces; it does not catch a name clash. -------------------------------------------
Foreign baseball and the non-major markets are published here rather than on the Best 3. Deliberately a
ROW list and not the b3card grid: these are secondary by design, and giving them the flagship treatment
would undo the separation by making them read as three more headline picks. Same grid-column trick the
Zoo rows use, so the prices line up down the page and the eye can run the column. */
.b3alt{margin:16px 0 0}
.b3alt-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
margin:0 0 8px;padding:0 2px}
.b3alt-t{font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--gold)}
.b3alt-s{font-size:11.5px;color:var(--mut);flex:1 1 240px;min-width:0}
.b3alt-rows{display:flex;flex-direction:column;gap:5px}
.b3alt-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto auto;align-items:center;gap:10px;
padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.022)}
.b3alt-row.done{opacity:.72}
.b3alt-row.won{border-color:rgba(var(--good-rgb),.30)}
.b3alt-row.lost{border-color:rgba(var(--bad-rgb),.26)}
.b3alt-lg{font-family:var(--font-display);font-size:11.5px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b3alt-bet{min-width:0;display:flex;flex-direction:column;gap:1px}
.b3alt-bet b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b3alt-bet small{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b3alt-od{font-family:var(--font-num);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
white-space:nowrap}
.b3alt-r{font-family:var(--font-display);font-size:11.5px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;white-space:nowrap}
.b3alt-r.won{color:var(--good)}
.b3alt-r.lost{color:var(--bad)}
.b3alt-r.void{color:var(--mut)}
.b3alt-r.live{color:var(--gold)}
.b3alt-e{font-family:var(--font-num);font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.b3alt-e.pos{color:var(--good)}
/* Tomorrow's overnight card. Tinted and ruled so it cannot be mistaken for today's sections -- these games
have not been played and are not in today's numbers, and that has to read at a glance. */
.b3early{border:1px solid rgba(var(--gold-rgb),.30);border-radius:12px;padding:13px 14px;
background:rgba(var(--gold-rgb),.045)}
.b3early .b3alt-t{color:var(--gold)}
.b3early .b3alt-row{background:rgba(255,255,255,.03)}
@media(max-width:640px){
.b3alt-row{grid-template-columns:minmax(0,1fr) auto auto;row-gap:2px}
.b3alt-lg{grid-column:1/-1}
}
/* ---- Zoo: paging control under the grid ---- */
/* ---- ZOO ROWS: the long tail, scannable -----------------------------------------------------------------
Everything below the shortlist. Grid rather than flex so the numbers column starts at the same x on every
row and the eye can run straight down it -- with flex each row sizes to its own content and the figures
jitter left and right, which is most of why a long list feels unreadable. */
.zoo-rows{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.zrow{display:grid;grid-template-columns:26px 30px minmax(0,1fr) auto auto;align-items:center;gap:10px;
padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.022);
cursor:pointer;transition:border-color .12s,background .12s}
.zrow:hover{border-color:rgba(var(--gold-rgb),.4);background:rgba(255,255,255,.05)}
.zr-rk{font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums;text-align:right}
.zr-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.06);font-size:15px;overflow:hidden}
.zr-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.zr-id{min-width:0;display:flex;flex-direction:column;gap:1px}
.zr-id b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zr-id small{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zr-nums{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-variant-numeric:tabular-nums}
.zr-nums b{font-size:13.5px;font-weight:750}
.zr-nums small{font-size:11.5px;color:var(--mut);white-space:nowrap}
.zr-act{display:flex;align-items:center;gap:7px}
.zr-live{font-size:11.5px;font-weight:700;color:var(--bad);background:rgba(var(--bad-rgb),.14);
border-radius:20px;padding:2px 7px;white-space:nowrap}
.zr-today{font-size:11.5px;font-weight:700;color:var(--gold);background:rgba(var(--gold-rgb),.12);
border-radius:20px;padding:2px 7px;white-space:nowrap}
.zr-up{box-shadow:inset 2px 0 0 rgba(var(--good-rgb),.5)}
.zr-dn{box-shadow:inset 2px 0 0 rgba(var(--bad-rgb),.34)}
.zr-new{box-shadow:inset 2px 0 0 rgba(255,255,255,.14)}
/* The shortlist band is the only one that gets cards, so it carries the emphasis the old winners band had. */
.zb-pick{border-color:rgba(var(--gold-rgb),.34);background:rgba(var(--gold-rgb),.045)}
@media(max-width:560px){
/* What it bets is the first thing to go on a phone: the name and the numbers are what a tail decision
needs, and three ellipsised market names in a 90px slot help nobody. */
.zrow{grid-template-columns:20px 26px minmax(0,1fr) auto;gap:8px;padding:7px 9px}
.zr-id small{display:none}
.zr-av{width:26px;height:26px;font-size:13px}
.zr-act .zoo-follow{display:none}
}
.zoo-more{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
margin:12px 0 4px;font-size:11.5px}
.zoo-more .mut{font-variant-numeric:tabular-nums}
/* ---- Odds: per-toggle counts, so each option states its own size ---- */
.segn{font-family:var(--font-num);font-size:11.5px;font-weight:800;opacity:.72;margin-left:4px;
font-variant-numeric:tabular-nums}
.segn:empty{display:none}
/* ==========================================================================================
RECOVERY BLOCK — restored 2026-08-17 after midas_dashboard.py was truncated to 0 bytes by a
write that encoded AFTER opening the file (see _recover/safewrite.py). Every rule below was
recovered VERBATIM from the last good build's stylesheet, so this is the same CSS that was
already live and verified, not a retype from memory.
It sits at the end because that is where it can only WIN the cascade — several of these were
deliberate overrides of earlier rules and must not be re-overridden by them.
========================================================================================== */
/* overscroll-behavior has to be on the ROOT element. Unlike `overflow`, it does NOT propagate from
body to the viewport, so declaring it only on body -- as this did -- left the document scroller
with the default `auto` and the whole page kept its elastic overscroll. That is the rubber-banding:
the page drags past its own end and springs back, which on a tab whose height is still resolving
reads as the content bouncing. Kept on body too; harmless, and correct if the scroller ever moves. */
html{overflow-x:clip;touch-action:manipulation;overscroll-behavior-y:none}
/* ---- ZEUS: THE TEST, RUN IN PUBLIC ------------------------------------------------------------------
The page's own copy promised "if the Locks beat the Fades, Zeus is adding real value" and then never
showed the Fades. This strip is that comparison, and it is the first thing on the tab because it is the
only question a reader actually has. Three columns because a two-way readout would hide the awkward
detail that Leans currently outperform Locks -- which is exactly the kind of thing this product exists
to print rather than tidy away. */
.zx-what{font-size:12.5px;line-height:1.6;color:var(--mut);max-width:76ch;margin:0 0 12px}
.zx-what b{color:var(--txt)}
.zx-k{padding:1px 6px;border-radius:6px;font-size:11.5px}
.zx-k.lock{background:rgba(var(--gold-rgb),.14);color:var(--gold)}
.zx-k.lean{background:rgba(var(--push-rgb),.14);color:#c3cad8}
.zx-k.fade{background:rgba(var(--bad-rgb),.12);color:var(--bad-hi)}
.zx-test{border:1px solid var(--line);border-radius:14px;background:var(--surf);overflow:hidden;margin:0 0 14px}
.zx-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.zx-col{background:var(--bg2,var(--bg2));padding:11px 13px;min-width:0;display:flex;flex-direction:column;gap:2px}
.zx-lbl{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zx-lbl em{font-style:normal;font-weight:600;letter-spacing:.03em;text-transform:none;opacity:.75}
.zx-wr{font-size:22px;font-weight:850;font-variant-numeric:tabular-nums;line-height:1.1}
.zx-col.lock .zx-wr{color:var(--gold)}
.zx-col.lean .zx-wr{color:var(--txt)}
.zx-col.fade .zx-wr{color:var(--bad-hi)}
.zx-sub{font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.zx-verdict{padding:10px 13px;font-size:12.5px;line-height:1.55;border-top:1px solid var(--line);
background:var(--surf)}
.zx-verdict.pos{color:var(--good-hi);background:linear-gradient(180deg,rgba(var(--good-rgb),.09),transparent 80%),var(--surf)}
.zx-verdict.neg{color:var(--bad-hi);background:linear-gradient(180deg,rgba(var(--bad-rgb),.08),transparent 80%),var(--surf)}
.zx-verdict.mut{color:var(--mut)}
body.theme-light .zx-col{background:var(--bg2,#fff)}
/* ---- THE LEAGUE PANEL --------------------------------------------------------------------------------
The rule this whole component exists to obey: a filter must never grow the page. The panel is absolutely
positioned under the rail, its list is height-capped, and the list scrolls inside itself. Open it on the
smallest phone and nothing below moves. */
/* REGRESSION, FOUND 2026-08-16 ON MOBILE. This wrapper was `position:relative` so the panel could be
absolutely positioned against it -- and that silently broke the sticky sport bar inside it. A sticky
element only sticks while its CONTAINING BLOCK is on screen, and this wrapper's height is exactly the
bar's height (the panel is out of flow and adds none), so the bar unstuck the instant it moved. On a
phone, where that bar is the main way to change sport, it read as the filter scrolling away and content
sitting at the wrong offset.
The panel is `position:fixed` now and placed by JS, so it needs no positioning context at all and cannot
interfere with the bar's stickiness again. */
.sp-wrap{position:static}
.sp-more{flex:none;cursor:pointer;font-family:inherit}
.sp-more .cnt{opacity:.7}
.spp{position:fixed;z-index:60;
border:1px solid var(--line);border-radius:14px;background:var(--bg2,var(--bg2));
box-shadow:0 26px 60px -26px rgba(0,0,0,.95),0 2px 0 rgba(255,255,255,.03) inset;overflow:hidden}
/* Desktop: a dropdown under the trigger, placed by spPanel(). */
@media(min-width:641px){.spp{width:min(420px,calc(100vw - 24px))}}
/* Mobile: a bottom sheet. It is the native pattern, it is thumb-reachable, and it removes every question
about where a dropdown fits on a short screen. */
@media(max-width:640px){
.spp{left:0;right:0;bottom:0;top:auto;width:auto;border-radius:16px 16px 0 0;border-bottom:0;
padding-bottom:env(safe-area-inset-bottom,0px)}
.spp-list{max-height:min(58vh,420px)}
}
.spp-top{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid var(--line)}
.spp-q{flex:1;min-width:0;height:36px;padding:0 11px;border-radius:9px;border:1px solid var(--line);
background:var(--surf);color:var(--txt);font:inherit;font-size:13.5px}
.spp-q:focus{outline:none;border-color:rgba(var(--gold-rgb),.45)}
.spp-x{flex:none;width:36px;height:36px;border-radius:9px;border:1px solid var(--line);
background:transparent;color:var(--mut);font-size:19px;line-height:1;cursor:pointer}
.spp-x:hover{color:var(--txt);background:rgba(255,255,255,.05)}
/* THE CAP. min() so it is a share of the viewport on a phone and a fixed sane height on a desktop. */
.spp-list{max-height:min(46vh,340px);overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:thin;scrollbar-color:rgba(var(--push-rgb),.35) transparent}
.spp-list::-webkit-scrollbar{width:10px}
.spp-list::-webkit-scrollbar-track{background:transparent}
.spp-list::-webkit-scrollbar-thumb{background:rgba(var(--push-rgb),.3);border-radius:99px;
border:3px solid var(--bg2,var(--bg2))}
.spp-list::-webkit-scrollbar-thumb:hover{background:rgba(var(--push-rgb),.5)}
/* Family headings stay put while their leagues scroll under them, so you never lose which sport you are in. */
.spp-fam{position:static;display:flex;justify-content:space-between;align-items:baseline;
gap:10px;padding:7px 12px 5px;background:none;
font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.spp-fn{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--mut);text-transform:none}
.spp-r{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;
padding:9px 12px;min-height:40px;border:0;border-top:1px solid rgba(var(--push-rgb),.07);
background:transparent;color:var(--txt);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.spp-r:first-child{border-top:0}
.spp-r:hover{background:rgba(255,255,255,.045)}
.spp-r.on{background:rgba(var(--gold-rgb),.10);color:var(--gold)}
.spp-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spp-c{flex:none;font-size:11px;font-weight:700;color:var(--mut);font-variant-numeric:tabular-nums}
.spp-all{border-top:0;border-bottom:1px solid var(--line);font-weight:700}
.spp-none{padding:14px 12px;font-size:12.5px;color:var(--mut)}
body.theme-light .spp{background:var(--bg2,#fff)}
body.theme-light .spp-fam{background:var(--bg2,#fff)}
body.theme-light .spp-list::-webkit-scrollbar-thumb{border-color:var(--bg2,#fff)}
/* ---- A SETTLED CARD MUST NOT LOOK LIKE A LIVE ONE ----------------------------------------------------
The day-lock keeps picks on the card through settlement, so a graded pick and a live one sat in the same
box with the same gold price, the same stake pill and the same green tail button. The only honest fix is
to make the two states visibly different at a glance, before anything is read.
Settled cards recede: the border takes the result colour, the surface flattens, and the price -- which is
the number we recorded this morning and no book will still honour -- drops to muted weight. It is kept
rather than deleted because it is what the pick was graded at. */
.b3card.done{background:var(--surf);border-color:rgba(var(--push-rgb),.22)}
.b3card.done:hover{transform:none;box-shadow:none;border-color:rgba(var(--push-rgb),.3)}
.b3card.done.won{border-color:rgba(var(--good-rgb),.30)}
.b3card.done.lost{border-color:rgba(var(--bad-rgb),.26)}
.b3card.done .b3odds{color:var(--mut);font-weight:700;font-size:16px}
.b3card.done .b3u{background:rgba(var(--push-rgb),.08);color:var(--mut);border-color:rgba(var(--push-rgb),.18)}
.b3card.done .b3edge{opacity:.6}
/* The verdict, in the slot the checkbox used to hold. */
.b3done{margin-left:auto;flex:none;font-size:11px;font-weight:800;letter-spacing:.09em;
padding:2px 7px;border-radius:6px;border:1px solid transparent}
.b3done.won{background:rgba(var(--good-rgb),.14);color:var(--good-hi);border-color:rgba(var(--good-rgb),.3)}
.b3done.lost{background:rgba(var(--bad-rgb),.12);color:var(--bad-hi);border-color:rgba(var(--bad-rgb),.28)}
.b3done.void{background:rgba(var(--push-rgb),.10);color:var(--mut);border-color:rgba(var(--push-rgb),.22)}
/* Where the tail button was. Same footprint so the grid does not reflow between states, but flat, quiet and
not a button -- there is nothing left to press. */
.b3settled{margin-top:6px;min-height:44px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(var(--push-rgb),.05)}
.b3settled.won{border-color:rgba(var(--good-rgb),.26);background:rgba(var(--good-rgb),.06)}
.b3settled.lost{border-color:rgba(var(--bad-rgb),.22);background:rgba(var(--bad-rgb),.05)}
.b3s-r{font-size:12px;font-weight:850;letter-spacing:.08em}
.b3settled.won .b3s-r{color:var(--good-hi)}
.b3settled.lost .b3s-r{color:var(--bad-hi)}
.b3settled.void .b3s-r{color:var(--mut)}
.b3s-u{font-size:14px;font-weight:850;font-variant-numeric:tabular-nums}
.b3s-n{flex:1 1 100%;font-size:11.5px;line-height:1.4;color:var(--mut)}
/* ---- THE DAY'S STATE, SAID ONCE ---------------------------------------------------------------------
Above the grid, because whether the card is live or graded changes what every box under it means. */
.b3state{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:10px 13px;
border-radius:12px;border:1px solid var(--line);background:var(--surf)}
.b3state.won{border-color:rgba(var(--good-rgb),.3);background:linear-gradient(180deg,rgba(var(--good-rgb),.08),transparent 70%),var(--surf)}
.b3state.lost{border-color:rgba(var(--bad-rgb),.26);background:linear-gradient(180deg,rgba(var(--bad-rgb),.07),transparent 70%),var(--surf)}
.b3st-k{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--txt)}
.b3st-r{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--mut)}
.b3st-u{font-size:17px;font-weight:850;font-variant-numeric:tabular-nums}
.b3st-n{flex:1 1 100%;font-size:11px;line-height:1.45;color:var(--mut)}
/* Ladder rows settle too. A small tag, not a restyle -- the row is a list item, not a card. */
.b3mktr.done{opacity:.72}
.b3mktr-r{flex:none;font-size:11px;font-weight:800;letter-spacing:.08em;padding:1px 6px;border-radius:5px}
.b3mktr-r.won{background:rgba(var(--good-rgb),.14);color:var(--good-hi)}
.b3mktr-r.lost{background:rgba(var(--bad-rgb),.12);color:var(--bad-hi)}
.b3mktr-r.void{background:rgba(var(--push-rgb),.10);color:var(--mut)}
/* ---- EVIDENCE, NOT JUST PERFORMANCE -----------------------------------------------------------------
Deliberately NOT styled like a trophy. The common case is "too early to tell" and it has to sit calmly
on a card that is up 40 units without either shouting or hiding. Only a bot that survives the fleet-wide
correction gets the gold treatment, and right now that is nobody. */
.zc-ev{display:flex;align-items:baseline;gap:8px;margin-top:8px;padding:6px 9px;border-radius:9px;
border:1px solid var(--line);background:rgba(var(--push-rgb),.05);min-width:0}
.zc-ev-n{flex:none;font-size:13px;font-weight:850;font-variant-numeric:tabular-nums}
.zc-ev-t{font-size:11.5px;line-height:1.35;color:var(--mut);min-width:0}
.zc-ev.ev-strong{border-color:rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.09)}
.zc-ev.ev-strong .zc-ev-n{color:var(--gold)}
.zc-ev.ev-strong .zc-ev-t{color:#e8d9a8}
.zc-ev.ev-some{border-color:rgba(var(--good-rgb),.24);background:rgba(var(--good-rgb),.05)}
.zc-ev.ev-some .zc-ev-n{color:var(--good-hi)}
.zc-ev.ev-none .zc-ev-n{color:var(--mut)}
.zc-ev.ev-behind{border-color:rgba(var(--bad-rgb),.20);background:rgba(var(--bad-rgb),.04)}
.zc-ev.ev-behind .zc-ev-n{color:var(--bad-hi)}
/* The fleet-level correction, above the leaderboard it corrects. */
.zoo-eviband{border:1px solid var(--line);border-radius:14px;background:var(--surf);padding:13px 15px;
margin:0 0 14px}
.ze-b{font-size:12px;line-height:1.6;color:var(--mut);max-width:78ch}
.ze-b b{color:var(--txt)}
.ze-r{font-size:13px;line-height:1.5;color:var(--txt);margin:8px 0;padding:7px 11px;border-radius:9px;
background:rgba(var(--gold-rgb),.07);border:1px solid rgba(var(--gold-rgb),.22)}
.ze-r b{color:var(--gold);font-weight:850}
.ze-why{margin-top:6px}
body.theme-light .zc-ev{background:rgba(15,23,42,.03)}
/* The fade line. Blue rather than green on purpose: it is a real result but it is an ESTIMATE, and it must
not wear the same colour as a measured profit anywhere else on the site. */
/* Three windows, one row. Tabular figures so the columns line up down a grid of cards, which is the whole
point — you are comparing bots, not reading one. */
.zc-win{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;padding:5px 8px;
border-radius:8px;background:rgba(var(--push-rgb),.05);border:1px solid rgba(var(--push-rgb),.14)}
.zc-win-k{flex:none;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.zc-w{display:inline-flex;align-items:baseline;gap:4px;min-width:0}
.zc-w em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--mut);opacity:.8}
.zc-w b{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
.zc-fade .zc-win{flex:1 1 100%;margin-top:4px;background:rgba(125,176,255,.06);border-color:rgba(125,176,255,.18)}
.zc-fade .zc-win-k{color:var(--blue2)}
.zc-fade{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:6px;padding:6px 9px;
border-radius:9px;border:1px solid rgba(125,176,255,.28);background:rgba(125,176,255,.07)}
.zc-fade-k{flex:none;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue2)}
.zc-fade-n{flex:none;font-size:13px;font-weight:850;font-variant-numeric:tabular-nums;color:var(--blue2)}
.zc-fade-t{flex:1 1 100%;font-size:11.5px;line-height:1.35;color:var(--mut)}
.zc-fade-t b{color:#a9ccff}
.zc-fade-e{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}
.zm{display:inline-flex;align-items:baseline;gap:5px;padding:2px 7px;border-radius:7px;
background:rgba(var(--push-rgb),.09);border:1px solid rgba(var(--push-rgb),.18);
font-size:11.5px;color:var(--mut);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.zm b{color:var(--txt);font-weight:700}
.zm-n{font-size:11px;opacity:.65;font-variant-numeric:tabular-nums}
.zm-more{background:transparent;border-style:dashed}
.zm-none{font-size:11.5px;color:var(--mut)}
.mk-end{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
/* ---- YOUR MARKETS ------------------------------------------------------------------------------------
Deliberately reuses .mk-row wholesale rather than inventing a second row component. The engine's market
chart and the user's market chart are the same object about two different ledgers, and they should be
impossible to tell apart except by their heading. */
.ym-scope{font-size:12.5px;color:var(--mut);line-height:1.55;margin:0 0 10px;max-width:74ch}
.ym-tabs{display:flex;gap:6px;margin:0 0 8px}
.ym-tab{flex:none;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;
color:var(--mut);font:inherit;font-size:12px;font-weight:700;cursor:pointer;min-height:34px}
.ym-tab:hover{color:var(--txt);background:rgba(255,255,255,.04)}
.ym-tab.on{color:var(--gold);border-color:rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.09)}
/* A thin sample is shown, not hidden -- but it is visibly quieter than a market with a real record behind it. */
.ym-thin{opacity:.66}
#your-markets{margin-top:18px}
/* Under ~380px the word "cal" is not worth the 34px it costs. The button stays -- same tap target, same
action -- as a calendar glyph. */
@media(max-width:380px){
.mk-cal{font-size:0;padding:6px 7px}
.mk-cal::before{content:'\1F5D3';font-size:12px;line-height:1}
}
/* The summary is now the whole card when closed, so it needs to behave like one. */
.ip-game>summary{list-style:none;cursor:pointer}
.ip-game>summary::-webkit-details-marker{display:none}
.ip-game>summary::after{content:'';flex:none;width:7px;height:7px;margin-left:2px;
border-right:1.5px solid var(--mut);border-bottom:1.5px solid var(--mut);
transform:rotate(45deg) translate(-2px,-2px)}
.ip-game[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.ip-game[open]{box-shadow:var(--e2),var(--rim)}
.ip-game[open]>summary{border-bottom:1px solid var(--line)}
/* ==========================================================================================================
MOBILE SCROLL COST
==========================================================================================================
Three elements are on screen at ALL TIMES and all three carried a backdrop-filter: the header
blur(16px) saturate(1.3), the sub nav blur(10px), and the bottom nav blur(18px) saturate(1.3). A
backdrop-filter on a sticky element makes the browser re-blur everything behind it on every scroll
frame, and on a phone GPU that is the difference between a scroll that tracks your thumb and one that
stutters. Three of them stacked is three full-width blurs per frame.
Desktop keeps them: it has the headroom and the effect is part of the chrome. On touch devices they
become near-solid instead. Modals and sheets keep their blur everywhere, because the page behind a modal
is not scrolling, so it is blurred once and never again.
Also dropped on mobile: the fixed scrim under the header. position:fixed plus a gradient is another
per-frame repaint, and it buys the least of anything here. */
@media (hover: none), (pointer: coarse){
header{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
background:linear-gradient(180deg,rgba(6,9,15,.985),rgba(5,7,12,.97)) !important}
.subnav{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
background:rgba(5,7,12,.985) !important}
.botnav{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
background:rgba(6,9,15,.985) !important}
.wrap::before{display:none}
body.theme-light header{background:linear-gradient(180deg,rgba(248,249,253,.985),rgba(245,246,251,.97)) !important}
body.theme-light .subnav,body.theme-light .botnav{background:rgba(248,249,253,.985) !important}
}
/* ---- OFFSCREEN GAME CARDS ARE NOT RENDERED -----------------------------------------------------------
The board is the largest section in the product by a wide margin: one tab holding every league, every
game and every market for the day. Even collapsed, the browser was laying out and painting all of it on
every scroll frame, which is why Today stayed glitchy on a phone while lighter tabs went smooth.
content-visibility:auto tells the browser to skip layout and paint entirely for a card that is off
screen, and to do the work only as it approaches. contain-intrinsic-size supplies a placeholder height
so the scrollbar does not jump around as cards are skipped and realised. The measurements are the real
collapsed heights: a closed game row is about 52px plus margin, a closed In Play card about 46px.
This is the single biggest rendering win available on this page and it costs nothing visually. */
.gamegrp{content-visibility:auto;contain-intrinsic-size:auto 58px}
.ip-game{content-visibility:auto;contain-intrinsic-size:auto 52px}
.pxg-game,.pl-g{content-visibility:auto;contain-intrinsic-size:auto 120px}
/* An OPEN card must never be skipped: it is tall, it is being read, and a wrong intrinsic size on an
expanded card is exactly how a page jumps under a thumb. */
/* .sportgrp[open] is exempt at EVERY width, not just on phones, for the same reason only more so: its real
height is the sum of all its games, so it is the single worst-estimated box on the page. */
.gamegrp[open],.ip-game[open],.sportgrp[open]{content-visibility:visible;contain-intrinsic-size:none}
/* ---- WHY THIS IS TURNED OFF ON PHONES -----------------------------------------------------------------
contain-intrinsic-size is a PROMISE about how tall an unrendered element will be, and the browser lays
the page out as if the promise were true. 58px was measured against the DESKTOP header, which is a
single grid row. On mobile .gamehdr is `flex-wrap:wrap` and routinely takes two lines, so the real
collapsed height is closer to 90-100px and every off-screen group was under-promised by ~40%.
The consequence is exactly what Austin described: the page believes it is much shorter than it is, then
corrects group by group as you scroll into them. The scroll position drifts under the finger, the
scrollbar jumps, and the tab "doesn't fit" until it has been scrolled through once.
Today is worst because it holds the most groups, and it is the tab the app opens on -- so it is the one
surface that pays this on a cold load every time.
The trade is small: this saves off-screen layout on a few dozen collapsed rows, which is worth having on
a 400-row list and is not worth a single frame of scroll drift on a phone. The big lists (.fabsec at 415
children) keep theirs. */
/* .sportgrp IS THE ONE THAT ACTUALLY MATTERED, AND IT WAS MISSED. The opt-out above was written against
the selectors declared in THIS block, but the same 140px promise is also made to .sportgrp about 4,800
lines up, in the PERF rule that covers .fabsec and the Zoo cards -- so it was never part of the same
edit and it survived the fix. A .sportgrp is a whole league's wrapper holding every game for
that league; open, it is routinely 600-1500px tall, and it was promising 140px. That is an order of
magnitude worse than the 58px-vs-90px error described above, and it fails in exactly the same way: the
document reports a height it does not have, then grows under the thumb one league at a time as each
group is scrolled into. Today carries the most league groups and is the tab the app opens on, so Today
pays it hardest and pays it on every cold load -- which is the "not fluid at all" report. */
@media(max-width:640px){
.gamegrp,.ip-game,.pxg-game,.pl-g,.sportgrp{content-visibility:visible;contain-intrinsic-size:none}
}
/* The way into the per-market calendar. Deliberately quiet: the row's own job is the number, and this is
the second thing you might want from it, not the first. */
.mk-cal{flex:none;margin-left:8px;padding:3px 8px;border-radius:var(--r1);border:1px solid var(--line);
background:rgba(255,255,255,.03);color:var(--mut);font-family:var(--font-display);font-stretch:92%;
font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.mk-cal:hover{color:var(--gold);border-color:rgba(var(--gold-rgb),.35);background:rgba(var(--gold-rgb),.08)}
/* ==========================================================================================================
SIGNATURE MOTION :: the part that should feel like a product rather than a page
==========================================================================================================
Everything above this deliberately took motion AWAY, because a board row opened forty times a day must
not animate. That is correct and it is also not the whole job: a product with no signature moments feels
competent and forgettable. So motion comes back here, in the three places it costs nothing and reads as
craft. All of it is scroll-driven or edge-based, none of it sits between you and an action, and every
line is transform/opacity or a mask, so it composites on the GPU and never triggers layout.
1. DISSOLVE EDGES. Scrollable rails fade their content out at the boundary instead of guillotining it.
A hard cut says "the box ended". A dissolve says "there is more that way", which is the actual truth
and needs no scrollbar to say it.
2. SCROLL-LINKED REVEAL. Cards resolve as they enter the viewport, driven by CSS scroll timelines, so
there is no JS, no observer and no main-thread work. Degrades to fully visible where unsupported,
which is the correct failure: the content was never hidden, it was only late.
3. THE PAGE DISSOLVES UNDER THE HEADER. Content fades as it passes beneath the blurred bar rather than
sliding under an opaque edge. This is the single detail that most reads as "app" rather than "page". */
/* ---- 1. Dissolve edges on horizontal rails ---- */
.subnav-in,.filters,.jumpbar,.spbar,.shoptabrow,.oddsbar{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%)}
/* Vertical dissolve is limited to the SHORT panel that actually scrolls inside itself. It was also on
.pl-feed, .zoo-grid and .ip-list, which hold hundreds of children: a mask forces the whole subtree into
one composited layer, and on a list that long that is paid on every frame. Horizontal rails keep theirs
because they are a handful of chips. */
.evbody{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 18px),transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 18px),transparent 100%)}
/* ---- 2. Scroll-linked reveal: REMOVED ----
This was a second `animation-timeline: view()` rule setting transform and opacity on the SAME cards the
focus observer now drives, with `both` fill, so the two would have fought for the same two properties on
the same elements. It was also unsupported in Safari and on iOS, meaning it did nothing on a phone while
still costing a conflict everywhere else. One mechanism owns card transform and opacity now, and it is
the observer, because that one actually runs on every browser. */
/* ---- 3. The page dissolves under the header ---- */
/* A soft scrim below the sticky bar so rows fade out as they pass beneath it rather than being clipped.
pointer-events:none so it never eats a tap on the row underneath it. */
/* REMOVED. This scrim faded rows out as they passed under the header, which was right while the header
was permanently on screen. The header auto-hides now, and --hdr-h does not follow it down, so after any
scroll this band is a fixed dark smear floating over the middle of the page with nothing above it. A
blurred layer that holds still while the content moves under it reads as a rendering fault, and that is
how it was reported. The problem it solved went away with the sticky header. */
.wrap::before{display:none}
body.theme-light .wrap::before{display:none}
/* ---- Live state should breathe, everything else should not ---- */
/* One ambient pulse in the whole product, on the thing that is genuinely changing while you look at it.
Opacity only, and it is already paused when the tab is hidden by the idle rule above. */
@media (prefers-reduced-motion: no-preference){
@keyframes midas-live{0%,100%{opacity:1}50%{opacity:.45}}
.mz-live-dot,.gc-livedot,.olive,.gst-live::before{animation:midas-live 2.4s var(--ease-tint) infinite}
}
/* ==========================================================================================================
FOCUS SCROLL :: the list as a stack of bubbles rather than a wall of rows
==========================================================================================================
The card nearest the middle of the viewport is fully present. Cards above and below sit slightly back:
a little smaller, a little dimmer, a hairline quieter. Scrolling therefore moves ATTENTION rather than
just moving pixels, and a long list reads as a sequence of things you are looking at one at a time.
Entirely scroll-driven CSS. No JS, no IntersectionObserver, no scroll listener, and it composites on the
GPU because it only touches transform and opacity. Where scroll timelines are unsupported nothing
happens at all and the list is simply a normal list, which is the correct degradation.
The numbers are deliberately small. At .972 and .62 you feel the focus without the page appearing to
breathe, and text never dims far enough to become unreadable while you are scrolling past it. */
/* IMPLEMENTED WITH IntersectionObserver, NOT scroll timelines. The first version used
`animation-timeline: view()`, which is genuinely elegant and genuinely unsupported in Safari and on iOS,
so on a phone it did exactly nothing while I reported it as shipped. IntersectionObserver is universally
supported, is NOT a scroll listener (the callback is async and fires only on threshold crossings), and
the actual animation stays pure CSS transition on transform and opacity.
The class is applied by midasFocus() below. */
@media (prefers-reduced-motion: no-preference){
/* CONTINUOUS, NOT BINARY. The first version toggled a class when a card crossed a band, which grows a
card as it arrives and then never shrinks it, because a card taller than the band never fully leaves
the band. Focus is a gradient, not a state: --f is written per element by the loop below, 1 at the
centre of the screen falling to 0 at the edges, and the card reads it directly.
No transition on transform: the value is already updated every frame while scrolling, and a transition
on top of a per-frame value is what makes motion feel laggy rather than attached to the finger. */
/* ROWS get the curve that was tuned on rows: opacity 23, scale 18, blur 2. */
/* SOFTENED 2026-08-17. At 2px of blur and a .77 floor this was not receding, it was deleting: on Practice,
which is built from a few TALL rows, two of the three rows on screen sit deep in the tail and were
unreadable. Depth should cost legibility nothing. Four numbers, all here, easy to push back up. */
.zt-card,.zoo-card,.trackrow,.pick,.au-row,.au-sheet.au-hero{
--f:1;
opacity:calc(.84 + .16 * var(--f));
filter:blur(calc((1 - var(--f)) * 0.9px));
transform:scale(calc(.89 + .11 * var(--f))) translateY(calc((1 - var(--f)) * 9px));
transform-origin:center}
/* CONTAINERS TAKE THE SAME CURVE AS ROWS. They used to get opacity only, on the reasoning that a
several-hundred-pixel container scaling by .82 reads as a bug rather than as depth.
That is true of an OPEN container and false of a closed one. Closed, a .gamegrp is a ~60px row — after
the density pass, among the shortest rows in the product — and the Today board is forty of them. So
the tab that opens first was built almost entirely from the one class excluded from scale and blur,
and all it did was ripple between .72 and 1 opacity. That is why the effect read as absent on the
board while being clearly visible on Practice.
The tall case is already covered by the [open] rule directly below, which forces transform:none,
opacity:1 and filter:none the moment a card is opened to be read. With that guard in place the
exclusion here was protecting against a state that cannot occur. */
.ip-game,.gamegrp,.pxg-game{
--f:1;
opacity:calc(.84 + .16 * var(--f));
filter:blur(calc((1 - var(--f)) * 0.9px));
transform:scale(calc(.89 + .11 * var(--f))) translateY(calc((1 - var(--f)) * 9px));
transform-origin:center}
/* THE SAME CURVE IS NOT THE SAME EFFECT ON A PHONE. The falloff is proportional to viewport height, so
the ratio of dimmed to bright is constant -- but the CARD COUNT is not. On a desktop window eight
cards are visible and the two at the edges recede, which reads as depth. On a phone three are visible
and two of them are at 50-67% opacity, so most of the screen looks broken rather than focused, and
Austin reported it as "sizing is wrong and things are cut off".
Same effect, much gentler: barely any scale change and a high opacity floor. */
/* THE CSS HAS TO OPT OUT WHEREVER THE JS DOES, AND IT DID NOT. midasFocus() below returns early on
`(max-width:640px),(pointer:coarse)`, so on a phone --f is never written and holds its 1 default --
which meant the softened curve above resolved to scale(1) and opacity(1) on every card, forever. It
had no visible effect at all, and still gave every card on the biggest board in the product a computed
transform that is not `none`. That makes each one a stacking context and a containing block and keeps
it in the compositor's candidate set for the whole scroll, on the tab with the most cards.
Matching the JS guard exactly removes that for a guaranteed zero visual delta: these declarations were
already evaluating to the identity transform and full opacity on every device that takes this branch. */
/* NO MOBILE OPT-OUT ANY MORE. The old curve was disabled on phones because it dimmed to 50% and three
visible cards meant most of the screen looked broken. The tuned curve has a .77 opacity floor and the
containers no longer scale at all, which was the actual complaint. The effect is the point of the
design, and a phone is where it will mostly be seen. */
/* An OPEN card is being read, so it is never scaled or dimmed no matter where it sits. */
.ip-game[open],.gamegrp[open]{--f:1 !important;transform:none !important;opacity:1 !important;filter:none !important}
}
/* SCROLL SNAP REMOVED. It was declared on `#bets .sport`, which is not a scroll container at all, so the
snap points were being resolved against the document scroller and fought every deliberate flick. Snap
only ever belongs on the element that actually scrolls, and here that is the page itself, where a detent
on a variable-height list is more annoying than useful. scroll-margin is kept: it is free, and it stops
an expanded card landing underneath the sticky header. */
.ip-game,.gamegrp{scroll-margin-top:calc(var(--hdr-h,56px) + 34px)}
/* ---- Zoo: result bands. The winners band is open and carries the rank badges; the rest are one click
away with their counts stated on the closed row, so nothing is hidden by folding it. ---- */
.zoo-band{margin:16px 0 0}
.zoo-band>summary{list-style:none;cursor:pointer}
.zoo-band>summary::-webkit-details-marker{display:none}
.zb-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:9px 13px;
background:var(--surf2);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--rim)}
.zoo-band[open]>.zb-h{border-bottom-left-radius:0;border-bottom-right-radius:0}
.zoo-band>summary.zb-h:hover{border-color:var(--gold);color:var(--txt)}
.zb-h svg{width:15px;height:15px;color:var(--gold);flex:none}
.zb-t{font-family:var(--font-display);font-size:12.5px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--txt)}
.zb-n{font-family:var(--font-num);font-size:11.5px;font-weight:800;color:var(--gold);
background:rgba(var(--gold-rgb),.10);border:1px solid rgba(var(--gold-rgb),.22);border-radius:var(--r1);
padding:1px 7px;font-variant-numeric:tabular-nums}
.zb-say{flex:1 1 100%;font-size:11.5px;color:var(--mut);line-height:1.5}
.zb-down .zb-n,.zb-thin .zb-n,.zoo-idlewrap .zb-n{color:var(--mut);background:transparent;
border-color:var(--line)}
.zoo-band .zoo-grid{margin-top:10px}
.zb-up{border-left:2px solid var(--gold);padding-left:10px;margin-left:-12px}
body{overflow-x:clip;max-width:100%;overscroll-behavior-y:none}
@media(max-width:560px){
.zx-cols{grid-template-columns:1fr}
.zx-col{flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px}
.zx-wr{font-size:18px}
}
.ze-h{font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--txt);margin-bottom:6px}
.zoo-method{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.zoo-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;font-variant-numeric:tabular-nums}
.mk-val{text-align:right;font-variant-numeric:tabular-nums;font-weight:800;font-size:14px;line-height:1.2;min-width:0}
.mkfold{margin-top:12px}
@media(max-width:640px){
.mk-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:8px 8px}
.mk-track{grid-column:1/-1;order:3}
.mk-val{text-align:right}
/* The label is the thing that must not push the row wide. minmax(0,1fr) above lets it shrink; this
lets it ellipsis rather than force a horizontal scrollbar on the whole page. */
.mk-name{min-width:0}
.mk-sub{white-space:nowrap}
}
/* THE LIGHT SOURCE. One cool key from top centre plus a faint gold bloom low down, so the page reads as a
lit space rather than a flat colour. Fixed attachment so it does not slide under scrolling content. */
body{
background:
radial-gradient(1200px 620px at 50% -8%, rgba(120,150,255,.055), transparent 62%),
radial-gradient(900px 520px at 88% 108%, rgba(var(--gold-rgb),.030), transparent 60%),
var(--bg) !important;
/* NOT background-attachment:fixed. This file already had `scroll` set further down, which was somebody
fixing exactly this before me, and my first pass overrode it back to fixed with !important. A fixed
attachment cannot be composited: the browser repaints the whole background every scroll frame, which
is the single most reliable way to make a long page feel glitchy on a phone. The gradients scroll with
the page now. The lit-space effect survives because the light is at the TOP of the document, which is
where it reads anyway. */
background-attachment:scroll !important;
}
/* ==========================================================================================================
CHROME :: the frame you see on every screen
==========================================================================================================
Three changes, each replacing a pattern that is generic rather than wrong.
1. THE WORDMARK WAS GRADIENT TEXT. The craft floor bans it outright and it is one of the loudest
generated-design tells there is. A wordmark should be a shape, not a fill effect. It is now set in
the display face at heavy weight with wide tracking, in flat gold, with a drawn mark beside it.
2. NAVIGATION WAS FIVE FLOATING PILLS. Separate rounded pills on a dark field is the default every dark
UI arrives at, and it reads as five unrelated buttons rather than one control with five positions.
It is now ONE segmented instrument switch: a single recessed housing, hairline dividers, and the
active position lit from within. You are moving a selector, not pressing unrelated buttons.
3. THE HEADER FLOATED IN THE MIDDLE OF THE PAGE. Full bleed now, with a hairline rule and the content
still held to the reading column. An instrument's chrome meets the edges of its case. */
/* Full bleed header, hairline rule, no gold tint on the border. */
header{
background:linear-gradient(180deg,rgba(7,10,17,.92),rgba(5,7,12,.86)) !important;
border-bottom:1px solid var(--line) !important;
box-shadow:0 1px 0 rgba(255,255,255,.03), 0 18px 40px -30px rgba(0,0,0,.9) !important}
/* ==========================================================================================================
SHARED COMPONENTS :: the layer every tab inherits
==========================================================================================================
Applied globally rather than per tab, so a surface nobody has touched still arrives in the new language.
These are the pieces that appear on every screen: tables, panels, inputs, buttons, badges. */
/* TABLES. This product is mostly tables pretending to be lists, so they get instrument treatment: figures
monospaced and right aligned so decimals stack, headers quiet and lettered, rules hairline. A ruled box
around every cell is a spreadsheet; a rule under every row is a ledger. */
table{font-variant-numeric:tabular-nums}
/* ---- INFINITE ANIMATIONS: PAUSED WHEN NOBODY IS LOOKING ---------------------------------------------
There are 43 of them. Deleting them wholesale would be wrong, because they are not one thing:
live indicators (.mz-live-dot, .livechip, .olive, .gc-livedot, .sc-live) carry STATE, a game is on;
skeletons (.mz-skel, .wal-load) carry "loading", which is information;
the .bd-* border effects are cosmetics users BOUGHT, so their whole value is that they move.
What they share is that every one keeps a compositor layer busy forever, including in a background tab
where nobody can see them. A tracker sits open in a tab all day, so this is the battery cost of the
product. Pausing on hidden costs nothing visually and stops the work when it cannot be perceived. */
body.midas-idle *,body.midas-idle *::before,body.midas-idle *::after{
animation-play-state:paused !important}
@media(max-width:560px){
.zb-up{margin-left:0;padding-left:8px}
.zb-h{padding:8px 11px}
}
/* ---- CHIPS WRAP. NOTHING IS EVER CUT OFF. ----------------------------------------------------------------
I added an edge-fade mask an hour ago so a horizontally-scrolling chip row would look scrollable. It made
things worse: Austin read the fade as a shadow chopping the tabs, twice, and he is right that it looks
like damage rather than an affordance. The underlying problem was never the affordance - it was that
chips were hidden at all.
So they wrap. Every chip is visible, nothing scrolls sideways, nothing needs a hint, and no fade can be
mistaken for a shadow. A second row of chips costs 34px; a filter you cannot see costs you the filter.
This overrides the earlier nowrap and mask rules on purpose and is placed after them. */
/* `.subnav` REMOVED FROM THIS LIST 2026-08-19. Wrapping is right for filter CHIPS -- a chip you cannot
see costs you the filter -- and wrong for a fixed five-item nav strip, which needs >=433px intrinsic
against a 430px phone and therefore wrapped on every handset, costing 40px of the vertical space this
header is supposed to be giving back. It also silently disabled navPaint()'s scrollIntoView. It scrolls
again below; no fade returns with it. */
.spbar,.zoo-chiprow,.oddschips,.bqst,
.zoo-sortrow,.zoo-sportrow,.zoo-catrow{
-webkit-mask-image:none !important;
mask-image:none !important;
flex-wrap:wrap !important;
overflow-x:visible !important;
padding-right:0 !important;
row-gap:6px}
/* The sub-nav is a short list and centring it keeps it looking deliberate when it wraps. */
.subnav{justify-content:center}
/* The float column no longer needs clearance from a scrolling row, but the LAST row of chips still must not
sit under Ask MIDAS, so the container keeps a little room instead of the row keeping it. */
@media(max-width:768px){
.spbar,.zoo-chiprow,.oddschips,.bqst{padding-right:0 !important}
}
/* ---- SCROLLABLE CHIP ROWS LOOK SCROLLABLE ---------------------------------------------------------------
The league chips already scroll horizontally; nothing said so, so a fourth chip cut off at the right edge
read as broken layout rather than as more content. A mask fades the last 28px, which is the cheapest
honest signal available - it costs no element and cannot be mistaken for a border.
The right padding is clearance for the float column: Ask MIDAS and the FAB sit over that corner, and a
chip you can scroll to but not tap is not reachable. */
.spbar,.zoo-chiprow,.oddschips,.bqst{
-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%)}
.spbar{padding-right:72px;scroll-snap-type:x proximity}
.spbar>*{scroll-snap-align:start}
@media(min-width:769px){
/* No floating column on desktop and the row usually fits, so neither the mask nor the padding earns its
keep there. */
.spbar{padding-right:0}
.spbar,.zoo-chiprow,.oddschips,.bqst{-webkit-mask-image:none;mask-image:none}
}
/* The sub-nav had the same hard cut ("Odds Bo..."). Same treatment, no padding — nothing floats over it. */
.subnav{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 24px),transparent 100%);
mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 24px),transparent 100%)}
@media(min-width:769px){.subnav{-webkit-mask-image:none;mask-image:none}}
/* ---- THE FEED STARTED 100px DOWN THE PAGE --------------------------------------------------------------- */
#feed .seghead{margin-top:4px}
#feed{padding-top:0}
.fd-note{margin:8px 0}
/* Two stacked left-bordered callouts consumed ~180px above the first post. They say related things, so they
read as one block with a rule between rather than as two competing announcements. */
.fd-note + .fd-note{margin-top:0;border-top:1px solid var(--line);border-top-left-radius:0;
border-top-right-radius:0}
.fd-note:has(+ .fd-note){margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
/* ---- FEED AVATARS CANNOT COLLAPSE THE CARD -------------------------------------------------------------
The box is reserved at 40px whatever happens: flex:0 0 40px so it never shrinks, a monogram always
present underneath, and the image absolutely positioned on top. A src that 404s removes itself and the
monogram is simply revealed - no broken glyph, no reflow, no text shifting out of line with the cards
above and below it. Replies get the same treatment at 24px. */
.fd-ava{position:relative;flex:0 0 40px;width:40px;height:40px;border-radius:50%;overflow:hidden;
background:var(--surf2,#1b1f30);display:flex;align-items:center;justify-content:center}
.fd-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.fd-ini{font-size:14px;font-weight:800;color:var(--mut);line-height:1;user-select:none}
.fd-cmt .fd-ava{flex:0 0 24px;width:24px;height:24px}
.fd-cmt .fd-ini{font-size:11.5px}
/* ---- A SHEET YOU CAN ALWAYS LEAVE ------------------------------------------------------------------------
The Cancel button always existed; it was not reachable. The sheet padded for the safe-area inset but
nothing lifted it clear of the FIXED bottom tab bar, so its last row sat under 56px of chrome, and the
FAB kept drawing on top of the Delete row.
The floats are HIDDEN while a sheet is open rather than re-layered: a z-index argument is what produced
this, and adding another number to it would only move the argument. */
body.sheet-open .fab,
body.sheet-open .askbubble,
body.sheet-open .addfab{display:none !important}
body.sheet-open{overflow:hidden}
.fd-picksheet,.moresheet,.obetsheet{z-index:900 !important}
/* A SHEET AND ITS BACKDROP MUST STAY ADJACENT IN THE STACK.
The sheets above were raised to 900, and their scrims were left where they were -- .obetscrim at 120,
which is BELOW .gcoverlay (200), .chatoverlay (300), .evsheet (310) and .toast (400). So the add-to-
tracker sheet floated above everything while its own dimming sat under four other layers, which is the
"modal does not sit cleanly above the boards with adequate backdrop dimming" fault. Pinning the scrims one
level under their sheet closes the gap so nothing can render between a sheet and the backdrop that is
supposed to be masking the page for it. */
.obetscrim,.sheetscrim{z-index:899 !important}
.fd-pick-in{
position:relative;z-index:901;
/* clear of the tab bar AND the home indicator, not one or the other */
padding-bottom:calc(18px + 56px + env(safe-area-inset-bottom)) !important;
max-height:82vh;overflow-y:auto}
@media(min-width:769px){
/* no bottom tab bar on desktop, so do not reserve room for one */
.fd-pick-in{padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important}
}
/* Reads as draggable because it now is. */
.sheet-grip{display:block;width:36px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);
margin:0 auto 12px}
/* Destructive, and not one tap away from Report by accident. */
.fd-pick-row.fd-danger{color:var(--bad);border-color:rgba(var(--bad-rgb),.35);background:rgba(var(--bad-rgb),.06)}
.fd-pick-row.fd-danger:hover{background:rgba(var(--bad-rgb),.12)}
.fd-pick-row{min-height:48px}
/* ========== TWO PHONE BUGS FROM AUSTIN'S SCREENSHOTS, 2026-08-18 ==========================================
1. THE HEADER IS SEE-THROUGH ON iOS. There IS a correct rule — inside @media (hover:none),(pointer:coarse)
the header drops backdrop-filter and takes a .985 background — and roughly 21 KB further down the
sheet another `header{...}` re-applies rgba(...,.92)/(...,.86) with !important, outside any media
query. Later plus !important wins, so the phone got the translucent one and the sport chips and
"High consensus" showed straight through the bar. Third time today the bug has been "the rule exists
and a later one beats it", so this block is appended LAST on purpose.
backdrop-filter is killed too: on iOS it is what turns a nearly-opaque bar into a window.
2. THE WHOLE BOARD IS BLURRED UNTIL YOU OPEN A CARD. .gamegrp carries the focus curve including blur,
with no coarse-pointer opt-out. A phone shows two or three TALL game cards, so almost every one of
them sits in the tail of the falloff at once — which is not depth, it is a board you cannot read.
Blur is the part that costs legibility, so on touch it goes entirely and the effect keeps opacity and
a little scale. Desktop is unchanged: many short rows, only the far ones soften.
*/
@media (hover:none),(pointer:coarse){
header{
background:linear-gradient(180deg,#070a11,#05070c) !important;
backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
body.theme-light header{
background:linear-gradient(180deg,#f8f9fd,#f5f6fb) !important}
.subnav{
background:#05070c !important;
backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
body.theme-light .subnav{background:#f5f6fb !important}
/* NO BLUR ON TOUCH. Keep the fade and a hint of scale — the effect survives, the text stays readable. */
.ip-game,.gamegrp,.pxg-game,
.zt-card,.zoo-card,.trackrow,.pick,.au-row,.au-sheet.au-hero{
filter:none !important;
opacity:calc(.90 + .10 * var(--f,1)) !important;
transform:scale(calc(.96 + .04 * var(--f,1))) !important}
/* An OPEN card is being read: no treatment at all. */
.gamegrp[open],.ip-game[open]{opacity:1 !important;transform:none !important}
}
/* ---- A RETIRED SURFACE THAT EXPLAINS ITSELF --------------------------------------------------------------
Not an error state and not an empty state: a decision, stated. Styled calm rather than red, because
nothing is broken and a red box invites someone to "fix" it by turning the feature back on. */
.pm-off{max-width:60ch;margin:18px auto;padding:20px 22px;border:1px solid var(--line);border-radius:14px;
background:rgba(255,255,255,.025);text-align:left}
.pm-off-h{font-size:14px;font-weight:800;margin-bottom:9px;color:var(--txt)}
.pm-off-b{font-size:12.5px;line-height:1.65;color:var(--mut);margin-bottom:14px}
.pm-off-b b{color:var(--txt)}
body.theme-light .pm-off{background:rgba(20,30,70,.025)}
/* ---- ODDS CELLS: TARGET THE CLASS THAT ACTUALLY RENDERS --------------------------------------------------
An earlier pass hardened `.ocell`, which is produced only by _oddsCell() -- a function with zero call
sites. The real cell is .og-c wrapping an .obtn, so that fix was inert. Both halves, on the right class:
the TRACK already uses minmax(0,1fr); the ITEM needs min-width:0 or it refuses to shrink below its own
content and pushes the money column off the right edge. */
.og-c,.og-row>*{min-width:0}
.obtn{min-width:0;max-width:100%}
.obtn .ob-o{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-best,.ob-side{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "not applicable", not "missing" — a dash the same weight as the muted labels around it. */
.og-na{display:flex;align-items:center;justify-content:center;color:var(--mut);opacity:.55;font-size:13px}
/* ---- EXPLAINERS ARE ONE TAP AWAY, NOT IN THE WAY ---------------------------------------------------------
Austin: not in your face, small, near the bottom. Applies to EXPLANATIONS only -- 21+, the helpline, the
not-betting-advice line and the Polymarket attribution all stay exactly where they are, because a
disclosure you have to open is fine for an explanation and not fine for a disclaimer. */
.boardhow{border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.02);margin:8px 0}
.boardhow>summary{cursor:pointer;list-style:none;padding:9px 12px;font-size:11.5px;font-weight:700;
color:var(--mut);display:flex;align-items:center;gap:8px;min-height:38px}
.boardhow>summary::-webkit-details-marker{display:none}
.boardhow>summary::after{content:'';margin-left:auto;width:7px;height:7px;flex:none;
border-right:1.6px solid var(--mut);border-bottom:1.6px solid var(--mut);
transform:rotate(45deg) translateY(-2px);transition:transform .15s ease}
.boardhow[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.boardhow>summary:hover{color:var(--txt)}
.boardhow .bh-b,.boardhow .ps-prov{display:block;padding:0 12px 11px;font-size:11.5px;line-height:1.6;
color:var(--mut);max-width:68ch}
/* ---- THE FILTER CHIP, RESOLVED ---------------------------------------------------------------------------
Three rules were fighting over this one element: `padding:5px 12px`, then `padding:10px 14px` with
min-height:44px, then `padding:9px 13px` with min-height:38px, then padding-top/bottom:12px from the
touch-target sweep. The winner was a chip with 13px sides, 12px top and bottom AND a 44px minimum height
-- so the box was taller than its own content and the count badge sat hard against the right border with
the label crowded left. That is the "cut off and looks wrong".
One declaration now owns the box: symmetric padding, the 44px tap target expressed as min-height with
the content vertically centred rather than padded to size, and a little extra room on the right whenever
a count is present so the badge is never flush against the border. */
.chip{
padding:0 12px !important;
min-height:36px !important;
display:inline-flex;align-items:center;
white-space:nowrap;overflow:visible;
line-height:1}
.spbar>.chip{min-height:34px !important}
.chip:has(.cnt){padding-right:9px !important}
/* The badge is a label, not a button: small, quiet, and sized by its own digits so a 4-figure count on
History does not inflate every chip on the board. */
.cnt,.zct{
min-width:0;height:17px;padding:0 6px;margin-left:6px;
font-size:11.5px;line-height:17px;border-radius:5px}
/* The 44px target the review asks for is kept where it matters -- a chip you tap on a phone -- without
inflating the same component on a desktop toolbar. */
@media(hover:none),(pointer:coarse){
.chip{min-height:44px !important}
.spbar>.chip{min-height:40px !important}
}
/* ======= EXTERNAL MOBILE REVIEW: remaining items ========================================================== */
/* #4 A JUMPED-TO HEADING MUST CLEAR THE PINNED STRIP.
There was no scroll-margin anywhere in the sheet, so every in-page jump put the heading underneath the
sticky sub-nav. One property on the scroll targets covers every tab. */
section,[id^="t-"],[id^="sec-"],.seghead{
scroll-margin-top:calc(var(--hdr-h,56px) + var(--subnav-h,46px) + 12px)}
/* #6 THE ACTIVE-TAB INDICATOR BELONGS INSIDE THE TAB BAR.
It was drawing outside the bar's box, which is the short amber line floating above the left edge. */
.botnav{overflow:hidden}
/* #7 THE FAB WAS PAINTING ON THE ROW ABOVE IT.
0 16px 36px -10px rgba(255,207,77,.55) is a 36px amber glow with nothing clipping it — that is the
"random shadow near the MLB chip". A raised button needs elevation, not a light source. */
.fab{box-shadow:0 6px 16px -4px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07) !important}
/* #14 ONE ACCENT COLOUR. This blue appeared nowhere else except the footer's legal links. */
.obk-change{color:var(--gold)}
/* #16 MATCHUPS GET TWO LINES instead of clipping at 60% width with empty space to the right. */
.gname,.gt-a,.gt-h{overflow:hidden;text-overflow:ellipsis}
.gt-a,.gt-h{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;
word-break:break-word}
/* #18 THE ATTRIBUTION IS A LICENCE CONDITION, so it stays. What was wrong is that it sat at full strength
above muted italic copy, inverting the hierarchy. Caption weight, still legible, still present. */
.pmr-attrib{font-size:11.5px;line-height:1.5;color:var(--mut);opacity:.9;margin-top:8px}
/* #19 CONTRAST. --mut was #79819b, which measures under 4.5:1 on the darkest surface in the app.
Lifted to a value that clears AA for normal text; see the computation in the edit script. */
:root{--mut:#9aa1b8}
/* #23 ONE ACCORDION MARKER. The game and sub-category rows used a literal triangle character, which
renders differently on every platform and rotates badly. The glyph is left in the markup (104 sites, not
worth a migration) and simply not painted; the same drawn chevron the rest of the product uses replaces
it, and it rotates on open. */
.chev{font-size:0 !important;width:8px;height:8px;position:relative;flex:none;
transition:transform .15s ease}
.chev::after{content:'';position:absolute;left:0;top:1px;width:6px;height:6px;
border-right:1.6px solid var(--mut);border-bottom:1.6px solid var(--mut);
transform:rotate(-45deg)}
details[open]>summary>.chev{transform:rotate(90deg)}
/* #23b THE WHOLE HEADER ROW IS THE TAP TARGET, at the 44px the review asks for. */
.gamehdr,.subhdr{min-height:44px}
/* #26 THREE BALANCE PILLS, ONE SHAPE. The coin pill had a border and a glow, the gem pill did not, and the
ticket pill was a different height again — all three sitting next to each other in the header. */
.dw-bal,.tdaybtn{
display:inline-flex;align-items:center;gap:6px;
height:30px;padding:0 11px;border-radius:999px;
font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
box-shadow:none}
.dw-coin{color:var(--gold-hi);border-color:rgba(255,207,106,.34);background:rgba(255,207,106,.10)}
.dw-dia{color:var(--info);border-color:rgba(var(--info-rgb),.32);background:rgba(var(--info-rgb),.10)}
.tdaybtn{color:var(--txt)}
.dw-bal .cn-ic,.dw-bal .dw-ico,.tdaybtn img{width:15px;height:15px;flex:none}
/* ---- ODDS BOARD CELLS CAN SHRINK ------------------------------------------------------------------------
.og-row already declares minmax(0,1fr) on the three price columns, which is the half of this that stops
the TRACK from refusing to shrink. The other half was never done: a grid ITEM also defaults to
min-width:auto, so each cell still refused to go below its own content width and pushed the money column
past the right edge on a narrow screen. Both halves are needed -- fixing the track alone is why this
looked fixed and was not.
The book tag ellipsises rather than truncating mid-glyph, so "FanDuel" degrades legibly. */
.ocell,.og-row>*{min-width:0}
.ocell{overflow:hidden;text-overflow:ellipsis}
.ocell .bk,.ocell .booktag,.ocell small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:420px){
/* At this width three price columns and a matchup do not coexist; the matchup gives up its minimum
first because it is the one that can wrap onto a second line without losing meaning. */
.og-row{grid-template-columns:minmax(64px,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:4px}
.ocell{font-size:12px}
}
/* ---- CHIP COUNTS ARE A BADGE, NOT A NUMBER GLUED TO A WORD ----------------------------------------------
`.cnt` had NO rule anywhere in the sheet, so "MLB 7" and "Spain Segunda Division 1" rendered the count at
the same size and colour as the label with a single literal space holding them apart -- at 12px on a
phone that reads as "MLB7". The Zoo already solved this with .zct; the two are unified here so a count
looks the same everywhere it appears, which is what the review asked for.
font-variant-numeric:tabular so a chip does not change width when its count ticks 9 -> 10. */
.cnt,.zct{
display:inline-flex;align-items:center;justify-content:center;
margin-left:7px;padding:1px 6px;min-width:18px;
font-size:11.5px;font-weight:800;line-height:1.5;
font-variant-numeric:tabular-nums;
color:var(--mut);background:rgba(255,255,255,.08);
border-radius:6px;opacity:.9}
.chip.on .cnt,.zchip.on .zct{background:rgba(0,0,0,.22);color:inherit;opacity:.85}
body.theme-light .cnt,body.theme-light .zct{background:rgba(20,30,70,.09)}
/* ---- THE FILTER ROW STOPS RUNNING OFF THE SCREEN --------------------------------------------------------
The bot filter carries an inline style='width:210px', which beats any stylesheet rule that is not
!important. 210px + gap + the "High consensus" chip does not fit beside itself on a 390pt phone, so the
chip was pushed to the edge and clipped mid-word. On a phone the select takes its own full-width line,
which is what a 210px control wants to be at that width anyway.
min-width:0 on the children because a flex item defaults to min-width:auto and refuses to shrink below
its content -- the single most common cause of a row overflowing rather than wrapping. */
.bets-ctrl{width:100%}
.bets-ctrl>*{min-width:0;max-width:100%}
.bets-cons{white-space:nowrap}
@media(max-width:560px){
#bets-bot{width:100% !important;flex:1 1 100%}
}
/* A SELECT SHOULD LOOK LIKE A SELECT. It was rendering as a plain text field, so nothing said it could be
opened. Chevron is an inline data URI -- no extra request, and the CSP blocks external ones anyway. */
select.tinput{
appearance:none;-webkit-appearance:none;
padding-right:30px;cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238aa2b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 9px center;background-size:14px}
select.tinput:hover{border-color:rgba(var(--gold-rgb),.45)}
/* ---- THE PHONE NAV WAS HIDDEN AND THEN SILENTLY PUT BACK ------------------------------------------------
@media(max-width:768px){.nav{display:none}} exists and is correct. Further down the sheet sits
`.bar>div:has(> .navg){display:inline-flex; border:...}` — which is THE SAME ELEMENT reached by a more
specific selector, declared later, outside any media query. So it won on every phone and the duplicate
nav came back, wearing a border: five destinations in the header and the identical five in the bottom
tab bar, ~700px apart on the same screen. When it wrapped, the container's border drew around the empty
grid track too, which is the "broken 4+1 grid" in the review.
The bottom tab bar IS the phone navigation. Both selectors are hidden together here, after the rule that
was overriding them, so a future reader cannot fix one and miss the other.
On desktop it stays a single row that scrolls rather than wrapping — a bordered container must never be
allowed to wrap, because the border then outlines space with nothing in it. */
@media(max-width:768px){
.nav,.bar>div:has(> .navg){display:none !important}
}
.nav,.bar>div:has(> .navg){flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar,.bar>div:has(> .navg)::-webkit-scrollbar{display:none}
/* ---- THE PRACTICE SCOREBOARD ------------------------------------------------------------------------------
A board, not a card: darker than the page rather than lighter, a gold rim, and a faint scanline so it
reads as a lit panel. Digits are tabular and monospaced so a number changing does not reflow the cell it
sits in -- the single most important property of a scoreboard is that it holds still. */
.sb{position:relative;overflow:hidden;border-radius:18px;padding:14px 14px 12px;margin:0 0 10px;
background:linear-gradient(180deg,#0a0d18,#0d1120);
border:1px solid rgba(var(--gold-rgb),.30);
box-shadow:inset 0 1px 0 rgba(var(--gold-rgb),.10), 0 18px 40px -30px rgba(0,0,0,.9)}
.sb::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:18px;
background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px)}
.sb-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.sb-name{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.sb-open{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--mut)}
.sb-dot{width:6px;height:6px;border-radius:50%;background:var(--bad);display:inline-block}
.sb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.07);
border-radius:12px;overflow:hidden}
.sb-cell{background:#0b0f1c;padding:10px 11px;display:flex;flex-direction:column;gap:3px;min-width:0}
.sb-cell i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:var(--mut);display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden}
.sb-cell i svg{width:11px;height:11px;flex:none}
.sb-cell b{font:800 22px/1.05 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-variant-numeric:tabular-nums;letter-spacing:-.01em;
text-shadow:0 0 14px rgba(var(--gold-rgb),.22);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-cell b.pos{color:var(--good);text-shadow:0 0 14px rgba(var(--good-rgb),.30)}
.sb-cell b.neg{color:var(--bad);text-shadow:0 0 14px rgba(var(--bad-rgb),.30)}
.sb-cell s{text-decoration:none;font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;display:flex;gap:3px;align-items:center}
.sb-p{font-style:normal;font-weight:800;font-size:11px;width:13px;height:13px;border-radius:3px;
display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06)}
.sb-p.pos{color:var(--good)}.sb-p.neg{color:var(--bad)}
@media(max-width:640px){
/* Two by two rather than four across: four cells on a 375px screen gives each one 84px, and a six-figure
bankroll does not fit in 84px without ellipsising the number that matters most. */
.sb-grid{grid-template-columns:1fr 1fr}
.sb-cell b{font-size:19px}
}
/* ---- GAME TILES ------------------------------------------------------------------------------------------- */
.sb-games{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:9px;margin-bottom:10px}
.sbg{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;cursor:pointer;
padding:13px 13px 12px;border-radius:15px;color:var(--txt);
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
border:1px solid rgba(255,255,255,.11);transition:border-color .13s,transform .1s,background .13s}
.sbg:hover{border-color:rgba(var(--gold-rgb),.5);background:linear-gradient(180deg,rgba(var(--gold-rgb),.10),rgba(255,255,255,.03))}
.sbg:active{transform:scale(.985)}
.sbg-ic{font-size:22px;line-height:1}
.sbg b{font-size:14px;font-weight:800}
.sbg small{font-size:11px;line-height:1.4;color:var(--mut)}
.sbg-go{margin-top:6px;font-size:11.5px;font-weight:800;letter-spacing:.04em;padding:5px 13px;border-radius:999px;
background:var(--gold);color:var(--gold-bg)}
.sbg-soon{opacity:.72}
.sbg-soon .sbg-go{background:rgba(255,255,255,.09);color:var(--mut)}
.sbg-soon:hover{border-color:rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022))}
body.theme-light .sb{background:linear-gradient(180deg,#12172a,#171d33)}
body.theme-light .sb-cell{background:#131829}
body.theme-light .sb-cell b{color:#f3f6ff}
body.theme-light .sb-name{color:#ffd166}
body.theme-light .sbg{background:linear-gradient(180deg,rgba(20,30,70,.05),rgba(20,30,70,.02));
border-color:rgba(20,30,70,.12)}
@media(prefers-reduced-motion:reduce){.sbg:active{transform:none}}
/* ---- STICKERS + FADE ------------------------------------------------------------------------------------- */
.fd-st{width:30px;height:30px;vertical-align:-8px;margin:0 3px}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;max-height:46vh;overflow-y:auto}
.st-cell{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 5px;cursor:pointer;
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;
color:var(--mut);font:600 10px/1.2 inherit;transition:border-color .12s,background .12s}
.st-cell:hover{border-color:rgba(var(--gold-rgb),.45);background:rgba(255,255,255,.06);color:var(--txt)}
.st-cell img{width:40px;height:40px}
.st-cell span{text-align:center}
/* A fade is a position, so it gets its own colour rather than the danger red a dislike would take. */
.fd-fade.on{color:var(--info)}
.fd-fade.on .ti{stroke:var(--info)}
.fd-like.on{color:var(--bad)}
body.theme-light .st-cell{background:rgba(20,30,70,.03);border-color:rgba(20,30,70,.09)}
/* ---- A DAY'S BETS, GROUPED BY LEAGUE --------------------------------------------------------------------- */
.pf-lgrp{margin:8px 0 0;border:1px solid rgba(255,255,255,.06);border-radius:11px;overflow:hidden;
background:rgba(255,255,255,.018)}
.pf-lgrph{display:flex;align-items:baseline;gap:9px;padding:7px 11px;
border-bottom:1px solid rgba(255,255,255,.055);font-variant-numeric:tabular-nums}
.pf-lgn{flex:1;min-width:0;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-lgm{font-size:11px;color:var(--mut);font-weight:700}
.pf-lgu{font-size:12px;font-weight:800}
body.theme-light .pf-lgrp{background:rgba(20,30,70,.02);border-color:rgba(20,30,70,.08)}
body.theme-light .pf-lgrph{border-bottom-color:rgba(20,30,70,.07)}
/* ---- THE COMPOSER AS AN INVITATION ----------------------------------------------------------------------- */
.fd-comp-invite{align-items:flex-start}
.fd-comp-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.fd-comp-hints{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fd-comp-hints span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
color:var(--mut);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
border-radius:999px;padding:3px 9px}
.fd-comp-hints .ti{width:13px;height:13px}
.fd-comp-priv{background:none !important;border-color:transparent !important;font-weight:600 !important;
opacity:.75}
body.theme-light .fd-comp-hints span{background:rgba(20,30,70,.035);border-color:rgba(20,30,70,.09)}
/* ---- FLOATS NEVER SIT ON CONTENT, AND NEVER ON THE HELPLINE ---------------------------------------------
External review found the FAB covering the 1-800-GAMBLER line. That is a compliance problem rather than a
polish one: the responsible-gambling line has to be readable on every screen it appears on.
The two floats stack vertically instead of sitting side by side, and the footer reserves enough room
underneath that neither can ever land on it. */
.askbubble{bottom:calc(96px + env(safe-area-inset-bottom)) !important;right:18px !important}
footer.sitefoot{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
@media(max-width:768px){
/* The bottom tab bar is also in play on a phone, so the stack starts above it. */
.fab{bottom:calc(86px + env(safe-area-inset-bottom)) !important}
.askbubble{bottom:calc(152px + env(safe-area-inset-bottom)) !important}
footer.sitefoot{padding-bottom:calc(168px + env(safe-area-inset-bottom))}
}
/* ---- FEED: people, then bots ---------------------------------------------------------------------------- */
.fd-who{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.fd-band{margin:16px 0 8px;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
color:var(--mut);display:flex;align-items:baseline;gap:7px}
.fd-band .mut{font-size:11.5px;letter-spacing:.02em;text-transform:none;font-weight:600}
.fd-empty{padding:22px 16px;text-align:center;font-size:12.5px;color:var(--mut);
border:1px dashed var(--line);border-radius:12px;margin:8px 0}
/* ---- THE ZOO AS A SHOWCASE -------------------------------------------------------------------------------
The avatar is the point of a zoo, so it leads at 56px instead of 30. Under it the lifetime curve, then the
three windows, then the numbers. Everything here was already in the /zoo payload and simply was not drawn. */
.zoo-card.zshow{display:flex;flex-direction:column;gap:9px}
.zshow .zoo-top{display:flex;align-items:center;gap:11px}
.zshow .zav{flex:none;width:56px;height:56px;border-radius:16px;overflow:hidden;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
display:flex;align-items:center;justify-content:center}
.zshow .zav .zoo-ava{width:100%;height:100%;object-fit:cover;border-radius:0;margin:0;
display:flex;align-items:center;justify-content:center;font-size:26px;background:none}
.zshow .zoo-nm{font-size:14.5px;font-weight:800;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.zshow .zoo-method{margin-top:2px}
/* THE CURVE. preserveAspectRatio:none stretches the path to the card width, which is why every stroke below
carries vector-effect:non-scaling-stroke -- without it the line thins horizontally and thickens
vertically as the card resizes, and a 300-card grid shows every width at once. */
.zsp-wrap{position:relative;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.06);
border-radius:10px;padding:7px 9px 5px}
.zsp{display:block;width:100%;height:34px}
.zsp-cap{display:block;margin-top:3px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
color:var(--mut);opacity:.8}
/* 7d / 30d / LIFE. Equal columns so the eye compares straight across three cards, not three layouts. */
.zwins{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.zwc{display:flex;flex-direction:column;gap:1px;padding:6px 8px;border-radius:9px;
background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.055);
font-variant-numeric:tabular-nums}
.zwc i{font-style:normal;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.zwc b{font-size:13.5px;font-weight:800}
.zwc s{text-decoration:none;font-size:11.5px;color:var(--mut)}
body.theme-light .zsp-wrap,body.theme-light .zwc{background:rgba(20,30,70,.028);border-color:rgba(20,30,70,.08)}
body.theme-light .zshow .zav{background:rgba(20,30,70,.04);border-color:rgba(20,30,70,.10)}
@media(max-width:560px){
.zshow .zav{width:46px;height:46px;border-radius:13px}
.zshow .zav .zoo-ava{font-size:21px}
.zwc b{font-size:12.5px}
.zsp{height:30px}
}
/* ---- THE BOARD AS NESTED BUBBLES ------------------------------------------------------------------------
.sport had been flattened to nothing (border:0, background:none, border-radius:0, all !important) while
.gamegrp inside it carried a full surface -- so the child read as more of a container than its parent,
and the board became one undifferentiated column with no sense of which league you were looking at.
The sport is the sheet and the market is the tile inside it, same idiom as .au-sheet: translucent white,
hairline, generous radius; the market smaller and fainter so the nesting reads without a label.
!important throughout because the rules being overridden use it. */
.sport{
background:rgba(255,255,255,.045) !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:16px !important;
padding:5px !important;
margin:0 0 10px !important;
overflow:hidden !important}
.gamegrp{
background:rgba(255,255,255,.028) !important;
border:1px solid rgba(255,255,255,.07) !important;
border-radius:11px !important;
margin:4px !important}
/* An open market BRIGHTENS rather than changing shape or size, so opening one does not reflow the group
around it and lose your place. */
.gamegrp[open]{
background:rgba(255,255,255,.055) !important;
border-color:rgba(255,255,255,.13) !important}
.gamegrp>.gamehdr{border-radius:10px !important}
/* The sub-category strip is a divider inside a tile, not another box. */
.subcat{border:0 !important;background:none !important;border-radius:0 !important}
body.theme-light .sport{
background:rgba(20,30,70,.030) !important;border-color:rgba(20,30,70,.10) !important}
body.theme-light .gamegrp{
background:rgba(20,30,70,.022) !important;border-color:rgba(20,30,70,.08) !important}
body.theme-light .gamegrp[open]{
background:rgba(20,30,70,.045) !important;border-color:rgba(20,30,70,.13) !important}
/* ==========================================================================================================
EVERY EDGE FADE, GONE. APPENDED LAST ON PURPOSE.
==========================================================================================================
Two findings, and the second explains why the first kept coming back.
1. The both-sides fade Austin has reported three times is NOT the mask I added this morning. It is
`.subnav-in, .filters, .jumpbar, .spbar, .shopbar { mask-image: linear-gradient(90deg, transparent 0,
#000 14px, #000 calc(100% - 14px), transparent) }` -- an older rule that fades BOTH ends of the row.
That is why removing my right-edge mask only half-fixed it: I was removing the wrong one.
2. Every CSS block appended today was inserted immediately after `CSS += GROUPED_CSS`, which means each
new block landed BEFORE the previously appended ones. Newer rules have been losing to older ones all
day, silently. That is how my own mask survived my own removal of it, twenty minutes ago.
This block is appended after the LAST existing block instead, so it genuinely wins.
A fade at the edge of a control row reads as damage, not as an affordance. The rows wrap now, so there is
nothing off-screen for an affordance to point at. */
.subnav-in,.filters,.jumpbar,.spbar,.shopbar,.chiprow,
.zoo-chiprow,.zoo-catrow,.zoo-sportrow,.zoo-sortrow,
.oddschips,.bqst,.subnav,.evtabs,.spp-fam,.setseg,.setfmt{
-webkit-mask-image:none !important;
mask-image:none !important;
flex-wrap:wrap !important;
overflow-x:visible !important;
row-gap:6px}
.subnav,.subnav-in{justify-content:center}
/* ==========================================================================================================
THE TOP OF THE PAGE, COMPACTED. Appended last so it actually applies.
==========================================================================================================
Measured before touching anything: .bar carried 9px of padding top and bottom around a 34px logo, .navg
another 8px above and below its label, and the sub-nav its own padding on top of that. Three stacked
bands each paying for their own breathing room, so ~130px of chrome sat above the first line of content
on desktop and the phone lost a third of a small screen before anything useful appeared.
Austin's word for it is negative space and that is exactly right: none of that height carries
information. The logo does not need 9px of air when it is already 34px tall, and a nav label does not
need 16px of vertical padding to be tappable when the row itself is 40px.
The 44px touch target is NOT sacrificed - it is expressed as min-height on the row rather than as padding
around the text, which is the same finger target in less space. That distinction is the whole trick here.
Desktop and phone both, because Austin reported the dead space on both. */
.bar{padding:5px 14px !important;gap:8px;min-height:46px}
header{border-bottom:1px solid var(--line)}
/* The nav row: label padding down, row height held. */
.nav{margin-top:0 !important}
.navg{padding:6px 14px !important;min-height:34px;display:inline-flex;align-items:center}
.bar>div:has(> .navg){margin-top:2px}
/* The sub-nav was paying for a third band of padding under the first two. */
.subnav{padding:5px 0 !important;min-height:38px}
.subtab,.subnav a,.subnav span{padding-top:5px !important;padding-bottom:5px !important}
/* Section headings then added their own gap immediately below all of that. */
.seghead{padding-top:4px !important;margin-bottom:8px}
@media(max-width:768px){
/* No nav row on a phone (the bottom bar is the navigation), so the header is a single band and can be
tighter still. The 44px target lives on the controls inside it, not on the bar. */
.bar{padding:4px 10px !important;min-height:44px}
.subnav{padding:4px 0 !important;min-height:36px}
.seghead{padding-top:2px !important;margin-bottom:6px}
.logo{margin-right:6px}
}
/* ---- THE FILTER ROW IS A FILTER, NOT A WALL -------------------------------------------------------------
60+ leagues wrapped to twelve rows of chips above the content. Ten are shown, ordered with the leagues
people actually filter to first; the rest are behind one tap that says how many there are. */
.filters.sp-collapsed .sp-x{display:none}
.sp-toggle{cursor:pointer;font-family:inherit;color:var(--gold);
border-color:rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.07)}
.sp-toggle:hover{background:rgba(var(--gold-rgb),.14)}
/* THE ACTIVE CHIP IS SOLID. `.chip .cnt{opacity:.6}` outranks the plain `.cnt` rule on specificity, so the
count sat at 60% inside a filled gold chip and read as washed out - which is what "the yellow tab looks
faded" was. Nothing translucent survives on the selected state. */
.chip.on{background:var(--gold) !important;color:var(--gold-bg) !important;border-color:var(--gold) !important;
font-weight:800}
.chip.on .cnt{background:rgba(0,0,0,.24) !important;color:var(--gold-bg) !important;opacity:1 !important}
.chip .cnt{opacity:1}
body.theme-light .chip.on{color:#1a1200 !important}
/* Small, always visible, never behind a disclosure - it is a legal notice, not an explanation. */
.foot-juris{max-width:74ch;margin:8px auto 0;font-size:11.5px;line-height:1.55;color:var(--mut);
text-align:center}
.foot-juris b{color:var(--txt);font-weight:700}
/* The second filter row folds the same way as the league row: search and the four statuses stay, the
eleven narrower chips are one tap away. ~75 buttons above the first bet was the actual complaint. */
.filters.flt-collapsed .flt-x{display:none}
.flt-toggle{cursor:pointer;font-family:inherit;color:var(--gold);
border-color:rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.07)}
.flt-toggle:hover{background:rgba(var(--gold-rgb),.14)}
/* ==========================================================================================================
THE HEADER, MADE ONE THING. Appended last.
==========================================================================================================
Three times now the note has been that the top feels thrown together, and three times I trimmed padding,
which was answering the wrong question. The problem is not height, it is that the row is five unrelated
objects: a 34px logo, a bordered-and-tinted coin pill, an untinted gem pill, a ticket button of a third
height, a round avatar with a badge, and a bare gear icon. Six shapes, six sizes, no shared rule --
which is exactly what "thrown together" describes, and no amount of tightening fixes it.
So every control in the bar is now ONE shape: 30px tall, same radius, same border weight, same gap. The
only thing allowed to differ is colour, because colour is carrying meaning (gold = coins, cyan = gems).
ON A PHONE the row also gets shorter by removing what is duplicated elsewhere rather than by shrinking
what stays: diamonds are a cosmetic currency that lives on Practice and the Shop, and nobody acts on the
number mid-session. Coins stay because a practice balance is the one figure people glance at. */
header .bar{display:flex;align-items:center;gap:8px}
/* ONE SHAPE FOR EVERYTHING IN THE BAR. */
.bar .dw-bal,
.bar .tdaybtn,
.bar .hdr-gear,
.bar .who .who-me{
height:30px;min-height:30px;
border-radius:999px;
display:inline-flex;align-items:center;justify-content:center;
padding:0 10px;
font-size:12.5px;font-weight:700;line-height:1;
border:1px solid rgba(255,255,255,.13);
background:rgba(255,255,255,.05);
box-shadow:none}
.bar .hdr-gear{width:30px;padding:0}
.bar .dw-coin{color:var(--gold-hi);border-color:rgba(255,207,106,.34);background:rgba(255,207,106,.10)}
.bar .dw-dia{color:var(--info);border-color:rgba(var(--info-rgb),.32);background:rgba(var(--info-rgb),.10)}
.bar .dw-bal svg,.bar .dw-bal .dw-ico{width:14px;height:14px;flex:none}
.bar .who .who-avwrap,.bar .who img{width:22px;height:22px;border-radius:50%}
@media(max-width:768px){
/* Fewer objects, not smaller ones. */
.bar .dw-dia{display:none !important}
.bar{min-height:48px;padding:5px 10px !important;gap:7px}
.logo{margin-right:4px}
/* The notification badge sits ON the avatar rather than between two controls. */
.who .who-me{position:relative}
}
/* ==========================================================================================================
EVERY EDGE FADE, ENUMERATED AND KILLED. Appended last.
==========================================================================================================
I removed these three times by naming selectors from memory and missed some every time, which is why the
fade kept reappearing on "a few tabs". This list came from parsing the built stylesheet for every
mask-image rule instead of guessing:
.subnav-in both-sided 90deg fade
.subnav-in,.filters,.jumpbar,.spbar,.shoptabrow,.oddsbar both-sided 90deg fade
.evbody VERTICAL 180deg fade, top and bottom
.spbar,.zoo-chiprow,.oddschips,.bqst my right-edge fade
.subnav my right-edge fade
My previous kill-list said `.shopbar`; the real class is `.shoptabrow`. It never covered `.oddsbar` or
`.evbody` at all. That is the Shop, the Odds Board and the event panels - exactly the tabs still showing
it.
.reel-window KEEPS its mask deliberately: that is the spin wheel, where the fade is the effect rather
than an accident.
Rows wrap now, so nothing is off-screen for a fade to hint at. */
.subnav-in,.subnav,.filters,.jumpbar,.spbar,.shoptabrow,.shopbar,.oddsbar,.evbody,
.chiprow,.zoo-chiprow,.zoo-catrow,.zoo-sportrow,.zoo-sortrow,
.oddschips,.bqst,.evtabs,.spp-fam,.setseg,.setfmt,.calfilter{
-webkit-mask-image:none !important;
mask-image:none !important}
/* The horizontal ones also wrap, so nothing is hidden rather than merely un-hinted. */
.subnav-in,.subnav,.filters,.jumpbar,.spbar,.shoptabrow,.shopbar,.oddsbar,
.chiprow,.zoo-chiprow,.zoo-catrow,.zoo-sportrow,.zoo-sortrow,
.oddschips,.bqst,.evtabs,.calfilter{
flex-wrap:wrap !important;overflow-x:visible !important;row-gap:6px}
/* The bet-type group became a , so it needs the same summary treatment as every other group:
no default marker, a chevron that turns, whole header as the tap target. */
.cbt-grp>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:40px}
.cbt-grp>summary::-webkit-details-marker{display:none}
.cbt-grp>summary::after{content:'';margin-left:auto;width:7px;height:7px;flex:none;
border-right:1.6px solid var(--mut);border-bottom:1.6px solid var(--mut);
transform:rotate(45deg) translateY(-2px);transition:transform .15s ease}
.cbt-grp[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.cald-sport>summary{min-height:44px}
/* ==========================================================================================================
THE DISSOLVE, FINISHED
----------------------------------------------------------------------------------------------------------
The scroll-focus curve writes --f per element: 1 at the centre of the screen, 0 at the edges. One of the
two rule sets that carries it already had its blur killed. This one did not, and `.gamegrp` is a game
group on Today's board -- which is why picks rendered blurred there and nowhere else. Four rounds of edge
masks could never have fixed it, because it was never an edge mask.
Blur is gone rather than reduced. It has been raised three times, and 0.9px of blur on a page whose
content is prices and records costs legibility to buy atmosphere.
The floor moves .84 -> .94 and the scale .89 -> .985 for a different reason: the observer measures
against the viewport, so anything inside a display:none section measures as off-screen and gets written
f=0. At .84 and .89 such an element looks broken. At .94 and .985 nobody can tell. midasRefocus() fixes
the cause; these numbers make the failure invisible on the occasions it still happens.
========================================================================================================== */
.zt-card,.zoo-card,.trackrow,.pick,.au-row,.au-sheet.au-hero,
.ip-game,.gamegrp,.pxg-game{
filter:none !important;
opacity:calc(.94 + .06 * var(--f,1)) !important;
transform:scale(calc(.985 + .015 * var(--f,1))) translateY(calc((1 - var(--f,1)) * 3px)) !important;
}
/* An open card is being read, not scrolled past. */
.gamegrp[open],.ip-game[open]{opacity:1 !important;transform:none !important}
@media (prefers-reduced-motion: reduce){
.zt-card,.zoo-card,.trackrow,.pick,.au-row,.au-sheet.au-hero,
.ip-game,.gamegrp,.pxg-game{opacity:1 !important;transform:none !important}
}
/* ==========================================================================================================
THE COLLAPSE CONTROL
Same shape everywhere it appears, because it is the same control everywhere it appears. Sized to the chip
rows it sits in so it reads as one of them rather than a button bolted on the end.
========================================================================================================== */
.cx-h{display:none !important}
.cx-btn{
flex:0 0 auto;cursor:pointer;font:inherit;font-size:12px;font-weight:700;
padding:6px 12px;border-radius:999px;
border:1px dashed var(--line);
background:transparent;color:var(--mut);
letter-spacing:.01em;white-space:nowrap;
min-height:32px;
}
.cx-btn:hover{color:var(--txt);border-color:rgba(var(--gold-rgb),.42);border-style:solid}
.cx-btn:focus-visible{outline:2px solid rgba(var(--gold-rgb),.55);outline-offset:2px}
/* In a stacked list the control is a full-width row, not a chip floating off the end of the last card. */
.ip-list>.cx-btn{display:block;width:100%;margin-top:8px;text-align:center}
@media(max-width:640px){.cx-btn{font-size:11.5px;padding:6px 10px}}
/* ---- SIGN-IN THAT IS OFF, RATHER THAN ABSENT ---------------------------------------------------------------
Muted, not red. The visitor can still sign in with a username; only one OPTION is missing, and a red box
would report a broken site to somebody whose next action works fine. */
.ck-off{font-size:12px;line-height:1.6;color:var(--mut);background:rgba(255,255,255,.025);
border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 12px;text-align:left}
/* ---- FOLLOW @TrackMidas ------------------------------------------------------------------------------------
Footer: one line, same weight as the links beside it. It is an invitation, not an announcement. */
.foot-social{font-size:var(--fs-1);color:var(--mut);line-height:1.7;margin:0 0 6px}
.foot-social a{color:var(--gold,var(--gold));text-decoration:none;font-weight:700}
.foot-social a:hover{text-decoration:underline}
/* Feed card: sits with the other feed notes, and can be dismissed for good. A promo you cannot turn off is an
advertisement inside a product somebody is paying for. */
.fd-xcard{display:flex;align-items:center;gap:10px}
.fd-xi{flex:0 0 auto;font-size:15px;font-weight:800;line-height:1;color:var(--txt);
width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;
background:rgba(255,255,255,.03)}
.fd-xt{flex:1;min-width:0}
.fd-xcard a{color:var(--gold,var(--gold));font-weight:700;text-decoration:none;white-space:nowrap}
.fd-xcard a:hover{text-decoration:underline}
.fd-xx{flex:0 0 auto;cursor:pointer;background:transparent;border:0;color:var(--mut);
font-size:17px;line-height:1;padding:4px 6px;border-radius:6px;font-family:inherit}
.fd-xx:hover{color:var(--txt);background:rgba(255,255,255,.06)}
/* ---- FREE-TIER PREVIEW BANNER ------------------------------------------------------------------------------
Bottom, not top: the header is already the most contested 100px on the page, and this is a mode indicator
rather than an alert. Above the tab bar so it never covers navigation. */
#freebar{position:fixed;left:0;right:0;bottom:0;z-index:880;
display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
padding:11px 16px calc(11px + env(safe-area-inset-bottom));
background:rgba(var(--gold-rgb),.10);border-top:1px solid rgba(var(--gold-rgb),.35);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
font-size:12px;line-height:1.55;color:var(--txt)}
#freebar b{color:var(--gold,var(--gold));font-weight:800;white-space:nowrap}
#freebar .fb-s{flex:1;min-width:200px;color:var(--mut)}
#freebar .fb-x{flex:0 0 auto;color:var(--txt);font-weight:700;text-decoration:none;
border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:rgba(0,0,0,.25)}
#freebar .fb-x:hover{border-color:rgba(var(--gold-rgb),.5)}
/* Clear the banner AND the tab bar, so the last row of content is never trapped underneath both. */
body.has-freebar{padding-bottom:96px}
@media(max-width:640px){
#freebar{bottom:calc(56px + env(safe-area-inset-bottom));padding-bottom:11px}
body.has-freebar{padding-bottom:150px}
}
/* ---- A GATED FEATURE, STATED PLAINLY ----------------------------------------------------------------------
Not a blur, not a teaser with the numbers half-visible behind a gradient. Those are the pattern people have
learned to resent, and on a product whose whole claim is honesty, obscuring real numbers to sell access to
them is the wrong instinct twice over. Say what it is, say what is still free, offer the upgrade once. */
.prolock{border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:10px 0 16px;
background:rgba(255,255,255,.022);max-width:62ch}
.pl-h{font-size:14px;font-weight:800;color:var(--txt);margin-bottom:7px}
.pl-b{font-size:12.5px;line-height:1.65;color:var(--mut);margin-bottom:10px}
.pl-free{font-size:11.5px;line-height:1.6;color:var(--mut);margin-bottom:13px;
padding-left:10px;border-left:2px solid rgba(var(--gold-rgb),.35)}
.pl-free b{color:var(--txt)}
body.theme-light .prolock{background:rgba(20,30,70,.025)}
/* The research cap note sits with the results it describes, not in a toast that disappears. */
.rc-cap{font-size:12px;line-height:1.6;color:var(--mut);margin:8px 0 2px;
padding:8px 11px;border:1px dashed var(--line);border-radius:9px}
.rc-cap a{color:var(--gold,var(--gold));font-weight:700;text-decoration:none}
.rc-cap a:hover{text-decoration:underline}
/* ---- THE FOUNDER OFFER -------------------------------------------------------------------------------------
The layout Austin specified and the one the law wants are the same layout: the price is the biggest thing,
the full terms sit immediately under it in smaller type behind an asterisk, and they are ALWAYS on screen.
What gets companies fined is not small text -- it is text you cannot read, or that only appears after you
have paid. So .fo-terms is smaller and quieter than the price and no smaller than 11.5px, with a real
contrast ratio against the panel. Do not shrink it further to win space. */
.foffer{border:1px solid rgba(var(--gold-rgb),.38);border-radius:16px;padding:20px 22px;margin:4px 0 16px;
background:radial-gradient(120% 140% at 0% 0%,rgba(var(--gold-rgb),.13),transparent 58%),rgba(255,255,255,.02);
max-width:60ch}
.fo-tag{font-family:var(--font-display);font-size:11.5px;font-weight:800;letter-spacing:.12em;
text-transform:uppercase;color:var(--gold,var(--gold));margin-bottom:10px}
.fo-price{font-family:var(--font-num,inherit);font-size:44px;line-height:1;font-weight:800;
letter-spacing:-.035em;color:var(--txt);font-variant-numeric:tabular-nums}
.fo-star{font-size:.5em;vertical-align:super;color:var(--gold,var(--gold));font-weight:700;margin-left:2px}
.fo-sub{font-size:14px;font-weight:600;color:var(--txt);margin-top:6px}
.fo-save{font-size:12.5px;color:var(--good,var(--good));font-weight:700;margin-top:4px}
.foffer .btn{margin-top:14px}
.fo-soon{font-size:11.5px;color:var(--mut);margin-top:7px;text-align:center}
.fo-terms{font-size:11.5px;line-height:1.65;color:var(--mut);margin-top:13px;
padding-top:11px;border-top:1px solid var(--line)}
.fo-terms .fo-star{font-size:1em;vertical-align:baseline;margin:0 2px 0 0}
.foffer.fo-c{padding:15px 16px}
.foffer.fo-c .fo-price{font-size:34px}
@media(max-width:640px){.fo-price{font-size:38px}.foffer{padding:17px 18px}}
body.theme-light .foffer{background:radial-gradient(120% 140% at 0% 0%,rgba(255,183,3,.16),transparent 58%),rgba(20,30,70,.02)}
/* ---- THE SIGN-IN SCREEN ------------------------------------------------------------------------------------
Every field had its placeholder doing the job of a label, so the label vanished the moment anyone typed.
Real labels, always visible. The left-aligned field block inside a centred panel is deliberate: headings and
reassurance read better centred, but a form you are filling in reads better aligned to where your eye
returns after each field. */
.lb-field{text-align:left;margin-bottom:13px}
.lb-field label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--mut);margin:0 0 5px 2px}
.loginbox .lb-field input{margin-bottom:0}
.lb-hint{font-size:11.5px;line-height:1.5;color:var(--mut);margin:5px 0 0 2px;opacity:.9}
.lb-sub{color:var(--mut);font-size:13px;line-height:1.55;margin-bottom:16px}
/* A failure should read as a hand on the shoulder, not a stack trace. Only takes up space when there is
something to say. */
.lb-err{color:var(--bad);font-size:12.5px;line-height:1.5;text-align:left;margin:2px 0 10px}
.lb-err:empty{display:none}
.lb-swap{margin-top:12px;font-size:13px;color:var(--mut)}
.lb-swap .li-swap{color:var(--gold,var(--gold));font-weight:700;cursor:pointer}
.lb-swap .li-swap:hover{text-decoration:underline}
/* The focus ring was the browser default on a dark panel, which is nearly invisible. */
.loginbox input:focus{outline:none;border-color:rgba(var(--gold-rgb),.55);
box-shadow:0 0 0 3px rgba(var(--gold-rgb),.13)}
.loginbox button:focus-visible{outline:2px solid rgba(var(--gold-rgb),.75);outline-offset:2px}
/* A leg still in progress is a THIRD state, not a quiet loss. It reads muted so a day in flight cannot be
mistaken for a day that finished flat. */
.b3d-row.p .b3d-res{color:var(--mut)}
.b3d-u.mut{color:var(--mut)}
.b3d-pend{color:var(--gold,var(--gold));font-weight:700}
/* The fixture on a market row: present but subordinate — you are scanning bets, and the game is the answer to
"which one is this" rather than something you read first. Own line so a long matchup cannot shove the price
off the end of the row. */
.bt3-g{display:block;font-size:11.5px;color:var(--mut);margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* ---- BEST 3: PERIODS + SUB-MARKETS -------------------------------------------------------------------------
The four periods sit side by side rather than behind a switcher, because the comparison IS the information:
a good week against a flat month says something neither number says alone. The tabs then re-filter only the
market table underneath. */
.b3depth{margin:12px 0 14px}
.b3p-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.b3p-tab{cursor:pointer;font:inherit;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;
border:1px solid var(--line);background:transparent;color:var(--mut)}
.b3p-tab.on{color:var(--txt);border-color:rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.09)}
.b3p-tab:hover{color:var(--txt)}
/* auto-fit, not repeat(4): the period list gained "This season" and a hard-coded column count wraps the
fifth card onto its own full-width row. This tracks however many periods _B3PERS carries. */
.b3p-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px;margin-bottom:14px}
.b3p-card{border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:rgba(255,255,255,.018)}
.b3p-card.on{border-color:rgba(var(--gold-rgb),.42);background:rgba(var(--gold-rgb),.05)}
.b3p-k{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.b3p-u{font-family:var(--font-num,inherit);font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:4px;
font-variant-numeric:tabular-nums}
.b3p-n{font-size:11.5px;color:var(--txt);margin-top:2px;font-variant-numeric:tabular-nums}
.b3p-n2{font-size:11.5px;color:var(--mut);margin-top:3px;line-height:1.4}
.b3p-mh{font-size:12px;font-weight:700;color:var(--txt);margin:0 0 7px}
.b3p-tbl{display:flex;flex-direction:column;gap:5px}
.b3p-row{display:grid;grid-template-columns:minmax(96px,1.4fr) minmax(46px,1fr) auto auto;
gap:9px;align-items:center;font-size:12px}
.b3p-mk{font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The bar is win RATE, not units — units already have a column, and a bar is the faster read for "how often". */
.b3p-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.b3p-bar i{display:block;height:100%;background:linear-gradient(90deg,rgba(var(--gold-rgb),.75),rgba(var(--gold-rgb),.4))}
.b3p-rec{font-size:11px;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.b3p-mu{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right;min-width:58px}
.b3p-empty,.b3p-note{font-size:11.5px;color:var(--mut);line-height:1.55;margin-top:9px}
.b3p-note{padding-top:8px;border-top:1px solid var(--line)}
@media(max-width:640px){
.b3p-grid{grid-template-columns:repeat(2,1fr)}
.b3p-u{font-size:17px}
.b3p-row{grid-template-columns:minmax(80px,1.3fr) auto auto;gap:7px}
.b3p-bar{display:none} /* the rate is already printed beside it; the bar is the first thing to go */
}
/* ==========================================================================================================
HEADER: ONE ROW, ONE SCALE
----------------------------------------------------------------------------------------------------------
Measured before this block: header 89px desktop / 48px mobile, and 160px total above the first heading on
desktop, 124-218px on a phone. On a 667px handset the fixed chrome was 28-42% of the screen.
The cause was never padding -- three separate passes trimmed padding and it kept "looking bad" -- it was
that `.bar{flex-wrap:wrap}` plus `.nav{flex-basis:100%;order:5}` put the five nav groups on their own
line. Neither was overridden anywhere in 7,600 lines. The groups need ~442px of a ~1052px row; they fit.
========================================================================================================== */
header .bar{flex-wrap:nowrap}
header .nav,
header .bar>div:has(> .navg){flex-basis:auto;order:0;margin-left:10px;min-width:0}
/* Width pressure resolves into the username's existing ellipsis instead of into a second row. */
header .who{min-width:0}
/* THE HEADER COLUMN NOW MATCHES THE CONTENT COLUMN.
The bar was capped at a fixed 1080px while .wrap moves 920 -> 1040 -> 1120, so the logo sat 44px left of
the first heading at 1000px and 16px RIGHT of it at 1600px. The offset changed sign, which is why the top
never looked settled at any width. */
header .bar{max-width:920px;padding-left:18px;padding-right:18px}
@media(min-width:1180px){header .bar{max-width:1040px}}
@media(min-width:1500px){header .bar{max-width:1120px}}
/* THE BRAND, SIZED IN CSS FOR THE FIRST TIME.
The mark was 25x34 from HTML attributes alone -- not one width/height rule for .logo existed in 581KB of
stylesheet -- which made it NARROWER THAN THE 30x30 GEAR beside it. Its aspect is 0.737, so height alone
cannot widen a narrow shield; the wordmark is what makes it read as a brand rather than a fifth chip.
This is the lockup the landing page (.lp-brand) has always used. */
.logo{height:32px;width:auto;display:block}
.hdr-word{font-family:var(--font-display,inherit);font-size:17px;font-weight:800;letter-spacing:.18em;
color:var(--gold,var(--gold));line-height:1;margin-left:9px;white-space:nowrap}
.homelink{display:inline-flex;align-items:center;text-decoration:none;flex:none}
@media(max-width:768px){
.logo{height:28px}
.hdr-word{font-size:15px;letter-spacing:.15em;margin-left:7px}
/* 28px mark + 10px padding = 38. 44 is honest; the old 48 carried 4px of pure air. */
header .bar{min-height:44px}
}
@media(max-width:380px){ .hdr-word{display:none} } /* at that width the row is the constraint, not the brand */
/* THE SUB-NAV SCROLLS RATHER THAN WRAPPING.
It needs >=433px intrinsic against a 430px phone, so forcing it to wrap cost 40px on every handset and
made navPaint()'s scrollIntoView a no-op. No mask comes back with it: the fade read as a shadow cutting
the tabs, twice, and that reading was correct. */
.subnav-in{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.subnav-in::-webkit-scrollbar{display:none}
.subnav-in>*{scroll-snap-align:center}
/* .seghead's mobile ramp was written twice (14px at 640, 13px at 430) and lost both times to a later
unconditional rule, so every heading rendered 16px with a 24px top margin down to 320px. Restated last. */
@media(max-width:768px){.seghead{font-size:14px;margin:14px 0 8px}}
@media(max-width:430px){.seghead{font-size:13px;margin:12px 0 7px}}
/* Bottom padding reserved 92px for 63px of bottom bar, and counted the safe-area inset twice. */
@media(max-width:768px){.wrap{padding-bottom:calc(70px + env(safe-area-inset-bottom))}}
/* ==========================================================================================================
PASS 2 — the things the audits found that are one rule each
========================================================================================================== */
/* --goldsoft IS USED SIX TIMES AND DEFINED NOWHERE.
An undefined var() with no fallback is invalid-at-computed-value-time, so `color` fell back to inherit and
three Props Edge signals silently lost their meaning: the MIDDLE data-freshness state (45-180 min old) drew
identical to normal text on a board whose own copy says "the edge decays fast -- race them", the "sharp
line moved DOWN" arrow was uncoloured while "up" was green, and the league tag was indistinguishable from
the book and time beside it. */
:root{--goldsoft:#e0b658}
body.theme-light{--goldsoft:#a9760d}
/* TAP TARGETS. Each of these is a real control that ended up under 44px because a later, more specific rule
beat the coarse-pointer floor. The project's own fix for this is an invisible ::after, which keeps the
visual size while restoring the real hit area -- these were simply missed. */
@media (pointer: coarse){
.cx-btn,.b3p-tab,.hdr-gear,.who .who-me,.tdaybtn,.calnav button,.pf-followbtn.sm{position:relative}
.cx-btn::after,.b3p-tab::after,.hdr-gear::after,.who .who-me::after,.tdaybtn::after,
.calnav button::after,.pf-followbtn.sm::after{
content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:max(100%,44px);height:max(100%,44px)}
.calnav button{min-width:44px}
}
/* THE COLLAPSE CONTROL SHOULD LOOK LIKE THE CHIPS IT SITS AMONG.
It was the only dashed, transparent, 999px control in rows of solid filled chips -- which reads as a
different kind of thing rather than as one more item in the row. */
.cx-btn{border-style:solid;background:rgba(255,255,255,.05);border-radius:16px}
.cx-btn:hover{background:rgba(var(--gold-rgb),.09)}
/* .obtn IS DEFINED TWICE BY TWO UNRELATED COMPONENTS — the odds-grid price button and the parlay builder's
pill. Equal specificity, so the parlay skin was winning on the board it was never written for, and hover
was a hybrid of both. The board's own grid is scoped here so it cannot lose again. */
.og-row .obtn{background:var(--surf2);border:1px solid var(--line);border-radius:10px;padding:5px 4px}
.og-row .obtn:hover{background:#22305a;border-color:#4a7bd0}
/* LIGHT THEME: EVERY INPUT IN THE APP WAS UNREADABLE.
The dark rule carries !important on background/border/colour, so the light-theme counterpart -- which has
higher specificity but no !important -- never applied. In light mode every text/search/number/password/
email input and every select rendered as a translucent-black box with an inset dark shadow. Matching
!important is the minimal correct fix; the alternative is unpicking !important from a rule 3,000 lines up.
input[type=date] is added because it was never in the original list and drew a different control beside
its own neighbours in the same form row. */
body.theme-light .tinput,body.theme-light .bq,
body.theme-light input[type=text],body.theme-light input[type=search],
body.theme-light input[type=number],body.theme-light input[type=password],
body.theme-light input[type=email],body.theme-light input[type=date],
body.theme-light textarea,body.theme-light select{
background:#ffffff !important;border:1px solid var(--line) !important;color:var(--txt) !important;
box-shadow:inset 0 1px 2px rgba(20,30,70,.06) !important}
input[type=date]{border-radius:var(--r1);background:rgba(0,0,0,.30);border:1px solid var(--line);color:var(--txt)}
/* NUMBERS IN A TABLE SHOULD LINE UP. .lbtable already sets tabular-nums and then left-aligns every cell, so
the tabular figures bought nothing anywhere except the two tables that right-align by hand. */
.lbtable td:not(:first-child),.lbtable th:not(:first-child),
.jtable td:not(:first-child),.jtable th:not(:first-child){text-align:right}
/* .jtable is the only table in the app with no scroll wrapper, inside .panel{overflow:hidden} — so anything
that did exceed the width was clipped and unreachable rather than scrollable. */
.jtable{display:block;overflow-x:auto;white-space:nowrap}
/* THE FOOTER LINKS ARE THE REGULATORY ONES and were ~20px targets in an app that enforces 44px everywhere
else. The convention already exists two lines away (.li-swap got min-height:40px); the footer was missed. */
.sitefoot .foot-rg a,.sitefoot .foot-attr a,.sitefoot .foot-social a{
display:inline-block;padding:9px 4px;line-height:24px}
@media (pointer: coarse){ .sitefoot .foot-rg a,.sitefoot .foot-attr a,.sitefoot .foot-social a{min-height:44px} }
/* .spvs is a 4-column grid wearing dividers written for a 2x2 one: cell 2 lost its right border and cells
1-2 carried a bottom border under a single row. */
.spvs .spv:nth-child(2){border-right:1px solid var(--line)}
.spvs .spv:nth-child(1),.spvs .spv:nth-child(2){border-bottom:0}
/* .rc-tbl has no CSS at all — the one table in the app rendering at browser defaults. */
.rc-tbl{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.rc-tbl th,.rc-tbl td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right}
.rc-tbl th:first-child,.rc-tbl td:first-child{text-align:left}
.rc-stat th{background:var(--surf)}
body.theme-light .rc-stat th{background:#eef1fa;color:var(--txt)}
/* ==========================================================================================================
PASS 3 — the consistency findings, highest-impact first
========================================================================================================== */
/* --ink IS USED FOUR TIMES AND DEFINED NOWHERE — twice inside the sign-in overlay (.loginbox .ghost, .ck-hd).
An undefined var() with no fallback falls back to `inherit`, which currently lands near --txt BY ACCIDENT,
so it looks right until any ancestor colour changes. Defining it as the alias it was always meant to be. */
:root{--ink:var(--txt)}
/* .card AND .panel ARE THE TWO GENERIC CONTAINERS AND AGREE ON NOTHING — different background, border,
radius, shadow and padding, because an !important block landed on .panel 467 lines before the rule that
was supposed to own both. The stylesheet's own comment says "12px is the largest radius on any card";
.panel was rendering 16px. Same surface now. */
.panel{border-radius:var(--r-3) !important;padding:var(--s-4) var(--s-5) !important}
/* THE SIGN-IN CARD IS THE ONLY FULL-WIDTH SURFACE IN THE PRODUCT WITH A FLAT BACKGROUND AND NO ELEVATION.
Every tab behind it uses the translucent sheet + shadow, which is exactly why the overlay reads as
belonging to a different app. */
.loginbox,.so-card{
background:linear-gradient(180deg,var(--surf2),var(--surf));
border:1px solid var(--line);
border-radius:var(--r-3);
box-shadow:0 24px 60px -28px rgba(0,0,0,.85),var(--rim)}
/* The sign-in submit had no class, so it kept an older gold recipe: 135deg to #f59e0b, no border, 10px, no
shadow — while the app's primary CTA is 180deg to --gold2 with a gold rim and a glow. Two gold buttons,
and the one a new user meets first was the odd one. */
.loginbox button:not(.ghost){
background:linear-gradient(180deg,var(--gold),var(--gold2));
border:1px solid rgba(var(--gold-rgb),.55);
border-radius:var(--r-2);
color:#120d02;
box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 18px -8px rgba(var(--gold-rgb),.45)}
/* The login labels missed the app's canonical micro-label treatment by 0.5px and 0.02em, because they were
appended after the block that normalises every other label in the product. */
.lb-field label{font-size:var(--fs-1);letter-spacing:.06em}
/* --bad moved from #fb7185 to #ff6b81 when the palette was reset; rules that hardcoded the old value are
permanently a different red. The login error was one of them, and it stayed pink on white in light mode. */
.lb-err{color:var(--bad)}
/* The primary nav signals "selected" with a gold underline; the sub-nav directly beneath it was explicitly
given box-shadow:none !important and an outline instead. Two languages, one inch apart. */
.subtab.on{box-shadow:inset 0 -2px 0 var(--gold) !important}
/* LIGHT THEME HAS NO ELEVATION TOKENS AT ALL — only --e1 is ever defined, so every card carrying --e2 or
--e3 painted a 70%-black drop shadow onto a white page. And .zt-card / .pe-slip have no light background
override, so they kept a translucent-white sheet on white: invisible. */
body.theme-light{
--e1:0 1px 2px rgba(30,40,80,.06);
--e2:0 4px 16px -6px rgba(30,40,80,.14);
--e3:0 18px 44px -20px rgba(30,40,80,.22);
--rim:0 0 0 1px rgba(20,30,70,.05) inset}
body.theme-light .zt-card,body.theme-light .pe-slip,body.theme-light .loginbox,body.theme-light .so-card{
background:linear-gradient(180deg,#ffffff,#f5f7fd);border-color:var(--line)}
/* ==========================================================================================================
THE ZOO, AS A GALLERY
----------------------------------------------------------------------------------------------------------
.zoo-cat / .zoo-cat-h / .zoo-cat-sub have been in this stylesheet the whole time with ZERO uses in the
HTML — the grouped view existed once, and the one-line description of each division is still sitting in
ZCATS. Restated here so the division heading reads as a heading rather than as another chip.
========================================================================================================== */
.zoo-cat{margin:18px 0 11px}
.zoo-cat-h{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--txt)}
.zoo-cat-sub{font-size:12px;color:var(--mut);margin-top:3px;line-height:1.5;max-width:64ch}
/* .zoo-id is the flex sibling of a 56px avatar inside every card and had NO rule anywhere in the file, so a
long bot name had nothing to shrink against and pushed the card's own layout wide. */
.zoo-id{flex:1;min-width:0}
.zoo-nm{overflow-wrap:anywhere}
/* The narrow override dropped .zrow to four columns while _zRow still emits five children, so the activity
pill wrapped onto a second grid row into a 20px cell — and body{overflow-x:clip} cut it silently. */
@media(max-width:560px){
.zrow{grid-template-columns:20px 26px minmax(0,1fr) auto auto}
.zr-act:empty{display:none}
}
/* The card grid: wide enough that a card reads as a card, and never a single stretched column. */
.zoo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:11px}
@media(max-width:640px){.zoo-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}}
/* ---- THE WORDMARK MUST NOT CROWD THE WALLET (regression, same day it was added) ---------------------------
Adding "MIDAS" beside the mark was right on desktop and wrong on a phone: the bar is flex-wrap:nowrap now,
so an unshrinkable 15px word with .18em tracking simply pushed into the coin and gem chips instead of
wrapping. It was hidden only below 380px, and the phones that matter are 390-430px.
Below 900px the mark carries the brand on its own -- which is what shipped for months without complaint --
and the wallet keeps the room it needs. The brand block also stops shrinking, and the wallet is allowed
to, so any remaining pressure lands on the username ellipsis rather than on the logo. */
.brandrow{flex:none;flex-wrap:nowrap;min-width:0;align-items:center}
header .dwallet{flex-wrap:nowrap;min-width:0;flex-shrink:1}
header .dwallet .dw-bal{flex-shrink:0}
@media(max-width:900px){ .hdr-word{display:none} }
/* A filter that cannot match anything should look inert rather than blanking the board when tapped. */
.segbtn.seg-off{opacity:.4;pointer-events:none}
/* ---- PER-MARKET BEST-3 HISTORY -----------------------------------------------------------------------------
Three windows side by side, because the comparison is the information: a market can be up over 30 days and
flat this week, and neither number says that alone. */
.b3mh{margin:8px 0 4px}
.b3mh-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:8px}
.b3mh-c{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:rgba(255,255,255,.02)}
.b3mh-k{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.b3mh-u{font-family:var(--font-num,inherit);font-size:15px;font-weight:800;letter-spacing:-.02em;margin-top:3px;
font-variant-numeric:tabular-nums}
.b3mh-n{font-size:11.5px;color:var(--mut);margin-top:1px;font-variant-numeric:tabular-nums}
/* The denominator line: smaller and dimmer than the record it qualifies, because it is a caveat rather
than a competing headline -- but present on every window, including the winning ones. */
.b3mh-x{font-size:11px;color:var(--mut);opacity:.8;margin-top:2px;font-variant-numeric:tabular-nums}
/* STALENESS BANNER. Fixed to the bottom so it cannot be scrolled past -- the 'Generated' stamp it
replaces sits at the foot of a 10 MB page and was effectively invisible. Loud enough to be seen,
dismissible only by acting on it, and never covering the nav. */
.stalebar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:9000;max-width:min(92vw,640px);
background:var(--surf);border:1px solid rgba(var(--gold-rgb),.55);border-radius:12px;padding:11px 15px;
font-size:13px;line-height:1.5;color:var(--txt);box-shadow:0 8px 28px rgba(0,0,0,.45)}
.stalebar b{color:var(--gold)}
.stalebar button{margin-left:10px;background:var(--gold);color:#111;border:0;border-radius:8px;
padding:6px 13px;font-weight:800;font-size:12.5px;cursor:pointer}
/* THE DIVIDE. Picks are the content; the record is the research behind it. A labelled rule rather than a
gap, because the two halves make different claims and a reader should not have to infer which is which
from the dates on the rows. */
.b3sec{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:14px 0 7px;padding-top:11px;
border-top:1px solid var(--line)}
.b3sec:first-of-type{margin-top:6px;padding-top:0;border-top:0}
.b3sec-k{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--txt)}
.b3sec-m{font-size:11px;color:var(--mut)}
.b3sec-hist .b3sec-k{color:var(--mut)}
/* THE LIVE BLOCK. Today's picks are the only thing on a market card a reader can still act on, so they get
edges and everything else does not. Gold here is a BRAND frame on a container, never applied to a number
-- the colour-blind rule is about data encoding, and this encodes nothing. */
.b3live{border:1px solid rgba(255,209,102,.28);border-left:3px solid var(--gold);border-radius:10px;
padding:9px 11px 7px;margin:8px 0 2px;background:linear-gradient(180deg,rgba(255,209,102,.05),transparent 72%)}
.b3live-off{border-color:var(--line);border-left-color:var(--mut);background:none}
.b3live-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.b3live-k{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.b3live-off .b3live-k{color:var(--mut)}
.b3live-m{font-size:11px;color:var(--mut)}
.b3live-none{font-size:12px;color:var(--mut);line-height:1.5;padding:2px 0 4px}
/* ALSO QUALIFIED. Subordinate, not hidden: the eye should land on the three that are the claim, but a
published pick never leaves the card. A rule and a step down in weight, no colour change -- these rows
still carry results, and a result must read the same wherever it sits. */
.b3hm-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:9px 0 3px;padding-top:7px;
border-top:1px dashed var(--line)}
.b3hm-k{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.b3hm-m{font-size:11.5px;color:var(--mut);opacity:.85}
.b3mktr.hm{opacity:.72}
.b3mktr.hm .b3mktr-i{opacity:.6}
/* The graded unit result, beside the verdict. Tabular so a column of them lines up, and always signed so
the meaning survives with no colour vision at all. */
.b3mktr-u{font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:800;letter-spacing:.01em;
margin-left:7px;white-space:nowrap}
.b3mh-dup{font-size:11.5px;color:var(--mut);line-height:1.5;padding:5px 0 3px;font-style:italic}
/* The boundary between markets you can act on and markets that merely have a past. */
.b3tail{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:16px 0 6px;padding-top:12px;
border-top:1px solid var(--line)}
.b3tail-k{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.b3tail-m{font-size:11px;color:var(--mut);opacity:.8}
.b3mh-log{margin-top:4px}
.b3mh-log>summary{cursor:pointer;list-style:none;font-size:11.5px;color:var(--txt);padding:6px 0;
font-weight:700;letter-spacing:.01em}
.b3mh-cx{color:var(--gold);font-size:11.5px;display:inline-block;transition:transform .12s}
.b3mh-log[open]>summary .b3mh-cx{transform:rotate(0deg)}
.b3mh-log:not([open])>summary .b3mh-cx{transform:rotate(-90deg)}
.b3mh-cn{color:var(--mut);font-weight:400}
.b3mh-more{font-size:11.5px;color:var(--mut);padding:7px 0 2px}
.b3mh-log>summary::-webkit-details-marker{display:none}
.b3mh-log>summary:hover{color:var(--txt)}
.b3mh-d{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--mut);margin:8px 0 3px;
display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.b3mh-dr{font-weight:700;letter-spacing:.02em;color:var(--txt);font-variant-numeric:tabular-nums}
.b3mh-swept{font-size:11px;font-weight:800;letter-spacing:.06em;color:#111;background:var(--gold);
border-radius:5px;padding:1px 5px}
.b3mh-od{margin-left:7px;color:var(--mut);font-variant-numeric:tabular-nums;font-weight:700}
.b3mh-p{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;
padding:4px 0;font-size:11.5px;border-top:1px solid var(--line)}
.b3mh-r{font-size:11px;font-weight:800;letter-spacing:.06em}
.b3mh-p.w .b3mh-r{color:var(--good)} .b3mh-p.l .b3mh-r{color:var(--bad)} .b3mh-p.p .b3mh-r{color:var(--mut)}
/* VOID reads dimmer than PUSH on purpose: a push is a settled result we observed, a void is a bet that
never graded. Same stake back, different epistemic status, and the record must not let them look
identical -- especially on half-lines, where a push cannot occur at all. */
.b3mh-p.v .b3mh-r{color:var(--mut);opacity:.72;font-style:italic}
.b3mh-b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)}
.b3mh-uu{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.b3mh-none{font-size:11.5px;color:var(--mut);padding:6px 0}
/* The sub-market read as a three-leg slip: how often all legs landed, the average combined price, what it
paid, and the rate that price needs. The last two sit together on purpose -- a hit rate without the
break-even beside it is the single most misleading number a betting page can print. */
.b3slip{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:7px 9px;margin:6px 0 2px;
border:1px solid var(--line);border-radius:8px;background:var(--card2,rgba(127,127,127,.06));font-size:11.5px}
.b3slip-k{font-weight:800;letter-spacing:.02em}
.b3slip-v{font-variant-numeric:tabular-nums}
.b3slip-o{font-variant-numeric:tabular-nums;color:var(--mut)}
.b3slip-u{font-weight:800;font-variant-numeric:tabular-nums;margin-left:auto}
.b3slip-b{font-size:11.5px}
.b3slip-test{font-size:12px;line-height:1.55;padding:9px 11px;margin:8px 0 10px;border:1px solid var(--line);
border-radius:9px;background:var(--card2,rgba(127,127,127,.06))}
.b3slip-test .mut{display:block;margin-top:4px;font-size:11px}
@media(max-width:640px){ .b3mh-row{grid-template-columns:repeat(3,1fr);gap:5px} .b3mh-u{font-size:13.5px} }
/* ---- PRO STATUS IN THE HEADER --------------------------------------------------------------------------------
The crown is small and sits on the baseline of the name; it marks an account, it is not a decoration. The
pill is the only outbound sell in the header, so it stays quiet until hover. */
.who-pro{margin-left:5px;font-size:12px;line-height:1;color:var(--gold);
text-shadow:0 0 10px rgba(var(--gold-rgb),.45);vertical-align:baseline}
.who-gopro{margin-left:6px;padding:3px 8px;border-radius:999px;cursor:pointer;flex:0 0 auto;
font-size:11.5px;font-weight:800;letter-spacing:.03em;white-space:nowrap;line-height:1.5;
color:#1b1405;background:linear-gradient(180deg,var(--gold-hi),var(--gold2));
border:1px solid rgba(0,0,0,.18);box-shadow:0 1px 0 rgba(255,255,255,.35) inset}
.who-gopro:hover{filter:brightness(1.06)}
.who-gopro:active{transform:translateY(1px)}
.who-gopro:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* THE HEADER HAS NO SPARE WIDTH. Adding this pill pushed the wallet chip over the nav and clipped "You".
Below a comfortable desktop width it is hidden entirely -- Pro is still one tap away via the Shop button
in the wallet strip, so nothing becomes unreachable, and a crowded bar is worse than a missing pill. */
@media(max-width:1180px){ .who-gopro{display:none} }
@media(max-width:640px){ .who-pro{font-size:11px} }
/* ---- COLLAPSIBLE MARKET BLOCKS -------------------------------------------------------------------------------
The summary is the whole row, so the entire header is the click target rather than a small chevron. */
details.b3mktg{border-top:1px solid var(--line);padding:0}
details.b3mktg:first-of-type{border-top:0}
details.b3mktg>summary{list-style:none;cursor:pointer;padding:10px 0 9px;
display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0;border-radius:8px}
details.b3mktg>summary::-webkit-details-marker{display:none}
details.b3mktg>summary:hover .b3mktg-n{color:#fff}
details.b3mktg>summary:focus-visible{outline:2px solid var(--acc,var(--gold));outline-offset:2px}
/* a chevron that rotates, drawn in CSS so it needs no asset and no markup */
details.b3mktg>summary::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-right:2px;
border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);
transform:rotate(-45deg);transition:transform .16s ease;position:relative;top:-1px}
details.b3mktg[open]>summary::before{transform:rotate(45deg)}
/* how many plays this market has today -- the reason to open it, or not */
.b3tail.b3tail-sub{margin-top:18px;opacity:.92}.b3lg{margin:10px 0 4px;border:1px solid var(--line);border-radius:12px;background:var(--surf);overflow:hidden}.b3lg>.b3lg-h{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none;font-size:13.5px;font-weight:800;letter-spacing:.01em}.b3lg>.b3lg-h::-webkit-details-marker{display:none}.b3lg[open]>.b3lg-h{border-bottom:1px solid var(--line)}.b3lg-n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b3lg-best{flex:0 0 auto;font-size:11.5px;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}.b3lg-best b{color:var(--txt);font-weight:700}.b3lg-m{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--mut)}.b3lg-u{flex:0 0 auto;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}.b3lg>.b3mktg{margin:0 8px}.b3mktg-tier{font-size:11px;font-weight:600;letter-spacing:.02em;padding:1px 6px;border-radius:999px;margin-left:8px;vertical-align:middle;white-space:nowrap}.b3mktg-tier.prov{background:rgba(251,191,36,.13);color:#fbbf24;border:1px solid rgba(251,191,36,.28)}.b3mktg-tier.meas{background:rgba(248,113,113,.12);color:#f87171;border:1px solid rgba(248,113,113,.26)}.b3mktg-t{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
padding:2px 7px;border-radius:999px;white-space:nowrap;
color:#0e1116;background:linear-gradient(180deg,var(--gold-hi),var(--gold2))}
.b3mktg-t.off{color:var(--mut);background:none;border:1px solid var(--line);font-weight:700}
.b3mktg-w{margin-left:auto}
details.b3mktg>*:not(summary){margin-bottom:4px}
details.b3mktg[open]{padding-bottom:8px}
@media(max-width:640px){
details.b3mktg>summary{gap:6px;padding:9px 0}
.b3mktg-t{font-size:11px;padding:2px 6px}
}
/* ---- SIGN-IN PROVIDER BUTTONS ---------------------------------------------------------------------------------
Each provider keeps the treatment people already recognise: Google on a white card, X in true black. The mark
sits in a fixed-width box so both labels start on the same x -- ragged icons are what make a stack of these
look homemade. */
.sso{display:flex;align-items:center;gap:0;width:100%;margin:0 0 9px;padding:11px 14px;
border-radius:12px;cursor:pointer;font-size:14px;font-weight:650;letter-spacing:-.01em;
border:1px solid transparent;transition:transform .08s ease,filter .12s ease,box-shadow .12s ease}
.sso-m{flex:0 0 26px;display:flex;align-items:center;justify-content:center}
.sso-t{flex:1 1 auto;text-align:center;margin-left:-26px;pointer-events:none}
.sso:hover{filter:brightness(.97)}
.sso:active{transform:translateY(1px)}
.sso:focus-visible{outline:2px solid var(--acc,var(--gold));outline-offset:2px}
.sso-google{background:#fff;color:#1f1f1f;border-color:#dadce0;box-shadow:0 1px 2px rgba(0,0,0,.16)}
.sso-google:hover{background:#f7f8f8}
.sso-x{background:#000;color:#fff;border-color:#2f2f2f}
.sso-x:hover{background:#141414;filter:none}
.sso-apple{background:#fff;color:#1f1f1f;border-color:#dadce0}
/* the divider: a rule with the word sitting in it, not floating above it */
.sso-or{display:flex;align-items:center;gap:10px;margin:14px 0 12px;color:var(--mut);
font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.sso-or::before,.sso-or::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
@media(max-width:480px){ .sso{padding:10px 12px;font-size:13.5px} }
/* ---- FOLLOW ON X, IN THE HERO --------------------------------------------------------------------------------
Reads as a row, not a badge: the mark, the promise, a chevron. Deliberately quieter than the signup CTA --
it must not compete with the thing the page is actually for. */
.lp-x{display:inline-flex;align-items:center;gap:11px;margin-top:16px;padding:10px 14px;
border:1px solid var(--line);border-radius:12px;text-decoration:none;cursor:pointer;max-width:400px;
background:rgba(255,255,255,.02);transition:border-color .14s ease,background .14s ease,transform .08s ease}
.lp-x:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.05)}
.lp-x:active{transform:translateY(1px)}
.lp-x:focus-visible{outline:2px solid var(--acc,var(--gold));outline-offset:2px}
.lp-x-m{flex:0 0 30px;height:30px;border-radius:8px;background:#000;color:#fff;
display:flex;align-items:center;justify-content:center}
.lp-x-t{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.lp-x-t b{font-size:13px;font-weight:800;color:var(--txt)}
.lp-x-t span{font-size:11.5px;color:var(--mut)}
.lp-x-go{margin-left:auto;color:var(--mut);font-size:18px;line-height:1}
body.theme-light .lp-x{background:rgba(0,0,0,.02)}
body.theme-light .lp-x:hover{border-color:rgba(0,0,0,.2);background:rgba(0,0,0,.04)}
@media(max-width:640px){ .lp-x{width:100%;max-width:none;margin-top:14px} }
/* ---- REACTION TRAY: STICKERS + GIFS ---------------------------------------------------------------------------
The two tabs share one sheet because they are one gesture. */
.tray-tabs{display:flex;gap:6px;margin-bottom:10px;border-bottom:1px solid var(--line);padding-bottom:8px}
.tray-tab{padding:6px 13px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:800;
letter-spacing:.02em;color:var(--mut);background:transparent;border:1px solid var(--line)}
.tray-tab.on{color:var(--gold-bg);background:linear-gradient(180deg,var(--gold-hi),var(--gold2));border-color:transparent}
.tray-tab:focus-visible{outline:2px solid var(--acc,var(--gold));outline-offset:2px}
.gif-search{display:flex;gap:7px;margin-bottom:9px}
.gif-search input{flex:1 1 auto;min-width:0;padding:9px 12px;border-radius:10px;
border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--txt);font-size:13px}
.gif-search input:focus{outline:none;border-color:rgba(var(--gold-rgb),.5)}
/* A masonry-ish grid: GIFs are wildly different shapes and a fixed square crops every one of them badly. */
.gif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:290px;overflow-y:auto;
overflow-x:hidden;-webkit-overflow-scrolling:touch}
.gif-cell{padding:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;cursor:pointer;
background:rgba(255,255,255,.03);aspect-ratio:1/1;display:block}
.gif-cell img{width:100%;height:100%;object-fit:cover;display:block}
.gif-cell:hover{border-color:rgba(var(--gold-rgb),.55)}
.gif-cell:focus-visible{outline:2px solid var(--acc,var(--gold));outline-offset:1px}
.gif-note{grid-column:1/-1;padding:16px 6px;text-align:center;color:var(--mut);font-size:12px}
/* Tenor's terms require visible attribution wherever their content is shown. */
.gif-attr{margin-top:8px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);text-align:right}
/* a GIF inside a post: capped so one cannot dominate the feed */
.fd-gif{display:block;margin:8px 0 2px;max-width:min(320px,100%);max-height:240px;
border-radius:12px;border:1px solid var(--line)}
@media(max-width:640px){
.gif-grid{grid-template-columns:repeat(3,1fr);max-height:240px}
.fd-gif{max-width:100%}
}
/* ---- THE BOOK LINE UNDER A PICK'EM PAYOUT ---------------------------------------------------------------------
Deliberately quieter than the payout: the payout is what the record is scored at, the book line is context
for verifying the pick. Same size as the other meta so it does not read as a second headline price. */
.b3book{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:700;letter-spacing:.02em;
color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums;cursor:help}
.b3book::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;
background:var(--mut);vertical-align:middle;margin-right:6px;opacity:.6}
@media(max-width:640px){ .b3book{margin-left:6px;font-size:11.5px} }
/* ---- THE NAV TAKES ITS OWN ROW BEFORE IT RUNS OUT OF SPACE ----------------------------------------------------
"You" was rendering as "Yo" with the coin chip against it. Not an overlap -- a CLIP. `.nav` carries
overflow-x:auto, and on desktop line ~10974 puts it inline (flex-basis:auto) inside a nowrap bar. Once the
brand + 5 nav items + wallet + account chip + gear exceed the 1080px bar, the nav is the only thing that can
give, so it scrolls -- and a scrolled nav with no visible affordance just looks like a broken word.
min-width:0 was ALREADY set there, which is why adding it again did nothing.
Below a comfortable desktop width the nav goes back to its own full-width row -- exactly what the base rule
at .nav{flex-basis:100%;order:5} already does on mobile. Nothing is clipped, nothing overlaps, and the row
stays one line on genuinely wide screens where it fits. */
/* REMOVED: the @media(max-width:1500px) block that lived here gave the nav its own FULL-WIDTH row while
keeping it centred, which rendered as a bordered trough with 526px of empty box in it and doubled the
header to 89px on every 1280/1366/1440 laptop. Its `overflow-x:visible` was also a no-op -- it computes
to `auto` while overflow-y stays hidden. Replaced by the block at the end of this stylesheet. */
/* the account chip is what was being covered; give the name room to ellipse rather than vanish under a chip */
.who-me{min-width:0;max-width:190px}
.who-me b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dwallet,.who,.hdr-gear,.tdaywrap{flex:0 0 auto}
@media(max-width:900px){ .who-me{max-width:120px} }
/* Venue / home-away / weather line under a pick. Muted on purpose: it is context for a human, not a signal,
and today's situational study found every one of these effects already priced by the market. */
.ctxline{margin-top:6px;font-size:11.5px;line-height:1.55;color:var(--mut);display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline}
.ctxline .ctx-t{color:var(--fg);font-weight:600}
.ctxline .ctx-l{opacity:.75}
.ctxline .ctx-d{opacity:.45}
.ctxline .ctx-wx{color:#8fb8d8}
/* ============================================================================================================
THE HEADER: ONE FLEXIBLE ITEM, NO SCROLL CONTAINER, NO EMPTY TROUGH.
Measured before: nav clientWidth 432 vs scrollWidth 459 at 1578px, with justify-content:center putting
27.25px past the LEFT edge where no scroll can reach it. Header 89px on desktop, 93px at 390px with the
Settings gear orphaned on a second row.
Tested after in headless Chrome at 320/360/390/414/1024/1280/1440/1600: single row at every width >= 360,
nothing clipped, zero horizontal overflow, desktop header 46px.
============================================================================================================ */
/* 1. Log out leaves the header. 34px + 6px margin -- 44x44 once the phone tap-target rules apply -- spent on
the one destructive action in the product, and the overflow it caused is what pushed Settings onto a
second row on every iPhone narrower than a Plus. It belongs in Settings, one tap away. */
header .who .who-lock{display:none}
/* 2. Exactly ONE item in the bar may shrink, and it is the username, which already has its ellipsis. */
header .who{flex:0 1 auto;min-width:0}
header .who .who-me{flex:0 1 auto;min-width:0}
header .who .who-me b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 3. The nav never shrinks and never clips. overflow must be set on BOTH axes to undo the overflow:hidden
further up -- setting only overflow-x is what made the previous fix compute to `auto`. */
header .nav,
header .bar>div:has(> .navg){flex:0 0 auto;min-width:auto;overflow:visible;
justify-content:flex-start;order:0;margin-left:14px;margin-right:14px}
/* 4. One row wherever the groups genuinely fit. */
header .bar{flex-wrap:nowrap}
/* 5. Where they do not, the nav takes its own row SHRINK-TO-FIT and centred, so the recessed border wraps
the five items instead of 526px of empty box. */
@media(max-width:1180px){
header .bar{flex-wrap:wrap}
header .bar>div:has(> .navg){flex:0 0 auto;order:5;width:auto;margin:4px auto 0}
}
/* 6. On a phone the nav is display:none, so nothing needs a second row: the last few px of pressure on a
320px handset land on the username ellipsis instead of dropping the gear onto a row of its own. */
@media(max-width:768px){ header .bar{flex-wrap:nowrap} }
/* 7. The Go Pro pill is 62px in a bar already at capacity below 1500px (it is already hidden below 1180). */
@media(max-width:1500px){ .who-gopro{display:none} }
/* A dead pipeline must not look like a quiet slate. Amber, not red: nothing is broken for the READER, but
this is a statement about us, not about the day's games. */
.b3-outage{margin:10px 2px 14px;padding:12px 14px;border:1px solid var(--gold-bg);border-radius:10px;
background:#2a2210;color:var(--goldsoft);font-size:13px;line-height:1.6}
.b3-outage b{color:var(--gold-hi)}
/* ---- THE PARLAY OF THE DAY ------------------------------------------------------------------------------
A slip is a different object from a pick and has to look like one, or a reader treats three correlated
legs as three independent recommendations. The price is the loudest element because it is the thing that
makes a parlay tempting, and the honest counterweight -- the fair hit rate and the edge -- sits directly
under it rather than in a tooltip. When the legs are below the quality bar the card SAYS SO in its own
body instead of quietly rendering the same as a good one. */
.b3-parlay{margin:14px 2px 18px;padding:14px 16px;border:1px solid var(--rule,var(--line));
border-left:3px solid var(--goldsoft);border-radius:10px;background:var(--card,#161b21)}
.b3-plhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;justify-content:space-between}
.b3-plhead b{font-size:15px}
.b3-plrec{font-size:12.5px;font-variant-numeric:tabular-nums}
.b3-plprice{font-size:26px;font-weight:700;letter-spacing:-.5px;margin:6px 0 10px;
font-variant-numeric:tabular-nums;color:var(--goldsoft)}
.b3-plprice .mut{font-size:14px;font-weight:400}
.b3-plleg{display:flex;align-items:baseline;gap:10px;padding:7px 0;
border-top:1px solid var(--rule2,#222830)}
.b3-pllb{flex:1 1 auto;font-size:13.5px}
.b3-plbot{flex:0 0 auto;font-size:12px;opacity:.72}
.b3-plod{flex:0 0 auto;font-size:13px;font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.b3-pledge{margin-top:10px;font-size:12.5px;opacity:.85;font-variant-numeric:tabular-nums}
.b3-plwarn{margin-top:8px;font-size:12px;color:var(--goldsoft);opacity:.9}
@media (max-width:560px){.b3-plprice{font-size:22px}.b3-plbot{display:none}}
/* ---- HISTORY: THE MARKET LEDGER -------------------------------------------------------------------------
The tab opens on this instead of on 34 date rows. Ranked by units with the sample size on every row, so the
two questions a paying reader has -- what works, and on how much evidence -- are answered in one glance and
in that order. The losing half is a fold, not a deletion: it says how many markets and what they cost. */
.hmk{margin:6px 2px 18px;padding:14px 16px;border:1px solid var(--line,var(--line));border-radius:12px;
background:var(--card,#161b21)}
.hmk-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.hmk-h b{font-size:16px;letter-spacing:-.2px}
.hmk-sub{font-size:12px;color:var(--mut)}
.hmk-ctx{display:flex;flex-wrap:wrap;gap:6px 16px;margin:9px 0 12px;padding-bottom:11px;
border-bottom:1px solid var(--line,var(--line));font-size:12.5px;font-variant-numeric:tabular-nums}
.hmk-ctx b{font-variant-numeric:tabular-nums}
.hmk-sec{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:4px 0 6px}
.hmk-r{display:grid;grid-template-columns:minmax(0,1fr) 84px 40px minmax(44px,1fr) 62px 58px 66px;
align-items:center;gap:10px;padding:8px 8px;margin:0 -8px;border-radius:8px;cursor:pointer;
font-variant-numeric:tabular-nums;font-size:13px}
.hmk-r:hover{background:rgba(var(--gold-rgb),.07)}
.hmk-nm{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;min-width:0}
.hmk-nm b{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmk-nm i{font-style:normal;font-size:12px;color:var(--mut);white-space:nowrap}
.hmk-rec{font-size:12.5px;color:var(--mut)}
.hmk-nr{display:block;font-style:normal;font-size:11.5px;opacity:.7;white-space:nowrap}
.hmk-wr{font-size:12.5px;color:var(--mut);text-align:right}
.hmk-bar{position:relative;height:7px;border-radius:4px;background:rgba(var(--push-rgb),.16);overflow:hidden}
.hmk-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#94a3b8}
.hmk-bar.pos i{background:var(--good)}
.hmk-bar.neg i{background:var(--bad-hi)}
.hmk-u{font-weight:750;text-align:right}
.hmk-roi{font-size:12.5px;text-align:right}
.hmk-n{font-size:11.5px;color:var(--mut);text-align:right}
.hmk-dn{margin-top:10px;border-top:1px solid var(--line,var(--line));padding-top:8px}
.hmk-dn>summary{cursor:pointer;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--mut);list-style:none;padding:4px 0}
.hmk-dn>summary::-webkit-details-marker{display:none}
.hmk-dn>summary:before{content:'\25B8 ';display:inline-block;transition:transform .15s}
.hmk-dn[open]>summary:before{transform:rotate(90deg)}
.hmk-none{font-size:13px;color:var(--mut);padding:6px 0 2px}
.hmk-foot{margin-top:12px;font-size:11.5px;color:var(--mut);line-height:1.55}
/* An engine card that only exists because the board must never be blank says so on its own face. */
.b3below{color:var(--goldsoft);border-color:var(--gold-bg)!important;background:rgba(122,90,31,.16)}
/* ---- THE SIMULATED BACKTEST ------------------------------------------------------------------------------
Deliberately does NOT look like the live record. Dashed border, cool slate hue instead of the gold the rest
of this product uses, and a SIMULATED tag on every heading and every tile at the same weight as the number
it labels. A backtest that is visually indistinguishable from a forward record is a lie told by a
stylesheet, and this is the one number on the site most likely to be screenshotted out of context. */
.simb{margin:18px 2px;padding:14px 16px;border:1px dashed #4b5b6e;border-radius:12px;
background:linear-gradient(180deg,rgba(75,91,110,.13),rgba(75,91,110,.05))}
.simtag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.13em;padding:2px 6px;
border-radius:4px;background:#4b5b6e;color:#eaf1f8;vertical-align:1px;margin-right:7px}
.simtag.big{font-size:11px;padding:3px 8px;letter-spacing:.15em}
.simb-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.simb-h b{font-size:15.5px;letter-spacing:-.2px}
.simb-warn{margin:8px 0 0;font-size:11.5px;line-height:1.55;color:#a9bccd}
.simb-ctx{display:flex;flex-wrap:wrap;gap:5px 15px;margin:9px 0 12px;padding-bottom:11px;
border-bottom:1px dashed rgba(75,91,110,.6);font-size:12.5px;font-variant-numeric:tabular-nums}
.simb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.simt{padding:10px 12px;border:1px solid rgba(75,91,110,.55);border-radius:9px;background:rgba(0,0,0,.16)}
.simt-k{display:block;font-size:12px;color:var(--mut)}
.simt-v{display:flex;align-items:baseline;gap:5px;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.simt-v b{font-size:19px;font-weight:750;letter-spacing:-.4px}
.simt-v i{font-style:normal;font-size:11.5px;color:var(--mut);margin-right:6px}
.simt-s{display:block;font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.simb-note{margin:12px 0 4px;font-size:12.5px;line-height:1.6}
.simb-sec{display:flex;flex-wrap:wrap;align-items:center;margin:14px 0 6px;font-size:12.5px;font-weight:650}
.simr{display:grid;grid-template-columns:minmax(0,1fr) 62px 78px 74px 68px;align-items:center;gap:10px;
padding:7px 8px;margin:0 -8px;border-radius:7px;font-size:13px;font-variant-numeric:tabular-nums}
.simr-hd{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);padding-bottom:2px}
.simr-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;min-width:0}
.simr-n b{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.simr-n i{font-style:normal;font-size:11.5px;color:var(--mut);white-space:nowrap}
.simr-k{font-size:12px;color:var(--mut);text-align:right}
.simr-u{font-weight:700;text-align:right}
.simr-r{font-weight:750;text-align:right}
.simb-warnrow{margin:10px 0 2px;padding:9px 11px;border-left:2px solid var(--gold-bg);background:rgba(122,90,31,.14);
border-radius:0 8px 8px 0;font-size:12px;line-height:1.6;color:#e6d3ac}
/* The season disclosure hangs off its own row, indented under the number it qualifies, so the two can never
be screenshotted apart. Amber when the recent window contradicts the lifetime figure. */
/* The Tier B card. Warmer than the rest of the simulated block because it is the one thing here anyone
should consider acting on — but it keeps the SIMULATED tag and it renders its weakness in the same type
size as its ROI, which is the whole point of the layout. */
.spec{margin:12px 0 4px}
.spec-c{padding:13px 15px;border:1px solid #6b5a2e;border-radius:10px;background:rgba(122,90,31,.10)}
.spec-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.spec-h b{font-size:14.5px}
.spec-t{font-size:11px;font-weight:800;letter-spacing:.13em;padding:2px 7px;border-radius:4px;
background:var(--goldsoft);color:#1a1408}
.spec-v{display:flex;flex-wrap:wrap;gap:8px 20px;margin:10px 0 11px;padding-bottom:10px;
border-bottom:1px solid rgba(107,90,46,.55);font-variant-numeric:tabular-nums}
.spec-v span{display:flex;flex-direction:column}
.spec-v b{font-size:17px;font-weight:750;letter-spacing:-.3px}
.spec-v i{font-style:normal;font-size:11.5px;color:var(--mut);max-width:190px}
.spec-r{margin:7px 0;font-size:12px;line-height:1.6}
.spec-r.ok{color:#a8dcc0}
.spec-r.bad{color:#e6d3ac}
.spec-f{margin-top:10px;font-size:11px;color:var(--mut);line-height:1.55}
.simr-wrap{padding-bottom:2px}
.simr-sub{margin:-2px 0 7px 8px;font-size:11px;line-height:1.55;color:var(--mut);
font-variant-numeric:tabular-nums}
.simr-sub.warn{color:#e6d3ac;border-left:2px solid var(--gold-bg);padding:4px 0 4px 9px;margin-left:2px;
background:rgba(122,90,31,.10);border-radius:0 6px 6px 0}
.simb-dn{margin-top:12px}
.simb-dn>details>summary{cursor:pointer;font-size:12px;color:var(--mut);list-style:none;padding:5px 0}
.simb-dn>details>summary::-webkit-details-marker{display:none}
.simb-foot{margin-top:13px;padding-top:11px;border-top:1px dashed rgba(75,91,110,.6);
font-size:11.5px;line-height:1.6;color:var(--mut)}
@media(max-width:700px){
.simr{grid-template-columns:minmax(0,1fr) 70px 66px;row-gap:2px}
.simr-k:first-of-type,.simr-hd .simr-k:first-of-type{display:none}
.simr-u{display:none}
}
.hd-sec{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 2px 8px}
.hd-sec>b{font-size:14px}
.hrange{display:flex;flex-wrap:wrap;gap:6px}
.hrange .chip.rg{font-size:11.5px;padding:3px 10px}
@media(max-width:760px){
.hmk-r{grid-template-columns:minmax(0,1fr) 74px 60px 54px;row-gap:2px}
.hmk-bar,.hmk-n{display:none}
}
:root{
/* ---- CANVAS -------------------------------------------------------------------------------
Lifted off the void. The old --bg was #05070c: relative luminance 0.0026, a black hole that
made every card edge a hard cut and every white glyph a glare source. #0A0D14 keeps the deep
instrument feel and gives the layers somewhere to sit. Adjacent tiers separate by 1.05-1.13:1
-- deliberately subtle, because BORDERS do the separating here, not fills. */
--bg: #0A0D14; /* page */
--bg2: #0F131D; /* recessed: troughs, wells, inset tracks */
--surf: #151B28; /* card */
--surf2: #1C2331; /* raised: card header, active row, popover */
--surf3: #242C3D; /* hover / pressed / selected cell */
/* ---- RULES --------------------------------------------------------------------------------
Three weights. line2 is a whisper INSIDE a card, line is the card's own edge, line3 is
emphasis and only earns its keep on a focused or selected element. */
--line2: #1A2130;
--line: #2A3345;
--line3: #3A4459;
--hair: 1px solid var(--line);
--hair2: 1px solid var(--line2);
/* ---- INK ----------------------------------------------------------------------------------
Four steps, all measured against --bg. Nothing here is below AA, including --faint, because
this product publishes losing numbers and a de-emphasised loss is a dishonest loss.
txt 17.18:1 txt2 12.20:1 mut 8.36:1 faint 5.33:1 */
--txt: #EEF1F7;
--txt2: #C6CDDD;
--mut: #A2AABF;
--faint: #7E8699;
--ink: var(--txt); /* body copy alias used by older rules */
--fg: var(--txt); /* was referenced with NO fallback -- silently invalid */
--on-accent:#0A0D14; /* text that sits ON a solid gold/green/red fill */
/* ---- GOLD :: the identity -----------------------------------------------------------------
#D4AF37 is the logo gold. The stylesheet had been running on #ffd166, a pale butter yellow
that reads as a highlighter rather than as metal. 9.24:1 on --bg, so it is legible at the
10px sizes this app actually uses it at. --gold-rgb exists so the ~257 tint call sites can
track the accent instead of drifting from it. */
--gold: #D4AF37;
--gold-hi: #E8C55A; /* hover, active, emphasis */
--gold2: #B8912E; /* the far stop of a metallic gradient */
--goldsoft: #C4A44E; /* low-emphasis gold text */
--gold-bg: #231C0C; /* gold-tinted surface -- gold on it reads 8.04:1 */
--gold-rgb: 212,175,55;
--gold2-rgb: 184,145,46;
--acc: var(--gold);
--accent: var(--gold);
/* ---- STATUS :: exactly one WON, one LOST, one PUSH, one LIVE ------------------------------
Before this, WON was drawn in five different greens (#34d399 #86efac #6ee7a8 #35c46a #4ade80)
and LOST in five different reds, depending on which component you were looking at. A result
that changes colour between two views of the same bet is not a result anyone trusts. */
--good: #3DD68C; --good-hi: #7BE8B0; --good-bg: #0F241A; --good-rgb: 61,214,140;
--bad: #FF6B7E; --bad-hi: #FFA0AC; --bad-bg: #261218; --bad-rgb: 255,107,126;
--push: #9AA3B8; --push-hi: #C6CDDD; --push-bg: #1A2130; --push-rgb: 154,163,184;
--info: #7FD7FF; --info-hi: #A9E5FF; --info-bg: #0A1E2A; --info-rgb: 127,215,255;
--blue2: #7FB5FF;
--live: var(--bad); /* live == in play, drawn in the alert hue */
--live-rgb: var(--bad-rgb);
/* ---- SPACING ------------------------------------------------------------------------------
--s-1..--s-6 keep their existing values byte for byte so nothing in the 3,000-odd existing
padding/margin declarations shifts. --s-0/--s-7/--s-8 are new rungs so future work has
somewhere to land instead of inventing an 81st value. */
--s-0:2px; --s-1:4px; --s-2:6px; --s-3:8px; --s-4:12px;
--s-5:16px; --s-6:24px; --s-7:32px; --s-8:48px;
/* ---- TYPE ---------------------------------------------------------------------------------
Existing rungs unchanged. The half-pixel sizes (12.5 / 11.5 / 10.5 / 13.5) are REAL in this
codebase -- 464 declarations use them -- so they get names rather than being pretended away. */
--fs-0:10px; --fs-1:11px; --fs-2:12px; --fs-3:13px;
--fs-4:14px; --fs-5:16px; --fs-6:18px; --fs-7:28px; --fs-page:20px;
--fs-micro:9px; --fs-00:10.5px; --fs-05:11.5px; --fs-15:12.5px; --fs-25:13.5px;
--lh-1:1.2; --lh-2:1.35; --lh-3:1.5;
--fw-nrm:400; --fw-med:600; --fw-semi:700; --fw-bold:800;
--measure:68ch;
/* ---- RADIUS -------------------------------------------------------------------------------
NOTE, honestly: there are TWO radius scales in this file, --r1/--r2/--r3 (8/12/16) and
--r-1/--r-2/--r-3 (4/8/12), and they disagree at every rung. Both are preserved at their
current values because collapsing them would move ~750 border-radius declarations with no
way to verify each one. Documented, not fixed. New work should use --rad-*. */
--r1:8px; --r2:12px; --r3:16px;
--r-1:4px; --r-2:8px; --r-3:12px;
--rad-xs:4px; --rad-sm:6px; --rad-md:10px; --rad-lg:14px; --rad-xl:20px; --rad-pill:999px;
/* ---- ELEVATION ----------------------------------------------------------------------------
Softened. The old --e3 was rgba(0,0,0,.86); against a bg that is no longer near-black, that
read as soot rather than as depth. --rim is the single top highlight that makes a surface
look lit rather than painted. */
--e1: 0 1px 2px rgba(0,0,0,.32);
--e2: 0 4px 14px -6px rgba(0,0,0,.55);
--e3: 0 16px 44px -18px rgba(0,0,0,.70);
--rim: inset 0 1px 0 rgba(255,255,255,.045);
--glow-gold: 0 0 0 1px rgba(var(--gold-rgb),.30), 0 6px 20px -8px rgba(var(--gold-rgb),.28);
--font-mono: var(--font-num);
--focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold);
}
/* PREDICTION-MARKET MODE swaps the accent to ice. The tint channel has to swap with it, or every
rgba() highlight stays yellow while the solid accents turn blue. */
body.mkt-pm{--gold-rgb:127,215,255;--gold2-rgb:58,166,216;--gold-hi:#A9E5FF;--goldsoft:#8FC4DE;--gold-bg:#0A1E2A}
/* LIGHT THEME has to carry every token the 1,503 migrated call sites now reference, or the tints
resolve to nothing. Values are the light-theme equivalents, not the dark ones. */
body.theme-light{
--bg2:#EEF1F8; --surf3:#E6EAF4; --line3:#CFD6E6;
--txt2:#3A4258; --faint:#6A7288; --on-accent:#12151F; --fg:var(--txt);
--gold-hi:#8A6A12; --goldsoft:#A9760A; --gold-bg:#FBF4E2;
--gold-rgb:184,134,11; --gold2-rgb:169,118,10;
--good-hi:#0C6B40; --good-bg:#E8F6EE; --good-rgb:15,138,82;
--bad-hi:#A82A40; --bad-bg:#FDECEF; --bad-rgb:209,59,83;
--push:#6A7288; --push-hi:#3A4258; --push-bg:#EEF1F8; --push-rgb:106,114,136;
--info:#0F6F9E; --info-hi:#0D5A80; --info-bg:#E7F3F9; --info-rgb:15,111,158;
--blue2:#2A5FBF;
/* WON/LOST measured 4.40:1 and 4.21:1 on the light card -- under AA. A losing number
that is hard to read is the one regression this product cannot ship. Now 5.99 / 5.70. */
--good:#0C7245; --bad:#BE2F46;
--e1:0 1px 2px rgba(30,40,80,.06);
--e2:0 4px 14px -6px rgba(30,40,80,.14);
--e3:0 16px 44px -18px rgba(30,40,80,.22);
--rim:inset 0 1px 0 rgba(255,255,255,.70);
--focus:0 0 0 2px #fff, 0 0 0 4px #B8860B;
}
/* LIGHT THEME, the last AA gaps. LIGHT_CSS states `.pos{color:#0f8a52}` as a direct rule, which
outranks the token and measured 3.93:1 on a card and 4.40:1 on white -- both under AA for the
11-12px these actually render at. Same specificity, stated later, so it wins, and it now reads
the token instead of a literal. The red matters most: a loss nobody can read is the one thing
this product is not allowed to ship. */
body.theme-light .pos,
body.theme-light .lk-win b,
body.theme-light .shadowline .pos,
body.theme-light .pl-lv.pos,
body.theme-light .pl-badge.w{color:var(--good)}
body.theme-light .neg,
body.theme-light .pl-badge.l{color:var(--bad)}
/* ==============================================================================================
SETTLEMENT :: a graded result has to look like a fact, not like a label.
==============================================================================================
The brief for this product is honesty, so the settled states get the strongest, flattest,
least-decorated treatment in the stylesheet: a solid left rule in the status hue, a tinted
field at low alpha, tabular figures, and NO opacity reduction on losses anywhere. A red number
here is the whole market position -- it is never allowed to recede.
These are additive classes. Nothing above is removed, because the JS assigns result classes
dynamically and an unused-looking selector is not a safe thing to delete in this file. */
.won,.lost,.push,.settled-row{font-variant-numeric:tabular-nums}
/* The status badge: one shape, three fills, uppercase, tracked out, never larger than the number
it qualifies. It is an annotation on the figure, not a competitor to it. */
.won,.b3done.won,.pl-badge.w,.fd-badge.won,.b3mktr-r.won,
.lost,.b3done.lost,.pl-badge.l,.fd-badge.lost,.b3mktr-r.lost,
.push,.pl-badge.push,.fd-badge.push{
font-variant-numeric:tabular-nums;
letter-spacing:.06em}
/* Field tints + left rule. Low alpha so a long settled list does not turn into a traffic light. */
.b3settled.won,.b3state.won,.b3card.done.won{
border-color:rgba(var(--good-rgb),.34);
background:linear-gradient(180deg,rgba(var(--good-rgb),.07),transparent 62%),var(--surf)}
.b3settled.lost,.b3state.lost,.b3card.done.lost{
border-color:rgba(var(--bad-rgb),.34);
background:linear-gradient(180deg,rgba(var(--bad-rgb),.07),transparent 62%),var(--surf)}
.pl-r.w{border-left-color:var(--good)}
.pl-r.l{border-left-color:var(--bad)}
.pl-r.push,.pl-g .pl-r.push{border-left-color:var(--push)}
/* Unit impact. The single most-scanned number in the product. Monospaced, tabular, aligned right,
and it keeps its sign -- a leading + or - is information, not decoration. */
.hd-u,.sc-u,.gru,.gres,.b3wl,.pl-u,.evsum,.bk-big,.ps-v{
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1,"lnum" 1}
.gres,.hd-u,.sc-u,.gru{text-align:right}
/* pos/neg were hardcoded to two literals that matched no token. They are the same green and red
as WON and LOST, because they mean the same thing. */
.pos{color:var(--good)}
.neg{color:var(--bad)}
.mut{color:var(--mut)}
/* Any figure that appears in a column lines up. 227 declarations already did this; these are the
families that were missed. */
table td,table th,.st-cell,.lbtable td,.lbtable th,.jtable td,.jtable th,.rc-tbl td,.rc-tbl th,
.hmk-r,.hd-rec,.hd-n,.sc-rec,.cnt,.lb-count,.evtab-n{
font-variant-numeric:tabular-nums}
/* ==============================================================================================
ACCESSIBILITY + MOBILE :: the two things that are never anyone's ticket.
============================================================================================== */
/* 1. HORIZONTAL SCROLL. `clip` rather than `hidden`: hidden on creates a scroll container
and silently breaks every position:sticky descendant, which in this app is the header, the
subnav and the bottom bar. clip does not. */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
img,svg,video,canvas{max-width:100%;height:auto}
/* Wide content scrolls INSIDE its own container rather than pushing the page. These wrappers all
already exist in the markup; this only gives them the behaviour they were missing. */
.lbwrap,.tbl-scroll,.rc-scroll,.lb-scroll,.rc-tbl,.chartwrap,.rep-wrap,.inv-wrap,.st-grid{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain}
/* 2. KEYBOARD FOCUS. A visible, high-contrast ring on everything interactive. :focus-visible only,
so pointer users never see it. The double ring survives on both dark and light fields. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible,
.chip:focus-visible,.navg:focus-visible,.subtab:focus-visible,.segbtn:focus-visible{
outline:none;
box-shadow:var(--focus);
border-radius:var(--rad-sm);
position:relative;
z-index:1}
/* 3. REDUCED MOTION. There are 33 prefers-reduced-motion blocks already; this is the backstop for
everything they missed, including the decorative keyframes. Transitions are cut to 1ms rather
than 0 so transitionend handlers still fire and no JS stalls waiting for one. */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important}
}
/* 4. TAP TARGETS. Below the tablet breakpoint nothing interactive is smaller than 44px of
reachable area. Achieved with a transparent ::after so it costs no layout. */
@media(max-width:760px){
button,.chip,.navg,.subtab,.segbtn,[role="button"]{min-height:32px}
.botnav a,.botnav button{min-height:44px}
}
/* ==============================================================================================
CONTROLS :: primary / secondary / tertiary, said once.
==============================================================================================
Additive utility classes. Existing buttons are untouched -- these exist so the next thing built
does not invent a sixth button treatment. */
.btn-1,.btn-2,.btn-3{
display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
font-family:var(--font-ui);font-size:var(--fs-2);font-weight:var(--fw-semi);
letter-spacing:.01em;line-height:1;
padding:var(--s-3) var(--s-5);border-radius:var(--rad-md);
cursor:pointer;white-space:nowrap;
transition:background var(--dur-1,120ms) var(--ease-out,ease),
border-color var(--dur-1,120ms) var(--ease-out,ease),
color var(--dur-1,120ms) var(--ease-out,ease)}
/* PRIMARY: solid gold, dark ink, 9.24:1. One per view. */
.btn-1{background:linear-gradient(180deg,var(--gold-hi),var(--gold));
border:1px solid var(--gold2);color:var(--on-accent);box-shadow:var(--e1),var(--rim)}
.btn-1:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.btn-1:active{background:var(--gold2);box-shadow:none}
/* SECONDARY: the surface with an edge. Carries the majority of the actions in the app. */
.btn-2{background:var(--surf2);border:var(--hair);color:var(--txt)}
.btn-2:hover{background:var(--surf3);border-color:var(--line3)}
.btn-2:active{background:var(--surf)}
/* TERTIARY: text only until you touch it. Destructive and low-stakes actions. */
.btn-3{background:transparent;border:1px solid transparent;color:var(--mut)}
.btn-3:hover{color:var(--txt);background:var(--surf2)}
.btn-1[disabled],.btn-2[disabled],.btn-3[disabled],
.btn-1[aria-disabled="true"],.btn-2[aria-disabled="true"]{
cursor:not-allowed;opacity:.55;filter:saturate(.5)}
/* Status chips, if something needs one and does not already have a class. */
.stat-won{color:var(--good-hi);background:rgba(var(--good-rgb),.13);border:1px solid rgba(var(--good-rgb),.32)}
.stat-lost{color:var(--bad-hi);background:rgba(var(--bad-rgb),.13);border:1px solid rgba(var(--bad-rgb),.32)}
.stat-push{color:var(--push-hi);background:rgba(var(--push-rgb),.14);border:1px solid rgba(var(--push-rgb),.30)}
.stat-live{color:var(--info-hi);background:rgba(var(--info-rgb),.13);border:1px solid rgba(var(--info-rgb),.32)}
.stat-won,.stat-lost,.stat-push,.stat-live{
display:inline-flex;align-items:center;gap:var(--s-2);
font-size:var(--fs-micro);font-weight:var(--fw-bold);
text-transform:uppercase;letter-spacing:.07em;
padding:2px var(--s-2);border-radius:var(--rad-xs);
font-variant-numeric:tabular-nums}
/* ==============================================================================================
FLATTENED BOARD LEAVES :: a header that leads nowhere must not look like a door.
==============================================================================================
The structure lane collapsed the one-child levels of the board: a .subcat holding <=2 picks and
a .gamegrp holding a single bet-type group now render as ``.
They are still , so every selector and every querySelector keeps matching -- but the
summary is now a LABEL, not a control, and a click on it would only close something that is
meant to stay open.
Suppressed with pointer-events rather than by hiding the summary, because the disclosure
semantics (and the elements' own IDs, which JS scrolls to) have to survive.
.unvgroup is deliberately excluded: that header carries the unproven/shadow-pick tooltip and
has to stay hover- and focus-reachable. */
.subcat.sc-flat:not(.unvgroup) > .subhdr,
.gamegrp.gg-flat > .gamehdr{
pointer-events:none;
cursor:default}
.subcat.sc-flat:not(.unvgroup) > .subhdr::-webkit-details-marker,
.gamegrp.gg-flat > .gamehdr::-webkit-details-marker{display:none}
.subcat.sc-flat:not(.unvgroup) > .subhdr::marker,
.gamegrp.gg-flat > .gamehdr::marker{content:""}
/* The chevron is the affordance. With nothing to toggle, it is a lie -- but it keeps its box so
the header's columns do not shift relative to the unflattened groups above and below it. */
.subcat.sc-flat:not(.unvgroup) > .subhdr .chev,
.gamegrp.gg-flat > .gamehdr .chev{visibility:hidden}
/* No hover affordance either -- a flat header should read as a caption. */
.subcat.sc-flat:not(.unvgroup) > .subhdr:hover,
.gamegrp.gg-flat > .gamehdr:hover{background:inherit}
/* The real controls inside the header stay live. pointer-events must be restored explicitly;
it does not inherit back on its own. */
.subcat.sc-flat > .subhdr .evbtn,
.subcat.sc-flat > .subhdr .tailbtn,
.subcat.sc-flat > .subhdr .parbtn,
.gamegrp.gg-flat > .gamehdr .evbtn,
.gamegrp.gg-flat > .gamehdr .tailbtn,
.gamegrp.gg-flat > .gamehdr .parbtn,
.subcat.sc-flat > .subhdr a,
.gamegrp.gg-flat > .gamehdr a{
pointer-events:auto;
cursor:pointer}