/* Lagos Life · dark mode (10 Oct 2026, to match the game's new dark mode). Loaded last.
   Not an inversion: the page becomes a Lagos night (deep indigo ink), text becomes warm paper, the sticker
   outlines become paper die-cut edges with near-black drop shadows, and the soft tints become deep, quieter
   versions of themselves. Physical objects (ticket, certificate, postcard, signboard, meter, posters) stay
   paper and glow on the night page: they are re-scoped back to the light tokens with .ll-paper rules below.
   Everything here is under :root[data-theme="dark"], so light mode is untouched. */

/* ---------- the toggle (both themes): Refined sticker icon button, beside the speaker ---------- */
/* the moon hangs off the left of the speaker group without taking flex space, so the header (and the centred
   Play | Advertise switch) is laid out exactly as before the toggle existed */
.llsnd-grp > .lltheme { position: absolute; right: 100%; top: 50%; translate: 0 -50%; }
@media (min-width: 701px) { .llsnd-grp { position: relative; } }
/* 601–700px: no room beside the switch, so the moon sits at the end of the journey row (as on phones) */
@media (min-width: 601px) and (max-width: 700px) {
  .llsnd-grp > .lltheme { right: 6px; top: auto; bottom: -7px; translate: none; }
  .journey { padding-right: 52px; }
}
.lltheme { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: 0; padding: 0; border: 1.5px solid transparent; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color var(--d-quick) var(--ease-out), border-color var(--d-quick); }
.lltheme svg { width: 22px; height: 22px; overflow: visible; }
.lltheme__disc { fill: currentColor; transform-origin: 12px 12px; transition: transform 420ms var(--ease-settle); }
.lltheme__bite { transition: transform 420ms var(--ease-out); transform: translate(8px, -8px); }
.lltheme__rays { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transform-origin: 12px 12px; transition: transform 420ms var(--ease-out), opacity 240ms; }
.lltheme:hover { background: var(--cotton); border-color: var(--ink); }
.lltheme:active { background: #E8E5DC; }
.lltheme:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* dark: the sun's disc grows into a moon as the bite slides in, the rays turn away */
[data-theme="dark"] .lltheme__disc { transform: scale(1.5); }
[data-theme="dark"] .lltheme__bite { transform: translate(0, 0); }
[data-theme="dark"] .lltheme__rays { transform: rotate(45deg) scale(.4); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .lltheme__disc, .lltheme__bite, .lltheme__rays { transition: none; } }
.reduce-motion .lltheme__disc, .reduce-motion .lltheme__bite, .reduce-motion .lltheme__rays { transition: none; }
@media (max-width: 600px) {
  /* phones: the speaker sits at the end of the journey row; the moon sits just before it */
  .llsnd-grp > .lltheme, .lltheme { position: absolute; right: 50px; top: auto; bottom: -7px; translate: none; }
  .lltheme svg { width: 20px; height: 20px; }
  .journey { padding-right: 96px; }
}

/* ---------- the swap: one quick crossfade ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after { transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease, fill 250ms ease, stroke 250ms ease !important; }

/* ================================================================== */
/* ============================ DARK ================================= */
/* ================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --dk-night: #0B1028;              /* the page */
  --dk-surface-2: #121937;            /* lifted band (was cotton) */
  --dk-surface-3: #1A2247;            /* card / widget surface (was white) */
  --dk-surface-4: #232C57;            /* hover on a surface */
  --dk-edge: #ECE9E4;               /* paper die-cut outline */
  --dk-drop: #02040C;               /* near-black hard shadow */
  --dk-ink: #101634;              /* ink that never flips: text on green/gold, physical objects */

  --paper: var(--dk-night);
  --cotton: var(--dk-surface-2);
  --white: var(--dk-surface-3);
  --ink: #ECE9E4;                /* warm paper at ~92% on the night */
  --ink-2: rgba(255, 252, 247, .68);
  --ink-3: rgba(255, 252, 247, .16);
  --etu: #1F2858;
  --green-soft: #033D2A;
  --gold-soft: #452D0A;
  --fuch-soft: #4D1C36;
  --water: #1A2350;

  --line: 2.5px solid var(--dk-edge);
  --sh-pill: 0 10px 24px -10px rgba(0, 0, 0, .7);
  --sh-widget: 0 18px 40px -18px rgba(0, 0, 0, .75);
  --die: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 12px 14px rgba(0, 0, 0, .5));

  --b-line: 1.5px solid var(--dk-edge);
  --b-sh: 0 3px 0 var(--dk-drop);
  --b-sh-hover: 0 3px 0 var(--dk-drop), 0 10px 18px -10px rgba(0, 0, 0, .8);
  --b-sh-press: 0 1px 0 var(--dk-drop);
}

