/* =============================================================================
   theme.css - the one place the site's three palettes live, plus the shared
   chrome (header, burger drawer, theme switch, scrollbar) that every public
   page draws from.

   WHY THIS FILE EXISTS
   --------------------
   Public pages are standalone HTML documents: each one carries its own inline
   `:root {…}` block and its own `<style>`. That was fine while there were two
   themes and one of them was "whatever :root says", but a third palette would
   have meant editing eighteen documents every time a colour moved. So the
   palettes moved here and the pages keep their inline `:root` untouched -
   this file simply outranks it: `html[data-theme="navy"]` scores (0,1,1)
   against `:root`'s (0,1,0), so specificity decides, not source order.

   HOW THE THREE THEMES RELATE
   ---------------------------
   `dark`  - the original palette, near-black. Duplicated verbatim from the
             page `:root` blocks so `data-theme="dark"` and "no attribute" are
             indistinguishable.
   `navy`  - the calm middle. Not "dark with a blue filter": every surface,
             border, shadow and scrollbar is re-tinted so the blue reads as a
             deliberate material rather than a hue rotation. Body text sits at
             ~14:1 on the page ground and ~6.8:1 on cards.
   `light` - the original light palette, moved out of theme_toggle.html.

   Themes that only change variables would be free. In practice a lot of page
   CSS hardcodes the dark hexes (`#141414`, `#111`, `rgba(10,10,10,.95)`), so
   the bottom half of this file re-states those surfaces per theme. Each block
   is grouped by the page it belongs to, so a page's rules stay findable.

   THE OTHER HALF: MOBILE
   ----------------------
   The header is `position: fixed`, 80px tall, with an 85px logo hanging out of
   it - on a phone that ate the viewport. Below 900px the nav collapses into a
   burger drawer (markup in partials/navbar.html, behaviour in site/theme.js)
   and the bar shrinks. Rules that every page needs live here; anything that
   only one page needs stays inline in that page.
   ========================================================================== */

/* =============================================================================
   1. PALETTES
   ========================================================================== */

/* --- dark (default) - identical to every page's inline :root ------------- */
:root,
html[data-theme="dark"] {
    color-scheme: dark;
    --bg-color: #0a0a0a;
    --card-bg: #141414;
    --card-bg2: #101013;
    --accent-orange: #ff4500;
    --accent-gold: #ffb800;
    --accent-red: #ff0000;
    --accent-cyan: #00e5ff;
    --accent-blue: #00b8d4;
    --accent-green: #5ad17a;
    --text-color: #ffffff;
    --text-dim: #a1a1a1;
    --border: rgba(255, 255, 255, .08);
    --cab-border: rgba(255, 255, 255, .07);
    --card-grad-end: #0d0d0d;
    --panel-head: #111;
}

/* --- navy - the third option ---------------------------------------------
   Surfaces climb in three steps (ink → surface → raised) so cards separate
   from the page without a border doing all the work. Lines are a translucent
   cornflower rather than white: on a blue ground white edges go grey and the
   whole thing flattens. Accents are lifted a little (the dark palette's
   #00e5ff and #ffb800 both dull against #16213a).                          */
html[data-theme="navy"] {
    color-scheme: dark;
    --bg-color: #0e1626;
    --card-bg: #16213a;
    --card-bg2: #131d33;
    --accent-orange: #ff7a45;
    --accent-gold: #ffc247;
    --accent-red: #ff6b6b;
    --accent-cyan: #4cc9ff;
    --accent-blue: #3aa8e0;
    --accent-green: #4fd18b;
    --text-color: #e6edf9;
    --text-dim: #93a4c4;
    --border: rgba(120, 160, 220, .14);
    --cab-border: rgba(120, 160, 220, .14);
    --card-grad-end: #101a2e;
    --panel-head: #1a2846;

    /* navy-only helpers - referenced by the overrides further down. They do
       not exist in the other themes on purpose: nothing outside a
       `[data-theme="navy"]` selector may read them. */
    --nv-ink: #0a1120;
    --nv-sunken: #101a2e;
    --nv-raised: #1c2949;
    --nv-line: rgba(120, 160, 220, .14);
    --nv-line-2: rgba(120, 160, 220, .26);
    --nv-glow: rgba(76, 201, 255, .16);
    --nv-shadow: 0 10px 34px rgba(4, 10, 22, .55);
    --nv-faint: #6f81a3;
}

/* --- light - moved verbatim out of partials/theme_toggle.html ------------ */
html[data-theme="light"] {
    color-scheme: light;
    --bg-color: #eef1f7;
    --card-bg: #ffffff;
    --card-bg2: #f5f7fb;
    --text-color: #1a1f29;
    --text-dim: #5b6573;
    --accent-gold: #c98a00;
    --accent-cyan: #0098c7;
    --border: #e3e8f0;
    --cab-border: #e6eaf1;
    --card-grad-end: #f7f9fc;
    --panel-head: #f3f5fa;
}

