/* A customer site's theme over the house pages (overview, videos, packages,
   legal pages): html.site-skin.skin-{theme}, body.site-{theme}. The house
   styles (vip.css, overview.css) are built on tokens, so most of this re-points
   those tokens at the site's colours (--site-*, set per tenant) and the
   theme's fonts (--sk-*); the rest replaces colours the house CSS spells out.
   Loads after base.css and before the theme's own stylesheet, so the theme's
   body background, headings and inputs win. */

html.site-skin {
    --sk-radius: 16px;
    --sk-btn-radius: var(--sk-radius);
    --sk-soft: color-mix(in srgb, var(--site-text) 84%, var(--site-bg));
    --sk-glow: none;
    --sk-solid: color-mix(in srgb, var(--site-text) 8%, var(--site-bg));

    --vip-bg: var(--site-bg);
    --vip-bg-2: color-mix(in srgb, var(--site-text) 4%, var(--site-bg));
    --vip-surface: color-mix(in srgb, var(--site-text) 7%, var(--site-bg));
    --vip-surface-2: color-mix(in srgb, var(--site-text) 11%, var(--site-bg));
    --vip-line: color-mix(in srgb, var(--site-text) 16%, var(--site-bg));
    --vip-line-strong: color-mix(in srgb, var(--site-text) 30%, var(--site-bg));
    --vip-text: var(--site-text);
    --vip-muted: color-mix(in srgb, var(--site-text) 80%, var(--site-bg));
    --vip-faint: color-mix(in srgb, var(--site-text) 64%, var(--site-bg));
    --vip-pink: var(--site-primary);
    --vip-pink-2: color-mix(in srgb, var(--site-primary) 82%, var(--site-text));
    --vip-violet: var(--site-accent);
    --vip-blue: var(--site-accent);
    --vip-cyan: var(--site-accent);
    --vip-grad: linear-gradient(90deg, var(--site-primary), var(--site-accent));
    --vip-grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--site-primary) 16%, transparent), color-mix(in srgb, var(--site-accent) 12%, transparent));
    --vip-gold-ink: var(--site-on-primary);
    --vip-display: var(--sk-display);
    --vip-sans: var(--sk-sans);
    --vip-mono: var(--sk-mono, var(--sk-sans));
    --vip-radius: var(--sk-radius);

    --bs-body-bg: var(--vip-bg);
    --bs-body-color: var(--vip-text);
    --bs-emphasis-color: var(--vip-text);
    --bs-heading-color: inherit;
    --bs-secondary-color: var(--vip-muted);
    --bs-border-color: var(--vip-line);
    --bs-secondary-bg: var(--vip-surface);
    --bs-tertiary-bg: var(--vip-surface-2);
    --bs-card-bg: var(--vip-surface);
    --bs-font-sans-serif: var(--vip-sans);

    /* The overview stage is a video: it stays dark (the theme's ink on light
       themes) and takes the theme's colours and type. */
    --ov-bg: var(--site-dark);
    --ov-text: var(--site-light);
    --ov-muted: color-mix(in srgb, var(--site-light) 70%, var(--site-dark));
    --ov-surface: color-mix(in srgb, color-mix(in srgb, var(--site-light) 10%, var(--site-dark)) 75%, transparent);
    --ov-line: color-mix(in srgb, var(--site-light) 22%, transparent);
    --ov-pink: var(--site-pop);
    --ov-violet: var(--site-accent);
    --ov-blue: var(--site-accent);
    --ov-cyan: var(--site-pop);
    --ov-grad: linear-gradient(90deg, var(--site-pop), var(--site-accent));
    --ov-display: var(--sk-display);
    --ov-sans: var(--sk-sans);
    --ov-mono: var(--sk-mono, var(--sk-sans));
    --ov-faint: var(--vip-faint);
}
/* Live-effect themes: see-through panels so the backdrop shows. */
html.site-skin.skin-hyperspace, html.site-skin.skin-holodeck, html.site-skin.skin-quantum,
html.site-skin.skin-circuit, html.site-skin.skin-chrome, html.site-skin.skin-hud, html.site-skin.skin-aurora, html.site-skin.skin-neon,
html.site-skin.skin-android, html.site-skin.skin-workshop {
    --vip-surface: color-mix(in srgb, color-mix(in srgb, var(--site-text) 8%, var(--site-bg)) 72%, transparent);
    --vip-surface-2: color-mix(in srgb, color-mix(in srgb, var(--site-text) 13%, var(--site-bg)) 78%, transparent);
    --vip-bg-2: color-mix(in srgb, var(--site-bg) 70%, transparent);
}
html.site-skin.skin-prism, html.site-skin.skin-spectrum { --vip-surface: rgba(255, 255, 255, .62); --vip-surface-2: rgba(255, 255, 255, .8); --vip-bg-2: rgba(255, 255, 255, .7); }

