/**
 * Xoompa — Global Stylesheet
 * 
 * Always loaded on every page (cached long-term). Contains:
 *   1. Design tokens (CSS custom properties)
 *   2. Base / element resets
 *   3. Layout chrome (header, footer, main)
 *   4. Shared components (.xn-menu nav system, status badge, nav dividers)
 * 
 * Page-specific styles live in /css/pages/*.css and are loaded
 * only on the pages that need them.
 *
 * @version 2026-06-12 — nav system consolidated into .xn-menu (was:
 *                       .mega-menu + .interactive-games-menu + .dropdown-menu-dark
 *                       triplicate). See the section 4 comment for the new
 *                       class hierarchy.
 */

/* ============================================================================
 * 1. DESIGN TOKENS
 * ============================================================================
 * Brand colors, spacing scale, radius scale, shadow scale, type scale.
 * All component CSS should reference these — never hardcode hex/rgb.
 * ============================================================================ */

:root {
    /* Brand palette */
    --xoompa-red: #e10600;
    --xoompa-red-dark: #b10000;
    --xoompa-yellow: #f5c400;
    --xoompa-black: #0b0b0b;
    --xoompa-black-deep: #050505;
    --xoompa-white: #ffffff;
    --xoompa-white-soft: #f7f7f7;
    --xoompa-gray: #b8b8b8;
    --xoompa-red-rgb: 225, 6, 0;
    --xoompa-yellow-rgb: 245, 196, 0;

    /* Spacing scale (studio) */
    --studio-space-1: 0.25rem;
    --studio-space-2: 0.5rem;
    --studio-space-3: 0.75rem;
    --studio-space-4: 1rem;
    --studio-space-5: 1.25rem;

    /* Radius scale (studio) */
    --studio-radius-sm: 0.375rem;
    --studio-radius-md: 0.5rem;
    --studio-radius-lg: 1rem;
    --studio-radius-pill: 999px;

    /* Shadow scale (studio) */
    --studio-shadow-sm: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
    --studio-shadow-md: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.16);
    --studio-shadow-lg: 0 0.75rem 1.8rem rgba(0, 0, 0, 0.2);

    /* Neutral scale (studio) */
    --studio-neutral-0: var(--xoompa-white);
    --studio-neutral-25: var(--xoompa-white-soft);
    --studio-neutral-100: #f8f9fa;
    --studio-neutral-300: var(--xoompa-gray);
    --studio-neutral-700: var(--xoompa-black);
    --studio-neutral-900: var(--xoompa-black-deep);

    /* Semantic colors (studio) */
    --studio-color-live: #2ed682;
    --studio-color-live-soft: rgba(46, 214, 130, 0.2);
    --studio-color-warning: var(--xoompa-yellow);
    --studio-color-danger: var(--xoompa-red);
    --studio-color-muted: rgba(184, 184, 184, 0.75);

    /* Type scale (studio) */
    --studio-type-h1: 1.85rem;
    --studio-type-h2: 1.4rem;
    --studio-type-body: 1rem;
    --studio-type-caption: 0.8rem;

    /* Transition / animation timing — use these instead of hardcoding 0.2s/0.25s */
    --xoompa-duration-instant: 0ms;
    --xoompa-duration-fast:    150ms;
    --xoompa-duration-base:    200ms;
    --xoompa-duration-slow:    250ms;
    --xoompa-duration-slower:  400ms;
    --xoompa-ease:             cubic-bezier(0.2, 0, 0, 1);
    --xoompa-ease-in:          cubic-bezier(0.4, 0, 1, 1);
    --xoompa-ease-out:         cubic-bezier(0, 0, 0.2, 1);
    --xoompa-ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-index scale — semantic, matches existing .z-* utility classes (Bootstrap convention) */
    --xoompa-z-hide:          -1;
    --xoompa-z-base:           0;
    --xoompa-z-raised:         1;
    --xoompa-z-dropdown:    1000;
    --xoompa-z-sticky:      1020;
    --xoompa-z-fixed:       1030;
    --xoompa-z-modal-bg:    1040;
    --xoompa-z-modal:       1050;
    --xoompa-z-popover:     1070;
    --xoompa-z-tooltip:     1080;
    --xoompa-z-toast:       1090;
    --xoompa-z-overlay:     9999;

    /* Opacity scale (semantic) */
    --xoompa-opacity-disabled: 0.4;
    --xoompa-opacity-muted:    0.6;
    --xoompa-opacity-subtle:   0.08;
    --xoompa-opacity-strong:   0.92;
    --xoompa-opacity-full:     1;
}


