/* Ballumo design tokens: the Floodlit night theme with sculpted surfaces. The single source of truth for the interface.

   Layers: `--bb-*` primitives (a ramp per family), then semantic names (`--surface-*`, `--text-*`, `--border-*`, `--state-*`,
   `--points-*`), then type, space, radius, depth, motion and layout. Components read semantic names only. A page never reads a
   `--bb-*` value and never writes a raw colour, size, radius or shadow.

   Every surface is a soft sculpted object lit from the top left, like the logo: an inner top highlight, a darker lower edge and a
   deep drop shadow (`--shadow-card`, `--shadow-key`). Fredoka (display, numerals) and Figtree (interface) load from public/fonts.
   Text, icon and control-edge pairs are measured by script/contrast.py, which reads THIS file. */

:root {
  color-scheme: dark;

  /* ---- Primitives ------------------------------------------------------------------------------------------------ */
  /* Night: the pitch at night, one ramp from the canvas to the strongest text. Lower number is darker, as in the app's other ramps. */
  --bb-night-1000:#050C09; --bb-night-950:#07110D; --bb-night-900:#0A1612; --bb-night-850:#0E1C16; --bb-night-800:#11221B; --bb-night-700:#183027;
  --bb-night-650:#1B3128; --bb-night-600:#234236; --bb-night-500:#31574A; --bb-night-400:#4D7E68;
  --bb-night-300:#82978B; --bb-night-200:#A9BBB1; --bb-night-100:#D3E1D8; --bb-night-50:#F2F6F1;
  /* Pitch: the hero's mown stripes and edge (the real pitch crops in assets/pitch use these two stripe colours) */
  --bb-pitch-800:#0B3D2A; --bb-pitch-750:#0E4733; --bb-pitch-700:#1F5A43;
  /* Floodlight: the one accent. 400 is the colour; 950 to 800 are its dark tints for rows and edges. */
  --bb-flood-950:#16301F; --bb-flood-900:#1F3A1A; --bb-flood-800:#3F6B1F; --bb-flood-600:#9DC21A; --bb-flood-500:#B5DE25; --bb-flood-400:#C8F03C; --bb-flood-300:#D6F566;
  /* Chalk: the shirt-number plate, the QR tile and text on a red button */
  --bb-chalk-0:#FFFFFF; --bb-chalk-50:#FBFAF6;
  /* Ivory and pitch-green depth: the logo's matte faces and side walls, reused by the Rating plate and the Premium seal. Gold is the band of the sculpted crown. */
  --bb-ivory-50:#FBF8EE; --bb-ivory-100:#F3EFE0; --bb-ivory-200:#E6E0CB;
  --bb-brand-green-300:#7CBF62; --bb-brand-green-400:#519B3D; --bb-brand-green-500:#3F8230; --bb-brand-green-600:#2F6A26; --bb-brand-green-800:#17391A;
  --bb-gold-200:#F6E2A0; --bb-gold-400:#E8B84A; --bb-gold-600:#B9811F;
  /* Signals, tuned for dark surfaces. 500 reads as text, 600 is a solid fill, 900 and 800 are the tint and the edge. */
  --bb-mint-400:#4FD6A0; --bb-mint-900:#0F2E24;
  --bb-red-300:#FF8A78; --bb-red-500:#FF5B45; --bb-red-600:#DF341A; --bb-red-800:#5A2A22; --bb-red-900:#2A1511;
  --bb-amber-500:#F2A516; --bb-amber-800:#6B4A0A; --bb-amber-900:#2A200A;
  --bb-blue-500:#5B9BFF; --bb-blue-800:#1F4C7A; --bb-blue-900:#0F2036;
  --bb-violet-300:#B7A9F0; --bb-violet-800:#4B3F86; --bb-violet-900:#1E1A38;
  /* AI model tiles keep one colour per provider behind a white mark (unchanged from the app) */
  --bb-model-anthropic:#d97757; --bb-model-deepseek:#4d6bfe; --bb-model-google:#4285f4; --bb-model-meta:#0866ff; --bb-model-minimax:#e73562; --bb-model-mistral:#fa520f; --bb-model-kimi:#1783ff;
  --bb-model-nvidia:#5f9a00; --bb-model-openai:#121412; --bb-model-qwen:#615ced; --bb-model-grok:#121412; --bb-model-xiaomimimo:#ff6900; --bb-model-zai:#2b2f2b;

  /* ---- Surfaces: lit from above. Every surface is one step up the Night ramp; nothing is pure black or pure white. ----- */
  --surface-canvas:var(--bb-night-1000);   /* outside the app column, the scrim base */
  --surface-rail:var(--bb-night-950);      /* left rail */
  --surface-bezel:var(--bb-night-950);     /* the recessed face of a score tile and a rating plate well */
  --surface-page:var(--bb-night-900);
  --surface-sunken:var(--bb-night-850);    /* inputs, the answer well inside a card, the sticky bars */
  --surface-card:var(--bb-night-800);
  --surface-raised:var(--bb-night-700);    /* menus, sheets, hover, the selected tab */
  --surface-brand:var(--bb-pitch-800);     /* hero, stripe A */
  --surface-brand-deep:var(--bb-pitch-750);/* hero, stripe B */
  --surface-accent-soft:var(--bb-flood-950);/* your row, your call, your place */
  --surface-inverse:var(--bb-night-50);    /* the shirt-number plate and the toast */
  --surface-scrim:rgba(2,8,5,.7);
  --veil-dark:rgba(5,12,9,.5);             /* a dark well on the hero, a tile on a dark photo */
  --veil-ink:rgba(0,0,0,.28);              /* a mark on a hero */
  --veil-light:rgba(255,255,255,.16);      /* its hairline */
  --sheen:rgba(255,255,255,.1);            /* the light on a Challenge look and the sweep that crosses a locked-in card */
  --shade-edge:rgba(0,0,0,.2);             /* the pressed edge of a primary button */
  --shade-plate:rgba(0,0,0,.5);            /* the drop under a shirt-number plate */
  --surface-glass:rgba(10,22,18,.88);      /* sticky top bar over scrolling content */
  /* ---- Text (each measured on every surface it sits on, see contrast.md) ------------------------------------------- */
  --text-strong:var(--bb-night-50); --text-body:var(--bb-night-100); --text-muted:var(--bb-night-200); --text-subtle:var(--bb-night-300);
  --text-inverse:var(--bb-night-900); --text-on-accent:var(--bb-night-900); --text-on-danger:var(--bb-chalk-0); --text-on-hero:var(--bb-night-100);
  --text-accent:var(--bb-flood-400); --text-link:var(--bb-flood-400); --text-link-hover:var(--bb-flood-300);
  --text-up:var(--bb-mint-400); --text-down:var(--bb-red-300); --text-warning:var(--bb-amber-500); --text-info:var(--bb-blue-500); --text-danger:var(--bb-red-500);
  /* ---- Accent (floodlight): yours and act-now. The primary button, your call, your row, the current tab. ----------------- */
  --accent:var(--bb-flood-400); --accent-hover:var(--bb-flood-300); --accent-pressed:var(--bb-flood-500);
  --accent-subtle:var(--bb-flood-900); --accent-line:var(--bb-flood-800);
  /* ---- Lines. Only --border-control and --focus-ring carry meaning (3:1); the rest only separate. ------------------------ */
  --border-faint:var(--bb-night-650); --border-subtle:var(--bb-night-600); --border-strong:var(--bb-night-500);
  --border-control:var(--bb-night-400); --border-hero:var(--bb-pitch-700);
  --focus-ring:var(--bb-night-50);
  /* ---- Status tints (a fill and its edge) ---------------------------------------------------------------------------------- */
  --tint-danger:var(--bb-red-900); --tint-danger-line:var(--bb-red-800);
  --tint-warning:var(--bb-amber-900); --tint-warning-line:var(--bb-amber-800);
  --tint-info:var(--bb-blue-900); --tint-info-line:var(--bb-blue-800);
  --tint-success:var(--bb-mint-900); --tint-corrected:var(--bb-violet-900); --tint-corrected-line:var(--bb-violet-800);
  --solid-danger:var(--bb-red-600);

  /* ---- Call and game states (a text colour and a tint; the word or icon always goes with it) ------------------------------ */
  --state-open:var(--accent);
  --state-saving:var(--text-subtle);
  --state-saved:var(--accent);             --state-saved-bg:var(--accent-subtle);
  --state-failed:var(--text-danger);       --state-failed-bg:var(--tint-danger);
  --state-locked:var(--text-muted);        --state-locked-bg:var(--surface-raised);
  --state-live:var(--text-danger);         --state-live-bg:var(--tint-danger);
  --state-pending:var(--text-warning);     --state-pending-bg:var(--tint-warning);
  --state-final:var(--text-strong);        --state-final-bg:var(--surface-raised);
  --state-corrected:var(--bb-violet-300);  --state-corrected-bg:var(--tint-corrected);
  --state-void:var(--text-subtle);         --state-void-bg:var(--surface-sunken);
  /* Points a call earned: the colour of the pill and of the number inside it */
  --points-5-bg:var(--bb-flood-400);   --points-5-fg:var(--bb-night-900);
  --points-3-bg:var(--bb-mint-400);    --points-3-fg:var(--bb-night-900);
  --points-2-bg:var(--bb-night-600);   --points-2-fg:var(--bb-night-50);
  --points-0-bg:var(--bb-night-700);   --points-0-fg:var(--bb-night-200);
  /* Rating movement */
  --rating-up:var(--text-up); --rating-down:var(--text-down); --rating-flat:var(--text-muted);

  /* Challenge looks: the same pitch crop recoloured (assets/pitch/pitch-centre-<look>.svg). A look is a fill and an edge; text on it is --text-strong. */
  --look-lime-bg:var(--bb-pitch-800); --look-lime-line:var(--accent-line);
  --look-midnight-bg:#0D1B3E; --look-midnight-line:#2B4A8C;
  --look-orange-bg:#2B1A0C;   --look-orange-line:#7A4515;
  --look-red-bg:#3A0F12;      --look-red-line:#7A2A2A;
  --look-violet-bg:#22103F;   --look-violet-line:#5A3C9A;
  --look-emerald-bg:#06382A;  --look-emerald-line:#1F6A50;

  /* ---- Type: Fredoka for display and every numeral (round, like the b and o of the wordmark), Figtree for the interface. -------------- */
  --font-display:'Fredoka','Nunito','Arial Rounded MT Bold',system-ui,sans-serif; --font-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-heavy:800; --weight-black:900;
  --weight-display:600;                       /* Fredoka runs 300 to 700; 600 is the house weight for titles and numerals */
  /* Nine text sizes (desktop values). The size changes once, at the phone breakpoint (600), and there is no fluid clamp(). Nothing is under 12. */
  --fs-caption:12px;  --lh-caption:16px;
  --fs-label:14px;    --lh-label:20px;
  --fs-body:16px;     --lh-body:24px;
  --fs-lead:18px;     --lh-lead:26px;
  --fs-h3:20px;       --lh-h3:24px;
  --fs-h2:28px;       --lh-h2:32px;
  --fs-h1:40px;       --lh-h1:40px;
  --fs-display:64px;  --lh-display:60px;
  /* Numerals (Fredoka, tabular where the font allows). One ratio of 1.4 per step so a row, a tile and a hero never compete. */
  --fs-num-s:20px; --fs-num-m:28px; --fs-num-l:40px; --fs-num-xl:56px; --fs-num-2xl:80px; --fs-num-3xl:112px;
  --lh-num:1; --lh-tight:1; --lh-snug:1.2; --lh-copy:1.5;
  --tracking-display:-.005em; --tracking-numeral:0; --tracking-label:.06em;
  --type-h1:var(--weight-display) var(--fs-h1)/var(--lh-h1) var(--font-display);
  --type-h2:var(--weight-display) var(--fs-h2)/var(--lh-h2) var(--font-display);
  --type-h3:var(--weight-display) var(--fs-h3)/var(--lh-h3) var(--font-display);
  --type-body:var(--weight-regular) var(--fs-body)/var(--lh-body) var(--font-body);
  --type-label:var(--weight-semibold) var(--fs-label)/var(--lh-label) var(--font-body);
  --type-caption:var(--weight-regular) var(--fs-caption)/var(--lh-caption) var(--font-body);

  /* ---- Space: a 4px base, nine steps. No other value appears in padding, margin or gap. ----------------------------------------- */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --gutter:32px;                              /* page side padding: 32 desktop, 24 tablet (959), 16 phone (600) */
  --card-pad:var(--space-5); --card-pad-lg:var(--space-5); /* One shared 24px inset; 16px on phones. */

  /* ---- Radius, line, depth ------------------------------------------------------------------------------------------------------ */
  --radius-xs:6px;      /* small plate, score tile corner, progress segment */
  --radius-sm:10px;     /* crest, score tile, small key */
  --radius-md:14px;     /* button, input, row, answer tile */
  --radius-lg:24px;     /* card, hero, table */
  --radius-xl:28px;     /* sheet, toast */
  --radius-pill:999px;
  --radius-avatar:30%;  /* every portrait, its frame and its ring: one squircle at any size */
  --border-width:1px; --border-width-strong:2px;
  /* One light, from the top left, like the logo: a bright inner top edge, a darker lower edge, a deep soft drop. */
  --light-top:inset 0 1.5px 0 rgba(255,255,255,.09),inset 0 -2px 0 rgba(0,0,0,.25);
  --shadow-card:var(--light-top),0 18px 36px -16px rgba(0,0,0,.7);
  --shadow-pop:var(--light-top),0 24px 48px -14px rgba(0,0,0,.9);
  --shadow-well:inset 0 3px 8px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.05);   /* inputs, the score tile: recessed, not raised */
  --shadow-key:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(63,107,31,.55),0 10px 22px -8px color-mix(in srgb,var(--accent) 45%,transparent);  /* the lime key */
  --shadow-key-pressed:inset 0 3px 6px rgba(0,0,0,.3);
  --shadow-key-quiet:inset 0 1.5px 0 rgba(255,255,255,.1),inset 0 -2px 0 rgba(0,0,0,.3),0 6px 14px -8px rgba(0,0,0,.8);   /* a secondary or neutral key */
  /* The ivory Rating plate: a raised ivory face with a pitch-green wall under it, like the wordmark. */
  --plate-face:linear-gradient(155deg,var(--bb-chalk-0) 0%,var(--bb-ivory-50) 42%,var(--bb-ivory-200) 100%);
  --plate-ink:var(--bb-night-850);
  --plate-wall:var(--bb-brand-green-500);
  --plate-line:color-mix(in srgb,var(--bb-brand-green-600) 22%,transparent);
  --shadow-plate:inset 0 2px 0 var(--bb-chalk-0),inset 1.5px 0 0 rgba(255,255,255,.7),inset 0 -4px 6px -2px rgba(80,70,20,.22),0 4px 0 var(--plate-wall),0 5px 0 rgba(0,0,0,.35),0 14px 20px -8px rgba(0,0,0,.7);
  /* A top-tier plate keeps the ivory face and swaps its pitch-green wall for lime, so the number stays readable. */
  --shadow-plate-top:inset 0 2px 0 var(--bb-chalk-0),inset 1.5px 0 0 rgba(255,255,255,.7),inset 0 -4px 6px -2px rgba(80,70,20,.22),0 4px 0 var(--bb-flood-500),0 5px 0 rgba(0,0,0,.35),0 14px 22px -8px color-mix(in srgb,var(--accent) 45%,transparent);
  /* Your own plate keeps the lime of every "yours" surface, with a deeper lime wall. */
  --plate-you-face:linear-gradient(155deg,var(--bb-flood-300) 0%,var(--bb-flood-400) 45%,var(--bb-flood-500) 100%);
  --shadow-plate-you:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -4px 6px -2px rgba(63,107,31,.45),0 4px 0 var(--bb-flood-800),0 5px 0 rgba(0,0,0,.35),0 14px 22px -8px color-mix(in srgb,var(--accent) 45%,transparent);
  /* The Premium seal: a pitch-green coin with the ivory crown, a gold hairline and the same top-left light. */
  --premium-coin:radial-gradient(120% 120% at 25% 15%,var(--bb-brand-green-300) 0%,var(--bb-brand-green-400) 38%,var(--bb-brand-green-600) 100%);
  --shadow-coin:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(10,40,10,.55),0 0 0 1.5px var(--bb-night-950),0 4px 8px -2px rgba(0,0,0,.65);
  --premium-pill:linear-gradient(160deg,var(--bb-brand-green-400) 0%,var(--bb-brand-green-600) 100%);
  --shadow-pill:inset 0 1.5px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(10,40,10,.45),0 0 0 1px var(--bb-gold-600),0 6px 12px -6px rgba(0,0,0,.7);
  --shadow-chip:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1.5px 0 rgba(0,0,0,.25);   /* a small tinted chip: a Rating movement */
  /* A slider thumb: the ivory plate face as a disc, ringed in the card colour so it reads over any rail segment, with one soft drop. */
  --shadow-thumb:inset 0 2px 0 var(--bb-chalk-0),inset 0 -4px 6px -2px rgba(80,70,20,.25),0 0 0 3px var(--surface-card),0 6px 10px -3px rgba(0,0,0,.7);
  --shadow-disc:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -2px 2px rgba(0,0,0,.25),0 2px 4px -1px rgba(0,0,0,.5);   /* the direction disc inside it */
  --shadow-hero:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -3px 0 rgba(0,0,0,.25),0 24px 44px -18px rgba(0,0,0,.75);
  --hero-light:radial-gradient(120% 100% at 8% -10%,rgba(255,255,255,.2),transparent 55%),radial-gradient(60% 90% at 100% 120%,rgba(0,0,0,.35),transparent 60%);
  --shadow-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--focus-ring);
  --glow-accent:0 0 0 1px var(--accent),0 0 22px -4px color-mix(in srgb,var(--accent) 55%,transparent);
  --floodlight:radial-gradient(120% 70% at 50% -12%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 62%);
  /* Overlays: a sheet is raised above a blurred night scrim; a reveal stage is lit by two floodlight beams. */
  --blur-scrim:10px;
  --shadow-sheet:var(--light-top),0 -24px 60px -24px rgba(0,0,0,.85);
  --beam:linear-gradient(180deg,color-mix(in srgb,var(--bb-flood-300) 26%,transparent),color-mix(in srgb,var(--bb-flood-300) 6%,transparent) 55%,transparent 88%);
  --halo:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 34%,transparent),transparent);

  /* ---- Motion: four durations, three curves, one rule: motion says what changed. Reduced motion zeroes all of it. -------------- */
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-pop:cubic-bezier(.3,1.5,.5,1); --ease-flip:cubic-bezier(.5,0,.2,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --dur-count:700ms; --dur-reveal:640ms;

  /* ---- Layout ----------------------------------------------------------------------------------------------------------------------- */
  --control-h-sm:40px; --control-h:48px; --control-h-lg:56px; --tap-min:44px;
  --icon-xs:12px; --icon-s:14px; --icon-m:16px; --icon-l:20px; --icon-xl:24px;
  --progress-h:8px; --progress-h-sm:6px; --progress-track:var(--bb-night-700); --progress-fill:var(--accent); --progress-now:var(--text-strong);
  --call-chart-height:160px;
  --layout-max:1200px; --layout-medium:860px; --layout-narrow:720px; --layout-round:760px; --layout-compact:560px; --layout-form:640px;
  --layout-rail:232px; --layout-aside:360px;
  --measure-copy:72ch;                       /* explanatory reading, independent of the screen width */
  --bar-h:64px;                               /* the phone tab bar, before the safe area */
  --score-w:44px; --score-h:48px;             /* a score tile in a fixture row: 44px wide at least, 48 tall (the app's 44 x 40 grows) */
  --z-base:0; --z-sticky:30; --z-menu:40; --z-overlay:60; --z-toast:80;
}

