/* apex-v3.css — the single site theme (2026-09-14, overnight).
   LIGHT  "Marble & gold": ivory marble ground, gold text with real contrast, gold / marble / rose buttons.
   DARK   "Onyx & blood":  onyx ground with a slow shimmer, blood-red text, no white and no cyan anywhere.
   GAME   game-mode.css keeps its own look; nothing here applies while html has .game-mode.
   Replaces pastel-2026, black-2026, light-mode, polish-2026, design-2026, premium-ui, clean-ui, luxury-design.
   Everything is scoped to html.apex-v3 (set by nav-v2.js), so it can be previewed before it is switched on.
   Specificity: `:not(#apex-z)` adds one id-level (no element has that id). Components that state their own
   colours use three ids further down. Emoji, images, canvases and charts are never recoloured. */

/* ═══ TOKENS ═══════════════════════════════════════════════════════════════════════════════ */
html.apex-v3 {
  --v-bg: #F7F2E7; --v-bg-2: #FFFCF5; --v-bg-3: #F2EAD9;
  --v-line: #E5D7B8; --v-line-2: #D2BD8A;
  --v-text: #5B4411;   /* body text, 8.3:1 on the ground */
  --v-head: #7C5B0F;   /* headings, 5.6:1 */
  --v-text-2: #6F5725; /* secondary, 6.6:1 */
  --v-text-3: #806733; /* labels, 4.7:1 */
  --v-link: #7C5B0F; --v-link-line: #C9A646;
  --v-accent: #B8912F; --v-accent-soft: #F3E6C2;
  --v-btn-bg: #FFFCF5; --v-btn-bg-2: #F4EBD6; --v-btn-line: #D2BD8A; --v-btn-text: #5B4411;
  --v-pri-1: #F1DB93; --v-pri-2: #D4AF37; --v-pri-3: #B8912F; --v-pri-text: #3A2A06; --v-pri-line: #A67F22;
  --v-rose-bg: #FBEDEC; --v-rose-bg-2: #F6D9D9; --v-rose-line: #E7B6B6; --v-rose-text: #8C2A2A;
  --v-pos: #2E7A4B; --v-neg: #A8363A;
  --v-shadow: 0 10px 30px -22px rgba(120,90,20,.45);
  --v-overlay: rgba(60,45,10,.28);
  --v-scroll: #D2BD8A;
  color-scheme: light;
}
html.apex-v3:not([data-theme="light"]) {
  --v-bg: #0B0A0B; --v-bg-2: #141112; --v-bg-3: #1C1517;
  --v-line: #2E1A1D; --v-line-2: #5A1F25;
  --v-text: #E0525A;   /* 5.0:1 on onyx */
  --v-head: #F26B71;   /* 6.4:1 */
  --v-text-2: #D65E65; /* 4.83:1 on the drawer and raised cards, 5.3:1 on onyx (was #D34B53, 4.19:1 on cards; 2026-09-15 sweep) */
  --v-text-3: #D35A61; /* labels, 4.62:1 on raised cards, 4.83:1 on the drawer (was #B8444B, 3.39–3.73:1; 2026-09-15 sweep) */
  --v-link: #F26B71; --v-link-line: #7A1E24;
  --v-accent: #C0393F; --v-accent-soft: rgba(192,57,63,.14);
  --v-btn-bg: #181314; --v-btn-bg-2: #100D0E; --v-btn-line: #5A1F25; --v-btn-text: #E0525A;
  --v-pri-1: #7A1A23; --v-pri-2: #55111A; --v-pri-3: #360A10; --v-pri-text: #FF8A8F; --v-pri-line: #C0393F;
  --v-rose-bg: rgba(192,57,63,.12); --v-rose-bg-2: rgba(192,57,63,.06); --v-rose-line: #7A1E24; --v-rose-text: #F26B71;
  --v-pos: #FF8087; --v-neg: #A8424A;
  --v-shadow: 0 14px 36px -20px rgba(0,0,0,.85);
  --v-overlay: rgba(0,0,0,.62);
  --v-scroll: #5A1F25;
  color-scheme: dark;
}

/* ═══ GROUND ═══════════════════════════════════════════════════════════════════════════════ */
html.apex-v3:not(.game-mode), html.apex-v3:not(.game-mode) body {
  background-color: var(--v-bg) !important; color: var(--v-text) !important;
  margin: 0 !important; max-width: 100% !important; overflow-x: hidden !important;
}
html.apex-v3:not(.game-mode) body { background-image: none !important; }
/* Marble: two soft warm veins, still. */
html.apex-v3[data-theme="light"]:not(.game-mode) body {
  background-image:
    radial-gradient(60% 40% at 15% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
    radial-gradient(50% 35% at 100% 30%, rgba(233,214,170,.35), rgba(233,214,170,0) 70%),
    linear-gradient(160deg, rgba(210,189,138,0) 40%, rgba(210,189,138,.10) 50%, rgba(210,189,138,0) 60%) !important;
  background-attachment: fixed !important;
}
/* Onyx: a slow sheen moving across polished black. */
html.apex-v3:not([data-theme="light"]):not(.game-mode) body::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 30% at 22% 18%, rgba(120,112,124,.16), rgba(0,0,0,0) 70%),
    radial-gradient(34% 28% at 78% 64%, rgba(192,57,63,.09), rgba(0,0,0,0) 72%),
    linear-gradient(118deg, rgba(0,0,0,0) 38%, rgba(170,160,180,.05) 48%, rgba(0,0,0,0) 58%);
  background-size: 160% 160%, 150% 150%, 240% 240%;
  animation: vOnyxSheen 30s ease-in-out infinite alternate;
}
@keyframes vOnyxSheen { 0% { background-position: 0% 0%, 100% 20%, 0% 50%; } 100% { background-position: 60% 40%, 20% 80%, 100% 50%; } }
@media (prefers-reduced-motion: reduce) { html.apex-v3 body::before { animation: none !important; } }

/* Decorative layers that the old black theme removed stay removed. */
html.apex-v3 :is(#apex-bg-photo, .cosmic-bg, .cosmic-orb, .stars, .star, .mosaic-bg, #mosaic-bg, .well-coin, .p21-sparkle, .ho-scan,
  .upsell-glow, .apex-well-visual, .well-shaft, .well-rim) { display: none !important; }
html.apex-v3 :is([style*="wpulse"], .wpulse) { animation: none !important; }