/* ============================================================================
 * 2. BASE / ELEMENT RESETS
 * ============================================================================
 * Dark-theme baseline. Override at component level as needed.
 * ============================================================================ */

body {
    background-color: var(--xoompa-black);
    color: var(--xoompa-white-soft);
    /* Defense against full-bleed elements using `width: 100vw` —
       when a vertical scrollbar appears, 100vw includes the scrollbar
       width, which would push the page wider than the visible viewport
       and produce a horizontal scrollbar. `overflow-x: hidden` clips it
       without disabling vertical scroll. (Same as `overflow-x: clip`
       but with broader browser support.) */
    overflow-x: hidden;
}

/* Same guard on <html> for older WebKit that uses the document
   element as the scroll container rather than <body>. */
html {
    overflow-x: hidden;
}

/* Global heading colors for dark theme — override at component level as needed */
h1, h2, h3, h4, h5, h6 {
    color: var(--xoompa-white);
}

h1 { font-size: 2.5rem; font-weight: 800; }
h2 { font-size: 2rem; font-weight: 700; }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 600; }
h5 { font-size: 1.1rem; font-weight: 600; }
h6 { font-size: 1rem; font-weight: 600; }

/* Body/paragraph text on dark bg */
p { color: var(--xoompa-white-soft); }

/* Muted/secondary text */
.text-muted { color: rgba(184, 184, 184, 0.75) !important; }
.text-muted-50 { color: rgba(184, 184, 184, 0.5) !important; }

a {
    text-decoration: none;
}

/* ============================================================================
 * 3. LAYOUT CHROME
 * ============================================================================
 * Site header (sticky nav), main wrapper, footer, legal links.
 * ============================================================================ */

.site-header {
    background: linear-gradient(140deg, rgba(10, 10, 10, 0.96), rgba(5, 5, 5, 0.96));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(var(--xoompa-red-rgb), 0.14);
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.4);
    position: sticky;
    top: 0;
    z-index: 1100;
    /* !important needed to override Bootstrap .py-2 on the <header> tag */
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    transition: padding var(--xoompa-duration-slow) var(--xoompa-ease), box-shadow var(--xoompa-duration-slow) var(--xoompa-ease);
}

.site-header .navbar {
    min-height: 40px;
    transition: min-height var(--xoompa-duration-slow) var(--xoompa-ease);
}

.site-header .navbar-brand img {
    width: auto;
    max-width: 100%;
    transition: height var(--xoompa-duration-slow) var(--xoompa-ease), opacity var(--xoompa-duration-base) var(--xoompa-ease);
}

.site-header .navbar-logo--wide {
    height: 52px;
    display: block;
}

.site-header .navbar-logo--compact {
    height: 28px;
    display: none;
}

/* Mobile: hide the wide logo, show the compact word logo */
@media (max-width: 991.98px) {
    .site-header .navbar-logo--wide {
        display: none !important;
    }
    .site-header .navbar-logo--compact {
        display: block !important;
    }
}

.site-header.shrunk {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.45);
}

.site-header.shrunk .navbar {
    min-height: 32px;
}

.site-header.shrunk .navbar-logo--wide {
    display: none;
}

.site-header.shrunk .navbar-logo--compact {
    display: block;
    height: 22px;
}

.site-header .navbar-brand {
    margin-right: 1rem;
}