/* Desktop-first, with the app's breakpoint list only (959, 760, 600). */
@media (max-width:959px) { :root { --gutter:24px; } }
@media (max-width:600px) { :root { --card-pad:var(--space-4); --card-pad-lg:var(--space-4); } }
@media (max-width:600px) {
  :root { --fs-h1:32px; --lh-h1:34px; --fs-h2:24px; --lh-h2:28px; --fs-display:48px; --lh-display:48px; --gutter:16px; }
}

@media (prefers-reduced-motion:reduce) {
  :root { --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; --dur-count:0ms; --dur-reveal:0ms; }
}

/* A dark surface inside a dark app: the hero and the player card remap the same semantic names, so components never branch.
   (Light mode later is one more block that redefines the semantic names above; no component changes.) */
[data-surface="hero"] { --text-muted:var(--text-on-hero); --border-subtle:var(--bb-pitch-700); }

/* Application data dimensions; the prototype tokens above are authoritative. */
:root {
  /* Application dimensions and Group identity data. */
  --league-public:var(--surface-brand);
  --league-private:var(--bb-night-500);
  --group-cover-veil:linear-gradient(90deg, rgba(5,12,9,.82), rgba(5,12,9,.3) 65%, rgba(5,12,9,.08)), linear-gradient(0deg, rgba(5,12,9,.48), transparent 70%);
  --group-crest-shadow:0 5px 7px rgba(0,0,0,.35);
  --group-identity-veil:rgba(5,12,9,.64);
  --font-scoreboard:var(--font-display);
  --layout-player-card:360px;
  --player-card-height:504px;
  --player-card-avatar:96px;
  --player-card-plate-depth:5px;
  --player-card-name-width:328px;
  --player-card-graph-width:308px;
  --player-card-graph-height:156px;
  --layout-player-frame:364px;
}