/* Crossfade when the switch is used, so the change reads as one motion
   instead of eighteen elements repainting independently. */
html[data-theme] body,
html[data-theme] .navbar, html[data-theme] .main-footer,
html[data-theme] .tab-content-wrapper, html[data-theme] .stat-box,
html[data-theme] .cluster-tab, html[data-theme] .tab-btn,
html[data-theme] .selector-box, html[data-theme] .selector-dropdown,
html[data-theme] .rules-list li, html[data-theme] .mode-btn, html[data-theme] .info-value,
html[data-theme] .lang-dd-toggle, html[data-theme] .lang-dd-menu,
html[data-theme] .community-box, html[data-theme] .btn-secondary-hero,
html[data-theme] .item-card, html[data-theme] .cab-card, html[data-theme] .cab-stat,
html[data-theme] .panel, html[data-theme] .auth-card {
    transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme] * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* =============================================================================
   2. SCROLLBAR - tinted per theme, because a black bar on a navy page is the
   single loudest tell that a theme was bolted on.
   ========================================================================== */
html { scrollbar-width: thin; scrollbar-color: #2f2f33 transparent; }
html[data-theme="navy"]  { scrollbar-color: #26375c transparent; }
html[data-theme="light"] { scrollbar-color: #c4ccd8 transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #2f2f33; border-radius: 10px;
    border: 2px solid transparent; background-clip: padding-box;
    transition: background .25s ease;
}
::-webkit-scrollbar-thumb:hover { background: #00e5ff; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
html[data-theme="navy"] ::-webkit-scrollbar-thumb { background: #26375c; background-clip: padding-box; }
html[data-theme="navy"] ::-webkit-scrollbar-thumb:hover { background: #4cc9ff; background-clip: padding-box; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c4ccd8; background-clip: padding-box; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #0098c7; background-clip: padding-box; }

/* =============================================================================
   3. THE SWITCH - a three-way segmented pill (moon / droplet / sun).
   It ships on every page next to the language picker, so it has to stay small
   on a 1280px header and still offer a 44px tap target inside the phone
   drawer. The glider is a single element moved by translateX; only its
   position is theme-dependent, which keeps the state readable at a glance.
   ========================================================================== */
.theme-seg {
    position: relative; display: inline-flex; align-items: center;
    padding: 3px; gap: 0; border-radius: 999px;
    background: #161616; border: 1px solid #2a2a2a;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.theme-seg:hover, .theme-seg:focus-within { border-color: var(--accent-cyan); box-shadow: 0 0 14px rgba(0, 229, 255, .28); }

.theme-seg-btn {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 26px; padding: 0; border: none; background: none;
    color: #6c7280; font-size: .74rem; line-height: 1; cursor: pointer;
    border-radius: 999px; transition: color .25s ease;
}
.theme-seg-btn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.theme-seg-btn[aria-checked="true"] { color: #fff; }

.theme-seg-glider {
    position: absolute; top: 3px; left: 3px; z-index: 1;
    width: 32px; height: 26px; border-radius: 999px;
    background: linear-gradient(135deg, #2c2c2c, #191919);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), background .3s ease, box-shadow .3s ease;
}
/* Order in the markup is dark · navy · light, so the glider index matches. */
html[data-theme="dark"]  .theme-seg-glider,
:root:not([data-theme]) .theme-seg-glider { transform: translateX(0); }
html[data-theme="navy"]  .theme-seg-glider { transform: translateX(32px); }
html[data-theme="light"] .theme-seg-glider { transform: translateX(64px); }

html[data-theme="dark"]  .theme-seg-btn[data-theme-set="dark"]  { color: #ffd66b; }
html[data-theme="navy"]  .theme-seg-btn[data-theme-set="navy"]  { color: #0b1220; }
html[data-theme="light"] .theme-seg-btn[data-theme-set="light"] { color: #ffffff; }

html[data-theme="navy"] .theme-seg { background: var(--nv-sunken); border-color: var(--nv-line-2); }
html[data-theme="navy"] .theme-seg:hover, html[data-theme="navy"] .theme-seg:focus-within {
    border-color: var(--accent-cyan); box-shadow: 0 0 16px var(--nv-glow);
}
html[data-theme="navy"] .theme-seg-btn { color: var(--nv-faint); }
html[data-theme="navy"] .theme-seg-glider {
    background: linear-gradient(135deg, #6fd6ff, #3aa8e0);
    box-shadow: 0 2px 10px rgba(76, 201, 255, .45);
}

html[data-theme="light"] .theme-seg { background: #ffffff; border-color: #d3d9e3; }
html[data-theme="light"] .theme-seg:hover, html[data-theme="light"] .theme-seg:focus-within {
    border-color: #0098c7; box-shadow: 0 0 14px rgba(0, 152, 199, .22);
}
html[data-theme="light"] .theme-seg-btn { color: #9aa3b2; }
html[data-theme="light"] .theme-seg-glider {
    background: linear-gradient(135deg, #ffd66b, #ffb800);
    box-shadow: 0 2px 7px rgba(255, 184, 0, .45);
}

/* Screen-reader-only labels for the three buttons. */
.jz-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =============================================================================
   4. HEADER + BURGER DRAWER
   `.nav-drawer` is `display: contents` on desktop, so `.nav-links` and
   `.nav-right` stay direct flex children of `.navbar` and every page's
   existing header layout is untouched. Below the breakpoint the wrapper
   becomes a real box and slides in from the right.

   WHY 1150px AND NOT 900px
   Every page used to carry its own `.nav-links { display: none }` and no two
   agreed on where: 768, 860, 900, 1100, 1150. Those are gone now, so the
   drawer has to take over at the widest of them - six nowrap links plus the
   action group need roughly 1300px, and anything narrower than that with no
   burger is a header that overflows the document sideways. The bar itself
   only shrinks at 900px, where a phone actually needs the height back.
   ========================================================================== */
.nav-drawer { display: contents; }
.nav-burger { display: none; }
.nav-scrim { display: none; }

/* Every selector below is prefixed with `html`. theme.css is linked before
   each page's inline <style>, and a media query adds no specificity - without
   the prefix a page's own `.navbar { height: 80px }` would win on source order
   and the whole responsive layer would silently do nothing. */
@media (max-width: 900px) {
    /* The bar itself: 80px + an 85px logo does not fit a 390px viewport. */
    html .navbar { height: 64px; padding: 0 16px; gap: 10px; }
    html .logo img { height: 44px; }
}

@media (max-width: 1150px) {
    /* The drawer is `position: fixed` inside `.navbar`, and a non-none
       backdrop-filter makes an element the containing block for its fixed
       descendants - the drawer would be trapped inside a 64px-tall bar. The
       bar is 95% opaque anyway, so dropping the blur here costs nothing
       visible and is the difference between a full-height panel and a sliver. */
    html .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; }

    html .nav-burger {
        display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
        margin-left: auto; width: 46px; height: 46px; padding: 0 11px;
        background: none; border: none; cursor: pointer; z-index: 2;
        -webkit-tap-highlight-color: transparent;
    }
    html .nav-burger span {
        display: block; height: 2px; width: 100%; border-radius: 2px;
        background: var(--text-color);
        transition: transform .25s ease, opacity .2s ease;
    }
    html .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    html .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    html .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    html .nav-burger:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 8px; }

    html .nav-drawer {
        display: flex; flex-direction: column; gap: 6px;
        position: fixed; top: 0; right: 0; bottom: 0;
        width: min(320px, 86vw); max-width: 100%;
        padding: 78px 20px 28px;
        background: var(--bg-color);
        border-left: 1px solid var(--border);
        box-shadow: -18px 0 44px rgba(0, 0, 0, .5);
        overflow-y: auto; overscroll-behavior: contain;
        transform: translateX(102%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        visibility: hidden;
    }
    html .nav-drawer.open { transform: translateX(0); visibility: visible; }

    html .nav-drawer .nav-links {
        display: flex; flex-direction: column; align-items: stretch;
        gap: 2px; width: 100%; flex: 0 0 auto; list-style: none;
    }
    html .nav-drawer .nav-links li { margin: 0; width: 100%; }
    html .nav-drawer .nav-links a {
        display: flex; align-items: center; gap: 12px;
        padding: 14px 12px; min-height: 48px; border-radius: 12px;
        font-size: .95rem; white-space: normal;
    }
    html .nav-drawer .nav-links a:hover,
    html .nav-drawer .nav-links a.active { background: rgba(255, 184, 0, .10); }

    html .nav-drawer .nav-right {
        display: flex; flex-direction: column; align-items: stretch;
        justify-content: flex-start; gap: 14px; width: 100%;
        margin-top: 18px; padding-top: 18px;
        border-top: 1px solid var(--border);
    }
    /* Controls that are icon-sized in the header get room to be tapped. */
    html .nav-drawer .nav-right > * { width: 100%; }
    html .nav-drawer .theme-seg { align-self: flex-start; padding: 4px; }
    html .nav-drawer .theme-seg-btn,
    html .nav-drawer .theme-seg-glider { width: 44px; height: 38px; }
    html .nav-drawer .theme-seg-btn { font-size: .88rem; }
    /* Wider buttons in the drawer mean the glider travels further. These have
       to live inside the media query: on desktop `.nav-drawer` is
       `display: contents`, so the switch is still its descendant and would
       otherwise pick up the 44px stride. */
    html .nav-drawer .theme-seg-glider { top: 4px; left: 4px; }
    html[data-theme="dark"]  .nav-drawer .theme-seg-glider { transform: translateX(0); }
    html[data-theme="navy"]  .nav-drawer .theme-seg-glider { transform: translateX(44px); }
    html[data-theme="light"] .nav-drawer .theme-seg-glider { transform: translateX(88px); }
    html .nav-drawer .lang-dd { width: 100%; }
    html .nav-drawer .lang-dd-toggle { width: 100%; justify-content: flex-start; padding: 13px 14px; }
    html .nav-drawer .lang-dd-menu { position: static; opacity: 1; visibility: visible; transform: none;
        width: 100%; margin-top: 8px; box-shadow: none; display: none; }
    html .nav-drawer .lang-dd.open .lang-dd-menu { display: block; }
    html .nav-drawer .btn-login, html .nav-drawer .auth-user {
        width: 100%; justify-content: center; padding: 14px 16px; min-height: 48px;
    }
    html .nav-drawer .btn-login span, html .nav-drawer .auth-user > span { display: inline; }
    html .nav-drawer .auth-nav { display: flex; width: 100%; }
    html .nav-drawer .auth-nav .auth-user { flex: 1; max-width: none; }
    html .nav-drawer .btn-logout { min-height: 48px; min-width: 48px; }
    html .nav-drawer .btn-discord {
        display: flex; align-items: center; justify-content: center; gap: 9px;
        width: 100%; padding: 15px 18px; min-height: 48px; text-align: center;
    }

    html .nav-scrim {
        display: block; position: fixed; inset: 0; z-index: 990;
        background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px);
        opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    html .nav-scrim.open { opacity: 1; pointer-events: auto; }
    html body.jz-nav-open { overflow: hidden; }
}

/* Very narrow phones: keep the logo from crowding the burger. */
@media (max-width: 380px) {
    html .navbar { padding: 0 12px; }
    html .logo img { height: 38px; }
}

/* =============================================================================
   5. SHARED CHROME PER THEME
   Everything below re-states surfaces that page CSS hardcodes. Grouped by the
   element, light first (ported out of theme_toggle.html) then navy.
   ========================================================================== */

/* --- Navbar ------------------------------------------------------------- */
html[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}
html[data-theme="navy"] .navbar {
    background: rgba(14, 22, 38, .92);
    border-bottom: 1px solid rgba(76, 201, 255, .18);
    box-shadow: 0 4px 26px rgba(4, 10, 22, .55);
}
html[data-theme="navy"] .nav-links a:hover,
html[data-theme="navy"] .nav-links a.active { color: var(--accent-gold); }

/* --- Footer ------------------------------------------------------------- */
html[data-theme="light"] .main-footer { background: #e4e8f0; border-top: 1px solid #d3d9e3; }
html[data-theme="light"] .copyright-badge { background: rgba(0, 0, 0, 0.04); color: #5b6573; border-color: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .copyright-badge span { color: #1a1f29; }
html[data-theme="light"] .made-with { color: #1a1f29; }
html[data-theme="light"] .social-icon-box { background: #ffffff; color: #5b6573; border-color: #d3d9e3; }

html[data-theme="navy"] .main-footer { background: var(--nv-ink); border-top: 1px solid var(--nv-line); }
html[data-theme="navy"] .copyright-badge { background: rgba(120, 160, 220, .07); color: var(--text-dim); border-color: var(--nv-line); }
html[data-theme="navy"] .copyright-badge span { color: var(--text-color); }
html[data-theme="navy"] .made-with { color: var(--text-color); }
html[data-theme="navy"] .social-icon-box { background: var(--card-bg); color: var(--text-dim); border-color: var(--nv-line); }
html[data-theme="navy"] .social-icon-box:hover { color: var(--accent-cyan); border-color: var(--nv-line-2); }
html[data-theme="navy"] .footer-col h4, html[data-theme="navy"] .footer-links a:hover { color: var(--accent-gold); }

/* --- Language picker (partials/lang_selector.html) ---------------------- */
html[data-theme="light"] .lang-dd-toggle { background: #ffffff; border-color: #d3d9e3; color: #1a1f29; }
html[data-theme="light"] .lang-dd-toggle .fa-globe { color: #0098c7; }
html[data-theme="light"] .lang-dd-caret { color: #5b6573; }
html[data-theme="light"] .lang-dd-menu { background: #ffffff; border-color: #e0e4ec; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.15); }
html[data-theme="light"] .lang-dd-menu a { color: #3a414c; }
html[data-theme="light"] .lang-dd-menu a:hover { background: rgba(0, 152, 199, 0.08); color: #1a1f29; }
html[data-theme="light"] .lang-dd-menu a.active { background: rgba(0, 152, 199, 0.12); color: #1a1f29; }
html[data-theme="light"] .lang-dd-code { color: #9aa3b2; }

html[data-theme="navy"] .lang-dd-toggle { background: var(--nv-sunken); border-color: var(--nv-line-2); color: var(--text-color); }
html[data-theme="navy"] .lang-dd-toggle:hover, html[data-theme="navy"] .lang-dd.open .lang-dd-toggle {
    border-color: var(--accent-cyan); box-shadow: 0 0 16px var(--nv-glow);
}
html[data-theme="navy"] .lang-dd-toggle .fa-globe { color: var(--accent-cyan); }
html[data-theme="navy"] .lang-dd-caret { color: var(--text-dim); }
html[data-theme="navy"] .lang-dd-menu { background: var(--card-bg); border-color: var(--nv-line-2); box-shadow: var(--nv-shadow); }
html[data-theme="navy"] .lang-dd-menu a { color: var(--text-dim); }
html[data-theme="navy"] .lang-dd-menu a:hover { background: rgba(76, 201, 255, .10); color: var(--text-color); }
html[data-theme="navy"] .lang-dd-menu a.active { background: rgba(76, 201, 255, .16); color: var(--text-color); }
html[data-theme="navy"] .lang-dd-code { color: var(--nv-faint); }

/* --- Auth control (partials/login_button.html) -------------------------- */
html[data-theme="navy"] .btn-login,
html[data-theme="navy"] .auth-user,
html[data-theme="navy"] .btn-logout { border-color: var(--nv-line-2); color: var(--text-color); }
html[data-theme="navy"] .btn-logout { color: var(--text-dim); }

/* =============================================================================
   6. PER-PAGE NAVY SURFACES
   ========================================================================== */

/* --- home.html ---------------------------------------------------------- */
html[data-theme="light"] .hero p { color: #dfe4ec; }
html[data-theme="light"] .btn-secondary-hero { background: #ffffff; color: #1a1f29; border-color: #d3d9e3; }
html[data-theme="light"] .btn-secondary-hero:hover { background: #f1f3f8; border-color: #9aa3b2; }
html[data-theme="light"] .community-box {
    background: linear-gradient(135deg, #f4f5ff, #eceeff);
    border: 1px solid rgba(88, 101, 242, 0.35);
    color: #4750c5; font-weight: 700;
    box-shadow: 0 2px 10px rgba(88, 101, 242, 0.12);
}
html[data-theme="light"] .community-box:hover {
    background: linear-gradient(135deg, #5865F2, #4954d6);
    border-color: #5865F2; color: #ffffff;
    box-shadow: 0 8px 22px rgba(88, 101, 242, 0.35);
    transform: translateY(-2px);
}
html[data-theme="light"] .cluster-title { color: #1a1f29; }
html[data-theme="light"] .cluster-title span { color: #c98a00; text-shadow: none; }
html[data-theme="light"] .cluster-tab { background: #ffffff; border-color: #d3d9e3; color: #5b6573; }
html[data-theme="light"] .cluster-tab:hover { background: rgba(0, 152, 199, 0.06); color: #1a1f29; border-color: #0098c7; }
html[data-theme="light"] .stat-box { background: #ffffff; border-color: #e0e4ec; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05); }
html[data-theme="light"] .stat-box:hover { background: #ffffff; border-color: #0098c7; }
html[data-theme="light"] .stat-box .num { color: #1a1f29 !important; }

html[data-theme="navy"] .btn-secondary-hero { background: var(--nv-raised); border-color: var(--nv-line-2); color: var(--text-color); }
html[data-theme="navy"] .btn-secondary-hero:hover { background: #23325a; border-color: var(--accent-cyan); }
html[data-theme="navy"] .community-box { background: rgba(88, 101, 242, .18); border-color: rgba(120, 132, 255, .5); color: #c3caff; }
html[data-theme="navy"] .cluster-tab { background: var(--card-bg); border-color: var(--nv-line); color: var(--text-dim); }
html[data-theme="navy"] .cluster-tab:hover { background: var(--nv-raised); color: var(--text-color); border-color: var(--accent-cyan); }
html[data-theme="navy"] .stat-box { background: var(--card-bg); border-color: var(--nv-line); box-shadow: var(--nv-shadow); }
html[data-theme="navy"] .stat-box:hover { border-color: var(--accent-cyan); }
html[data-theme="navy"] .wipe-band { background: var(--nv-sunken); border-bottom-color: rgba(255, 122, 69, .20); }
html[data-theme="navy"] .wipe-cal { background: var(--card-bg); border-color: var(--nv-line); }
html[data-theme="navy"] .wc-seg { background: var(--nv-sunken); }

/* --- config.html / rules.html ------------------------------------------- */
html[data-theme="light"] .config-header h2 span,
html[data-theme="light"] .rules-header h2 span {
    background: linear-gradient(135deg, #c98a00, #a86f00);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .tab-content h3 {
    background: linear-gradient(135deg, #0098c7, #0073a8);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .selector-box { background: #ffffff; border-color: #e0e4ec; }
html[data-theme="light"] .selector-dropdown { background-color: #f4f6fb; border-color: rgba(0, 152, 199, 0.4); color: #1a1f29; }
html[data-theme="light"] .selector-dropdown option { background-color: #ffffff; color: #1a1f29; }
html[data-theme="light"] .selector-dropdown:hover { background-color: #eef1f7; box-shadow: 0 0 10px rgba(0, 152, 199, 0.12); }
html[data-theme="light"] .tab-menu-sidebar .tab-btn { background: #ffffff; border-color: #e0e4ec; color: #5b6573; }
html[data-theme="light"] .tab-menu-sidebar .tab-btn.active { background: rgba(0, 152, 199, 0.12); color: #0a3d4a; border-color: #0098c7; }
html[data-theme="light"] .tab-content-wrapper { background: #ffffff; border-color: #e6eaf1; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); }
html[data-theme="light"] .info-item { background: rgba(0, 152, 199, 0.05); border-color: rgba(0, 152, 199, 0.12); }
html[data-theme="light"] .info-value { color: #1a1f29; background: rgba(201, 138, 0, 0.12); border-color: rgba(201, 138, 0, 0.28); }
html[data-theme="light"] .tab-menu .tab-btn { background: #ffffff; border-color: #e0e4ec; color: #5b6573; }
html[data-theme="light"] .rules-list li { background: rgba(0, 152, 199, 0.06); border-color: rgba(0, 152, 199, 0.15); color: #2b313b; }
html[data-theme="light"] .rules-list li:hover { background: rgba(0, 152, 199, 0.12); color: #0a3d4a; }
html[data-theme="light"] .rules-list li.warning { color: #c0392b; border-color: rgba(220, 50, 40, 0.4); }
html[data-theme="light"] .mode-btn { background: #ffffff; border-color: #d3d9e3; }
html[data-theme="light"] .mode-btn.active.pvp { color: #c0392b; background: rgba(255, 77, 0, 0.12); }
html[data-theme="light"] .mode-btn.active.pve { color: #0a3d4a; background: rgba(0, 152, 199, 0.12); }

html[data-theme="navy"] .selector-box { background: linear-gradient(145deg, var(--nv-sunken), var(--card-bg)); border-color: rgba(76, 201, 255, .16); }
html[data-theme="navy"] .selector-dropdown { background-color: var(--nv-raised); border-color: rgba(76, 201, 255, .35); color: var(--text-color); }
html[data-theme="navy"] .selector-dropdown option { background-color: var(--card-bg); color: var(--text-color); }
/* :not(.active) matters. This selector is (0,2,1) while a page's own
 * `.tab-btn.active { background: … }` is only (0,2,0), so the resting gradient
 * would paint straight over the selected tab and the sidebar would stop
 * showing which section you are on. */
html[data-theme="navy"] .tab-btn:not(.active) { background: linear-gradient(145deg, var(--nv-sunken), var(--card-bg)); border-color: rgba(76, 201, 255, .16); color: var(--text-dim); }
html[data-theme="navy"] .tab-btn.active { background: rgba(76, 201, 255, .13); border-color: rgba(76, 201, 255, .5); color: var(--text-color); }
html[data-theme="navy"] .tab-content-wrapper { background: linear-gradient(145deg, var(--nv-sunken), var(--card-bg)); border-color: rgba(76, 201, 255, .16); box-shadow: var(--nv-shadow); }
html[data-theme="navy"] .info-item { background: rgba(76, 201, 255, .06); border-color: rgba(76, 201, 255, .16); }
html[data-theme="navy"] .info-value { background: rgba(255, 194, 71, .12); border-color: rgba(255, 194, 71, .28); color: var(--text-color); }
html[data-theme="navy"] .rules-list li { background: rgba(76, 201, 255, .06); border-color: rgba(76, 201, 255, .14); }
html[data-theme="navy"] .rules-list li:hover { background: rgba(76, 201, 255, .12); }
html[data-theme="navy"] .mode-btn { background: var(--card-bg); border-color: var(--nv-line-2); }

/* --- join.html / info.html ---------------------------------------------- */
html[data-theme="navy"] .join-hero::after {
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
                linear-gradient(180deg, rgba(14, 22, 38, .55), var(--bg-color) 92%);
}
html[data-theme="navy"] .info-hero::after {
    background: linear-gradient(180deg, rgba(14, 22, 38, .72) 0%, rgba(14, 22, 38, .9) 62%, var(--bg-color) 100%);
}
html[data-theme="navy"] .hub-pill,
html[data-theme="navy"] .jcmd-name,
html[data-theme="navy"] .cmd-name { background: var(--nv-sunken); }
html[data-theme="navy"] .ch-link:hover { background: var(--nv-raised); color: var(--text-color); }
html[data-theme="navy"] .side-grp { color: var(--nv-faint); }

/* --- leaderboard.html --------------------------------------------------- */
html[data-theme="navy"] .aurora span { opacity: .42; }
html[data-theme="navy"] .glass-card {
    background: rgba(22, 33, 58, .72);
    border: 1px solid var(--nv-line-2);
    box-shadow: 0 40px 80px rgba(4, 10, 22, .5), inset 0 1px 0 rgba(140, 180, 240, .10);
}
html[data-theme="navy"] .lb-line { background: rgba(16, 26, 46, .7); border: 1px solid var(--nv-line); }
html[data-theme="navy"] .lb-line.is-active { background: rgba(255, 194, 71, .14); border-color: rgba(255, 194, 71, .45); }

/* --- store.html --------------------------------------------------------- */
html[data-theme="navy"] .gateway-card {
    background: linear-gradient(145deg, var(--nv-sunken), var(--card-bg));
    border-color: rgba(76, 201, 255, .16);
    box-shadow: var(--nv-shadow);
}
html[data-theme="navy"] .faq-item { background: rgba(76, 201, 255, .05); border-color: rgba(76, 201, 255, .15); }
html[data-theme="navy"] .faq-item:hover { background: rgba(76, 201, 255, .10); border-color: var(--accent-cyan); }

/* --- shop.html ---------------------------------------------------------- */
html[data-theme="navy"] .store-tab { background: var(--card-bg); border-color: var(--nv-line); color: var(--text-dim); }
html[data-theme="navy"] .sale-banner,
html[data-theme="navy"] .dino-level-notice { background-color: var(--card-bg); }
html[data-theme="navy"] .player-card {
    background: linear-gradient(135deg, rgba(255, 122, 69, .08), rgba(76, 201, 255, .06)), var(--card-bg);
    border-color: var(--nv-line);
}
html[data-theme="navy"] .cluster-bar {
    background: linear-gradient(135deg, rgba(76, 201, 255, .10), rgba(255, 194, 71, .06)), var(--card-bg);
    border-color: rgba(76, 201, 255, .28);
    box-shadow: 0 6px 20px rgba(4, 10, 22, .4);
}
html[data-theme="navy"] .cluster-modal { background: var(--card-bg); border-color: var(--nv-line-2); box-shadow: var(--nv-shadow); }
html[data-theme="navy"] .cluster-opt { background: linear-gradient(145deg, var(--nv-sunken), var(--card-bg)); border-color: var(--nv-line); }
html[data-theme="navy"] .shop-select { background-color: var(--nv-raised); border-color: rgba(76, 201, 255, .32); color: var(--text-color); }
html[data-theme="navy"] .shop-search input { background: var(--nv-sunken); border-color: rgba(76, 201, 255, .22); color: var(--text-color); }
html[data-theme="navy"] .cat-btn { background: linear-gradient(145deg, var(--nv-sunken), var(--nv-raised)); border-color: var(--nv-line); }
html[data-theme="navy"] .item-card {
    background: linear-gradient(160deg, #1d2a48, #141e34);
    border-color: var(--nv-line-2);
    box-shadow: 0 6px 22px rgba(4, 10, 22, .5), inset 0 1px 0 rgba(140, 180, 240, .07);
}
html[data-theme="navy"] .item-media { background: radial-gradient(circle at 50% 40%, rgba(76, 201, 255, .10), transparent 70%), var(--nv-sunken); }
html[data-theme="navy"] .stat-chip { background: rgba(76, 201, 255, .08); border-color: rgba(76, 201, 255, .2); }
html[data-theme="navy"] .desc-modal,
html[data-theme="navy"] .opt-modal { background: var(--card-bg); border-color: var(--nv-line-2); box-shadow: var(--nv-shadow); }
html[data-theme="navy"] .opt-modal-foot { background: var(--nv-sunken); border-color: var(--nv-line); }
html[data-theme="navy"] .opt-pill { background: var(--nv-raised); border-color: var(--nv-line-2); color: var(--text-color); }
html[data-theme="navy"] .opt-select,
html[data-theme="navy"] .opt-select option { background: var(--nv-raised); border-color: var(--nv-line-2); color: var(--text-color); }
html[data-theme="navy"] .cart-drawer { background: var(--nv-sunken); border-left-color: rgba(255, 194, 71, .22); }
html[data-theme="navy"] .cart-line { background: var(--card-bg); border-color: var(--nv-line); }
html[data-theme="navy"] .cart-foot { background: var(--nv-ink); }
html[data-theme="navy"] .qty-ctl { border-color: var(--nv-line-2); }
html[data-theme="navy"] .qty-ctl button { background: var(--nv-raised); color: var(--text-color); }

/* --- checkout.html / payment_status.html -------------------------------- */
html[data-theme="navy"] .panel,
html[data-theme="navy"] .card {
    background: linear-gradient(160deg, var(--card-bg), var(--nv-sunken));
    border-color: var(--nv-line);
}
html[data-theme="navy"] .bonus-amt { background: var(--nv-sunken); border-color: var(--nv-line-2); }
html[data-theme="navy"] .line img, html[data-theme="navy"] .line .ph { background: var(--nv-sunken); }
html[data-theme="navy"] .order-no { background: var(--nv-sunken); border-color: var(--nv-line-2); color: var(--text-color); }

/* --- cabinet.html ------------------------------------------------------- */
html[data-theme="navy"] .cab-profile { background: linear-gradient(135deg, var(--card-bg), var(--nv-sunken)); }
html[data-theme="navy"] .cab-avatar { background: linear-gradient(135deg, var(--nv-raised), var(--card-bg)); }
html[data-theme="navy"] .cab-stat,
html[data-theme="navy"] .cab-card,
html[data-theme="navy"] .cab-spin,
html[data-theme="navy"] .cab-vip-level { background: var(--card-bg); box-shadow: var(--nv-shadow); }
html[data-theme="navy"] .cab-promo-form input,
html[data-theme="navy"] .eos-cmd { background: var(--nv-sunken); color: var(--text-color); }
html[data-theme="navy"] .cab-modal-box { background: var(--card-bg); }
html[data-theme="navy"] .cab-settings-btn { background: var(--nv-raised); color: var(--text-color); }
html[data-theme="navy"] .cab-tab:hover { color: var(--text-color); }

/* --- login.html / register.html ----------------------------------------- */
html[data-theme="navy"] .auth-card {
    background: linear-gradient(145deg, var(--nv-sunken), var(--card-bg));
    border-color: var(--nv-line-2);
    box-shadow: 0 24px 60px rgba(4, 10, 22, .55);
}
html[data-theme="navy"] .field input { background: var(--nv-raised); border-color: rgba(76, 201, 255, .2); color: var(--text-color); }
html[data-theme="navy"] .field input:focus { background: var(--nv-sunken); border-color: var(--accent-cyan); }
html[data-theme="navy"] .field input::placeholder { color: var(--nv-faint); }

/* --- legal.html --------------------------------------------------------- */
html[data-theme="navy"] .legal-article { background: var(--card-bg); border-color: var(--nv-line); box-shadow: var(--nv-shadow); }

/* --- vip_info.html / vip_status.html ------------------------------------ */
html[data-theme="navy"] .table-card { background: linear-gradient(160deg, var(--card-bg), var(--nv-sunken)); border-color: var(--nv-line); }
html[data-theme="navy"] table.vip thead th { background: var(--panel-head); }
html[data-theme="navy"] table.vip th.perk, html[data-theme="navy"] table.vip td.perk { background: rgba(120, 160, 220, .05); }
html[data-theme="navy"] .dash { color: var(--nv-faint); }

/* --- lootboxes.html / lootbox_result.html ------------------------------- */
html[data-theme="navy"] .btn.ghost { border-color: var(--nv-line-2); color: var(--text-color); }

/* =============================================================================
   7. SHARED RESPONSIVE RULES
   The floor every page has to clear: no sideways scroll, a reachable header,
   tap targets you can actually hit and text you can read without zooming.
   ========================================================================== */
@media (max-width: 900px) {
    html, body { max-width: 100%; overflow-x: hidden; }

    /* Media and embeds are the usual source of a 400px-wide body. */
    html img, html svg, html video, html canvas, html iframe { max-width: 100%; }

    /* Wide tables scroll inside themselves rather than pushing the page. */
    html table { max-width: 100%; }

    /* Anything that overflows horizontally gets its own scroller instead of
       widening the document. Pages opt in by wrapping the element. */
    html .jz-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Fixed-width panels are the other half of the problem: a drawer or modal
       declared at 420px is 30px wider than the phone it is opening on. */
    html .cart-drawer, html .desc-modal, html .opt-modal, html .cluster-modal,
    html .cab-modal-box { max-width: 100vw; }
}

@media (max-width: 768px) {
    /* Footers on this site are all `padding: 3rem 10%` - a 10% gutter on a
       390px screen wastes a fifth of the width. */
    html .main-footer { padding-left: 6%; padding-right: 6%; }
    html .footer-container { flex-direction: column; gap: 22px; text-align: center; }
    html .footer-column,
    html .footer-column.central,
    html .footer-column.right { align-items: center; text-align: center; }
    html .copyright-badge { padding: 8px 16px; font-size: .8rem; }

    /* Below this size a link is a thumb target, not a mouse target. */
    html .btn-discord, html .btn-login, html .auth-user { min-height: 44px; }
}

@media (max-width: 520px) {
    /* The last resort for a header on a 320px phone: let the logo shrink
       rather than push the burger off screen. */
    html .logo img { height: 34px; }
}

/* --- avatars (partials/avatar.html) ---------------------------------------
   A Discord picture laid over the player's initials. The size, ring and
   colours are the host's business; this only makes the two layers stack. */
.jz-ava {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden; border-radius: 50%; line-height: 1;
    width: 36px; height: 36px; font-weight: 900; font-size: .8rem; letter-spacing: .5px;
    color: var(--accent-gold); background: linear-gradient(135deg, #262626, #151515);
}
.jz-ava > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html[data-theme="light"] .jz-ava { background: linear-gradient(135deg, #fff, #e9edf4); }
html[data-theme="navy"] .jz-ava { background: linear-gradient(135deg, var(--nv-raised), var(--card-bg)); }