.site-header .navbar-nav {
    gap: 0.35rem;
}

.site-header .navbar-nav .nav-link {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    font-size: 0.92rem;
}

.site-header .navbar-nav .nav-link {
    font-weight: 600;
    letter-spacing: 0.2px;
    color: rgba(247, 247, 247, 0.9);
    transition: color var(--xoompa-duration-base) var(--xoompa-ease), transform var(--xoompa-duration-base) var(--xoompa-ease);
}

.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus,
.site-header .navbar-nav .nav-link.active {
    color: var(--xoompa-red);
    transform: translateY(-1px);
}

.site-header .navbar-nav .nav-link.rounded-pill,
.site-header .navbar-nav .nav-link.navbar-action-pill {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(10px);
}

.site-header .navbar-nav .nav-link.rounded-pill:hover,
.site-header .navbar-nav .nav-link.rounded-pill:focus,
.site-header .navbar-nav .nav-link.rounded-pill.active,
.site-header .navbar-nav .nav-link.navbar-action-pill:hover,
.site-header .navbar-nav .nav-link.navbar-action-pill:focus,
.site-header .navbar-nav .nav-link.navbar-action-pill.active {
    border-color: rgba(var(--xoompa-red-rgb), 0.3);
    background: rgba(var(--xoompa-red-rgb), 0.12);
}

.site-header .navbar-coin-pill {
    gap: 0.45rem;
    color: var(--xoompa-white) !important;
    /* M6: lighter so it doesn't dominate the nav */
    background: rgba(15, 23, 42, 0.32) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.site-header .navbar-coin-pill .navbar-coin-balance {
    font-size: 0.86rem;
    font-weight: 800;
}

.site-header .navbar-coin-pill .navbar-coin-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    color: var(--xoompa-white);
    background: var(--xoompa-red);
    border-radius: 999px;
}


/* ============================================================================
 * 4. RESPONSIVE (max-width: 1199.98px)
 * ============================================================================
 * Site-header compact layout for tablets/mobile.
 * ============================================================================ */

@media (max-width: 1199.98px) {
    .site-header { padding-top: 0.15rem !important; padding-bottom: 0.15rem !important; }
    .site-header .navbar { min-height: 36px; }
    .site-header .navbar-logo--wide { display: none; }
    .site-header .navbar-logo--compact { display: block; height: 26px; width: auto; }

    .site-header .navbar-collapse {
        margin-top: 0.4rem;
        padding: 0.5rem;
        background: rgba(5, 5, 8, 0.98);
        border: 1px solid rgba(var(--xoompa-red-rgb), 0.18);
        border-radius: 10px;
        max-height: 75vh;
        overflow-y: auto;
    }

    .site-header .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
    }

    .site-header .dropdown-menu.xn-menu.xn-menu--games.show {
        display: flex !important;
    }

    .site-header .nav-divider {
        display: none;
    }
}


/* ============================================================================
 * 5. MAIN / FOOTER
 * ============================================================================ */

main {
    min-height: 60vh;
}

footer {
    background: var(--xoompa-black-deep);
    border-top: 1px solid rgba(var(--xoompa-red-rgb), 0.2);
}

.legal-links a {
    color: rgba(203, 203, 203, 0.85);
    transition: color var(--xoompa-duration-base) var(--xoompa-ease);
}

.legal-links a:hover {
    color: #ffffff;
}

/* ============================================================================
 * 6. SHARED COMPONENTS
 * ============================================================================
 * Reusable BEM components used across the site (mega menu, status badge,
 * nav dividers, etc.).
 * ============================================================================ */