/* ---------- light islands: films (already night) and physical objects keep their light tokens ---------- */
/* The four films were designed as night scenes that use the paper/ink tokens; restoring the light tokens inside
   them keeps them exactly as they are. The objects (ticket, signboard, postcard, posters, ad faces) stay paper. */
:root[data-theme="dark"] :is(#gov, [data-beyond-film], #finale, #b9, .wipe,
  #spin .tk, #climb .bb-scene, #phone .pp-device, #owambe .bolt, #crowd .cr-lux-wrap, #crowd .cr-stamp, #crowd .cr-wlabel,
  #side-advertise .bd-bill__ads, #side-advertise .bd-lcd, #side-advertise .bd-cal, #side-advertise .bd-wl, #side-advertise .bd-pc-wrap, #preview .inner, .b4-ad,
  #beyond .bx-pp, #beyond .bx-tk) {
  color-scheme: light;
  --paper: #FFFCF7; --white: #FFFFFF; --cotton: #F3F1EA;
  --ink: #101634; --ink-2: rgba(16, 22, 52, .68); --ink-3: rgba(16, 22, 52, .14);
  --etu: #1B2350; --green-soft: #D7F4E6; --gold-soft: #FCEBC4; --fuch-soft: #FBD8E5; --water: #DCE1F2;
  --line: 2.5px solid #101634;
  --sh-pill: 0 10px 24px -10px rgba(16, 22, 52, .35);
  --sh-widget: 0 18px 40px -18px rgba(16, 22, 52, .32);
  --die: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 12px 14px rgba(16, 22, 52, .2));
  --b-line: 1.5px solid #101634; --b-sh: 0 3px 0 #101634;
  --b-sh-hover: 0 3px 0 #101634, 0 10px 18px -10px rgba(16, 22, 52, .45); --b-sh-press: 0 1px 0 #101634;
}
/* objects (not films) also take ink text, at zero specificity so their own colour rules still win */
:where(:root[data-theme="dark"]) :where(#spin .tk, #phone .pp-device, #owambe .bolt, #crowd .cr-lux-wrap, #crowd .cr-stamp, #crowd .cr-wlabel,
  #side-advertise .bd-bill__ads, #side-advertise .bd-cal, #side-advertise .bd-wl, #side-advertise .bd-pc-wrap, #beyond .bx-pp, #beyond .bx-tk) { color: #101634; }

/* ---------- base ---------- */
:root[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] ::selection { background: var(--gold); color: var(--dk-ink); }

/* ---------- header + journey bar ---------- */
:root[data-theme="dark"] .top { background: rgba(11, 16, 40, .84); }
:root[data-theme="dark"] .journey__track { background: repeating-linear-gradient(90deg, rgba(255, 252, 247, .34) 0 10px, transparent 10px 17px); }
:root[data-theme="dark"] .journey__done { background: repeating-linear-gradient(90deg, var(--gold) 0 10px, rgba(233, 165, 18, .4) 10px 17px); }
:root[data-theme="dark"] .journey__stop::before { border-color: rgba(255, 252, 247, .5); }
:root[data-theme="dark"] .journey__stop.is-past::before { border-color: var(--dk-ink); }
:root[data-theme="dark"] .journey__stop .tip { background: var(--dk-surface-3); border-color: var(--dk-edge); }
:root[data-theme="dark"] .brand__tag { border-color: rgba(255, 252, 247, .45); }
:root[data-theme="dark"] .switch { box-shadow: 0 2px 0 var(--dk-drop); }
:root[data-theme="dark"] .switch__btn[aria-selected="true"] { color: var(--dk-ink); }
:root[data-theme="dark"] .switch__thumb { border-color: var(--dk-ink); }
:root[data-theme="dark"] .llsnd:active, :root[data-theme="dark"] .lltheme:active { background: var(--dk-surface-4); }
@media (max-width: 760px) {
  :root[data-theme="dark"] .top .top__cta:hover { background: #FFFFFF; }
}

/* ---------- buttons: ink text stays on the bright fills (green 6.7:1, gold 8.3:1 with #101634) ---------- */
:root[data-theme="dark"] :is(.btn--green, .btn--gold, .ft-play) { color: var(--dk-ink); }
:root[data-theme="dark"] .btn:disabled, :root[data-theme="dark"] .btn[aria-disabled="true"] { color: rgba(255, 252, 247, .4); border-color: rgba(255, 252, 247, .22); }

/* ---------- P1 hero: night sky easing down into the lagoon behind the island ---------- */
:root[data-theme="dark"] .hero { background: radial-gradient(120% 70% at 75% 0%, #1B2147 0%, rgba(27, 33, 71, 0) 60%), var(--paper); }
:root[data-theme="dark"] .hero--brands { background: radial-gradient(120% 70% at 75% 0%, #13302E 0%, rgba(19, 48, 46, 0) 60%), var(--paper); }
:root[data-theme="dark"] .hero--island { background: linear-gradient(180deg, #0B1028 0%, #0B1028 32%, #0E1534 55%, #121B42 78%, #15204B 100%); }

/* ---------- P2 birth booth: the machine goes dark (a lit kiosk at night); the meter keeps its cream casing, the ticket stays paper ---------- */
:root[data-theme="dark"] #spin { --sh-w: 0 18px 40px -18px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] #spin .bk-field input::placeholder { color: rgba(255, 252, 247, .5); }
:root[data-theme="dark"] #spin .meterbox { border-top-color: rgba(255, 252, 247, .2); }
:root[data-theme="dark"] #spin .bk-field[data-bad] { border-color: #FF7FA8; }
:root[data-theme="dark"] #spin .err { color: #FF8DB2; }
:root[data-theme="dark"] #spin .machine.is-ready .booth__side p.status { color: #4CD596; }
:root[data-theme="dark"] #spin .booth__slot { background: #05081A; }
:root[data-theme="dark"] #spin .castshadow { background: rgba(0, 0, 0, .55); }
:root[data-theme="dark"] #spin .booth__out .tk::before { background: linear-gradient(rgba(0, 0, 0, .35), transparent); }

/* ---------- P3 city: area names outline in paper; the area chips become deep tints of their colour ---------- */
:root[data-theme="dark"] .ax__name { background-image: linear-gradient(90deg, var(--c) 0 50%, rgba(255, 252, 247, .04) 50% 100%); }
:root[data-theme="dark"] .ax__name::after { filter: url(#ol-dk); }
@media (max-width: 719px) { :root[data-theme="dark"] .ax__name::after { filter: url(#ol-sm-dk); } }
:root[data-theme="dark"] .ax__n, :root[data-theme="dark"] .pl.is-picked { background: color-mix(in srgb, var(--c) 26%, #0B1028); }
:root[data-theme="dark"] .pl { border-top-color: rgba(255, 252, 247, .14); }
:root[data-theme="dark"] .ax .ph { background: #FFFFFF; box-shadow: 0 0 0 2.5px var(--dk-edge), 0 14px 26px -10px rgba(0, 0, 0, .6); }

/* ---------- P4 climb: the painted signboard stays as is; only the wall around it darkens ---------- */
:root[data-theme="dark"] #climb .bb-arr:disabled { color: rgba(255, 252, 247, .4); border-color: rgba(255, 252, 247, .3); }
:root[data-theme="dark"] #climb .bb-dots i { background: rgba(255, 252, 247, .3); }

/* ---------- P5 phone: the device and its app stay in light mode, like a real phone; the stage light dims ---------- */
:root[data-theme="dark"] #phone { --hair: rgba(255, 252, 247, .14); --ink-3t: rgba(255, 252, 247, .45); }
/* client: a deep indigo stage light (no grey): the night lifts to #1A2350 at the centre with a faint gold warmth, like the light version's spotlight */
:root[data-theme="dark"] #phone .pp-layout::before { background: radial-gradient(closest-side, #1C2656 0%, rgba(26, 35, 80, .85) 30%, rgba(40, 38, 70, .35) 58%, rgba(11, 16, 40, 0) 100%); }
:root[data-theme="dark"] #phone .c-leads line { stroke-opacity: .5; }
:root[data-theme="dark"] #phone .c-leads circle { stroke-opacity: .8; }
:root[data-theme="dark"] #phone .c-leads .is-hot line { stroke-opacity: .95; }
:root[data-theme="dark"] #phone .pp-fine { color: rgba(255, 252, 247, .62); }
:root[data-theme="dark"] #phone .pp-device { box-shadow: 0 0 0 3.5px #3B4580, inset 0 0 0 2px #3B4580, 0 40px 80px -30px rgba(0, 0, 0, .8); }

/* ---------- P7 owambe: the pink party glow becomes a low magenta light; the fabric banners stay as they are ---------- */
:root[data-theme="dark"] .owambe { background: radial-gradient(90% 60% at 50% 0%, #3A1531 0%, rgba(58, 21, 49, 0) 70%), var(--paper); }

/* ---------- P9 crowd: parcel, stamps and the postcard stay paper ---------- */
:root[data-theme="dark"] #crowd .cr-ground { background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
:root[data-theme="dark"] #crowd .cr-lux { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 252, 247, .1); }

/* ---------- footer ---------- */
:root[data-theme="dark"] .foot { border-top-color: rgba(255, 252, 247, .14); }
:root[data-theme="dark"] .ft-line { border-top-color: rgba(255, 252, 247, .14); }
:root[data-theme="dark"] .ft-play:hover { background: #2BC57F; }

/* ================= ADVERTISE ================= */
/* B1: the billboard stands in a night sky over the lagoon (same stops as the Players hero); its face stays lit */
:root[data-theme="dark"] #side-advertise .hero--brands { background: linear-gradient(180deg, #0B1028 0%, #0B1028 26%, #0E1534 48%, #121B42 70%, #15204B 100%); }
:root[data-theme="dark"] #side-advertise .bd-bill__frame { box-shadow: 0 0 0 1.5px rgba(255, 252, 247, .1), 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 120px -20px rgba(255, 233, 166, .16); }
:root[data-theme="dark"] #side-advertise .bd-gs__sky { background: linear-gradient(180deg, rgba(11, 16, 40, 0), #141C44 72%, #18214D); }
:root[data-theme="dark"] #side-advertise .bd-gs__kerb { background: linear-gradient(#2A3260, #222A55); border-top-color: rgba(255, 252, 247, .2); }
:root[data-theme="dark"] #side-advertise .bd-gs__road { background: #1A1F3A; }
/* B2 stats */
:root[data-theme="dark"] #side-advertise .bd-stats > div + div { border-color: rgba(255, 252, 247, .16); }
/* B3 calendar: a paper desk calendar, it stays paper; the rings catch a little light */
:root[data-theme="dark"] #side-advertise .bd-cal__back::after { opacity: .9; filter: brightness(0); }
/* B8 FAQ */
:root[data-theme="dark"] #side-advertise .bd-fq { border-bottom-color: rgba(255, 252, 247, .18); }

/* B4 drive-by: the scenes go to night, the board faces stay lit */
:root[data-theme="dark"] #preview .b4-in::placeholder { color: rgba(255, 252, 247, .5); }
:root[data-theme="dark"] #preview .b4-panel { border-right-color: rgba(255, 252, 247, .16); }
:root[data-theme="dark"] #preview .b4-drop { background: rgba(19, 58, 49, .92); }
:root[data-theme="dark"] #preview .scn--road { background: linear-gradient(#0B1028 0%, #121A40 58%, #172150 72%); }
:root[data-theme="dark"] #preview .scn--road .ground::before { background: #1A2350; }
:root[data-theme="dark"] #preview .scn--sea { background: linear-gradient(#0E1534 0 22%, #17204A 22% 100%); }
:root[data-theme="dark"] #preview .scn--sea .grid { background-image: linear-gradient(rgba(255, 252, 247, .08) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(255, 252, 247, .08) 1.5px, transparent 1.5px); }
:root[data-theme="dark"] #preview .scn--air { background: linear-gradient(#141B3E 0 64%, #10173A 64% 100%); }
:root[data-theme="dark"] #preview .scn--air .floor { background: repeating-linear-gradient(90deg, transparent 0 60px, rgba(255, 252, 247, .06) 60px 62px); }

/* B5: the checkout phone keeps its own light-mode app (b5.css has its own fixed tokens), like the Players phone */
:root[data-theme="dark"] #preview .scn--road .skyline { opacity: 1; background: linear-gradient(#262F5C 0 0) 4% 100%/7% 60% no-repeat, linear-gradient(#262F5C 0 0) 13% 100%/5% 100% no-repeat, linear-gradient(#262F5C 0 0) 70% 100%/6% 80% no-repeat, linear-gradient(#262F5C 0 0) 78% 100%/4% 45% no-repeat, linear-gradient(#262F5C 0 0) 92% 100%/8% 70% no-repeat; }
:root[data-theme="dark"] #preview .scn--road .bb__frame, :root[data-theme="dark"] #preview .scn--air .lb { box-shadow: 0 0 0 1.5px rgba(255, 252, 247, .12), 0 0 60px -10px rgba(255, 233, 166, .25); }
:root[data-theme="dark"] #preview .scn--air .belt { background: repeating-linear-gradient(90deg, #3A4268 0 12px, #4A5480 12px 24px); }

/* P1 island: a lit toy model on a night table, a touch dimmer so it doesn't glare */
:root[data-theme="dark"] .hdio__svg { filter: brightness(.9) drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
/* owambe banners: the ink rod would vanish on the night, so it reads as a polished metal rail with the gold finials */
:root[data-theme="dark"] #owambe .bolt__rod { background: linear-gradient(#E6E8EE, #9DA3B5); box-shadow: 0 0 0 2px #101634, 0 6px 10px -4px rgba(0, 0, 0, .6); }

/* ---------- ink text on every bright gold/green chip, tag and badge (paper text there would fail AA) ---------- */
:root[data-theme="dark"] :is(.adtag, .tag--gold, .chip--gold, .chip--green, .nm--green, .price--green, .statbadge--gold, .badgecard--green,
  .step__n, .step__n--gold, #preview .b4-hud span:last-child, #side-advertise .bd-bill__tag, #side-advertise .bd-ad--green) { color: var(--dk-ink); }
/* airport sign is a lit indigo panel with paper type */
:root[data-theme="dark"] #preview .scn--air .sign { color: #FFFCF7; }
/* carousel counters sit on the night, outside their paper objects */
:root[data-theme="dark"] #side-advertise .bd-pc__count, :root[data-theme="dark"] #crowd .cr-lux__count { color: var(--dk-edge); }
:root[data-theme="dark"] :is(#side-advertise .bd-pc__ctrl, #crowd .cr-lux__ctrl) button { background: var(--dk-surface-3); color: var(--dk-edge); border-color: var(--dk-edge); }
:root[data-theme="dark"] :is(#side-advertise .bd-pc__ctrl, #crowd .cr-lux__ctrl) button:hover { background: var(--dk-edge); color: var(--dk-ink); }

/* reviewer pass (10 Oct) */
/* B9: the end card's stage was still paper (a cream frame before the footer) */
:root[data-theme="dark"] #b9.is-on .b9f__stage { background: var(--dk-night); }
/* heading highlight stickers: the emphasised word is a paper sticker, the loudest thing in the heading (13.5–15:1) */
:root[data-theme="dark"] :is(.pill--gold, .pill--green, .pill--fuch, .star__a, .star__c) { color: var(--dk-ink); border-color: var(--dk-ink); }
:root[data-theme="dark"] :is(.pill--gold, .star__a) { background: #FCEBC4; }
:root[data-theme="dark"] .pill--green, :root[data-theme="dark"] .star--brands .star__a { background: #D7F4E6; }
:root[data-theme="dark"] :is(.pill--fuch, .star__c) { background: #FBD8E5; }
/* films: letterbox bars a hair off pure black, into the night */
:root[data-theme="dark"] :is(.fm-bar, .jn-bar, .fin__bar, #b9 .b9f__bar) { background: #04061A; }
/* Beyond trip overlay: the passport and the tickets are paper (light tokens above); they sit on the scrim with a soft night shadow */
:root[data-theme="dark"] #beyond :is(.bx-pp__visa, .bx-tk) { box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .75); }
:root[data-theme="dark"] #beyond .bx-wel p { color: #FFFFFF; }