/* ════════════════════════════════════════════════════════════════════════
   Theme B — "Nova"  (modern deep-blue glass)

   Whole-site skin selected by the "theme" A/B experiment (variant "b").
   Built from Theme A ("Thunder") — same deep-navy palette and Space Grotesk /
   Nunito Sans fonts — with a more modern, glassy finish added at the bottom of
   this file: frosted/translucent popups (modals, dropdowns, AppModal) and soft
   gradient sheens on cards and panels. Scoped to html[data-theme="b"] so it
   never leaks into other themes. Reuses Theme A image assets (images/themes/a/).

   Design language: modern, clean, semi-futuristic, gaming.
   - Header font  : Space Grotesk (display)
   - Body font    : Nunito Sans
   - Palette      : near-black deep-navy, electric blue-cyan accent, yellow.
   - Effects      : frosted background blur, soft gradients, rounded corners.
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800&display=swap');

html[data-theme="b"] {
    /* Surfaces — near-black "dark thunder" navy with a blue undertone */
    --bg-darkest: #05070f;
    --bg-dark: #070a15;
    --bg-primary: #0a0e1b;
    --bg-card: #0f1626;
    --border-dark: #05070f;

    /* Text */
    --text-primary: #eaf1ff;
    --text-muted: #93a3c2;

    /* Accents — electric blue-cyan (thunder) + lightning yellow */
    --accent-blue: #2ad4ff;
    --accent-magenta: #5b8cff;
    --accent-yellow: #ffd23f;
    --accent-green: #34d399;
    --accent-cyan: #38d0ff;
    --accent-red: #ff6b6b;
    --danger: #ff6b6b;

    /* Semantic surface + text tokens (dark) */
    --text-secondary: #bcc7de;
    --surface-1: rgba(255, 255, 255, 0.02);
    --surface-2: rgba(255, 255, 255, 0.04);
    --surface-3: rgba(255, 255, 255, 0.07);
    --border-color: rgba(255, 255, 255, 0.08);

    /* Typography */
    --font-body: 'Nunito Sans', 'Segoe UI', Tahoma, sans-serif;
    --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;

    /* Local thunder helpers (used by the component skins below) */
    --thunder-glow: rgba(42, 212, 255, 0.35);
    --thunder-glow-soft: rgba(42, 212, 255, 0.14);
    --thunder-bolt: rgba(255, 210, 63, 0.4);
    --thunder-gradient: linear-gradient(120deg, #2ad4ff 0%, #5b8cff 100%);
}

/* Ambient backdrop: a couple of soft thunder glows behind everything */
html[data-theme="b"] body {
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(60% 50% at 12% -5%, rgba(42, 212, 255, 0.10), transparent 60%),
        radial-gradient(55% 45% at 100% 0%, rgba(91, 140, 255, 0.10), transparent 55%);
    background-attachment: fixed;
}

/* ── Header: transparent at the top of every page, then a soft top-anchored gradient
   fades in once scrolled (see the shared `.site-header::before` rule below). This gives
   the same clean→separated behaviour on content pages (Games/About/Support) as on the
   landing — no always-on frosted box, no hard bottom edge. ── */
html[data-theme="b"] .site-header {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 1030;
}
/* Landing page: the bar overlays the hero and is fully transparent at the top, then turns
   into the solid frosted bar (same as other pages) once the page is scrolled (JS toggles
   .is-scrolled). It stays fixed so it behaves like the sticky header elsewhere. */
html[data-theme="b"] .site-header--transparent {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}
html[data-theme="b"] .site-header--transparent.is-scrolled {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
}
/* Scroll-in separation (shared by the landing overlay header AND the sticky content-page
   header): the gradient lives on a pseudo-element so it can fade in via opacity — a
   `background` can't transition from transparent to a gradient (it snaps). The gradient
   fades to fully transparent at the bottom, so there's no hard seam line. */
