/* Cross-surface theme bridge for pages that do not own the player's inline UI. */
:root[data-theme="eclipse"]{--bg:#050713;--bg2:#0a0f24;--fg:#f4f6ff;--muted:#a7b1ce;--a1:#ffd294;--a2:#61e8ff;--a3:#9a82ff;--line:rgba(173,204,255,.16);--ev-scene:radial-gradient(960px 680px at 80% -10%,rgba(100,90,255,.3),transparent 61%),radial-gradient(780px 620px at 4% 110%,rgba(62,228,255,.18),transparent 58%),linear-gradient(154deg,#050713,#070b1d 48%,#101133)}
:root[data-theme="cyber"]{--bg:#05060f;--bg2:#0a0b1a;--fg:#eaf6ff;--muted:#8aa0c6;--a1:#ff2e97;--a2:#00e5ff;--a3:#a855f7;--line:rgba(130,200,255,.14);--ev-scene:radial-gradient(1100px 720px at 82% -12%,rgba(168,85,247,.28),transparent 60%),radial-gradient(900px 600px at 8% 112%,rgba(0,229,255,.2),transparent 55%),linear-gradient(154deg,#05060f,#070a1b 50%,#170d2b)}
:root[data-theme="anime"]{--bg:#171334;--bg2:#241a4a;--fg:#fff2fb;--muted:#c9b6ff;--a1:#f26fe1;--a2:#7fe3ff;--a3:#b98bff;--line:rgba(200,170,255,.18);--ev-scene:radial-gradient(900px 620px at 82% -12%,rgba(127,227,255,.22),transparent 60%),radial-gradient(820px 600px at 6% 108%,rgba(242,111,225,.24),transparent 56%),linear-gradient(180deg,#1b1440 0%,#3a2270 44%,#9a3fae 76%,#ff9fc0 100%)}
:root[data-theme="girly"]{--bg:#241022;--bg2:#37183c;--fg:#fff0f8;--muted:#eaa9d6;--a1:#ff4785;--a2:#7ff0da;--a3:#c77dff;--line:rgba(255,160,220,.2);--ev-scene:radial-gradient(900px 640px at 80% -10%,rgba(255,71,133,.34),transparent 60%),radial-gradient(820px 600px at 6% 112%,rgba(199,125,255,.27),transparent 55%),linear-gradient(154deg,#241022,#37183c 54%,#4b194b)}
:root[data-theme="miami"]{--bg:#190a2e;--bg2:#25123f;--fg:#fff2fb;--muted:#e0a6d6;--a1:#ff3860;--a2:#2de2e6;--a3:#ff9e5e;--line:rgba(255,150,220,.16);--ev-scene:radial-gradient(950px 640px at 84% -12%,rgba(45,226,230,.2),transparent 60%),radial-gradient(860px 600px at 6% 110%,rgba(255,158,94,.24),transparent 56%),linear-gradient(180deg,#2a0f4a 0%,#5a1a5e 42%,#c02a6e 72%,#ff7e5f 100%)}
:root[data-theme="cuban"]{--bg:#08202b;--bg2:#0d2c38;--fg:#fff7e8;--muted:#cbb48c;--a1:#f2b705;--a2:#1fb6a6;--a3:#e63946;--line:rgba(255,215,140,.16);--ev-scene:radial-gradient(1000px 700px at 85% -10%,rgba(242,183,5,.24),transparent 60%),radial-gradient(900px 650px at 5% 110%,rgba(31,182,166,.22),transparent 55%),linear-gradient(154deg,#08202b,#0d2c38 54%,#3a212d)}
:root[data-theme="aurora"]{--bg:#04181f;--bg2:#092a33;--fg:#effffb;--muted:#a6d1cd;--a1:#74f0c3;--a2:#8bc7ff;--a3:#ad8dff;--line:rgba(163,236,226,.18);--ev-scene:radial-gradient(980px 590px at 80% -14%,rgba(143,112,255,.31),transparent 62%),radial-gradient(870px 620px at 9% 112%,rgba(93,246,196,.23),transparent 58%),linear-gradient(154deg,#04171f,#0a2d36 50%,#142859)}
:root[data-theme="verdant"]{--bg:#071b14;--bg2:#0c3021;--fg:#f3ffed;--muted:#b2d2ad;--a1:#d6f970;--a2:#5dde7d;--a3:#60a9e8;--line:rgba(192,239,163,.17);--ev-scene:radial-gradient(950px 680px at 84% -10%,rgba(96,169,232,.23),transparent 60%),radial-gradient(800px 580px at 4% 109%,rgba(114,223,132,.23),transparent 57%),linear-gradient(155deg,#071b14,#103725 51%,#17382d)}
html{background:var(--bg);transition:background .7s ease}body{isolation:isolate;overflow-x:hidden;background:var(--ev-scene),var(--bg)!important;color:var(--fg);transition:background .7s ease,color .45s ease}body::after{content:"";position:fixed;z-index:0;inset:0;pointer-events:none;background-image:var(--ev-theme-world-art);background-repeat:no-repeat;background-position:right bottom;background-size:min(74vw,880px) 88vh;opacity:.12;filter:saturate(1.15) drop-shadow(0 25px 40px rgba(0,0,0,.55));mix-blend-mode:screen}.shell{position:relative;z-index:1}a,button{transition:border-color .25s ease,background .4s ease,color .25s ease,box-shadow .3s ease}.card,.panel,.metric,.journey li,.locked-card,.studio-art,.submission,.soundcheck,.guest,.control,.review-editor{border-color:color-mix(in srgb,var(--a2) 25%,var(--line))!important;box-shadow:inset 0 1px rgba(255,255,255,.09),0 24px 55px -35px rgba(0,0,0,.75)}.brand .mark,.mark{background:linear-gradient(135deg,var(--a1),var(--a2))!important;box-shadow:0 0 26px color-mix(in srgb,var(--a2) 55%,transparent)}.eyebrow,.kicker{color:var(--a2)!important}.action,.primary,.small-btn:hover,.top-actions a:hover,.top-actions button:hover{border-color:var(--a2)!important;box-shadow:0 12px 28px -18px color-mix(in srgb,var(--a2) 75%,transparent)}input:focus,select:focus,textarea:focus{border-color:var(--a2)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--a2) 14%,transparent)!important}
:root[data-theme="cyber"] .card,:root[data-theme="cyber"] .panel,:root[data-theme="cyber"] .metric,:root[data-theme="cyber"] .journey li,:root[data-theme="cyber"] .locked-card,:root[data-theme="cyber"] .studio-art,:root[data-theme="cyber"] .submission{border-radius:8px}:root[data-theme="anime"] .card,:root[data-theme="anime"] .panel,:root[data-theme="anime"] .metric,:root[data-theme="anime"] .journey li,:root[data-theme="anime"] .locked-card,:root[data-theme="anime"] .studio-art{border-radius:22px}:root[data-theme="girly"] .card,:root[data-theme="girly"] .panel,:root[data-theme="girly"] .metric,:root[data-theme="girly"] .journey li,:root[data-theme="girly"] .locked-card,:root[data-theme="girly"] .studio-art{border-radius:25px}:root[data-theme="miami"] .card,:root[data-theme="miami"] .panel,:root[data-theme="miami"] .metric,:root[data-theme="miami"] .journey li{border-radius:13px}:root[data-theme="cuban"] .card,:root[data-theme="cuban"] .panel,:root[data-theme="cuban"] .metric,:root[data-theme="cuban"] .journey li{border-radius:10px}:root[data-theme="aurora"] .card,:root[data-theme="aurora"] .panel,:root[data-theme="aurora"] .metric,:root[data-theme="aurora"] .journey li{border-radius:21px}:root[data-theme="verdant"] .card,:root[data-theme="verdant"] .panel,:root[data-theme="verdant"] .metric,:root[data-theme="verdant"] .journey li{border-radius:16px}
@media(max-width:640px){body::after{background-size:122vw 58vh;opacity:.07}.shell{max-width:100%;overflow:visible}}
@media(prefers-reduced-motion:reduce){body{transition:none!important}}

/* ── Derived theme tokens ───────────────────────────────────────────────────────
   Each world above defines only its palette (--bg/--bg2/--fg/--muted/--a1..3/--line).
   Everything below is DERIVED from those, so a world gets elevation, tinted shadows,
   gradients and state colours for free - including gaming worlds injected at runtime,
   which never had a chance to hand-author them. Themes stopped at an accent swap
   because there was nothing else to swap: no surface tiers, and shadows hardcoded to
   flat black in every world. */
:root{
  /* Elevation. Each tier lifts toward the foreground and picks up a little accent, so
     depth reads as part of the world rather than generic grey. */
  /* --bg2/--bg carry a fallback (eclipse's own values) because some surfaces -
     player.html, creator-studio.css, share-page.css - define their own bare :root
     tokens but never redeclare --bg2. Without a fallback, color-mix() with an unset
     custom property is itself invalid, which silently drops --surface-1/2/3/--glass to
     nothing: this erased Creator Studio's own gradient panels transparent. */
  --surface-1:color-mix(in srgb,var(--bg2,#0a0f24) 92%,var(--fg) 3%);
  --surface-2:color-mix(in srgb,var(--bg2,#0a0f24) 80%,var(--a2) 5%);
  --surface-3:color-mix(in srgb,var(--bg2,#0a0f24) 66%,var(--a3) 9%);
  --surface-sunken:color-mix(in srgb,var(--bg,#050713) 88%,#000 12%);

  /* Glass and hairlines. */
  --glass:color-mix(in srgb,var(--bg2,#0a0f24) 62%,transparent);
  --glass-hi:color-mix(in srgb,var(--fg) 9%,transparent);
  --line-soft:color-mix(in srgb,var(--line) 60%,transparent);
  --line-strong:color-mix(in srgb,var(--a2) 34%,var(--line));

  /* Shadows carry the world's own hue instead of flat black. */
  --shadow-sm:0 6px 16px -10px color-mix(in srgb,var(--a3) 34%,#000);
  --shadow-md:0 18px 40px -26px color-mix(in srgb,var(--a3) 40%,#000);
  --shadow-lg:0 34px 76px -44px color-mix(in srgb,var(--a3) 46%,#000);
  --glow-shadow:0 0 28px -8px color-mix(in srgb,var(--a2) 62%,transparent);

  /* Accent surfaces and the text that sits on them. Every world here is dark with a
     bright accent, so on-accent text is near-black in all of them. */
  --accent-grad:linear-gradient(135deg,var(--a1),var(--a2));
  --accent-grad-soft:linear-gradient(135deg,color-mix(in srgb,var(--a1) 22%,transparent),color-mix(in srgb,var(--a2) 18%,transparent));
  --accent-wash:color-mix(in srgb,var(--a2) 12%,transparent);
  --on-accent:#080a14;

  /* State colours, tinted toward the world so they never look bolted on. */
  --ok:color-mix(in srgb,#3ddc97 78%,var(--a2));
  --warn:color-mix(in srgb,#ffc857 78%,var(--a1));
  --danger:color-mix(in srgb,#ff5d7a 80%,var(--a3));
  --ring:color-mix(in srgb,var(--a2) 45%,transparent);
}

/* ── Shared chrome, now consuming the tokens ─────────────────────────────────── */
.card,.panel,.metric,.journey li,.locked-card,.studio-art,.submission,.soundcheck,.guest,.control,.review-editor{
  background:var(--surface-1);
  box-shadow:inset 0 1px var(--glass-hi),var(--shadow-md)!important;
}
.card:focus-within,.panel:focus-within{border-color:var(--line-strong)!important;box-shadow:inset 0 1px var(--glass-hi),var(--shadow-md)!important}
.primary,.account-submit,.primary-cta{background:var(--accent-grad)!important;color:var(--on-accent)!important;border-color:transparent!important;font-weight:800}
.primary:hover,.account-submit:hover,.primary-cta:hover{box-shadow:var(--glow-shadow),var(--shadow-md)!important}
input,select,textarea{background:var(--surface-sunken)!important;border-color:var(--line-strong)!important;color:var(--fg)!important}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)!important}
::selection{background:color-mix(in srgb,var(--a2) 38%,transparent);color:var(--fg)}