.game-status-badge {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.18rem 0.45rem;
    border-radius: var(--studio-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(247, 247, 247, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 600;
}

.game-status-badge--live {
    background: var(--studio-color-live-soft);
    color: var(--studio-color-live);
    border-color: rgba(46, 214, 130, 0.4);
}

.game-status-badge--queued {
    background: rgba(245, 196, 0, 0.18);
    color: var(--studio-color-warning);
    border-color: rgba(245, 196, 0, 0.35);
}

.game-status-badge--ended {
    background: rgba(184, 184, 184, 0.12);
    color: rgba(184, 184, 184, 0.85);
    border-color: rgba(184, 184, 184, 0.2);
}
/* ============================================================================
 * 4. NAV MENU SYSTEM (Xoompa unified)
 * ============================================================================
 * Single dropdown design system for the entire site header.
 *
 *   .xn-menu            Base — dark glassmorphism with red accent border,
 *                       entrance animation, shared by every header menu.
 *   .xn-menu--play      Play mega-menu (2-col category list, 460px min-width)
 *   .xn-menu--games     Interactive Games mega-menu (2-col game grid with
 *                       icon-circles, 560px width, footer CTA)
 *   .xn-menu--simple    Plain dropdown (Community, Studio, XSP, User, etc.)
 *   .xn-menu--wide      Wider variant (used by Notifications)
 *
 * Sub-components:
 *   .xn-menu__header       — eyebrow + heading + count pill strip
 *   .xn-menu__header-text  — flex column for eyebrow/heading
 *   .xn-menu__eyebrow      — small uppercase red label
 *   .xn-menu__heading      — main title
 *   .xn-menu__count        — count pill on the right
 *   .xn-menu__body         — body grid wrapper (used by Play)
 *   .xn-menu__featured     — featured links column (used by Play)
 *   .xn-menu__category-list — list of category links
 *   .xn-menu__list         — scrollable item list (used by Games)
 *   .xn-menu__item         — single item row
 *   .xn-menu__item--primary — featured "Browse all" row
 *   .xn-menu__icon         — right-arrow icon on featured row
 *   .xn-menu__icon-circle  — 32px gradient square (game icon)
 *   .xn-menu__icon-circle--red — red variant for the primary row
 *   .xn-menu__details      — flex column for title/description
 *   .xn-menu__title        — item title
 *   .xn-menu__description  — item description (2-line clamp)
 *   .xn-menu__footer       — bottom area (used by Games)
 *
 * Animation:
 *   --xn-menu-anim   keyframe: opacity + translateY + scale (180ms ease-out)
 *
 * Replaces the previous `.mega-menu` + `.interactive-games-menu` +
 * `.site-header .dropdown-menu.dropdown-menu-dark` triplicate.
 * ============================================================================ */

/* -- Base ------------------------------------------------------------------ */
.xn-menu {
    background: linear-gradient(160deg, rgba(18, 18, 22, 0.98), rgba(8, 8, 12, 0.98));
    border: 1px solid rgba(var(--xoompa-red-rgb), 0.28);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    color: rgba(247, 247, 247, 0.92);
    padding: 0;
    overflow: hidden;
    animation: xn-menu-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top left;
}
.xn-menu--simple {
    padding: 0.4rem;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transform-origin: top right;
    animation-name: xn-menu-in;
}
.xn-menu--wide {
    min-width: 320px;
    max-width: 420px;
}
.xn-menu--play {
    min-width: 460px;
    max-width: calc(100vw - 2rem);
}
.xn-menu--games {
    width: 560px;
    max-width: calc(100vw - 2rem);
    /* display set by .show below so Bootstrap's default .dropdown-menu
       { display: none } actually hides the menu on page load. */
    flex-direction: column;
    max-height: min(80vh, 640px);
    margin-top: 0.5rem;
    --bs-dropdown-min-width: 560px;
    inset: 100% auto auto 0;
    transform-origin: top left;
}
.xn-menu--games.show {
    display: flex;
}

@keyframes xn-menu-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* -- Header (Play, Games) -------------------------------------------------- */
.xn-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.75rem;
    background: linear-gradient(90deg, rgba(var(--xoompa-red-rgb), 0.18), rgba(var(--xoompa-red-rgb), 0) 70%);
    border-bottom: 1px solid rgba(var(--xoompa-red-rgb), 0.25);
    flex-shrink: 0;
}
.xn-menu__header-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.xn-menu__eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(var(--xoompa-red-rgb), 0.95);
    font-weight: 700;
}
.xn-menu__heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
}
.xn-menu__count {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(247, 247, 247, 0.7);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}