html[data-theme="b"] .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* The gradient lives on a pseudo so it can fade in via opacity (a background can't
       transition transparent → gradient). It fades to transparent at the bottom so there's
       no hard seam line. */
    background: linear-gradient(180deg, rgba(5, 7, 13, 0.96) 0%, rgba(5, 7, 13, 0.78) 52%, rgba(5, 7, 13, 0) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}
html[data-theme="b"] .site-header.is-scrolled::before {
    opacity: 1;
}

/* Landing intro: the brand, menu links and account actions cascade in on first load,
   so the page entrance begins right from the header. One-shot CSS animation. */
@keyframes ha-header-intro { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
html[data-theme="b"] .site-header--intro .navbar-brand,
html[data-theme="b"] .site-header--intro .navbar-toggler,
html[data-theme="b"] .site-header--intro .main-nav .nav-item,
html[data-theme="b"] .site-header--intro .header-actions .nav-item {
    animation: ha-header-intro 0.55s ease both;
}
html[data-theme="b"] .site-header--intro .navbar-brand { animation-delay: 0.05s; }
html[data-theme="b"] .site-header--intro .main-nav .nav-item:nth-child(1) { animation-delay: 0.14s; }
html[data-theme="b"] .site-header--intro .main-nav .nav-item:nth-child(2) { animation-delay: 0.20s; }
html[data-theme="b"] .site-header--intro .main-nav .nav-item:nth-child(3) { animation-delay: 0.26s; }
html[data-theme="b"] .site-header--intro .main-nav .nav-item:nth-child(4) { animation-delay: 0.32s; }
html[data-theme="b"] .site-header--intro .header-actions .nav-item:nth-child(1) { animation-delay: 0.34s; }
html[data-theme="b"] .site-header--intro .header-actions .nav-item:nth-child(2) { animation-delay: 0.40s; }
html[data-theme="b"] .site-header--intro .header-actions .nav-item:nth-child(3) { animation-delay: 0.46s; }
@media (prefers-reduced-motion: reduce) {
    html[data-theme="b"] .site-header--intro .navbar-brand,
    html[data-theme="b"] .site-header--intro .navbar-toggler,
    html[data-theme="b"] .site-header--intro .main-nav .nav-item,
    html[data-theme="b"] .site-header--intro .header-actions .nav-item { animation: none; }
}

html[data-theme="b"] .navbar-brand { font-family: var(--font-display); letter-spacing: -0.02em; }
html[data-theme="b"] .brand-accent { color: var(--accent-blue); }
html[data-theme="b"] .nav-link { font-weight: 600; }
html[data-theme="b"] .nav-link:hover { color: var(--accent-blue) !important; }

/* Slightly taller bar for breathing room */
html[data-theme="b"] .site-header .navbar { padding-top: 0.85rem; padding-bottom: 0.85rem; }
html[data-theme="b"] .navbar-brand { margin-right: 2rem; }

/* ── Main nav (left, near the logo) with a glowing active-page indicator ── */
html[data-theme="b"] .main-nav { gap: 0.35rem; }
html[data-theme="b"] .main-nav .nav-item { display: flex; align-items: stretch; }
html[data-theme="b"] .main-nav .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
/* Active page: glowing blue text */
html[data-theme="b"] .main-nav .nav-link.active {
    color: var(--accent-blue) !important;
    text-shadow: 0 0 16px rgba(42, 212, 255, 0.7);
}
/* Glowing line pinned flush to the very top edge of the header. The active link is
   vertically centred in the taller bar, so we offset past the navbar's top padding by
   the centring gap (~3px) to sit the line exactly on the header's top edge. */
html[data-theme="b"] .main-nav .nav-link.active::before {
    content: "";
    position: absolute;
    top: calc(-0.85rem - 3.2px);
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-blue) 50%, transparent);
    box-shadow: 0 0 16px 1px rgba(42, 212, 255, 0.85);
    pointer-events: none;
}
/* Soft radial glow under the line so it blends into the background. */
html[data-theme="b"] .main-nav .nav-link.active::after {
    content: "";
    position: absolute;
    top: calc(-0.85rem - 3.2px);
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    height: 40px;
    background: radial-gradient(60% 100% at 50% 0%, rgba(42, 212, 255, 0.38), transparent 72%);
    pointer-events: none;
}