/* Challenge occasion study: editorial surfaces, independent of action/status colours. */
:root {
  --occasion-canvas:var(--surface-page); --occasion-rail:var(--surface-rail);
  --occasion-surface:#1D1A25; --occasion-ink:#F8F0E4; --occasion-accent:#E3C9A0;
  --occasion-light:#863448; --occasion-second-light:#C7BBA4;
  --occasion-display:clamp(32px,7cqi,72px); --occasion-display-line:.96; --occasion-display-tracking:-.035em;
  --occasion-title-compact:32px; --occasion-hero-height:392px; --occasion-tile-height:320px;
  --occasion-art-height:264px; --occasion-art-mobile:144px;
  --occasion-art-feature:clamp(104px,38cqi,256px); --occasion-crest-feature:clamp(40px,calc(25cqi - 32px),112px);
  --occasion-crest-mobile:clamp(80px,29vw,128px);
  --occasion-trophy-stage:344px; --occasion-trophy-mobile:256px;
  --occasion-short-height:148px; --occasion-title-short:22px; --occasion-short-line:1.12; --occasion-art-short:128px;
  --occasion-crest-short:clamp(32px,8vw,40px);
}
.occasion--clasico { --occasion-surface:#211A26; --occasion-ink:#FAEEDB; --occasion-accent:#E8C89C; --occasion-light:#9A254D; --occasion-second-light:#D4C5A7; --occasion-canvas:#121618; --occasion-rail:#101516; }
.occasion--europe-sunday { --occasion-surface:#1B2937; --occasion-ink:#F6F0E4; --occasion-accent:#DFD1AF; --occasion-light:#718AA4; --occasion-second-light:#E2C57F; --occasion-canvas:#111B23; --occasion-rail:#0E171E; }
.occasion--nations-arrival { --occasion-surface:#142332; --occasion-ink:#F5F0E5; --occasion-accent:#DACAA9; --occasion-light:#355E90; --occasion-second-light:#B69C72; --occasion-canvas:#0F1923; --occasion-rail:#0C151E; }
.occasion--halloween { --occasion-surface:#261B29; --occasion-ink:#FFE9D5; --occasion-accent:#FFBD83; --occasion-light:#CD682F; --occasion-second-light:#8856A5; --occasion-canvas:#151517; --occasion-rail:#121314; }
.occasion--champions { --occasion-surface:#102344; --occasion-ink:#E7EFFF; --occasion-accent:#ADCBFF; --occasion-light:#3F68B3; --occasion-second-light:#91A9DD; --occasion-canvas:#0B1720; --occasion-rail:#0B151D; }
.occasion--libertadores { --occasion-surface:#123128; --occasion-ink:#F7E8BC; --occasion-accent:#E9C77D; --occasion-light:#B89C59; --occasion-second-light:#42765B; --occasion-canvas:#0E1B16; --occasion-rail:#0B1712; }
.occasion--boxing { --occasion-surface:#183D2E; --occasion-ink:#F9EDCD; --occasion-accent:#F1D194; --occasion-light:#C4A162; --occasion-second-light:#477D51; --occasion-canvas:#101F17; --occasion-rail:#0B1811; }
.occasion--norwegian-spotlight { --occasion-surface:#14232D; --occasion-ink:#F7F0E4; --occasion-accent:#E4CF87; --occasion-light:#A69A55; --occasion-second-light:#E4CF87; --occasion-canvas:#14232D; --occasion-rail:#101718; }
.occasion--europa-quality-night { --occasion-surface:#28221C; --occasion-ink:#F7F0E4; --occasion-accent:#F1C08C; --occasion-light:#A26331; --occasion-second-light:#F1C08C; --occasion-canvas:#28221C; --occasion-rail:#101718; }
.occasion--nations-league-decision-night { --occasion-surface:#19212A; --occasion-ink:#F7F0E4; --occasion-accent:#E4D9C7; --occasion-light:#6F7B8A; --occasion-second-light:#E4D9C7; --occasion-canvas:#19212A; --occasion-rail:#101718; }
.occasion--liverpool-and-united { --occasion-surface:#2A1C22; --occasion-ink:#F7F0E4; --occasion-accent:#EABCAA; --occasion-light:#8E3642; --occasion-second-light:#EABCAA; --occasion-canvas:#2A1C22; --occasion-rail:#101718; }
.occasion--sudamericana-final { --occasion-surface:#19232C; --occasion-ink:#F7F0E4; --occasion-accent:#E4D7B6; --occasion-light:#8A9AAA; --occasion-second-light:#E4D7B6; --occasion-canvas:#19232C; --occasion-rail:#101718; }
.occasion--champions-league-heavyweights { --occasion-surface:#13284B; --occasion-ink:#F7F0E4; --occasion-accent:#C4D8F5; --occasion-light:#4D77BC; --occasion-second-light:#C4D8F5; --occasion-canvas:#13284B; --occasion-rail:#101718; }
.occasion--europa-away-tests { --occasion-surface:#26231F; --occasion-ink:#F7F0E4; --occasion-accent:#E0BA91; --occasion-light:#9B6D43; --occasion-second-light:#E0BA91; --occasion-canvas:#26231F; --occasion-rail:#101718; }
.occasion--derby-sunday { --occasion-surface:#1C2A2E; --occasion-ink:#F7F0E4; --occasion-accent:#D6DCD5; --occasion-light:#5D838A; --occasion-second-light:#D6DCD5; --occasion-canvas:#1C2A2E; --occasion-rail:#101718; }
.occasion--intercontinental-cup-final { --occasion-surface:#24221F; --occasion-ink:#F7F0E4; --occasion-accent:#E6D1A5; --occasion-light:#9C8452; --occasion-second-light:#E6D1A5; --occasion-canvas:#24221F; --occasion-rail:#101718; }
.occasion--brazilian-final-round { --occasion-surface:#183126; --occasion-ink:#F7F0E4; --occasion-accent:#E8D390; --occasion-light:#A18B40; --occasion-second-light:#E8D390; --occasion-canvas:#183126; --occasion-rail:#101718; }
.occasion--december-heavyweights { --occasion-surface:#1C2938; --occasion-ink:#F7F0E4; --occasion-accent:#E5D1B3; --occasion-light:#536E8E; --occasion-second-light:#E5D1B3; --occasion-canvas:#1C2938; --occasion-rail:#101718; }
.occasion--europe-before-christmas { --occasion-surface:#12253F; --occasion-ink:#F7F0E4; --occasion-accent:#DDD3B0; --occasion-light:#647FA7; --occasion-second-light:#DDD3B0; --occasion-canvas:#12253F; --occasion-rail:#101718; }
.occasion--december-marquee-weekend { --occasion-surface:#1B2B30; --occasion-ink:#F7F0E4; --occasion-accent:#D4E4DB; --occasion-light:#648B93; --occasion-second-light:#D4E4DB; --occasion-canvas:#1B2B30; --occasion-rail:#101718; }
.occasion--mls-cup-final { --occasion-surface:#202A34; --occasion-ink:#F7F0E4; --occasion-accent:#E4E3D9; --occasion-light:#8394A6; --occasion-second-light:#E4E3D9; --occasion-canvas:#202A34; --occasion-rail:#101718; }
.occasion--festive-rivalries { --occasion-surface:#1D3129; --occasion-ink:#F7F0E4; --occasion-accent:#EACD9C; --occasion-light:#A17D4E; --occasion-second-light:#EACD9C; --occasion-canvas:#1D3129; --occasion-rail:#101718; }
.occasion--italian-super-cup { --occasion-surface:#24232C; --occasion-ink:#F7F0E4; --occasion-accent:#E9D4A8; --occasion-light:#A08959; --occasion-second-light:#E9D4A8; --occasion-canvas:#24232C; --occasion-rail:#101718; }
.occasion--lisbon-derby { --occasion-surface:#203235; --occasion-ink:#F7F0E4; --occasion-accent:#EADBC0; --occasion-light:#6A9893; --occasion-second-light:#EADBC0; --occasion-canvas:#203235; --occasion-rail:#101718; }
.occasion--istanbul-derby { --occasion-surface:#18242E; --occasion-ink:#F7F0E4; --occasion-accent:#EAC58C; --occasion-light:#A87943; --occasion-second-light:#B66A48; --occasion-canvas:#101B24; --occasion-rail:#0C151D; }
.occasion--seville-derby { --occasion-surface:#23352D; --occasion-ink:#F7F0E4; --occasion-accent:#E8C7A0; --occasion-light:#B98257; --occasion-second-light:#638B72; --occasion-canvas:#16251D; --occasion-rail:#101B16; }
.occasion--finalday { --occasion-surface:#20331D; --occasion-ink:#E6F6B2; --occasion-accent:#C8F03C; --occasion-light:#8FB134; --occasion-second-light:#41684A; --occasion-canvas:#121C13; --occasion-rail:#0C160E; }
@media (max-width: 600px) {
  :root { --occasion-display:clamp(32px,11vw,44px); --occasion-title-compact:28px; --occasion-hero-height:0px; --occasion-short-height:128px; --occasion-art-short:clamp(80px,25vw,112px); }
}

:root {
  --picker-white: #fff;
  --picker-black: #000;
  --picker-spectrum: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  --icon-2xl:32px; --icon-3xl:40px; --icon-4xl:48px;
}

/* Warm clay season continuation, 26 October 2026. */
.occasion--january-domestic-cup-card { --occasion-surface:#24232C; --occasion-ink:#F7F0E4; --occasion-accent:#E9D4A8; --occasion-light:#A08959; --occasion-second-light:#E9D4A8; --occasion-canvas:#24232C; --occasion-rail:#101718; }
.occasion--new-year-rivalries { --occasion-surface:#183D2E; --occasion-ink:#F9EDCD; --occasion-accent:#F1D194; --occasion-light:#C4A162; --occasion-second-light:#477D51; --occasion-canvas:#101F17; --occasion-rail:#0B1811; }
.occasion--derby-d-italia { --occasion-surface:#19212A; --occasion-ink:#F7F0E4; --occasion-accent:#E4D9C7; --occasion-light:#6F7B8A; --occasion-second-light:#E4D9C7; --occasion-canvas:#19212A; --occasion-rail:#101718; }
.occasion--winter-tests { --occasion-surface:#1C2938; --occasion-ink:#F7F0E4; --occasion-accent:#E5D1B3; --occasion-light:#536E8E; --occasion-second-light:#E5D1B3; --occasion-canvas:#1C2938; --occasion-rail:#101718; }
.occasion--champions-league-returns { --occasion-surface:#102344; --occasion-ink:#E7EFFF; --occasion-accent:#ADCBFF; --occasion-light:#3F68B3; --occasion-second-light:#91A9DD; --occasion-canvas:#0B1720; --occasion-rail:#0B151D; }
.occasion--europa-polish-spotlight { --occasion-surface:#28221C; --occasion-ink:#F7F0E4; --occasion-accent:#F1C08C; --occasion-light:#A26331; --occasion-second-light:#F1C08C; --occasion-canvas:#28221C; --occasion-rail:#101718; }
.occasion--old-trafford-return { --occasion-surface:#2A1C22; --occasion-ink:#F7F0E4; --occasion-accent:#EABCAA; --occasion-light:#8E3642; --occasion-second-light:#EABCAA; --occasion-canvas:#2A1C22; --occasion-rail:#101718; }
.occasion--champions-league-final-league-night { --occasion-surface:#102344; --occasion-ink:#E7EFFF; --occasion-accent:#ADCBFF; --occasion-light:#3F68B3; --occasion-second-light:#91A9DD; --occasion-canvas:#0B1720; --occasion-rail:#0B151D; }
.occasion--europa-league-final-league-night { --occasion-surface:#28221C; --occasion-ink:#F7F0E4; --occasion-accent:#F1C08C; --occasion-light:#A26331; --occasion-second-light:#F1C08C; --occasion-canvas:#28221C; --occasion-rail:#101718; }
.occasion--derbies-across-europe { --occasion-surface:#1C2A2E; --occasion-ink:#F7F0E4; --occasion-accent:#D6DCD5; --occasion-light:#5D838A; --occasion-second-light:#D6DCD5; --occasion-canvas:#1C2A2E; --occasion-rail:#101718; }
.occasion--swiss-rivalry-spotlight { --occasion-surface:#2A1C22; --occasion-ink:#F7F0E4; --occasion-accent:#EABCAA; --occasion-light:#8E3642; --occasion-second-light:#EABCAA; --occasion-canvas:#2A1C22; --occasion-rail:#101718; }
.occasion--spanish-super-cup-semi-finals { --occasion-surface:#102344; --occasion-ink:#E7EFFF; --occasion-accent:#ADCBFF; --occasion-light:#3F68B3; --occasion-second-light:#91A9DD; --occasion-canvas:#0B1720; --occasion-rail:#0B151D; }
.occasion--prague-and-the-classics { --occasion-surface:#2A1C22; --occasion-ink:#F7F0E4; --occasion-accent:#EABCAA; --occasion-light:#8E3642; --occasion-second-light:#EABCAA; --occasion-canvas:#2A1C22; --occasion-rail:#101718; }
.occasion--spanish-super-cup-final { --occasion-surface:#24232C; --occasion-ink:#F7F0E4; --occasion-accent:#E9D4A8; --occasion-light:#A08959; --occasion-second-light:#E9D4A8; --occasion-canvas:#24232C; --occasion-rail:#101718; }
.occasion--milan-derby { --occasion-surface:#1C2A2E; --occasion-ink:#F7F0E4; --occasion-accent:#D6DCD5; --occasion-light:#5D838A; --occasion-second-light:#D6DCD5; --occasion-canvas:#1C2A2E; --occasion-rail:#101718; }
.occasion--champions-league-playoffs-first-legs { --occasion-surface:#102344; --occasion-ink:#E7EFFF; --occasion-accent:#ADCBFF; --occasion-light:#3F68B3; --occasion-second-light:#91A9DD; --occasion-canvas:#0B1720; --occasion-rail:#0B151D; }
.occasion--european-thursday-knockout-card { --occasion-surface:#102344; --occasion-ink:#E7EFFF; --occasion-accent:#ADCBFF; --occasion-light:#3F68B3; --occasion-second-light:#91A9DD; --occasion-canvas:#0B1720; --occasion-rail:#0B151D; }
.occasion--belgrade-and-the-weekend-tests { --occasion-surface:#1C2A2E; --occasion-ink:#F7F0E4; --occasion-accent:#D6DCD5; --occasion-light:#5D838A; --occasion-second-light:#D6DCD5; --occasion-canvas:#1C2A2E; --occasion-rail:#101718; }
.occasion--champions-league-playoffs-return-legs { --occasion-surface:#102344; --occasion-ink:#E7EFFF; --occasion-accent:#ADCBFF; --occasion-light:#3F68B3; --occasion-second-light:#91A9DD; --occasion-canvas:#0B1720; --occasion-rail:#0B151D; }
.occasion--rivalry-weekend-across-europe { --occasion-surface:#1C2A2E; --occasion-ink:#F7F0E4; --occasion-accent:#D6DCD5; --occasion-light:#5D838A; --occasion-second-light:#D6DCD5; --occasion-canvas:#1C2A2E; --occasion-rail:#101718; }
.occasion--regional-championship-finish { --occasion-surface:#20331D; --occasion-ink:#E6F6B2; --occasion-accent:#C8F03C; --occasion-light:#8FB134; --occasion-second-light:#41684A; --occasion-canvas:#121C13; --occasion-rail:#0C160E; }
.occasion--der-klassiker { --occasion-surface:#1C2A2E; --occasion-ink:#F7F0E4; --occasion-accent:#D6DCD5; --occasion-light:#5D838A; --occasion-second-light:#D6DCD5; --occasion-canvas:#1C2A2E; --occasion-rail:#101718; }
.occasion--champions-league-last-sixteen-first-legs { --occasion-surface:#102344; --occasion-ink:#E7EFFF; --occasion-accent:#ADCBFF; --occasion-light:#3F68B3; --occasion-second-light:#91A9DD; --occasion-canvas:#0B1720; --occasion-rail:#0B151D; }
.occasion--london-and-rome { --occasion-surface:#1C2A2E; --occasion-ink:#F7F0E4; --occasion-accent:#D6DCD5; --occasion-light:#5D838A; --occasion-second-light:#D6DCD5; --occasion-canvas:#1C2A2E; --occasion-rail:#101718; }
.occasion--champions-league-last-sixteen-return-legs { --occasion-surface:#102344; --occasion-ink:#E7EFFF; --occasion-accent:#ADCBFF; --occasion-light:#3F68B3; --occasion-second-light:#91A9DD; --occasion-canvas:#0B1720; --occasion-rail:#0B151D; }
.occasion--manchester-zagreb-istanbul { --occasion-surface:#1C2A2E; --occasion-ink:#F7F0E4; --occasion-accent:#D6DCD5; --occasion-light:#5D838A; --occasion-second-light:#D6DCD5; --occasion-canvas:#1C2A2E; --occasion-rail:#101718; }
.occasion--league-cup-final { --occasion-surface:#24232C; --occasion-ink:#F7F0E4; --occasion-accent:#E9D4A8; --occasion-light:#A08959; --occasion-second-light:#E9D4A8; --occasion-canvas:#24232C; --occasion-rail:#101718; }
.occasion--nations-league-quarter-finals-first-legs { --occasion-surface:#142332; --occasion-ink:#F5F0E5; --occasion-accent:#DACAA9; --occasion-light:#355E90; --occasion-second-light:#B69C72; --occasion-canvas:#0F1923; --occasion-rail:#0C151E; }
.occasion--nations-league-quarter-finals-return-legs { --occasion-surface:#142332; --occasion-ink:#F5F0E5; --occasion-accent:#DACAA9; --occasion-light:#355E90; --occasion-second-light:#B69C72; --occasion-canvas:#0F1923; --occasion-rail:#0C151E; }
.occasion--madrid-derby { --occasion-surface:#211A26; --occasion-ink:#FAEEDB; --occasion-accent:#E8C89C; --occasion-light:#9A254D; --occasion-second-light:#D4C5A7; --occasion-canvas:#121618; --occasion-rail:#101516; }
.occasion--fa-cup-knockout-spotlight { --occasion-surface:#24232C; --occasion-ink:#F7F0E4; --occasion-accent:#E9D4A8; --occasion-light:#A08959; --occasion-second-light:#E9D4A8; --occasion-canvas:#24232C; --occasion-rail:#101718; }
.occasion--champions-league-quarter-finals-first-legs { --occasion-surface:#102344; --occasion-ink:#E7EFFF; --occasion-accent:#ADCBFF; --occasion-light:#3F68B3; --occasion-second-light:#91A9DD; --occasion-canvas:#0B1720; --occasion-rail:#0B151D; }
.occasion--april-title-tests { --occasion-surface:#20331D; --occasion-ink:#E6F6B2; --occasion-accent:#C8F03C; --occasion-light:#8FB134; --occasion-second-light:#41684A; --occasion-canvas:#121C13; --occasion-rail:#0C160E; }
.occasion--champions-league-quarter-finals-return-legs { --occasion-surface:#102344; --occasion-ink:#E7EFFF; --occasion-accent:#ADCBFF; --occasion-light:#3F68B3; --occasion-second-light:#91A9DD; --occasion-canvas:#0B1720; --occasion-rail:#0B151D; }
.occasion--poland-budapest-rome { --occasion-surface:#1C2A2E; --occasion-ink:#F7F0E4; --occasion-accent:#D6DCD5; --occasion-light:#5D838A; --occasion-second-light:#D6DCD5; --occasion-canvas:#1C2A2E; --occasion-rail:#101718; }
.occasion--knvb-cup-final { --occasion-surface:#28221C; --occasion-ink:#F7F0E4; --occasion-accent:#F1C08C; --occasion-light:#A26331; --occasion-second-light:#F1C08C; --occasion-canvas:#28221C; --occasion-rail:#101718; }
.occasion--asian-champions-league-final { --occasion-surface:#24232C; --occasion-ink:#F7F0E4; --occasion-accent:#E9D4A8; --occasion-light:#A08959; --occasion-second-light:#E9D4A8; --occasion-canvas:#24232C; --occasion-rail:#101718; }
.occasion--april-rivalries { --occasion-surface:#1C2A2E; --occasion-ink:#F7F0E4; --occasion-accent:#D6DCD5; --occasion-light:#5D838A; --occasion-second-light:#D6DCD5; --occasion-canvas:#1C2A2E; --occasion-rail:#101718; }
.occasion--copa-del-rey-final { --occasion-surface:#211A26; --occasion-ink:#FAEEDB; --occasion-accent:#E8C89C; --occasion-light:#9A254D; --occasion-second-light:#D4C5A7; --occasion-canvas:#121618; --occasion-rail:#101516; }
.occasion--champions-league-semi-finals-first-legs { --occasion-surface:#102344; --occasion-ink:#E7EFFF; --occasion-accent:#ADCBFF; --occasion-light:#3F68B3; --occasion-second-light:#91A9DD; --occasion-canvas:#0B1720; --occasion-rail:#0B151D; }
.occasion--north-london-run-in { --occasion-surface:#20331D; --occasion-ink:#E6F6B2; --occasion-accent:#C8F03C; --occasion-light:#8FB134; --occasion-second-light:#41684A; --occasion-canvas:#121C13; --occasion-rail:#0C160E; }
.occasion--championship-promotion-final { --occasion-surface:#24232C; --occasion-ink:#F7F0E4; --occasion-accent:#E9D4A8; --occasion-light:#A08959; --occasion-second-light:#E9D4A8; --occasion-canvas:#24232C; --occasion-rail:#101718; }
.occasion--champions-league-semi-finals-return-legs { --occasion-surface:#102344; --occasion-ink:#E7EFFF; --occasion-accent:#ADCBFF; --occasion-light:#3F68B3; --occasion-second-light:#91A9DD; --occasion-canvas:#0B1720; --occasion-rail:#0B151D; }
.occasion--clasico-run-in { --occasion-surface:#20331D; --occasion-ink:#E6F6B2; --occasion-accent:#C8F03C; --occasion-light:#8FB134; --occasion-second-light:#41684A; --occasion-canvas:#121C13; --occasion-rail:#0C160E; }
.occasion--african-champions-league-decider { --occasion-surface:#123128; --occasion-ink:#F7E8BC; --occasion-accent:#E9C77D; --occasion-light:#B89C59; --occasion-second-light:#42765B; --occasion-canvas:#0E1B16; --occasion-rail:#0B1712; }
.occasion--french-cup-final { --occasion-surface:#1B2937; --occasion-ink:#F6F0E4; --occasion-accent:#DFD1AF; --occasion-light:#718AA4; --occasion-second-light:#E2C57F; --occasion-canvas:#111B23; --occasion-rail:#0E171E; }
.occasion--italian-and-german-run-in { --occasion-surface:#20331D; --occasion-ink:#E6F6B2; --occasion-accent:#C8F03C; --occasion-light:#8FB134; --occasion-second-light:#41684A; --occasion-canvas:#121C13; --occasion-rail:#0C160E; }
.occasion--coppa-italia-final { --occasion-surface:#24232C; --occasion-ink:#F7F0E4; --occasion-accent:#E9D4A8; --occasion-light:#A08959; --occasion-second-light:#E9D4A8; --occasion-canvas:#24232C; --occasion-rail:#101718; }
.occasion--fa-cup-final { --occasion-surface:#24232C; --occasion-ink:#F7F0E4; --occasion-accent:#E9D4A8; --occasion-light:#A08959; --occasion-second-light:#E9D4A8; --occasion-canvas:#24232C; --occasion-rail:#101718; }
.occasion--german-polish-dutch-title-weekend { --occasion-surface:#20331D; --occasion-ink:#E6F6B2; --occasion-accent:#C8F03C; --occasion-light:#8FB134; --occasion-second-light:#41684A; --occasion-canvas:#121C13; --occasion-rail:#0C160E; }
.occasion--europa-league-final { --occasion-surface:#28221C; --occasion-ink:#F7F0E4; --occasion-accent:#F1C08C; --occasion-light:#A26331; --occasion-second-light:#F1C08C; --occasion-canvas:#28221C; --occasion-rail:#101718; }
.occasion--german-cup-final { --occasion-surface:#24232C; --occasion-ink:#F7F0E4; --occasion-accent:#E9D4A8; --occasion-light:#A08959; --occasion-second-light:#E9D4A8; --occasion-canvas:#24232C; --occasion-rail:#101718; }
.occasion--conference-league-final { --occasion-surface:#123128; --occasion-ink:#F7E8BC; --occasion-accent:#E9C77D; --occasion-light:#B89C59; --occasion-second-light:#42765B; --occasion-canvas:#0E1B16; --occasion-rail:#0B1712; }
.occasion--champions-league-final { --occasion-surface:#102344; --occasion-ink:#E7EFFF; --occasion-accent:#ADCBFF; --occasion-light:#3F68B3; --occasion-second-light:#91A9DD; --occasion-canvas:#0B1720; --occasion-rail:#0B151D; }
.occasion--nations-league-semi-finals { --occasion-surface:#142332; --occasion-ink:#F5F0E5; --occasion-accent:#DACAA9; --occasion-light:#355E90; --occasion-second-light:#B69C72; --occasion-canvas:#0F1923; --occasion-rail:#0C151E; }
.occasion--nations-league-final { --occasion-surface:#142332; --occasion-ink:#F5F0E5; --occasion-accent:#DACAA9; --occasion-light:#355E90; --occasion-second-light:#B69C72; --occasion-canvas:#0F1923; --occasion-rail:#0C151E; }