/* -- Body (Play mega-menu grid) ------------------------------------------- */
.xn-menu__body {
    padding: 0.65rem 0.75rem 0.75rem;
    margin: 0;
}
.xn-menu__featured {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.xn-menu__category-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.xn-menu__category-list li + li {
    margin-top: 0.35rem;
}
.xn-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.xn-menu .dropdown-item small {
    display: block;
    color: rgba(184, 184, 184, 0.75);
    font-size: 0.7rem;
    font-weight: 500;
}
.xn-menu .dropdown-item i {
    font-size: 1rem;
    color: rgba(var(--xoompa-red-rgb), 0.8);
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
}
.xn-menu__featured .dropdown-item {
    padding: 0.75rem 0.9rem;
    background: rgba(10, 10, 10, 0.45);
    border: 1px solid rgba(var(--xoompa-red-rgb), 0.18);
    border-radius: 10px;
}
.xn-menu__featured .dropdown-item:hover {
    background: rgba(var(--xoompa-red-rgb), 0.12);
}
.xn-menu__category-list .dropdown-item {
    padding: 0.55rem 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
}
.xn-menu__category-list .dropdown-item:hover,
.xn-menu__category-list .dropdown-item:focus-visible {
    background-color: rgba(var(--xoompa-red-rgb), 0.12);
    color: #ffffff;
}

/* -- Simple dropdown items (Community, Studio, XSP, User) ----------------- */
.xn-menu--simple .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    color: rgba(247, 247, 247, 0.92);
    transition: background-color var(--xoompa-duration-base) var(--xoompa-ease),
                color var(--xoompa-duration-base) var(--xoompa-ease),
                transform var(--xoompa-duration-base) var(--xoompa-ease);
}
.xn-menu--simple .dropdown-item:hover,
.xn-menu--simple .dropdown-item:focus-visible {
    background-color: rgba(var(--xoompa-red-rgb), 0.12);
    color: #ffffff;
    transform: translateX(2px);
    outline: none;
}
.xn-menu--simple .dropdown-item i {
    font-size: 1.1rem;
    color: rgba(var(--xoompa-red-rgb), 0.9);
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}
.xn-menu--simple .dropdown-item small {
    color: rgba(184, 184, 184, 0.78);
    font-size: 0.72rem;
    display: block;
    margin-top: 0.1rem;
}
.xn-menu--simple .dropdown-divider {
    border-color: rgba(var(--xoompa-red-rgb), 0.18);
    margin: 0.3rem 0;
}

/* -- Games list (2-col scrollable) ----------------------------------------- */
.xn-menu__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    overflow-y: auto;
    padding: 0.5rem;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--xoompa-red-rgb), 0.5) transparent;
}
.xn-menu__list::-webkit-scrollbar { width: 6px; }
.xn-menu__list::-webkit-scrollbar-track { background: transparent; }
.xn-menu__list::-webkit-scrollbar-thumb {
    background: rgba(var(--xoompa-red-rgb), 0.4);
    border-radius: 3px;
}
.xn-menu__list::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--xoompa-red-rgb), 0.7);
}

/* -- Item rows (Games menu) ----------------------------------------------- */
.xn-menu__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: 1px solid transparent;
    transition: background-color var(--xoompa-duration-base) var(--xoompa-ease),
                border-color var(--xoompa-duration-base) var(--xoompa-ease),
                transform var(--xoompa-duration-base) var(--xoompa-ease);
    min-width: 0;
}
.xn-menu__item:hover,
.xn-menu__item:focus-visible {
    background-color: rgba(var(--xoompa-red-rgb), 0.12);
    border-color: rgba(var(--xoompa-red-rgb), 0.3);
    color: #ffffff;
    transform: translateX(2px);
    outline: none;
}
.xn-menu__item .game-status-badge {
    margin-left: auto;
    flex-shrink: 0;
}