/* Corners and character per theme */
.skin-midnight { --sk-radius: 2px; }
.skin-aurora { --sk-radius: 22px; --sk-btn-radius: 999px; }
.skin-editorial { --sk-radius: 0; }
.skin-neon { --sk-radius: 4px; --sk-glow: 0 0 24px color-mix(in srgb, var(--site-primary) 35%, transparent); }
.skin-sunrise { --sk-radius: 24px; --sk-btn-radius: 999px; }
.skin-summit { --sk-radius: 10px; --sk-btn-radius: 8px; }
.skin-bold { --sk-radius: 0; }
.skin-zen { --sk-radius: 2px; }
.skin-hyperspace { --sk-radius: 18px; --sk-btn-radius: 999px; --sk-glow: 0 0 40px color-mix(in srgb, var(--site-primary) 30%, transparent); }
.skin-chrome { --sk-radius: 20px; --sk-btn-radius: 999px; }
.skin-holodeck { --sk-radius: 14px; --sk-glow: 0 0 30px color-mix(in srgb, var(--site-accent) 25%, transparent); }
.skin-quantum { --sk-radius: 16px; --sk-btn-radius: 999px; --sk-glow: 0 0 30px color-mix(in srgb, var(--site-primary) 25%, transparent); }
.skin-circuit { --sk-radius: 4px; --sk-glow: 0 0 22px color-mix(in srgb, var(--site-accent) 25%, transparent); }
.skin-prism { --sk-radius: 20px; --sk-btn-radius: 999px; }
.skin-hud { --sk-radius: 0; --sk-glow: 0 0 22px color-mix(in srgb, var(--site-primary) 30%, transparent); }
.skin-kinetic { --sk-radius: 0; }
.skin-android { --sk-radius: 22px; --sk-btn-radius: 999px; --sk-glow: 0 0 30px color-mix(in srgb, var(--site-primary) 25%, transparent); }
.skin-botpals { --sk-radius: 28px; --sk-btn-radius: 999px; }
.skin-workshop { --sk-radius: 0; --sk-btn-radius: 4px; }
.skin-club, .skin-clubbot { --sk-radius: 16px; --sk-btn-radius: 12px; }
.skin-spectrum { --sk-radius: 22px; --sk-btn-radius: 12px; }

/* ── Page ──────────────────────────────────────────────────────────────── */
:where(.site-skin) .vip-public { background: var(--site-bg); }
.site-skin .vip-public::before { display: none; }
:where(.site-skin) a { color: var(--vip-pink-2); }
:where(.site-skin) a:hover { color: var(--site-text); }
.site-skin h1, .site-skin h2, .site-skin h3, .site-skin h4, .site-skin h5 { color: inherit; }
.site-skin .text-grad { background: var(--vip-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.site-skin .vip-top.sk-top { border-bottom-color: var(--vip-line); gap: 16px; }
.site-skin .sk-top .site-logo-text, .site-skin .sk-brand { font-family: var(--sk-display); font-weight: 700; font-size: 1.25rem; color: var(--site-primary); letter-spacing: .01em; }
.site-skin .sk-top-link { font-family: var(--vip-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--vip-muted); white-space: nowrap; }
.site-skin .sk-top-link:hover { color: var(--site-primary); }
.site-skin .sk-brand-logo { max-height: 40px; width: auto; }
.site-skin .vip-side-brand:hover, .site-skin .vip-brand:hover { color: var(--vip-text); }
@media (max-width: 520px) { .site-skin .sk-top-link { font-size: 10.5px; letter-spacing: .08em; } }

.site-skin .vip-eyebrow { color: var(--site-primary); }
.site-skin .vip-lede, .site-skin .vip-compare li, .site-skin .vip-steps li { color: var(--sk-soft); }
.site-skin .vip-steps li > span:first-child { color: var(--vip-text); border-radius: var(--sk-radius); }
.site-skin .vip-mark { color: var(--site-on-primary); }
.site-skin .vip-disclaimer a { color: var(--vip-muted); }
/* Bootstrap's grey helpers are a fixed mid-grey: too dim on dark themes, so use the theme's muted text. */
.site-skin :is(.text-secondary, .text-body-secondary, .text-muted) { color: var(--vip-muted) !important; }

/* Buttons */
.site-skin .btn { border-radius: var(--sk-btn-radius); }
.site-skin .btn-primary, .site-skin .btn-vip {
    --bs-btn-color: var(--site-on-primary); --bs-btn-hover-color: var(--site-on-primary); --bs-btn-active-color: var(--site-on-primary); --bs-btn-disabled-color: var(--site-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--site-primary) 88%, var(--site-text));
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-bg: color-mix(in srgb, var(--site-primary) 78%, var(--site-text));
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--site-primary) 70%, transparent), var(--sk-glow);
}
.site-skin .btn-outline-primary, .site-skin .btn-outline-vip, .site-skin .btn-outline-light, .site-skin .btn-outline-secondary {
    --bs-btn-color: var(--vip-text); --bs-btn-border-color: var(--vip-line-strong);
    --bs-btn-hover-color: var(--vip-text); --bs-btn-hover-bg: color-mix(in srgb, var(--site-text) 7%, transparent); --bs-btn-hover-border-color: var(--site-primary);
    --bs-btn-active-color: var(--vip-text); --bs-btn-active-bg: color-mix(in srgb, var(--site-text) 12%, transparent);
}