/* ── Right side actions: balance chip · bell · profile ── */
html[data-theme="b"] .header-actions { gap: 1rem; }

/* Credit balance chip with a + buy button */
html[data-theme="b"] .credit-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.35rem 0.25rem 0.85rem;
    border-radius: 9999px;
    background: rgba(8, 12, 22, 0.65);
    border: 1px solid rgba(42, 212, 255, 0.20);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
html[data-theme="b"] .credit-amount {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s ease;
}
html[data-theme="b"] .credit-amount:hover { color: var(--accent-blue); }
html[data-theme="b"] .credit-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    color: #1a1300;
    background: var(--accent-yellow);
    box-shadow: 0 0 0 1px rgba(255, 210, 63, 0.5), 0 0 14px rgba(255, 210, 63, 0.6);
    transition: transform 0.15s ease, filter 0.15s ease;
}
html[data-theme="b"] .credit-plus:hover { transform: translateY(-1px); filter: brightness(1.08); color: #1a1300; }

/* Notifications bell */
html[data-theme="b"] .bell-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    color: var(--text-muted);
    transition: color 0.15s ease;
}
html[data-theme="b"] .bell-toggle svg { width: 16px; height: 16px; transition: fill 0.15s ease, filter 0.15s ease; }
html[data-theme="b"] .bell-toggle:hover,
html[data-theme="b"] .bell-toggle[aria-expanded="true"] {
    background: transparent;
    color: var(--accent-blue) !important;
}
/* Hover/open: fill the bell instead of drawing a circle around it */
html[data-theme="b"] .bell-toggle:hover svg,
html[data-theme="b"] .bell-toggle[aria-expanded="true"] svg {
    fill: currentColor;
    filter: drop-shadow(0 0 8px rgba(42, 212, 255, 0.6));
}
html[data-theme="b"] .bell-toggle::after { display: none; }
html[data-theme="b"] .profile-toggle { font-weight: 700; }
/* Outline chevron caret (instead of Bootstrap's filled triangle) */
html[data-theme="b"] .profile-toggle.dropdown-toggle::after {
    border: 0;
    width: 0.46em;
    height: 0.46em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 0.55em;
    margin-top: -0.18em;
    vertical-align: middle;
    transition: transform 0.15s ease;
}
html[data-theme="b"] .profile-toggle.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    margin-top: 0.12em;
}

/* Profile / bell / notification dropdowns — themed dark glass menu */
html[data-theme="b"] .navbar .dropdown-toggle::after { vertical-align: 0.15em; }
html[data-theme="b"] .navbar .dropdown-menu {
    background: rgba(12, 16, 26, 0.72);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
    backdrop-filter: blur(26px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.9rem;
    box-shadow: 0 24px 56px -20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 0.35rem;
    margin-top: 0.5rem;
}
html[data-theme="b"] .navbar .dropdown-item {
    color: var(--text-primary);
    border-radius: 0.5rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
}
html[data-theme="b"] .navbar .dropdown-item:hover,
html[data-theme="b"] .navbar .dropdown-item:focus {
    background: rgba(42, 212, 255, 0.14);
    color: var(--accent-blue);
}
html[data-theme="b"] .navbar .dropdown-header {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.9rem;
}
/* Notifications menu (empty state) */
html[data-theme="b"] .notif-menu { min-width: 17rem; max-width: 22rem; }
html[data-theme="b"] .notif-menu .notif-empty {
    color: var(--text-muted);
    font-size: 0.88rem;
    padding: 0.6rem 0.85rem 0.7rem;
    text-align: center;
}
/* Unread count badge on the bell */
html[data-theme="b"] .bell-toggle { position: relative; }
html[data-theme="b"] .notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--thunder-gradient, #ff4d4d);
    color: #04121b;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 8px rgba(42, 212, 255, 0.55);
}
/* Notification list items */
html[data-theme="b"] .notif-menu .notif-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    white-space: normal;
}
html[data-theme="b"] .notif-menu .notif-item-title {
    font-weight: 700;
    font-size: 0.88rem;
}
html[data-theme="b"] .notif-menu .notif-item-msg {
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--text-muted);
}
html[data-theme="b"] .notif-menu .notif-item--unread {
    border-left: 2px solid var(--accent-blue);
}
html[data-theme="b"] .notif-menu .notif-item--unread .notif-item-msg {
    color: var(--text-primary);
}