/* -- Featured item row (the "Browse all" first row in Games) -------------- */
.xn-menu__item--primary {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0.5rem 0.25rem;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    background: linear-gradient(120deg, rgba(var(--xoompa-red-rgb), 0.22), rgba(var(--xoompa-red-rgb), 0.08));
    border: 1px solid rgba(var(--xoompa-red-rgb), 0.45);
    box-shadow: 0 6px 18px rgba(var(--xoompa-red-rgb), 0.18);
    color: #ffffff;
    flex-shrink: 0;
    text-decoration: none;
}
.xn-menu__item--primary:hover,
.xn-menu__item--primary:focus-visible {
    background: linear-gradient(120deg, rgba(var(--xoompa-red-rgb), 0.35), rgba(var(--xoompa-red-rgb), 0.15));
    border-color: rgba(var(--xoompa-red-rgb), 0.7);
    color: #ffffff;
    transform: translateY(-1px);
    outline: none;
}
.xn-menu__item--primary .xn-menu__details { flex: 1 1 auto; }
.xn-menu__icon {
    margin-left: auto;
    font-size: 1rem;
    color: rgba(var(--xoompa-red-rgb), 0.95);
    flex-shrink: 0;
}

/* -- Icon circles (game short-codes) -------------------------------------- */
.xn-menu__icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
    flex-shrink: 0;
    text-transform: uppercase;
}
/* 5 stable hue buckets — rotate by index, never random */
.xn-menu__icon-circle--hue-1 { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }
.xn-menu__icon-circle--hue-2 { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
.xn-menu__icon-circle--hue-3 { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
.xn-menu__icon-circle--hue-4 { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.xn-menu__icon-circle--hue-5 { background: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%); }
.xn-menu__icon-circle--red {
    background: linear-gradient(135deg, rgba(var(--xoompa-red-rgb), 1) 0%, rgba(var(--xoompa-red-rgb), 0.55) 100%);
    font-size: 0.95rem;
}

/* -- Item text (Games menu) ------------------------------------------------ */
.xn-menu__details {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}
.xn-menu__title {
    font-weight: 600;
    color: rgba(247, 247, 247, 0.95);
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xn-menu__item--primary .xn-menu__title {
    font-size: 0.95rem;
    color: #ffffff;
}
.xn-menu__description {
    font-size: 0.7rem;
    color: rgba(184, 184, 184, 0.78);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xn-menu__item--primary .xn-menu__description {
    font-size: 0.75rem;
    color: rgba(247, 247, 247, 0.78);
    -webkit-line-clamp: 1;
}

/* -- Footer (Games menu — Discord CTA) ------------------------------------ */
.xn-menu__footer {
    padding: 0.5rem 0.5rem 0.6rem;
    border-top: 1px solid rgba(var(--xoompa-red-rgb), 0.18);
    background: rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}
.xn-menu__footer a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    color: rgba(247, 247, 247, 0.92);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    background: rgba(var(--xoompa-red-rgb), 0.08);
    border: 1px solid rgba(var(--xoompa-red-rgb), 0.2);
    transition: background-color var(--xoompa-duration-base) var(--xoompa-ease),
                color var(--xoompa-duration-base) var(--xoompa-ease);
}
.xn-menu__footer a:hover {
    background: rgba(var(--xoompa-red-rgb), 0.18);
    color: #ffffff;
}
.xn-menu__footer a i.bi-discord { font-size: 1.05rem; color: rgba(var(--xoompa-red-rgb), 0.85); }
.xn-menu__footer-arrow { margin-left: auto; font-size: 0.8rem; color: rgba(247, 247, 247, 0.6); }

/* -- Auth dropdown meta row (User chip — followers / following) ---------- */
.xn-menu__meta {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(var(--xoompa-red-rgb), 0.18);
}
.xn-menu__live {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(var(--xoompa-red-rgb), 0.18);
}
.xn-menu__live .badge { font-size: 0.7rem; }

/* -- Pending earnings row (XSP pill) -------------------------------------- */
.xn-menu__pending {
    padding: 0.5rem 0.7rem;
}
.xn-menu__pending-amount { font-size: 1.1rem; }
.xn-menu__pending-note { font-size: 0.7rem; }

/* -- Platform badge (TikTok / Twitch / YouTube / etc.) -------------------- */
.platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: capitalize;
    white-space: nowrap;
}
.platform-badge i { font-size: 0.85rem; line-height: 1; }
.platform-badge--lg { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.platform-badge__room-id { max-width: 140px; }

/* -- Coin pill plus badge (replaces inline font-size hack) ---------------- */
.xn-pill__plus-badge { font-size: 0.75rem; }

/* -- Vertical divider between Community and auth cluster ------------------ */
.nav-divider {
    width: 1px;
    height: 20px;
    background: rgba(184, 184, 184, 0.32);
}

/* ============================================================================
 * 7. UTILITIES
 * ============================================================================
 * Small helper classes for patterns that Bootstrap doesn't cover.
 * Use these instead of inline style="" attributes when possible.
 * ============================================================================ */

.cursor-pointer { cursor: pointer; }
.cursor-grab    { cursor: grab; }
.cursor-grabbing{ cursor: grabbing; }

.object-fit-cover   { object-fit: cover; }
.object-fit-contain { object-fit: contain; }
.object-fit-fill    { object-fit: fill; }
.object-fit-none    { object-fit: none; }
.object-fit-scale-down { object-fit: scale-down; }

.filter-invert { filter: brightness(0) invert(1); }
.filter-grayscale { filter: grayscale(1); }
.filter-blur-sm { filter: blur(4px); }

.opacity-08 { opacity: 0.08; }
.opacity-30 { opacity: 0.30; }
.opacity-40 { opacity: 0.40; }
.opacity-50 { opacity: 0.50; }
.opacity-60 { opacity: 0.60; }
.opacity-70 { opacity: 0.70; }

.z-base    { z-index: var(--xoompa-z-raised); }
.z-dropdown { z-index: var(--xoompa-z-dropdown); }
.z-sticky  { z-index: var(--xoompa-z-sticky); }
.z-fixed   { z-index: var(--xoompa-z-fixed); }
.z-modal-backdrop { z-index: var(--xoompa-z-modal-bg); }
.z-modal   { z-index: var(--xoompa-z-modal); }
.z-popover { z-index: var(--xoompa-z-popover); }
.z-tooltip { z-index: var(--xoompa-z-tooltip); }
.z-toast   { z-index: var(--xoompa-z-toast); }
.z-overlay { z-index: var(--xoompa-z-overlay); }

.fs-7 { font-size: 0.7rem; }
.fs-65 { font-size: 0.65rem; }
.fs-75 { font-size: 0.75rem; }
.fs-85 { font-size: 0.85rem; }
.fs-95 { font-size: 0.95rem; }

.icon-sm { width: 1rem; height: 1rem; }
.icon-md { width: 1.5rem; height: 1.5rem; }
.icon-lg { width: 2rem; height: 2rem; }

.avatar-xs { width: 24px; height: 24px; }
.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 40px; height: 40px; }
.avatar-lg { width: 56px; height: 56px; }
.avatar-xl { width: 80px; height: 80px; }



/* ============================================================================
 * 8. ACCESSIBILITY — prefers-reduced-motion
 * ============================================================================
 * Honor user OS-level preference to reduce motion. Disables non-essential
 * animations and transitions across the entire site.
 * ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================================
 * 9. PRINT STYLES
 * ============================================================================
 * Clean black-on-white rendering for legal pages (terms, privacy), invoices,
 * and any other content users might want to print.
 * ============================================================================ */

@media print {
    /* Hide chrome that doesn't make sense on paper */
    .site-header,
    .navbar,
    footer,
    .no-print,
    .modal,
    .dropdown-menu,
    .btn,
    button {
        display: none !important;
    }

    /* Force dark text on light background for ink savings */
    body {
        background: white !important;
        color: black !important;
        font-size: 11pt;
        line-height: 1.5;
    }

    h1, h2, h3, h4, h5, h6 {
        color: black !important;
        page-break-after: avoid;
    }

    a {
        color: black !important;
        text-decoration: underline;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }

    /* Don't break cards/sections across pages mid-content */
    .card,
    section,
    article {
        page-break-inside: avoid;
        background: white !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }

    /* Reveal URLs that were visually hidden (e.g., .d-none) */
    .d-none { display: block !important; }
}


/* ============================================================================
 * 10. FOCUS VISIBLE — keyboard navigation
 * ============================================================================
 * Clear, consistent focus indicator for keyboard users. Bootstrap's default
 * focus ring is okay, but we want it tied to our brand color.
 * ============================================================================ */

:focus-visible {
    outline: 2px solid var(--xoompa-red);
    outline-offset: 2px;
    border-radius: var(--studio-radius-sm);
}

/* Remove focus ring for mouse users (Bootstrap behavior, but make it explicit) */
:focus:not(:focus-visible) {
    outline: none;
}


/* ============================================================================
 * 11. SAFE AREA — notched devices (iPhone X+, etc.)
 * ============================================================================
 * Honor notches and home indicators when content extends to screen edge.
 * Currently used in full-bleed OBS overlays and the help widget FAB.
 * ============================================================================ */

@supports (padding: max(0px)) {
    .safe-area-inset-top    { padding-top:    max(1rem, env(safe-area-inset-top)); }
    .safe-area-inset-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
    .safe-area-inset-left   { padding-left:   max(1rem, env(safe-area-inset-left)); }
    .safe-area-inset-right  { padding-right:  max(1rem, env(safe-area-inset-right)); }
}

/* ============================================================================
 * AUTH STATE ITEMS (M3, M4, M5)
 * Was: unstyled elements using Bootstrap defaults
 * Now: Xoompa-themed avatar, icon pills, and notifications panel
 * ============================================================================ */
.site-header .navbar-avatar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--xoompa-red), rgba(var(--xoompa-red-rgb), 0.55));
    color: var(--xoompa-white);
    font-size: 0.85rem;
    box-shadow: 0 2px 6px rgba(var(--xoompa-red-rgb), 0.3);
    flex-shrink: 0;
}
.site-header .navbar-icon-pill {
    color: rgba(247, 247, 247, 0.85);
    transition: color var(--xoompa-duration-base) var(--xoompa-ease);
}
.site-header .navbar-icon-pill i {
    font-size: 1.05rem;
}
.site-header .navbar-icon-pill:hover i,
.site-header .navbar-icon-pill:focus i {
    color: var(--xoompa-red);
}

/* Notifications panel (M5) */
.notifications-panel {
    background: linear-gradient(160deg, rgba(18, 18, 22, 0.98), rgba(8, 8, 12, 0.98));
    color: rgba(247, 247, 247, 0.92);
    border-radius: 10px;
    overflow: hidden;
}
.notifications-panel .border-bottom {
    border-color: rgba(var(--xoompa-red-rgb), 0.22) !important;
    background: linear-gradient(90deg, rgba(var(--xoompa-red-rgb), 0.12), rgba(var(--xoompa-red-rgb), 0) 70%);
}
.notifications-panel .list-group-item {
    background: transparent;
    color: rgba(247, 247, 247, 0.9);
    border-color: rgba(255, 255, 255, 0.05);
    padding: 0.65rem 1rem;
    transition: background-color var(--xoompa-duration-base) var(--xoompa-ease);
}
.notifications-panel .list-group-item:hover {
    background-color: rgba(var(--xoompa-red-rgb), 0.1);
}