/* Layout hygiene the old layers carried. */
html.apex-v3 * { overflow-wrap: break-word; border-image: none !important; }
html.apex-v3 :is(img, video, svg, iframe) { max-width: 100% !important; }
html.apex-v3 canvas { max-width: 100%; }
html.apex-v3 :is(.tv-lightweight-charts, .lwc-box, #tok-chart, #proof-chart) canvas { max-width: none !important; }
html.apex-v3 :is(img, picture, video, canvas) { filter: none !important; }

/* ═══ TYPE ═════════════════════════════════════════════════════════════════════════════════ */
html.apex-v3:not(.game-mode) body :is(p, span, div, li, td, label, small, em, i, figcaption, blockquote, dd, dt, section, article, header, footer, main, aside, summary, legend, caption):not(#apex-z):not(.apx-tw) {
  color: var(--v-text) !important; -webkit-text-fill-color: currentColor; text-shadow: none !important;
}
html.apex-v3:not(.game-mode) body :is(h1, h2, h3, h4, h5, h6):not(#apex-z) {
  color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important;
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  text-shadow: none !important;
}
html.apex-v3:not(.game-mode) body :is(h1, h2, h3, h4, h5, h6) :is(em, span, b, strong):not(#apex-z) {
  background: none !important; -webkit-background-clip: border-box !important; color: inherit !important; -webkit-text-fill-color: currentColor !important;
}
html.apex-v3:not(.game-mode) body :is(strong, b, th):not(#apex-z) { color: var(--v-head) !important; -webkit-text-fill-color: currentColor; }
html.apex-v3:not(.game-mode) body :is(.muted, .dim, .text-muted, .subtitle, .desc, .hint, .note, .caption, small, [class*="-label"], .stat-label):not(#apex-z) {
  color: var(--v-text-3) !important;
}
html.apex-v3:not(.game-mode) body :is(.stat-value, .stat-val, [class*="stat-value"], [class*="-value"]):not(#apex-z) {
  color: var(--v-head) !important; -webkit-text-fill-color: currentColor !important;
}
/* Gradient-clipped text anywhere: give it a fill that can be read. */
html.apex-v3:not(.game-mode) body :is([style*="background-clip"], [style*="text-fill"], [class*="gradient-text"], [class*="grad-text"]):not(#apex-z) {
  background: none !important; -webkit-text-fill-color: currentColor !important;
}
/* Gains and losses keep a readable difference. */
html.apex-v3:not(.game-mode) body :is(.pos, .positive, .up, .gain, .gains, .green, .price-up, .change-up, .t-up, .is-up):not(#apex-z) { color: var(--v-pos) !important; -webkit-text-fill-color: currentColor !important; }
html.apex-v3:not(.game-mode) body :is(.neg, .negative, .down, .loss, .red, .price-down, .change-down, .t-down, .is-down):not(#apex-z) { color: var(--v-neg) !important; -webkit-text-fill-color: currentColor !important; }
/* Emoji are content: never recoloured. */
html.apex-v3 :is(.emoji, [class*="emoji"]) { -webkit-text-fill-color: initial !important; }
html.apex-v3:not(.game-mode) :is(code, pre, kbd) { background: var(--v-bg-3) !important; color: var(--v-text) !important; border-color: var(--v-line) !important; }
html.apex-v3:not(.game-mode) hr { border-color: var(--v-line) !important; background: var(--v-line) !important; }
html.apex-v3:not(.game-mode) ::selection { background: var(--v-accent-soft); color: var(--v-head); }

/* Links */
html.apex-v3:not(.game-mode) body a:not(.btn):not(.button):not([class*="btn"]):not([class*="cta"]):not(#apex-z) {
  color: var(--v-link) !important; -webkit-text-fill-color: currentColor; text-decoration-color: var(--v-link-line) !important; text-shadow: none !important;
}

/* ═══ SURFACES ═════════════════════════════════════════════════════════════════════════════ */
html.apex-v3:not(.game-mode) body :is(.card, .panel, .box, .tile, .stat, .stat-box, .stat-card, .dashboard-card, .tier-card, .pool-card,
  .token-card, .feature-card, .game-card, .nft-card, .quest-card, .position-card, .swap-card, .info-card, .price-card, .plan-card,
  .aura-card, .challenge-card, .reward-card, .vault-card, .drip-card, .strategy-card, .deposit-card, .yield-card, .listing-card,
  .emb-card, .affiliate-card, .lp-stat, .benefit, .feature, .quick-link, .modal-content, .apex-well, .ad-slot, .sponsor-banner,
  [class*="ad-slot"]):not(#apex-z) {
  background-color: var(--v-bg-2) !important; background-image: none !important;
  border-color: var(--v-line) !important; box-shadow: var(--v-shadow) !important;
  color: var(--v-text) !important;
}
/* Anything painting itself dark (in light) or bright (in dark) inline becomes a theme surface. */
html.apex-v3[data-theme="light"]:not(.game-mode) body :is(
  [style*="background:#0"], [style*="background: #0"], [style*="background:#1"], [style*="background: #1"],
  [style*="background-color:#0"], [style*="background-color: #0"], [style*="background-color:#1"], [style*="background-color: #1"],
  [style*="background:rgba(0,"], [style*="background: rgba(0,"], [style*="background:rgba(5,"], [style*="background: rgba(5,"],
  [style*="background:rgba(8,"], [style*="background: rgba(8,"], [style*="background:rgba(10,"], [style*="background:rgba(12,"],
  [style*="background:rgba(13,"], [style*="background:rgba(15,"], [style*="background:rgba(18,"], [style*="background:rgba(20,"]
):not(#apex-z):not(button):not(a):not(canvas):not(img):not(svg):not([data-keep-color], [data-keep-color] *) {
  background-color: var(--v-bg-2) !important; background-image: none !important; border-color: var(--v-line) !important;
}
html.apex-v3:not([data-theme="light"]):not(.game-mode) body :is(
  [style*="background:#fff"], [style*="background: #fff"], [style*="background:#FFF"], [style*="background: #FFF"],
  [style*="background:white"], [style*="background: white"], [style*="background-color:#fff"], [style*="background-color: #fff"],
  [style*="background:#f"], [style*="background: #f"], [style*="background:#F"], [style*="background: #F"],
  [style*="background:rgba(255"], [style*="background: rgba(255"]
):not(#apex-z):not(button):not(a):not(canvas):not(img):not(svg):not([data-keep-color], [data-keep-color] *) {
  background-color: var(--v-bg-2) !important; background-image: none !important; border-color: var(--v-line) !important;
}
/* One hairline colour for borders. */
html.apex-v3:not(.game-mode) body *:not(#apex-z) { border-color: var(--v-line); }
html.apex-v3:not(.game-mode) body [style*="border"]:not(#apex-z) { border-color: var(--v-line) !important; }

/* Badges, pills, tags, chips */
html.apex-v3:not(.game-mode) body :is(.badge, .pill, .tag, .chip, [class*="badge"], [class*="pill"], .sp-tag):not(#apex-z) {
  background-color: var(--v-accent-soft) !important; background-image: none !important;
  border-color: var(--v-line-2) !important; color: var(--v-head) !important; -webkit-text-fill-color: currentColor !important;
}
/* Toasts and notices */
html.apex-v3:not(.game-mode) body :is(.toast, .apex-toast, .notification, .announce):not(#apex-z) {
  background-color: var(--v-bg-2) !important; background-image: none !important; border-color: var(--v-line-2) !important;
  color: var(--v-text) !important; box-shadow: var(--v-shadow) !important;
}
/* Modals */
html.apex-v3:not(.game-mode) body :is(.modal-overlay, .modal-backdrop):not(#apex-z) { background: var(--v-overlay) !important; }
html.apex-v3:not(.game-mode) body :is(.modal, .modal-box, .modal-content, .modal-card, [role="dialog"] > div):not(#apex-z) {
  background-color: var(--v-bg-2) !important; background-image: none !important; border-color: var(--v-line) !important; color: var(--v-text) !important;
}

/* Tables (colours only: the screener sets its own spacing) */
html.apex-v3:not(.game-mode) body th:not(#apex-z) { background-color: var(--v-bg-3) !important; color: var(--v-head) !important; border-color: var(--v-line) !important; }
html.apex-v3:not(.game-mode) body td:not(#apex-z) { border-color: var(--v-line) !important; }
html.apex-v3:not(.game-mode) body tbody tr:hover > td:not(#apex-z) { background-color: var(--v-accent-soft) !important; }

/* Progress */
html.apex-v3:not(.game-mode) body :is(.progress-fill, .bar-fill, progress):not(#apex-z) { background: linear-gradient(90deg, var(--v-pri-2), var(--v-pri-3)) !important; }
html.apex-v3:not(.game-mode) body :is(.progress, .bar-track):not(#apex-z) { background: var(--v-bg-3) !important; }

/* Scrollbars */
html.apex-v3:not(.game-mode) ::-webkit-scrollbar { width: 8px; height: 8px; background: var(--v-bg); }
html.apex-v3:not(.game-mode) ::-webkit-scrollbar-thumb { background: var(--v-scroll); border-radius: 6px; }

/* Neon glows off (text); motion on decorative classes off. */
html.apex-v3:not(.game-mode) body *:not(#apex-z):not(.apx-tw) { text-shadow: none !important; }
/* Burger menu letters (.apx-tw, nav-v2.js) are exempt so their light-mode glint can show (Martin 2026-09-15). Dark keeps
   exactly the look he liked: no glow, only the letters' own breathing, and the link colour they inherit. */
html.apex-v3:not(.game-mode):not([data-theme="light"]) body .apx-tw:not(#apex-z) { text-shadow: none !important; }
html.apex-v3:not(.game-mode) body :is([class*="shimmer"], [class*="glow"], [class*="shine"], [class*="sparkle"]):not(#apex-z):not(#apex-launcher) { animation: none !important; }

/* ═══ CONTROLS ═════════════════════════════════════════════════════════════════════════════ */
/* Marble: every button by default. */
html.apex-v3:not(.game-mode) body :is(button, .btn, a.btn, a.button, a[class*="btn"], button[class*="btn"], [role="button"], input[type="button"]):not(#apex-z) {
  background: linear-gradient(180deg, var(--v-btn-bg), var(--v-btn-bg-2)) !important;
  color: var(--v-btn-text) !important; -webkit-text-fill-color: var(--v-btn-text) !important;
  border: 1px solid var(--v-btn-line) !important; box-shadow: none !important; text-shadow: none !important; filter: none !important;
}
html.apex-v3:not(.game-mode) body :is(button, .btn, a.btn, a.button, [role="button"]):not(#apex-z):hover { border-color: var(--v-accent) !important; }
html.apex-v3:not(.game-mode) body :is(button, .btn, a.btn, a.button, a[class*="btn"], [role="button"]):not(#apex-z) :is(span, b, i, small, strong, em, div):not(#apex-z) {
  color: inherit !important; -webkit-text-fill-color: currentColor !important; background: none !important;
}
/* Gold (light) / garnet (dark): the one main action. */
html.apex-v3:not(.game-mode) body :is(.primary, .btn-primary, button.primary, a.primary, button[class*="cta"], a[class*="cta"], .cta-button,
  button[type="submit"], input[type="submit"], .claim-submit, .p21-claim-btn, #claim-btn, .modal-btn):not(#apex-z) {
  background: linear-gradient(180deg, var(--v-pri-1) 0%, var(--v-pri-2) 55%, var(--v-pri-3) 100%) !important;
  color: var(--v-pri-text) !important; -webkit-text-fill-color: var(--v-pri-text) !important;
  border: 1px solid var(--v-pri-line) !important; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, var(--v-shadow) !important; font-weight: 700 !important;
}
html.apex-v3:not(.game-mode) body :is(.primary, .btn-primary, button[class*="cta"], a[class*="cta"], button[type="submit"], input[type="submit"], .claim-submit, .p21-claim-btn, #claim-btn, .modal-btn):not(#apex-z):disabled {
  opacity: .55 !important;
}
/* Rose: close, cancel, danger. */
html.apex-v3:not(.game-mode) body :is(button[class*="close"], button[aria-label*="lose"], button[aria-label*="ismiss"], .btn-danger, .danger,
  button.cancel, .btn-cancel, button[class*="cancel"]):not(#apex-z) {
  background: linear-gradient(180deg, var(--v-rose-bg), var(--v-rose-bg-2)) !important;
  color: var(--v-rose-text) !important; -webkit-text-fill-color: var(--v-rose-text) !important; border: 1px solid var(--v-rose-line) !important;
}
/* Tabs and toggle options: the selected one is gold / garnet. */
html.apex-v3:not(.game-mode) body :is(.tab, [role="tab"], [class*="-tab"], [class*="opt"]):is(.active, [aria-selected="true"]):not(#apex-z) {
  background: linear-gradient(180deg, var(--v-pri-1), var(--v-pri-2)) !important; color: var(--v-pri-text) !important; -webkit-text-fill-color: var(--v-pri-text) !important;
  border-color: var(--v-pri-line) !important;
}
/* Inputs */
html.apex-v3:not(.game-mode) body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), textarea, select):not(#apex-z) {
  background: var(--v-bg-2) !important; color: var(--v-text) !important; -webkit-text-fill-color: var(--v-text) !important;
  border: 1px solid var(--v-line-2) !important; box-shadow: none !important;
}
html.apex-v3:not(.game-mode) body :is(input, textarea, select):not(#apex-z)::placeholder { color: var(--v-text-3) !important; -webkit-text-fill-color: var(--v-text-3) !important; opacity: 1; }
html.apex-v3:not(.game-mode) body :is(input, textarea, select):not(#apex-z):focus { border-color: var(--v-accent) !important; outline: none !important; box-shadow: 0 0 0 3px var(--v-accent-soft) !important; }
html.apex-v3:not(.game-mode) body :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--v-accent); }

/* ═══ COMPONENTS (three ids: above the per-component rules in nav-v2.js and homepage-ivory.css) ═══ */
/* Top bar */
html.apex-v3:not(.game-mode) #apex-nav-bar#apex-nav-bar#apex-nav-bar {
  background: color-mix(in srgb, var(--v-bg) 92%, transparent) !important; border-bottom: 1px solid var(--v-line) !important; border-image: none !important;
}
html.apex-v3:not(.game-mode) #apex-nav-bar#apex-nav-bar#apex-nav-bar :is(.apex-nav-brand span, .apex-nav-link) {
  background: none !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important;
}
html.apex-v3:not(.game-mode) #apex-nav-bar#apex-nav-bar#apex-nav-bar .apex-nav-brand img { width: 30px !important; height: 30px !important; border-radius: 50% !important; object-fit: cover !important; }
html.apex-v3:not(.game-mode) #apex-nav-bar#apex-nav-bar#apex-nav-bar :is(.apex-nav-wallet, .apex-nav-wallet-mobile) {
  background: transparent !important; background-image: none !important; border: 1px solid var(--v-pri-line) !important; border-radius: 999px !important;
  color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; box-shadow: none !important;
}
html.apex-v3:not(.game-mode) #apex-nav-bar#apex-nav-bar#apex-nav-bar :is(.apex-nav-wallet, .apex-nav-wallet-mobile):hover,
html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu#apex-mobile-menu .apex-nav-theme-opt.active,
html.apex-v3:not(.game-mode) #apex-nav-bar#apex-nav-bar#apex-nav-bar .apex-nav-theme-opt.active {
  background: var(--v-pri-2) !important; background-image: linear-gradient(180deg, var(--v-pri-1), var(--v-pri-2) 55%, var(--v-pri-3)) !important;
  color: var(--v-pri-text) !important; -webkit-text-fill-color: var(--v-pri-text) !important; border-color: var(--v-pri-line) !important;
}
html.apex-v3:not(.game-mode) #apex-nav-bar#apex-nav-bar#apex-nav-bar :is(.apex-mobile-theme-btn, .apex-mobile-toggle, button:not(.apex-nav-wallet):not(.apex-nav-wallet-mobile)) {
  background: var(--v-btn-bg) !important; background-image: none !important; border: 1px solid var(--v-btn-line) !important;
  color: var(--v-text) !important; -webkit-text-fill-color: var(--v-text) !important;
}
/* Burger drawer */
html.apex-v3:not(.game-mode) #apex-mobile-overlay#apex-mobile-overlay#apex-mobile-overlay { background: var(--v-overlay) !important; }
html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu#apex-mobile-menu {
  background: var(--v-bg-2) !important; background-image: none !important; border-left: 1px solid var(--v-line) !important; color: var(--v-text) !important;
}
html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu#apex-mobile-menu > a,
html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu#apex-mobile-menu > button,
html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu#apex-mobile-menu .apex-mobile-menu-title {
  background: transparent !important; background-image: none !important; border: 0 !important; color: var(--v-text) !important; -webkit-text-fill-color: var(--v-text) !important;
}
html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu#apex-mobile-menu .apex-mobile-menu-title { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu#apex-mobile-menu > a:is(:hover, :active, :focus-visible) { background: var(--v-accent-soft) !important; }
html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu#apex-mobile-menu .nav-section { color: var(--v-text-3) !important; -webkit-text-fill-color: var(--v-text-3) !important; border-top-color: var(--v-line) !important; }
html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu#apex-mobile-menu :is(.apex-mobile-menu-header, .divider, .apex-menu-end) { border-color: var(--v-line) !important; }
html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu#apex-mobile-menu .divider { background: var(--v-line) !important; }
html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu#apex-mobile-menu :is(.apex-menu-end, .gm-mobile-label, div > span) { color: var(--v-text-2) !important; -webkit-text-fill-color: var(--v-text-2) !important; }
html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu#apex-mobile-menu .apex-mobile-menu-close {
  background: var(--v-rose-bg) !important; background-image: none !important; border: 1px solid var(--v-rose-line) !important; color: var(--v-rose-text) !important; -webkit-text-fill-color: var(--v-rose-text) !important;
}
html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu#apex-mobile-menu .apex-nav-theme-toggle { background: var(--v-bg-3) !important; border: 1px solid var(--v-line) !important; }
html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu#apex-mobile-menu .apex-nav-theme-opt:not(.active) { background: transparent !important; color: var(--v-text-2) !important; -webkit-text-fill-color: var(--v-text-2) !important; }
html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu#apex-mobile-menu :is(#nav-wallet-btn-drawer, #nav-lang-btn-mobile) {
  background: var(--v-btn-bg) !important; background-image: none !important; border: 1px solid var(--v-pri-line) !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important;
}
/* Pop-ups: palette, Buy XNT, language, wallet picker, faucet status */
html.apex-v3:not(.game-mode) :is(.apex-palette-backdrop.apex-palette-backdrop.apex-palette-backdrop, #howto-modal#howto-modal#howto-modal, #apex-lang-modal#apex-lang-modal#apex-lang-modal, #global-wallet-picker#global-wallet-picker#global-wallet-picker, #faucet-status-modal#faucet-status-modal#faucet-status-modal) {
  background: var(--v-overlay) !important;
}
html.apex-v3:not(.game-mode) :is(.apex-palette-backdrop.apex-palette-backdrop.apex-palette-backdrop .apex-palette, #howto-modal#howto-modal#howto-modal > div, #apex-lang-modal#apex-lang-modal#apex-lang-modal .lang-modal-box, #global-wallet-picker#global-wallet-picker#global-wallet-picker > div, #faucet-status-modal#faucet-status-modal#faucet-status-modal > div) {
  background: var(--v-bg-2) !important; background-image: none !important; border: 1px solid var(--v-line) !important; color: var(--v-text) !important;
}
html.apex-v3:not(.game-mode) :is(.apex-palette-backdrop.apex-palette-backdrop.apex-palette-backdrop, #howto-modal#howto-modal#howto-modal, #apex-lang-modal#apex-lang-modal#apex-lang-modal, #global-wallet-picker#global-wallet-picker#global-wallet-picker, #faucet-status-modal#faucet-status-modal#faucet-status-modal) :is(p, span, div, li, code, summary, label, input, .gw-name, .lmi-name, .nm, .apex-palette-input) {
  color: var(--v-text) !important; -webkit-text-fill-color: var(--v-text) !important;
}
html.apex-v3:not(.game-mode) :is(.apex-palette-backdrop.apex-palette-backdrop.apex-palette-backdrop, #howto-modal#howto-modal#howto-modal, #apex-lang-modal#apex-lang-modal#apex-lang-modal, #global-wallet-picker#global-wallet-picker#global-wallet-picker, #faucet-status-modal#faucet-status-modal#faucet-status-modal) :is(h2, h3, b, strong, .lang-region-header, .pth, .lmi-code, .gw-desc, [style*="uppercase"]) {
  color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; background: none !important;
}
html.apex-v3:not(.game-mode) :is(.apex-palette-backdrop.apex-palette-backdrop.apex-palette-backdrop .apex-palette-item:is(.active, :hover), #apex-lang-modal#apex-lang-modal#apex-lang-modal .lang-modal-item:is(.active, :hover), #global-wallet-picker#global-wallet-picker#global-wallet-picker :is(button, a):hover) {
  background: var(--v-accent-soft) !important;
}
html.apex-v3:not(.game-mode) :is(#global-wallet-picker#global-wallet-picker#global-wallet-picker :is(button, a), #faucet-status-modal#faucet-status-modal#faucet-status-modal :is(.hp-rung, #supporters-list > div, div[style*="background:#1a1030"], summary, a), #howto-modal#howto-modal#howto-modal > div > div p[style*="background"], #apex-lang-modal#apex-lang-modal#apex-lang-modal #lang-search-input) {
  background: var(--v-bg-3) !important; background-image: none !important; border-color: var(--v-line) !important;
}
html.apex-v3:not(.game-mode) :is(#howto-modal#howto-modal#howto-modal > div > a[href*="xdex"], #faucet-status-modal#faucet-status-modal#faucet-status-modal button:not([aria-label="Close"])) {
  background: var(--v-pri-2) !important; background-image: linear-gradient(180deg, var(--v-pri-1), var(--v-pri-2) 55%, var(--v-pri-3)) !important;
  border: 1px solid var(--v-pri-line) !important; color: var(--v-pri-text) !important; -webkit-text-fill-color: var(--v-pri-text) !important;
}
html.apex-v3:not(.game-mode) :is(#howto-modal#howto-modal#howto-modal > div > a[href="/start/"], #howto-modal#howto-modal#howto-modal > div > div a, #faucet-status-modal#faucet-status-modal#faucet-status-modal a) {
  color: var(--v-link) !important; -webkit-text-fill-color: var(--v-link) !important;
}
html.apex-v3:not(.game-mode) :is(#howto-modal#howto-modal#howto-modal > div > button[aria-label="Close"], #faucet-status-modal#faucet-status-modal#faucet-status-modal > div > button[aria-label="Close"], #apex-lang-modal#apex-lang-modal#apex-lang-modal .lang-modal-close, #global-wallet-picker#global-wallet-picker#global-wallet-picker > div > div:first-child > button) {
  background: var(--v-rose-bg) !important; background-image: none !important; border: 1px solid var(--v-rose-line) !important; color: var(--v-rose-text) !important; -webkit-text-fill-color: var(--v-rose-text) !important;
}
/* Toasts on the homepage */
html.apex-v3:not(.game-mode) :is(#apex-live-feed#apex-live-feed#apex-live-feed, #apex-toast-host#apex-toast-host#apex-toast-host) .apex-toast {
  background: var(--v-bg-2) !important; background-image: none !important; border: 1px solid var(--v-line-2) !important; border-left: 3px solid var(--v-accent) !important; color: var(--v-text) !important;
}
html.apex-v3:not(.game-mode) #apex-live-feed#apex-live-feed#apex-live-feed .apex-toast :is(.apex-toast-title) { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; background: none !important; }
html.apex-v3:not(.game-mode) :is(#apex-live-feed#apex-live-feed#apex-live-feed, #apex-toast-host#apex-toast-host#apex-toast-host) .apex-toast :is(.apex-toast-msg, .apex-toast-msg *, span, .apex-toast-time) { color: var(--v-text) !important; -webkit-text-fill-color: var(--v-text) !important; }
html.apex-v3:not(.game-mode) #apex-live-feed#apex-live-feed#apex-live-feed .apex-toast .apex-toast-icon { background: var(--v-bg-3) !important; }


/* ═══ PAGE TOKENS: pages that colour themselves through their own variables ═══════════════════════
   The screener (screener.css, inline CSS, light-ivory.css on body with !important) and nerve.css use their own
   tokens. Point them at the theme so every rule that reads them follows. (0,2,2) beats light-ivory's (0,1,1). */
html.apex-v3:not(.game-mode) body {
  --text: var(--v-text) !important; --text2: var(--v-text-2) !important; --text3: var(--v-text-3) !important;
  --text-2: var(--v-text-2) !important; --text-3: var(--v-text-3) !important;
  --bg: var(--v-bg) !important; --bg2: var(--v-bg-2) !important; --bg3: var(--v-bg-3) !important;
  --bg-1: var(--v-bg-2) !important; --bg-2: var(--v-bg-3) !important; --bg-3: var(--v-bg-3) !important; --bg-blur: color-mix(in srgb, var(--v-bg) 88%, transparent) !important;
  --line: var(--v-line) !important; --line-2: var(--v-line-2) !important;
  --accent: var(--v-accent) !important; --accent-dim: var(--v-accent-soft) !important; --accent-glow: var(--v-accent-soft) !important; --accent-in: var(--v-pri-text) !important;
  --pos: var(--v-pos) !important; --neg: var(--v-neg) !important; --up: var(--v-pos) !important; --down: var(--v-neg) !important;
  --up-soft: var(--v-accent-soft) !important; --down-soft: var(--v-rose-bg) !important; --new: var(--v-head) !important;
  --panel: var(--v-bg-2) !important; --panel-border: var(--v-line) !important;
}
/* Self-painted panels found by the surface pass in nav-v2.js (dark panels in light, bright panels in dark). */
html.apex-v3:not(.game-mode) body .v3-surf:not(#apex-z) {
  background-color: var(--v-bg-2) !important; background-image: none !important; border-color: var(--v-line) !important;
  color: var(--v-text) !important; -webkit-text-fill-color: currentColor; box-shadow: none !important;
}

/* ═══ HOMEPAGE (three ids beat the two-id rules in index.html and homepage-ivory.css) ═══════════════════ */
html.apex-v3 { --v-em: #93700F; }
html.apex-v3:not([data-theme="light"]) { --v-em: #FF6B72; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher { background-color: var(--v-bg) !important; color: var(--v-text) !important; }
html.apex-v3[data-theme="light"]:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher {
  background-image: radial-gradient(38% 28% at 22% 18%, rgba(255,255,255,.8), rgba(255,255,255,0) 70%),
    radial-gradient(46% 34% at 50% 92%, rgba(233,214,170,.45), rgba(233,214,170,0) 74%),
    linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 46%, rgba(255,255,255,0) 62%) !important;
  background-size: 180% 180%, 160% 160%, 240% 240% !important;
}
html.apex-v3:not([data-theme="light"]):not(.game-mode) #apex-launcher#apex-launcher#apex-launcher {
  background-image: radial-gradient(38% 28% at 22% 18%, rgba(120,112,124,.18), rgba(0,0,0,0) 70%),
    radial-gradient(34% 30% at 78% 34%, rgba(192,57,63,.12), rgba(0,0,0,0) 72%),
    linear-gradient(115deg, rgba(0,0,0,0) 30%, rgba(170,160,180,.06) 46%, rgba(0,0,0,0) 62%) !important;
  background-size: 180% 180%, 170% 170%, 240% 240% !important;
}
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .al-tag { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; background: none !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .al-tag em { color: var(--v-em) !important; -webkit-text-fill-color: var(--v-em) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .al-claimcard { background: var(--v-bg-2) !important; background-image: none !important; border: 1px solid var(--v-line) !important; box-shadow: var(--v-shadow) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher :is(.al-label, .al-refill) { color: var(--v-text-3) !important; -webkit-text-fill-color: var(--v-text-3) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher :is(.al-odds, .claim-status, .claim-result, .claim-result *) { color: var(--v-text-2) !important; -webkit-text-fill-color: var(--v-text-2) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .al-odds b { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .al-odds a { color: var(--v-link) !important; -webkit-text-fill-color: var(--v-link) !important; text-decoration-color: var(--v-link-line) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .claim-input { background: var(--v-bg-3) !important; border: 1px solid var(--v-line-2) !important; color: var(--v-text) !important; -webkit-text-fill-color: var(--v-text) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .claim-input::placeholder { color: var(--v-text-3) !important; -webkit-text-fill-color: var(--v-text-3) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .claim-submit {
  background: var(--v-pri-2) !important; background-image: linear-gradient(180deg, var(--v-pri-1), var(--v-pri-2) 55%, var(--v-pri-3)) !important;
  border: 1px solid var(--v-pri-line) !important; color: var(--v-pri-text) !important; -webkit-text-fill-color: var(--v-pri-text) !important;
}
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .claim-result { background: var(--v-bg-3) !important; border-color: var(--v-line) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .al-figs { border-color: var(--v-line) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .al-fig { border-color: var(--v-line) !important; background: transparent !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .al-fig b { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .al-fig :is(span, small) { color: var(--v-text-3) !important; -webkit-text-fill-color: var(--v-text-3) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .al-card { background: var(--v-bg-2) !important; background-image: none !important; border: 1px solid var(--v-line) !important; box-shadow: var(--v-shadow) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .al-card.al-gold { background: var(--v-accent-soft) !important; border-color: var(--v-line-2) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .al-t { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .al-d { color: var(--v-text-2) !important; -webkit-text-fill-color: var(--v-text-2) !important; }
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .al-ic { background: var(--v-bg-3) !important; border-color: var(--v-line) !important; }
html.apex-v3:not(.game-mode) #sp-banner#sp-banner#sp-banner { background: var(--v-bg-2) !important; background-image: none !important; border: 1px solid var(--v-line) !important; box-shadow: var(--v-shadow) !important; }
html.apex-v3:not(.game-mode) #sp-banner#sp-banner#sp-banner :is(#sp-banner-text, .sp-text) { color: var(--v-text) !important; -webkit-text-fill-color: var(--v-text) !important; }
html.apex-v3:not(.game-mode) #sp-banner#sp-banner#sp-banner .sp-tag { background: var(--v-accent-soft) !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; border: 1px solid var(--v-line-2) !important; }
html.apex-v3:not(.game-mode) body[data-page="landing"] a.hero-primary-action.hero-primary-action:not(#apex-z):not(#apex-y) {
  background: var(--v-pri-2) !important; background-image: linear-gradient(180deg, var(--v-pri-1), var(--v-pri-2) 55%, var(--v-pri-3)) !important;
  border: 1px solid var(--v-pri-line) !important; color: var(--v-pri-text) !important; -webkit-text-fill-color: var(--v-pri-text) !important;
}
html.apex-v3:not(.game-mode) body[data-page="landing"] a.hero-secondary-action.hero-secondary-action:not(#apex-z):not(#apex-y) {
  background: var(--v-btn-bg) !important; background-image: none !important; border: 1px solid var(--v-btn-line) !important; color: var(--v-btn-text) !important; -webkit-text-fill-color: var(--v-btn-text) !important;
}

/* ═══ v4 fixes (2026-09-14) ═══════════════════════════════════════════════════════════════════════ */
/* Selected state on self-styled toggles (screener timeframe switch .tfsw-b and any button.active). */
html.apex-v3:not(.game-mode) body :is(button.active, .tfsw-b.active, button[aria-pressed="true"]):not(#apex-z):not(#apex-y) {
  background: var(--v-pri-2) !important; background-image: linear-gradient(180deg, var(--v-pri-1), var(--v-pri-2) 55%, var(--v-pri-3)) !important;
  color: var(--v-pri-text) !important; -webkit-text-fill-color: var(--v-pri-text) !important; border-color: var(--v-pri-line) !important;
}
/* Screener live ticker strip: its own dark-blue gradient. */
html.apex-v3:not(.game-mode) body :is(.wt-strip, #wt-strip):not(#apex-z) {
  background: var(--v-bg-2) !important; background-image: none !important; border: 1px solid var(--v-line) !important;
}
/* Citizens hub: the fixed city photo behind the page fades into marble, and dims into onyx. */
html.apex-v3[data-theme="light"]:not(.game-mode) body .city-bg:not(#apex-z) { opacity: .10 !important; filter: sepia(.35) saturate(.7) !important; }
html.apex-v3:not([data-theme="light"]):not(.game-mode) body .city-bg:not(#apex-z) { opacity: .28 !important; filter: grayscale(.6) brightness(.7) !important; }

/* v5: homepage bits that the index.html rules lock with !important (#al-more text fill, the Wall tile's figure span). */
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher #al-more {
  background: var(--v-btn-bg) !important; background-image: none !important; border: 1px dashed var(--v-line-2) !important;
  color: var(--v-text-2) !important; -webkit-text-fill-color: var(--v-text-2) !important;
}
html.apex-v3:not(.game-mode) #apex-launcher#apex-launcher#apex-launcher .al-d span { color: var(--v-text-2) !important; -webkit-text-fill-color: var(--v-text-2) !important; }

/* ═══ GAME MODE on v3 (2026-09-14) ═══════════════════════════════════════════════════════════════════
   game-mode.css keeps its candy-blue look. With the old layers off, pages' own grey text sat on that blue (screener 108,
   citizens 186, tokenomics 56 unreadable). Text, links and page tokens take the game palette; buttons keep game-mode.css,
   and the homepage claim area keeps its own card colours. */
html.apex-v3.game-mode body {
  --text: #FFFFFF !important; --text2: rgba(255,255,255,.86) !important; --text3: rgba(255,255,255,.74) !important;
  --text-2: rgba(255,255,255,.86) !important; --text-3: rgba(255,255,255,.74) !important;
  --bg: #0D47A1 !important; --bg2: #1565C0 !important; --bg3: #1976D2 !important; --bg-1: #1565C0 !important; --bg-2: #1976D2 !important; --bg-3: #1E88E5 !important;
  --line: rgba(255,255,255,.22) !important; --line-2: rgba(255,255,255,.34) !important; --accent: #FFD700 !important;
  --pos: #B9F6CA !important; --neg: #FFCDD2 !important; --up: #B9F6CA !important; --down: #FFCDD2 !important;
  --panel: rgba(21,101,192,.88) !important; --panel-border: rgba(255,255,255,.22) !important;
}
html.apex-v3.game-mode body:not([data-page="landing"]) :is(p, span, div, li, td, th, label, small, em, i, figcaption, blockquote, dd, dt, summary, strong, b, h1, h2, h3, h4, h5, h6):not(#apex-z):not(button *, .btn *, [class*="btn"] *, #apex-launcher *, #apex-mobile-menu *, #apex-nav-bar *, [class*="badge"], [class*="badge"] *) {
  color: #FFFFFF !important; -webkit-text-fill-color: currentColor !important; background-clip: border-box !important;
}
html.apex-v3.game-mode body:not([data-page="landing"]) :is(.muted, .dim, .text-muted, .subtitle, .desc, .hint, .note, small, [class*="-label"], .stat-label):not(#apex-z):not(button *, .btn *, #apex-launcher *) {
  color: rgba(255,255,255,.84) !important;
}
html.apex-v3.game-mode body:not([data-page="landing"]) a:not(.btn):not([class*="btn"]):not([class*="cta"]):not(#apex-z):not(#apex-launcher *, #apex-mobile-menu *, #apex-nav-bar *) {
  color: #FFE57F !important; -webkit-text-fill-color: currentColor !important;
}

/* v8: the homepage keeps its light claim area and sections in game mode, so the white game text skips it (above); the screener timeframe switch reads white on blue. */
html.apex-v3.game-mode body .tfsw-b:not(.active):not(#apex-z) { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }

/* v9: Citizens City 3D view — the fixed ad strip over the map had its own cyan gradient and no surface, so red text sat on the moving map. */
html.apex-v3:not(.game-mode) body #city-sp-banner#city-sp-banner:not(#apex-z) {
  background: color-mix(in srgb, var(--v-bg-2) 92%, transparent) !important; background-image: none !important;
  border: 1px solid var(--v-line) !important; box-shadow: var(--v-shadow) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html.apex-v3:not(.game-mode) body #city-sp-banner#city-sp-banner span:first-child:not(#apex-z) {
  background: var(--v-accent-soft) !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; border: 1px solid var(--v-line-2) !important;
}

/* ═══ v10: fluid pop-ups (2026-09-14, Martin: "windows that zoom in and out when they pop up … everything needs to be fluid") ═══
   A pop-up panel eases in (fade + a small rise and scale); its backdrop fades. CSS animations restart whenever an element
   goes from display:none to shown, so this works for pop-ups opened by toggling display as well as ones created fresh.
   Nothing moves for people who asked their phone for reduced motion. Game mode keeps its own bouncy entrances. */
@keyframes v3PopIn { from { opacity: 0; transform: translateY(10px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes v3FadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html.apex-v3:not(.game-mode) :is(#howto-modal, #faucet-status-modal, #global-wallet-picker, #deposit-modal, .modal-overlay, .modal-backdrop) {
    animation: v3FadeIn .22s ease-out both;
  }
  html.apex-v3:not(.game-mode) :is(#howto-modal > div, #faucet-status-modal > div, #global-wallet-picker > div, #deposit-modal > div,
    .modal-overlay > .modal, .modal-overlay > .modal-content, .modal-overlay > div, .modal-backdrop > div, [role="dialog"]:not(.apex-palette-backdrop):not(#apex-lang-modal) > div:first-child) {
    animation: v3PopIn .28s cubic-bezier(.2,.8,.2,1) both;
    transform-origin: 50% 40%;
  }
  /* The language chooser and the search palette already animate with transitions; give them the same easing. */
  html.apex-v3:not(.game-mode) #apex-lang-modal .lang-modal-box { transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease-out !important; }
  html.apex-v3:not(.game-mode) .apex-palette-backdrop .apex-palette { transition: transform .28s cubic-bezier(.2,.8,.2,1) !important; }
  /* The burger drawer slides with the same curve. */
  html.apex-v3:not(.game-mode) #apex-mobile-menu#apex-mobile-menu { transition: transform .32s cubic-bezier(.2,.8,.2,1) !important; }
  html.apex-v3:not(.game-mode) #apex-mobile-overlay { transition: opacity .25s ease-out, visibility .25s !important; }
  /* Page-to-page cross-fade (browsers with cross-document view transitions). */
  ::view-transition-old(root) { animation-duration: .18s; }
  ::view-transition-new(root) { animation-duration: .22s; }
}

/* v11: the XNT price pill at the bottom writes its value in cyan inline (#00ccff); it follows the theme in every mode
   (game mode on the homepage keeps the light layout, so the game text rule does not reach it). */
html.apex-v3 body #xnt-price-val#xnt-price-val { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }

/* ═══ v12: controls that respond (2026-09-14, "everything needs to be fluid") ═══════════════════════════════════════
   Buttons and links ease their colour changes instead of snapping, and a button presses in a little under the finger.
   Transform only on press (not hover), so nothing jumps around the page. Game mode keeps its own bounces. */
@media (prefers-reduced-motion: no-preference) {
  html.apex-v3:not(.game-mode) body :is(button, .btn, a.btn, a[class*="btn"], [role="button"], input[type="submit"], .al-card, .apex-palette-item, .lang-modal-item) {
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .2s ease, transform .12s ease !important;
  }
  html.apex-v3:not(.game-mode) body :is(button, .btn, a.btn, a[class*="btn"], [role="button"], input[type="submit"], .al-card):not(:disabled):active {
    transform: scale(.97) !important;
  }
  html.apex-v3:not(.game-mode) body a:not([class*="btn"]):not(.btn) { transition: color .16s ease, text-decoration-color .16s ease; }
}
/* Tap highlight: the grey browser flash on phones replaced by the press effect above. */
html.apex-v3 body :is(button, a, [role="button"], .al-card) { -webkit-tap-highlight-color: transparent; }
/* Data strips that can only appear once their data exists (screener live trades, hot from the arena, token of the day,
   the claim card's captcha row): they arrive with a short fade and slide instead of popping in. */
@keyframes v3Reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html.apex-v3:not(.game-mode) body :is(#wt-strip, #arena-hot, #totd-banner, #scr-sp-strip, .turnstile-wrapper iframe) {
    animation: v3Reveal .32s cubic-bezier(.2,.8,.2,1) both;
  }
}

/* v13: #sp-banner is centred with transform: translateX(-50%); an entrance animation ending on transform:none would push it off-centre, so it is not animated. */

/* v14: the homepage P21 lottery section kept its purple-to-orange panels, glow, top line and odds bar in both themes. */
html.apex-v3:not(.game-mode) body :is(.p21-card, #p21-announce):not(#apex-z) {
  background-image: none !important; background-color: var(--v-bg-2) !important;
  border-color: var(--v-line) !important; box-shadow: var(--v-shadow) !important;
}
html.apex-v3:not(.game-mode) body :is(#p21-announce, #p21-live-value):not(#apex-z) { background-image: none !important; background-color: var(--v-bg-3) !important; border-color: var(--v-line) !important; }
/* P21 info panels on pages without light-mode.css (/stack/, 2026-09-15 sweep): the 20% black fill turned grey on ivory and
   the label read 3.27:1. Raised ivory ground in light; labels in the secondary ink (6.6:1). */
html.apex-v3:not(.game-mode)[data-theme="light"] body :is(.p21-info-item, .p21-section):not(#apex-z) { background-image: none !important; background-color: var(--v-bg-3) !important; border-color: var(--v-line) !important; }
html.apex-v3:not(.game-mode)[data-theme="light"] body .p21-info-label:not(#apex-z) { color: var(--v-text-2) !important; -webkit-text-fill-color: var(--v-text-2) !important; }
html.apex-v3:not(.game-mode) body :is(.p21-card, #p21-announce)::before { background: linear-gradient(90deg, var(--v-pri-1), var(--v-pri-3)) !important; }
html.apex-v3:not(.game-mode) body .p21-odds-fill:not(#apex-z) { background: linear-gradient(90deg, var(--v-pri-1), var(--v-pri-3)) !important; }
html.apex-v3:not(.game-mode) body .p21-token-glow:not(#apex-z) { background: radial-gradient(circle, var(--v-accent-soft) 0%, transparent 70%) !important; }

/* ═══ v15: palette sweep (2026-09-14) ═══════════════════════════════════════════════════════════════════
   An off-palette audit of the 40 busiest pages found 117 decorations still painted purple, pink, cyan, mint or green:
   live dots, floating orbs and auroras, rainbow accent lines on cards, glowing badges, mint call-to-action buttons.
   Light is ivory / gold / silver / rose and dark is onyx / red, so they follow the theme here. Information that IS
   colour (map legend swatches, token logos, the launchpad machine art, charts) is deliberately left alone.
   Game mode keeps its own candy colours. */

/* Live / status dots */
html.apex-v3:not(.game-mode) body :is(.live-dot, .cl-dot, #pulse-dot, .pulse-dot, .tk-live-dot, #conn-dot.online, .sb-dot, .intro-level-dot,
  .ai-badge-dot, span.dot, .vision-dot, #conn-dot):not(#apex-z) {
  background: var(--v-accent) !important; background-image: none !important; box-shadow: 0 0 8px var(--v-accent-soft) !important;
}
html.apex-v3:not(.game-mode) body :is(.wt-label, span.live)::before { background: var(--v-accent) !important; box-shadow: 0 0 6px var(--v-accent-soft) !important; }
/* /agents/: lime card underline */
html.apex-v3:not(.game-mode) body .card::after { background: var(--v-line-2) !important; background-image: none !important; box-shadow: none !important; }

/* Decorative orbs and auroras: a soft theme glow; full-page coloured backdrops removed */
html.apex-v3:not(.game-mode) body :is(.floating-orb, .aurora-orb, .glow-orb, [class*="organic-arena-"]):not(#apex-z) {
  background: radial-gradient(circle, var(--v-accent-soft) 0%, transparent 70%) !important; box-shadow: none !important;
}
html.apex-v3:not(.game-mode) body :is(.party-bg, .bg-gradient, .bg-base, .aurora-layer, .aurora):not(#apex-z) { background: none !important; }
html.apex-v3:not(.game-mode) body .purple-bg::before, html.apex-v3:not(.game-mode) body .purple-bg::after { background: none !important; }

/* Rainbow accent lines and rings drawn with ::before / ::after */
html.apex-v3:not(.game-mode) body :is(.stat-card, .swap-card, .mode-toggle, .sn-card, .category-header, .step, .vision-timeline, .cd-card, .citizen-card,
  .dash-stats, .tier-card, .game-card, .glass-card, .section-title, .connect-prompt, section.reveal)::before,
html.apex-v3:not(.game-mode) body :is(.stat-card, .sn-card, .category-header, .citizen-card, .glass-card, .section-title, .connect-prompt, .drip)::after {
  background: var(--v-line-2) !important; background-image: none !important; box-shadow: none !important; opacity: .7 !important;
}
html.apex-v3:not(.game-mode) body .mode-toggle::before { background: transparent !important; }
html.apex-v3:not(.game-mode) body #portfolio-toggle::before { background: conic-gradient(var(--v-pri-1), var(--v-pri-3), var(--v-pri-1)) !important; }

/* Tinted icons, glowing badges and toasts */
html.apex-v3:not(.game-mode) body .stat-icon:not(#apex-z) { background: var(--v-bg-3) !important; background-image: none !important; box-shadow: none !important; }
html.apex-v3:not(.game-mode) body :is(.token-badge, #textBox, #apex-ai-badge, .whale-toast, a.h.sale):not(#apex-z) { box-shadow: none !important; }
html.apex-v3:not(.game-mode) body .whale-toast:not(#apex-z) { background: var(--v-bg-2) !important; background-image: none !important; border: 1px solid var(--v-line-2) !important; }
html.apex-v3:not(.game-mode) body :is(.hero-tag, .infused-tag, .sn-status-new, .tk-shield-num, span.live):not(#apex-z) {
  background: var(--v-accent-soft) !important; background-image: none !important; box-shadow: none !important;
  color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; border-color: var(--v-line-2) !important;
}

/* Bars and selectors */
html.apex-v3:not(.game-mode) body :is(.supply-bar-fill, #reading-progress, #toggleSlider):not(#apex-z) {
  background: linear-gradient(90deg, var(--v-pri-1), var(--v-pri-3)) !important; box-shadow: none !important;
}

/* Buys keep a readable difference from sells, in the theme's gain colour */
html.apex-v3:not(.game-mode) body :is(.ticker-tag.buy, .wt-side-buy):not(#apex-z) {
  background: color-mix(in srgb, var(--v-pos) 16%, transparent) !important; color: var(--v-pos) !important; -webkit-text-fill-color: var(--v-pos) !important;
}

/* Call-to-action links styled by id or class in page CSS (3D city, house list, screener trade) */
html.apex-v3:not(.game-mode) body :is(#cs-cta, #panel-claim, #d-trade, a.go, span.h-p):not(#apex-z):not(#apex-y) {
  background: var(--v-pri-2) !important; background-image: linear-gradient(180deg, var(--v-pri-1), var(--v-pri-2) 55%, var(--v-pri-3)) !important;
  color: var(--v-pri-text) !important; -webkit-text-fill-color: var(--v-pri-text) !important; border-color: var(--v-pri-line) !important; box-shadow: none !important;
}

/* Gradient text (headings and figures painted with background-clip) */
html.apex-v3:not(.game-mode) body :is(.apex-shimmer, .reserve-value, #priceMega, .purple-bg .title):not(#apex-z) {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important;
}

/* Skip link (off screen until focused) */
html.apex-v3 body a.skip-to-content:not(#apex-z) { background: var(--v-pri-2) !important; color: var(--v-pri-text) !important; -webkit-text-fill-color: var(--v-pri-text) !important; }

/* ═══ v16: last off-palette corners (2026-09-14) ═════════════════════════════════════════════════════════════════════
   Second palette audit plus phone screenshots: the swap mode bar still sat on its page's purple surface, the screener's
   APEX-1 card was cyan glass, the social toast, arrow and wave were pink, the citizens page kept cyan card lines, violet
   cards and a purple/green dot, page crowns were rainbow text, and the homepage "Cathedral" links were lavender, cyan,
   mint and pink. The 3D city's floating building labels become the theme's ink on dark glass. */

/* Swap / liquidity / pools switch */
html.apex-v3:not(.game-mode) body .mode-toggle:not(#apex-z) { background: var(--v-bg-2) !important; border-color: var(--v-line-2) !important; box-shadow: none !important; }
html.apex-v3:not(.game-mode) body .toggle-option:not(#apex-z) { color: var(--v-text-2) !important; -webkit-text-fill-color: var(--v-text-2) !important; text-shadow: none !important; }
html.apex-v3:not(.game-mode) body .toggle-option.active:not(#apex-z) { color: var(--v-pri-text) !important; -webkit-text-fill-color: var(--v-pri-text) !important; }

/* Screener APEX-1 card */
html.apex-v3:not(.game-mode) body #mission#mission { background: var(--v-bg-2) !important; background-image: none !important; border-color: var(--v-line-2) !important; box-shadow: 0 8px 30px rgba(0,0,0,.18) !important; }
html.apex-v3:not(.game-mode) body #mission #mission-header { border-bottom-color: var(--v-line) !important; }
html.apex-v3:not(.game-mode) body #mission .m-logo { background: radial-gradient(circle, var(--v-pri-1) 0%, var(--v-pri-2) 55%, var(--v-pri-3) 100%) !important; box-shadow: 0 0 8px var(--v-accent-soft) !important; }
html.apex-v3:not(.game-mode) body #mission :is(.m-title, .m-cell-v):not(#apex-z) { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) body #mission :is(.m-sub, .m-cell-l, .m-cell-sub, .m-log-l, .m-log):not(#apex-z) { color: var(--v-text-2) !important; -webkit-text-fill-color: var(--v-text-2) !important; }
html.apex-v3:not(.game-mode) body #mission :is(.m-cell, .m-log):not(#apex-z) { background: var(--v-bg-3) !important; border-color: var(--v-line) !important; }
html.apex-v3:not(.game-mode) body #mission #mission-toggle:not(#apex-z) { background: var(--v-bg-3) !important; border-color: var(--v-line-2) !important; color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) body #mission #mission-starfield { opacity: .22 !important; filter: grayscale(1) !important; }

/* Social */
html.apex-v3:not(.game-mode) body .social-toast:not(#apex-z) { background: var(--v-bg-2) !important; border-color: var(--v-line-2) !important; box-shadow: 0 8px 26px rgba(0,0,0,.2) !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) body :is(.pill-green, .pill-pink, .pill-teal):not(#apex-z) { background: var(--v-accent-soft) !important; border-color: var(--v-line-2) !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) body .scroll-hint svg { stroke: var(--v-accent) !important; }
html.apex-v3:not(.game-mode) body .wavy-divider { filter: grayscale(1) sepia(1) saturate(1.6) hue-rotate(-12deg) opacity(.55); }
html.apex-v3:not(.game-mode):not([data-theme="light"]) body .wavy-divider { filter: grayscale(1) sepia(1) saturate(5) hue-rotate(-45deg) opacity(.5); }

/* Citizens: card surfaces, card top lines and small status dots */
html.apex-v3:not(.game-mode) body :is(.how-card, .bb-card):not(#apex-z) { background: var(--v-bg-2) !important; background-image: none !important; border-color: var(--v-line) !important; }
html.apex-v3:not(.game-mode) body :is(.how-card, .bb-card)::before { background: linear-gradient(90deg, transparent, var(--v-accent), transparent) !important; }
html.apex-v3:not(.game-mode) body :is(.cc-quick-dot.new, .feed-live-dot):not(#apex-z) { background: var(--v-accent) !important; box-shadow: 0 0 6px var(--v-accent-soft) !important; }
html.apex-v3:not(.game-mode) body .feed-live-dot::after { border-color: var(--v-accent) !important; opacity: .45; }

/* Rainbow crown text (observe, purple paper) */
html.apex-v3:not(.game-mode) body :is(.crown, .header .title):not(#apex-z) {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; text-shadow: none !important; animation: none !important;
}

/* Inline-painted panels and links (guardians callout, homepage Cathedral strip) */
html.apex-v3:not(.game-mode) body :is(div[style*="rgba(16,185,129,0.15)"], a[style*="rgba(155,140,255,0.06)"], a[style*="rgba(62,232,255,0.06)"], a[style*="rgba(62,255,122,0.06)"], a[style*="rgba(255,62,200,0.06)"], a[style*="rgba(255,92,122,0.06)"], a[style*="rgba(0,255,255,0.05)"]):not(#apex-z) {
  background: var(--v-bg-2) !important; background-image: none !important; border-color: var(--v-line-2) !important;
}
html.apex-v3:not(.game-mode) body a[style*="border-radius:12px"] span[style*="padding:1px 5px"]:not(#apex-z) {
  background: var(--v-accent-soft) !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; border: 1px solid var(--v-line-2) !important;
}

/* 3D city floating building labels: cyan hologram → the theme's ink on dark glass, corner brackets kept */
/* Label ink on the dark glass: pale gold in light mode, the bright heading red in dark mode (garnet alone is unreadable there). */
html.apex-v3 { --v-holo-ink: #F1DB93; --v-holo-edge: #D4AF37; }
html.apex-v3:not([data-theme="light"]) { --v-holo-ink: #F26B71; --v-holo-edge: #C0393F; }
html.apex-v3:not(.game-mode) body .holo-tag:not(#apex-z) {
  color: var(--v-holo-ink) !important; background: linear-gradient(180deg, rgba(20,14,10,.55), rgba(12,8,6,.66)) !important;
  border-color: color-mix(in srgb, var(--v-holo-edge) 55%, transparent) !important; box-shadow: 0 0 12px rgba(0,0,0,.25) !important; text-shadow: none !important;
}
html.apex-v3:not(.game-mode) body .holo-tag::before {
  background:
    linear-gradient(var(--v-holo-edge), var(--v-holo-edge)) 0 0/7px 1px no-repeat, linear-gradient(var(--v-holo-edge), var(--v-holo-edge)) 0 0/1px 7px no-repeat,
    linear-gradient(var(--v-holo-edge), var(--v-holo-edge)) 100% 0/7px 1px no-repeat, linear-gradient(var(--v-holo-edge), var(--v-holo-edge)) 100% 0/1px 7px no-repeat,
    linear-gradient(var(--v-holo-edge), var(--v-holo-edge)) 0 100%/7px 1px no-repeat, linear-gradient(var(--v-holo-edge), var(--v-holo-edge)) 0 100%/1px 7px no-repeat,
    linear-gradient(var(--v-holo-edge), var(--v-holo-edge)) 100% 100%/7px 1px no-repeat, linear-gradient(var(--v-holo-edge), var(--v-holo-edge)) 100% 100%/1px 7px no-repeat !important;
  opacity: .9 !important;
}
html.apex-v3:not(.game-mode) body .holo-tag b { color: var(--v-holo-ink) !important; text-shadow: none !important; }
html.apex-v3:not(.game-mode) body .holo-sub { color: color-mix(in srgb, var(--v-holo-ink) 78%, #9a9a9a) !important; }
html.apex-v3:not(.game-mode) body .holo-tag::after { background: linear-gradient(180deg, transparent, rgba(255,255,255,.06), transparent) !important; }
html.apex-v3:not(.game-mode) body .holo-stem { background: linear-gradient(180deg, var(--v-holo-edge), transparent) !important; }

/* ═══ v17: the P21 announcement card (2026-09-14) ════════════════════════════════════════════════════════════════════
   p21-announcement.html brings its own purple and orange light: a glow round the card, a purple halo behind the die and
   the arrow, an orange halo on the token, a red NEW badge with a pulsing ring, and white sparkles. They follow the theme.
   homepage-premium.css already stops the die shaking; this only changes colour. */
html.apex-v3:not(.game-mode) body .p21-announce:not(#apex-z) { box-shadow: var(--v-shadow) !important; }
html.apex-v3:not(.game-mode) body .dice-face:not(#apex-z) { filter: drop-shadow(0 0 8px var(--v-accent-soft)) !important; }
html.apex-v3:not(.game-mode) body .p21-arrow-bounce:not(#apex-z) { color: var(--v-accent) !important; -webkit-text-fill-color: var(--v-accent) !important; text-shadow: none !important; }
html.apex-v3:not(.game-mode) body .p21-token-img:not(#apex-z) { box-shadow: 0 0 14px var(--v-accent-soft) !important; }
html.apex-v3:not(.game-mode) body .p21-announce-badge:not(#apex-z) {
  background: var(--v-pri-2) !important; background-image: linear-gradient(135deg, var(--v-pri-1), var(--v-pri-3)) !important;
  color: var(--v-pri-text) !important; -webkit-text-fill-color: var(--v-pri-text) !important; box-shadow: none !important; border: 1px solid var(--v-pri-line) !important;
}
html.apex-v3:not(.game-mode) body .p21-sparkle:not(#apex-z) { background: var(--v-accent) !important; }
/* P21 draw result: a win reads in the theme's gain colour, a miss in the secondary ink; no coloured halo. */
html.apex-v3:not(.game-mode) body .p21-lottery-result.win:not(#apex-z) { color: var(--v-pos) !important; -webkit-text-fill-color: var(--v-pos) !important; text-shadow: none !important; }
html.apex-v3:not(.game-mode) body .p21-lottery-result.lose:not(#apex-z) { color: var(--v-text-2) !important; -webkit-text-fill-color: var(--v-text-2) !important; text-shadow: none !important; }

/* ═══ v18: hover glows set from inline handlers (2026-09-14) ═════════════════════════════════════════════════════════
   The homepage discovery links set a coloured box-shadow from onmouseover (cyan, lavender, pink). A stylesheet
   !important beats a script-set inline style, so hover keeps the theme's quiet lift instead. */
html.apex-v3:not(.game-mode) body :is(a[style*="rgba(155,140,255,0.06)"], a[style*="rgba(62,232,255,0.06)"], a[style*="rgba(62,255,122,0.06)"], a[style*="rgba(255,62,200,0.06)"], a[style*="rgba(255,92,122,0.06)"], a[style*="rgba(0,255,255,0.05)"]):not(#apex-z) {
  box-shadow: none !important;
}
@media (hover: hover) {
  html.apex-v3:not(.game-mode) body :is(a[style*="rgba(155,140,255,0.06)"], a[style*="rgba(62,232,255,0.06)"], a[style*="rgba(62,255,122,0.06)"], a[style*="rgba(255,62,200,0.06)"], a[style*="rgba(255,92,122,0.06)"], a[style*="rgba(0,255,255,0.05)"]):hover:not(#apex-z) {
    box-shadow: var(--v-shadow) !important; border-color: var(--v-accent) !important;
  }
}

/* Full-site audit: price pill glow (capy cinema) and purple card lines (time capsule) */
html.apex-v3:not(.game-mode) body .change-pill:not(#apex-z) { box-shadow: none !important; }
html.apex-v3:not(.game-mode) body :is(.seal-form, .cap-card)::before,
html.apex-v3:not(.game-mode) body :is(.seal-form, .cap-card)::after { background: linear-gradient(90deg, transparent, var(--v-accent), transparent) !important; }

/* Full-site audit: /agents/ code-window dots (lime) */
html.apex-v3:not(.game-mode) body .top > i:empty:not(#apex-z) { background: var(--v-line-2) !important; box-shadow: none !important; }
/* Full-site audit: /capyspin/ purple badge, claim card, rainbow section titles, notice strip */
html.apex-v3:not(.game-mode) body .hero .badge:not(#apex-z) { background: var(--v-accent-soft) !important; border-color: var(--v-line-2) !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; text-shadow: none !important; box-shadow: none !important; }
html.apex-v3:not(.game-mode) body:not([data-page="landing"]) .claim-card:not(#apex-z) { background: var(--v-bg-2) !important; background-image: none !important; border-color: var(--v-line-2) !important; box-shadow: var(--v-shadow) !important; }
/* section-title is on 14 pages; only the ink is set, so a solid fill covers capyspin's rainbow clip without touching other pages' backgrounds */
html.apex-v3:not(.game-mode) body .section-title:not(#apex-z) { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) body div[style*="background:#2a1030"]:not(#apex-z) { background: var(--v-bg-3) !important; border-bottom-color: var(--v-line-2) !important; color: var(--v-text) !important; }

/* Full-site audit: coloured hairlines along the top of cards (bank reserve cards, decode box, echo-hunt clues) */
html.apex-v3:not(.game-mode) body :is(.rc, .decode-box, .clue-card):not(#apex-z)::before { background: linear-gradient(90deg, transparent, var(--v-accent), transparent) !important; box-shadow: none !important; }
/* Small status marks: chain badge dot, ended live badge glow */
html.apex-v3:not(.game-mode) body .chain-badge:not(#apex-z)::before { background: var(--v-accent) !important; box-shadow: none !important; }
html.apex-v3:not(.game-mode) body .live-badge:not(#apex-z) { box-shadow: none !important; }
/* Live dots in the casino / eigenspace banners and feed headers (v15 covered span.dot only). Not every .dot: on /citizens/skyline/
   the dot's colour IS the status (ok / loading / error) and stays. Also the embassy and register forms' top line. */
html.apex-v3:not(.game-mode) body :is(.live-banner, .feed-header) .dot:not(#apex-z) { background: var(--v-accent) !important; box-shadow: 0 0 6px var(--v-accent-soft) !important; }
html.apex-v3:not(.game-mode) body .reg-form:not(#apex-z)::before { background: linear-gradient(90deg, transparent, var(--v-accent), transparent) !important; }

/* Full-site audit, city pages: coloured hairlines on eigenspace player/rule cards, casino rule cards, foodtruck and
   seafood cards, health treasury — every rule for these classes is a 1–3px top line, so the theme accent replaces it. */
html.apex-v3:not(.game-mode) body :is(.player-card, .rule-card, .truck-card, .menu-card, .treasury):not(#apex-z)::before {
  background: linear-gradient(90deg, transparent, var(--v-accent), transparent) !important; box-shadow: none !important;
}
/* Eigenspace / casino live banner border */
html.apex-v3:not(.game-mode) body .live-banner:not(#apex-z) { border-color: var(--v-line-2) !important; }
/* Flux total: green-to-gold gradient text → solid heading ink */
html.apex-v3:not(.game-mode) body .total-val:not(#apex-z) { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
/* Earn page: the selected term keeps its border and tint; only the green glow follows the theme */
html.apex-v3:not(.game-mode) body .term.selected:not(#apex-z) { box-shadow: 0 0 18px var(--v-accent-soft) !important; border-color: var(--v-accent) !important; }
/* Forge pages: live pulse dot in the hero */
html.apex-v3:not(.game-mode) body .hero .pulse:not(#apex-z) { background: var(--v-accent) !important; box-shadow: 0 0 10px var(--v-accent-soft) !important; }
/* City page backdrops (.bg on 22 pages, e.g. deputize's green radial ending in near-black): a soft theme glow that fades
   to transparent, so the page's own ground shows in both themes. */
html.apex-v3:not(.game-mode) body > .bg:not(#apex-z) { background: radial-gradient(ellipse at 50% 0%, var(--v-accent-soft) 0%, transparent 70%) !important; }

/* Full-site audit, more city pages: lottery draw card and marketplace / sentinel service cards (top lines) */
html.apex-v3:not(.game-mode) body :is(.draw-card, .svc-card):not(#apex-z)::before {
  background: linear-gradient(90deg, transparent, var(--v-accent), transparent) !important; box-shadow: none !important;
}
/* Receipts timeline spine (green-cyan-purple) and proof-stats section header line */
html.apex-v3:not(.game-mode) body .timeline:not(#apex-z)::before { background: linear-gradient(to bottom, var(--v-pri-2), var(--v-line-2)) !important; }
html.apex-v3:not(.game-mode) body .sec-head:not(#apex-z)::after { background: linear-gradient(90deg, var(--v-line-2), transparent) !important; }
/* Portfolio net value: gradient text → heading ink; proof-stats holder share bars: one colour, width is the value */
html.apex-v3:not(.game-mode) body .nav-val:not(#apex-z) { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) body .pct-bar:not(#apex-z) { background: var(--v-pri-2) !important; }
/* "Now" page filter chips: the active one stays clearly marked, in the theme's colours */
html.apex-v3:not(.game-mode) body .chip.active:not(#apex-z) { background: var(--v-accent-soft) !important; border-color: var(--v-accent) !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; box-shadow: none !important; }

/* Register step cards and seafood buffs bar: 1px top lines */
html.apex-v3:not(.game-mode) body :is(.step-card, .buffs-bar):not(#apex-z)::before {
  background: linear-gradient(90deg, transparent, var(--v-accent), transparent) !important;
}
/* Seafood stock bars: normal stock in the theme's gold; the orange .low warning keeps its own colour (it is the message) */
html.apex-v3:not(.game-mode) body .stock-bar-fill:not(.low):not(#apex-z) { background: linear-gradient(90deg, var(--v-pri-1), var(--v-pri-3)) !important; }

/* Seasons: thin vertical divider after each past-season number */
html.apex-v3:not(.game-mode) body .past-num:not(#apex-z)::after { background: linear-gradient(transparent, var(--v-line-2), transparent) !important; }
/* Scroll archive: decorative red/yellow/green window buttons on the terminal panel → neutral theme dots, as on /agents/ */
html.apex-v3:not(.game-mode) body .terminal-dot:not(#apex-z) { background: var(--v-line-2) !important; }

/* City treasury cards: 1px cyan top line. Scoped to the .pw page wrapper — .card::before elsewhere is a gold frame
   (oracle) or a soft gold wash (token scan) and must not become a line. */
html.apex-v3:not(.game-mode) body .pw .card:not(#apex-z)::before { background: linear-gradient(90deg, transparent, var(--v-accent), transparent) !important; }
/* XP page progress bar: one colour, the width is the value */
html.apex-v3:not(.game-mode) body .me-bar-fill:not(#apex-z) { background: linear-gradient(90deg, var(--v-pri-1), var(--v-pri-3)) !important; }

/* Drip vault: the "Tier 1" pill was a fixed cyan tint (no per-tier colour) → theme badge. Scoped by its id. */
html.apex-v3:not(.game-mode) body #current-tier.tier-info { background: var(--v-accent-soft) !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; border: 1px solid var(--v-line-2) !important; }

/* Fasting page (wf- classes exist only there): cyan card top lines and section-title rule */
html.apex-v3:not(.game-mode) body .wf-card:not(#apex-z)::before { background: linear-gradient(90deg, transparent, var(--v-accent), transparent) !important; }
html.apex-v3:not(.game-mode) body .wf-section-title:not(#apex-z)::after { background: linear-gradient(90deg, var(--v-line-2), transparent) !important; }
/* Help, docs, healing: blurred floating glows (cyan / purple / green) → one soft theme glow */
html.apex-v3:not(.game-mode) body .ambient-glow:not(#apex-z) { background: radial-gradient(circle, var(--v-accent-soft) 0%, transparent 70%) !important; }
/* Help page list bullets */
html.apex-v3:not(.game-mode) body .card-body ul li:not(#apex-z)::before { background: var(--v-accent) !important; }

/* Journey: light-blue glow inside the Continue button → the theme's soft glow (any press animation is kept) */
html.apex-v3:not(.game-mode) body #continue-btn::before { background: radial-gradient(circle, var(--v-accent-soft) 0%, transparent 70%) !important; }

/* NFT AMM create: the active tab stays clearly marked, in theme colours (was purple fill, ink, border and glow) */
html.apex-v3:not(.game-mode) body .tabs > .tab.active:not(#apex-z) { background: var(--v-accent-soft) !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; border-color: var(--v-accent) !important; box-shadow: none !important; }
/* NFT AMM: gradient brand tile behind the page icon */
html.apex-v3:not(.game-mode) body .brand-icon:not(#apex-z) { background: var(--v-accent-soft) !important; background-image: none !important; box-shadow: none !important; }
/* P21 page: vault progress bar — one colour, the width is the value */
html.apex-v3:not(.game-mode) body #p21-vault-fill { background: linear-gradient(90deg, var(--v-pri-1), var(--v-pri-3)) !important; }

/* /p21/ page (these p21-* classes exist only there): purple and purple→orange everywhere */
html.apex-v3:not(.game-mode) body .p21-hero-logo:not(#apex-z) { box-shadow: 0 0 36px var(--v-accent-soft) !important; }
html.apex-v3:not(.game-mode) body .p21-hero h1:not(#apex-z) { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) body :is(.p21-gcard-value.purple, .p21-tier-val.purple, .p21-contract-addr):not(#apex-z) { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) body .p21-gcard.highlight-purple:not(#apex-z) { background: var(--v-accent-soft) !important; background-image: none !important; border-color: var(--v-line-2) !important; }
html.apex-v3:not(.game-mode) body :is(.p21-gcard, .p21-how-step):hover:not(#apex-z) { border-color: var(--v-accent) !important; }
html.apex-v3:not(.game-mode) body .p21-step-num:not(#apex-z) { color: var(--v-line-2) !important; -webkit-text-fill-color: var(--v-line-2) !important; }
html.apex-v3:not(.game-mode) body .p21-tier-row.header:not(#apex-z) { border-bottom-color: var(--v-line) !important; }
/* Aura bonus box and its title (inline styles) */
html.apex-v3:not(.game-mode) body div[style*="background:rgba(168,85,247,0.08)"]:not(#apex-z) { background: var(--v-bg-3) !important; border-color: var(--v-line-2) !important; }
html.apex-v3:not(.game-mode) body div[style*="color:#a855f7"]:not(#apex-z) { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
/* "Buy P21" call to action (inline purple→orange gradient) → the theme's primary button */
html.apex-v3:not(.game-mode) body a[style*="linear-gradient(135deg,#a855f7,#ff6b35)"]:not(#apex-z) {
  background: var(--v-pri-2) !important; background-image: linear-gradient(180deg, var(--v-pri-1), var(--v-pri-2) 55%, var(--v-pri-3)) !important;
  color: var(--v-pri-text) !important; -webkit-text-fill-color: var(--v-pri-text) !important; border: 1px solid var(--v-pri-line) !important; box-shadow: none !important;
}

/* X1 health page (scoped by its #epoch field): sky-blue/violet gradient headline, blue section heads and links, meter bars */
html.apex-v3:not(.game-mode) body .bar > i { background: linear-gradient(90deg, var(--v-pri-1), var(--v-pri-3)) !important; }
html.apex-v3:not(.game-mode) body:has(#epoch) .wrap h1 { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) body:has(#epoch) .wrap :is(h2, .more a) { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) body:has(#epoch) :is(.q:hover, .q[aria-expanded="true"], .links a:hover) { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; border-color: var(--v-accent) !important; }

/* ═══ v20: follow-ups from the v19 screenshots (2026-09-14) ══════════════════════════════════════════════════════════
   /p21/ vault and distributed cards were green-tinted with green figures — amounts, not gains, so they follow the theme
   like the purple highlight cards. /nft-amm/create/ "Creator Studio" label is a full-width block, so the badge fill v15
   gives .hero-tag stretched into a flat band there; on that page it stays a plain label. */
html.apex-v3:not(.game-mode) body .p21-gcard.highlight-green:not(#apex-z) { background: var(--v-accent-soft) !important; background-image: none !important; border-color: var(--v-line-2) !important; }
html.apex-v3:not(.game-mode) body .p21-gcard-value.green:not(#apex-z) { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) body:has(.tab[data-tab="mint"]) div.hero-tag:not(#apex-z) { background: none !important; border: 0 !important; color: var(--v-text-2) !important; -webkit-text-fill-color: var(--v-text-2) !important; }

/* ═══ v21: help page step numbers (2026-09-14) ═══════════════════════════════════════════════════════════════════════
   The re-audit after v19 found the numbered steps on /help/ still drawn as cyan→purple bubbles, and the inline code
   chips there are cyan-tinted with cyan ink. Both follow the theme; the step number stays readable on its bubble. */
html.apex-v3:not(.game-mode) body .card-body ol li:not(#apex-z)::before {
  background: linear-gradient(180deg, var(--v-pri-1), var(--v-pri-2) 55%, var(--v-pri-3)) !important;
  color: var(--v-pri-text) !important; -webkit-text-fill-color: var(--v-pri-text) !important;
}
html.apex-v3:not(.game-mode) body .card-body code:not(#apex-z) { background: var(--v-bg-3) !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }

/* ═══ v22: last audit leftovers (2026-09-14) ═════════════════════════════════════════════════════════════════════════
   The re-audit after v19 still found three decorations. Two were inline-styled links whose v19 rule matched the style
   text — in light mode the ink engine re-serialises that attribute, so they are targeted by their link instead (each
   href exists on one page only). The seasons epoch card keeps gold/purple edge lines. */

/* /p21/ "Buy P21" call to action → the theme's primary button */
html.apex-v3:not(.game-mode) body a[href="/swap/?token=7uRf3kkXQ9ycWsfRezMLnqnNS37gqzTKxPNHAhtzgczU"]:not(#apex-z) {
  background: var(--v-pri-2) !important; background-image: linear-gradient(180deg, var(--v-pri-1), var(--v-pri-2) 55%, var(--v-pri-3)) !important;
  color: var(--v-pri-text) !important; -webkit-text-fill-color: var(--v-pri-text) !important; border: 1px solid var(--v-pri-line) !important; box-shadow: none !important;
}
/* /nft-amm/ "Create" link → a quiet theme button */
html.apex-v3:not(.game-mode) body a[href="/nft-amm/create/"]:not(#apex-z) {
  background: var(--v-accent-soft) !important; background-image: none !important; border-color: var(--v-line-2) !important;
  color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; box-shadow: none !important;
}
/* /citizens/seasons/: epoch card edge lines and item card hover line. Scoped to that page — on /citizens/shop/ the
   .item-card line colour is the item's rarity. */
html.apex-v3:not(.game-mode) body :is(.epoch-card):not(#apex-z)::before,
html.apex-v3:not(.game-mode) body :is(.epoch-card):not(#apex-z)::after,
html.apex-v3:not(.game-mode) body:has(#epochCard) .item-card:not(#apex-z)::before {
  background: linear-gradient(90deg, transparent, var(--v-accent), transparent) !important;
}

/* ═══ v23: seasons epoch card (2026-09-14) ═══════════════════════════════════════════════════════════════════════════
   After v22 the card's edge lines were right, but in dark mode it still sat on a purple-tinted near-black panel with a
   gold border, a rotating gold shine inside the "Buy epoch pass" button, a gold glow on the title and purple stat
   numbers. The dark surface pass only tags bright panels, so this dark purple one was never picked up. Everything is
   scoped to the seasons page (#epochCard): .sn and .pass-btn are generic names. */
html.apex-v3:not(.game-mode) body:has(#epochCard) .epoch-card:not(#apex-z) { background: var(--v-bg-2) !important; background-image: none !important; border-color: var(--v-line-2) !important; box-shadow: var(--v-shadow) !important; }
html.apex-v3:not(.game-mode) body:has(#epochCard) .epoch-theme:not(#apex-z) { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; text-shadow: none !important; }
html.apex-v3:not(.game-mode) body:has(#epochCard) .pass-btn:not(#apex-z) { background: var(--v-accent-soft) !important; background-image: none !important; border-color: var(--v-line-2) !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) body:has(#epochCard) .pass-btn:not(#apex-z)::before { background: conic-gradient(transparent, transparent, transparent, var(--v-accent-soft)) !important; }
html.apex-v3:not(.game-mode) body:has(#epochCard) :is(.sn, .sn.g):not(#apex-z) { color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }

/* ═══ v24: city template tokens (2026-09-14) ═════════════════════════════════════════════════════════════════════════
   citizens-theme.css (65 city pages) paints with its own tokens: a purple-black page ground (#07000f), purple-black
   glass panels (rgba(8,0,18,.85)), cyan borders and white/grey text. apex-v3 never remapped them, so in dark mode the
   city pages sat on faintly purple black instead of onyx, with cyan hairline borders. The surfaces, borders, text and
   decorative glows now point at the theme tokens. The --city-neon-* colours are NOT remapped: on some pages they carry
   meaning (gains, rarity tiers, status), and decorative uses were already themed class by class. Game mode keeps the
   original look. */
html.apex-v3:not(.game-mode) {
  --city-bg: var(--v-bg);
  --city-surface: var(--v-bg-2);
  --city-surface-hover: var(--v-bg-3);
  --city-border: var(--v-line);
  --city-border-hover: var(--v-line-2);
  --city-border-active: var(--v-accent);
  --city-text: var(--v-text);
  --city-text-dim: var(--v-text-2);
  --city-text-bright: var(--v-head);
  --city-glow-cyan: 0 0 16px var(--v-accent-soft);
  --city-glow-green: 0 0 16px var(--v-accent-soft);
  --city-glow-purple: 0 0 16px var(--v-accent-soft);
  --city-glow-gold: 0 0 16px var(--v-accent-soft);
}

/* City panels that hardcode the purple-black instead of using the tokens (dark-mode probe 06:25: seasons, casino, bank,
   citizens hub, lottery, marketplace). Scoped to pages with the city backdrop (.city-bg) — .si, .rc, .item-card are
   generic names elsewhere. Light mode already turned these ivory through the surface pass; this gives both themes the
   theme surface. Rarity colours on shop item cards live in ::before and are untouched. */
html.apex-v3:not(.game-mode) body:has(.city-bg) :is(.si, .rc, .dash-stats, .list-box, .pd-row, .agent-table, .item-card, .past-card, .rule-card, .cit-controls):not(#apex-z) {
  background: var(--v-bg-2) !important; background-image: none !important;
}
/* City pulse panel injected by city-pulse.js on city pages */
html.apex-v3:not(.game-mode) body .cp-panel:not(#apex-z) { background: var(--v-bg-2) !important; background-image: none !important; }

/* ═══ v25: last purple-black panels (2026-09-14) ═════════════════════════════════════════════════════════════════════
   The dark-mode tint probe after v24 still found near-black panels with a purple or navy cast on the citizens hub,
   capyspin and the screener token card. They follow the theme surface. */

/* Citizens hub: live figures, "more" button, billboard form */
html.apex-v3:not(.game-mode) body :is(.cl-fig, #cl-more, .bb-form):not(#apex-z) { background: var(--v-bg-2) !important; background-image: none !important; border-color: var(--v-line) !important; }
/* Citizens hub inline-styled panels. Matched by their style text, which only holds in dark mode (the light ink engine
   re-serialises styles; light mode already turns them ivory through the surface pass). */
html.apex-v3:not(.game-mode):not([data-theme="light"]) body :is(div[style*="background:rgba(8,0,18,0.85)"], div[style*="background:rgba(8,0,18,0.7)"], div[style*="background:rgba(8,0,18,0.75)"]):not(#apex-z) {
  background: var(--v-bg-2) !important; border-color: var(--v-line) !important;
}

/* Capyspin: its own --card token (purple-black) and footer. Scoped to non-homepage pages with a .claim-card
   (the homepage claim card is body[data-page="landing"]). */
html.apex-v3:not(.game-mode) body:not([data-page="landing"]):has(.claim-card) { --card: var(--v-bg-2); }
html.apex-v3:not(.game-mode) body:not([data-page="landing"]):has(.claim-card) .site-footer:not(#apex-z) { background: var(--v-bg-2) !important; border-top-color: var(--v-line) !important; }

/* Screener token card tab strip: hardcoded #0b0d1a (dark) / #f6f6f8 (light) with !important */
html.apex-v3:not(.game-mode) body #detail-panel .tk-tabs:not(#apex-z) { background-color: var(--v-bg-2) !important; }

/* "AI Engines" status badge (ai-badge.js, 8 pages): inline purple-black pill with a purple border. Its id is stable, so a
   stylesheet !important overrides the inline style in both themes. */
html.apex-v3:not(.game-mode) body #apex-ai-badge { background: var(--v-bg-2) !important; border-color: var(--v-line-2) !important; color: var(--v-text-2) !important; }

/* "Explore:" link bar (discover.js, 14 pages): inline purple border, purple-black fill, lavender text, and hover handlers
   that write purple back. discover.js now tags the pieces with classes; stylesheet !important beats the inline styles. */
html.apex-v3:not(.game-mode) body a.apex-discover-link { background: var(--v-bg-2) !important; border-color: var(--v-line-2) !important; color: var(--v-head) !important; -webkit-text-fill-color: var(--v-head) !important; }
html.apex-v3:not(.game-mode) body a.apex-discover-link:hover { background: var(--v-accent-soft) !important; border-color: var(--v-accent) !important; }
html.apex-v3:not(.game-mode) body :is(.apex-discover-desc, .apex-discover-label) { color: var(--v-text-2) !important; -webkit-text-fill-color: var(--v-text-2) !important; }

/* Social page bottom-nav half-sheet (mobile-nav.css): purple-black */
html.apex-v3:not(.game-mode) body .apex-bnav-drawer:not(#apex-z) { background: var(--v-bg-2) !important; border-color: var(--v-line) !important; }

/* Citizens hub directory cards: purple hover tint, border and glow */
html.apex-v3:not(.game-mode) body .cd-card:hover:not(#apex-z) { background: var(--v-accent-soft) !important; border-color: var(--v-accent) !important; box-shadow: none !important; }

/* Glass cards (help, healing, tobacco-freedom, social, citizens hub) and the hub's citizen cards / details panels still
   read a purple-black surface in dark mode; they take the theme surface. .citizen-card and details only on city pages. */
html.apex-v3:not(.game-mode) body .glass-card:not(#apex-z) { background: var(--v-bg-2) !important; background-image: none !important; }
html.apex-v3:not(.game-mode) body:has(.city-bg) :is(.citizen-card, details):not(#apex-z) { background: var(--v-bg-2) !important; background-image: none !important; }

/* ═══ v26: citizens hub containers (2026-09-14) ══════════════════════════════════════════════════════════════════════
   After v25 the dark-mode tint probe was clean on every sampled page except the citizens hub: the live-figures box
   itself, the directory cards' resting fill, the registration and protocol boxes and the two feed containers. Plain
   containers, scoped to city pages. */
html.apex-v3:not(.game-mode) body:has(.city-bg) :is(#cl-now, .cd-card, .reg-box, .protocol-box, .feed-container):not(#apex-z) {
  background: var(--v-bg-2) !important; background-image: none !important;
}

/* ═══ v27: onyx pass (2026-09-14) ═════════════════════════════════════════════════════════════════════════════════════
   A full-site dark-mode probe found 59 of 151 pages with near-black panels carrying a purple or navy cast, painted with
   dozens of page-specific colours. nav-v2.js now tags such panels in dark mode with .v3-onyx and stores the panel's own
   alpha in --v3-onyx-a; this repaints only the background colour, as onyx at that alpha, so overlays on the 3D city and
   the race track stay see-through. Gradients, images and canvases are left alone. Light mode is untouched (the surface
   pass already handles it), and so is game mode. */
html.apex-v3:not([data-theme="light"]):not(.game-mode) body .v3-onyx:not(#apex-z) {
  background-color: rgb(20 17 18 / var(--v3-onyx-a, 1)) !important;
}

/* ═══ v28: game-mode menu titles (2026-09-14) ════════════════════════════════════════════════════════════════════════
   With the menu open in game mode, its small section titles (Tokens, Citizens City, Trade & Earn, Play, Tools & More) and
   the Theme / Language / Sound labels were grey #666 on the blue drawer gradient (#1976D2 → #0D47A1): about 1.25–1.50 to 1,
   unreadable. game-mode.css paints the drawer and its white links but had no rule for these. White titles with a soft dark
   shadow read at about 4.6:1 on the lightest blue and far higher lower down. Light and dark mode already recolour these
   through the rules above and are not touched. Id-level selectors so they win over game-mode.css regardless of load order. */
html.game-mode body #apex-mobile-menu#apex-mobile-menu .nav-section {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45) !important; opacity: 1 !important;
}
/* Footer labels are inline color:#666 (Theme: / Language: / Sound:). The ink engine is off in game mode, so the style text
   stays as written and can be matched here. */
html.game-mode body #apex-mobile-menu#apex-mobile-menu span[style*="color:#666"] {
  color: rgba(255, 255, 255, .92) !important; -webkit-text-fill-color: rgba(255, 255, 255, .92) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45) !important;
}

/* ═══ v29: game-mode readability (2026-09-14) ════════════════════════════════════════════════════════════════════════
   A full-site game-mode audit counting only on-screen text found a handful of real low-contrast spots. Game mode paints a blue
   ground and white links, but some pages keep their dark-theme greys, and game-mode.css turns every link cyan — including
   button-links that have their own green or orange background. Each fix is scoped to game mode; light and dark are untouched. */

/* Citizens marketplace: the "XNT" unit under prices (#5a7a5a on blue, 1.79:1) */
html.game-mode body .svc-price-badge .svc-price-unit { color: rgba(255, 255, 255, .82) !important; -webkit-text-fill-color: rgba(255, 255, 255, .82) !important; }

/* Screener: inactive timeframe pills (#6a8296 on blue, 1.44:1); the active pill keeps its own treatment */
html.game-mode body #tfsw-bar .tfsw-b:not(.active), html.game-mode body #tfsw .tfsw-b:not(.active) { color: rgba(255, 255, 255, .85) !important; -webkit-text-fill-color: rgba(255, 255, 255, .85) !important; }
html.game-mode body #tfsw-bar .tfsw-bar-lab { color: rgba(255, 255, 255, .75) !important; -webkit-text-fill-color: rgba(255, 255, 255, .75) !important; }

/* Homepage launcher tiles in game mode use the light layout: the grey sub-line (#7E8791 on ivory, 2.88:1) */
html.game-mode body #apex-launcher#apex-launcher#apex-launcher .al-d { color: #5b4a2a !important; -webkit-text-fill-color: #5b4a2a !important; }

/* Button-links with their own coloured background: game-mode.css makes every link cyan (#40E0FF), which was 1.11:1 on the
   green "Trade CAPY" button (capy-cinema) and 1.49:1 on the orange "Burn to vote" button (ash). Dark ink on those. */
html.game-mode body a.cc-btn.cc-buy, html.game-mode body a.ash-btn.ash-vote-go { color: #10201a !important; -webkit-text-fill-color: #10201a !important; }

/* Citizens hub: the "build your plot · $5" line inside the mint "Enter the 3D city" button (white .84 on mint, 1.37:1) */
html.game-mode body a.cl-btn.cl-go small { color: rgba(0, 45, 35, .85) !important; -webkit-text-fill-color: rgba(0, 45, 35, .85) !important; }

/* Agent trading: code words in the share explainer (purple #a855f7 on a 30% black chip over blue, ~2.2–2.9:1) */
html.game-mode body .share-info code { color: #e9d5ff !important; -webkit-text-fill-color: #e9d5ff !important; }

/* City agent pages (risk, trader, fleet, blacklist): footer line in #667 on the blue ground (1.53:1). Checked by the game-mode
   audit after deploy in case any footer sits on a light panel. */
html.game-mode body footer { color: rgba(255, 255, 255, .78) !important; }

/* Launchpad: the cost line inside the cyan launch button (#888 on #00E5FF→#00B8D4, ~1.6–2.3:1) */
html.game-mode body .action-btn.primary .btn-cost { color: #06343b !important; -webkit-text-fill-color: #06343b !important; }

/* ═══ v30: game-mode leftovers after v29 (2026-09-14) ═══════════════════════════════════════════════════════════════
   Citizens hub: "build your plot · $5" stayed white on the mint "Enter the 3D city" button. The game-mode rule above that turns
   small / label text near-white skips button *, .btn * and #apex-launcher * but not button-like links (.cl-btn), and with two
   id-level parts it outranks both the page's own #cc-launcher .cl-go small rule and v29's. Three ids, the page's own dark teal. */
html.game-mode body #cc-launcher#cc-launcher#cc-launcher a.cl-go small { color: #1f4a3b !important; -webkit-text-fill-color: #1f4a3b !important; }

/* ═══ v31: small leftovers (2026-09-14) ═══════════════════════════════════════════════════════════════════════════════
   Launchpad: the cost line inside the launch button ("0.05 XNT + 25 APEX") is set to 0.35rem (5.6 px), 0.38rem on phones —
   a price nobody can read, in every theme. Readable size; colours stay as each theme sets them. */
html.apex-v3 body .action-btn .btn-cost:not(#apex-z) { font-size: 0.66rem !important; line-height: 1.25 !important; margin-top: 3px !important; }

/* Oracle footer quote: silver italic on the game-mode blue is faint. Near-white with a soft shadow, game mode only. */
html.game-mode body .foot .quote:not(#apex-z) { color: rgba(255, 255, 255, .88) !important; -webkit-text-fill-color: rgba(255, 255, 255, .88) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .4) !important; }

/* ═══ v32: game mode on the city page + citizens launcher text (2026-09-14) ═══════════════════════════════════════════════
   City page: game-mode.css gives every <button> 10px 20px padding and a cyan gradient. The list panel's close button is 44 px
   wide, so its "×" had 0 px of room and did not show — the list was hard to close. The header buttons (+ Build, Street,
   Bird view) got 14 px display type with that padding and wrapped to different heights. */
html.game-mode body #panel-close#panel-close {
  padding: 0 !important; width: 44px !important; height: 44px !important; line-height: 42px !important;
  font: 700 26px/42px Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  background: rgba(8, 28, 64, .72) !important; border: 1.5px solid rgba(255, 255, 255, .55) !important;
  border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .35) !important; transform: none !important;
}
html.game-mode body .hdr-btn:not(#apex-z) {
  padding: 0 10px !important; height: 38px !important; min-height: 0 !important; line-height: 1 !important;
  font-size: 11px !important; letter-spacing: .5px !important; white-space: nowrap !important;
  border-radius: 10px !important; box-shadow: 0 3px 0 #00838F, 0 4px 8px rgba(0, 0, 0, .2) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}

/* Citizens hub: the second line on the two big buttons ("build your plot · $5", "visit free · 0.1 XNT to stay") was 11 px
   regular — thin and hard to read on a phone. Larger and bold in every theme; each theme keeps its own colour. */
html body #cc-launcher#cc-launcher .cl-btn small { font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: .1px !important; }

/* ── Game mode, site-wide buttons ─────────────────────────────────────────────────────────────────────────────────────
   game-mode.css gives every button 10px 20px padding and 1px letter-spacing in a display face. In rows of short buttons that
   pushed the last one off the screen (swap 25/50/75/MAX, launchpad filters) and squeezed text into columns (screener "2 4 H").
   Tighter padding keeps the chunky game look. */
html.game-mode body button:not(.gm-toggle-btn):not(.apex-mobile-toggle):not(.apex-mobile-theme-btn):not(.apex-nav-wallet):not(.apex-nav-wallet-mobile):not(#panel-close):not(#apex-z) {
  padding: 8px 12px !important; letter-spacing: .5px !important;
}
html.game-mode body :is(#tfsw-bar, #tfsw) .tfsw-b:not(#apex-z) { white-space: nowrap !important; padding: 6px 8px !important; min-width: 0 !important; }

/* City Pulse pill (bottom right on city pages): painted as a cyan game button, which hid its cyan XNT and gold APEX figures. */
html.game-mode body #city-pulse .cp-pill:not(#apex-z) {
  background: rgba(6, 22, 52, .9) !important; background-image: none !important; border: 1.5px solid rgba(255, 255, 255, .35) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .3) !important; text-transform: none !important;
}
html.game-mode body #city-pulse .cp-pill .cp-x:not(#apex-z) { color: #5FF4FF !important; -webkit-text-fill-color: #5FF4FF !important; }
html.game-mode body #city-pulse .cp-pill .cp-a:not(#apex-z) { color: #FFD54F !important; -webkit-text-fill-color: #FFD54F !important; }
html.game-mode body #city-pulse .cp-pill :is(.cp-sep, .cp-lbl):not(#apex-z) { color: rgba(255, 255, 255, .8) !important; -webkit-text-fill-color: rgba(255, 255, 255, .8) !important; }

/* Citizens hub title: "Open to anyone." is gradient-clipped text; game mode painted the gradient as a solid mint bar behind white
   text. Solid mint text instead. */
html.game-mode body #cc-launcher .cl-title span:not(#apex-z) { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #8AFFC1 !important; -webkit-text-fill-color: #8AFFC1 !important; }
html.game-mode body #cc-launcher .cl-title:not(#apex-z) { color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; }

/* ── Game mode on the homepage ───────────────────────────────────────────────────────────────────────────────────────
   The launcher is styled for light and dark by the rules above, both excluding game mode, so game mode showed its raw ivory
   base under a dark header. Its own look here: deep game blue, white type, gold claim button. */
html.game-mode:has(body[data-page="landing"]) { background: #0A2F6B !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher { background: linear-gradient(180deg, #0D47A1 0%, #0A2F6B 100%) !important; color: #fff !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher .al-tag { color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; text-shadow: 0 2px 0 rgba(0, 0, 0, .25) !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher .al-tag em { color: #FFD54F !important; -webkit-text-fill-color: #FFD54F !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher :is(.al-claimcard, .al-card) { background: rgba(255, 255, 255, .1) !important; background-image: none !important; border: 1.5px solid rgba(255, 255, 255, .22) !important; box-shadow: 0 4px 0 rgba(0, 0, 0, .22) !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher .al-card.al-gold { background: rgba(255, 213, 79, .18) !important; border-color: rgba(255, 213, 79, .6) !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher :is(.al-label, .al-refill) { color: rgba(255, 255, 255, .75) !important; -webkit-text-fill-color: rgba(255, 255, 255, .75) !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher :is(.al-odds, .claim-status, .claim-result, .claim-result *) { color: rgba(255, 255, 255, .9) !important; -webkit-text-fill-color: rgba(255, 255, 255, .9) !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher .al-odds b { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher .al-odds a { color: #FFD54F !important; -webkit-text-fill-color: #FFD54F !important; text-decoration-color: rgba(255, 213, 79, .6) !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher .claim-input { background: rgba(3, 18, 44, .55) !important; border: 1.5px solid rgba(255, 255, 255, .32) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher .claim-input::placeholder { color: rgba(255, 255, 255, .55) !important; -webkit-text-fill-color: rgba(255, 255, 255, .55) !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher .claim-submit { background: linear-gradient(180deg, #FFD700 0%, #FFA000 100%) !important; border: 2px solid #F57F17 !important; color: #3E2723 !important; -webkit-text-fill-color: #3E2723 !important; box-shadow: 0 4px 0 #E65100 !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher .claim-result { background: rgba(3, 18, 44, .55) !important; border-color: rgba(255, 255, 255, .25) !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher :is(.al-figs, .al-fig) { border-color: rgba(255, 255, 255, .22) !important; background: transparent !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher .al-fig b { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher .al-fig :is(span, small) { color: rgba(255, 255, 255, .72) !important; -webkit-text-fill-color: rgba(255, 255, 255, .72) !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher .al-t { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher .al-d { color: rgba(255, 255, 255, .8) !important; -webkit-text-fill-color: rgba(255, 255, 255, .8) !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher .al-ic { background: rgba(255, 255, 255, .16) !important; }
html.apex-v3.game-mode #apex-launcher#apex-launcher#apex-launcher #al-more { border: 1.5px dashed rgba(255, 255, 255, .45) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; background: transparent !important; padding: 10px 13px !important; }
html.apex-v3.game-mode #sp-banner#sp-banner#sp-banner { background: rgba(3, 18, 44, .75) !important; background-image: none !important; border: 1.5px solid rgba(255, 255, 255, .22) !important; }
html.apex-v3.game-mode #sp-banner#sp-banner#sp-banner :is(#sp-banner-text, .sp-text) { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html.apex-v3.game-mode #sp-banner#sp-banner#sp-banner .sp-tag { background: rgba(255, 213, 79, .2) !important; color: #FFD54F !important; -webkit-text-fill-color: #FFD54F !important; border: 1px solid rgba(255, 213, 79, .5) !important; }
/* The old hero lower on the homepage is a dark navy box in game mode; its "Explore ecosystem" link was set dark for the pale
   version (nav r179) and turned invisible here. */
html.game-mode body[data-page="landing"] a.hero-secondary-action.hero-secondary-action:not(#apex-z):not(#apex-y) { color: #fff !important; -webkit-text-fill-color: #fff !important; text-decoration-color: #FFD54F !important; }

/* ═══ v33: the APEX coin logo (2026-09-14) ════════════════════════════════════════════════════════════════════════════
   The header logo was favicon-192.png, a 1920x1080 glow picture cropped into a circle: a yellow blob with a dark ring.
   Martin: solid yellow in light mode; in dark mode a black coin with APEX in yellow. Drawn as SVG so it is sharp at any size.
   Game mode uses the yellow coin. */
html body #apex-nav-bar#apex-nav-bar#apex-nav-bar .apex-nav-brand img {
  content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Ccircle cx=%2232%22 cy=%2232%22 r=%2232%22 fill=%22%23FFD400%22/%3E%3Ctext x=%2232%22 y=%2237.6%22 text-anchor=%22middle%22 font-family=%22Arial Black,Arial,Helvetica,sans-serif%22 font-weight=%22900%22 font-size=%2215.5%22 letter-spacing=%22.4%22 fill=%22%23141005%22%3EAPEX%3C/text%3E%3C/svg%3E") !important;
  width: 32px !important; height: 32px !important; border-radius: 50% !important; object-fit: contain !important;
  box-shadow: none !important; filter: none !important; background: transparent !important;
}
html.apex-v3:not([data-theme="light"]):not(.game-mode) body #apex-nav-bar#apex-nav-bar#apex-nav-bar .apex-nav-brand img {
  content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Ccircle cx=%2232%22 cy=%2232%22 r=%2230.6%22 fill=%22%230B0A0B%22 stroke=%22%23FFD400%22 stroke-width=%222.8%22/%3E%3Ctext x=%2232%22 y=%2237.6%22 text-anchor=%22middle%22 font-family=%22Arial Black,Arial,Helvetica,sans-serif%22 font-weight=%22900%22 font-size=%2215.5%22 letter-spacing=%22.4%22 fill=%22%23FFD400%22%3EAPEX%3C/text%3E%3C/svg%3E") !important;
}

/* Layout audit (360 px, all three modes): the screener's "Next »" page button wrapped to two lines in a 53 px box, and in game
   mode the timeframe row ran its last button ("7d") past the screen edge. */
html body button.pg-btn:not(#apex-z) { white-space: nowrap !important; }
html.game-mode body #tfsw-bar:not(#apex-z) { flex-wrap: wrap !important; row-gap: 6px !important; }
html.game-mode body :is(#tfsw-bar, #tfsw) .tfsw-b:not(#apex-z) { min-width: 40px !important; height: 38px !important; padding: 0 8px !important; font-size: 13px !important; }

/* ═══ v34: layout audit leftovers at 360 px (2026-09-14) ═══════════════════════════════════════════════════════════════
   An audit of 45 key pages in light, dark and game mode (real text line counts, buttons past the screen edge) left these. */

/* Social: the feed sort row ("Newest / Most Tipped / Following") ran "Following" off the right edge and squeezed "Most Tipped"
   onto two lines. One scrollable row, labels on one line. */
html body .feed-sort:not(#apex-z) { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
html body .feed-sort:not(#apex-z)::-webkit-scrollbar { display: none; }
html body .feed-sort .sort-btn:not(#apex-z) { white-space: nowrap !important; flex: 0 0 auto !important; }
/* Social: the hero connect buttons clipped their own label. */
html body .hero-cta:not(#apex-z) { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; }

/* Bank: the "Load" button next to the wallet field wrapped to two lines. */
html body button[onclick="loadDeps()"]:not(#apex-z) { white-space: nowrap !important; }

/* Pixel Arcade: the section tabs ran "Activity" off the screen in game mode (bigger game buttons). Scrollable row. */
html body .section-tabs:not(#apex-z) { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none; }
html body .section-tabs:not(#apex-z)::-webkit-scrollbar { display: none; }
html body .section-tabs .section-tab:not(#apex-z) { white-space: nowrap !important; flex: 0 0 auto !important; }

/* Launchpad (game mode): "IN ARENA" wrapped inside its sort button. */
html.game-mode body .sort-btn:not(#apex-z) { white-space: nowrap !important; }

/* ═══ v35: screener in game mode (2026-09-14) ═════════════════════════════════════════════════════════════════════════
   Martin's phone: the small "more" arrow at the left of every token row showed as a cyan half-circle with no icon. It is a 28 px
   button; game mode's big-button padding (8px 12px) left the arrow no room. A clean round arrow button instead. */
html.game-mode body button.t-exp:not(#apex-z) {
  width: 26px !important; height: 26px !important; min-width: 26px !important; padding: 0 !important;
  display: inline-grid !important; place-content: center !important;
  background: rgba(255, 255, 255, .12) !important; background-image: none !important;
  border: 1.5px solid rgba(255, 255, 255, .45) !important; border-radius: 50% !important;
  box-shadow: none !important; transform: none !important;
}
html.game-mode body button.t-exp:not(#apex-z) svg { width: 11px !important; height: 7px !important; overflow: visible; }
html.game-mode body button.t-exp:not(#apex-z) svg path { fill: none !important; stroke: #fff !important; stroke-width: 1.8 !important; stroke-linecap: round; stroke-linejoin: round; }

/* Screener "mission" panel (APEX-1 rocket) in game mode. Its 20 px minimise button got the big game padding and turned into a cyan
   blob; minimised, the 42 px bubble still let the log line ("56 new tokens detected this cycle") show, one letter per line down the
   right edge. Game mode: a small round −/+ button, and a clean rocket bubble when minimised with nothing else inside. */
html.game-mode body #mission #mission-toggle:not(#apex-z) {
  width: 26px !important; height: 26px !important; min-width: 0 !important; padding: 0 !important;
  display: grid !important; place-content: center !important; border-radius: 50% !important;
  font: 700 16px/1 Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  background: rgba(255, 255, 255, .14) !important; background-image: none !important;
  border: 1.5px solid rgba(255, 255, 255, .5) !important; box-shadow: none !important; transform: none !important;
}
html.game-mode body #mission.collapsed:not(#apex-z) {
  width: 50px !important; height: 50px !important; min-width: 0 !important; padding: 0 !important; overflow: hidden !important;
  background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important;
}
html.game-mode body #mission.collapsed #mission-body:not(#apex-z),
html.game-mode body #mission.collapsed #mission-header > :not(#mission-toggle):not(#apex-z) { display: none !important; }
html.game-mode body #mission.collapsed #mission-header:not(#apex-z) { padding: 0 !important; border: 0 !important; }
html.game-mode body #mission.collapsed #mission-toggle:not(#apex-z) {
  position: static !important; width: 50px !important; height: 50px !important; font-size: 0 !important;
  background: linear-gradient(180deg, #FFD700 0%, #FFA000 100%) !important; border: 2px solid #F57F17 !important;
  box-shadow: 0 3px 0 #E65100, 0 6px 12px rgba(0, 0, 0, .3) !important;
}
html.game-mode body #mission.collapsed #mission-toggle:not(#apex-z)::after { content: "🚀"; font-size: 24px; line-height: 1; }

/* ═══ v36: screener game mode, second pass (2026-09-14) ═══════════════════════════════════════════════════════════════
   Checked on a 360 px screenshot after v35: the open mission panel's −/+ button rendered 26 px wide but 48 px tall (a site-wide
   minimum touch height beat the height), and the row arrow circles were clipped at the table's left edge. */
html.game-mode body #mission #mission-toggle:not(#apex-z):not(#apex-y) { min-height: 26px !important; max-height: 26px !important; height: 26px !important; line-height: 26px !important; }
html.game-mode body #mission.collapsed #mission-toggle:not(#apex-z):not(#apex-y) { min-height: 50px !important; max-height: 50px !important; height: 50px !important; }
html.game-mode body button.t-exp:not(#apex-z):not(#apex-y) { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; max-height: 22px !important; margin-left: 2px !important; }