/* Panels */
.site-skin .card, .site-skin .vip-perk, .site-skin .vip-package, .site-skin .vip-compare > div, .site-skin .vip-video-cta,
.site-skin .ov-chat, .site-skin .ov-player, .site-skin .ov-gate-poster { border-radius: var(--sk-radius); }
.site-skin .vip-package:hover { border-color: var(--site-primary); box-shadow: var(--sk-glow); }
/* Gradient-edged cards get a solid fill: a see-through one lets the edge gradient wash over the text. */
.site-skin .vip-package.is-featured, .site-skin .vip-compare .is-vip { background: linear-gradient(var(--sk-solid), var(--sk-solid)) padding-box, var(--vip-grad) border-box; }
.site-skin .vip-package.is-featured, .site-skin .vip-compare .is-vip { box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--site-primary) 60%, transparent), var(--sk-glow); }
.site-skin .vip-package-flag { color: var(--site-on-primary); }
.site-skin .vip-play { color: var(--site-on-primary); box-shadow: 0 0 0 8px color-mix(in srgb, var(--site-primary) 16%, transparent); }
.site-skin .vip-ticket { border-radius: var(--sk-radius); background: linear-gradient(var(--vip-surface), var(--vip-surface)) padding-box, linear-gradient(160deg, color-mix(in srgb, var(--site-primary) 60%, transparent), var(--vip-line) 60%) border-box; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .5); }
.skin-android .card, .skin-workshop .card, .skin-spectrum .card, .skin-android .vip-package, .skin-workshop .vip-package, .skin-spectrum .vip-package,
.skin-hyperspace .card, .skin-holodeck .card, .skin-quantum .card, .skin-circuit .card, .skin-chrome .card, .skin-hud .card, .skin-prism .card, .skin-aurora .card, .skin-neon .card,
.skin-hyperspace .vip-package, .skin-holodeck .vip-package, .skin-quantum .vip-package, .skin-circuit .vip-package, .skin-chrome .vip-package, .skin-hud .vip-package, .skin-prism .vip-package, .skin-aurora .vip-package, .skin-neon .vip-package,
.site-skin .ov-chat { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Forms (Bootstrap) */
.site-skin .form-control:focus, .site-skin .form-select:focus { border-color: var(--site-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--site-primary) 22%, transparent); }

/* ── Overview: player, actions, chat, gate ─────────────────────────────── */
.site-skin .ov-eyebrow { color: var(--site-primary); }
.site-skin .ov-player { background: var(--ov-bg); border-color: var(--vip-line); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55), var(--sk-glow); }
.site-skin .ov-start { color: var(--ov-text); background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ov-bg) 35%, transparent), color-mix(in srgb, var(--ov-bg) 85%, transparent)); }
.site-skin .ov-start-btn { color: var(--site-on-pop); box-shadow: 0 0 0 10px color-mix(in srgb, var(--site-pop) 20%, transparent), 0 20px 50px color-mix(in srgb, var(--site-pop) 40%, transparent); }
.site-skin .ov-controls, .site-skin .ov-chapters { background: color-mix(in srgb, var(--ov-text) 6%, var(--ov-bg)); border-top-color: var(--ov-line); }
.site-skin .ov-ctl, .site-skin .ov-chapters button { border-color: var(--ov-line); background: color-mix(in srgb, var(--ov-text) 10%, var(--ov-bg)); color: var(--ov-text); }
.site-skin .ov-chapters button { color: var(--ov-muted); }
.site-skin .ov-chapters button.on { border-color: var(--ov-pink); color: var(--ov-text); background: color-mix(in srgb, var(--ov-pink) 18%, var(--ov-bg)); }
.site-skin .ov-ctl[aria-pressed="true"] { border-color: var(--ov-pink); color: var(--ov-pink); }