/* The topbar must NOT have its own backdrop-filter: an element that has one becomes
   a "backdrop root", which stops its child popups (bell / user menu) from blurring
   the page behind them (verified). A near-opaque bar reads clean without blur. */
html[data-theme="b"] .dash-topbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(10, 13, 21, 0.92);
    overflow: visible;
}

/* Dashboard topbar popups (bell + user menu) — same frosted dark glass as the
   navbar dropdowns (they live outside .navbar, so they need their own rule),
   with a subtle blue hover instead of Bootstrap's default light background. */
html[data-theme="b"] .dash-topbar-actions .dropdown-menu {
    background: rgba(12, 16, 26, 0.7);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    backdrop-filter: blur(28px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.9rem;
    box-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 0.35rem;
    margin-top: 0.6rem;
}
html[data-theme="b"] .dash-topbar-actions .dropdown-item {
    color: var(--text-primary);
    border-radius: 0.55rem;
    padding: 0.5rem 0.7rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
html[data-theme="b"] .dash-topbar-actions .dropdown-item:hover,
html[data-theme="b"] .dash-topbar-actions .dropdown-item:focus,
html[data-theme="b"] .dash-topbar-actions .notif-item:hover {
    background: rgba(42, 212, 255, 0.12);
    color: var(--accent-blue);
}
/* Keep the message line readable (muted) even on hover. */
html[data-theme="b"] .dash-topbar-actions .notif-item:hover .notif-item-msg {
    color: var(--text-primary);
}
html[data-theme="b"] .dash-topbar-actions .dropdown-header {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* ── Buttons: gradient thunder fill, pill, raised-on-hover with soft glow ── */
html[data-theme="b"] .btn-get-started,
html[data-theme="b"] .btn-signin {
    background: var(--thunder-gradient);
    color: #04121b !important;
    border: none;
    border-radius: 9999px;
    font-family: var(--font-display);
    font-weight: 700;
    box-shadow: 0 10px 24px -10px var(--thunder-glow);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
html[data-theme="b"] .btn-get-started:hover,
html[data-theme="b"] .btn-signin:hover {
    color: #04121b !important;
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 18px 34px -12px var(--thunder-glow);
}

/* Outline CTA uses the yellow lightning accent */
html[data-theme="b"] .btn-cta-outline {
    border: 2px solid rgba(255, 210, 63, 0.7);
    color: var(--accent-yellow);
    border-radius: 9999px;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
html[data-theme="b"] .btn-cta-outline:hover {
    background: var(--accent-yellow);
    color: #1a1300;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -12px var(--thunder-bolt);
}

/* ── Cards: rounded, glassy, raise + soft shadow on hover ── */
html[data-theme="b"] .content-card,
html[data-theme="b"] .card {
    background: linear-gradient(180deg, rgba(20, 30, 52, 0.65), rgba(12, 19, 34, 0.75));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(42, 212, 255, 0.14);
    border-radius: 1.1rem;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
html[data-theme="b"] .content-card--highlight {
    border-color: rgba(42, 212, 255, 0.5);
    box-shadow: 0 0 0 1px rgba(42, 212, 255, 0.12), 0 20px 44px -22px var(--thunder-glow);
}
html[data-theme="b"] .content-card--interactive:hover {
    transform: translateY(-4px);
    border-color: rgba(42, 212, 255, 0.55);
    box-shadow: 0 22px 48px -20px var(--thunder-glow);
}
html[data-theme="b"] .content-card h5,
html[data-theme="b"] .content-card .content-card-title {
    font-family: var(--font-display);
}

/* ── Page header band: thunder radial wash ── */
html[data-theme="b"] .page-header {
    background:
        radial-gradient(110% 120% at 50% -10%, rgba(42, 212, 255, 0.14) 0%, transparent 55%),
        linear-gradient(180deg, #0c1424 0%, var(--bg-primary) 70%);
    border-bottom: 1px solid rgba(42, 212, 255, 0.12);
}
html[data-theme="b"] .page-header h1 { font-family: var(--font-display); letter-spacing: -0.02em; }

/* ── Footer (Thunder): single row — copyright left, Support/Privacy right ── */
html[data-theme="b"] .site-footer {
    background: linear-gradient(180deg, transparent, rgba(5, 7, 15, 0.6));
    border-top: none;
}
html[data-theme="b"] .footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}
html[data-theme="b"] .footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
html[data-theme="b"] .footer-links a { color: var(--text-muted); text-decoration: none; transition: color 0.15s ease; }
html[data-theme="b"] .footer-links a:hover { color: var(--accent-blue); }
html[data-theme="b"] .footer-copy {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}
html[data-theme="b"] .footer-copy a { color: var(--text-muted); text-decoration: none; font-weight: 700; }
html[data-theme="b"] .footer-copy a:hover { color: var(--accent-blue); }

/* ── Mobile header: square hamburger, bell beside it, full-page overlay menu ── */
html[data-theme="b"] .navbar-toggler { border: 0; border-radius: 0; padding: 0.25rem 0.4rem; box-shadow: none; }
html[data-theme="b"] .navbar-toggler:focus { box-shadow: none; outline: none; }

@media (max-width: 767.98px) {
    /* Bell + hamburger grouped at the top-right, above the overlay */
    html[data-theme="b"] .header-mobile-bar {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        margin-left: auto;
        position: relative;
        z-index: 5;
    }
    html[data-theme="b"] .navbar-brand { position: relative; z-index: 5; }
    html[data-theme="b"] .header-mobile-bar .bell-toggle svg { width: 20px; height: 20px; }

    /* Expanded menu covers the page */
    html[data-theme="b"] .site-header .navbar-collapse {
        position: fixed;
        inset: 0;
        height: auto !important;
        z-index: 4;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 5.5rem 1.5rem 2.5rem;
        background: rgba(6, 9, 18, 0.98);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        overflow-y: auto;
    }
    html[data-theme="b"] .site-header .navbar-collapse.show,
    html[data-theme="b"] .site-header .navbar-collapse.collapsing {
        display: flex !important;
    }
    html[data-theme="b"] .site-header .navbar-collapse.collapsing { transition: none !important; }
    html[data-theme="b"] .site-header .navbar-collapse.show { animation: ha-menu-in 0.2s ease; }

    /* Big stacked nav links */
    html[data-theme="b"] .navbar-collapse .main-nav { width: 100%; gap: 0.1rem; }
    html[data-theme="b"] .navbar-collapse .main-nav .nav-link {
        font-family: var(--font-display);
        font-size: 1.5rem;
        padding: 0.55rem 0;
    }
    html[data-theme="b"] .navbar-collapse .main-nav .nav-link.active::before,
    html[data-theme="b"] .navbar-collapse .main-nav .nav-link.active::after { display: none; }

    /* Account actions stack below the menu */
    html[data-theme="b"] .navbar-collapse .header-actions {
        width: 100%;
        gap: 1rem;
        margin-top: 1.75rem;
        align-items: flex-start;
    }
    html[data-theme="b"] .navbar-collapse .credit-chip { font-size: 1.05rem; }

    /* Profile becomes a section after the menu, with its links expanded */
    html[data-theme="b"] .header-profile-section {
        width: 100%;
        margin-top: 0.75rem;
        padding-top: 1.4rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    html[data-theme="b"] .header-profile-name {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.15rem;
        color: var(--text-primary);
        margin-bottom: 0.4rem;
    }
    html[data-theme="b"] .header-profile-link {
        display: block;
        color: var(--text-muted);
        text-decoration: none;
        font-size: 1.05rem;
        padding: 0.5rem 0;
        transition: color 0.15s ease;
    }
    html[data-theme="b"] .header-profile-link:hover { color: var(--accent-blue); }
}

@keyframes ha-menu-in { from { opacity: 0; } to { opacity: 1; } }

/* ══════════════════════════════════════════════════════════════════════════
   Theme B "Nova" delta over Thunder — a more modern, glassy finish. Additive
   on top of the cloned Thunder skin above: frosted popups + soft gradients.
   ══════════════════════════════════════════════════════════════════════════ */

/* Frosted, translucent popups with a soft gradient edge. */
html[data-theme="b"] .modal-content,
html[data-theme="b"] .app-modal {
    background: linear-gradient(160deg, rgba(20, 28, 46, .92), rgba(10, 14, 27, .92));
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(42, 212, 255, .18);
    border-radius: 16px;
    box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .03);
}

/* Softer scrim behind popups. */
html[data-theme="b"] .modal-backdrop.show { background: rgba(4, 7, 15, .6); }
html[data-theme="b"] .app-modal-backdrop {
    background: rgba(4, 7, 15, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Frosted dropdown menus (profile, notifications, language, user menu). */
html[data-theme="b"] .dropdown-menu {
    background: rgba(15, 22, 38, .88);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .7);
}

/* Soft gradient sheen on cards and panels for depth. */
html[data-theme="b"] .content-card,
html[data-theme="b"] .dash-stat,
html[data-theme="b"] .dash-instance-bar,
html[data-theme="b"] .blade-content,
html[data-theme="b"] .server-card,
html[data-theme="b"] .dash-connect {
    background-image: linear-gradient(160deg, rgba(255, 255, 255, .05), transparent 42%);
}

/* Extra glass on the dashboard sidebar under this theme.
   NOTE: intentionally NOT the topbar — a backdrop-filter on the topbar makes it a
   "backdrop root", which stops its child popups (bell/user menu) from blurring the
   page behind them. The topbar's own frost is handled above (backdrop-filter:none). */
html[data-theme="b"] .dash-sidebar {
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
}

/* ══════════════════════════════════════════════════════════════════════════
   Nova tuning (gamemac-leaning): darker + less blue, soft particle field,
   and blur-in element reveals on the homepage.
   ══════════════════════════════════════════════════════════════════════════ */

/* Darker, more neutral near-black surfaces — blue reads as an accent, not the page. */
html[data-theme="b"] {
    --bg-darkest: #04050a;
    --bg-dark: #05060c;
    --bg-primary: #070810;
    --bg-card: #0c0e16;
    --border-dark: #04050a;
    --text-muted: #8b96ad;
}

/* Darker, softer, less-saturated ambient glows. `position:relative; z-index:0`
   makes body its own stacking context so the z-index:-1 particle/thunder pseudos
   paint ABOVE the body's opaque background (otherwise they're hidden behind it)
   yet still sit behind all page content. */
html[data-theme="b"] body {
    position: relative;
    z-index: 0;
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(52% 42% at 15% -8%, rgba(56, 210, 255, 0.055), transparent 60%),
        radial-gradient(48% 40% at 100% 2%, rgba(91, 140, 255, 0.045), transparent 55%),
        radial-gradient(65% 55% at 50% 120%, rgba(16, 24, 38, 0.55), transparent 60%);
}

/* Faint drifting particle field behind the whole site. Three rectangular (non-square)
   tile ratios overlaid so the dots read as a scattered starfield rather than an
   obvious square grid. */
html[data-theme="b"] body::before {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.6px),
        radial-gradient(rgba(130, 200, 255, 0.11) 1px, transparent 1.6px),
        radial-gradient(rgba(200, 220, 255, 0.07) 1px, transparent 1.6px);
    background-size: 63px 91px, 89px 67px, 127px 143px;
    background-position: 0 0, 31px 43px, 74px 17px;
    animation: nova-drift 70s linear infinite;
}

@keyframes nova-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-42px, -30px, 0); }
}

/* Homepage element reveals fade in from a soft blur (gamemac-style). */
html[data-theme="b"] .home-a .reveal {
    filter: blur(12px);
    transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
}
html[data-theme="b"] .home-a .reveal.is-visible { filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
    html[data-theme="b"] body::before { animation: none; }
    html[data-theme="b"] .home-a .reveal { filter: none; transition: none; }
}

/* ── Homepage tuning under Nova: less blue, smoother hovers, softer prefooter ── */

/* Smooth seam: the hero's own background fades to transparent at the bottom so the
   drifting particle field and thunder emerge gradually into the next section
   instead of appearing at a hard horizontal line. */
html[data-theme="b"] .home-a .ha-hero {
    background:
        radial-gradient(80% 120% at 100% -20%, rgba(91, 140, 255, 0.16), transparent 55%),
        radial-gradient(70% 110% at -10% 0%, rgba(42, 212, 255, 0.16), transparent 55%),
        linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-primary) 42%, rgba(7, 8, 16, 0.55) 76%, transparent 100%);
}

/* Feature / tier / billing cards: elevation on a near-black page reads through a
   lighter surface + top rim highlight (a pure black drop shadow is invisible here). */
html[data-theme="b"] .home-a .ha-card,
html[data-theme="b"] .home-a .ha-tier-card,
html[data-theme="b"] .home-a .ha-bill {
    background: linear-gradient(180deg, rgba(28, 33, 46, 0.85), rgba(15, 18, 28, 0.9));
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 2px 6px rgba(0, 0, 0, 0.5),
        0 26px 54px -22px rgba(0, 0, 0, 0.95);
}
html[data-theme="b"] .home-a .ha-card,
html[data-theme="b"] .home-a .ha-tier-card {
    transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}
html[data-theme="b"] .home-a .ha-card:hover,
html[data-theme="b"] .home-a .ha-tier-card:hover {
    border-color: rgba(56, 210, 255, 0.24);
    transform: translateY(-4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 4px 10px rgba(0, 0, 0, 0.55),
        0 36px 72px -24px rgba(0, 0, 0, 0.98);
}
html[data-theme="b"] .home-a .ha-tier-card--featured {
    border-color: rgba(56, 210, 255, 0.3);
}
html[data-theme="b"] .home-a .ha-card .ha-icon {
    background: rgba(56, 210, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Game tiles: rim highlight + layered drop so they read as raised on the dark page. */
html[data-theme="b"] .tilt-card {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 6px rgba(0, 0, 0, 0.5),
        0 22px 46px -24px rgba(0, 0, 0, 0.95);
    transition: transform 0.25s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
html[data-theme="b"] .tilt-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 10px rgba(0, 0, 0, 0.55),
        0 32px 62px -24px rgba(0, 0, 0, 0.98);
}

/* Nav: the landing header stays transparent even when scrolled (a floating nav
   over the dark page). No frosted blur strip / gradient bar here — a translucent
   fixed bar over the fixed particle layer leaves a faint compositing seam at its
   bottom edge, which reads as a thin line. Transparent avoids it entirely. */
html[data-theme="b"] .site-header:not(.site-header--transparent)::after,
html[data-theme="b"] .site-header--transparent.is-scrolled::after {
    content: none;
}

/* Prefooter CTA: unbox it; keep the hero image but blur/fade its edges into the page. */
html[data-theme="b"] .home-a .ha-cta-band {
    border: none;
    box-shadow: none;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html[data-theme="b"] .home-a .ha-cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(78% 108% at 50% 50%, rgba(5, 7, 13, 0.95) 0%, rgba(5, 7, 13, 0.89) 55%, rgba(5, 7, 13, 0.96) 100%),
        url('../../images/hero/footer-hero.jpeg') center 50% / cover no-repeat;
    /* Feather ALL four edges with a gradual alpha ramp (intersecting gradients) so
       the image bleeds softly into the page on top, bottom, left and right. */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 10%, #000 26%, #000 74%, rgba(0,0,0,0.5) 90%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 12%, #000 28%, #000 72%, rgba(0,0,0,0.5) 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 10%, #000 26%, #000 74%, rgba(0,0,0,0.5) 90%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 12%, #000 28%, #000 72%, rgba(0,0,0,0.5) 88%, transparent 100%);
    mask-composite: intersect;
    filter: blur(4px);
}
/* Progressive edge blur: blurs the backdrop in a wide, soft ring around the panel
   so its edges melt into the page — same layered-blur idea as the header. */
html[data-theme="b"] .home-a .ha-cta-band::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    -webkit-mask-image: radial-gradient(116% 122% at 50% 50%, transparent 40%, #000 82%);
    mask-image: radial-gradient(116% 122% at 50% 50%, transparent 40%, #000 82%);
}
html[data-theme="b"] .home-a .ha-cta-band > * { position: relative; z-index: 1; }

/* Region globe popup: match the frosted, neutral-dark tone of the other popups. */
html[data-theme="b"] .home-a .ha-globe-popup {
    background: linear-gradient(160deg, rgba(14, 18, 30, 0.78), rgba(7, 10, 18, 0.88));
    border-color: rgba(255, 255, 255, 0.09);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    backdrop-filter: blur(22px) saturate(135%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 30px 64px -26px rgba(0, 0, 0, 0.92);
}
html[data-theme="b"] .home-a .ha-globe-popup-continent { color: var(--text-muted); }

/* Deep distant-thunder loop. Kept in the BACKGROUND (z-index:-1, like the particle
   field) so it never washes over the cards; it glows through the dark gaps of the
   page. A single soft flash whose POSITION jumps to a new spot for each strike
   (animated background-position while the layer is dark), so the storm feels alive.
   Homepage only via :has(.home-a). */
html[data-theme="b"] body:has(.home-a)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(38% 32% at 50% 50%, rgba(150, 200, 255, 0.95), rgba(90, 150, 255, 0.35) 45%, transparent 72%);
    background-repeat: no-repeat;
    background-size: 150% 150%;
    background-position: 18% 22%;
    filter: blur(16px);
    animation: nova-thunder 26s linear infinite;
}

/* Each strike: a quick double-flicker, then the layer goes dark and the position
   jumps to the next location before the following strike. */
@keyframes nova-thunder {
    0%    { background-position: 18% 20%; opacity: 0; }
    1.5%  { opacity: 0.34; }
    3%    { opacity: 0.09; }
    4.5%  { opacity: 0.42; }
    8%    { opacity: 0; }

    24%   { background-position: 82% 30%; opacity: 0; }
    25.5% { opacity: 0.30; }
    27%   { opacity: 0.08; }
    28.5% { opacity: 0.38; }
    32%   { opacity: 0; }

    49%   { background-position: 50% 80%; opacity: 0; }
    50.5% { opacity: 0.32; }
    52%   { opacity: 0.08; }
    53.5% { opacity: 0.40; }
    57%   { opacity: 0; }

    74%   { background-position: 30% 55%; opacity: 0; }
    75.5% { opacity: 0.28; }
    77%   { opacity: 0.07; }
    78.5% { opacity: 0.36; }
    82%   { opacity: 0; }

    100%  { background-position: 18% 20%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="b"] body:has(.home-a)::after { animation: none; opacity: 0; }
}