:root {
--ink: #151413;
--paper: #f5ecd8;
--chalk: #fff7df;
--court: #c9673d;
--court-dark: #7b392c;
--blue: #256d9d;
--green: #157f68;
--gold: #e6b843;
--red: #d64d3a;
--muted: rgba(21, 20, 19, 0.66);
--shadow: 5px 5px 0 var(--ink);
/* Semantic neutrals that flip in dark mode. --ink/--chalk stay literal
(used as fixed text on colored blocks). --surface = neutral raised
panels (was chalk); --ink-bg = intentionally-dark element backgrounds. */
--surface: var(--chalk);
--ink-bg: var(--ink);
/* Court colour for TEXT. --court-dark clears AA on cream but disappears on
the dark page, so this flips while --court-dark stays put for fills. */
--court-text: #7b392c;
--grid-line-a: rgba(21, 20, 19, 0.05);
--grid-line-b: rgba(21, 20, 19, 0.04);
}
[data-theme="dark"] {
--ink: #f3ecdb; /* neutral foreground: text, borders, hard shadows */
--paper: #16140f; /* page background */
--muted: rgba(243, 236, 219, 0.58);
--surface: #241f18; /* neutral raised panels */
--ink-bg: #0c0a07; /* darkest element backgrounds (chips, score pills) */
--grid-line-a: rgba(243, 236, 219, 0.06);
--grid-line-b: rgba(243, 236, 219, 0.045);
--court-text: #e79063; /* lifted court tone — readable on #16140f */
}
/* Gold/court blocks keep their color in dark mode, so text on them must stay
dark (--ink flips light). Force the fixed-dark exceptions back to ink. */
[data-theme="dark"] #dailySubtitle,
[data-theme="dark"] .result-breakdown,
[data-theme="dark"] .play-again-btn,
[data-theme="dark"] .build-chip.filled strong,
[data-theme="dark"] .build-chip.filled span,
[data-theme="dark"] .share-btn-copy,
[data-theme="dark"] .share-btn-leaderboard,
[data-theme="dark"] .jersey,
[data-theme="dark"] .lb-row-me,
[data-theme="dark"] .lb-row-me .lb-name,
[data-theme="dark"] .lb-row-me .lb-rank,
[data-theme="dark"] .lb-pod-1,
[data-theme="dark"] .lb-pod-1 .lb-pod-name,
[data-theme="dark"] .lb-pod-1 .lb-pod-rank {
color: #151413;
}
[data-theme="dark"] .play-again-btn { border-color: #151413; }
[data-theme="dark"] .settings-item-danger { color: #ff7a61; }
/* More gold/light blocks that keep dark text in dark mode */
[data-theme="dark"] .account-btn-trophy,
[data-theme="dark"] .respin-token,
[data-theme="dark"] #viewLeaderboardBtn,
[data-theme="dark"] .result,
[data-theme="dark"] .modal-num,
/* The GOAT Pass page's buy button. `background: var(--chalk)` is a fixed
cream, but its `color: var(--ink)` flips light in dark mode — so the label
was cream on cream and the button had no readable text at all. Measured at
a 1.1 contrast ratio, i.e. invisible. It is the buy button on a sales page,
so it had been unreadable for every dark-theme visitor. */
[data-theme="dark"] .legal .gp-hero-cta {
color: #151413;
}
/* Dark accent text (green) is illegible on the dark page — lighten it */
[data-theme="dark"] .mode-label,
[data-theme="dark"] .lb-hint,
[data-theme="dark"] .save-status {
color: #4fc9a6;
}
* {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
body {
margin: 0;
min-height: 100vh;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 40px;
color: var(--ink);
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
background:
linear-gradient(90deg, var(--grid-line-a) 1px, transparent 1px) 0 0 / 24px 24px,
linear-gradient(var(--grid-line-b) 1px, transparent 1px) 0 0 / 24px 24px,
radial-gradient(circle at 15% 12%, rgba(230, 184, 67, 0.42), transparent 24rem),
var(--paper);
}
button {
border: 0;
color: inherit;
font: inherit;
cursor: pointer;
}
.shell {
width: min(1260px, calc(100% - 20px));
margin: 0 auto;
padding: 10px 0 12px;
}
/* Ezoic side rails: only the leaderboard and 100-club pages have a narrow,
centered column (~620px) with genuinely blank sides — the rest of the site
fills the width, leaving no room for a rail. So cap the shell to 960px ONLY
while one of those two pages is showing, opening ~250px gutters on a laptop
for Ezoic to drop the rails into. Every other screen keeps the full 1260px.
`:has()` re-evaluates as the SPA toggles the [hidden] attribute. */
.shell:has(#leaderboardPage:not([hidden])),
.shell:has(#clubPage:not([hidden])) {
width: min(960px, calc(100% - 20px));
}
.hero {
display: flex;
min-height: 86px;
align-items: center;
justify-content: space-between;
gap: 20px;
border-bottom: 3px solid var(--ink);
}
.hero-head { min-width: 0; }
/* The hero is a flex row above 930px, and flex shrinks items in proportion to
their basis — so the headline's max-width is really a claim on the row, not
just a wrap point. At 760px it lost the tug of war with the chips and got
squeezed into ~380px, wrapping to five lines of 60px type and making the
whole header taller than the game below it. Widening the claim buys it back:
the same sentence lands in three or four lines and the header shrinks by
about a third at common desktop widths.
Not pushed further than this on purpose — past roughly 1100px the headline
starts taking width off the chips instead, they wrap to an extra row, and
the row becomes the thing setting the height. Scoped to the hero so the
global h1 (used on the legal and about pages) keeps its 760px measure. */
@media (min-width: 931px) {
.hero-head h1 { max-width: 1100px; }
}
/* The player-count pill rides with the hero chips. flex-basis:100% forces it
onto its own line under them in every layout, so it can never shrink a chip
or land awkwardly mid-row; it stays aligned to the same edge as the chips. */
.hero-players { flex: 1 0 100%; display: flex; justify-content: flex-end; }
.hero-logo-btn {
padding: 0;
background: none;
border: none;
flex: 0 0 auto;
cursor: pointer;
line-height: 0;
}
.hero-logo {
height: 110px;
width: auto;
display: block;
transition: opacity 140ms ease;
}
.hero-logo-btn:hover .hero-logo,
.hero-logo-btn:focus-visible .hero-logo {
opacity: 0.82;
}
.kicker {
margin: 0 0 7px;
font: 900 0.76rem/1.1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hero .kicker {
margin-bottom: 9px;
font-size: clamp(1.15rem, 2.4vw, 1.7rem);
letter-spacing: 0.06em;
}
h1,
h2,
h3,
p {
margin-top: 0;
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
h1 {
max-width: 760px;
margin-bottom: 0;
font-size: clamp(1.8rem, 4.2vw, 4.2rem);
font-weight: 900;
line-height: 0.92;
}
.score-tile {
display: grid;
min-width: min(180px, 30vw);
padding: 10px 12px;
color: var(--chalk);
background: var(--ink-bg);
box-shadow: var(--shadow);
}
.score-tile span {
font: 950 clamp(2.6rem, 5vw, 4.4rem) / 0.82 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0;
}
.score-tile small {
font: 900 0.78rem/1.1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.game-grid {
display: grid;
grid-template-columns: minmax(290px, 0.62fr) minmax(0, 1.38fr);
gap: 12px;
margin-top: 10px;
}
.mode-screen {
display: grid;
grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1.26fr);
gap: 18px;
margin-top: 12px;
}
.mode-copy {
min-height: min(calc(100vh - 128px), 580px);
padding: 22px;
border: 4px solid var(--ink);
background:
radial-gradient(circle at center, transparent 0 92px, rgba(255, 247, 223, 0.78) 93px 96px, transparent 97px),
linear-gradient(90deg, transparent 49.6%, rgba(255, 247, 223, 0.72) 49.6% 50.4%, transparent 50.4%),
var(--court);
color: var(--chalk);
box-shadow: var(--shadow);
}
.mode-copy h2 {
max-width: 440px;
margin-bottom: 0;
font-size: clamp(1.8rem, 4vw, 3.6rem);
font-weight: 900;
line-height: 0.94;
}
.mode-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.mode-card {
display: grid;
min-height: min(calc(100vh - 128px), 580px);
align-content: space-between;
padding: 22px;
text-align: left;
border: 4px solid var(--ink);
background: var(--surface);
box-shadow: var(--shadow);
transition: transform 160ms ease, box-shadow 160ms ease;
}
.mode-card:hover {
transform: translate(2px, 2px);
box-shadow: 3px 3px 0 var(--ink);
}
.mode-card-blind {
background: var(--ink-bg);
color: var(--chalk);
}
.mode-card-daily {
grid-column: 1 / -1;
/* Full-width banner — doesn't need the tall side-card height on desktop. */
min-height: min(34vh, 300px);
background: var(--court);
color: var(--chalk);
}
.mode-card-daily small {
color: rgba(255, 247, 223, 0.82);
}
/* WCAG AA contrast on the orange (--court) daily banner: small text needs 4.5:1,
which cream cannot hit on this background. Dark ink gives 4.87:1. */
.mode-card-daily .mode-tag {
background: var(--ink-bg);
border-color: var(--ink);
color: var(--chalk);
}
#dailySubtitle {
color: var(--ink);
}
.mode-card-daily[disabled] {
cursor: default;
opacity: 0.72;
}
.mode-card-daily[disabled]:hover {
transform: none;
box-shadow: var(--shadow);
}
.daily-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.daily-streak {
padding: 4px 8px;
background: rgba(255, 247, 223, 0.18);
border: 1px solid rgba(255, 247, 223, 0.3);
font: 700 0.62rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--chalk);
white-space: nowrap;
}
.daily-status {
margin-top: 10px;
padding: 8px 12px;
background: rgba(21, 20, 19, 0.22);
border: 1px solid rgba(255, 247, 223, 0.25);
font: 700 0.78rem/1.2 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--chalk);
}
.daily-status[data-done="true"] {
background: rgba(21, 20, 19, 0.35);
color: var(--gold);
}
.daily-comeback {
display: block;
margin-top: 5px;
font: 400 0.7rem/1.3 "Space Mono", ui-monospace, monospace;
color: rgba(255, 247, 223, 0.6);
text-transform: none;
letter-spacing: 0;
}
.daily-view-label {
display: block;
margin-top: 10px;
padding: 7px 0 0;
border-top: 1px solid rgba(255, 247, 223, 0.2);
font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace;
color: var(--gold);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mode-tag {
width: max-content;
padding: 7px 9px;
border: 2px solid currentColor;
font: 950 0.72rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mode-card strong {
display: block;
margin-top: auto;
font-size: clamp(2rem, 4vw, 4.6rem);
line-height: 0.86;
}
.mode-card small {
display: block;
margin-top: 14px;
color: var(--muted);
font: 850 0.88rem/1.35 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.mode-card-blind small {
color: rgba(255, 247, 223, 0.88);
}
/* Head to Head sits full-width UNDER the two draft cards rather than becoming a
third tall column. It isn't a third way to draft — it's a different game — and
a matching column would have posed it as one of three equal choices. Sized
like the Daily banner it mirrors at the top of the grid. Anchor, not button,
so it needs the text-decoration reset the other cards never did. */
.mode-card-h2h {
grid-column: 1 / -1;
min-height: min(30vh, 260px);
background: var(--ink-bg);
color: var(--chalk);
text-decoration: none;
}
.mode-card-h2h strong {
/* The two side cards get a display-sized word; this one carries a phrase, so
it caps far lower or it wraps to three lines on a phone. */
font-size: clamp(1.5rem, 3.4vw, 2.6rem);
line-height: 1;
}
.mode-card-h2h small {
color: rgba(255, 247, 223, 0.88);
}
.mode-pb {
display: block;
margin-top: 10px;
font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
opacity: 0.55;
}
.mode-card-blind .mode-pb {
color: var(--gold);
opacity: 0.9;
}
.ezoic-ad-slot {
min-height: 280px;
margin: 20px auto 0;
display: flex;
justify-content: center;
align-items: center;
max-width: 728px;
width: 100%;
}
.ezoic-ad-slot:empty { display: none; }
@media (max-width: 600px) {
.ezoic-ad-slot { min-height: 250px; }
}
/* A slot holding a real Ezoic placeholder.
The rule above collapses a slot only while it is literally empty, which is
the right test for a container Ezoic never puts anything in and the wrong one
the moment a placeholder div is nested inside: the slot then has a child from
first paint, `:empty` stops matching, and the reserved 280px becomes a hole
in the page whether or not an ad ever lands. So a live slot reserves nothing
and lets Ezoic size it — it knows what it is about to place long before the
creative arrives — which collapses to nothing on a no-fill and grows to the
unit on a fill. Safe because a live slot is the last thing on its screen:
what it pushes is the end of the page.
It also can't stay a flex container. The slot centres its children, and a
placeholder is empty until Ezoic fills it — so as a flex item it collapsed to
one pixel wide, and a unit measuring its own container for a width to request
found nothing to measure. Block layout gives it the slot's full width before
anything lands.
`:not(:empty)` because the class outlives the placeholder. ezoic-ads.js moves
one div between slots as the player changes screen and doesn't take the class
off behind it, so without this an emptied slot would match a later rule than
`.ezoic-ad-slot:empty` and un-collapse itself — a block of nothing at the
bottom of every screen the player had already visited. */
.ezoic-ad-live:not(:empty) {
display: block;
min-height: 0;
text-align: center;
}
@media (max-width: 600px) {
.ezoic-ad-live:not(:empty) { min-height: 0; }
}
/* The slots inside the game modes: the result screen, the Career Mode menu and
the verdict on a finished career, the head-to-head lobby, inbox, board and
result. Every one of them is the LAST thing on its screen, under the buttons,
so a unit that fills a moment after the page paints pushes nothing but the
whitespace below it — no control moves out from under a thumb. The rule above
collapses the slot entirely while it's empty, so an unfilled one leaves no
hole either. The line on top marks it as separate from the page rather than
part of it. */
.ezoic-ad-inline {
margin-top: 28px;
padding-top: 20px;
border-top: 2px solid rgba(21, 20, 19, 0.08);
clear: both;
}
[data-theme="dark"] .ezoic-ad-inline { border-top-color: rgba(243, 236, 219, 0.1); }
/* The in-content banner while somebody is playing.
ezoic-ads.js stamps with `ads-playing` for the duration of a draft, a
career being played out or a live head-to-head match, and `ads-off`
permanently for anyone who bought the Pass or the $1.99 unlock.
Paid means gone, on every screen and every device — no argument. */
body.ads-off .ezoic-ad-slot {
display: none !important;
}
/* On DESKTOP a game screen carries no banner: the floating video player is the
ad there, and a banner opening at the bottom of a live board is the format
those screens deliberately don't use. On a phone the floating player crowds a
small screen, so gameplay screens carry the banner instead — pinned to the
very bottom, under the controls, `:empty`-collapsed until it fills, so all it
ever pushes is whitespace below the last card. 930px is the same line where
the boards drop from two columns to one, so the banner always lands in a
single-column layout with room beneath the play. */
@media (min-width: 931px) {
body.ads-playing .ezoic-ad-slot {
display: none !important;
}
}
/* The floating video player and the sticky anchor, which place themselves.
These run everywhere now, gameplay included — they position against the
viewport rather than joining the layout, so they're the one format that can
appear on a screen with no room for a banner. A second class, `ads-nofloat`,
used to bar them from both game modes end to end; it is gone, and where these
units appear is Ezoic's own placement setting to make.
What stays is the paid case. Selectors are matched loosely on purpose (a
third party renames things and does not tell us) and are best-effort by
nature — ezoic-ads.js also removes these outright for a paying account, since
for somebody who bought ads away, hidden is not the same as gone. */
body.ads-off #ezmob-wrapper,
body.ads-off .ezmob-footer,
body.ads-off [id*="ez-video"],
body.ads-off [class*="ez-video"],
body.ads-off [id*="openvideo"],
body.ads-off [id*="open-video"],
body.ads-off [class*="ov-player"],
body.ads-off [id*="ez-anchor"],
body.ads-off [class*="ez-anchor"],
body.ads-off [id*="anchor-ad"],
body.ads-off [id^="ezoic-pub-ad-placeholder"],
/* Ezoic fills through Google, so the unit that actually appears is a Google
auto-placed one and carries none of the names above. */
body.ads-off .google-auto-placed,
body.ads-off ins.adsbygoogle,
body.ads-off [id^="google_ads_iframe"] {
display: none !important;
}
/* The result slot is a sibling of #result rather than a child, because .result
is the horizontal gold banner and an ad inside it would land as a column
beside the copy. Out here it needs #result's visibility tied to it by hand —
otherwise it would keep showing on whatever screen came next. */
#ezoic-ad-result { display: none; }
#result:not([hidden]) + #ezoic-ad-result:not(:empty) { display: flex; }
.lab-panel,
.draft-panel {
min-width: 0;
}
.body-card {
position: relative;
display: grid;
height: min(53vh, 390px);
min-height: 330px;
place-items: center;
overflow: hidden;
border: 4px solid var(--ink);
background:
repeating-linear-gradient(0deg, rgba(230, 184, 67, 0.04) 0 1px, transparent 1px 4px),
linear-gradient(rgba(230, 184, 67, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
linear-gradient(90deg, rgba(230, 184, 67, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
#17110a;
box-shadow: var(--shadow);
}
/* Corner bracket decorations */
.body-card::before,
.body-card::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
pointer-events: none;
z-index: 1;
}
.body-card::before {
top: 10px;
left: 10px;
border-top: 2px solid rgba(230, 184, 67, 0.7);
border-left: 2px solid rgba(230, 184, 67, 0.7);
}
.body-card::after {
bottom: 10px;
right: 10px;
border-bottom: 2px solid rgba(230, 184, 67, 0.7);
border-right: 2px solid rgba(230, 184, 67, 0.7);
}
.halo {
position: absolute;
width: 220px;
height: 220px;
border: 1px solid rgba(230, 184, 67, 0.26);
border-radius: 50%;
box-shadow: 0 0 0 8px rgba(230, 184, 67, 0.05), inset 0 0 0 8px rgba(230, 184, 67, 0.05);
}
.goat-body {
position: relative;
width: 240px;
height: 380px;
transform: translateY(-4px) scale(0.74);
transform-origin: center;
}
.part {
position: absolute;
display: block;
--part-transform: none;
--tier-color: var(--gold);
--tier-glow: rgba(230, 184, 67, 0.45);
background: rgba(230, 184, 67, 0.06);
border: 1.5px solid rgba(230, 184, 67, 0.24);
box-shadow: none;
transform: var(--part-transform);
transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.part.filled {
background: var(--tier-color);
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 0 10px var(--tier-glow), 0 0 22px rgba(0,0,0,0.3);
transform: var(--part-transform);
}
/* Score tier colors + matching glow */
.part[data-tier="elite"] { --tier-color: #f2c438; --tier-glow: rgba(242, 196, 56, 0.6); }
.part[data-tier="great"] { --tier-color: #d49628; --tier-glow: rgba(212, 150, 40, 0.5); }
.part[data-tier="good"] { --tier-color: #b07828; --tier-glow: rgba(176, 120, 40, 0.45); }
.part[data-tier="fair"] { --tier-color: #8a5f22; --tier-glow: rgba(138, 95, 34, 0.4); }
.part[data-tier="weak"] { --tier-color: #6b4a1a; --tier-glow: rgba(107, 74, 26, 0.35); }
/* Last-drafted: persistent glow ring */
.part.is-current {
box-shadow: 0 0 10px var(--tier-glow), 0 0 22px rgba(0,0,0,0.3), 0 0 0 2px rgba(255, 255, 255, 0.4);
}
/* Stamp-in animation for freshly drafted part */
@keyframes partStamp {
0% { transform: var(--part-transform) scale(0.45); opacity: 0; }
55% { transform: var(--part-transform) scale(1.18); opacity: 1; }
75% { transform: var(--part-transform) scale(0.96); }
100% { transform: var(--part-transform) scale(1); }
}
/* Outward glow ring that radiates then settles */
@keyframes partGlow {
0% { box-shadow: 0 0 0 0 rgba(230,184,67,0.9), 0 0 0 2px rgba(255,255,255,0.4); }
55% { box-shadow: 0 0 20px 6px rgba(230,184,67,0.1), 0 0 0 2px rgba(255,255,255,0.4); }
100% { box-shadow: 0 0 10px 0 var(--tier-glow), 0 0 0 2px rgba(255,255,255,0.4); }
}
.part.is-new {
animation:
partStamp 440ms cubic-bezier(0.22, 1, 0.36, 1) forwards,
partGlow 600ms ease-out forwards;
}
.head {
left: 50%;
top: 10px;
width: 68px;
height: 68px;
--part-transform: translateX(-50%);
border-radius: 50%;
}
/* Shoulders sit just below the head gap (neck space) */
.shoulders {
left: 50%;
top: 84px;
width: 180px;
height: 40px;
--part-transform: translateX(-50%);
border-radius: 20px;
}
/* Chest starts just behind shoulders */
.chest {
left: 50%;
top: 92px;
width: 108px;
height: 120px;
--part-transform: translateX(-50%);
border-radius: 22px 22px 14px 14px;
}
.heart {
left: 50%;
top: 138px;
width: 32px;
height: 32px;
--part-transform: translateX(-50%);
border-radius: 50%;
}
/* Arms pivot from the shoulder joint (top center) */
.left-arm,
.right-arm {
top: 108px;
width: 44px;
height: 156px;
border-radius: 22px;
transform-origin: top center;
}
.left-arm {
left: 10px;
--part-transform: rotate(8deg);
}
.right-arm {
right: 10px;
--part-transform: rotate(-8deg);
}
.waist {
left: 50%;
top: 210px;
width: 90px;
height: 50px;
--part-transform: translateX(-50%);
border-radius: 12px;
}
/* Legs: left at 38px, right at 38px from edge — 60px gap between them */
.left-leg,
.right-leg {
top: 256px;
width: 52px;
height: 124px;
border-radius: 24px 24px 16px 16px;
}
.left-leg {
left: 38px;
}
.right-leg {
right: 38px;
}
.body-label {
position: absolute;
right: 12px;
bottom: 12px;
left: 12px;
padding: 7px 10px;
color: rgba(245, 236, 216, 1);
background: rgba(23, 17, 10, 0.88);
border: 1px solid rgba(230, 184, 67, 0.3);
font: 700 0.72rem/1.25 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.body-label[data-empty="true"] {
color: rgba(230, 184, 67, 0.55);
font-style: italic;
font-weight: 400;
letter-spacing: 0.02em;
}
/* Radar mini — bottom-left corner of body-card, above body-label */
.radar-mini {
position: absolute;
bottom: 58px;
left: 12px;
width: 72px;
height: 72px;
pointer-events: none;
z-index: 2;
}
/* Radar in result section */
.result-actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.radar-result {
flex: 0 0 auto;
width: 96px;
height: 96px;
}
/* Radar in share card header */
.radar-share {
flex: 0 0 auto;
width: 60px;
height: 60px;
}
.build-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 8px;
}
.build-chip {
min-height: 54px;
padding: 9px;
border: 2px solid var(--ink);
background: var(--surface);
box-shadow: 4px 4px 0 var(--ink);
}
.build-chip strong {
display: block;
font: 950 0.66rem/1.1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
}
.build-chip span {
display: block;
margin-top: 4px;
color: var(--muted);
font-size: 0.76rem;
line-height: 1.05;
}
.build-chip.filled {
background: var(--gold);
}
/* On the gold fill, the translucent --muted value text only reaches ~3.4-4.5:1.
Solid ink gives 10:1 (WCAG AA). Scoped to filled chips; chalk chips keep muted. */
.build-chip.filled strong,
.build-chip.filled span {
color: var(--ink);
}
/* ---------------------------------------------------------- BEST AVAILABLE --
One badge, four places: the build chips and result cards in Daily/Blind, and
the draft cards, running pick list and round-by-round table in Head to Head.
Gold fill with a fixed-dark glyph, the same way .jersey works — gold keeps
its colour in dark mode, so the mark inside it must not flip with --ink. */
.best-star {
display: inline-flex;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
flex: 0 0 17px;
margin-right: 5px;
border: 1.5px solid #151413;
background: var(--gold);
color: #151413;
/* The glyph, not the box, is what has to read at a glance — at 8px the badge
looked like a plain gold dot on a chip. */
font: 900 12px/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
font-style: normal;
vertical-align: 1px;
}
.best-legend {
display: flex;
align-items: center;
margin: 8px 0 0;
font: 700 0.64rem/1.3 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--muted);
}
/* On the gold chip the badge would be gold on gold. Chalk keeps the edge. */
.build-chip.filled .best-star { background: var(--chalk); }
/* The opponent's column in the running list is 0.6rem — a full-size badge
there overwhelms the name it belongs to. */
.h2h-taken u .best-star { width: 13px; height: 13px; flex-basis: 13px; margin-right: 3px; font-size: 9px; }
.round-card {
display: flex;
align-items: start;
justify-content: space-between;
gap: 12px;
min-height: 104px;
padding: 12px;
border: 3px solid var(--ink);
background: var(--surface);
box-shadow: var(--shadow);
}
.round-card h2,
.result h2 {
margin-bottom: 8px;
font-size: clamp(1.2rem, 2.6vw, 2.1rem);
font-weight: 700;
line-height: 1.0;
}
.context {
margin-bottom: 0;
color: var(--muted);
font: 800 0.78rem/1.25 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.mode-label {
margin: 7px 0 0;
color: var(--green);
font: 900 0.68rem/1.2 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
}
#resetButton,
#shareButton {
flex: 0 0 auto;
min-height: 44px;
padding: 0 12px;
border: 2px solid var(--ink);
background: var(--green);
color: var(--chalk);
box-shadow: 5px 5px 0 var(--ink);
font: 900 0.88rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
transition: transform 120ms ease, box-shadow 120ms ease;
}
#resetButton:hover,
#shareButton:hover,
.card:hover {
transform: translate(2px, 2px);
box-shadow: 3px 3px 0 var(--ink);
}
.cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-top: 8px;
}
/* ===== Roll suspense animation ===== */
@keyframes rollFlicker {
0%, 100% { opacity: 0.5; transform: translateX(-1px) skewX(-2deg); }
50% { opacity: 0.88; transform: translateX(1px) skewX(2deg); }
}
@keyframes stampIn {
0% { transform: scale(1.45) rotate(-3deg); opacity: 0; }
55% { transform: scale(0.93) rotate(0.6deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes cardDeal {
0% { transform: translateY(18px) scale(0.93); opacity: 0; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes skelPulse {
0%, 100% { opacity: 0.32; }
50% { opacity: 0.62; }
}
#prompt.is-rolling {
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
animation: rollFlicker 0.13s steps(1, end) infinite;
}
#prompt .roll-team,
#prompt .roll-div,
#prompt .roll-attr {
display: inline-block;
}
#prompt .roll-div {
margin: 0 0.28em;
color: var(--court);
}
#prompt .roll-attr {
padding-bottom: 2px;
background: linear-gradient(var(--gold), var(--gold)) left 94% / 100% 3px no-repeat;
}
#prompt.is-locked .roll-team {
animation: stampIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#prompt.is-locked .roll-div {
animation: stampIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
#prompt.is-locked .roll-attr {
animation: stampIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}
.card.is-dealing {
animation: cardDeal 0.34s cubic-bezier(0.2, 1, 0.3, 1) backwards;
}
/* ===== Round stat bar =====
Restates the rolled stat directly above the cards and sticks there while you
scroll the roster, because #prompt is at the top of the draft panel and is
gone from the screen for essentially every pick on a phone. --hub-header-h is
measured in app.js (the header is sticky and grows by the status-bar inset
once the game is installed to a home screen); the 65px is the browser-tab
value and only applies before the first measurement. */
.round-stat {
position: sticky;
top: calc(var(--hub-header-h, 65px) - 1px);
z-index: 60;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 10px;
margin: 14px 0 0;
padding: 8px 14px;
background: var(--surface);
border: 3px solid var(--ink);
box-shadow: 4px 4px 0 var(--ink);
}
.round-stat-label {
font: 900 0.6rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--muted);
}
.round-stat-value {
font: 900 1.15rem/1.1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
letter-spacing: 0.02em;
padding-bottom: 2px;
background: linear-gradient(var(--gold), var(--gold)) left 96% / 100% 3px no-repeat;
}
.round-stat-team {
font: 700 0.68rem/1.2 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
margin-left: auto;
}
.round-stat.is-golden {
background: linear-gradient(135deg, var(--gold), #f2d071 55%, var(--gold));
color: var(--on-gold);
}
.round-stat.is-golden .round-stat-label,
.round-stat.is-golden .round-stat-team {
color: rgba(21, 20, 19, 0.72);
}
.round-stat.is-golden .round-stat-value {
background-image: linear-gradient(var(--ink), var(--ink));
}
@media (max-width: 520px) {
.round-stat-team {
margin-left: 0;
flex-basis: 100%;
}
}
/* Mobile only. The bar exists because #prompt scrolls off the screen partway
down a 15-player roster on a phone. On the desktop layout the prompt is in
view for most of the roster and the board is short enough to take in at
once, so pinning a second copy of the stat is just a frame in the way. */
@media (min-width: 931px) {
.round-stat {
display: none;
}
}
/* ===== Golden rolls (rare USA Olympic super-teams) ===== */
@keyframes goldenPulse {
0%, 100% { box-shadow: 4px 4px 0 var(--ink), 0 0 0 0 rgba(230, 184, 67, 0); }
50% { box-shadow: 4px 4px 0 var(--ink), 0 0 16px 3px rgba(230, 184, 67, 0.65); }
}
@keyframes goldenShimmer {
0% { background-position: -120% 0; }
100% { background-position: 220% 0; }
}
.golden-badge {
position: relative;
display: block;
width: fit-content;
margin: 0 auto 6px;
padding: 3px 12px;
border: 2px solid var(--gold);
border-radius: 999px;
background: linear-gradient(90deg, #b8860b, #ffe9a8, #b8860b);
background-size: 200% 100%;
animation: goldenShimmer 2.4s linear infinite;
color: #5a3d00;
font: 900 0.68rem/1.2 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
letter-spacing: 0.08em;
text-align: center;
}
/* Small "i" that explains a Golden Roll (esp. for first-timers in Blind mode). */
.golden-info {
display: inline-grid;
place-items: center;
vertical-align: middle;
width: 15px;
height: 15px;
margin-left: 7px;
padding: 0;
border: 1.5px solid #5a3d00;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
color: #5a3d00;
font: italic 800 0.66rem/1 Georgia, serif;
cursor: pointer;
}
.golden-tip {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: min(80vw, 280px);
z-index: 60;
padding: 9px 12px;
border: 2px solid var(--gold);
border-radius: 8px;
background: var(--ink-bg, #151413);
color: var(--chalk, #f3ecdb);
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
font: 400 0.74rem/1.45 "Playfair Display", Georgia, serif;
text-transform: none;
letter-spacing: normal;
text-align: left;
white-space: normal;
}
#prompt.is-golden {
text-align: center;
}
#prompt.is-golden .roll-team {
/* Gold-foil shimmer for the rare golden roll — a purposeful, earned effect,
not a generic gradient heading. #8a6400 is the solid fallback for browsers
without background-clip and for reduced-motion (see media query below). */
color: #8a6400;
font-weight: 900;
background: linear-gradient(90deg, #8a6400, #e6b843, #fff1c0, #e6b843, #8a6400);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: goldenShimmer 3s linear infinite;
}
.card.is-golden {
border-color: var(--gold);
background:
linear-gradient(rgba(230, 184, 67, 0.14), rgba(230, 184, 67, 0.05)),
var(--chalk);
animation: goldenPulse 2.2s ease-in-out infinite;
}
.card.is-golden:hover {
box-shadow: 3px 3px 0 var(--ink), 0 0 18px 4px rgba(230, 184, 67, 0.75);
}
.card.is-golden .jersey {
/* Deeper than #8a6400 (2.89:1 on gold) so the number meets WCAG AA (~5.4:1). */
color: #5a3d00;
}
.golden-bio {
font-size: 0.72rem;
line-height: 1.45;
color: #5a3d00;
font-style: italic;
margin: 6px 0 0;
padding: 0 2px;
}
[data-theme="dark"] .golden-bio {
color: #c9973a;
}
.wildcard-hint {
grid-column: 1 / -1;
text-align: center;
font: 700 0.72rem/1 "Space Mono", monospace;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #8a6400; /* deep gold — legible on the light card grid (~4.8:1) */
margin: 4px 0 0;
}
[data-theme="dark"] .wildcard-hint {
color: var(--gold);
}
.wildcard-picker {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 20px 8px 8px;
}
.wildcard-title {
font: 900 0.78rem/1 "Space Mono", monospace;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gold);
}
.wildcard-attrs {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.wildcard-attr-btn {
padding: 8px 16px;
border: 2px solid var(--gold);
background: linear-gradient(rgba(230,184,67,0.12), rgba(230,184,67,0.04));
color: var(--ink);
font: 700 0.78rem/1 "Space Mono", monospace;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.12s, box-shadow 0.12s;
}
.wildcard-attr-btn:hover {
background: var(--gold);
color: #5a3d00;
box-shadow: 3px 3px 0 var(--ink);
}
.card-skel {
min-height: 154px;
border: 3px solid var(--ink);
box-shadow: var(--shadow);
background: repeating-linear-gradient(
45deg,
var(--chalk),
var(--chalk) 10px,
rgba(21, 20, 19, 0.07) 10px,
rgba(21, 20, 19, 0.07) 20px
);
animation: skelPulse 0.7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
#prompt.is-rolling,
#prompt.is-locked .roll-team,
#prompt.is-locked .roll-div,
#prompt.is-locked .roll-attr,
.card.is-dealing,
.card-skel,
.part.is-new,
.card.is-golden,
.golden-badge,
.wildcard-hint,
#prompt.is-golden .roll-team {
animation: none;
}
/* No motion → drop the foil gradient for a solid, high-contrast gold. */
#prompt.is-golden .roll-team {
background: none;
-webkit-text-fill-color: #8a6400;
}
}
.card {
display: grid;
min-height: 154px;
padding: 0;
overflow: hidden;
text-align: left;
border: 2px solid var(--ink);
background: var(--surface);
box-shadow: 4px 4px 0 var(--ink);
transition: transform 160ms ease, box-shadow 160ms ease;
}
.card-art {
display: flex;
min-height: 52px;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 7px;
color: var(--chalk);
background: var(--blue);
}
.card:nth-child(2n) .card-art {
background: var(--court-dark);
}
.card:nth-child(3n) .card-art {
/* Deeper than --red #d64d3a: that mid-tone fails WCAG AA for the cream
.attribute-score label (3.93:1). This brick red gives cream ~5.3:1. */
background: #b83a2a;
}
.jersey {
display: grid;
width: 42px;
height: 48px;
place-items: center;
clip-path: polygon(20% 0, 37% 10%, 63% 10%, 80% 0, 100% 24%, 82% 38%, 82% 100%, 18% 100%, 18% 38%, 0 24%);
background: var(--gold);
color: var(--ink);
font: 950 0.9rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.attribute-score {
text-align: right;
font: 950 0.72rem/1.1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
}
.attribute-score span {
display: block;
font-size: 1.5rem;
line-height: 0.9;
}
.attribute-score.is-hidden span {
letter-spacing: 0.02em;
}
.card-body {
padding: 8px;
}
.card h3 {
margin: 0 0 4px;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(0.95rem, 1.5vw, 1.32rem);
font-weight: 700;
line-height: 0.96;
/* The card clips its overflow, so a name too wide for the column does not
spill — it silently loses its last few letters. Two cards per row on a
phone leaves little room for a name like Antetokounmpo, so let one break
rather than get cut. */
overflow-wrap: anywhere;
}
.meta {
margin: 0 0 7px;
color: var(--muted);
font: 850 0.62rem/1.15 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
}
.bars {
display: grid;
gap: 4px;
}
.blind-note {
min-height: 42px;
padding: 8px;
border: 2px dashed rgba(21, 20, 19, 0.42);
color: var(--muted);
font: 900 0.62rem/1.2 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
}
.bar {
display: grid;
grid-template-columns: 52px 1fr 22px;
align-items: center;
gap: 5px;
font: 850 0.56rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.track {
height: 6px;
background: rgba(21, 20, 19, 0.14);
}
.fill {
display: block;
height: 100%;
background: var(--ink-bg);
}
.result {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
padding: 14px 16px;
border: 3px solid var(--ink);
background: var(--gold);
box-shadow: var(--shadow);
}
.cards.is-result {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.result p:last-child {
margin-bottom: 0;
}
.result-breakdown {
margin: 6px 0 0;
font: 400 0.68rem/1.5 "Space Mono", ui-monospace, monospace;
color: var(--ink);
/* 0.6 faded ink on the gold banner = 3.81:1 (fails AA). 0.75 = ~5.7:1. */
opacity: 0.75;
letter-spacing: 0.02em;
}
/* "Your build plays like ___" real-player comparison */
.player-comp {
margin: 14px auto 0;
max-width: 380px;
border: 2px solid var(--ink);
background: var(--surface);
box-shadow: 4px 4px 0 var(--ink);
padding: 12px 16px;
text-align: center;
}
.player-comp .pc-kicker {
font: 700 0.6rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--court);
}
.player-comp .pc-name {
margin: 5px 0 3px;
font: 900 1.55rem/1.05 "Playfair Display", Georgia, serif;
color: var(--ink);
}
.player-comp .pc-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font: 700 0.62rem/1 "Space Mono", ui-monospace, monospace;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
}
.player-comp .pc-sim {
color: var(--green);
border-left: 1.5px solid rgba(21, 20, 19, 0.2);
padding-left: 8px;
}
[data-theme="dark"] .player-comp .pc-sim { color: #4fc9a6; border-left-color: rgba(243, 236, 219, 0.2); }
.player-comp .pc-why {
display: block;
margin-top: 7px;
font: 400 0.72rem/1.35 "Playfair Display", Georgia, serif;
color: var(--ink);
}
.play-again-btn {
background: transparent;
border: 2px solid var(--ink);
color: var(--ink);
font: 700 0.78rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 10px 18px;
cursor: pointer;
/* 0.55 faded ink on the gold banner = 3.36:1 (fails AA). 0.75 = ~5.7:1. */
opacity: 0.75;
transition: opacity 0.15s;
}
.play-again-btn:hover { opacity: 1; }
.play-again-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; opacity: 1; }
.result .kicker {
margin-bottom: 10px;
}
/* Footer */
.legal {
width: min(760px, calc(100% - 20px));
margin: 24px auto 0;
font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.9rem;
line-height: 1.65;
color: var(--ink);
}
.legal h2 {
margin: 28px 0 8px;
font-family: "Playfair Display", Georgia, serif;
font-size: 1.25rem;
}
.legal p,
.legal ul {
margin: 0 0 12px;
}
.legal ul {
padding-left: 20px;
}
.legal li {
margin-bottom: 6px;
}
.legal a {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.legal-updated {
font-size: 0.75rem;
color: var(--muted);
}
.legal-back {
margin-top: 28px;
padding-top: 14px;
border-top: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent);
}
.site-footer {
margin-top: 32px;
padding: 16px 0 8px;
border-top: 2px solid rgba(21, 20, 19, 0.18);
}
.footer-inner {
width: min(1260px, calc(100% - 20px));
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
font: 400 0.68rem/1.4 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--muted);
}
.footer-disclaimer {
width: min(1260px, calc(100% - 20px));
margin: 10px auto 0;
padding-top: 10px;
border-top: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
font: 400 0.62rem/1.45 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--muted);
text-align: center;
}
.footer-links {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
row-gap: 6px;
gap: 8px;
}
.footer-links a {
color: var(--muted);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 140ms ease, border-color 140ms ease;
}
.footer-links a:hover {
color: var(--ink);
border-bottom-color: var(--ink);
}
.footer-dot {
color: var(--muted);
}
.footer-support {
color: var(--ink) !important;
font-weight: 400;
transition: color 140ms ease !important;
}
.footer-support:hover {
color: var(--court) !important;
}
/* LETSGO partner link — its own row between the social icons and the site
footer's link list, not folded into either, so it reads as a callout
rather than one more link. */
.footer-letsgo {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
margin: 4px auto 0;
padding: 10px 16px;
/* Matches .footer-inner's width so the bar lines up with the link row
below it rather than floating as a narrower pill. */
width: min(1260px, calc(100% - 20px));
background: #8b3fe0;
color: #fff !important;
border: 2px solid var(--ink);
box-shadow: 3px 3px 0 var(--ink);
font: 700 0.72rem/1.3 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.02em;
text-decoration: none;
text-align: center;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.footer-letsgo b { font-weight: 800; }
/* One flex item for the whole sentence. As a bare text node the message and the
GOATLAB code became two separate items, so on a phone they wrapped into
side-by-side columns and the code drifted away from the word "code". */
.footer-letsgo-copy { flex: 0 1 auto; }
/* Says out loud what rel="sponsored" only says to machines. Section 2.1 of the
agreement requires promoted content to be labelled as promoted, and the
pop-up already carries its own "Exclusive" chip. */
.footer-letsgo-tag {
flex: 0 0 auto;
padding: 3px 7px;
background: rgba(0, 0, 0, 0.32);
border: 1px solid rgba(255, 255, 255, 0.45);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.footer-letsgo:hover {
color: #fff;
border-bottom: 2px solid var(--ink);
transform: translate(1px, 1px);
box-shadow: 2px 2px 0 var(--ink);
}
/* "Buy the dev a coffee" — lives at the bottom of the share modal, a high-intent
moment (they tapped Share because they like it). */
.coffee-cta-wrap {
text-align: center;
margin-top: 4px;
padding: 0 16px 14px;
}
.coffee-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 999px;
background: var(--gold, #d9a441);
color: var(--ink) !important;
font-weight: 700;
font-size: 0.9rem;
text-decoration: none;
border: 1.5px solid var(--ink);
box-shadow: 2px 2px 0 var(--ink);
transition: transform 120ms ease, box-shadow 120ms ease;
}
.coffee-cta:hover {
transform: translateY(-1px);
box-shadow: 2px 3px 0 var(--ink);
}
.coffee-cta:active {
transform: translate(2px, 2px);
box-shadow: none;
}
.coffee-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.site-footer {
text-align: center;
padding: 18px 16px 28px;
display: flex; align-items: center; justify-content: center; gap: 10px;
flex-wrap: wrap;
}
/* Icon only — the blurple mark reads as "Discord" without a label. */
.footer-discord {
display: inline-flex; align-items: center;
color: #5865f2; text-decoration: none;
border-bottom: none !important;
opacity: 0.75;
transition: opacity 0.12s;
}
.footer-discord:hover { opacity: 1; }
.footer-sep { color: var(--muted); font: 700 0.75rem/1 "Space Mono", ui-monospace, monospace; opacity: 0.6; }
.footer-support-subtle {
font: 700 0.75rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.04em; text-transform: uppercase;
color: var(--muted); text-decoration: none; opacity: 0.8;
transition: opacity 0.12s;
}
.footer-support-subtle:hover { opacity: 1; }
/* Brand colours for the community row. Each platform gets a light-mode and a
dark-mode value rather than one literal: the page background flips from cream
to near-black, and a single colour can't clear 4.5:1 against both. X in
particular has to invert outright — its mark is black on white and white on
black, which is the brand behaving correctly, not an exception to it. */
.footer-soc-ig,
.footer-soc-tt,
.footer-soc-x { opacity: 1; } /* brand colour carries these, not the grey fade */
.footer-soc-ig { color: #b02a8f; } /* the magenta mid-point of the IG gradient */
.footer-soc-tt { color: #c8102e; } /* TikTok red, darkened to clear 4.5:1 on cream */
.footer-soc-x { color: #1c1c1e; } /* greyish black */
[data-theme="dark"] .footer-soc-ig { color: #f06ba8; }
[data-theme="dark"] .footer-soc-tt { color: #ff4d70; }
[data-theme="dark"] .footer-soc-x { color: #e7e9ea; }
/* Mark-only links, so centre the logos the way the Discord one is centred
rather than leaving them sitting on a text baseline that has no text. All
three are marks now — Instagram and TikTok lost their spelled-out labels — so
the rule covers the whole row instead of just X. */
.footer-soc-ig,
.footer-soc-tt,
.footer-soc-x {
display: inline-flex;
align-items: center;
}
.footer-soc-ig:hover,
.footer-soc-tt:hover,
.footer-soc-x:hover { filter: brightness(1.15); }
/* Anything sitting ON the gold gradient needs a literal dark ink, not
var(--ink): that token flips to a light cream in dark mode, which would put
near-white text on a gold background. Gold doesn't flip, so its foreground
can't either. */
:root { --on-gold: #151413; }
/* The one gold thing in a row of muted grey links. It sits where the plain
"Support" link used to and is meant to catch the eye — the wall of names is
the pitch, the donation is how you get on it. */
.footer-hof {
font: 700 0.7rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.04em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 10px;
cursor: pointer;
color: var(--on-gold);
background: linear-gradient(135deg, var(--gold), #f2d071 55%, var(--gold));
border: 2px solid var(--ink);
box-shadow: 3px 3px 0 var(--ink);
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.footer-hof:hover {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 var(--ink);
}
.footer-hof:active {
transform: translate(3px, 3px);
box-shadow: none;
}
/* --- Supporter Hall of Fame modal ---------------------------------------- */
.hof-header {
background: linear-gradient(135deg, #8a6a17, var(--gold) 55%, #8a6a17);
color: var(--ink);
}
/* The header is gold rather than ink, so the chalk text and border it would
otherwise inherit wash out against it. Both selectors are doubled up on
purpose — `.modal-header .kicker` and `.modal-close` are declared later in
this file, and would win the tie on source order otherwise. */
.modal-header.hof-header .kicker { color: var(--on-gold); }
.modal-header.hof-header .modal-close {
color: var(--on-gold);
border-color: rgba(21, 20, 19, 0.7);
}
.modal-header.hof-header .modal-close:hover {
background: rgba(21, 20, 19, 0.12);
border-color: var(--ink);
}
.hof-body { gap: 12px; }
.hof-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.hof-list li {
display: flex;
align-items: baseline;
gap: 10px;
padding: 10px 12px;
border: 2px solid var(--ink);
background: color-mix(in srgb, var(--gold) 16%, var(--surface));
font: 700 0.92rem/1.3 "Playfair Display", Georgia, serif;
}
.hof-list .hof-note-inline {
font: 400 0.72rem/1.3 "Space Mono", ui-monospace, monospace;
color: var(--muted);
}
/* Empty state — dashed, no gold. It should read as a slot waiting to be
filled, not as a supporter who happens to be named "nobody". */
.hof-empty {
display: block !important;
border-style: dashed !important;
background: none !important;
text-align: center;
color: var(--muted);
}
.hof-empty span {
display: block;
margin-top: 4px;
font: 400 0.72rem/1.3 "Space Mono", ui-monospace, monospace;
}
.hof-ask {
margin: 4px 0 0;
text-align: center;
font: 700 1rem/1.3 "Playfair Display", Georgia, serif;
}
.hof-cta {
display: block;
text-align: center;
text-decoration: none;
padding: 12px;
color: var(--on-gold);
background: linear-gradient(135deg, var(--gold), #f2d071 55%, var(--gold));
border: 3px solid var(--ink);
box-shadow: 4px 4px 0 var(--ink);
font: 700 0.86rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.hof-cta:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.hof-cta:active { transform: translate(4px, 4px); box-shadow: none; }
.hof-note {
margin: 0;
text-align: center;
font: 400 0.64rem/1.4 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.03em;
color: var(--muted);
opacity: 0.85;
}
/* "Next Daily in …" countdown on the result screen */
.result-countdown {
margin: 10px 0 0;
text-align: center;
font-size: 0.82rem;
color: var(--muted);
}
.result-countdown .js-countdown {
color: var(--ink);
font-weight: 700;
}
/* ===== Add to Home Screen prompt (mobile capture) ===== */
.a2hs-scrim {
position: fixed;
inset: 0;
z-index: 70;
background: rgba(21, 20, 19, 0.35);
opacity: 0;
transition: opacity 0.28s ease;
}
.a2hs-scrim.show { opacity: 1; }
.a2hs {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
z-index: 71;
max-width: 460px;
margin: 0 auto;
background: var(--surface);
color: var(--ink);
border: 2px solid var(--ink);
border-radius: 20px;
box-shadow: 4px 4px 0 var(--ink);
padding: 16px 16px 14px;
transform: translateY(170%);
transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.a2hs.show { transform: translateY(0); }
.a2hs-x {
position: absolute;
top: 8px;
right: 10px;
border: none;
background: none;
cursor: pointer;
font-size: 1rem;
line-height: 1;
color: var(--muted);
padding: 4px;
}
.a2hs-row { display: flex; gap: 12px; align-items: center; }
.a2hs-logo {
width: 46px;
height: 46px;
flex: 0 0 auto;
border-radius: 12px;
border: 1.5px solid var(--ink);
object-fit: cover;
background: var(--gold);
}
.a2hs-title {
font-family: "Playfair Display", serif;
font-weight: 800;
font-size: 1.05rem;
margin: 0;
line-height: 1.15;
}
.a2hs-sub { color: var(--muted); font-size: 0.78rem; margin: 3px 0 0; line-height: 1.35; }
.a2hs-actions { display: flex; gap: 10px; margin-top: 14px; }
.a2hs-actions-ios { margin-top: 14px; }
.a2hs-add {
flex: 1;
font-family: inherit;
font-weight: 700;
font-size: 0.88rem;
padding: 11px;
border: 1.5px solid var(--ink);
border-radius: 999px;
background: var(--gold);
color: #151413;
cursor: pointer;
box-shadow: 2px 2px 0 var(--ink);
}
.a2hs-add:active { transform: translate(2px, 2px); box-shadow: none; }
.a2hs-not {
font-family: inherit;
font-weight: 700;
font-size: 0.88rem;
padding: 11px 16px;
border: none;
background: none;
color: var(--muted);
cursor: pointer;
}
.a2hs-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.a2hs-steps li { display: flex; gap: 10px; align-items: center; font-size: 0.82rem; line-height: 1.3; }
.a2hs-num {
flex: 0 0 auto;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--court);
color: #fff;
display: grid;
place-items: center;
font-size: 0.72rem;
font-weight: 700;
}
.a2hs-share { font-weight: 700; color: var(--court); }
/* Legal-footer marks. Deliberately unlike the community row at the top of the
page: no brand colours here, just the link grey at low opacity, so a row of
logos sits quietly beside Terms and Privacy instead of pulling the eye down
to it. Discord joins them on the same terms — grey like the rest, not its
blurple, which is the whole point of it being down here. */
.footer-x,
.footer-ig,
.footer-tt,
.footer-dc {
display: inline-flex;
align-items: center;
border-bottom: none !important;
opacity: 0.55;
transition: opacity 140ms ease !important;
}
.footer-x:hover,
.footer-ig:hover,
.footer-tt:hover,
.footer-dc:hover {
opacity: 1;
border-bottom-color: transparent !important;
}
@media (max-width: 930px) {
body {
overflow: auto;
}
.hero {
align-items: stretch;
flex-direction: column;
}
.hero-logo-btn {
align-self: flex-start;
}
.hero-logo {
height: 80px;
}
.result {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.score-tile {
width: 100%;
}
.game-grid {
grid-template-columns: 1fr;
}
.mode-screen,
.mode-options {
grid-template-columns: 1fr;
}
.mode-copy,
.mode-card {
min-height: 260px;
}
.cards {
grid-template-columns: repeat(2, 1fr);
}
}
/* Back button + round actions */
.round-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex: 0 0 auto;
}
#backButton {
flex: 0 0 auto;
min-height: 44px;
padding: 0 12px;
border: 2px solid var(--ink);
background: var(--surface);
color: var(--ink);
box-shadow: 5px 5px 0 var(--ink);
font: 700 0.78rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
letter-spacing: 0.05em;
}
#backButton:hover {
transform: translate(2px, 2px);
box-shadow: 3px 3px 0 var(--ink);
}
/* One-time-per-round respins */
.respins {
display: flex;
align-items: center;
gap: 12px;
margin-top: 14px;
flex-wrap: wrap;
}
.respins-label {
font: 900 0.64rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--muted);
}
.respins-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.respin-btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 0 11px;
border: 2px solid var(--ink);
background: var(--surface);
color: var(--ink);
box-shadow: 4px 4px 0 var(--ink);
font: 900 0.78rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.12s ease;
}
.respin-btn::before {
content: "\21BB"; /* ↻ recycle/respin glyph */
font-size: 0.95rem;
line-height: 1;
}
.respin-btn:hover:not(:disabled) {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 var(--ink);
}
.respin-token {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 18px;
padding: 0 5px;
border: 1.5px solid var(--ink);
background: var(--gold);
font-size: 0.64rem;
font-weight: 900;
}
.respin-btn:disabled {
cursor: not-allowed;
opacity: 0.38;
box-shadow: none;
transform: none;
}
.respin-btn.is-used .respin-text {
text-decoration: line-through;
}
.respin-btn.is-used .respin-token {
background: transparent;
color: var(--muted);
}
/* GOAT Pass ratings reveal (Blind & Daily) — gold treatment, eye glyph */
.respin-btn.reveal-btn::before {
content: "\1F441"; /* 👁 */
}
.respin-btn.reveal-btn {
border-color: var(--gold);
box-shadow: 4px 4px 0 var(--gold);
}
.respin-btn.reveal-btn:hover:not(:disabled) {
box-shadow: 2px 2px 0 var(--gold);
}
.respin-btn.reveal-btn.is-locked {
opacity: 0.82;
}
.respin-btn.reveal-btn.is-locked .respin-token {
background: transparent;
}
/* The same reveal, bought for one Blind game with a video instead of the Pass.
Court orange for the same reason the bonus respin is: on this row gold means
"you bought it", and this is the version you didn't. The 👁 glyph stays —
it's still the same thing happening to the cards. */
.respin-btn.reveal-btn.is-ad {
border-color: var(--court);
box-shadow: 4px 4px 0 var(--court);
}
.respin-btn.reveal-btn.is-ad:hover:not(:disabled) {
box-shadow: 2px 2px 0 var(--court);
}
.respin-btn.reveal-btn.is-ad .respin-token {
background: var(--court);
color: var(--chalk);
}
/* Waiting on the ad — full opacity while disabled, since dimming the button
the player just pressed reads as "didn't work". */
.respin-btn.reveal-btn.is-loading {
opacity: 1;
cursor: progress;
box-shadow: 2px 2px 0 var(--court);
transform: translate(2px, 2px);
}
/* Bonus respin — a fourth roll bought with a rewarded ad (Classic & Blind).
Court orange, deliberately not gold: gold is the GOAT Pass language on this
row (the Reveal button beside it), and this is the one thing here you can
have without paying. The glyph is ▶ rather than ↻ so it reads as "watch"
before it reads as "respin". */
.respin-btn.bonus-btn::before {
content: "\25B6"; /* ▶ */
font-size: 0.72rem;
}
.respin-btn.bonus-btn {
border-color: var(--court);
box-shadow: 4px 4px 0 var(--court);
}
.respin-btn.bonus-btn:hover:not(:disabled) {
box-shadow: 2px 2px 0 var(--court);
}
.respin-btn.bonus-btn .respin-token {
background: var(--court);
color: var(--chalk);
}
/* Waiting on the ad. Held at full opacity even though it's disabled — this is
the button the player just pressed, and dimming it reads as "didn't work". */
.respin-btn.bonus-btn.is-loading {
opacity: 1;
cursor: progress;
box-shadow: 2px 2px 0 var(--court);
transform: translate(2px, 2px);
}
/* A spent respin that a bonus credit has brought back to life. The strike
stays — the free one really is gone — and the token relights in court
orange, so the row reads as "used, and still pressable" rather than either
one on its own. */
.respin-btn.is-used.is-bonus .respin-token {
background: var(--court);
color: var(--chalk);
}
.blind-note.is-revealed {
border-style: solid;
border-color: var(--gold);
color: var(--ink);
}
/* Share modal */
.share-modal {
width: min(500px, 100%);
border-radius: 16px;
overflow: hidden;
}
.share-card {
overflow: hidden;
background: var(--surface);
color: var(--ink);
}
.share-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px;
background: var(--ink-bg);
color: var(--chalk);
}
.share-card-label {
font: 700 0.68rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 247, 223, 0.5);
}
.share-card-score-block {
text-align: right;
padding-right: 4px;
}
.share-card-score {
display: block;
font: 900 2.2rem/0.85 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--gold);
}
.share-card-tier {
display: block;
margin-top: 4px;
font: 700 0.6rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 247, 223, 0.5);
}
.share-card-rows {
display: grid;
padding: 0 16px;
}
.share-row {
display: grid;
grid-template-columns: 90px 1fr auto auto;
align-items: center;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid rgba(21, 20, 19, 0.08);
}
.share-row-attr {
font: 700 0.58rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
}
.share-row-player {
font-family: "Playfair Display", Georgia, serif;
font-weight: 700;
font-size: 0.88rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0; /* allow the 1fr grid cell to shrink so the name truncates instead of overflowing */
color: var(--ink);
}
.share-row-meta {
font: 400 0.58rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--muted);
white-space: nowrap;
}
.share-row-score {
font: 700 0.88rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--ink);
min-width: 24px;
text-align: right;
}
.share-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: var(--ink-bg);
color: var(--chalk);
font: 700 0.6rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.share-card-url {
color: var(--gold);
}
.share-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 14px 16px;
border-top: 3px solid var(--ink);
background: var(--surface);
}
.share-btn {
padding: 11px 10px;
border: 2px solid var(--ink);
border-radius: 7px;
font: 700 0.72rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.03em;
text-transform: uppercase;
cursor: pointer;
transition: transform 120ms ease, box-shadow 120ms ease;
box-shadow: 4px 4px 0 var(--ink);
}
.share-btn:hover {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 var(--ink);
}
.share-btn-image {
grid-column: 1 / -1;
/* --court #c9673d + cream = 3.57:1 (fails AA); --court-dark = ~7.9:1. */
background: var(--court-dark);
color: var(--chalk);
padding: 13px;
font-size: 0.8rem;
}
.share-btn-text {
background: var(--surface);
color: var(--ink);
}
.share-btn-x {
background: #000;
color: #fff;
}
.share-btn-copy {
background: var(--gold);
color: var(--ink);
}
.share-btn-leaderboard {
grid-column: 1 / -1;
background: var(--gold);
color: var(--ink);
font-weight: 800;
}
/* How to Play link */
.help-link {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 18px;
padding: 10px 16px;
background: var(--surface);
border: 3px solid var(--ink);
color: var(--ink);
box-shadow: 4px 4px 0 var(--ink);
font: 900 0.82rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: transform 140ms ease, box-shadow 140ms ease;
}
.help-link::before {
content: "?";
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--court);
color: var(--chalk);
font-weight: 900;
}
.help-link:hover {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 var(--ink);
}
/* The two mode-screen chips share a wrapping row so they sit side by side on a
wide screen and stack cleanly on a phone, without either one stretching. */
.mode-copy-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.mode-copy-ctas .help-link { margin-top: 18px; }
/* Sits beside "How to Play" and opens the Game Modes page. Same chip, different
glyph — it's a sibling action, not a second help button. */
.help-link-modes { text-decoration: none; }
.help-link-modes::before {
content: "🎮";
border-radius: 4px;
background: transparent;
font-size: 0.95rem;
}
/* Persistent header help button (reachable mid-game) */
.help-top {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
padding: 8px 14px;
background: var(--surface);
border: 2px solid var(--ink);
color: var(--ink);
box-shadow: 4px 4px 0 var(--ink);
font: 900 0.74rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
transition: transform 140ms ease, box-shadow 140ms ease;
}
.help-top-mark {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--court);
color: var(--chalk);
font-weight: 900;
}
.help-top:hover {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 var(--ink);
}
/* Support / "buy the dev a coffee" — always-visible header CTA so visitors who
never finish a full game still see the ask. Mirrors .help-top but in gold.
It carries the margin-left:auto so it + Help + score-tile group on the right. */
/* Hero action cluster: GOAT Pass, How to Play, Past Dailies, Game Modes.
One wrapping right-aligned row of identically-sized chips — they wrap as a
group rather than any single one claiming its own line. */
.hero-actions {
display: flex; flex-wrap: wrap; justify-content: flex-end;
gap: 8px; margin-left: auto;
}
.hero-actions .coffee-top,
.hero-actions .help-top { margin-left: 0; text-decoration: none; }
/* The emoji marks aren't glyphs on a coloured disc like the "?" is — they carry
their own colour, so they get a transparent well instead of the court circle. */
.help-top-mark-plain {
background: transparent;
color: inherit;
font-size: 0.95rem;
}
.coffee-top {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
padding: 8px 14px;
background: var(--gold);
border: 2px solid var(--ink);
color: var(--ink);
box-shadow: 4px 4px 0 var(--ink);
font: 900 0.74rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: transform 140ms ease, box-shadow 140ms ease;
}
.coffee-top-mark {
font-size: 1rem;
line-height: 1;
}
.coffee-top:hover {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 var(--ink);
}
/* How to Play modal */
/* Centred when the modal fits, scrollable when it doesn't — and it has to be
both, in one rule, without asking how big the screen is.
`align-items: center` alone is the classic flex trap: once the child is
taller than the overlay it gets centred on the overflow too, so it hangs off
BOTH ends and the part above the top edge cannot be scrolled to at all. A
phone held sideways is 390px tall, which is shorter than several of these
modals, so the jacket modal's buy button sat below the fold with nothing to
scroll and the heading sat above the top of the screen.
There was already a fix for this, keyed on `max-width: 640px` — but the real
condition is a SHORT viewport, not a narrow one, and a landscape phone is
844px wide. Hence `flex-start` plus `margin: auto` on the child, which is
the pair that centres while there is room and then degrades to top-aligned
and scrollable instead of clipping. No breakpoint, so it cannot miss a shape
nobody thought to test. */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 20px;
overflow-y: auto;
overscroll-behavior: contain; /* don't scroll the board behind it */
background: rgba(21, 20, 19, 0.72);
}
.modal-overlay > * { margin: auto; }
.modal {
width: min(540px, 100%);
min-width: 0; /* let the modal obey its width instead of growing to content (mobile overflow) */
border: 4px solid var(--ink);
background: var(--surface);
box-shadow: 8px 8px 0 var(--ink);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 10px;
border-bottom: 3px solid var(--ink);
background: var(--ink-bg);
color: var(--chalk);
}
.modal-header .kicker {
margin: 0;
color: var(--chalk);
}
.modal-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 2px solid rgba(255, 247, 223, 0.85);
color: var(--chalk);
font-size: 1rem;
cursor: pointer;
transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.08s ease;
}
.modal-close:hover {
background: rgba(255, 247, 223, 0.12);
border-color: var(--chalk);
transform: translate(2px, 2px);
box-shadow: none;
}
.modal-body {
padding: 16px;
display: grid;
gap: 18px;
}
.modal-rule {
display: flex;
gap: 14px;
align-items: flex-start;
}
.modal-num {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 2px solid var(--ink);
background: var(--gold);
font: 700 0.72rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.modal-rule strong {
display: block;
margin-bottom: 4px;
font-family: "Playfair Display", Georgia, serif;
font-size: 1rem;
font-weight: 700;
}
.modal-rule p {
margin: 0;
color: var(--muted);
font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.78rem;
line-height: 1.5;
}
/* Draft toast — mobile only, shows above thumb zone after each pick */
.draft-toast {
position: fixed;
bottom: max(24px, env(safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%) translateY(8px);
z-index: 200;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
border: 2px solid var(--ink);
background: var(--ink-bg);
color: var(--chalk);
box-shadow: 5px 5px 0 var(--ink);
font: 700 0.7rem/1.2 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 180ms ease, transform 180ms ease;
}
.draft-toast.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.draft-toast-dot {
flex: 0 0 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--toast-dot-color, var(--gold));
}
@media (max-width: 640px) {
/* Stack the footer and let the links wrap centered so nothing runs off-screen */
.footer-inner {
flex-direction: column;
justify-content: center;
text-align: center;
gap: 10px;
font-size: 0.64rem;
}
.footer-links {
gap: 6px;
row-gap: 5px;
}
.round-card {
flex-direction: column;
}
.cards,
.cards.is-result,
.build-list {
grid-template-columns: 1fr;
}
/* Two picks per row on a phone, on every board where the job is choosing
between the cards: the Daily and Classic Blind board (#cards) and the
Head to Head draft (#h2hCards).
One card per row meant a single choice filled the screen and the rest sat
below the fold, so comparing them — the entire job of a blind round — was
a scroll instead of a glance. The card is condensed to earn the narrower
column: smaller jersey, tighter padding, a shorter label column on the
bars, and no floor under its height. That last one matters most in Head
to Head, where the card carries no rating bars at all and the 154px
minimum was padding a name and a team line out to half a screen.
Excluded: .is-result, the finished nine-card build, which stays one per
row where it is actually readable. */
:is(#cards:not(.is-result), #h2hCards) {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
/* A golden round deals a single card. Let it keep the full width rather
than sitting in a half-empty row, and keep it at full size. */
:is(#cards:not(.is-result), #h2hCards) .card:only-child {
grid-column: 1 / -1;
}
/* No floor under the height, and the art band sized to its own content so
the body takes up any slack instead. Grid rows stretch to the tallest
card in the row, and without this the card with the shorter name donated
that extra height to its coloured band — so two cards side by side had
bands of visibly different depth. */
:is(#cards:not(.is-result), #h2hCards) .card:not(:only-child) {
min-height: 0;
grid-template-rows: auto 1fr;
}
:is(#cards:not(.is-result), #h2hCards) .card:not(:only-child) .card-art {
min-height: 44px;
gap: 6px;
padding: 6px;
}
:is(#cards:not(.is-result), #h2hCards) .card:not(:only-child) .jersey {
width: 32px;
height: 37px;
font-size: 0.72rem;
}
:is(#cards:not(.is-result), #h2hCards) .card:not(:only-child) .attribute-score {
font-size: 0.58rem;
}
:is(#cards:not(.is-result), #h2hCards) .card:not(:only-child) .attribute-score span {
font-size: 1.15rem;
}
:is(#cards:not(.is-result), #h2hCards) .card:not(:only-child) .card-body {
padding: 6px;
}
:is(#cards:not(.is-result), #h2hCards) .card:not(:only-child) h3 {
font-size: 0.92rem;
}
:is(#cards:not(.is-result), #h2hCards) .card:not(:only-child) .meta {
margin-bottom: 5px;
font-size: 0.54rem;
}
/* 52px of label in a ~160px card left the track too short to read as a
bar at all. */
:is(#cards:not(.is-result), #h2hCards) .card:not(:only-child) .bar {
grid-template-columns: 36px 1fr 18px;
gap: 4px;
font-size: 0.5rem;
}
:is(#cards:not(.is-result), #h2hCards) .card:not(:only-child) .blind-note {
min-height: 0;
padding: 6px;
font-size: 0.53rem;
}
#resetButton,
#shareButton {
width: 100%;
min-height: 44px;
}
#backButton,
.modal-close {
min-height: 44px;
min-width: 44px;
}
.respin-btn {
min-height: 44px;
min-width: 44px;
padding: 0 16px;
}
.body-card {
height: auto;
min-height: 300px;
}
.share-btn {
min-height: 44px;
font-size: 0.78rem;
}
.help-top-text,
.coffee-top-text {
display: none;
}
.help-top,
.coffee-top {
padding: 8px 10px;
}
/* The settings dropdown used to be flipped to `left: 0` here, to open
rightward "so it stays on screen". That was true of the old layout, where
the gear sat near the LEFT of a narrow header. It is now the last thing in
.hub-header-right, hard against the right edge of the screen — so opening
rightward pushed a 184px menu straight off it: at 390px wide the menu ran
from x=338 to x=522, and the controls inside it could not be tapped at all.
The base rule anchors it to the button's right edge, which is correct at
every width, so this override is deliberately gone. */
}
@media (max-width: 480px) {
.share-buttons {
grid-template-columns: 1fr 1fr;
}
.share-btn-copy {
grid-column: 1 / -1;
}
}
/* Focus states — keyboard + accessibility.
--ink is the neutral foreground and always contrasts with the page in both
themes (~13:1 on paper, ~8:1 on court/gold buttons), so the ring stays clearly
visible. Gold failed here — ~1.5:1 on the cream paper. On-dark/colored buttons
that need a light ring are handled by the --chalk override below. */
:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
.modal-close:focus-visible,
.help-top:focus-visible,
.coffee-top:focus-visible,
.help-link:focus-visible {
outline-color: var(--chalk);
}
/* Cards grid at tablet: 2 columns so cards stay readable */
@media (min-width: 641px) and (max-width: 930px) {
.cards.is-result {
grid-template-columns: repeat(2, 1fr);
}
}
/* ===== Accounts (optional login) + global daily leaderboard ===== */
.account-bar {
width: min(1260px, calc(100% - 20px));
margin: 10px auto 0;
padding: 9px 14px;
border: 2px solid var(--ink);
background: var(--surface);
box-shadow: 4px 4px 0 var(--ink);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.account-auth { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.account-signedout, .account-signedin { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.account-msg, .account-who { font-size: 0.8rem; color: var(--ink); }
.account-btn {
padding: 8px 14px;
border: 2px solid var(--ink);
background: var(--ink-bg);
color: var(--chalk);
box-shadow: 3px 3px 0 var(--ink);
font: 900 0.76rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: transform 140ms ease, box-shadow 140ms ease;
}
.account-btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.account-btn-google, .account-btn-ghost, .account-btn-trophy { background: var(--surface); color: var(--ink); }
.account-btn-google { display: inline-flex; align-items: center; gap: 9px; }
.account-btn-trophy { background: var(--gold); }
/* "Play past Dailies" button at the top of the Daily stats tab. */
.stats-archive-cta { max-width: 620px; margin: 0 auto 14px; display: flex; justify-content: flex-end; }
/* The Career tab's two CTAs sit side by side rather than stacking as separate
right-aligned rows, and wrap together when the pair won't fit. */
.stats-career-cta { gap: 10px; flex-wrap: wrap; align-items: center; }
.stats-archive-cta .account-btn { background: var(--gold); }
/* Career of the Day. Gold-edged so it reads as the marquee thing on the setup
screen without competing with the court-orange panels below it. */
.career-cotd { border-color: var(--gold) !important; }
.career-cotd-line {
margin: 6px 0 10px;
font: 400 0.8rem/1.55 "Space Mono", ui-monospace, monospace;
color: var(--muted);
}
.career-cotd-setup {
margin: 0 0 12px;
padding: 10px 12px;
border: 2px solid var(--ink);
background: rgba(230, 184, 67, 0.12);
font: 400 0.82rem/1.6 "Space Mono", ui-monospace, monospace;
color: var(--ink);
}
.career-cotd.locked .career-vault-lock { margin-bottom: 0; }
/* Career of the Day: the result, and the board it ranks on. */
.career-cotd-done-line {
margin: 6px 0 12px;
font: 400 0.82rem/1.6 "Space Mono", ui-monospace, monospace;
color: var(--ink);
}
.career-cotd-result {
display: grid;
gap: 2px;
margin: 0 auto 14px;
max-width: 420px;
padding: 14px 16px;
border: 3px solid var(--gold);
background: rgba(230, 184, 67, 0.12);
text-align: center;
}
.career-cotd-result-label {
font: 700 0.6rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.career-cotd-result-tier {
font: 400 0.86rem/1.45 "Space Mono", ui-monospace, monospace;
color: var(--ink);
}
.career-cotd-result-tier strong { font-weight: 900; font-size: 1.1rem; }
/* The career's score, on every verdict card. The tier is the headline; this is
the number the daily board ranks on. */
.career-legacy-score {
margin: 2px 0 10px;
font: 400 0.72rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.career-legacy-score b {
font: 900 1.5rem/1 "Playfair Display", Georgia, serif;
letter-spacing: 0;
color: var(--ink);
margin-right: 6px;
}
/* The board opens as a full-screen page over the career, the way the Daily
board takes over the main game. It reuses .lb-row/.lb-rank/.lb-score so the
two read as one feature rather than two different leaderboards. */
.cotd-page {
position: fixed;
inset: 0;
z-index: 1200;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--paper);
opacity: 0;
transition: opacity 0.18s ease;
}
.cotd-page.in { opacity: 1; }
.cotd-page-inner {
max-width: 680px;
margin: 0 auto;
padding: 22px 16px 48px;
}
.cotd-page-body { margin-top: 6px; }
body.cotd-page-open { overflow: hidden; }
/* The list scrolls with the PAGE here rather than inside its own box. .lb-list
caps itself at 56vh and scrolls internally, which is right for the panel it
was written for and wrong here — and it is defined later in this file, so a
bare .cotd-list would lose the tie and leave a scrollbox inside a scrolling
page. Hence the descendant selector: it has to out-specify, not just follow. */
.cotd-page .lb-list { max-height: none; overflow-y: visible; gap: 8px; }
/* A second line under the name, spanning the row's full width. */
.cotd-page .lb-row { grid-template-columns: 44px 1fr auto; row-gap: 2px; }
.cotd-sub {
grid-column: 1 / -1;
padding-left: 54px;
font: 400 0.68rem/1.35 "Space Mono", ui-monospace, monospace;
color: var(--muted);
}
.lb-row-me .cotd-sub { color: #4a3c14; }
/* Delete a career. Small and quiet — it sits on every vault row, so it must
not compete with the score beside it. */
.career-vault-del {
border: 0;
background: transparent;
color: var(--muted);
font: 700 1.1rem/1 "Space Mono", ui-monospace, monospace;
padding: 2px 6px;
cursor: pointer;
opacity: 0.5;
}
.career-vault-del:hover { opacity: 1; color: #c0392b; }
.career-vault-del[disabled] { opacity: 0.25; cursor: default; }
/* The vault upsell. Free keeps the latest career, the Pass keeps them all —
this is the line that says how many are waiting. Gold-edged so it reads as
a locked reward rather than an error. */
.career-vault-lock {
margin: 12px auto 4px;
max-width: 620px;
padding: 12px 14px;
border: 2px dashed var(--gold);
background: rgba(230, 184, 67, 0.09);
font: 400 0.78rem/1.55 "Space Mono", ui-monospace, monospace;
color: var(--ink);
}
.career-vault-lock strong { display: block; margin-bottom: 4px; }
.career-vault-lock-btn {
display: inline-block;
margin-top: 9px;
padding: 8px 14px;
border: 2px solid var(--ink);
background: var(--gold);
color: #151413;
font: 900 0.72rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
}
.career-vault-lock-btn:hover { filter: brightness(1.06); }
/* Career Mode isn't live yet, so its button is a marker rather than a way in.
It drops the gold call-to-action fill for the same dashed treatment the
Game Modes page uses for the modes that aren't open. */
.stats-archive-cta .stats-soon-btn {
background: transparent;
border: 2px dashed var(--ink);
color: var(--ink);
opacity: 0.6;
cursor: not-allowed;
}
/* Past-Daily archive (GOAT Pass) — match the leaderboard/stats page framing so
the header clears the score tile above it instead of overlapping it. */
.archive-page { padding: 8px 4px 40px; animation: lb-fade 0.2s ease; }
@media (max-width: 640px) { .archive-page { padding: 6px 8px 40px; } }
.archive-list { display: grid; gap: 8px; max-width: 640px; margin: 0 auto; padding: 4px 0 40px; }
.arch-row {
display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px;
width: 100%; text-align: left; cursor: pointer; padding: 12px 14px;
border: 2px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink);
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.arch-row:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.arch-num { font: 900 1rem/1 "Space Mono", ui-monospace, monospace; color: var(--court); }
.arch-meta { display: flex; flex-direction: column; gap: 2px; }
.arch-date { font: 700 0.95rem/1.1 "Playfair Display", Georgia, serif; color: var(--ink); }
.arch-tag { font: 800 0.56rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--court); }
.arch-score { font: 800 0.72rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); white-space: nowrap; }
.arch-empty { text-align: center; color: var(--muted); font-family: "Playfair Display", Georgia, serif; padding: 30px; }
.players-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 11px; border-radius: 999px;
background: var(--surface); border: 1.5px solid var(--ink);
font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
white-space: nowrap;
}
.players-pill span:first-child { color: var(--court); }
/* Google's own four-colour "G", per their Sign-In branding guidelines — it used
to be a plain letter G in a blue circle, which is not their mark and doesn't
read as a Google button. The logo is never recoloured, so it sits on a white
disc with a hairline keyline: that keeps it legible on the cream page, on the
dark theme, and on the gold/court buttons, and gives it the clear space the
guidelines ask for. Inline SVG rather than a background-image so it survives
forced-colors mode and printing. */
.g-mark {
display: grid; place-items: center;
flex: 0 0 auto;
width: 20px; height: 20px; border-radius: 50%;
background: #fff;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.g-mark svg { display: block; width: 13px; height: 13px; }
#viewLeaderboardBtn {
flex: 0 0 auto;
min-height: 44px;
padding: 0 14px;
border: 2px solid var(--ink);
background: var(--gold);
color: var(--ink);
box-shadow: 5px 5px 0 var(--ink);
font: 900 0.86rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
}
#viewLeaderboardBtn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
/* Leaderboard modal */
.lb-date { margin: 0 0 12px; font: 700 0.74rem/1.2 "Space Mono", ui-monospace, monospace; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.lb-list { display: grid; gap: 6px; max-height: 56vh; overflow-y: auto; }
.lb-empty { color: var(--muted); font: 700 0.86rem/1.4 "Space Mono", ui-monospace, monospace; }
.lb-retry { margin-top: 10px; font: 700 0.78rem/1 "Space Mono", ui-monospace, monospace; background: var(--court); color: #fff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 9px 14px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; }
.lb-retry:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.lb-row {
display: grid;
grid-template-columns: 44px 1fr auto;
align-items: center;
gap: 10px;
padding: 9px 12px;
border: 2px solid var(--ink);
background: var(--paper);
}
.lb-row-me { background: var(--gold); }
.lb-rank { font: 900 1rem/1 "Space Mono", ui-monospace, monospace; text-align: center; }
.lb-name {
font: 700 0.92rem/1.2 "Playfair Display", Georgia, serif;
display: flex; align-items: center; gap: 6px; min-width: 0;
}
/* The name truncates; the rank badge keeps its full width and never clips.
Prestige wraps the chip in .grank-laurel, so EITHER can be the flex item.
Note what is NOT here: overflow on the row. Truncation is .lb-nm's job and
.lb-nm does it itself, so clipping the parent as well bought nothing and cost
the badge its lit state — a GOAT chip's glow reaches 10px past its border and
a prestige laurel's wings 3px, and every one of those pixels was being sliced
off flush with the text. The badge is the thing people paid for; it renders
whole. */
.lb-name .lb-nm, .lb-pod-name .lb-nm {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-name > .grank-chip, .lb-name > .grank-laurel,
.lb-pod-name > .grank-chip, .lb-pod-name > .grank-laurel { flex: none; width: max-content; }
.lb-pod-name { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; flex-wrap: wrap; }
.lb-score {
display: grid; place-items: center;
min-width: 42px; height: 34px;
background: var(--ink-bg); color: var(--chalk);
font: 950 1.05rem/1 "Space Mono", ui-monospace, monospace;
}
.lb-row-me .lb-score { background: var(--court-dark); }
.lb-hint { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed rgba(21,20,19,0.25); font: 700 0.8rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--green); }
/* Guest → sign-in nudge at the top of the daily board */
.lb-guest-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; border: 2px solid var(--court); background: rgba(201, 103, 61, 0.09); box-shadow: 3px 3px 0 var(--ink); padding: 14px 16px; margin: 0 0 14px; }
.lb-guest-txt { margin: 0; max-width: 44ch; font: 500 0.92rem/1.45 "Playfair Display", Georgia, serif; color: var(--ink); }
.lb-guest-txt strong { font-weight: 800; }
.lb-guest-cta .lb-guest-btn { flex: none; }
/* ===== 100 Club ============================================================
Reuses .lb-row/.lb-rank/.lb-name so it reads as a sibling of the Daily board
rather than a second, unrelated leaderboard. The one structural difference is
a fourth column: every score here is 100, so the interesting number is WHEN. */
.account-boards { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.account-btn-club { background: var(--court); color: var(--chalk); }
[data-theme="dark"] .account-btn-club { color: #151413; }
/* Temporary notice explaining the Classic board's switch from weekly to daily.
Loud enough to be read before the list is, quiet enough not to look like an
error — it's the same tinted-court treatment as the guest sign-in nudge. */
.club-note {
max-width: 620px; margin: 0 auto 14px; padding: 10px 14px;
border: 2px solid var(--court); background: rgba(201, 103, 61, 0.09);
box-shadow: 3px 3px 0 var(--ink);
font: 600 0.82rem/1.45 "Playfair Display", Georgia, serif;
color: var(--ink); text-align: center;
}
.club-row { grid-template-columns: 44px 1fr auto auto; }
.club-when {
font: 700 0.7rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.03em; text-transform: uppercase;
color: var(--muted); white-space: nowrap;
}
.lb-row-me .club-when { color: #4a3c14; }
/* Every row is a 100, so the score is a gold seal rather than a ranking. */
.club-score { background: var(--gold); color: #151413; }
.lb-row-me .club-score { background: var(--ink-bg); color: var(--chalk); }
/* First to 100 in the week is the only placing that means anything here. */
.club-row-first { border-width: 3px; box-shadow: 3px 3px 0 var(--gold); }
.club-first-tag {
flex: none;
font: 800 0.55rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.08em; text-transform: uppercase;
color: #151413; background: var(--gold);
border: 1.5px solid var(--ink); border-radius: 999px;
padding: 3px 7px; white-space: nowrap;
}
@media (max-width: 520px) {
/* The timestamp drops under the name instead of squeezing it off-screen. */
.club-row { grid-template-columns: 34px 1fr auto; }
.club-when { grid-column: 2; grid-row: 2; text-align: left; }
/* A rank chip AND the tag together left a long name one letter wide on a
small phone. The gold outline and the "1" already say who was first, so
the tag is the redundant one and it goes. */
.club-first-tag { display: none; }
}
/* ===== Full-screen leaderboard page ===== */
.leaderboard-page {
padding: 8px 4px 40px;
animation: lb-fade 0.2s ease;
}
@keyframes lb-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lb-page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 22px;
}
.lb-tabs { display: flex; gap: 0; max-width: 620px; margin: 0 auto 20px; border-bottom: 2px solid rgba(21,20,19,0.15); }
.lb-tab {
flex: 1; padding: 9px 0 8px;
font: 700 0.75rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.07em; text-transform: uppercase;
background: transparent; border: none;
border-bottom: 3px solid transparent; margin-bottom: -2px;
cursor: pointer; color: var(--muted);
transition: color 0.12s, border-color 0.12s;
}
.lb-tab-active { border-bottom-color: var(--court); color: var(--ink); }
.lb-page-title {
margin: 4px 0 6px;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(1.5rem, 4vw, 2.4rem);
line-height: 0.96;
}
.lb-back {
flex-shrink: 0;
padding: 10px 16px;
border: 2px solid var(--ink);
background: var(--ink-bg);
color: var(--chalk);
box-shadow: var(--shadow);
font: 800 0.78rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.lb-back:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
/* Podium — rendered 2nd · 1st · 3rd, 1st centered + tallest */
.lb-podium {
display: grid;
grid-template-columns: 1fr 1.2fr 1fr;
align-items: end;
gap: 10px;
max-width: 620px;
margin: 0 auto 26px;
}
.lb-pod {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
padding: 14px 8px 0;
border: 3px solid var(--ink);
background: var(--paper);
box-shadow: var(--shadow);
min-width: 0;
}
.lb-pod-medal { font-size: 1.8rem; line-height: 1; }
.lb-pod-rank {
font: 950 0.7rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.1em;
opacity: 0.55;
}
.lb-pod-name {
font-family: "Playfair Display", Georgia, serif;
font-weight: 800;
font-size: 0.96rem;
line-height: 1.05;
max-width: 100%;
}
/* No overflow/ellipsis here either. This column is laid out as a wrapping flex
row further down, which makes text-overflow and white-space dead letters on
it anyway — .lb-nm carries the truncation. All the overflow did was cut the
badge's glow and laurel off at the podium card's edge. */
.lb-pod-score {
display: grid;
place-items: center;
min-width: 48px;
padding: 4px 10px;
margin-top: 2px;
background: var(--ink-bg);
color: var(--chalk);
font: 950 1.2rem/1 "Space Mono", ui-monospace, monospace;
}
.lb-pod-step {
margin-top: 8px;
width: 100%;
border-top: 3px solid var(--ink);
}
/* 1st place — gold, biggest, tallest step */
.lb-pod-1 { background: var(--gold); padding-top: 18px; }
.lb-pod-1 .lb-pod-medal { font-size: 2.6rem; }
.lb-pod-1 .lb-pod-name { font-size: 1.18rem; }
.lb-pod-1 .lb-pod-score { font-size: 1.5rem; min-width: 58px; }
.lb-pod-1 .lb-pod-step { height: 56px; }
/* 2nd place — medium */
.lb-pod-2 .lb-pod-medal { font-size: 2.1rem; }
.lb-pod-2 .lb-pod-step { height: 36px; }
/* 3rd place — smallest */
.lb-pod-3 .lb-pod-step { height: 22px; }
.lb-pod-me { outline: 3px solid var(--court-dark); outline-offset: 2px; }
/* On the full page, let the page scroll instead of an inner scrollbar */
.leaderboard-page .lb-list { max-height: none; overflow: visible; max-width: 620px; margin: 0 auto; }
.lb-empty-rest { text-align: center; padding: 14px; }
.leaderboard-page .lb-hint { max-width: 620px; margin: 16px auto 0; text-align: center; }
/* Player count */
.lb-player-count {
max-width: 620px; margin: 0 auto 14px;
font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
text-align: center;
}
/* Score distribution bar */
.lb-dist { max-width: 620px; margin: 0 auto 20px; display: grid; gap: 5px; }
.lb-dist-row { display: grid; grid-template-columns: 44px 1fr 32px; align-items: center; gap: 7px; }
.lb-dist-label { font: 700 0.64rem/1 "Space Mono", ui-monospace, monospace; color: var(--muted); text-align: right; }
.lb-dist-track { height: 7px; background: rgba(21,20,19,0.1); border-radius: 4px; overflow: hidden; }
[data-theme="dark"] .lb-dist-track { background: rgba(243,236,219,0.12); }
.lb-dist-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.lb-dist-pct { font: 700 0.64rem/1 "Space Mono", ui-monospace, monospace; color: var(--muted); }
/* Come back tomorrow nudge */
.lb-tomorrow {
max-width: 620px; margin: 28px auto 0; padding: 14px 18px;
border: 2px dashed rgba(21,20,19,0.2); border-radius: 8px;
display: flex; flex-direction: column; align-items: center; gap: 4px;
text-align: center;
}
[data-theme="dark"] .lb-tomorrow { border-color: rgba(243,236,219,0.2); }
.lb-tomorrow-label {
font: 700 0.7rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.lb-tomorrow-num {
font: 900 1.1rem/1.2 "Playfair Display", Georgia, serif; color: var(--ink);
}
.lb-tomorrow-countdown {
font: 700 1.4rem/1 "Space Mono", ui-monospace, monospace;
color: var(--court); letter-spacing: 0.04em;
}
/* ===== Settings menu (account bar) ===== */
.account-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.account-signedin-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.settings-wrap { position: relative; display: inline-block; }
.account-btn-gear[aria-expanded="true"] { background: var(--ink-bg); color: var(--chalk); }
.settings-menu {
position: absolute;
right: 0;
top: calc(100% + 6px);
z-index: 40;
display: flex;
flex-direction: column;
min-width: 184px;
border: 2px solid var(--ink);
background: var(--paper);
box-shadow: var(--shadow);
}
.settings-item {
padding: 11px 14px;
text-align: left;
background: none;
border: none;
border-bottom: 1px solid rgba(21, 20, 19, 0.18);
cursor: pointer;
font: 800 0.78rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--ink);
}
.settings-item:last-child { border-bottom: none; }
.settings-item:hover { background: var(--gold); }
.settings-item-danger { color: #a8321f; }
.settings-item-danger:hover { background: #b83a2a; color: #fff; }
[data-theme="dark"] .settings-item:hover { color: #151413; }
/* Theme toggle (segmented Light | Dark) */
.settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid rgba(127, 116, 92, 0.32);
}
.settings-row-label {
font: 800 0.72rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.theme-toggle { display: inline-flex; border: 2px solid var(--ink); }
.theme-opt {
padding: 6px 11px;
background: var(--surface);
color: var(--ink);
font: 800 0.7rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
}
.theme-opt + .theme-opt { border-left: 2px solid var(--ink); }
.theme-opt[aria-pressed="true"] { background: var(--ink-bg); color: var(--chalk); }
/* ===== My Builds + handle modals ===== */
#saveBuildButton {
flex: 0 0 auto;
min-height: 44px;
padding: 0 14px;
border: 2px solid var(--ink);
background: var(--surface);
color: var(--ink);
box-shadow: 5px 5px 0 var(--ink);
font: 900 0.86rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
}
#saveBuildButton:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.save-name-label {
display: block;
font: 900 0.72rem/1.3 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.save-name-input {
width: 100%;
padding: 12px;
border: 2px solid var(--ink);
background: var(--paper);
font: 700 1rem/1.2 "Space Mono", ui-monospace, monospace;
color: var(--ink);
}
.save-status { min-height: 1.1em; margin: 10px 0 0; font: 700 0.78rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--green); }
.save-confirm-btn {
width: 100%;
margin-top: 12px;
padding: 12px;
border: 2px solid var(--ink);
background: var(--ink-bg);
color: var(--chalk);
box-shadow: 4px 4px 0 var(--ink);
font: 900 0.86rem/1 "Space Mono", ui-monospace, monospace;
text-transform: uppercase;
cursor: pointer;
}
.save-confirm-btn:disabled { opacity: 0.6; cursor: default; }
/* align-content:start is load-bearing, not cosmetic. This is a grid with a
capped height, and once the rows overflowed it the tracks were compressed to
share the space instead of scrolling — at 40 saved builds every row rendered
about 5px tall, and at 250 about 4px. The list looked empty and the delete
buttons, though present, were too small to hit: the exact state an account
with a lot of builds got stuck in, with no way to prune its way out.
Anchoring the tracks to the start lets them keep their natural height and
lets the container actually scroll. */
.saved-list {
display: grid; align-content: start; grid-auto-rows: min-content;
gap: 8px; max-height: 60vh; overflow-y: auto;
}
.saved-empty { color: var(--muted); font: 700 0.86rem/1.4 "Space Mono", ui-monospace, monospace; }
/* Count + "Delete all" strip above the rows. Sticky because the list scrolls:
an account with hundreds of builds should not have to scroll back to the top
to find the one control that digs it out. */
.saved-bar {
position: sticky; top: 0; z-index: 2;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 4px 0 8px; background: var(--paper);
border-bottom: 2px solid var(--ink);
}
.saved-bar-count {
color: var(--muted);
font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.04em;
}
.saved-bar-clear, .saved-more, .saved-retry {
font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.04em;
border: 2px solid var(--ink); background: var(--surface); color: var(--ink);
min-height: 44px; padding: 8px 12px; cursor: pointer;
}
.saved-more { width: 100%; }
.saved-bar-clear:hover { background: var(--red); color: #fff; }
.saved-more:hover, .saved-retry:hover { background: var(--ink-bg); color: var(--chalk); }
.saved-bar-clear:disabled, .saved-more:disabled { opacity: 0.5; cursor: default; }
.saved-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 12px;
border: 2px solid var(--ink);
background: var(--paper);
}
.saved-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.saved-row-score {
flex: 0 0 auto;
display: grid; place-items: center;
min-width: 46px; height: 46px;
background: var(--ink-bg); color: var(--chalk);
font: 950 1.3rem/1 "Space Mono", ui-monospace, monospace;
}
.saved-row-meta { display: grid; min-width: 0; }
.saved-row-meta strong { font: 800 0.92rem/1.2 "Playfair Display", Georgia, serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-row-meta small { font: 700 0.68rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--muted); letter-spacing: 0.04em; }
.saved-row-del, .saved-row-share, .saved-row-rename {
flex: 0 0 auto;
width: 30px; height: 30px;
min-width: 44px; min-height: 44px;
border: 2px solid var(--ink);
background: var(--surface); color: var(--ink);
font-weight: 900; cursor: pointer;
}
.saved-row-share, .saved-row-rename { font-size: 0.8rem; }
.saved-row-rename:hover { background: var(--ink-bg); color: var(--chalk); }
.saved-row-share:hover { background: var(--ink-bg); color: var(--chalk); }
.saved-row-del:hover { background: var(--red); color: #fff; }
.saved-row-del:disabled { opacity: 0.5; cursor: default; }
/* ===== My Builds — expandable build detail ===== */
.saved-row { display: block; padding: 0; overflow: hidden; }
.saved-row-top {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 10px 12px;
}
.saved-row-head {
display: flex; align-items: center; gap: 12px;
flex: 1; min-width: 0;
text-align: left; background: none; border: 0; padding: 0;
color: inherit; cursor: pointer;
}
.saved-row-meta { display: grid; min-width: 0; }
.saved-row-caret { margin-left: auto; font-size: 0.85rem; transition: transform 160ms ease; }
.saved-row.is-open .saved-row-caret { transform: rotate(180deg); }
.saved-row-detail { display: grid; gap: 5px; padding: 0 12px 12px; max-height: 320px; overflow-y: auto; }
.bd-pick {
display: grid;
grid-template-columns: 40px minmax(0, 1.3fr) minmax(0, 1fr) 30px;
align-items: center; gap: 8px;
padding: 6px 9px;
background: var(--surface);
border: 1px solid rgba(21, 20, 19, 0.22);
}
.bd-stat { font: 900 0.64rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.03em; color: var(--court-dark); }
.bd-player { font: 700 0.82rem/1.2 "Playfair Display", Georgia, serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-team { font: 400 0.62rem/1.2 "Space Mono", ui-monospace, monospace; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-pscore { font: 950 0.92rem/1 "Space Mono", ui-monospace, monospace; text-align: right; }
.bd-golden { color: #b8860b; }
.bd-empty { font: 700 0.76rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--muted); padding: 4px 0; }
/* Danger zone — delete account tucked away at the bottom of the bar */
.account-danger-zone {
width: 100%;
display: flex;
justify-content: flex-end;
padding: 4px 0 0;
border-top: 1px solid rgba(255,255,255,0.07);
margin-top: 6px;
}
.account-delete {
padding: 0;
background: none;
border: none;
color: var(--muted);
font: 400 0.62rem/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.04em;
text-decoration: underline;
text-decoration-color: transparent;
text-transform: uppercase;
cursor: pointer;
opacity: 0.55;
transition: opacity 150ms ease, color 150ms ease, text-decoration-color 150ms ease;
}
.account-delete:hover { opacity: 1; color: var(--red); text-decoration-color: var(--red); }
.account-delete:disabled { opacity: 0.35; cursor: default; }
/* ===== Goat silhouette — subtle GOAT watermark on the Choose Mode panel ===== */
.mode-copy { position: relative; overflow: hidden; }
.goat-mark {
position: absolute;
right: -22px;
bottom: -26px;
width: 210px;
height: 210px;
fill: var(--chalk);
opacity: 0.11;
pointer-events: none;
}
@media (max-width: 930px) {
.goat-mark { width: 150px; height: 150px; right: -16px; bottom: -18px; }
}
/* Leaderboard mobile overrides — must come after base leaderboard rules */
@media (max-width: 640px) {
.leaderboard-page {
padding: 6px 8px 40px;
overflow-x: clip;
}
.lb-page-head {
align-items: center;
margin-bottom: 14px;
gap: 10px;
}
.lb-page-title {
font-size: 1.4rem;
margin: 2px 0 4px;
}
.lb-back {
padding: 8px 12px;
font-size: 0.72rem;
}
.lb-podium {
grid-template-columns: 1fr 1fr 1fr;
gap: 5px;
margin-bottom: 16px;
}
.lb-pod {
padding: 6px 3px 0;
gap: 2px;
box-shadow: 3px 3px 0 var(--ink);
}
.lb-pod-medal { font-size: 1.1rem; }
.lb-pod-name { font-size: 0.7rem; }
.lb-pod-score {
font-size: 0.82rem;
min-width: 32px;
padding: 3px 5px;
}
.lb-pod-1 { padding-top: 10px; }
.lb-pod-1 .lb-pod-medal { font-size: 1.4rem; }
.lb-pod-1 .lb-pod-name { font-size: 0.78rem; }
.lb-pod-1 .lb-pod-score { font-size: 0.95rem; min-width: 36px; }
.lb-pod-1 .lb-pod-step { height: 28px; }
.lb-pod-2 .lb-pod-medal { font-size: 1.2rem; }
.lb-pod-2 .lb-pod-step { height: 18px; }
.lb-pod-3 .lb-pod-step { height: 10px; }
.lb-row {
padding: 6px 8px;
gap: 6px;
grid-template-columns: 36px 1fr auto;
}
.lb-rank { font-size: 0.82rem; }
.lb-name { font-size: 0.82rem; }
.lb-score { min-width: 36px; height: 30px; font-size: 0.9rem; }
}
/* ── Share modal mobile fixes ──────────────────────────────────────────────── */
/* On short phones the modal overflows and the Ko-fi button disappears.
Solution: cap the modal at viewport height and let only the player rows scroll
so the action buttons and coffee CTA are always visible. */
@media (max-width: 640px) {
.modal-overlay {
align-items: flex-start;
padding: 12px 10px;
overflow-y: auto;
}
.share-modal {
max-height: calc(100dvh - 24px);
display: flex;
flex-direction: column;
overflow: hidden;
}
.share-card {
display: flex;
flex-direction: column;
min-height: 0;
}
.share-card-rows {
overflow-y: auto;
max-height: 36vh;
-webkit-overflow-scrolling: touch;
}
.share-card-header {
padding: 8px 12px;
}
.share-card-score {
font-size: 1.8rem;
}
.share-row {
padding: 6px 0;
}
.share-row-player {
font-size: 0.8rem;
}
.share-row-attr,
.share-row-meta {
font-size: 0.54rem;
}
.share-buttons {
padding: 10px 12px;
gap: 6px;
flex-shrink: 0;
}
.coffee-cta-wrap {
flex-shrink: 0;
padding: 0 12px 12px;
margin-top: 2px;
}
}
/* ===================================================================
GOAT Pass — optional one-time unlock ($2.99). Badge, unlock strip,
optimal reveal, exact rank, My Stats page, and the unlock modal.
=================================================================== */
/* Badge next to names on the leaderboard */
.goat-badge-sm { display: inline-flex; align-items: center; font-size: 0.92em; }
/* Gold name tint for GOAT Pass holders (theme-safe; gold rows keep dark text) */
.gp-name { color: var(--court-dark); }
[data-theme="dark"] .gp-name { color: var(--gold); }
.lb-row-me .gp-name, .lb-pod-1 .gp-name,
[data-theme="dark"] .lb-row-me .gp-name, [data-theme="dark"] .lb-pod-1 .gp-name { color: #151413; }
/* GOAT Pass tag on the share card */
.share-card-gp {
font: 700 0.58rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase;
color: #151413; background: var(--gold);
border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
/* Account-bar "GOAT Pass" pill */
.gp-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 999px;
background: var(--gold); color: var(--ink);
border: 2px solid var(--ink);
font: 700 0.66rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.gp-pill-btn { cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.gp-pill-btn:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
/* Results-screen container */
.goat-pass-result { margin-top: 12px; }
/* Unlock strip (non-pass, on results) */
.unlock-strip {
border: 3px solid var(--ink); background: var(--surface);
box-shadow: var(--shadow); padding: 14px 16px;
display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap;
}
.unlock-strip .us-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.unlock-strip .us-goat {
width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.5rem;
background: var(--gold); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.unlock-strip .us-txt strong { display: block; font: 800 0.98rem/1.15 "Playfair Display", Georgia, serif; }
.unlock-strip .us-txt span { display: block; margin-top: 3px; color: var(--muted); font: 400 0.8rem/1.35 "Playfair Display", Georgia, serif; }
.unlock-cta {
flex-shrink: 0; padding: 11px 18px; cursor: pointer; white-space: nowrap;
background: var(--court); color: #fff; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
font: 800 0.8rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase;
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.unlock-cta:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.tease-wrap { margin-top: 10px; }
.tease-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; filter: blur(4px); opacity: 0.5; pointer-events: none; user-select: none; }
/* Mini chips (used by reveal, tease, and history builds) */
.mini-chip { border: 2px solid var(--ink); background: var(--surface); padding: 7px 8px; box-shadow: 3px 3px 0 var(--ink); }
.mini-chip .mc-stat { display: flex; align-items: center; justify-content: space-between; gap: 6px; font: 950 0.56rem/1.1 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.mini-chip .mc-pscore { font: 950 0.72rem/1 "Space Mono", ui-monospace, monospace; color: var(--court); }
/* Name left, rating hard right. The name is the flexible half so a long one
wraps against the number instead of shoving it off the chip, and the rating
is tabular so a column of chips lines its digits up. */
.mini-chip .mc-name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 3px; font: 700 0.82rem/1.1 "Playfair Display", Georgia, serif; }
.mini-chip .mc-nm { min-width: 0; }
.mini-chip .mc-nscore { flex: 0 0 auto; font: 950 0.78rem/1 "Space Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--court); }
/* The gold ground is one colour in both themes, so its foreground has to be a
literal too. It used to be var(--ink), which flips light in dark mode and
left the highlighted chip — the one the card most wants you to read — as
pale text on gold. */
.mini-chip.mc-best { background: var(--gold); }
.mini-chip.mc-best .mc-stat, .mini-chip.mc-best .mc-name { color: #151413; }
.mini-chip.mc-best .mc-pscore, .mini-chip.mc-best .mc-nscore { color: var(--court-dark); }
/* Optimal build reveal card (pass, on results) */
.optimal-card { border: 3px solid var(--ink); background: var(--chalk); box-shadow: var(--shadow); padding: 16px; }
[data-theme="dark"] .optimal-card { background: var(--surface); }
.optimal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.optimal-kicker { font: 700 0.62rem/1.2 "Space Mono", ui-monospace, monospace; letter-spacing: 0.07em; text-transform: uppercase; color: var(--court); }
.optimal-score { font: 900 1.7rem/1 "Space Mono", ui-monospace, monospace; color: var(--ink); }
.optimal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.optimal-foot { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(21,20,19,0.25); text-align: center; font: 700 0.76rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--green); }
[data-theme="dark"] .optimal-foot { border-color: rgba(243,236,219,0.25); color: #4fc9a6; }
/* Exact rank banner on the leaderboard */
.lb-rank-banner { max-width: 620px; margin: 0 auto 18px; }
.lb-rank-card {
border: 3px solid var(--ink); background: var(--paper); box-shadow: var(--shadow);
padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.lb-rank-kicker { font: 700 0.6rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lb-rank-big { font: 900 1.9rem/1 "Space Mono", ui-monospace, monospace; margin-top: 5px; }
.lb-rank-big small { font-size: 0.95rem; color: var(--muted); }
.lb-rank-pct { text-align: center; flex-shrink: 0; padding: 9px 15px; background: var(--court); color: #fff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.lb-rank-pct-num { font: 900 1.5rem/1 "Space Mono", ui-monospace, monospace; }
.lb-rank-pct-label { margin-top: 3px; font: 700 0.56rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.07em; text-transform: uppercase; }
.lb-rank-teaser {
width: 100%; padding: 12px; cursor: pointer; text-align: center;
border: 2px dashed rgba(21,20,19,0.35); background: transparent; color: var(--ink);
font: 700 0.78rem/1.3 "Space Mono", ui-monospace, monospace; letter-spacing: 0.03em;
}
[data-theme="dark"] .lb-rank-teaser { border-color: rgba(243,236,219,0.35); }
.lb-rank-teaser strong { color: var(--court); }
.lb-rank-teaser:hover { background: rgba(201,103,61,0.08); }
/* Blurred exact rank (outside top 75) — the "so close, unlock to reveal" hook. */
.lb-rank-blur {
filter: blur(6px);
-webkit-filter: blur(6px);
user-select: none;
font-weight: 900;
color: var(--court);
padding: 0 2px;
}
/* My Stats page */
.stats-page { padding: 8px 4px 40px; animation: lb-fade 0.2s ease; }
/* Leaderboard "perfect build" reveal */
.lb-optimal { max-width: 620px; margin: 0 auto 20px; }
.lb-optimal-toggle {
width: 100%; padding: 11px 14px; cursor: pointer; text-align: center;
border: 2px dashed rgba(21,20,19,0.35); background: transparent; color: var(--ink);
font: 700 0.78rem/1.3 "Space Mono", ui-monospace, monospace; letter-spacing: 0.03em;
}
[data-theme="dark"] .lb-optimal-toggle { border-color: rgba(243,236,219,0.35); }
.lb-optimal-toggle strong { color: var(--court); }
.lb-optimal-toggle:hover { background: rgba(201,103,61,0.08); }
#lbOptimalBody { margin-top: 10px; }
/* The rewarded unlock. Solid court against the dashed outline of everything
else in this strip, because it is the button that actually does something —
the Pass line under it is the same offer without the video, and reads as the
quieter of the two on purpose. Court rather than gold: gold is the GOAT Pass
voice everywhere else on this screen, and the ad is not the Pass. */
.lb-optimal-toggle.lb-optimal-ad {
border: 2px solid var(--court);
background: var(--court);
color: var(--chalk);
box-shadow: 4px 4px 0 rgba(21,20,19,0.18);
margin-top: 10px;
}
.lb-optimal-toggle.lb-optimal-ad:first-child { margin-top: 0; }
.lb-optimal-toggle.lb-optimal-ad:hover:not(:disabled) {
background: var(--court);
box-shadow: 2px 2px 0 rgba(21,20,19,0.18);
transform: translate(2px, 2px);
}
/* Held at full opacity while the video runs — this is the button the player
just pressed, and dimming it reads as "didn't work". */
.lb-optimal-toggle.lb-optimal-ad:disabled { opacity: 1; cursor: progress; }
.lb-optimal-pass {
display: block; width: 100%; margin-top: 8px; padding: 6px 4px;
border: 0; background: transparent; cursor: pointer; text-align: center;
font: 700 0.7rem/1.3 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.03em; color: var(--muted);
}
.lb-optimal-pass strong { color: var(--court); }
.lb-optimal-pass:hover { color: var(--ink); }
.lb-optimal-locked {
text-align: center; padding: 11px 14px;
border: 2px dashed rgba(21,20,19,0.25); border-radius: 6px;
font: 700 0.78rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
[data-theme="dark"] .lb-optimal-locked { border-color: rgba(243,236,219,0.28); }
/* Home-screen GOAT Pass banner (visible to everyone but holders) */
.gp-promo {
width: min(1260px, calc(100% - 20px));
margin: 12px auto 0;
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; cursor: pointer; text-align: left;
background: var(--gold); color: var(--ink);
border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.gp-promo:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.gp-promo-goat { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.gp-promo-txt { flex: 1; font: 500 0.9rem/1.3 "Playfair Display", Georgia, serif; color: #151413; }
.gp-promo-txt strong { font-weight: 800; }
.gp-promo-price {
flex-shrink: 0; padding: 7px 13px; white-space: nowrap;
background: var(--court); color: #fff; border: 2px solid var(--ink);
font: 800 0.74rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.03em; text-transform: uppercase;
}
@media (max-width: 480px) {
.gp-promo { gap: 9px; padding: 10px 12px; }
.gp-promo-txt { font-size: 0.8rem; }
.gp-promo-price { padding: 6px 10px; font-size: 0.68rem; }
}
/* Make the top-bar GOAT Pass button pop */
#goatPassTop { background: var(--gold); color: #151413; }
#goatPassTop .coffee-top-mark { background: transparent; }
/* After-Daily "turn on reminders" nudge (soft ask before the browser prompt) */
.push-nudge {
position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
z-index: 60; width: min(520px, calc(100% - 24px));
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
padding: 12px 16px; background: var(--ink-bg); color: var(--chalk);
border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
animation: push-nudge-in 0.25s ease;
}
@keyframes push-nudge-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.push-nudge-txt { font: 700 0.86rem/1.3 "Playfair Display", Georgia, serif; flex: 1; min-width: 180px; }
.push-nudge-actions { display: flex; gap: 8px; flex-shrink: 0; }
.push-nudge-yes {
padding: 8px 14px; cursor: pointer; white-space: nowrap;
background: var(--gold); color: #151413; border: 2px solid var(--chalk);
font: 800 0.74rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase;
}
.push-nudge-no {
padding: 8px 12px; cursor: pointer; white-space: nowrap;
background: transparent; color: rgba(255,247,223,0.7); border: none;
font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase;
}
.push-nudge-no:hover { color: var(--chalk); }
/* The Gold Jacket roll on /about. Inline-flowing spans rather than a list:
126 names as rows would be most of the page, and the roll is a credit
line here — the Hall is where it gets a table. */
.about-jacket-roll { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.about-roll-one {
border: 1.5px solid var(--ink); padding: 3px 9px; border-radius: 999px;
font: 400 0.82rem/1.35 "Space Mono", ui-monospace, monospace;
min-width: 0; overflow-wrap: anywhere;
}
.about-roll-one b { font-weight: 800; color: var(--court-dark); }
[data-theme="dark"] .about-roll-one b { color: var(--gold); }
/* Trophy case */
.trophy-head { max-width: 620px; margin: 4px auto 14px; text-align: center; font: 700 0.88rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.05em; text-transform: uppercase; color: var(--court); }
.trophy-grid { max-width: 620px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* Section rule between trophy groups. The count on the right is the point:
it turns a long scroll into "Blind is 4/6" without counting cards. */
.trophy-sec {
max-width: 620px; margin: 22px auto 10px; display: flex; align-items: baseline; gap: 10px;
font: 800 0.72rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ink);
border-bottom: 1.5px solid rgba(21, 20, 19, 0.16); padding-bottom: 7px;
}
[data-theme="dark"] .trophy-sec { border-bottom-color: rgba(243, 236, 219, 0.2); }
.trophy-sec:first-of-type { margin-top: 4px; }
/* The jacket's six, below the 66 and deliberately not counted in them. Gold
rule rather than gold text: the label has to stay legible on both grounds
and --ink already does that, while gold on cream does not. The dark
override is not redundant — [data-theme="dark"] .trophy-sec outranks a lone
class, so without it the rule goes back to grey in dark mode. */
.trophy-sec-gold { margin-top: 30px; border-bottom: 2.5px solid var(--gold); }
[data-theme="dark"] .trophy-sec-gold { border-bottom-color: var(--gold); }
.trophy-sec span { margin-left: auto; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
.trophy {
border: 2px solid var(--ink); background: var(--surface); box-shadow: 3px 3px 0 var(--ink);
padding: 12px 10px; text-align: center; opacity: 0.5; filter: grayscale(0.75);
}
.trophy-done { opacity: 1; filter: none; background: var(--gold); }
.trophy-ico { font-size: 1.9rem; line-height: 1; }
.trophy-name { margin-top: 6px; font: 800 0.82rem/1.15 "Playfair Display", Georgia, serif; color: var(--ink); }
.trophy-desc { margin-top: 3px; font: 400 0.64rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.trophy-done .trophy-name, .trophy-done .trophy-desc { color: #151413; }
.trophy-done .trophy-desc { opacity: 0.72; }
.trophy-badge { margin-top: 8px; font: 800 0.58rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--court-dark); }
.trophy-progress { margin-top: 9px; height: 5px; background: rgba(21,20,19,0.14); border-radius: 3px; overflow: hidden; }
[data-theme="dark"] .trophy-progress { background: rgba(243,236,219,0.16); }
.trophy-progress-bar { height: 100%; background: var(--court); border-radius: 3px; }
.trophy-count { margin-top: 4px; font: 700 0.6rem/1 "Space Mono", ui-monospace, monospace; color: var(--muted); }
@media (max-width: 460px) { .trophy-grid { grid-template-columns: repeat(2, 1fr); } }
/* Mobile: keep every account-bar button, just tidy the layout so it's not cramped */
@media (max-width: 560px) {
.account-bar { gap: 8px; padding: 8px 10px; }
.account-signedin-actions, .account-right, .account-auth, .account-signedin { gap: 8px; }
.account-signedin-actions { flex-wrap: wrap; }
.account-btn { padding: 7px 11px; font-size: 0.72rem; }
.account-who { font-size: 0.74rem; }
}
.stats-panel-title { max-width: 620px; margin: 26px auto 10px; font: 700 0.7rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#statsBody { max-width: 620px; margin: 0 auto; }
/* Stat tiles */
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 4px; }
.stat-tile { border: 2px solid var(--ink); background: var(--surface); box-shadow: 4px 4px 0 var(--ink); padding: 14px 12px 12px; text-align: center; }
.stat-tile-num { font: 900 1.9rem/1 "Space Mono", ui-monospace, monospace; color: var(--ink); }
.stat-tile-label { margin-top: 6px; color: var(--muted); font: 700 0.58rem/1.2 "Space Mono", ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.stat-tile-gold { background: var(--gold); }
.stat-tile-gold .stat-tile-num, .stat-tile-gold .stat-tile-label { color: var(--ink); }
.stat-tile-fire .stat-tile-num { color: var(--court); }
/* Play-calendar heatmap */
.heatmap { width: max-content; max-width: 100%; margin: 0 auto; display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; overflow-x: auto; border: 2px solid var(--ink); background: var(--surface); box-shadow: 4px 4px 0 var(--ink); padding: 12px; }
.hm-cell { width: 13px; height: 13px; border-radius: 2px; background: rgba(21,20,19,0.08); }
[data-theme="dark"] .hm-cell { background: rgba(243,236,219,0.08); }
.hm-1 { background: #cfe6dd; } .hm-2 { background: #7fc4ac; } .hm-3 { background: #3ea081; } .hm-4 { background: #157f68; }
.hm-goat { background: var(--gold); box-shadow: inset 0 0 0 1.5px var(--ink); }
.hm-legend { max-width: 620px; margin: 8px auto 0; display: flex; align-items: center; gap: 6px; justify-content: flex-end; color: var(--muted); font: 700 0.58rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.05em; }
.hm-legend .hm-cell { width: 11px; height: 11px; }
/* Daily history list (expandable) */
.hist-list { display: grid; gap: 6px; }
.hist-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 11px 14px; border: 2px solid var(--ink); background: var(--paper); cursor: pointer; font-family: "Playfair Display", Georgia, serif; }
.hist-caret { color: var(--muted); font-family: "Space Mono", monospace; transition: transform 0.15s ease; }
.hist-row.open .hist-caret { transform: rotate(90deg); }
.hist-tier { font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-date { font: 700 0.72rem/1.1 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.hist-score { display: grid; place-items: center; min-width: 42px; height: 32px; background: var(--ink-bg); color: var(--chalk); font: 950 1rem/1 "Space Mono", ui-monospace, monospace; }
.hist-score.is-goat { background: var(--gold); color: var(--ink); }
.hist-build { display: none; grid-column: 1 / -1; margin-top: 10px; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.hist-row.open .hist-build { display: grid; }
.hist-build .bd-empty { grid-column: 1 / -1; color: var(--muted); font: 400 0.82rem/1.4 "Playfair Display", Georgia, serif; }
/* Locked (free-user) state on stats */
.locked-wrap { position: relative; }
.locked-blur { filter: blur(5px); opacity: 0.5; pointer-events: none; user-select: none; }
.locked-gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; }
.locked-gate .lock-ico { font-size: 1.8rem; }
.locked-gate .lock-txt { font: 700 0.82rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); max-width: 280px; }
/* Unlock modal */
.pass-modal { position: relative; max-width: 580px; width: 100%; padding: 0; overflow: hidden; max-height: min(92vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px)); display: flex; flex-direction: column; }
/* On phones, CENTER the buy modal in the visible viewport (the shared overlay
uses flex-start for the long share card, which on iOS pins this modal's ✕
up behind the status/address bar — "too high, can't hit the X"). Safe-area
padding keeps it clear of the notch and home indicator. */
@media (max-width: 640px) {
#passModal {
align-items: center;
padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));
}
}
.pass-modal .modal-close { position: absolute; top: 8px; right: 8px; z-index: 2; color: var(--ink); border: none; background: transparent; border-radius: 50%; font-size: 1.2rem; line-height: 1; opacity: 0.7; }
.pass-modal .modal-close:hover { background: rgba(21, 20, 19, 0.12); border-color: transparent; opacity: 1; transform: none; box-shadow: none; }
.pass-top { background: var(--gold); color: var(--ink); padding: 22px 20px 16px; text-align: center; border-bottom: 3px solid var(--ink); }
.pass-top .pass-goat { font-size: 2.3rem; line-height: 1; }
.pass-top h3 { margin: 6px 0 2px; font-family: "Playfair Display", Georgia, serif; font-size: 1.6rem; }
.pass-price { font: 900 1.05rem/1 "Space Mono", ui-monospace, monospace; }
.pass-price s { opacity: 0.5; font-weight: 400; }
.pass-price small { font-size: 0.68rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.06em; }
.pass-launch { margin-top: 7px; display: inline-block; background: var(--court); color: #fff; border: 2px solid var(--ink); padding: 3px 10px; font: 700 0.56rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.pass-body { padding: 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
/* Two columns on wider screens so the modal reads landscape, not a tall phone strip. */
.pass-perks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.pass-perks li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.pass-perks .perk-ico { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; border: 2px solid var(--ink); background: var(--surface); font-size: 1.05rem; }
.pass-perks .perk-txt strong { display: block; font: 700 0.9rem/1.2 "Playfair Display", Georgia, serif; }
.pass-perks .perk-txt span { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
/* Shorter mobile-only descriptions: full text on desktop, .perk-sm on phones. */
.pass-perks .perk-txt .perk-sm { display: none; }
.pass-free-note { margin: 0 0 14px; text-align: center; color: var(--muted); font: 400 0.78rem/1.4 "Playfair Display", Georgia, serif; }
/* Flash Deal popup — limited-time GOAT Pass discount, shown on the home screen */
.flash-modal { position: relative; overflow: hidden; max-width: 360px; width: calc(100% - 40px); text-align: center; padding: 30px 26px 24px; border: 3px solid var(--ink); background: var(--paper, #fbf7ee); box-shadow: 8px 8px 0 var(--ink); animation: flashPop 0.35s cubic-bezier(0.2, 1.3, 0.4, 1); }
.flash-modal .modal-close { position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; color: var(--ink); border: none; background: transparent; border-radius: 50%; font-size: 1.2rem; line-height: 1; opacity: 0.6; box-shadow: none; }
.flash-modal .modal-close:hover { background: rgba(21, 20, 19, 0.12); border-color: transparent; opacity: 1; transform: none; box-shadow: none; }
.flash-burst { position: absolute; top: -45%; left: 50%; transform: translateX(-50%); width: 210%; height: 90%; background: radial-gradient(ellipse at center top, rgba(230, 184, 67, 0.4), transparent 62%); pointer-events: none; }
.flash-kicker { position: relative; display: inline-block; font: 800 0.72rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--court); border: 2px solid var(--ink); padding: 6px 12px; box-shadow: 2px 2px 0 var(--ink); }
.flash-title { position: relative; margin: 16px 0 6px; font: 900 1.85rem/1.05 "Playfair Display", Georgia, serif; color: var(--ink); }
.flash-sub { position: relative; margin: 0 0 5px; font: 500 0.95rem/1.4 "Playfair Display", Georgia, serif; color: var(--ink); }
.flash-sub b { font-weight: 800; color: var(--court); letter-spacing: 0.05em; background: rgba(201, 103, 61, 0.12); padding: 1px 7px; border-radius: 3px; }
.flash-scarcity { position: relative; margin: 0 0 20px; font: 700 0.72rem/1.3 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.flash-cta { position: relative; width: 100%; padding: 14px; cursor: pointer; background: var(--court); color: #fff; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font: 800 0.92rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; transition: transform 0.1s ease, box-shadow 0.1s ease; }
.flash-cta:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.flash-dismiss { position: relative; margin-top: 12px; background: none; border: none; cursor: pointer; font: 700 0.74rem/1 "Space Mono", ui-monospace, monospace; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.flash-dismiss:hover { color: var(--ink); }
@keyframes flashPop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flash-modal { animation: none; } }
.pass-promo { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 9px 12px; border: 2px dashed var(--court); background: rgba(201, 103, 61, 0.09); color: var(--ink); text-align: center; font: 700 0.78rem/1.3 "Space Mono", ui-monospace, monospace; }
.pass-promo b { color: var(--court); letter-spacing: 0.06em; }
.pass-promo-tag { flex: none; background: var(--court); color: #fff; padding: 2px 7px; border: 1.5px solid var(--ink); font-size: 0.66rem; letter-spacing: 0.05em; }
.pass-cta { width: 100%; padding: 14px; cursor: pointer; background: var(--court); color: #fff; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font: 800 0.92rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; transition: transform 0.1s ease, box-shadow 0.1s ease; }
.pass-cta:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.pass-upgrade-note { text-align: center; margin: 0 0 10px; padding: 8px 12px; border: 2px dashed var(--green, #2f7d4f);
background: rgba(47, 125, 79, 0.08); color: var(--ink); font: 700 0.74rem/1.4 "Space Mono", ui-monospace, monospace; }
.pass-fine { text-align: center; margin: 12px 0 0; color: var(--muted); font: 400 0.74rem/1.4 "Playfair Display", Georgia, serif; }
/* Secondary, low-key offer under the Pass CTA — deliberately quieter than the
Pass so it reads as the fallback for people who won't buy the whole thing. */
/* The $1.99 ads-only unlock. Every weight here is set AGAINST .pass-cta above,
which is the whole point: that one is filled --court, white, uppercase,
0.92rem, with a 4px hard shadow and the full width of the modal. This one is
outlined, ink on paper, sentence-weight, 0.78rem, no shadow, and doesn't span
the modal. It reads as the second option at a glance, from across the room —
which it is. What it is NOT any more is an underlined word inside a
paragraph, which is where it was, and which meant nobody who wanted it could
see it. */
.pass-alt {
text-align: center;
margin: 14px 0 0;
padding: 12px 14px;
border-top: 1px solid var(--line, rgba(0,0,0,0.12));
}
.pass-alt-q {
margin: 0 0 8px;
color: var(--muted);
font: 400 0.78rem/1.4 "Playfair Display", Georgia, serif;
}
.pass-alt-cta {
display: inline-block;
/* Not width:100% — spanning the modal is what makes .pass-cta read as THE
action, and this must not borrow that. */
min-width: 62%;
padding: 11px 18px;
/* Floor, not a suggestion. The short-phone block below squeezes this whole
footer to keep the perk list on screen, and squeezing a button under the
thumb minimum is how a second option becomes an unreachable one. */
min-height: 40px;
cursor: pointer;
background: transparent;
color: var(--ink);
border: 2px solid var(--ink);
box-shadow: none;
font: 700 0.78rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.03em;
transition: background 0.1s ease, color 0.1s ease;
}
.pass-alt-cta:hover { background: var(--ink); color: var(--paper); }
.pass-alt-note {
margin: 8px 0 0;
color: var(--muted);
font: 400 0.7rem/1.4 "Playfair Display", Georgia, serif;
}
/* Narrow screens: single column, compressed, and the CTA pinned below the
scrolling perks list — so the price, buy button and ✕ are ALWAYS on screen
and only the perk list scrolls. */
@media (max-width: 540px) {
.pass-modal { max-width: 400px; }
.pass-top { padding: 14px 16px 10px; }
.pass-top .pass-goat { font-size: 1.7rem; }
.pass-top h3 { margin: 3px 0 2px; font-size: 1.3rem; }
.pass-price { font-size: 0.92rem; }
.pass-launch { margin-top: 5px; }
.pass-body { display: flex; flex-direction: column; padding: 12px 14px 14px; }
.pass-perks { grid-template-columns: 1fr; gap: 9px; margin: 0 0 10px; overflow-y: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.pass-perks li { gap: 9px; }
.pass-perks .perk-ico { width: 28px; height: 28px; font-size: 0.9rem; }
.pass-perks .perk-txt strong { font-size: 0.82rem; }
/* Swap to the short descriptions so every perk fits fully — no truncation. */
.pass-perks .perk-txt > span:not(.perk-sm) { display: none; }
.pass-perks .perk-txt .perk-sm { display: block; }
.pass-perks .perk-txt span { font-size: 0.74rem; line-height: 1.3; }
.pass-free-note { margin: 0 0 8px; font-size: 0.7rem; }
.pass-cta { flex-shrink: 0; padding: 12px; }
.pass-fine { flex-shrink: 0; margin-top: 8px; font-size: 0.66rem; }
.pass-alt { margin-top: 10px; padding: 10px 8px; }
.pass-alt-q { margin-bottom: 6px; font-size: 0.72rem; }
.pass-alt-cta { min-width: 78%; padding: 11px 12px; font-size: 0.72rem; }
.pass-alt-note { font-size: 0.64rem; }
}
/* Short phone screens: squeeze the header/footer chrome so the full perk list
still fits without scrolling. */
@media (max-width: 540px) and (max-height: 720px) {
.pass-top { padding: 8px 14px 8px; }
.pass-top .pass-goat { display: none; }
.pass-top h3 { margin: 0 0 1px; font-size: 1.12rem; }
.pass-price { font-size: 0.84rem; }
.pass-launch { margin-top: 4px; padding: 2px 8px; font-size: 0.5rem; }
.pass-body { padding: 10px 12px 12px; }
.pass-perks { gap: 7px; }
.pass-perks .perk-ico { width: 24px; height: 24px; font-size: 0.8rem; }
.pass-perks .perk-txt strong { font-size: 0.78rem; }
.pass-perks .perk-txt span { font-size: 0.68rem; line-height: 1.25; }
.pass-free-note { display: none; }
.pass-promo { margin-bottom: 8px; padding: 7px 9px; gap: 6px; font-size: 0.66rem; }
.pass-promo-tag { padding: 2px 5px; font-size: 0.58rem; }
.pass-cta { padding: 10px; font-size: 0.84rem; }
.pass-fine { margin-top: 6px; font-size: 0.6rem; }
.pass-alt { margin-top: 8px; padding: 8px 8px 6px; }
.pass-alt-note { display: none; }
.pass-alt-q { margin-bottom: 5px; font-size: 0.66rem; }
.pass-alt-cta { padding: 10px 12px; font-size: 0.68rem; }
}
@media (max-width: 460px) {
.stat-tiles { grid-template-columns: repeat(2, 1fr); }
.optimal-grid, .tease-grid, .hist-build { grid-template-columns: repeat(2, 1fr); }
}
/* Leaderboard density. The list rows are fine at the normal badge size — the
crowding is only in the TOP 3, where each podium column is barely a third of
the screen. So the badge scales down on the podium only, and wraps onto its
own line under the name. Roman numerals stay everywhere. */
.lb-pod-name { flex-wrap: wrap; }
.lb-pod-name .grank-chip { font-size: 0.44rem; padding: 2px 5px; }
.lb-pod-name .grank-laurel { padding: 0 7px; }
@media (max-width: 640px) {
.lb-row { grid-template-columns: 32px 1fr auto; gap: 5px; }
/* Podium columns are ~a third of the screen, so the badge (plus its prestige
laurel wings) needs to stay clear of the card edges. */
.lb-pod-name .grank-chip { font-size: 0.36rem; padding: 1px 4px; letter-spacing: .02em; }
.lb-pod-name .grank-laurel { padding: 0 5px; }
.lb-pod-name .grank-chip .grank-chip-tier { margin-right: 3px; padding-right: 3px; }
.lb-pod-name .grank-chip .grank-dia { margin-left: 3px; padding-left: 3px; }
}
/* ── Rewind cross-promo (ClutchPoints partnership) ─────────────────────────
Guest brand: their palette and type, our borders and hard shadows, so it
sits in the page without pretending to be ours. Brand values are read off
rewindgame.com — don't "correct" them to our tokens.
Remove this whole block when the deal ends (see rewind-promo.js). */
#rewindPromo {
--rw-black: #17181c;
--rw-red: #ef4444;
--rw-face: "Special Gothic Condensed One", "Arial Narrow", sans-serif;
--rw-body: "Lora", Georgia, serif;
margin-top: 12px;
}
/* --- strip variant (their surface, no label needed) --- */
.rw-strip {
display: flex; align-items: center; justify-content: space-between;
gap: 15px; flex-wrap: wrap;
padding: 16px 17px; border: 3px solid var(--ink); background: var(--rw-black);
box-shadow: var(--shadow); color: #fff; text-decoration: none;
position: relative; overflow: hidden;
}
.rw-strip::after {
content: ""; position: absolute; inset: 0 0 0 auto; width: 130px;
background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.15));
pointer-events: none;
}
.rw-strip-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rw-strip-copy { min-width: 0; }
.rw-mark { width: 34px; height: 34px; flex: 0 0 auto; display: block; }
.rw-word {
display: block; font-family: "Space Mono", monospace; font-weight: 700;
font-size: 0.63rem; letter-spacing: 0.26em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.48); margin-bottom: 4px;
}
.rw-strip-title {
display: block; font-family: var(--rw-face); font-size: 1.62rem;
line-height: 0.98; color: #fff;
}
.rw-strip-title em { font-style: normal; color: var(--rw-red); }
.rw-strip-sub {
display: block; margin-top: 6px; font-family: var(--rw-body);
font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); line-height: 1.4;
}
.rw-cta {
font-family: "Space Mono", monospace; font-weight: 700; font-size: 0.72rem;
letter-spacing: 0.09em; text-transform: uppercase; padding: 11px 16px;
background: var(--rw-red); color: #fff; border: 2px solid var(--rw-red);
white-space: nowrap; position: relative; z-index: 1;
transition: transform 0.1s ease, filter 0.1s ease;
}
.rw-strip:hover .rw-cta { filter: brightness(1.08); transform: translateY(-1px); }
/* --- countdown variant (our surface, our voice → labelled) --- */
.rw-countdown {
position: relative; padding: 17px 18px;
border: 3px solid var(--ink); background: var(--surface); box-shadow: var(--shadow);
}
.rw-disclose {
position: absolute; top: 0; right: 0; font-family: "Space Mono", monospace;
font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase;
background: rgba(128, 128, 128, 0.18); color: var(--muted); padding: 4px 9px;
}
.rw-cd-body {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
}
.rw-cd-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.rw-cd-badge {
width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center;
background: var(--rw-black); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.rw-cd-badge svg { width: 26px; height: 26px; }
.rw-cd-title {
margin: 0; font-family: var(--rw-face); font-size: 1.32rem;
line-height: 1.02; color: var(--ink);
}
.rw-cd-sub {
margin: 5px 0 0; font-family: var(--rw-body); font-size: 0.79rem;
color: var(--muted); line-height: 1.45;
}
.rw-cta-ghost {
font-family: "Space Mono", monospace; font-weight: 700; font-size: 0.7rem;
letter-spacing: 0.09em; text-transform: uppercase; padding: 10px 15px;
background: var(--rw-black); color: #fff; border: 2px solid var(--ink);
box-shadow: 3px 3px 0 var(--ink); text-decoration: none; white-space: nowrap;
}
.rw-cta-ghost:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
/* In dark mode the black fill sits on a near-black panel and the button reads
as an outline only. Their red keeps it an obvious CTA and stays on brand. */
[data-theme="dark"] .rw-cta-ghost { background: var(--rw-red); border-color: var(--rw-red); }
@media (max-width: 560px) {
.rw-strip, .rw-cd-body { flex-direction: column; align-items: flex-start; }
.rw-cta, .rw-cta-ghost { width: 100%; text-align: center; }
.rw-strip-title { font-size: 1.45rem; }
}
/* ===================== Career Mode (/career) ============================= */
/* When the career route is active, career.js adds .career-active on body and
the rest of the shell steps aside. */
/* Ezoic's own units are exempt. It auto-places them as direct children of
.shell, so the containment rule was hiding every ad in the mode — a career
played out season by season is meant to carry ads like any other screen
(ezoic-ads.js rule 2), and instead it was the one place they went dark. */
body.career-active .shell > *:not(#careerPage):not([id^="ezoic-pub-ad-placeholder"]) { display: none; }
#careerPage { display: block; }
.career-wrap { max-width: 640px; margin: 0 auto; padding: 26px 4px 40px; }
.career-title { font-family: "Playfair Display", serif; font-size: 1.7rem; margin: 4px 0 6px; }
.career-title small { font: 700 0.85rem "Space Mono", ui-monospace, monospace; color: var(--muted); }
.career-sub { font: 400 0.85rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--muted); margin: 0 0 18px; }
.career-card {
border: 3px solid var(--ink); background: var(--paper); box-shadow: var(--shadow);
padding: 16px; margin: 0 0 16px;
}
.career-label { display: block; font: 700 0.62rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.career-select {
width: 100%; padding: 10px 12px; font: 700 0.85rem "Space Mono", ui-monospace, monospace;
border: 2px solid var(--ink); background: var(--surface, #fff); color: var(--ink);
}
.career-arch { margin: 10px 0 0; font: 400 0.8rem "Space Mono", ui-monospace, monospace; color: var(--muted); }
.career-arch strong { color: var(--court); }
.career-pos-row { display: flex; gap: 8px; }
.career-pos {
flex: 1; padding: 10px 0; cursor: pointer; font: 900 0.9rem "Space Mono", ui-monospace, monospace;
border: 2px solid var(--ink); background: transparent; color: var(--ink);
}
.career-pos.on { background: var(--ink); color: var(--paper); }
/* Era preference: eight chips that wrap, so "any era" is one tap away from
"put me in the 1980s". */
.career-era-row { display: flex; flex-wrap: wrap; gap: 7px; }
.career-era {
padding: 8px 12px; cursor: pointer;
font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace;
border: 2px solid var(--ink); background: transparent; color: var(--ink);
}
.career-era.on { background: var(--court); border-color: var(--court); color: #fff7df; }
.career-slider { width: 100%; accent-color: var(--court); margin: 4px 0 2px; }
.career-note { font: 400 0.72rem/1.45 "Space Mono", ui-monospace, monospace; color: var(--muted); margin: 8px 0 0; }
.career-note.center { text-align: center; margin-top: 18px; }
.career-back { color: var(--muted); }
.career-team-row { display: flex; gap: 8px; }
.career-team-row .career-select { flex: 1; }
.career-btn {
padding: 12px 18px; cursor: pointer; font: 900 0.9rem "Space Mono", ui-monospace, monospace;
border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
.career-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.career-btn-main { display: block; width: 100%; background: var(--court); color: #fff; }
.career-btn-main:disabled { opacity: 0.45; cursor: not-allowed; }
.career-btn-ghost { background: var(--paper); color: var(--ink); }
.career-badges { margin: 0 0 6px; }
.career-badge {
display: inline-block; padding: 6px 10px; font: 700 0.7rem "Space Mono", ui-monospace, monospace;
border: 2px solid var(--ink);
}
.career-badge.unicorn { background: linear-gradient(135deg, #f2d47e, var(--gold)); }
.career-badge.warn { background: var(--red); color: #fff; }
.career-seasons { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.career-season {
border: 2px solid var(--ink); background: var(--paper); padding: 10px 12px;
opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease;
}
.career-season.in { opacity: 1; transform: none; }
.career-season-top { display: flex; justify-content: space-between; font: 700 0.7rem "Space Mono", ui-monospace, monospace; }
.career-season-yr { color: var(--court); }
.career-season-age { color: var(--muted); }
.career-season-stats { margin-top: 5px; font: 400 0.85rem "Space Mono", ui-monospace, monospace; }
.career-season-stats b { font-weight: 900; }
.career-season-hl { margin-top: 6px; font: 700 0.72rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--court-text); }
.career-legacy {
margin: 22px 0 0; border: 3px solid var(--ink); background: var(--paper);
box-shadow: var(--shadow); padding: 20px; text-align: center;
}
.career-legacy.hof { border-color: var(--gold); box-shadow: 5px 5px 0 var(--gold); }
.career-legacy-kicker { font: 700 0.62rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.career-legacy-tier { font-family: "Playfair Display", serif; font-size: 1.75rem; margin: 8px 0 4px; }
.career-legacy-blurb { font: 400 0.82rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--muted); margin: 0 0 14px; }
.career-trophies { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 16px; }
.career-trophies span {
padding: 5px 9px; border: 2px solid var(--ink); background: var(--surface, #fff);
font: 700 0.7rem "Space Mono", ui-monospace, monospace;
}
/* Six tiles on the verdict card. A grid instead of a wrapping flex row so they
land as two even rows of three at every width — flex-wrap left the last row
short and centred, which read as crammed against the full row above it. */
.career-totals {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px; margin-top: 4px;
}
.career-totals > div {
min-width: 0; padding: 12px 8px; border: 2px solid var(--ink);
background: var(--surface, #fff); text-align: center;
}
.career-totals b {
display: block; font: 900 1.15rem/1.2 "Space Mono", ui-monospace, monospace;
overflow-wrap: anywhere;
}
.career-totals small {
display: block; margin-top: 4px;
font: 700 0.58rem "Space Mono", ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.career-hof { margin: 14px 0 0; font: 700 0.8rem "Space Mono", ui-monospace, monospace; color: var(--court); }
.career-actions { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; }
@media (max-width: 460px) {
.career-pos { font-size: 0.78rem; }
.career-totals { gap: 6px; }
.career-totals > div { padding: 10px 5px; }
.career-totals b { font-size: 0.98rem; }
.career-highs-row > div { padding: 9px 5px; }
}
/* Career mode v2 — interactive seasons, decisions, spin */
.career-spin-rolling { animation: rollFlicker 0.13s steps(1, end) infinite; color: var(--ink) !important; font-weight: 700; }
.career-season-story { margin-top: 6px; font: italic 400 0.74rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.career-season-po { margin-top: 5px; font: 700 0.7rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
.career-season-po.miss { color: var(--muted); font-weight: 400; }
.career-season-po.champ { color: var(--court); }
.career-decision {
border: 3px solid var(--ink); background: var(--paper); box-shadow: var(--shadow);
padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.career-decision-title { margin: 0; font: 900 1rem "Space Mono", ui-monospace, monospace; }
.career-decision-text { margin: 0 0 4px; font: 400 0.78rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--muted); }
/* What the situation means for THIS player, as opposed to what happened. Set
apart from the narration above it because it is the line the decision
actually turns on — a scouting note, not more story. */
.career-decision-readout {
margin: -4px 0 0; padding: 9px 11px;
border-left: 4px solid var(--court);
background: rgba(201, 103, 61, 0.09);
font: 700 0.75rem/1.45 "Space Mono", ui-monospace, monospace; color: var(--court-text);
}
.career-btn-dec { background: var(--paper); color: var(--ink); text-align: left; display: block; width: 100%; }
.career-btn-dec small { display: block; margin-top: 3px; font-weight: 400; color: var(--muted); font-size: 0.68rem; }
.career-btn-dec:hover { background: rgba(201, 103, 61, 0.08); }
.career-move { font: 700 0.78rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--court-text); }
.career-journey { margin: 12px 0 0; font: 400 0.68rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--muted); }
#careerPlay small { display: block; font-weight: 400; font-size: 0.66rem; opacity: 0.85; margin-top: 2px; }
/* Career mode — draft night */
.career-draft {
border: 3px solid var(--ink); background: var(--paper); box-shadow: var(--shadow);
padding: 26px 18px; text-align: center; margin: 6px 0 0;
}
.career-draft-pick {
font: 900 3.2rem/1 "Space Mono", ui-monospace, monospace; color: var(--court);
letter-spacing: -0.02em;
}
.career-draft-pick.rolling { animation: rollFlicker 0.13s steps(1, end) infinite; color: var(--muted); }
.career-draft-pick.locked { animation: stampIn 0.35s ease-out; }
.career-draft-team { margin: 12px 0 0; font: 400 0.86rem/1.5 "Space Mono", ui-monospace, monospace; }
.career-draft-story { margin: 10px 0 0; font: italic 400 0.76rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--muted); }
/* Career mode — contracts, mystery draft, share */
.career-contract {
margin: 10px 0 0; padding: 8px 12px; display: inline-block;
border: 2px solid var(--ink); background: var(--surface);
font: 400 0.72rem/1.4 "Space Mono", ui-monospace, monospace;
}
.career-terms {
display: block; margin-top: 4px; font-style: normal;
font: 700 0.7rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--court);
}
.career-btn-dec.mystery { border-style: dashed; }
.career-draft-team.rolling { animation: rollFlicker 0.13s steps(1, end) infinite; color: var(--muted); }
.career-draft-deal {
display: inline-block; margin-top: 8px; font-style: normal;
font: 700 0.72rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--court);
}
.career-spin-btn.on, .career-btn-ghost.on { background: var(--ink); color: var(--paper); }
/* Career mode v3 — system fit, splits, rivalries, trades */
.career-system {
margin: 8px 0 0; padding: 8px 12px; display: inline-block;
border: 2px dashed currentColor; background: transparent;
font: 400 0.72rem/1.45 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
.career-system.good { border-color: var(--green); color: var(--green); }
.career-system.bad { border-color: var(--red); color: var(--red); }
.career-system strong { color: inherit; }
.career-system-note { display: block; margin-top: 3px; font-weight: 700; }
.career-season-splits {
margin-top: 3px; font: 400 0.68rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
.career-season-trade {
margin-top: 7px; padding-top: 6px; border-top: 1px dashed currentColor;
font: 700 0.72rem/1.45 "Space Mono", ui-monospace, monospace; color: var(--court);
}
.career-totals-splits { margin-top: 8px; }
.career-totals-splits > div { padding: 8px 6px; }
.career-totals-splits b { font-size: 0.95rem; }
/* Career single-game highs — summary screen */
.career-highs { margin-top: 14px; }
.career-highs-label {
font: 700 0.58rem "Space Mono", ui-monospace, monospace;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 7px;
}
.career-highs-row {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.career-highs-row > div {
min-width: 0; padding: 11px 6px; border: 2px solid var(--ink);
background: var(--surface, #fff); text-align: center;
}
.career-highs-row b {
display: block; font: 900 1.1rem "Space Mono", ui-monospace, monospace;
}
.career-highs-row small {
font: 700 0.58rem "Space Mono", ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.career-highs-row span {
display: block; font: 400 0.58rem/1.4 "Space Mono", ui-monospace, monospace;
color: var(--muted); margin-top: 3px;
}
/* Season card — single-game season high */
.career-gamehigh {
font: 700 0.62rem "Space Mono", ui-monospace, monospace;
letter-spacing: 0.04em; color: var(--court); text-transform: uppercase; margin-top: 2px;
}
/* Career mode — offseason decision popups (trade / All-Star / options) */
.career-decision.pop { border-color: var(--court); box-shadow: 5px 5px 0 var(--court); }
.career-decision.pop .career-decision-title { color: var(--court); }
/* Career mode — team browser (free agency pick-your-team) */
.career-team-browser {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
max-height: 380px; overflow-y: auto; padding-right: 2px;
}
@media (max-width: 420px) { .career-team-browser { grid-template-columns: 1fr; } }
.career-team-card {
display: flex; flex-direction: column; gap: 3px;
padding: 9px 11px; border: 2px solid var(--ink); background: var(--paper);
text-align: left; cursor: pointer;
font-family: "Space Mono", ui-monospace, monospace;
}
.career-team-card.interested:hover { background: rgba(201,103,61,0.08); }
.career-team-card.interested:active { transform: translate(1px,1px); }
.career-team-card.passed { opacity: 0.32; cursor: not-allowed; border-style: dashed; }
.ctc-name { font: 900 0.8rem "Space Mono", ui-monospace, monospace; color: var(--ink); }
.ctc-record { font: 700 0.68rem "Space Mono", ui-monospace, monospace; color: var(--court); }
.ctc-offer {
display: block; margin-top: 2px;
font: 400 0.62rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
.ctc-offer.ctc-pass { font-style: italic; }
/* ============ Career Mode v3 — name, vault, training, ceremony =========== */
/* Naming the player is what turns a build into somebody, so the input sits at
the top of setup with the jersey number beside it. */
.career-name-row { display: flex; gap: 8px; }
.career-input {
flex: 1; min-width: 0; padding: 10px 12px;
font: 700 0.9rem "Space Mono", ui-monospace, monospace;
border: 2px solid var(--ink); background: var(--surface, #fff); color: var(--ink);
}
.career-input::placeholder { color: var(--muted); font-weight: 400; }
.career-input-num { flex: 0 0 68px; text-align: center; }
/* Signed-out / no-builds banner — says plainly what an account gets you. */
.career-signin { border-style: dashed; }
.career-signin-txt { margin: 0 0 12px; font: 400 0.78rem/1.55 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.career-signin-txt strong { color: var(--ink); }
.career-signin .career-btn { display: block; width: 100%; text-align: center; text-decoration: none; }
/* The sign-in button carries Google's mark, so it needs to be a centred flex
row rather than the block above — as a block the .g-mark (itself a grid box)
drops onto its own line and the logo sits stranded over the label. Scoped to
.career-signin so it outranks the rule it is correcting. */
.career-signin .career-btn-google {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
}
/* The vault: past careers, newest first, with the best one called out. */
.career-vault { margin-top: 20px; }
.career-vault-best { margin: 0 0 12px; font: 700 0.8rem/1.5 "Space Mono", ui-monospace, monospace; }
.career-vault-best em { color: var(--muted); font-style: normal; }
.career-vault-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.career-vault-row {
display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
border: 2px solid var(--ink); background: var(--surface, #fff); padding: 8px 10px;
}
.career-vault-row.hof { border-color: var(--gold); }
.career-vault-main { grid-column: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.career-vault-name { font: 900 0.82rem "Space Mono", ui-monospace, monospace; }
.career-vault-name em { color: var(--muted); font-style: normal; font-weight: 700; }
.career-vault-tier { font: 700 0.68rem "Space Mono", ui-monospace, monospace; color: var(--court-text); }
.career-vault-sub { grid-column: 1; font: 400 0.68rem/1.45 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.career-vault-score {
grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end;
font: 900 1.1rem "Space Mono", ui-monospace, monospace; color: var(--ink);
}
.career-vault-status { margin: 12px 0 0; text-align: center; font: 400 0.7rem "Space Mono", ui-monospace, monospace; color: var(--muted); }
/* The ceremony — a beat of its own before the verdict card. */
.career-ceremony {
margin: 22px 0 0; border: 3px solid var(--ink); background: var(--paper);
box-shadow: var(--shadow); padding: 22px 20px; text-align: center;
}
.career-ceremony.hof { border-color: var(--gold); box-shadow: 5px 5px 0 var(--gold); }
.career-ceremony.grim { border-style: dashed; box-shadow: none; }
.career-ceremony-kicker { margin: 0 0 8px; font: 700 0.6rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.career-ceremony-title { font-family: "Playfair Display", serif; font-size: 1.5rem; margin: 0 0 12px; }
.career-ceremony-line { margin: 0 0 8px; font: 400 0.8rem/1.6 "Space Mono", ui-monospace, monospace; }
.career-ceremony-line.quiet { color: var(--muted); margin-top: 14px; }
/* Final screen: one obvious next action, one share, and the rest small. */
.career-outro-actions { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; }
/* Every full-width button on this screen carries a subtitle, and all of them
need it on its own line — inline, "Replay this exact career Same rolls" reads
as one run-on sentence. */
.career-outro-actions .career-btn-main small,
.career-outro-actions .career-btn-ghost small,
.career-outro-actions .career-btn-whatif small {
display: block; margin-top: 3px; font: 400 0.66rem "Space Mono", ui-monospace, monospace;
opacity: 0.85; letter-spacing: 0;
}
.career-btn-share { display: block; width: 100%; background: var(--ink); color: var(--paper); }
.career-outro-minor { display: flex; gap: 8px; }
/* Two equal ways onward from a finished career — the hall, and your stats.
Their own row above the small utility buttons, because they're destinations
rather than actions on the career you just played. */
.career-outro-links { display: flex; gap: 8px; }
.career-outro-links .career-btn { flex: 1; margin: 0; }
@media (max-width: 380px) { .career-outro-links { flex-wrap: wrap; } }
.career-btn-mini {
flex: 1; padding: 9px 6px; font: 700 0.68rem "Space Mono", ui-monospace, monospace;
background: var(--paper); color: var(--ink); border-width: 2px; box-shadow: 2px 2px 0 var(--ink);
}
@media (max-width: 460px) {
.career-outro-minor { flex-wrap: wrap; }
.career-btn-mini { flex: 1 1 30%; }
}
/* My Stats → Career tab */
.stats-careers { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stats-career-empty { text-align: center; color: var(--muted); font: 400 0.78rem/1.6 "Space Mono", ui-monospace, monospace; margin: 22px 0; }
/* The vault is split into groups — Enshrined first, then the saved pile — so a
Hall of Fame run isn't buried between two washed-out careers. Each group gets
a labelled header, and the enshrined rows carry a gold edge so they read as
the trophies they are even out of the group. */
.vault-group { margin-top: 18px; }
.vault-group:first-of-type { margin-top: 14px; }
.vault-group .stats-careers { margin-top: 8px; }
.vault-group-label {
margin: 0; display: flex; align-items: baseline; gap: 8px;
font: 700 0.66rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
}
.vault-group-hof .vault-group-label { color: var(--court-text); }
:root .vault-group-hof .vault-group-label { color: #b8860b; }
[data-theme="dark"] .vault-group-hof .vault-group-label { color: #e6b843; }
.career-vault-row.row-hof { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
/* Reveal the rest of a windowed saved list — full width so it reads as a list
control, not a stray button. */
.vault-show-all { width: 100%; margin-top: 10px; }
/* =============== Career Mode — colour polish & dark-mode fixes =========== */
/* The unicorn badge is a gold fill, so its text must stay dark in both themes
(--ink flips light in dark mode and would wash out against the gold). */
[data-theme="dark"] .career-badge.unicorn { color: #151413; }
/* Same story for the court-filled primary button and the share button. */
[data-theme="dark"] .career-btn-main { color: #fff7df; }
/* Legacy tiers are graded, so grade the colour too — a Cup of Coffee and a
Mount Rushmore career should not read identically at a glance. */
.tier-elite { color: var(--gold); }
.tier-good { color: var(--court-text); }
.tier-low { color: var(--muted); }
[data-theme="dark"] .tier-elite { color: var(--gold); }
/* Gold text on cream is too light to read, so light mode uses the darker
court tone and lets the gold READ as gold only where it sits on ink. */
:root .tier-elite { color: #b8860b; }
[data-theme="dark"] .tier-elite { color: #e6b843; }
/* Vault rows inherit the grade: elite runs get the gold frame, washed-out ones
a dashed frame that visually reads as "this one didn't last". */
.career-vault-row.row-elite { border-color: var(--gold); }
.career-vault-row.row-low { border-style: dashed; opacity: 0.86; }
.career-vault-score.tier-elite,
.career-vault-score.tier-good,
.career-vault-score.tier-low { color: inherit; }
.career-vault-row.row-elite .career-vault-score { color: #b8860b; }
[data-theme="dark"] .career-vault-row.row-elite .career-vault-score { color: #e6b843; }
/* The verdict card, graded the same way. */
.career-legacy.legacy-low { border-style: dashed; box-shadow: none; }
.career-legacy.legacy-low .career-legacy-tier { color: var(--muted); }
/* ========== Career Mode v4 — the season card, HUD, series, milestones ===== */
/* A running résumé under the header. It exists to be watched: rings and
All-Star counts ticking up mid-career is the reason to play one more year. */
.career-hud {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
margin: 12px 0 0;
}
.career-hud-cell {
border: 2px solid var(--ink); background: var(--surface);
padding: 8px 4px; text-align: center;
}
.career-hud-cell b { display: block; font: 900 1rem/1.1 "Space Mono", ui-monospace, monospace; }
.career-hud-cell small {
display: block; margin-top: 2px; color: var(--muted);
font: 700 0.5rem/1.2 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.05em; text-transform: uppercase;
}
.career-hud-cell.on { background: var(--gold); }
.career-hud-cell.on b, .career-hud-cell.on small { color: #151413; }
/* Season card: the three quoted numbers lead, everything else supports them. */
.career-statline {
display: flex; align-items: flex-end; gap: 8px 26px; flex-wrap: wrap;
margin: 10px 0 0; padding-bottom: 10px;
border-bottom: 2px solid var(--ink);
}
/* A fixed column width keeps 9.1 and 30.9 the same distance apart, and lines
the three figures up from one season card to the next. */
.career-stat { min-width: 3.9rem; }
.career-stat b {
display: block; font: 900 1.75rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: -0.02em;
}
.career-stat small {
display: block; margin-top: 2px; color: var(--muted);
font: 700 0.52rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.08em; text-transform: uppercase;
}
.career-stat-side {
margin-left: auto; text-align: right; color: var(--muted);
font: 400 0.66rem/1.5 "Space Mono", ui-monospace, monospace;
}
.career-stat-side span { display: block; }
/* One glance tells you how the year ended. */
.career-season-result { margin: 9px 0 0; }
.career-result {
display: inline-block; padding: 4px 10px;
border: 2px solid var(--ink);
font: 900 0.66rem/1.3 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.04em; text-transform: uppercase;
}
.career-result.champ { background: var(--gold); color: #151413; border-color: #151413; }
.career-result.finals { background: var(--court); color: #fff7df; border-color: var(--court); }
.career-result.made { background: transparent; }
.career-result.miss { background: transparent; border-style: dashed; color: var(--muted); }
/* The run, round by round — the part that turns a result into a memory. */
.career-series { margin: 8px 0 0; display: flex; flex-direction: column; gap: 2px; }
.career-series-row {
display: grid; grid-template-columns: 6.2rem 1fr auto; gap: 2px 8px;
align-items: baseline; padding: 4px 8px;
border-left: 3px solid var(--muted);
font: 400 0.66rem/1.45 "Space Mono", ui-monospace, monospace;
}
.career-series-row.won { border-left-color: var(--court); }
.career-series-row.lost { border-left-color: var(--muted); opacity: 0.82; }
.career-series-round { font-weight: 700; color: var(--court-text); }
.career-series-score { font-weight: 900; }
.career-series-line { grid-column: 2 / -1; color: var(--muted); font-size: 0.62rem; }
/* Award pills — hardware you can scan, instead of a run-on line. */
.career-pills { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 0; }
.career-pill {
padding: 3px 8px; border: 2px solid var(--ink); background: var(--surface);
font: 700 0.62rem/1.4 "Space Mono", ui-monospace, monospace;
}
.career-pill.big { background: var(--gold); color: #151413; }
.career-season-notes { margin: 7px 0 0; }
.career-note-line {
font: 400 0.66rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
.career-season-trade.demand { color: var(--court-text); font-weight: 700; }
/* Milestones interrupt: they open over the page, you acknowledge them, and
then they settle into the season card as a line of record. */
.career-ms-overlay {
position: fixed; inset: 0; z-index: 120;
display: grid; place-items: center; padding: 20px;
background: rgba(21, 20, 19, 0.62);
opacity: 0; transition: opacity 0.18s ease;
}
.career-ms-overlay.in { opacity: 1; }
.career-ms-modal {
width: min(420px, 100%);
border: 4px solid var(--ink); background: var(--gold);
box-shadow: 7px 7px 0 var(--ink);
padding: 26px 22px 20px; text-align: center;
transform: scale(0.92) translateY(10px);
transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
.career-ms-overlay.in .career-ms-modal { transform: none; }
.career-ms-kicker {
margin: 0 0 12px; color: rgba(21, 20, 19, 0.66);
font: 700 0.58rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.16em; text-transform: uppercase;
}
.career-ms-line {
margin: 0 0 14px; color: #151413;
font: 900 1.05rem/1.45 "Space Mono", ui-monospace, monospace;
}
.career-ms-close { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
.career-ms-overlay, .career-ms-modal { transition: none; }
}
/* Milestone lines, once acknowledged, sit with the rest of the season. */
.career-season-hl > div { margin-top: 2px; }
/* The one button the player presses on their own initiative. */
.career-btn-demand {
display: block; width: 100%;
background: var(--surface); color: var(--court-text);
border-color: var(--court);
}
.career-btn-demand small {
display: block; margin-top: 3px; color: var(--muted);
font: 400 0.6rem/1.3 "Space Mono", ui-monospace, monospace;
letter-spacing: 0; text-transform: none;
}
@media (max-width: 480px) {
.career-hud { grid-template-columns: repeat(3, 1fr); }
.career-stat b { font-size: 1.45rem; }
.career-stat { min-width: 3.2rem; }
.career-statline { gap: 8px 16px; }
.career-stat-side { margin-left: 0; text-align: left; width: 100%; }
.career-series-row { grid-template-columns: 5.4rem 1fr auto; font-size: 0.6rem; }
}
/* ---- My Stats → Career: pick two runs and settle it -------------------- */
.cmp-slot { margin: 14px 0 0; }
.cmp-hint {
margin: 0; padding: 10px; text-align: center;
border: 2px dashed var(--muted); color: var(--muted);
font: 400 0.7rem/1.4 "Space Mono", ui-monospace, monospace;
}
.career-vault-row[data-cid] { cursor: pointer; }
.career-vault-row.picked { outline: 3px solid var(--court); outline-offset: 2px; }
.cmp-card {
border: 3px solid var(--ink); background: var(--surface);
box-shadow: var(--shadow); padding: 14px;
}
.cmp-heads { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.cmp-head { text-align: center; }
.cmp-head:last-child { text-align: center; }
.cmp-name { display: block; font: 900 0.8rem/1.3 "Space Mono", ui-monospace, monospace; }
.cmp-tier { display: block; font: 700 0.62rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--court-text); }
.cmp-years { display: block; font: 400 0.58rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.cmp-vs {
font: 900 0.7rem "Space Mono", ui-monospace, monospace; color: var(--muted);
text-transform: uppercase;
}
.cmp-table { width: 100%; margin: 12px 0 0; border-collapse: collapse; }
.cmp-table th, .cmp-table td { padding: 5px 4px; }
.cmp-table th {
text-align: center; color: var(--muted); font-weight: 700;
font: 700 0.56rem/1.3 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.05em; text-transform: uppercase;
border-top: 1px dashed currentColor;
}
.cmp-table td {
width: 34%; text-align: center;
font: 700 0.85rem/1.3 "Space Mono", ui-monospace, monospace;
border-top: 1px dashed var(--muted);
}
.cmp-table td.win { color: var(--court-text); font-weight: 900; }
.cmp-table td.win::after { content: " ▲"; font-size: 0.6em; vertical-align: middle; }
/* ---- Career Mode: award + Finals pop-ups ------------------------------- */
.career-ms-title {
margin: 0 0 10px; color: #151413;
font-family: "Playfair Display", Georgia, serif;
font-size: 1.7rem; font-weight: 900; line-height: 1;
}
/* The Finals sim gets the room to breathe — it's a scoreboard, not a banner —
and it stays on paper rather than going dark, so it reads as part of the
same game rather than a modal from somewhere else. */
.career-ms-overlay.wide .career-ms-modal {
width: min(560px, 100%);
background: var(--paper);
border-color: var(--ink);
padding: 24px 22px 20px;
text-align: left;
}
.career-ms-overlay.wide .career-ms-kicker { text-align: center; color: var(--muted); }
.fin-head {
display: grid; grid-template-columns: 1fr auto 1fr;
gap: 10px; align-items: center; margin: 0 0 14px;
padding-bottom: 12px; border-bottom: 3px solid var(--ink);
}
.fin-team {
font: 900 0.9rem/1.25 "Space Mono", ui-monospace, monospace; color: var(--ink);
}
.fin-team.them { text-align: right; }
.fin-tally {
font: 900 1.4rem/1 "Space Mono", ui-monospace, monospace;
color: var(--court-text); letter-spacing: -0.02em;
}
.fin-log {
display: flex; flex-direction: column; gap: 6px;
max-height: 46vh; overflow-y: auto; margin: 0 0 14px;
}
.fin-row {
border: 2px solid var(--ink); background: var(--surface);
border-left-width: 5px; padding: 8px 10px;
opacity: 0; transform: translateY(6px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.fin-row.in { opacity: 1; transform: none; }
.fin-row.won { border-left-color: var(--court); }
.fin-row.lost { border-left-color: var(--muted); }
.fin-row-top {
display: grid; grid-template-columns: 1fr auto 2.3rem;
gap: 10px; align-items: center;
}
.fin-g { font: 700 0.7rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.fin-score { font: 900 1rem/1.2 "Space Mono", ui-monospace, monospace; color: var(--ink); }
.fin-score em { font-style: normal; font-size: 0.62em; color: var(--court-text); }
/* A win and a loss have to be tellable apart from across the room. */
.fin-badge {
display: block; text-align: center; padding: 3px 0;
font: 900 1.15rem/1.15 "Space Mono", ui-monospace, monospace;
border: 2px solid var(--ink);
}
.fin-row.won .fin-badge {
background: var(--court); color: #fff7df; border-color: var(--court);
box-shadow: 2px 2px 0 var(--ink);
}
.fin-row.lost .fin-badge { color: var(--muted); border-color: var(--muted); opacity: 0.85; }
.fin-row.won { border-left-width: 7px; }
.fin-line {
margin-top: 5px;
font: 700 0.74rem/1.3 "Space Mono", ui-monospace, monospace;
color: var(--court-text);
}
.fin-verdict {
margin: 0 0 12px; text-align: center; color: var(--ink);
font: 900 0.95rem/1.45 "Space Mono", ui-monospace, monospace;
opacity: 0; transition: opacity 0.3s ease;
}
.fin-verdict.in { opacity: 1; }
/* The Finals announce themselves before they're played. */
.career-ms-overlay.tone-finals-intro .career-ms-modal {
width: min(480px, 100%);
background: var(--court); border-color: var(--ink);
box-shadow: 9px 9px 0 var(--ink);
}
.career-ms-overlay.tone-finals-intro .career-ms-kicker,
.career-ms-overlay.tone-finals-intro .career-ms-title { color: #fff7df; }
.career-ms-overlay.tone-finals-intro .career-ms-title {
font-size: 2.1rem; letter-spacing: 0.01em;
}
.career-ms-overlay.tone-finals-intro .career-ms-kicker { color: rgba(255, 247, 223, 0.75); }
.fin-marquee {
display: grid; grid-template-columns: 1fr auto 1fr;
gap: 10px; align-items: center;
margin: 16px 0 9px; padding: 14px 10px;
border: 3px solid #fff7df; background: rgba(255, 247, 223, 0.12);
}
.fin-mq-team { text-align: center; }
.fin-mq-name {
display: block; color: #fff7df;
font: 900 1.05rem/1.2 "Space Mono", ui-monospace, monospace;
}
.fin-mq-sub {
display: block; margin-top: 4px; color: rgba(255, 247, 223, 0.7);
font: 700 0.62rem/1.2 "Space Mono", ui-monospace, monospace;
}
.fin-mq-format {
margin: 0 0 14px; text-align: center; color: rgba(255, 247, 223, 0.72);
font: 700 0.6rem/1.3 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.13em; text-transform: uppercase;
}
.fin-mq-vs {
color: rgba(255, 247, 223, 0.7);
font: 900 0.72rem "Space Mono", ui-monospace, monospace; text-transform: uppercase;
}
.fin-mq-line {
margin: 0 0 8px; color: #fff7df;
font: 700 0.74rem/1.5 "Space Mono", ui-monospace, monospace;
}
.fin-mq-line.dim { color: rgba(255, 247, 223, 0.72); }
.career-ms-overlay.tone-finals-intro .career-ms-close {
display: block; width: 100%; margin-top: 12px;
background: #fff7df; color: #151413; border-color: #151413;
}
/* The one modal that is not good news. No gold, no shadow to speak of — it
should feel like the lights went out on the season. */
.career-ms-overlay.tone-injury .career-ms-modal {
/* --ink-bg, not --ink: the text inside is fixed light, so the panel has to
stay dark in both themes. --ink flips cream in dark mode and the whole
modal goes cream-on-cream. */
background: var(--ink-bg); border-color: var(--ink-bg);
box-shadow: 7px 7px 0 rgba(123, 57, 44, 0.55);
}
.career-ms-overlay.tone-injury .career-ms-kicker { color: rgba(245, 240, 230, 0.55); }
.career-ms-overlay.tone-injury .career-ms-title {
color: #e0705a; font-size: 1.45rem; line-height: 1.15;
font-family: "Space Mono", ui-monospace, monospace; letter-spacing: -0.01em;
}
.career-ms-overlay.tone-injury .career-ms-line {
color: #e6e0d4; font-size: 0.92rem;
}
.career-ms-overlay.tone-injury .career-ms-close {
background: transparent; color: #e6e0d4; border-color: #e6e0d4;
}
/* A suspension is the injury modal's cousin: the same lights-out ink panel,
but the accent is the court tone rather than the medical red. Nothing here
went wrong with your body — this one is on you. */
.career-ms-overlay.tone-suspension .career-ms-modal {
background: var(--ink-bg); border-color: var(--ink-bg);
box-shadow: 7px 7px 0 rgba(230, 184, 67, 0.4);
}
.career-ms-overlay.tone-suspension .career-ms-kicker { color: rgba(245, 240, 230, 0.55); }
.career-ms-overlay.tone-suspension .career-ms-title {
color: var(--gold); font-size: 1.6rem; line-height: 1.1;
font-family: "Space Mono", ui-monospace, monospace; letter-spacing: -0.02em;
}
.career-ms-overlay.tone-suspension .career-ms-line { color: #e6e0d4; font-size: 0.92rem; }
.career-ms-overlay.tone-suspension .career-ms-close {
background: transparent; color: #e6e0d4; border-color: #e6e0d4;
}
/* .career-btn's hard shadow is var(--ink), which is invisible against these
panels in light mode but flips cream in dark and renders as a slab hanging
off the button. Pin it to the panel so the modal looks the same either way. */
.career-ms-overlay.tone-injury .career-ms-close,
.career-ms-overlay.tone-suspension .career-ms-close { box-shadow: 3px 3px 0 var(--ink-bg); }
.career-ms-overlay.tone-injury .career-ms-close:active,
.career-ms-overlay.tone-suspension .career-ms-close:active { box-shadow: 1px 1px 0 var(--ink-bg); }
/* The rewarded rehab offer inside the injury modal.
Solid green against the panel's lights-out ink, which is what makes it the
choice on this screen — the dismiss below it ("Rest and recover") is the
ghost outline every other modal uses, so the two read as a real pair rather
than one button and a restatement of it. Green because everything else in
here is the medical red of the thing that just happened; this is the way
back from it. */
.career-rehab {
margin: 16px 0 4px;
padding-top: 14px;
border-top: 1px dashed rgba(245, 240, 230, 0.3);
}
.career-ms-overlay .career-rehab-btn {
display: block; width: 100%;
background: var(--green); color: #fff7df; border-color: var(--green);
box-shadow: 3px 3px 0 var(--ink-bg);
}
.career-ms-overlay .career-rehab-btn:active { box-shadow: 1px 1px 0 var(--ink-bg); }
.career-ms-overlay .career-rehab-btn:disabled { opacity: 0.55; cursor: progress; }
.career-rehab-note {
margin: 9px 0 0;
color: rgba(230, 224, 212, 0.72);
font: 700 0.68rem/1.4 "Space Mono", ui-monospace, monospace;
}
/* The standing readout under a suspension: what it just cost you with the two
rooms that decide the rest of the career. */
.career-susp-rep {
margin: 12px 0 0; padding-top: 10px;
border-top: 1px dashed rgba(245, 240, 230, 0.3);
font: 400 0.72rem/1.5 "Space Mono", ui-monospace, monospace;
color: rgba(245, 240, 230, 0.7); letter-spacing: 0.04em; text-transform: uppercase;
}
.career-susp-rep b { color: var(--gold); font-weight: 700; }
/* Standing on the contract strip. Its own line, because the strip is already
a full sentence and this is a second one. */
.career-rep-note {
display: block; margin-top: 3px;
font: 400 0.72rem/1.4 "Space Mono", ui-monospace, monospace;
color: var(--muted); letter-spacing: 0.02em;
}
/* Passing the all-time scoring leader is the one moment that goes gold-on-black. */
.career-ms-overlay.tone-goat .career-ms-modal {
background: #151413; border-color: var(--gold); box-shadow: 9px 9px 0 var(--gold);
}
.career-ms-overlay.tone-goat .career-ms-title { color: var(--gold); font-size: 1.5rem; }
.career-ms-overlay.tone-goat .career-ms-line { color: #f5f0e6; }
.career-ms-overlay.tone-goat .career-ms-kicker { color: rgba(245, 240, 230, 0.6); }
.career-ms-overlay.tone-goat .career-ms-close {
background: var(--gold); color: #151413; border-color: var(--gold);
}
.career-ms-overlay.wide .career-ms-close { display: block; width: 100%; }
.career-ms-close:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 480px) {
.career-ms-overlay.wide .career-ms-modal { padding: 18px 14px 16px; }
.fin-team { font-size: 0.76rem; }
.career-ms-overlay.tone-finals-intro .career-ms-title { font-size: 1.5rem; }
/* The team dropdown was being squeezed to "— choose a te" by the spin
button sitting next to it. Stack them instead. */
.career-team-row { flex-wrap: wrap; }
.career-team-row .career-select,
.career-team-row .career-btn { flex: 1 1 100%; }
.fin-mq-name { font-size: 0.85rem; }
.fin-tally { font-size: 1.15rem; }
.fin-log { max-height: 52vh; }
}
/* ==========================================================================
THE HALL OF FAME
A room rather than a list. Three moves carry it: the rafters are a dark
strip so the banners read as hanging in a lit arena, the plaques are cast
in bronze against the paper, and the all-time boards reuse the daily
leaderboard's row classes so they're recognisably the same furniture.
========================================================================== */
.hof-page {
position: fixed;
inset: 0;
z-index: 1200;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--paper);
opacity: 0;
transition: opacity 0.18s ease;
}
.hof-page.in { opacity: 1; }
.hof-page-inner {
max-width: 720px;
margin: 0 auto;
padding: 22px 16px 56px;
}
body.hof-page-open { overflow: hidden; }
.hof-page-body { margin-top: 10px; display: grid; gap: 22px; }
.hof-page section { display: grid; gap: 10px; }
.hof-section-label {
font: 700 0.66rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.hof-empty {
font: 400 0.76rem/1.5 "Space Mono", ui-monospace, monospace;
color: var(--muted);
border: 2px dashed var(--ink);
padding: 14px;
margin: 0;
text-align: center;
}
/* --- The rafters --------------------------------------------------------- */
/* Always dark, in both themes: this is meant to look like the ceiling of an
arena with the house lights down, not like a panel on the page. */
.hof-banner-row {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 16px 14px 22px;
/* `safe` matters: a plain `center` pushes the first banner off the left edge
once the row overflows, and an overflowing row is exactly the case where
every banner has to stay reachable. */
justify-content: safe center;
/* Lit from above, so the strip reads as an arena ceiling rather than as an
empty box — which is exactly how it looked in dark mode, where a flat
#151413 panel is almost the same colour as the page behind it. */
background: radial-gradient(ellipse 62% 100% at 50% 0%, #342f22 0%, #151413 72%);
border: 3px solid var(--ink);
box-shadow: var(--shadow);
scrollbar-width: thin;
}
.hof-banner {
flex: 0 0 92px;
display: grid;
justify-items: center;
gap: 2px;
/* The bottom padding has to clear the pennant's point, or the team name
sits inside the notch and gets sliced by the clip-path. */
padding: 10px 6px 28px;
background: linear-gradient(#1d1a15, #2a2418);
border: 2px solid var(--gold);
border-bottom: 0;
color: #fff7df;
text-align: center;
/* The pennant point. Cut from the box itself so the border follows it. */
clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
}
.hof-banner-num {
font: 900 1.25rem/1 "Space Mono", ui-monospace, monospace;
color: var(--gold);
}
.hof-banner-name {
font: 700 0.62rem/1.25 "Space Mono", ui-monospace, monospace;
word-break: break-word;
}
.hof-banner-team {
font: 400 0.55rem/1.2 "Space Mono", ui-monospace, monospace;
color: rgba(255, 247, 223, 0.6);
}
/* --- Your records -------------------------------------------------------- */
.hof-record-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px;
}
.hof-record {
border: 2px solid var(--ink);
background: var(--surface, #fff);
padding: 10px;
display: grid;
gap: 1px;
}
.hof-record-num { font: 900 1.35rem/1 "Space Mono", ui-monospace, monospace; }
.hof-record-label {
font: 700 0.62rem/1.3 "Space Mono", ui-monospace, monospace;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--court-text);
}
.hof-record-who {
font: 400 0.62rem/1.3 "Space Mono", ui-monospace, monospace;
color: var(--muted);
}
/* --- The plaques --------------------------------------------------------- */
.hof-plaque-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
/* Cast bronze: a warm metallic frame with an engraved panel inside it. The
double layer is what sells it — a single border just reads as a gold box. */
.hof-plaque {
padding: 5px;
background: linear-gradient(150deg, #c9a227, #8a6a2f 42%, #e6b843 64%, #7a5c25);
border: 2px solid var(--ink);
box-shadow: var(--shadow);
}
.hof-plaque-inner {
background: #1d1a15;
border: 1px solid rgba(230, 184, 67, 0.55);
color: #f5ecd8;
padding: 14px 12px 12px;
display: grid;
gap: 5px;
text-align: center;
height: 100%;
}
.hof-plaque-crest { font-size: 1.3rem; line-height: 1; }
.hof-plaque-name {
margin: 0;
font: 700 1.05rem/1.2 "Playfair Display", Georgia, serif;
color: var(--gold);
}
.hof-plaque-name em { font-style: normal; color: rgba(245, 236, 216, 0.7); }
.hof-plaque-meta,
.hof-plaque-teams {
margin: 0;
font: 400 0.63rem/1.35 "Space Mono", ui-monospace, monospace;
color: rgba(245, 236, 216, 0.7);
}
.hof-plaque-stats {
margin: 4px 0 0;
font: 400 0.65rem/1.5 "Space Mono", ui-monospace, monospace;
color: rgba(245, 236, 216, 0.9);
border-top: 1px solid rgba(230, 184, 67, 0.28);
border-bottom: 1px solid rgba(230, 184, 67, 0.28);
padding: 6px 0;
}
.hof-plaque-stats b { color: #fff7df; }
.hof-plaque-line {
margin: 0;
font: 700 0.63rem/1.45 "Space Mono", ui-monospace, monospace;
color: var(--gold);
}
.hof-plaque-tier {
margin: 2px 0 0;
font: 700 0.68rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #f5ecd8;
}
.hof-plaque-tier span { color: var(--gold); }
.hof-plaque-sheet {
margin-top: 6px;
justify-self: center;
border: 1px solid rgba(230, 184, 67, 0.6);
background: transparent;
color: var(--gold);
font: 700 0.62rem/1 "Space Mono", ui-monospace, monospace;
padding: 6px 10px;
cursor: pointer;
}
.hof-plaque-sheet:hover { background: rgba(230, 184, 67, 0.14); }
/* --- The all-time boards ------------------------------------------------- */
/* Same override as the daily career board: .lb-list caps itself at 56vh and
scrolls internally, and it is defined earlier in this file, so this has to
out-specify it rather than merely follow it. */
.hof-page .lb-list { max-height: none; overflow-y: visible; gap: 8px; }
.hof-page .lb-row { grid-template-columns: 44px 1fr auto; row-gap: 2px; }
.hof-list-sub {
grid-column: 1 / -1;
padding-left: 54px;
font: 400 0.66rem/1.35 "Space Mono", ui-monospace, monospace;
color: var(--muted);
}
.lb-row-me .hof-list-sub { color: #4a3c14; }
.hof-tabs { flex-wrap: wrap; }
/* --- Locked state -------------------------------------------------------- */
.hof-locked {
border: 3px solid var(--ink);
box-shadow: var(--shadow);
background: var(--surface, #fff);
padding: 26px 18px;
text-align: center;
display: grid;
gap: 10px;
justify-items: center;
}
.hof-locked-crest { font-size: 2.4rem; line-height: 1; }
.hof-locked h3 { margin: 0; font: 700 1.15rem "Playfair Display", Georgia, serif; }
.hof-locked p {
margin: 0;
max-width: 42ch;
font: 400 0.78rem/1.55 "Space Mono", ui-monospace, monospace;
color: var(--muted);
}
/* ==========================================================================
THE CAREER SHEET
A printed record, not a screen. It stays cream-on-black-ink in BOTH themes
on purpose: this is the artifact you save as a PDF, and a document that
inverts with the site's theme stops looking like a document.
========================================================================== */
.sheet-page {
position: fixed;
inset: 0;
z-index: 1300;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: rgba(21, 20, 19, 0.82);
opacity: 0;
transition: opacity 0.18s ease;
}
.sheet-page.in { opacity: 1; }
.sheet-page-inner { max-width: 780px; margin: 0 auto; padding: 16px 12px 48px; }
body.sheet-page-open { overflow: hidden; }
.sheet-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
}
/* Share / save / print travel together and wrap as a group, so a narrow screen
drops all three under the back button rather than splitting them. */
.sheet-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sheet-tools .career-btn { margin: 0; }
.sheet-doc {
background: #fdfaf1;
color: #151413;
border: 3px solid #151413;
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
padding: 26px 24px 20px;
}
.sheet-head { border-bottom: 3px double #151413; padding-bottom: 12px; }
.sheet-brand {
margin: 0 0 6px;
font: 700 0.6rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.22em;
color: rgba(21, 20, 19, 0.55);
}
.sheet-name {
margin: 0;
font: 700 1.9rem/1.1 "Playfair Display", Georgia, serif;
}
.sheet-name span { color: rgba(21, 20, 19, 0.45); }
.sheet-sub {
margin: 4px 0 0;
font: 400 0.76rem/1.4 "Space Mono", ui-monospace, monospace;
color: rgba(21, 20, 19, 0.7);
}
.sheet-facts {
margin: 12px 0 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 8px 16px;
}
.sheet-facts div { display: grid; gap: 1px; }
.sheet-facts dt {
font: 700 0.58rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(21, 20, 19, 0.5);
}
.sheet-facts dd {
margin: 0;
font: 700 0.76rem/1.35 "Space Mono", ui-monospace, monospace;
}
.sheet-totals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
gap: 6px;
margin: 16px 0;
padding: 12px 0;
border-top: 1px solid rgba(21, 20, 19, 0.25);
border-bottom: 1px solid rgba(21, 20, 19, 0.25);
text-align: center;
}
.sheet-totals div { display: grid; gap: 2px; }
.sheet-totals b { font: 900 1.1rem/1 "Space Mono", ui-monospace, monospace; }
.sheet-totals span {
font: 700 0.56rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(21, 20, 19, 0.55);
}
.sheet-h2 {
margin: 20px 0 8px;
font: 700 0.68rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(21, 20, 19, 0.6);
}
/* A wide table has to scroll inside its own box, or the whole page scrolls
sideways on a phone. */
.sheet-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Only worth saying where the table actually overflows — on a wide screen the
whole row is visible and the hint would just be wrong. */
.sheet-scroll-hint { display: none; }
@media (max-width: 700px) {
.sheet-scroll-hint {
display: block;
margin: 0 0 6px;
font: 400 0.6rem/1.3 "Space Mono", ui-monospace, monospace;
color: rgba(21, 20, 19, 0.5);
}
}
.sheet-table {
width: 100%;
min-width: 560px;
border-collapse: collapse;
font: 400 0.7rem/1.35 "Space Mono", ui-monospace, monospace;
}
.sheet-table th {
text-align: left;
font-weight: 700;
font-size: 0.58rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(21, 20, 19, 0.6);
border-bottom: 2px solid #151413;
padding: 5px 6px;
white-space: nowrap;
}
.sheet-table td {
padding: 4px 6px;
border-bottom: 1px solid rgba(21, 20, 19, 0.12);
white-space: nowrap;
}
.sheet-table tbody tr:nth-child(even) { background: rgba(21, 20, 19, 0.035); }
.sheet-table .sheet-yr { font-weight: 700; }
.sheet-table .sheet-num { text-align: right; }
.sheet-table .sheet-aw {
white-space: normal;
min-width: 130px;
color: rgba(21, 20, 19, 0.7);
font-size: 0.64rem;
}
.sheet-table .sheet-res { font-size: 0.64rem; }
.sheet-table tr.sheet-champ { background: rgba(230, 184, 67, 0.26); }
.sheet-table tr.sheet-champ .sheet-res { font-weight: 700; }
.sheet-table tfoot td {
border-top: 2px solid #151413;
border-bottom: 0;
font-weight: 900;
background: rgba(21, 20, 19, 0.055);
}
.sheet-accolades {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 4px 14px;
font: 400 0.74rem/1.5 "Space Mono", ui-monospace, monospace;
}
.sheet-accolades b { font-weight: 900; }
.sheet-verdict { margin-top: 20px; }
.sheet-tier {
margin: 0;
font: 700 1.15rem/1.2 "Playfair Display", Georgia, serif;
}
.sheet-tier span {
font-family: "Space Mono", ui-monospace, monospace;
font-size: 0.9rem;
color: rgba(21, 20, 19, 0.5);
}
.sheet-verdict-line {
margin: 4px 0 0;
font: 400 0.76rem/1.55 "Space Mono", ui-monospace, monospace;
color: rgba(21, 20, 19, 0.75);
}
.sheet-foot {
margin-top: 22px;
padding-top: 10px;
border-top: 1px solid rgba(21, 20, 19, 0.25);
display: flex;
justify-content: space-between;
gap: 10px;
font: 400 0.6rem/1.3 "Space Mono", ui-monospace, monospace;
color: rgba(21, 20, 19, 0.5);
}
/* Print: the sheet IS the page. Everything else goes, including the overlay's
own chrome, so "Save as PDF" produces the document and nothing around it. */
@media print {
body.sheet-page-open > *:not(.sheet-page) { display: none !important; }
body.sheet-page-open { overflow: visible; }
.sheet-page {
position: static;
background: #fff;
opacity: 1;
overflow: visible;
}
.sheet-page-inner { max-width: none; padding: 0; }
.no-print { display: none !important; }
.sheet-doc {
border: 0;
box-shadow: none;
padding: 0;
background: #fff;
}
.sheet-table { min-width: 0; font-size: 0.62rem; }
.sheet-table-wrap { overflow: visible; }
.sheet-table tr { break-inside: avoid; }
.sheet-table tr.sheet-champ,
.sheet-table tbody tr:nth-child(even),
.sheet-table tfoot td {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
/* --- Entry points on the vault ------------------------------------------- */
/* Its own row under the score, so it never fights the delete button or the
two-line summary above it. */
/* Shares a row with the delete button rather than spanning the full width —
spanning pushed the × onto a third row of its own and left a dead gap. */
.career-vault-sheet {
grid-column: 1;
justify-self: start;
margin-top: 4px;
border: 1px solid var(--ink);
background: transparent;
color: var(--court-text);
font: 700 0.6rem/1 "Space Mono", ui-monospace, monospace;
padding: 5px 8px;
cursor: pointer;
}
.career-vault-sheet:hover { background: var(--gold); color: var(--ink); }
/* Pinned opposite the sheet button on that same third row. The score above it
spans rows 1-2 of this column, so without this the × auto-placed into a row
of its own and floated in the middle of the card. */
.career-vault-row .career-vault-del { grid-column: 2; justify-self: end; align-self: center; }
.career-hof-btn { margin-top: 10px; width: 100%; }
.career-vault-pinned {
margin: 0 0 6px;
font: 700 0.64rem/1.3 "Space Mono", ui-monospace, monospace;
color: var(--court-text);
}
/* The free player's placing on the Pass-only daily board. */
.career-cotd-rank {
margin: 6px 0 0;
font: 700 0.78rem/1.4 "Space Mono", ui-monospace, monospace;
}
.career-cotd-rank:empty { display: none; }
.career-cotd-result-rank {
display: block;
margin-top: 4px;
font: 700 0.8rem/1.4 "Space Mono", ui-monospace, monospace;
color: var(--court-text);
}
@media (max-width: 480px) {
.hof-page-inner { padding: 18px 12px 44px; }
.hof-plaque-list { grid-template-columns: 1fr; }
.hof-banner { flex-basis: 82px; }
.sheet-doc { padding: 18px 14px 16px; }
.sheet-name { font-size: 1.5rem; }
}
/* =========================================================================
THE BLOODLINE — the line of careers, on setup, in the outro and in the hall
========================================================================= */
.career-line { border-left: 8px solid var(--court); }
.career-line-chain {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px;
}
.career-line-link {
display: flex; flex-direction: column; gap: 1px;
padding: 6px 9px; border: 2px solid var(--ink); background: var(--surface);
min-width: 0;
}
.career-line-link b {
font: 800 0.76rem/1.15 "Space Mono", ui-monospace, monospace; color: var(--ink);
overflow-wrap: anywhere;
}
.career-line-link em {
font: 400 0.6rem/1 "Space Mono", ui-monospace, monospace; font-style: normal;
color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.career-line-arrow { font: 900 0.8rem "Space Mono", ui-monospace, monospace; color: var(--court-text); }
.career-line-sum {
margin: 0 0 8px; font: 700 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink);
}
.career-line-marks { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.career-line-marks li {
font: 400 0.72rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
.career-line-marks b { color: var(--court-text); font-weight: 800; }
/* Same reason as the outro buttons: the subtitle needs its own line. */
.career-line .career-btn-ghost small,
.career-wk-result .career-btn-mini small {
display: block; margin-top: 3px; letter-spacing: 0;
font: 400 0.66rem "Space Mono", ui-monospace, monospace; color: var(--muted);
}
.career-line-marks em { font-style: normal; color: var(--ink); }
.career-draft-line {
display: block; margin-top: 8px;
font: 400 0.74rem/1.45 "Space Mono", ui-monospace, monospace; color: var(--court-text);
}
/* The outro strip. Gold when this career is the best the line has produced —
the one moment worth shouting about. */
.career-line-outro {
border: 3px solid var(--ink); background: var(--surface); padding: 12px 14px; margin: 0 0 14px;
}
.career-line-outro.best { background: var(--gold); }
.career-line-outro.best,
.career-line-outro.best strong { color: #151413; }
.career-line-outro-label {
display: block; font: 700 0.6rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.career-line-outro.best .career-line-outro-label { color: rgba(21, 20, 19, 0.7); }
.career-line-outro-verdict { margin: 0 0 4px; font: 400 0.82rem/1.45 "Space Mono", ui-monospace, monospace; }
.career-line-outro-sum { margin: 0; font: 400 0.72rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.career-line-outro.best .career-line-outro-sum { color: rgba(21, 20, 19, 0.72); }
/* The hall's wall of succession. */
.hof-line { margin: 26px 0 0; }
.hof-line-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hof-line-item {
display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: baseline;
border: 2px solid var(--ink); background: var(--surface); padding: 9px 11px;
}
.hof-line-item.current { border-width: 3px; box-shadow: 3px 3px 0 var(--court); }
.hof-line-gen {
grid-row: 1; font: 800 0.6rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--court-text);
}
.hof-line-name {
grid-row: 1; font: 800 0.86rem/1.2 "Space Mono", ui-monospace, monospace;
color: var(--ink); overflow-wrap: anywhere;
}
.hof-line-name em { font-style: normal; color: var(--muted); }
.hof-line-score {
grid-row: 1; grid-column: 3; font: 900 1rem/1 "Space Mono", ui-monospace, monospace; color: var(--ink);
}
.hof-line-sub {
grid-row: 2; grid-column: 1 / 3;
font: 400 0.68rem/1.35 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
.hof-line-tier {
grid-row: 2; grid-column: 3; justify-self: end;
font: 700 0.62rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase;
letter-spacing: 0.04em;
}
.hof-line-sum {
margin: 10px 0 0; font: 700 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
/* =========================================================================
THE WEEK — three challenges, Monday to Monday
========================================================================= */
.career-wk-line { margin: 0 0 12px; font: 400 0.8rem/1.5 "Space Mono", ui-monospace, monospace; }
.career-wk-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.career-wk-row {
display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center;
border: 2px solid var(--ink); background: var(--surface); padding: 10px 12px;
}
.career-wk-row.done { background: var(--gold); border-color: var(--ink); }
.career-wk-row.done .career-wk-name,
.career-wk-row.done .career-wk-rule,
.career-wk-row.done .career-wk-goal,
.career-wk-row.done .career-wk-done,
.career-wk-row.done .career-wk-icon { color: #151413; }
.career-wk-row.locked { opacity: 0.72; }
.career-wk-icon { font-size: 1.15rem; line-height: 1; }
.career-wk-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.career-wk-name { font: 800 0.85rem/1.2 "Space Mono", ui-monospace, monospace; color: var(--ink); }
.career-wk-rule { font: 400 0.7rem/1.35 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.career-wk-goal {
font: 700 0.72rem/1.35 "Space Mono", ui-monospace, monospace; color: var(--court-text);
}
.career-wk-done { font: 400 0.66rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.career-wk-btn {
padding: 8px 12px; cursor: pointer; white-space: nowrap;
font: 800 0.72rem "Space Mono", ui-monospace, monospace;
border: 2px solid var(--ink); background: var(--court); color: var(--chalk);
}
.career-wk-btn.locked { background: var(--gold); color: #151413; }
.career-wk-btn:hover { filter: brightness(1.06); }
.career-wk-badge {
font: 800 0.68rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase;
letter-spacing: 0.06em; color: #151413; white-space: nowrap;
}
/* Armed, on the setup screen. */
.career-wk-armed { border-left: 8px solid var(--gold); }
.career-wk-armed-name { margin: 0 0 2px; font: 400 1rem/1.3 "Space Mono", ui-monospace, monospace; }
.career-wk-armed-goal {
margin: 0 0 8px; font: 700 0.8rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--court-text);
}
/* Pinned under the header for the whole run. */
.career-wk-strip {
margin: 0 0 10px; padding: 8px 10px;
border: 2px dashed var(--court); background: transparent;
font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink);
}
/* The verdict on the outro. */
.career-wk-result {
display: flex; flex-direction: column; gap: 4px;
border: 3px solid var(--ink); padding: 12px 14px; margin: 0 0 14px; background: var(--surface);
}
.career-wk-result.met { background: var(--gold); }
.career-wk-result.met .career-wk-result-label,
.career-wk-result.met .career-wk-result-goal,
.career-wk-result.met .career-wk-result-verdict { color: #151413; }
.career-wk-result.missed { border-style: dashed; }
.career-wk-result-label { font: 800 0.8rem/1.2 "Space Mono", ui-monospace, monospace; color: var(--ink); }
.career-wk-result-goal { font: 400 0.74rem/1.35 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.career-wk-result-verdict {
font: 900 0.9rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--ink);
}
.career-wk-result .career-btn-mini { align-self: flex-start; margin-top: 4px; }
/* =========================================================================
WHAT IF — the fork, opened over a finished career
========================================================================= */
.career-btn-whatif { background: var(--blue); color: var(--chalk); border-color: var(--ink); }
.career-btn-whatif.locked { background: var(--gold); color: #151413; }
.whatif-page {
position: fixed; inset: 0; z-index: 1240; overflow-y: auto;
-webkit-overflow-scrolling: touch; background: var(--paper);
opacity: 0; transition: opacity 0.18s ease;
}
.whatif-page.in { opacity: 1; }
.whatif-inner { max-width: 680px; margin: 0 auto; padding: 22px 16px 48px; }
.whatif-body { margin-top: 6px; }
.whatif-lead {
margin: 0 0 14px; font: 400 0.82rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
.whatif-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.whatif-point { border: 2px solid var(--ink); background: var(--surface); padding: 12px 13px; }
.whatif-point-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.whatif-year {
font: 900 0.9rem/1 "Space Mono", ui-monospace, monospace; color: var(--court-text);
}
.whatif-title {
flex: 1; min-width: 0; font: 800 0.82rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--ink);
}
.whatif-age { font: 400 0.66rem/1 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.whatif-took {
margin: 6px 0 8px; font: 400 0.72rem/1.35 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
.whatif-took em { font-style: normal; color: var(--ink); font-weight: 700; }
.whatif-alts { display: grid; gap: 6px; }
.whatif-alt {
width: 100%; text-align: left; padding: 9px 11px; cursor: pointer;
font: 700 0.76rem/1.35 "Space Mono", ui-monospace, monospace;
border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
}
.whatif-alt:hover { background: var(--gold); color: #151413; }
.whatif-working { padding: 40px 0; }
.whatif-branch {
margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
font: 800 0.86rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--ink);
}
.whatif-verdict {
margin: 0 0 14px; padding: 10px 12px; border-left: 6px solid var(--court);
font: 400 0.86rem/1.45 "Space Mono", ui-monospace, monospace; color: var(--ink);
background: var(--surface);
}
.whatif-table { border: 2px solid var(--ink); background: var(--surface); }
.whatif-th, .whatif-tr {
display: grid; grid-template-columns: 1fr 5.2rem 5.2rem 4.4rem; gap: 6px;
padding: 8px 11px; align-items: baseline;
}
.whatif-th {
border-bottom: 2px solid var(--ink);
font: 700 0.6rem/1 "Space Mono", ui-monospace, monospace;
text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.whatif-th span:nth-child(2), .whatif-th span:nth-child(3) { text-align: right; }
.whatif-tr + .whatif-tr { border-top: 1px solid var(--grid-line-a); }
.whatif-k { font: 400 0.74rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.whatif-a, .whatif-b {
text-align: right; font: 700 0.8rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--ink);
overflow-wrap: anywhere;
}
.whatif-b { color: var(--court-text); }
.whatif-d {
text-align: right; font: 800 0.72rem/1.3 "Space Mono", ui-monospace, monospace;
}
.whatif-d.up { color: var(--green); }
.whatif-d.down { color: var(--red); }
.whatif-d.flat { color: var(--muted); }
.whatif-journey {
margin: 10px 0 0; font: 400 0.72rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
.whatif-again { margin-top: 12px; }
@media (max-width: 460px) {
.career-wk-row { grid-template-columns: auto 1fr; }
.career-wk-btn, .career-wk-badge { grid-column: 2; justify-self: start; margin-top: 4px; }
.hof-line-item { grid-template-columns: auto 1fr; }
.hof-line-score { grid-column: 2; justify-self: end; }
.hof-line-sub, .hof-line-tier { grid-column: 1 / -1; }
.hof-line-tier { justify-self: start; }
.whatif-th, .whatif-tr { grid-template-columns: 1fr 4.2rem 4.2rem 3.6rem; padding: 8px; }
.whatif-a, .whatif-b { font-size: 0.72rem; }
}
/* =========================================================================
FRIEND LEAGUES — a private daily board for a group
========================================================================= */
.career-lg-line { margin: 0 0 12px; font: 400 0.8rem/1.5 "Space Mono", ui-monospace, monospace; }
.career-lg-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.career-lg-row {
display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center;
border: 2px solid var(--ink); background: var(--surface); padding: 10px 12px;
}
.career-lg-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.career-lg-name { font: 800 0.85rem/1.2 "Space Mono", ui-monospace, monospace; color: var(--ink); overflow-wrap: anywhere; }
.career-lg-code { font: 400 0.68rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.career-lg-code code {
font: 800 0.72rem "Space Mono", ui-monospace, monospace; color: var(--court-text);
letter-spacing: 0.08em;
}
.career-lg-btn {
padding: 8px 14px; cursor: pointer; white-space: nowrap;
font: 800 0.72rem "Space Mono", ui-monospace, monospace;
border: 2px solid var(--ink); background: var(--court); color: var(--chalk);
}
.career-lg-btn:hover { filter: brightness(1.06); }
.career-lg-join, .career-lg-create { display: flex; gap: 8px; margin: 0 0 8px; }
.career-lg-join .career-input, .career-lg-create .career-input { flex: 1; min-width: 0; }
.career-lg-join .career-input { text-transform: uppercase; letter-spacing: 0.12em; }
.career-lg-join .career-btn, .career-lg-create .career-btn { flex: 0 0 auto; margin: 0; }
.career-lg-msg {
margin: 0 0 8px; min-height: 1em;
font: 400 0.72rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
.career-lg-msg.bad { color: var(--red); }
/* The invite code is the headline on a league board: a league nobody else has
joined is worth nothing, so handing the code out is the primary action. */
.league-invite {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
border: 3px solid var(--ink); background: var(--gold); padding: 10px 14px; margin: 0 0 14px;
}
.league-invite-label {
font: 700 0.6rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.08em;
text-transform: uppercase; color: rgba(21, 20, 19, 0.7);
}
.league-invite-code {
flex: 1; min-width: 0;
font: 900 1.35rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.18em; color: #151413;
}
.league-invite .career-btn-mini { margin: 0; flex: 0 0 auto; }
.league-page .career-btn-mini { margin-top: 14px; }
@media (max-width: 460px) {
.career-lg-row { grid-template-columns: 1fr; }
.career-lg-btn { justify-self: start; margin-top: 4px; }
.career-lg-join, .career-lg-create { flex-wrap: wrap; }
.career-lg-join .career-input, .career-lg-create .career-input { flex: 1 1 100%; }
.career-lg-join .career-btn, .career-lg-create .career-btn { flex: 1 1 100%; }
.league-invite-code { flex: 1 1 100%; font-size: 1.6rem; }
}
/* League season table, day nav and commissioner tools. */
.league-tabs { margin: 0 0 14px; }
.league-you {
margin: 0 0 8px; padding: 10px 12px; border-left: 6px solid var(--court);
background: var(--surface);
font: 400 0.84rem/1.45 "Space Mono", ui-monospace, monospace; color: var(--ink);
}
.league-today-line {
margin: 0 0 12px; font: 400 0.74rem/1.45 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
.league-today-line strong { color: var(--court-text); }
.league-table { border: 2px solid var(--ink); background: var(--surface); }
.league-th, .league-tr {
display: grid; grid-template-columns: 2.2rem 1fr 4.4rem 3rem 3.4rem;
gap: 6px; padding: 9px 11px; align-items: baseline;
}
.league-th {
border-bottom: 2px solid var(--ink);
font: 700 0.58rem/1 "Space Mono", ui-monospace, monospace;
text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.league-th span:nth-child(n+3) { text-align: right; }
.league-tr + .league-tr { border-top: 1px solid var(--grid-line-a); }
.league-tr.me { background: var(--gold); }
.league-tr.me .league-rank, .league-tr.me .league-name,
.league-tr.me .league-pts, .league-tr.me .league-days, .league-tr.me .league-best { color: #151413; }
.league-tr.top .league-pts { color: var(--court-text); }
.league-tr.me.top .league-pts { color: #151413; }
.league-rank { font: 800 0.82rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.league-name {
font: 800 0.82rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--ink);
overflow-wrap: anywhere; min-width: 0;
}
.league-streak { font-style: normal; font-size: 0.7rem; margin-left: 4px; }
.league-in { font-style: normal; color: var(--green); margin-left: 4px; font-size: 0.7rem; }
.league-tr.me .league-in { color: #157f68; }
.league-pts, .league-days, .league-best {
text-align: right; font: 800 0.82rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--ink);
}
.league-days, .league-best { font-weight: 400; color: var(--muted); }
.league-records { margin: 16px 0 0; }
.league-records ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
.league-records li { font: 400 0.74rem/1.35 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.league-records b { color: var(--court-text); font-weight: 800; }
.league-records em { font-style: normal; color: var(--ink); }
.league-daynav { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.league-daynav .career-btn-mini { margin: 0; flex: 0 0 auto; }
.league-daylabel {
flex: 1; text-align: center;
font: 700 0.76rem/1 "Space Mono", ui-monospace, monospace; color: var(--ink);
}
.league-admin { margin: 0 0 14px; }
.league-members { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.league-members li {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
border: 2px solid var(--ink); background: var(--surface); padding: 8px 11px;
font: 700 0.78rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--ink);
}
.league-members li em { font-style: normal; color: var(--muted); font-weight: 400; }
.league-members li .career-btn-mini { margin: 0; flex: 0 0 auto; }
.league-members.quiet li { border-style: dashed; }
.league-page .league-delete, .league-page .league-leave { margin-top: 10px; }
@media (max-width: 460px) {
.league-th, .league-tr { grid-template-columns: 1.8rem 1fr 3.8rem 2.4rem 2.8rem; padding: 8px 7px; gap: 4px; }
.league-rank, .league-name, .league-pts, .league-days, .league-best { font-size: 0.74rem; }
.league-daynav { flex-wrap: wrap; }
.league-daylabel { flex: 1 1 100%; order: -1; margin-bottom: 4px; }
}
/* ==========================================================================
THE PASS MODAL, GROUPED
Sixteen perks in one flat run reads as noise. The headings break it into
three stretches and span the full width of the two-column grid, so the
grouping survives the columns instead of fighting them.
========================================================================== */
.pass-count {
margin: 0 0 12px;
font: 400 0.82rem/1.5 "Space Mono", ui-monospace, monospace;
color: var(--muted);
text-align: center;
}
.pass-count b { color: var(--court); font-weight: 800; }
.pass-perks .perk-head {
grid-column: 1 / -1;
display: block;
margin: 6px 0 0;
padding-top: 10px;
border-top: 2px solid var(--ink);
}
.pass-perks li.perk-head:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.perk-head-title {
display: block;
font: 900 0.74rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
}
.perk-head-note {
display: block;
margin-top: 3px;
font: 400 0.72rem/1.4 "Space Mono", ui-monospace, monospace;
color: var(--muted);
}
.perk-head-tag {
display: inline-block;
margin-left: 6px;
padding: 2px 6px;
background: var(--court);
color: #fff;
border: 1.5px solid var(--ink);
font: 800 0.6rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.1em;
vertical-align: 1px;
}
.pass-everything { margin: 10px 0 0; text-align: center; font: 700 0.78rem/1.4 "Space Mono", ui-monospace, monospace; }
.pass-everything a { color: var(--court); }
/* Sixteen perks is roughly two screens of modal on a desktop, and the buy
button used to live at the bottom of all of it — scroll to the end or never
see the price. The phone layout had already solved this by pinning the CTA
and scrolling only the list; this lifts that arrangement to every width, so
the price and the button are on screen the whole time. */
.pass-body { display: flex; flex-direction: column; overflow: hidden; }
/* The rule under the list matters: without it a half-clipped perk row runs
straight into the free-to-play note and reads as a rendering bug rather than
as "there is more of this, scroll". */
.pass-perks {
overflow-y: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch;
border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 12px;
}
.pass-count, .pass-free-note, .pass-everything, .pass-promo, .pass-cta, .pass-fine,
.pass-alt { flex-shrink: 0; }
@media (max-width: 640px) {
.pass-count { font-size: 0.74rem; margin-bottom: 8px; }
.perk-head-title { font-size: 0.68rem; }
.perk-head-note { display: none; }
.pass-perks .perk-head { padding-top: 8px; }
}
/* ==========================================================================
THE CAREER MODE DROP
Built on the flash-deal popup's bones — same size, same entrance — because
that layout already survives every phone the game runs on. Court-orange
header block instead of a price, because this one is announcing a mode
rather than selling anything.
========================================================================== */
.drop-modal {
position: relative; overflow: hidden;
max-width: 380px; width: calc(100% - 40px);
text-align: center; padding: 30px 26px 24px;
border: 3px solid var(--ink); background: var(--paper, #fbf7ee);
box-shadow: 8px 8px 0 var(--ink);
animation: flashPop 0.35s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.drop-modal .modal-close {
position: absolute; top: 8px; right: 8px; z-index: 3;
width: 30px; height: 30px; color: var(--ink);
border: none; background: transparent; border-radius: 50%;
font-size: 1.2rem; line-height: 1; opacity: 0.6; box-shadow: none;
}
.drop-modal .modal-close:hover { background: rgba(21, 20, 19, 0.12); border-color: transparent; opacity: 1; transform: none; box-shadow: none; }
.drop-kicker {
display: inline-block;
font: 800 0.72rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.12em; text-transform: uppercase;
color: #fff; background: var(--court);
border: 2px solid var(--ink); padding: 6px 12px;
box-shadow: 2px 2px 0 var(--ink);
}
.drop-title { margin: 16px 0 8px; font: 900 2.05rem/1.02 "Playfair Display", Georgia, serif; color: var(--ink); }
.drop-sub { margin: 0 0 16px; font: 400 0.84rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.drop-beats { list-style: none; margin: 0 0 16px; padding: 0; text-align: left; }
.drop-beats li {
padding: 8px 0;
border-top: 1px solid rgba(21, 20, 19, 0.16);
font: 400 0.78rem/1.45 "Space Mono", ui-monospace, monospace;
color: var(--muted);
}
.drop-beats li:last-child { border-bottom: 1px solid rgba(21, 20, 19, 0.16); }
.drop-beats b { color: var(--ink); font-weight: 800; }
.drop-free {
margin: 0 0 16px;
font: 700 0.72rem/1.3 "Space Mono", ui-monospace, monospace;
text-transform: uppercase; letter-spacing: 0.04em; color: var(--court);
}
.drop-cta {
display: block; width: 100%; padding: 14px; cursor: pointer;
background: var(--court); color: #fff; text-decoration: none;
border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
font: 800 0.92rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.04em; text-transform: uppercase;
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.drop-cta:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.drop-dismiss {
margin-top: 10px; width: 100%; padding: 8px; cursor: pointer;
background: transparent; border: none; box-shadow: none;
font: 400 0.76rem/1 "Space Mono", ui-monospace, monospace;
color: var(--muted); text-decoration: underline;
}
.drop-dismiss:hover { color: var(--ink); }
/* "Learn more" on the jacket drop is a real link, not a dismiss button, so it
needs the box the button got for free — width and padding do nothing on an
inline element. */
a.drop-dismiss { display: block; text-align: center; box-sizing: border-box; }
/* The jacket artwork above the kicker. */
.drop-art { display: flex; justify-content: center; margin: 0 0 10px; }
/* The one cross-promo selling something gold, so its button is gold rather
than the court red the others use. Both colours are fixed rather than
themed — ink on gold is the same pairing the jacket pages use, and it reads
identically in light and dark because neither end of it moves. */
.drop-cta-gold {
background: linear-gradient(135deg, #f7dd94, #e6b843 55%, #b58a24);
color: #2a2109;
}
@media (max-width: 420px) {
.drop-modal { padding: 26px 20px 20px; }
.drop-title { font-size: 1.75rem; }
.drop-beats li { font-size: 0.73rem; }
}
/* End Zone reads as itself inside GOAT Lab's own popup shell -- same shape as
the mode drops, but its own colours (the green off its wordmark, the gold
off its CTA) instead of GOAT Lab's court-orange standing in for a site that
isn't GOAT Lab. */
#endZoneDropModal .drop-kicker { background: #123b22; border-color: #123b22; }
#endZoneDropModal .endzone-title-accent { color: #123b22; }
#endZoneDropModal .drop-free { color: #123b22; }
#endZoneDropModal .drop-cta {
background: #d99a2b; color: var(--ink); border-color: var(--ink);
}
#endZoneDropModal .drop-cta:hover { box-shadow: 2px 2px 0 var(--ink); }
/* LETSGO reads as itself too -- black/purple off their pack art instead of
GOAT Lab's court-orange. Wider than the other drops and laid out as a row
(pack art beside the copy) above ~480px so the box reads as a wide card
instead of a tall phone-shaped strip; below that it drops back to the
standard stacked/centered drop-modal layout, sized down to fit comfortably
on a phone screen. */
#letsgoDropModal .drop-modal, #letsgoPostGame .drop-modal {
padding-top: 22px; max-width: 560px; text-align: center;
/* Short viewports -- a phone held sideways, or a small laptop with the
browser chrome eating the height -- scroll the card instead of pushing the
CTA off the bottom of the screen where it can never be tapped. */
max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto;
}
.letsgo-drop-body { display: flex; flex-direction: column; align-items: center; }
.letsgo-drop-text { width: 100%; }
.drop-pack-wrap {
position: relative; overflow: hidden;
width: 196px; margin: 0 auto 10px;
border-radius: 6px;
flex: 0 0 auto;
}
.drop-pack-art { display: block; width: 100%; height: auto; }
/* Foil shimmer: a soft diagonal highlight sweeps across the pack, then holds
off-screen for the rest of the loop -- a shine, not a constant glimmer. */
.drop-pack-wrap::after {
content: ""; position: absolute; top: -60%; left: -60%;
width: 35%; height: 220%;
background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.65), transparent);
transform: rotate(18deg);
animation: packShimmer 3.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes packShimmer {
0% { left: -60%; }
35% { left: 130%; }
100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
.drop-pack-wrap::after { animation: none; display: none; }
}
#letsgoDropModal .drop-title, #letsgoPostGame .drop-title { margin: 0 0 6px; }
#letsgoDropModal .drop-sub, #letsgoPostGame .drop-sub { margin: 0 0 10px; }
#letsgoDropModal .drop-free, #letsgoPostGame .drop-free { margin: 0 0 12px; }
#letsgoDropModal .drop-kicker, #letsgoPostGame .drop-kicker { background: #1a1a1f; border-color: #1a1a1f; }
#letsgoDropModal .letsgo-title-accent, #letsgoPostGame .letsgo-title-accent { color: #8b3fe0; }
#letsgoDropModal .drop-free, #letsgoPostGame .drop-free { color: #8b3fe0; }
#letsgoDropModal .drop-cta, #letsgoPostGame .drop-cta {
background: #8b3fe0; color: #fff; border-color: var(--ink);
}
#letsgoDropModal .drop-cta:hover, #letsgoPostGame .drop-cta:hover { box-shadow: 2px 2px 0 var(--ink); }
/* Row layout once there's room for the pack art and the copy side by side
without either feeling cramped. */
@media (min-width: 480px) {
#letsgoDropModal .drop-modal, #letsgoPostGame .drop-modal { padding-left: 32px; padding-right: 32px; }
.letsgo-drop-body { flex-direction: row; align-items: center; gap: 20px; text-align: left; margin-bottom: 4px; }
/* In a row the copy takes the leftover space; min-width:0 lets it actually
shrink instead of forcing the card wider than its max-width. */
.letsgo-drop-text { flex: 1 1 auto; width: auto; min-width: 0; }
.drop-pack-wrap { width: 168px; margin: 0; }
}
/* LETSGO inline placements — the results strip and the leaderboard bar.
Deliberately not modals: they sit in the page at a moment the player is
already stopped (a finished run, a leaderboard they're reading) instead of
taking the screen. Same purple as the pop-up so all three placements read as
one campaign, but flatter — this is a promo in the page, not an event. */
.letsgo-inline {
display: flex; align-items: center; gap: 12px;
width: 100%; margin: 0 0 14px; padding: 12px 14px;
background: #8b3fe0; color: #fff !important;
border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
text-decoration: none;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.letsgo-inline:hover {
color: #fff; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink);
border-bottom: 2px solid var(--ink);
}
.letsgo-inline-tag {
flex: 0 0 auto; padding: 4px 8px;
background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(255, 255, 255, 0.45);
font: 800 0.6rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.1em; text-transform: uppercase;
}
.letsgo-inline-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.letsgo-inline-copy b { font: 800 0.9rem/1.2 "Space Mono", ui-monospace, monospace; }
.letsgo-inline-sub {
font: 400 0.72rem/1.3 "Space Mono", ui-monospace, monospace;
color: rgba(255, 255, 255, 0.85);
}
.letsgo-inline-cta {
flex: 0 0 auto; padding: 8px 12px;
background: #fff; color: #6d28b8;
border: 2px solid var(--ink);
font: 800 0.74rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.04em; text-transform: uppercase;
}
/* The leaderboard sits inside a narrower column and is read while scrolling,
so its bar is slimmer and drops the sub-line rather than wrapping to two. */
.letsgo-inline-lb { padding: 10px 12px; }
.letsgo-inline-lb .letsgo-inline-sub { display: none; }
/* Phone: label and headline share the first row, and the CTA takes the full
width below it — two rows instead of three, and a button wide enough to be
a real thumb target rather than a chip in the corner. */
@media (max-width: 560px) {
.letsgo-inline { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
.letsgo-inline-tag { order: 1; }
.letsgo-inline-copy { order: 2; flex: 1 1 auto; }
.letsgo-inline-sub { display: none; }
.letsgo-inline-cta { order: 3; flex-basis: 100%; padding: 9px; text-align: center; }
}
/* Scan-the-QR panel. A QR is only useful on a device that is NOT the one
doing the scanning, so it is desktop-only -- on a phone the CTA button is the
whole story and the QR would just be dead weight in a small card. */
.letsgo-qr { display: none; }
@media (min-width: 760px) {
#letsgoDropModal .drop-modal, #letsgoPostGame .drop-modal { max-width: 680px; }
.letsgo-qr {
display: flex; flex-direction: column; align-items: center; gap: 6px;
flex: 0 0 auto; width: 128px;
}
.letsgo-qr img {
display: block; width: 128px; height: 128px;
border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
background: #fff;
}
.letsgo-qr img { width: 160px; height: 160px; }
.letsgo-qr { width: 160px; }
.letsgo-qr-cap {
font: 700 0.78rem/1.2 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
text-align: center;
}
.letsgo-qr-note {
font: 600 0.62rem/1.35 "Space Mono", ui-monospace, monospace;
color: var(--muted); text-align: center;
}
/* The desktop CTA was the campaign's biggest leak: the tracking link opens a
web page on a machine that can't install anything, so every desktop click
spent a click and delivered no signup. On a wide screen the QR is the only
real path, so it becomes the only visible one. Phones keep the button --
there the same link deep-links straight into the app. */
#letsgoDropModal .drop-cta { display: none; }
}
/* Reachable by screen readers, invisible on screen. Only exists because the
desktop card hides its button, and a QR is useless to anyone who can't see
it -- without this there would be no way through at all. */
.letsgo-sr-link {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.letsgo-sr-link:focus {
position: static; width: auto; height: auto; margin: 0; overflow: visible;
clip: auto; clip-path: none; white-space: normal;
font: 700 0.7rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--ink);
text-decoration: underline;
}
/* Touch: the 30px close dot is under the ~44px minimum for a thumb, and it is
the only way to dismiss this one now that "Maybe later" is gone. */
@media (pointer: coarse) {
#letsgoDropModal .modal-close, #letsgoPostGame .modal-close {
width: 44px; height: 44px; top: 4px; right: 4px; font-size: 1.35rem;
}
}
@media (max-width: 420px) {
#letsgoDropModal .drop-modal, #letsgoPostGame .drop-modal { max-width: 380px; }
.drop-pack-wrap { width: 158px; }
}
/* Centre both LETSGO pop-ups vertically on phones. The share-modal fix above
pins EVERY overlay to flex-start at <=640px, which leaves these two short
cards stranded at the top of the screen. Done with `margin: auto 0` on the
card rather than `align-items: center` on the overlay: with a scrolling
flex container, centring clips the top of anything taller than the viewport
and makes it unreachable, whereas auto margins centre only when there is
room and fall back to normal scrolling when there isn't. */
@media (max-width: 640px) {
#letsgoDropModal .drop-modal, #letsgoPostGame .drop-modal { margin: auto 0; }
}
/* The hero chip for a mode that just launched — same shape as its siblings,
with a court-orange rule under it so the eye lands there once. */
.help-top-new { border-bottom-color: var(--court); box-shadow: 0 2px 0 var(--court); }
/* The Career Mode door in My Stats, replacing the disabled "Coming soon". */
.stats-career-btn { text-decoration: none; display: inline-flex; align-items: center; }
/* ==========================================================================
/goat-pass — EVERYTHING IN ONE PLACE
The Pass reached sixteen unlocks across three surfaces, which is more than a
modal can argue for. This page is the long version: the same catalog, room
to breathe, and a free-vs-Pass table that says plainly what is NOT behind it.
========================================================================== */
.legal .gp-hero {
margin: 0 0 30px;
padding: 26px 22px 24px;
text-align: center;
border: 4px solid var(--ink);
background: var(--court);
color: var(--chalk);
box-shadow: var(--shadow);
}
.legal .gp-hero-goat { font-size: 2.6rem; line-height: 1; }
.legal .gp-hero-price {
margin: 10px 0 12px;
font: 900 2.1rem/1 "Playfair Display", Georgia, serif;
color: var(--chalk);
}
.legal .gp-hero-price small {
display: block; margin-top: 7px;
font: 400 0.72rem/1.4 "Space Mono", ui-monospace, monospace;
color: rgba(255, 247, 223, 0.78);
letter-spacing: 0.04em;
}
.legal .gp-hero-line {
margin: 0 auto 18px; max-width: 44ch;
font: 400 0.86rem/1.6 "Space Mono", ui-monospace, monospace;
color: rgba(255, 247, 223, 0.9);
}
.legal .gp-hero-line b { color: var(--chalk); font-weight: 900; }
.legal .gp-hero-cta {
display: inline-block; padding: 14px 24px;
border: 3px solid var(--ink); background: var(--chalk); color: var(--ink);
font: 900 0.82rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
box-shadow: 4px 4px 0 rgba(21, 20, 19, 0.45);
}
.legal .gp-hero-cta:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(21, 20, 19, 0.45); }
.legal .gp-hero-free {
margin: 18px auto 0; max-width: 48ch;
font: 400 0.74rem/1.6 "Space Mono", ui-monospace, monospace;
color: rgba(255, 247, 223, 0.72);
}
.legal .gp-group { margin: 0 0 26px; }
.legal .gp-group-title {
margin: 0 0 4px;
font: 900 1.15rem/1.2 "Playfair Display", Georgia, serif;
color: var(--ink);
}
.legal .gp-new {
display: inline-block; margin-left: 6px; padding: 3px 8px;
background: var(--court); color: #fff; border: 2px solid var(--ink);
font: 800 0.6rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 3px;
}
.legal .gp-group-note {
margin: 0 0 12px;
font: 400 0.78rem/1.5 "Space Mono", ui-monospace, monospace;
color: var(--muted);
}
.legal .gp-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.legal .gp-perks li {
display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
border: 2px solid var(--ink); background: var(--surface);
padding: 12px 14px; box-shadow: 3px 3px 0 rgba(21, 20, 19, 0.13);
}
.legal .gp-perk-ico {
width: 34px; height: 34px; display: grid; place-items: center; flex: none;
border: 2px solid var(--ink); background: var(--paper, #fbf7ee);
font-size: 1.15rem; line-height: 1; margin: 0; color: var(--ink);
}
.legal .gp-perks strong { display: block; font: 700 0.95rem/1.25 "Playfair Display", Georgia, serif; color: var(--ink); }
/* `div span` on purpose. The description is the span INSIDE the text div; a
bare `.gp-perks span` also matched the icon span next to it, shrinking every
emoji to 0.78rem and repainting it muted grey — which is why the icons on
this page looked faded and half-size next to the same emoji in the modal. */
.legal .gp-perks div span { display: block; margin-top: 4px; font: 400 0.78rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.legal .gp-h2 { margin: 34px 0 6px; }
.legal .gp-note { margin: 0 0 14px; font-size: 0.86rem; color: var(--muted); }
/* The table is the only wide thing on the page, so it gets its own scroller
rather than making the whole page scroll sideways on a phone. */
.legal .gp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 2px solid var(--ink); }
.legal .gp-table { width: 100%; min-width: 460px; border-collapse: collapse; background: var(--surface); }
.legal .gp-table th, .legal .gp-table td {
padding: 10px 12px; text-align: left; vertical-align: top;
border-bottom: 1px solid rgba(21, 20, 19, 0.16);
font: 400 0.78rem/1.4 "Space Mono", ui-monospace, monospace;
color: var(--muted);
}
.legal .gp-table th {
background: var(--ink-bg); color: var(--chalk);
font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.68rem;
}
.legal .gp-table td:first-child { color: var(--ink); font-weight: 700; }
.legal .gp-table tbody tr:last-child td { border-bottom: none; }
@media (max-width: 520px) {
.legal .gp-hero { padding: 22px 16px 20px; }
.legal .gp-hero-price { font-size: 1.8rem; }
.legal .gp-perks li { padding: 10px 11px; gap: 10px; }
.legal .gp-perk-ico { width: 28px; height: 28px; font-size: 0.92rem; }
}
/* The handoff into Career Mode from a finished build. It sits in the same row
as Share and Play Again, and it's the only filled button there — going from
"I drafted a guy" to "I'm living his career" is the action worth taking on
this screen, and a ghost button next to two other ghost buttons wouldn't say
so. The result banner is gold, so ink-on-court would vibrate; solid ink with
chalk text is the one combination that stays quiet and still reads first. */
.career-from-build {
background: var(--ink-bg);
border: 2px solid var(--ink-bg);
color: var(--chalk);
font: 700 0.78rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 10px 18px;
cursor: pointer;
box-shadow: 3px 3px 0 rgba(21, 20, 19, 0.32);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.career-from-build:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(21, 20, 19, 0.32); }
.career-from-build:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* The result banner keeps its gold background in dark mode, so the button
keeps its light-mode colours rather than inverting into it. */
[data-theme="dark"] .career-from-build { background: #151413; color: #fff7df; border-color: #151413; }
/* The setup screen says where the build came from, so a player who just
arrived from a finished run can see it's the right one without checking. */
.career-handoff-note {
margin: 8px 0 0;
font: 700 0.72rem/1.4 "Space Mono", ui-monospace, monospace;
color: var(--court-text);
}
/* ==========================================================================
THE CAREER HUB
Career Mode outgrew one page — starting a career, the daily, friend leagues
and the weekly slate were four unrelated things stacked vertically, with the
thing most people came for sitting below three leaderboards. Each has its own
address now, and this is the front door.
========================================================================== */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; }
.hub-tile {
grid-column: span 1;
display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
width: 100%; text-align: left; cursor: pointer;
border: 3px solid var(--ink); background: var(--surface); color: var(--ink);
padding: 16px 16px; box-shadow: 4px 4px 0 var(--ink);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.hub-tile:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.hub-tile:focus-visible { outline: 3px solid var(--court); outline-offset: 3px; }
/* "Start a career" is what most people came for, so it spans the row and gets
the court fill — the one tile that shouldn't have to be looked for. */
.hub-tile-big {
grid-column: 1 / -1;
background: var(--court); color: var(--chalk); border-color: var(--ink);
}
.hub-tile-big .hub-ico { background: rgba(21, 20, 19, 0.28); border-color: var(--chalk); }
.hub-tile-big .hub-txt strong { font-size: 1.15rem; }
.hub-tile-big .hub-txt > span { color: rgba(255, 247, 223, 0.84); }
.hub-ico {
width: 44px; height: 44px; display: grid; place-items: center; flex: none;
border: 2px solid var(--ink); background: var(--paper, #fbf7ee); font-size: 1.25rem;
}
.hub-txt strong {
display: block;
font: 900 1rem/1.2 "Playfair Display", Georgia, serif;
}
.hub-txt > span {
display: block; margin-top: 5px;
font: 400 0.76rem/1.45 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
.hub-tag {
display: inline-block; margin-left: 7px; padding: 2px 7px; vertical-align: 2px;
border: 1.5px solid var(--ink); background: var(--paper, #fbf7ee); color: var(--ink);
font: 700 0.56rem/1.5 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.08em; text-transform: uppercase;
}
.hub-tag-gold { background: var(--gold); }
@media (max-width: 560px) {
.hub-grid { grid-template-columns: 1fr; }
.hub-tile { padding: 13px 13px; gap: 11px; }
.hub-ico { width: 36px; height: 36px; font-size: 1.05rem; }
.hub-txt strong { font-size: 0.92rem; }
.hub-tile-big .hub-txt strong { font-size: 1.02rem; }
.hub-txt > span { font-size: 0.72rem; }
}
/* Every career screen needs two exits: up to the hub, and off Career Mode
entirely. The hub itself only needs the second one — it's the entry point,
so before this the only way back to the rest of the site was browser-back. */
.career-nav {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin: 0 0 12px;
}
.career-home {
font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.career-home:hover { color: var(--ink); }
/* The way back UP to the hub. Deliberately not .career-back — that class is
already the quiet "Back to GOAT Lab" text link at the bottom of the setup
screen, and restyling it as a button turned one screen into two identical
chunky buttons that went to completely different places. */
.career-up {
display: inline-block; margin: 0; padding: 7px 12px; cursor: pointer;
text-decoration: none;
border: 2px solid var(--ink); background: transparent; color: var(--ink);
font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase;
}
.career-up:hover { background: var(--ink-bg); color: var(--chalk); }
.career-title-sub { margin-top: 2px; }
/* The XP a weekly challenge paid out, next to the cleared verdict. */
.career-wk-result-xp {
display: inline-block; margin-top: 6px; padding: 3px 9px;
border: 2px solid var(--ink); background: var(--gold); color: var(--ink);
font: 700 0.72rem/1.4 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.04em;
}
/* Renaming a saved build. The row becomes an input rather than opening a
second modal over the first — it's one short field, and the build you're
naming should stay on screen while you name it. */
.saved-rename-box {
display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
padding: 10px 11px; margin: 0 0 8px;
border: 2px solid var(--ink); background: var(--paper, #fbf7ee);
}
.saved-rename-input {
flex: 1 1 150px; min-width: 0; padding: 8px 10px;
border: 2px solid var(--ink); background: var(--surface); color: var(--ink);
font: 700 0.82rem/1.2 "Space Mono", ui-monospace, monospace;
}
.saved-rename-input:focus-visible { outline: 2px solid var(--court); outline-offset: 1px; }
.saved-rename-box button {
flex: 0 0 auto; padding: 8px 12px; cursor: pointer;
border: 2px solid var(--ink); background: var(--surface); color: var(--ink);
font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.05em; text-transform: uppercase;
}
.saved-rename-save { background: var(--court); color: #fff; }
.saved-rename-box button:disabled { opacity: 0.55; cursor: default; }
.saved-rename-msg {
flex: 1 1 100%;
font: 400 0.72rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
@media (max-width: 460px) {
.saved-rename-input { flex: 1 1 100%; }
}
/* ==========================================================================
THE ALL-TIME BOARD, ON ITS OWN PAGE
It used to be the bottom section of the Hall of Fame, which meant scrolling
past your own rafters, records, bloodline and plaques to reach the one part
of that page that isn't about you.
========================================================================== */
.board-page {
position: fixed; inset: 0; z-index: 1200; overflow-y: auto;
-webkit-overflow-scrolling: touch; background: var(--paper);
opacity: 0; transition: opacity 0.18s ease;
}
.board-page.in { opacity: 1; }
.board-page-inner {
max-width: 720px; margin: 0 auto;
padding: 22px 18px calc(30px + env(safe-area-inset-bottom, 0px));
}
.board-page .board-tabs { margin: 14px 0 12px; }
.board-page-body { min-height: 40vh; }
/* The PAGE scrolls, not a box inside it — same arrangement as the draft
leaderboard. .lb-list caps itself at 56vh with its own scrollbar, which is
right for the panel it was written for and wrong on a full page, and it is
defined later in this file, so a bare .board-page-body .lb-list would lose
the cascade tie. Hence the descendant selector: it has to out-specify. */
.board-page .lb-list { max-height: none; overflow-y: visible; gap: 8px; }
/* The second line under each name spans the row, same as the daily board. */
.board-page .lb-row { grid-template-columns: 44px 1fr auto; row-gap: 2px; }
.board-page .hof-list-sub { grid-column: 1 / -1; }
/* Career points run to seven figures, so the score column needs room and must
never wrap mid-number. */
.board-page .lb-row .lb-score { white-space: nowrap; }
/* The tab strip stays put while the page scrolls, so switching boards never
means scrolling back to the top to find the tabs. */
.board-page .board-tabs {
position: sticky; top: 0; z-index: 2;
background: var(--paper); padding: 10px 0;
box-shadow: 0 6px 10px -8px rgba(21, 20, 19, 0.4);
}
body.hof-page-open { overflow: hidden; }
/* All-time / Season toggle that sits above the category tabs */
.lb-view-toggle {
display: flex; gap: 0; margin: 0 0 4px;
border: 2px solid rgba(21,20,19,0.18); border-radius: 8px;
overflow: hidden; width: fit-content;
}
.lb-view-btn {
padding: 7px 18px;
font: 700 0.78rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.04em; text-transform: uppercase;
background: transparent; color: var(--muted); border: none; cursor: pointer;
transition: background 0.14s, color 0.14s;
}
.lb-view-btn.lb-view-active { background: var(--ink); color: var(--paper); }
@media (prefers-color-scheme: dark) {
.lb-view-toggle { border-color: rgba(255,247,223,0.18); }
}
:root[data-theme="dark"] .lb-view-toggle { border-color: rgba(255,247,223,0.18); }
:root[data-theme="light"] .lb-view-toggle { border-color: rgba(21,20,19,0.18); }
/* ==========================================================================
THE "i" EXPLAINER
A card that needs three sentences to explain itself is a card nobody reads.
The mark keeps the explanation one tap away instead of permanently in the
way of the button people came for.
========================================================================== */
.career-info {
display: inline-grid; place-items: center;
width: 18px; height: 18px; margin-left: 7px; padding: 0; vertical-align: -3px;
border: 2px solid var(--ink); border-radius: 50%; background: transparent;
color: var(--ink); cursor: pointer;
font: 700 0.62rem/1 "Space Mono", ui-monospace, monospace;
}
.career-info:hover { background: var(--ink-bg); color: var(--chalk); }
.career-info:focus-visible { outline: 2px solid var(--court); outline-offset: 2px; }
.info-page {
position: fixed; inset: 0; z-index: 1300;
display: grid; place-items: center; padding: 20px;
background: rgba(21, 20, 19, 0.55);
opacity: 0; transition: opacity 0.16s ease;
}
.info-page.in { opacity: 1; }
.info-page-inner {
width: 100%; max-width: 440px; max-height: calc(100vh - 40px);
display: flex; flex-direction: column;
border: 3px solid var(--ink); background: var(--paper, #fbf7ee);
box-shadow: 8px 8px 0 var(--ink); padding: 20px 20px 18px;
}
.info-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.info-page-head h3 { margin: 0; font: 900 1.3rem/1.15 "Playfair Display", Georgia, serif; color: var(--ink); }
.info-page-close {
flex: none; width: 30px; height: 30px; border: none; background: transparent;
color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: 0.65;
}
.info-page-close:hover { opacity: 1; }
.info-page-body {
margin: 12px 0 16px; overflow-y: auto; flex: 1 1 auto; min-height: 0;
font: 400 0.82rem/1.6 "Space Mono", ui-monospace, monospace; color: var(--muted);
}
.info-page-body p { margin: 0 0 10px; }
.info-page-body strong { color: var(--ink); }
.info-list { list-style: none; margin: 0 0 10px; padding: 0; }
.info-list li {
padding: 9px 0; border-top: 1px solid rgba(21, 20, 19, 0.16);
}
.info-list li:last-child { border-bottom: 1px solid rgba(21, 20, 19, 0.16); }
.info-page .career-btn { flex: none; margin: 0; }
@media (max-width: 420px) {
.info-page { padding: 14px; }
.info-page-inner { padding: 16px 16px 14px; }
.info-page-head h3 { font-size: 1.12rem; }
.info-page-body { font-size: 0.76rem; }
}
/* The bloodline's off switch, and the muted state it leaves behind. */
.career-line-toggle {
border: none; background: none; padding: 0; cursor: pointer;
color: var(--court-text); text-decoration: underline; text-underline-offset: 2px;
font: 700 0.74rem/1.4 "Space Mono", ui-monospace, monospace;
}
.career-line-toggle:hover { color: var(--ink); }
.career-line-optout { margin-top: 10px; }
.career-line-off { border-style: dashed; }
/* ── Head to Head (/h2h) ─────────────────────────────────────────────────
Mirrors the career route's containment: h2h.js adds .h2h-active on body,
which hides every other child of .shell so the mode owns the page.
Ezoic's own auto-placed units are exempt for the same reason they are in
Career Mode: they land as direct children of .shell, and hiding them meant a
live head-to-head — lobby, draft and all — was the one mode serving nothing. */
body.h2h-active .shell > *:not(#h2hPage):not([id^="ezoic-pub-ad-placeholder"]) { display: none; }
/* Overlays live outside .shell, so the containment rule above can't reach them.
Any modal that slips past its JS guard would otherwise sit over the mode and
swallow every click — which is exactly what the career-drop announcement did. */
body.h2h-active .modal-overlay:not(.h2h-modal),
body.h2h-active .push-nudge { display: none !important; }
/* Every screen in this mode was built mobile-first and then dropped straight
into the site shell, which on a desktop is the better part of 1300px wide.
Nothing capped it, so a lede ran the full width of the monitor, the buttons
were metre-long slabs, and on the leaderboard a handle sat at the far left
with its record at the far right and a thousand pixels of nothing between
them. One measure fixes all fourteen screens at once. */
/* The 12px of side padding is the gutter for the whole mode. It used to be 0
here, leaning entirely on the site shell's ~10px each side — but the cards
carry a 4px bottom-right drop shadow, so the right column's shadow landed
6px from the screen edge and read as flush, even overlapping it, while the
left sat at 10px. That asymmetry is the thing that looked broken on a phone.
Padding here (box-sizing is border-box, so it insets rather than widens)
gives every H2H screen — the round bar, the prompt, the respins and the
cards — one even gutter clear of both edges and the shadow. On desktop the
page is capped at 720px and centred in a wide shell, so this is invisible
there and only earns its keep on mobile. */
#h2hPage { display: flex; flex-direction: column; gap: 18px; padding: 8px 12px 40px; width: 100%; max-width: 720px; margin-inline: auto; }
/* A four-column list wants to be narrower than a column of prose: at the full
measure a handle sat at one edge and its record at the other with half a
screen of nothing between them, which is exactly the reading problem the cap
above was added to solve. */
#h2hPage[data-screen="board"] { max-width: 560px; }
/* The way back out to the site. The lobby is the top of this mode, so it is the
one screen with nothing above it to go "back" to — every screen below it has
a Back button to the lobby instead. Same chip as Career Mode's .career-up so
the two modes exit the same way. */
.h2h-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.h2h-up {
display: inline-block; padding: 7px 12px; cursor: pointer; text-decoration: none;
border: 2px solid var(--ink); background: transparent; color: var(--ink);
font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace;
letter-spacing: 0.06em; text-transform: uppercase;
}
.h2h-up:hover { background: var(--ink-bg); color: var(--chalk); }
.h2h-head { text-align: center; }
.h2h-kicker { font: 700 0.66rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--court-text); margin: 0 0 8px; }
.h2h-title { font: 900 clamp(2rem, 8vw, 3rem)/1 "Playfair Display", Georgia, serif; margin: 0; letter-spacing: -0.02em; }
/* The card spaces its own children. It used to be a plain block, so anything
inside it relied on its own bottom margin — and the buttons have none, which
left them touching each other and let their 4px drop-shadow print straight
over the small print underneath. Only the .h2h-centre variant had a gap,
which is why the centred screens looked right and the lobby didn't.
Spacing belongs to the container: one gap here and every screen inherits it. */
.h2h-card { border: 3px solid var(--ink); background: var(--surface); box-shadow: var(--shadow); padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.h2h-centre { text-align: center; align-items: center; }
.h2h-h2 { font: 900 clamp(1.3rem, 5vw, 1.9rem)/1.1 "Playfair Display", Georgia, serif; margin: 0; }
.h2h-lede { font: 400 1rem/1.55 "Playfair Display", Georgia, serif; margin: 0; }
.h2h-sub { font: 700 0.84rem/1.45 "Space Mono", ui-monospace, monospace; color: var(--muted); margin: 0; }
.h2h-fine { font: 400 0.74rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--muted); margin: 0; }
/* Small print that explains the control above it belongs to that control, so
it sits nearer to it than the even gap would put it. */
.h2h-btn + .h2h-fine { margin-top: -6px; }
/* Why the last rematch didn't happen, said once on the way back to the lobby.
Marked out from the page so it reads as an answer to something you just did
rather than as part of the furniture. */
.h2h-note {
margin: 0 0 14px;
padding: 10px 14px;
border: 2px solid var(--ink);
border-left-width: 6px;
background: var(--surface);
font: 700 0.8rem/1.45 "Space Mono", ui-monospace, monospace;
}
.h2h-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; line-height: 1.5; }
.h2h-btn { width: 100%; border: 3px solid var(--ink); background: var(--gold); color: #151413; box-shadow: 4px 4px 0 var(--ink); font: 700 0.94rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; padding: 15px 18px; cursor: pointer; }
.h2h-btn:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--ink); }
.h2h-btn-quiet { background: var(--surface); color: var(--ink); }
.h2h-clock { font: 700 3rem/1 "Space Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.h2h-radar { display: flex; gap: 8px; }
.h2h-radar span { width: 12px; height: 12px; border: 3px solid var(--ink); background: var(--gold); animation: h2hPulse 1.1s infinite; }
.h2h-radar span:nth-child(2) { animation-delay: 0.15s; }
.h2h-radar span:nth-child(3) { animation-delay: 0.3s; }
@keyframes h2hPulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .h2h-radar span { animation: none; opacity: 1; } }
/* ── The versus beat ──────────────────────────────────────────────────────
Held for 1.8s before the draft, so it has to earn the time. The two names
arrive from opposite sides and the VS stamps down between them, reusing the
Daily's rubber-stamp motion so the mode reads as part of the same game
rather than a bolt-on. */
@keyframes h2hSlideL { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes h2hSlideR { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes h2hStamp {
0% { opacity: 0; transform: scale(2.1) rotate(-8deg); }
60% { opacity: 1; transform: scale(0.9) rotate(2deg); }
100% { opacity: 1; transform: scale(1) rotate(-3deg); }
}
@keyframes h2hRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.h2h-vs { flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; }
.h2h-vs-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.h2h-vs-who { font: 900 1.05rem/1.15 "Playfair Display", Georgia, serif; overflow-wrap: anywhere; }
.h2h-vs-sub { font: 700 0.66rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.h2h-vs-mark { font: 700 1.3rem/1 "Space Mono", ui-monospace, monospace; flex: 0 0 auto; color: var(--court-text); }
.h2h-vs.is-live .h2h-vs-side:first-child { animation: h2hSlideL 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
.h2h-vs.is-live .h2h-vs-side:last-child { animation: h2hSlideR 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
.h2h-vs.is-live .h2h-vs-mark {
border: 3px solid var(--court-text); padding: 4px 9px;
animation: h2hStamp 0.44s cubic-bezier(0.3, 1.4, 0.5, 1) 0.34s both;
}
/* The series between these two. Sits under the versus card and on the result,
because it is the only number on either screen that is about the pair. */
.h2h-rival { font: 700 0.74rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--muted); text-align: center; margin: 0; letter-spacing: 0.04em; }
.h2h-rival b { color: var(--ink); font-variant-numeric: tabular-nums; }
.h2h-verdict.is-win .h2h-rival { color: rgba(21, 20, 19, 0.7); }
.h2h-verdict.is-win .h2h-rival b { color: #151413; }
/* The streak. Loud only on a milestone — an ordinary run states itself. */
.h2h-streak { font: 700 0.8rem/1 "Space Mono", ui-monospace, monospace; margin: 0; letter-spacing: 0.05em; }
.h2h-streak.is-hot { color: var(--court-text); }
.h2h-verdict.is-win .h2h-streak, .h2h-verdict.is-win .h2h-streak.is-hot { color: #151413; }
.h2h-daily-txt { flex: 1; min-width: 0; }
.h2h-daily-streak { font-variant-numeric: tabular-nums; border: 2px solid currentColor; padding: 2px 6px; white-space: nowrap; }
.h2h-bar { display: flex; justify-content: space-between; gap: 10px; font: 700 0.72rem/1.2 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.h2h-bar-opp { text-align: right; }
.h2h-prompt { border: 3px solid var(--ink); background: var(--ink-bg); color: var(--chalk); padding: 12px 14px; text-align: center; font: 700 0.9rem/1.3 "Space Mono", ui-monospace, monospace; }
.h2h-taken { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.h2h-taken li { border: 2px solid var(--ink); background: var(--surface); padding: 6px 7px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.h2h-taken span { font: 700 0.52rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.h2h-taken b { font: 700 0.74rem/1.15 "Playfair Display", Georgia, serif; overflow-wrap: anywhere; }
.h2h-bar-track { width: 100%; height: 14px; border: 3px solid var(--ink); background: var(--paper); }
.h2h-bar-fill { height: 100%; width: 0; background: var(--gold); transition: width 320ms linear; }
@media (prefers-reduced-motion: reduce) { .h2h-bar-fill { transition: none; } }
.h2h-verdict { border: 3px solid var(--ink); background: var(--surface); box-shadow: var(--shadow); padding: 20px; text-align: center; }
.h2h-verdict.is-win { background: var(--gold); color: #151413; }
.h2h-verdict.is-win .h2h-sub { color: rgba(21, 20, 19, 0.7); }
.h2h-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.h2h-side { border: 3px solid var(--ink); background: var(--surface); padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.h2h-side.is-win { box-shadow: 5px 5px 0 var(--gold); }
/* The verdict and the two careers arrive in reading order rather than all at
once, so the eye is walked through the result instead of handed it. */
.h2h-verdict { animation: h2hRise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.h2h-side { animation: h2hRise 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(0.12s + var(--i, 0) * 0.1s); }
.h2h-break { animation: h2hRise 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both; }
.h2h-win-tag { animation: h2hStamp 0.4s cubic-bezier(0.3, 1.4, 0.5, 1) 0.5s both; }
.h2h-legacy b { font-variant-numeric: tabular-nums; }
.h2h-side-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.h2h-side-who { font: 900 0.92rem/1.1 "Playfair Display", Georgia, serif; overflow-wrap: anywhere; }
.h2h-win-tag { font: 700 0.52rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.1em; background: var(--gold); color: #151413; border: 2px solid var(--ink); padding: 3px 5px; flex: 0 0 auto; }
.h2h-legacy { display: flex; flex-direction: column; gap: 2px; }
.h2h-legacy b { font: 700 2rem/1 "Space Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.h2h-legacy span { font: 700 0.6rem/1.2 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.07em; color: var(--court-text); }
.h2h-side-line { font: 700 0.68rem/1.2 "Space Mono", ui-monospace, monospace; color: var(--muted); margin: 0; text-transform: uppercase; letter-spacing: 0.05em; }
.h2h-statline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.h2h-statline div { display: flex; flex-direction: column; }
.h2h-statline b { font: 700 0.95rem/1 "Space Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.h2h-statline span { font: 700 0.5rem/1.2 "Space Mono", ui-monospace, monospace; color: var(--muted); letter-spacing: 0.06em; }
.h2h-awards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.h2h-awards li { display: flex; justify-content: space-between; gap: 6px; font: 700 0.66rem/1.3 "Space Mono", ui-monospace, monospace; border-bottom: 1px solid var(--line, rgba(21,20,19,0.14)); padding-bottom: 2px; }
.h2h-awards span { color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 560px) {
.h2h-taken { grid-template-columns: repeat(2, 1fr); }
.h2h-sides { grid-template-columns: 1fr; }
/* The round header, tightened to match the condensed cards below it. The
team-and-era line almost always wraps to two lines on a phone, and at the
desktop size that one block was taller than a card — the most repeated,
least surprising text on the screen taking the most room. */
.h2h-prompt {
padding: 8px 10px;
font-size: 0.78rem;
line-height: 1.25;
}
.h2h-respin {
padding: 7px 4px;
}
/* The round-by-round table. Its stat column is nowrap, which on a narrow
phone pushed the table past its own min-content width — a table will not
shrink below that, so it hung off the side and took the whole page with
it (17px of horizontal scroll at 320px, with the +/- column cut off).
Letting the stat label wrap gives the table somewhere to give, and the
tighter cell padding buys the rest. */
.h2h-break-tbl tbody th {
white-space: normal;
}
.h2h-break-tbl th,
.h2h-break-tbl td {
padding: 5px 3px;
}
/* Belt and braces: if a future column or a long enough name still outgrows
the screen, the table scrolls inside its own box rather than dragging the
page sideways. */
.h2h-break {
overflow-x: auto;
}
}
.h2h-tail { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.h2h-xp { font: 700 0.9rem/1 "Space Mono", ui-monospace, monospace; color: var(--green); margin: 0; }
.h2h-record { font: 700 0.68rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--muted); margin: 0; }
/* ── Head to Head: auth, respins, live draft, running careers ───────────── */
.h2h-auth { font: 700 0.74rem/1.45 "Space Mono", ui-monospace, monospace; margin: 0; text-align: center; padding: 10px 12px; border: 2px dashed var(--line, rgba(21,20,19,0.25)); }
.h2h-auth.is-in { color: var(--green); }
.h2h-auth.is-out { color: var(--court-text); }
.h2h-link { background: none; border: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
/* ── Head to Head: challenge links, result actions, record boards ───────── */
/* The link is meant to be read and checked before it's sent, so it wraps in
full rather than being truncated to an ellipsis — a half-shown URL is
indistinguishable from a broken one. */
.h2h-linkbox { width: 100%; border: 2px dashed var(--line, rgba(21,20,19,0.28)); background: var(--paper); padding: 10px 12px; }
.h2h-linkbox code { font: 700 0.72rem/1.5 "Space Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
/* Play again is the primary action and keeps the gold; the other two sit under
it as a pair, so the row reads as one obvious choice plus two options
instead of three competing buttons. */
.h2h-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.h2h-actions > .h2h-btn:first-child { grid-column: 1 / -1; }
.h2h-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.h2h-tab { border: 3px solid var(--ink); background: var(--surface); box-shadow: 3px 3px 0 var(--ink); padding: 11px 8px; cursor: pointer; font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.07em; text-transform: uppercase; }
.h2h-tab.is-on { background: var(--gold); color: #151413; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
/* A three-column grid rather than a flex row: the rank column is fixed so
every row's digits line up down the board, and only the name flexes and
truncates. */
.h2h-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.h2h-board li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 46px; align-items: center; gap: 8px; border: 2px solid var(--ink); background: var(--surface); padding: 9px 10px; }
/* Nothing labelled the two numbers on the right, so a row read as a handle
followed by two unexplained figures. Same grid as a row, minus the borders,
so the captions sit exactly over the columns they name. */
.h2h-board-hd { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 46px; gap: 8px; padding: 0 12px 2px; font: 700 0.58rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.h2h-board-hd span:last-child { text-align: right; }
.h2h-board-rate { font: 700 0.74rem/1 "Space Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.h2h-board li:nth-child(1) { box-shadow: 3px 3px 0 var(--gold); }
/* Your own row, so you can find yourself in a list of strangers at a glance. */
.h2h-board li.is-you { background: var(--gold); color: #151413; }
.h2h-board li.is-you .h2h-board-rank { color: rgba(21, 20, 19, 0.66); }
/* A break in the numbering — the reader's row pulled up from below the cut.
The dashed top edge is the "…" that says the list skipped some. */
.h2h-board li.is-gap { margin-top: 8px; border-top-style: dashed; }
.h2h-board-rank { font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Handle and badge, the same way the Daily board does it — except nothing here
truncates. A long handle used to ellipsis away and the chip got sliced with
it, so on a phone a GOAT holder saw "XII | GO" and no laurel at all. Now the
pair wraps: the handle breaks mid-word if it has to, and the badge drops to
its own line rather than shrinking. The row grows taller instead of hiding
what someone paid for.
The cell is a minmax(0, 1fr) grid column, so it can never push the record or
rating columns — but a badge is flex:none and would still spill PAST the cell
into them, so it is capped at the cell's own width. */
.h2h-board-who { font: 900 0.86rem/1.2 "Playfair Display", Georgia, serif; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.h2h-board-who .h2h-nm { min-width: 0; overflow-wrap: anywhere; }
.h2h-board-who > .grank-chip, .h2h-board-who > .grank-laurel { flex: none; width: max-content; max-width: 100%; }
/* The rank chip is drawn by goat-xp (.grank-chip), which carries its own
styling. On the board the flex gap already spaces it, and a margin would
indent it off the left edge on the line it wraps onto; the champion card is
still an inline context and needs the margin. */
.h2h-board-who .grank-chip { vertical-align: middle; }
.h2h-champ-who .grank-chip { margin-left: 6px; vertical-align: middle; }
.h2h-champ-who .grank-laurel { margin-left: 6px; }
/* The way out of a finished match, under the actions rather than among them:
leaving is not one of the things you came here to do. */
.h2h-exit { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; }
.h2h-exit .h2h-link { font: 700 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--muted); }
.h2h-exit .h2h-link:hover { color: var(--ink); }
.h2h-board-rec { font: 700 0.82rem/1 "Space Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The reader's own row when their record is too short to be ranked. Dashed and
quiet so it reads as standing outside the list rather than at the bottom of
it — it has no place number, and it should not look like it lost one. */
.h2h-board li.is-unranked { border-style: dashed; background: transparent; }
.h2h-board li.is-unranked .h2h-board-rank { opacity: 0.4; }
.h2h-board-togo { font: 700 0.62rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.04em; color: var(--court); white-space: nowrap; }
/* How far off qualifying the reader is, for the cases no row can carry it. */
.h2h-qualify {
margin: 10px 0 0; padding: 9px 11px;
border: 2px dashed var(--line, rgba(21,20,19,0.25));
font: 700 0.74rem/1.35 "Space Mono", ui-monospace, monospace;
color: var(--ink);
}
@media (max-width: 380px) {
.h2h-actions { grid-template-columns: 1fr; }
.h2h-board li,
.h2h-board-hd { grid-template-columns: 22px minmax(0, 1fr) auto 40px; }
}
/* Last week's champion. Sits above the card so the first thing the lobby says
is that somebody won and the week has started again. */
.h2h-champ { border: 3px solid var(--ink); background: var(--surface); box-shadow: var(--shadow); padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
.h2h-champ.is-mine { background: var(--gold); color: #151413; }
.h2h-champ-kick { grid-column: 1 / -1; font: 700 0.58rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0; }
.h2h-champ.is-mine .h2h-champ-kick { color: rgba(21, 20, 19, 0.66); }
.h2h-champ-who { font: 900 1.05rem/1.15 "Playfair Display", Georgia, serif; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.h2h-champ-rec { font: 700 0.86rem/1 "Space Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; margin: 0; }
.h2h-champ-xp { grid-column: 1 / -1; font: 700 0.72rem/1.3 "Space Mono", ui-monospace, monospace; margin: 2px 0 0; }
/* The daily objective. A line, not a card — it is a nudge, not a feature. */
.h2h-daily { display: flex; align-items: center; gap: 8px; font: 700 0.74rem/1.3 "Space Mono", ui-monospace, monospace; margin: 0; padding: 9px 11px; border: 2px dashed var(--line, rgba(21,20,19,0.25)); }
.h2h-daily.is-done { border-style: solid; color: var(--green); }
.h2h-daily-mark { font-size: 0.9rem; }
/* Your record, on the lobby, directly above Find a match. Deliberately a bar
of figures rather than a "12-5-1" line: this is the last thing read before
pressing play, and three labelled numbers say what they are without the
reader having to know the convention. The cells share one grid so the
drawn column can appear and disappear without the other three moving. */
.h2h-rec { border: 2px solid var(--ink); background: var(--paper); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.h2h-rec-kick { font: 700 0.58rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0; }
.h2h-rec-cells { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.h2h-rec-cells div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.h2h-rec-cells b { font: 700 1.15rem/1 "Space Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.h2h-rec-cells span { font: 700 0.54rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.h2h-rec-none { font: 400 0.72rem/1.45 "Space Mono", ui-monospace, monospace; color: var(--muted); margin: 0; }
.h2h-btn-badge { position: relative; }
.h2h-badge { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font: 700 0.66rem/1 "Space Mono", ui-monospace, monospace; font-style: normal; background: var(--gold); color: #151413; border: 2px solid var(--ink); border-radius: 999px; min-width: 20px; padding: 3px 6px; text-align: center; }
/* The inbox. Each row is a button plus a dismiss, so the grid is two columns
with the row itself carrying its own internal three. */
.h2h-inbox { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.h2h-inbox li { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 6px; }
.h2h-inbox-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; text-align: left; border: 3px solid var(--ink); background: var(--surface); box-shadow: 3px 3px 0 var(--ink); padding: 10px 12px; cursor: pointer; min-width: 0; }
.h2h-inbox-row:disabled { cursor: default; opacity: 0.5; box-shadow: none; }
.h2h-inbox-who { font: 900 0.9rem/1.2 "Playfair Display", Georgia, serif; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-inbox-state { font: 700 0.6rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.07em; align-self: center; }
.h2h-inbox-prog { grid-column: 1 / -1; font: 700 0.66rem/1 "Space Mono", ui-monospace, monospace; color: var(--muted); font-variant-numeric: tabular-nums; }
.h2h-inbox li.is-yours .h2h-inbox-row { box-shadow: 3px 3px 0 var(--gold); }
.h2h-inbox li.is-yours .h2h-inbox-state { color: var(--gold-ink, #8a6400); }
/* A win sitting there uncollected. Louder than "your turn", because it is one
tap rather than a draft and the player is already owed it. */
.h2h-inbox li.is-quit .h2h-inbox-row { box-shadow: 3px 3px 0 var(--green); border-color: var(--green); }
.h2h-inbox li.is-quit .h2h-inbox-state { color: var(--green); }
.h2h-inbox li.is-done .h2h-inbox-state { color: var(--green); }
.h2h-inbox li.is-theirs .h2h-inbox-state, .h2h-inbox li.is-open .h2h-inbox-state { color: var(--muted); }
.h2h-inbox-x { border: 2px solid var(--ink); background: var(--paper); font: 700 1rem/1 "Space Mono", ui-monospace, monospace; cursor: pointer; padding: 0; }
/* The draft clock. A bar that drains plus the seconds, so it reads at a glance
and still gives an exact number when it matters. */
.h2h-clockbar { position: relative; border: 3px solid var(--ink); background: var(--surface); height: 26px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.h2h-clockbar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--gold); opacity: 0.55; }
.h2h-clockbar b { position: relative; font: 700 0.74rem/1 "Space Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.h2h-clockbar.is-low i { background: var(--red, #c03030); opacity: 0.6; }
.h2h-clockbar.is-low b { color: var(--red, #c03030); }
.h2h-clockbar.is-out i { width: 0; }
@media (prefers-reduced-motion: no-preference) {
.h2h-clockbar i { transition: width 120ms linear; }
/* Urgency in the last five seconds. A pulse on the whole bar rather than a
ticking sound or a shake: it has to be noticeable in peripheral vision
while the player is reading nine names, and unmissable without being
something they'd want to turn off. */
.h2h-clockbar.is-low { animation: h2hClockPulse 1s ease-in-out infinite; }
}
@keyframes h2hClockPulse {
0%, 100% { box-shadow: inset 0 0 0 0 rgba(192, 48, 48, 0); }
50% { box-shadow: inset 0 0 0 3px rgba(192, 48, 48, 0.45); }
}
/* The rating stamping onto the card you just took. This is the payoff of a
blind pick — the moment you find out whether the name was worth it — and it
used to just switch from ?? to a number. */
@keyframes h2hScoreStamp {
0% { transform: scale(2.4); opacity: 0; }
55% { transform: scale(0.86); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.card.is-picked .attribute-score span { display: inline-block; animation: h2hScoreStamp 0.42s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
/* The round marker on the progress track, so the eye can find where it is. */
.h2h-track span.is-now { animation: h2hTrackNow 1.4s ease-in-out infinite; }
@keyframes h2hTrackNow {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
.h2h-vs.is-live .h2h-vs-side:first-child,
.h2h-vs.is-live .h2h-vs-side:last-child,
.h2h-vs.is-live .h2h-vs-mark,
.h2h-verdict, .h2h-side, .h2h-break, .h2h-win-tag,
.card.is-picked .attribute-score span { animation: none; opacity: 1; transform: none; }
.h2h-vs.is-live .h2h-vs-mark { transform: rotate(-3deg); }
.h2h-track span.is-now, .h2h-clockbar.is-low { animation: none; }
}
/* The round-by-round breakdown. A real table: it is tabular data, it is read
by comparing two columns, and it needs a header row to say whose is whose. */
.h2h-break { border: 3px solid var(--ink); background: var(--surface); box-shadow: var(--shadow); padding: 12px 14px; }
.h2h-break > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font: 700 0.72rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.08em; }
.h2h-break > summary b { font-variant-numeric: tabular-nums; }
.h2h-break-line { font: 700 0.78rem/1.4 "Playfair Display", Georgia, serif; margin: 10px 0 0; }
.h2h-break-tbl { width: 100%; border-collapse: collapse; margin-top: 10px; }
.h2h-break-tbl th, .h2h-break-tbl td { text-align: left; padding: 5px 4px; border-bottom: 1px solid rgba(21, 20, 19, 0.14); vertical-align: top; }
/* overflow-wrap because one of these headers is the opponent's name, and a
handle is a single unbreakable token as often as not. A table cannot shrink
below its min-content width, so without this one long handle set the width
of the whole table and pushed it off the side of a phone. */
.h2h-break-tbl thead th { font: 700 0.56rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); overflow-wrap: anywhere; }
.h2h-break-tbl tbody th { font: 700 0.6rem/1.2 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; }
.h2h-break-tbl td span { display: block; font: 700 0.72rem/1.15 "Playfair Display", Georgia, serif; overflow-wrap: anywhere; }
.h2h-break-tbl td b { font: 700 0.68rem/1.3 "Space Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--muted); }
.h2h-break-d { font: 700 0.74rem/1 "Space Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.h2h-break-tbl tr.is-up .h2h-break-d { color: var(--green); }
.h2h-break-tbl tr.is-down .h2h-break-d { color: var(--red, #c03030); }
.h2h-break-tbl tfoot th, .h2h-break-tbl tfoot td { border-bottom: 0; border-top: 2px solid var(--ink); padding-top: 7px; }
.h2h-break-tbl tfoot b { color: inherit; font-size: 0.78rem; }
.h2h-break-flag { display: inline-block; font: 700 0.5rem/1 "Space Mono", ui-monospace, monospace; font-style: normal; letter-spacing: 0.06em; border: 1px solid var(--ink); padding: 1px 3px; margin-left: 5px; vertical-align: middle; }
.h2h-break .h2h-fine { margin-top: 9px; }
/* Their pick, alongside yours, in the running list. */
.h2h-taken u { text-decoration: none; font: 700 0.6rem/1.2 "Space Mono", ui-monospace, monospace; color: var(--muted); overflow-wrap: anywhere; }
.h2h-taken u.is-up { color: var(--green); }
.h2h-taken u.is-down { color: var(--red, #c03030); }
.h2h-taken u.is-pending { opacity: 0.45; }
/* The queue ticker — this week's real board rolling past while you wait. */
.h2h-ticker { width: 100%; height: 20px; overflow: hidden; text-align: center; }
.h2h-ticker span { display: block; font: 700 0.68rem/20px "Space Mono", ui-monospace, monospace; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
.h2h-ticker span.is-in { animation: h2hTickIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@keyframes h2hTickIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* The first-match primer. A numbered list because it IS a sequence — you read
it once, in order, before your first draft. */
.h2h-primer { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 11px; font-size: 0.92rem; line-height: 1.5; }
.h2h-primer b { font-weight: 700; }
/* The guest prompt, on the result screen where the player has just finished
something and can see what they'd be keeping. */
.h2h-guest { border: 3px dashed var(--ink); background: var(--surface); padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 9px; text-align: center; }
.h2h-guest-h { font: 900 1rem/1.2 "Playfair Display", Georgia, serif; margin: 0; }
.h2h-guest-p { font: 400 0.8rem/1.5 "Space Mono", ui-monospace, monospace; color: var(--muted); margin: 0; }
/* Sim screen: a career getting somewhere, rather than stat lines scrolling. */
/* The running honours count. Two fixed lines because the columns sit side by
side and must stay the same height — one career winning something while the
other doesn't would otherwise make the whole panel jump mid-run. */
.h2h-run-rings { font: 700 0.58rem/1.45 "Space Mono", ui-monospace, monospace; letter-spacing: 0.05em; color: var(--court-text); height: 2.9em; overflow: hidden; font-variant-numeric: tabular-nums; }
.h2h-run-track { width: 100%; height: 6px; border: 2px solid var(--ink); background: var(--paper); margin-top: 6px; }
.h2h-run-track i { display: block; height: 100%; width: 0; background: var(--gold); }
.h2h-run-yr.is-end { color: var(--court-text); }
.h2h-run.is-done { opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
.h2h-run-track i { transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.h2h-run, .h2h-run.is-done { transition: opacity 240ms ease; }
.h2h-run-aw.is-flash { animation: h2hAwardFlash 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
}
@keyframes h2hAwardFlash {
0% { transform: scale(0.7); opacity: 0; }
55% { transform: scale(1.12); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.h2h-run-aw { display: inline-block; }
.h2h-respins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.h2h-respin { display: flex; flex-direction: column; gap: 2px; align-items: center; border: 3px solid var(--ink); background: var(--surface); box-shadow: 3px 3px 0 var(--ink); padding: 9px 6px; cursor: pointer; }
.h2h-respin span { font: 700 0.62rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.08em; }
.h2h-respin b { font: 700 0.54rem/1 "Space Mono", ui-monospace, monospace; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.h2h-respin:disabled { opacity: 0.4; cursor: default; box-shadow: none; transform: translate(3px, 3px); }
.h2h-respin.is-used { background: var(--paper); }
.h2h-track { display: flex; gap: 4px; }
.h2h-track span { flex: 1; height: 6px; border: 2px solid var(--ink); background: var(--paper); }
.h2h-track span.is-done { background: var(--gold); }
.h2h-track span.is-now { background: var(--court); }
.h2h-taken li i { font: 700 0.74rem/1 "Space Mono", ui-monospace, monospace; font-style: normal; font-variant-numeric: tabular-nums; align-self: flex-end; }
.h2h-taken li i.is-elite { color: var(--green); }
.h2h-taken li i.is-weak { color: var(--red); }
.h2h-taken li.is-fresh { box-shadow: 3px 3px 0 var(--gold); }
/* The pick reveal. The chosen card is lifted and the other eight step back, so
the beat before the next round reads as a decision landing rather than the
board going dead. Both are edited onto the existing cards in place — see
revealInPlace() — so nothing re-deals underneath the tap. */
.card.is-picked { outline: 4px solid var(--gold); outline-offset: -4px; transform: translateY(-4px); transition: transform 160ms ease; z-index: 1; }
/* Everything not taken steps back as well as fading, so the card you chose is
the only one left at full size. Both properties are transitioned together —
listing only opacity here left the scale snapping. */
.card.is-dimmed { opacity: 0.4; transform: scale(0.97); transition: opacity 160ms ease, transform 160ms ease; }
@media (prefers-reduced-motion: reduce) {
.card.is-picked, .card.is-dimmed { transition: none; }
.card.is-picked, .card.is-dimmed { transform: none; }
}
/* The card carrying the star has to stay readable even when it is the one you
DIDN'T take — a dimmed card is the shape of the answer, and a 40% opacity
answer is a card nobody reads. It steps back out of the dim and keeps a
gold rule instead, which is quieter than the picked card's full outline. */
.card.is-best.is-dimmed { opacity: 0.86; }
.card.is-best:not(.is-picked) { outline: 3px dashed var(--gold); outline-offset: -3px; }
.h2h-run { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.h2h-run-side { border: 3px solid var(--ink); background: var(--paper); padding: 12px 10px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.h2h-run-who { font: 900 0.86rem/1.1 "Playfair Display", Georgia, serif; overflow-wrap: anywhere; }
.h2h-run-yr { font: 700 0.6rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.08em; color: var(--court-text); }
/* The stat line has to hold "28.3 / 8.0 / 4.2" on one line in a half-width
column, and it was wrapping into three — which moved everything under it a
row down every time a number crossed ten. Scaled to the column instead. */
.h2h-run-stat { font: 700 clamp(0.78rem, 3.8vw, 1.05rem)/1.15 "Space Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.h2h-run-aw { font: 700 0.56rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--muted); height: 2.6em; overflow: hidden; }
.h2h-run-aw.has-award { color: var(--green); }
.h2h-scores { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.h2h-build { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.h2h-build b { font: 700 1.15rem/1 "Space Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.h2h-build span { font: 700 0.52rem/1 "Space Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
/* ── Collapsible Q&A ──────────────────────────────────────────────────────
Moved here out of faq.html's inline