.site-skin .ov-action { border-radius: var(--sk-radius); color: var(--site-on-primary); background: var(--site-primary); box-shadow: 0 14px 40px -14px color-mix(in srgb, var(--site-primary) 60%, transparent), var(--sk-glow); }
.site-skin .ov-action:hover { color: var(--site-on-primary); }
.site-skin .ov-action-ghost, .site-skin .ov-action-ghost:hover { color: var(--vip-text); background: var(--vip-surface); border: 1px solid var(--vip-line-strong); box-shadow: none; }
.site-skin .ov-action-ghost i, .site-skin .ov-action-earn i { color: var(--site-primary); }

/* Legibility on the stage: whatever the theme does to headings, stage text
   stays light on the dark stage, with a soft dark halo so it never melts
   into the backdrop; highlight colours are lifted toward the light end
   (a navy or ink accent would vanish). Gradient text can't take a
   text-shadow (it would show through), so it gets a drop-shadow instead. */
html.site-skin {
    --sk-pop-text: color-mix(in srgb, var(--site-pop) 65%, var(--site-light));
    --sk-halo: 0 2px 4px color-mix(in srgb, var(--site-dark) 70%, transparent), 0 0 18px color-mix(in srgb, var(--site-dark) 85%, transparent);
}
.site-skin .ov-stage { --ov-cyan: var(--sk-pop-text); --ov-grad: linear-gradient(90deg, var(--sk-pop-text), color-mix(in srgb, var(--site-pop) 35%, var(--site-light))); text-shadow: var(--sk-halo); font-weight: 400; }
.site-skin .ov-stage :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
.site-skin .ov-stage :is(.ov-grad, .ov-grad-text, [class*="grad"]) { text-shadow: none; filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--site-dark) 90%, transparent)); }
.site-skin .ov-stage :is(.ov-cta-btn, .ov-member-open) { text-shadow: none; }
.site-skin .ov-start { text-shadow: var(--sk-halo); }

/* Page text over a moving backdrop gets a light shadow too. */
.skin-hyperspace .vip-public, .skin-quantum .vip-public, .skin-circuit .vip-public, .skin-holodeck .vip-public, .skin-hud .vip-public, .skin-neon .vip-public, .skin-aurora .vip-public, .skin-chrome .vip-public { text-shadow: 0 1px 3px color-mix(in srgb, var(--site-bg) 85%, transparent); }
.site-skin :is(.text-grad, .ov-grad, .ov-grad-text, .btn, .ov-action) { text-shadow: none; }

/* Stage colours the house CSS spells out. */
.site-skin .ov-cta-btn:not(.ov-cta-btn-ghost), .site-skin .ov-member-open { color: var(--site-on-pop); }
.site-skin .ov-cta-earn .ov-cta-btn-ghost { border-color: var(--sk-pop-text); color: var(--sk-pop-text); }
.site-skin .ov-stage :is(.ov-pink, .ov-violet) { color: var(--sk-pop-text); }
.site-skin .ov-cta-hot { border-color: color-mix(in srgb, var(--site-pop) 70%, transparent); box-shadow: 0 0 60px color-mix(in srgb, var(--site-pop) 25%, transparent); }
.site-skin .ov-member { background: linear-gradient(color-mix(in srgb, var(--ov-bg) 92%, transparent), color-mix(in srgb, var(--ov-bg) 92%, transparent)) padding-box, var(--ov-grad) border-box; }
.site-skin .ov-orb-1 { background: radial-gradient(circle, color-mix(in srgb, var(--site-pop) 55%, transparent), transparent 62%); }
.site-skin .ov-orb-2, .site-skin .ov-orb-3 { background: radial-gradient(circle, color-mix(in srgb, var(--site-accent) 45%, transparent), transparent 62%); }

.site-skin .ov-chat { background: var(--vip-surface); border-color: var(--vip-line); }
.site-skin .ov-chat-head { background: var(--vip-surface-2); border-bottom-color: var(--vip-line); }
.site-skin .ov-presence, .site-skin .ov-chat-empty { color: var(--vip-muted); }
.site-skin .ov-presence[data-state="online"] { color: var(--vip-text); }
.site-skin .ov-msg-meta { color: var(--vip-faint); }
.site-skin .ov-msg-body { background: var(--vip-surface-2); color: var(--vip-text); }
.site-skin .ov-msg-mine .ov-msg-body { background: color-mix(in srgb, var(--site-primary) 20%, var(--site-bg)); border-color: color-mix(in srgb, var(--site-primary) 45%, transparent); }
.site-skin .ov-chat-form { border-top-color: var(--vip-line); }
.site-skin .ov-chat-form textarea { background: var(--vip-bg-2); border-color: var(--vip-line-strong); color: var(--vip-text); }
.site-skin .ov-chat-form textarea:focus { border-color: var(--site-primary); }
.site-skin .ov-chat-form button { background: var(--site-primary); color: var(--site-on-primary); }
.site-skin .ov-chat-flash { box-shadow: 0 0 0 3px var(--site-primary); }

.site-skin .ov-gate-poster { border-color: var(--vip-line); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5), var(--sk-glow); }
.site-skin .ov-gate-lock { background: color-mix(in srgb, var(--site-dark) 82%, transparent); border-color: color-mix(in srgb, var(--site-light) 30%, transparent); color: var(--site-light); }
.site-skin .ov-gate-list li { color: var(--sk-soft); }
.site-skin .ov-gate-list i { color: var(--site-primary); }
.site-skin .ov-field span { color: var(--vip-muted); }
.site-skin .ov-field input { border-radius: var(--sk-btn-radius); background: var(--vip-bg-2); border: 1px solid var(--vip-line-strong); color: var(--vip-text); }
.site-skin .ov-field input:focus { border-color: var(--site-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-primary) 22%, transparent); }
.site-skin .ov-unlock-btn { border-radius: var(--sk-btn-radius); background: var(--site-primary); color: var(--site-on-primary); box-shadow: 0 14px 40px -14px color-mix(in srgb, var(--site-primary) 60%, transparent), var(--sk-glow); }

/* ── Character ─────────────────────────────────────────────────────────── */
/* Bold Block: thick ink borders and hard offset shadows. */
.skin-bold .card, .skin-bold .vip-package, .skin-bold .vip-perk, .skin-bold .ov-player, .skin-bold .ov-chat, .skin-bold .ov-gate-poster, .skin-bold .vip-ticket,
.skin-bold .ov-action, .skin-bold .btn-primary, .skin-bold .ov-unlock-btn {
    border: 3px solid var(--site-text) !important; box-shadow: 6px 6px 0 var(--site-text) !important;
}
.skin-bold .vip-package.is-featured { background: var(--site-bg); }
/* Editorial: hairlines, no shadows, ink buttons. */
.skin-editorial .card, .skin-editorial .vip-package, .skin-editorial .ov-chat, .skin-editorial .ov-player, .skin-editorial .ov-gate-poster { box-shadow: none; border-color: var(--site-text); }
.skin-editorial .vip-top.sk-top { border-bottom: 3px double var(--site-text); }
/* Neon, HUD, Circuit: monospace caps on the brand. */
.skin-neon .sk-brand, .skin-neon .sk-top .site-logo-text, .skin-hud .sk-brand, .skin-hud .sk-top .site-logo-text,
.skin-circuit .sk-brand, .skin-circuit .sk-top .site-logo-text, .skin-hyperspace .sk-brand, .skin-hyperspace .sk-top .site-logo-text { text-transform: uppercase; letter-spacing: .16em; text-shadow: 0 0 18px color-mix(in srgb, var(--site-primary) 60%, transparent); }
/* Zen's light body weight is too pale for long text. */
.skin-zen .vip-public :is(p, li) { font-weight: 400; }
/* Kinetic: big condensed headings. */
.skin-kinetic .vip-display, .skin-kinetic .ov-page-title { text-transform: uppercase; letter-spacing: 0; font-weight: 400; }
/* Zen and Midnight: lighter, airier headings. */
.skin-zen .vip-display, .skin-zen .ov-page-title, .skin-midnight .vip-display, .skin-midnight .ov-page-title { font-weight: 600; letter-spacing: 0; }