/* ============================================
   Golgufus Game Hub — Global Theme & Styles
   Professional collaboration theme
   ============================================

   TABLE OF CONTENTS
   -----------------------------------------
    1. CSS Custom Properties ............   6
    2. Brand System .....................  86
    3. Ops Page Header (shared) .........  97
    4. Base Reset & Typography .......... 182
    5. Skip Link ........................ 208
    6. Animations ....................... 228
    7. Navbar ........................... 257
    8. Cards ............................ 383
    9. Buttons .......................... 437
   10. Forms ............................ 554
   11. Badges ........................... 620
   12. Tables (Admin) ................... 654
   13. Nav Pills (filter tabs) .......... 695
   14. Navbar Icons ..................... 730
   15. Alerts ........................... 746
   16. Game Page ........................ 759
   17. Empty State ...................... 791
   18. Stat Cards ....................... 826
   19. Stat Card Variants ............... 883
   20. Hero Section ..................... 892
   21. Arena CTA Quick Action ........... 1064
   22. Achievement Tier Badges .......... 1084
   23. User Search in Sidebar ........... 1091
   24. Online Users Section ............. 1123
   25. Section Header ................... 1263
   26. Quick Action Cards ............... 1276
   27. Category Badge ................... 1333
   28. Admin Tab (log console) .......... 1341
   29. Log Console Tabs ................. 1421
   30. DM Panel (slide-in sidebar) ...... 1494
   31. DM Panel Free Positioning ........ 1516
   32. Settings Page .................... 1887
   33. Footer ........................... 1921
   34. Headings ......................... 1932
   35. Focus States ..................... 1939
   36. Scrollbar ........................ 1947
   37. Page Entry Animation ............. 1966
   38. Dividers ......................... 1972
   39. Misc Utilities ................... 1978
   40. Toast Notification ............... 2005
   41. Modal Overlay .................... 2075
   42. Layout Spacing ................... 2110
   43. Auth Form Centering .............. 2139
   44. Log Console ...................... 2145
   45. Responsive: Collapsed Navbar ..... 2387
   46. Responsive: Tablet ............... 2410
   47. Responsive: Mobile ............... 2500
   48. Global DM Badge (navbar) ......... 2671
   49. Footer — Rich 3-column .......... 2714
   50. Profile — Achievements .......... 2805
   51. Profile — Game Stats Cards ...... 2878
   52. Profile — Comments .............. 2896
   53. Rank & Role Colors ............... 2931
   54. Presence Toggle (navbar) ......... 2949
   55. NX (Admin Encrypted Stream) ...... 2974
   56. Pool Help Tooltip ................ 3321
   ============================================ */

/* ===== CSS VARIABLES / ROOT ===== */

/* --- CSS Custom Properties --- */
:root {
    /* Base palette */
    --bg-body: #f0f2f5;
    --bg-card: #ffffff;
    --bg-navbar: #101522;
    --bg-footer: #101522;
    --bg-input: #f5f6f9;
    --bg-hover: #eceef2;

    /* Accent */
    --accent: #2e5d9a;
    --accent-hover: #264f82;
    --accent-light: rgba(46, 93, 154, 0.12);
    --accent-glow: rgba(46, 93, 154, 0.3);
    --accent-alt: #5f7fa8;

    /* Text */
    --text-primary: #1c2128;
    --text-secondary: #5f6978;
    --text-muted: #8b95a5;
    --text-on-dark: #e5e7eb;
    --text-on-accent: #ffffff;

    /* Borders & Shadows */
    --border: #e2e5ea;
    --border-light: #f0f1f4;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.03);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.06);

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Status colors */
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.08);
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.08);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.08);
    --info: #3b82f6;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Transition */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Log console */
    --log-bg: #0d1117;
    --log-header-bg: #161b22;
    --log-border: #30363d;
    --log-text: #c9d1d9;

    /* Chat surfaces */
    --bg-message-area-start: #f6f7f9;
    --bg-message-area-end: #f4f6f8;
    --bubble-own-start: #3b5ec9;
    --bubble-own-end: #4b6dd4;
    --bubble-own-shadow: rgba(59, 94, 201, 0.15);
    --bubble-other-bg: #ffffff;
    --bubble-other-border: var(--border-light);

    /* Shared surface tokens (chat/game/rewards/page headers) */
    --surface-panel-bg: var(--bg-card);
    --surface-panel-alt: var(--bg-input);
    --surface-panel-border: var(--border);
    --surface-panel-border-soft: var(--border-light);
    --surface-panel-shadow: var(--shadow-sm);
    --surface-media-bg: #0f1724;

    /* Secondary accent */
    --accent-secondary: #0ea5e9;
    --accent-secondary-light: rgba(14, 165, 233, 0.12);

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', 'Courier New', monospace;

    /* Z-index layers */
    --z-overlay: 10030;
    --z-sidebar: 10040;
    --z-call: 10050;
    --z-toast: 10090;
    --z-tooltip: 10100;
    --z-modal: 10140;
    --z-top: 10200;
}

/* --- Brand System --- */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    max-width: 100%;
    line-height: 1;
    color: var(--text-primary);
    text-decoration: none;
}

.brand-lockup-navbar {
    height: 4rem;
    max-width: min(48vw, 20rem);
}

.brand-lockup-navbar .brand-logo {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

.brand-mark,
.brand-logo {
    display: block;
    width: auto;
    height: 1.5rem;
    object-fit: contain;
    object-position: center;
    flex: 0 0 auto;
}

.brand-logo-new {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.brand-lockup-auth {
    display: inline-flex;
    justify-content: center;
    height: 4.25rem;
    margin-bottom: 1rem;
}

.brand-lockup-auth .brand-logo-new {
    height: 100%;
}

.brand-lockup-footer {
    justify-content: flex-start;
    max-width: 100%;
}

.brand-lockup-footer .brand-logo-new {
    height: 3.5rem;
}

.brand-lockup-hero {
    display: none;
}

/* ---------- Mini inline-SVG sparkline (zero JS, zero deps) ---------- */
.sparkline {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.65rem 0.5rem;
    margin-top: 0.4rem;
    background: color-mix(in srgb, var(--accent, #6c8cff) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #6c8cff) 22%, transparent);
    border-radius: 0.55rem;
}

.sparkline-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.72rem;
    line-height: 1.1;
}

.sparkline-label {
    color: var(--text-secondary, #b8b8c4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.sparkline-total {
    color: var(--text-primary, #ffffff);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sparkline-svg {
    display: block;
    width: 100%;
    overflow: visible;
}

.sparkline-area {
    fill: color-mix(in srgb, var(--accent, #6c8cff) 28%, transparent);
    stroke: none;
}

.sparkline-line {
    fill: none;
    stroke: var(--accent, #6c8cff);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.sparkline-dot {
    fill: var(--accent, #6c8cff);
    stroke: var(--bg-primary, #0f1019);
    stroke-width: 1.2;
}

.sparkline-flat {
    stroke: color-mix(in srgb, var(--text-secondary, #b8b8c4) 50%, transparent);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

.sparkline-hint {
    font-size: 0.65rem;
    color: var(--text-secondary, #b8b8c4);
    text-align: right;
    margin-top: -0.1rem;
}

/* Shared page shell + masthead (Home/Game/Rewards) */
.app-page-shell {
    max-width: 1320px;
}

.app-page-shell-narrow {
    max-width: 1040px;
}

.app-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--surface-panel-border) 82%, transparent);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(
            140deg,
            color-mix(in srgb, var(--accent) 14%, var(--surface-panel-bg)) 0%,
            color-mix(in srgb, var(--surface-panel-alt) 78%, var(--surface-panel-bg)) 52%,
            var(--surface-panel-bg) 100%
        );
    box-shadow: var(--surface-panel-shadow);
}

.app-page-header-content {
    min-width: min(100%, 300px);
    flex: 1 1 520px;
}

.app-page-kicker {
    margin: 0 0 0.2rem 0;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
}

.app-page-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: clamp(1.2rem, 1.7vw, 1.48rem);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.18;
}

.app-page-subtitle {
    margin: 0.35rem 0 0 0;
    max-width: 70ch;
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.app-page-meta {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.app-page-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.18rem 0.48rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--surface-panel-border) 85%, transparent);
    background: color-mix(in srgb, var(--surface-panel-alt) 76%, transparent);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
}

.app-page-chip i {
    font-size: 0.7rem;
    opacity: 0.8;
}

.app-page-chip-success {
    border-color: color-mix(in srgb, var(--success, #22c55e) 48%, var(--surface-panel-border));
    background: color-mix(in srgb, var(--success, #22c55e) 14%, transparent);
    color: var(--success, #22c55e);
}

.app-page-chip-warn {
    border-color: color-mix(in srgb, var(--warning, #f59e0b) 50%, var(--surface-panel-border));
    background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent);
    color: var(--warning, #f59e0b);
}

.app-page-chip-link {
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.app-page-chip-link:visited {
    color: inherit;
}

.app-page-chip-link:hover,
.app-page-chip-link:focus-visible {
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.app-page-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.app-page-actions .btn {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .app-page-header {
        padding: 0.8rem 0.85rem;
    }

    .app-page-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
}

/* Shared operations header (Admin + Control Center) */
.ops-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.4rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(18, 26, 40, 0.14);
    background:
        linear-gradient(180deg, rgba(11, 17, 27, 0.94), rgba(19, 28, 42, 0.92)),
        linear-gradient(90deg, rgba(80, 101, 131, 0.22), rgba(80, 101, 131, 0.08));
    box-shadow: 0 10px 22px rgba(10, 18, 32, 0.22);
    color: #f2f5fa;
}

.ops-page-header-content {
    flex: 1;
    min-width: 240px;
}

.ops-page-kicker {
    margin: 0 0 0.22rem 0;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    opacity: 0.86;
}

.ops-page-title {
    margin: 0 0 0.2rem 0;
    font-size: 1.52rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #f7f9fd;
}

.ops-page-description {
    margin: 0;
    max-width: 56ch;
    font-size: 0.86rem;
    color: rgba(230, 237, 248, 0.88);
}

.ops-page-metrics {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.ops-page-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.08rem;
}

.ops-page-metric-value {
    font-size: 1.34rem;
    line-height: 1.05;
    font-weight: 700;
    color: #f7f9fc;
    font-family: var(--font-mono);
}

.ops-page-metric-label {
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(213, 223, 238, 0.88);
}

@media (max-width: 767.98px) {
    .ops-page-header {
        padding: 0.92rem 0.96rem;
    }

    .ops-page-title {
        font-size: 1.28rem;
    }
}

/* ===== BASE / RESET ===== */

/* --- Base Reset & Typography --- */
/* Mild global density reduction 2026-05-31: base font down ~3% (14.5->14 /
   15.5->15px). Every rem-based size (incl. logos) scales down a touch. */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 15px;
    }
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.has-log-console {
    padding-bottom: 40px; /* Space for collapsed log console — admin only */
}

/* --- Skip Link --- */
.skip-link {
    position: absolute;
    top: -40px;
    left: var(--space-md);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    z-index: var(--z-toast);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 12px;
}

/* ===== ANIMATIONS / KEYFRAMES ===== */

/* --- Animations --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-fade-in {
    animation: fadeIn var(--transition-slow) both;
}

.animate-slide-up {
    animation: slideInUp var(--transition-slow) both;
}

/* ===== NAVBAR ===== */

/* --- Navbar --- */
header {
    position: relative;
    z-index: var(--z-toast);
}

.navbar {
    position: relative;
    z-index: var(--z-toast);
    background-color: var(--bg-navbar) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.35rem 0;
    backdrop-filter: blur(8px);
    overflow: visible;
}

.navbar .navbar-collapse {
    overflow: visible;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    transition: opacity var(--transition-fast);
    margin-right: 1.5rem;
}

.navbar-brand:hover {
    opacity: 0.85;
}

.navbar-brand .text-primary {
    color: var(--accent) !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--text-on-dark);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    position: relative;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}

.navbar-dark .navbar-nav .nav-link.active { color: #fff; }
.navbar-dark .navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 2px; left: 50%;
    transform: translateX(-50%);
    width: 80%; height: 2px;
    background: var(--accent);
    border-radius: 1px;
    animation: navUnderlineIn 300ms ease both;
}
@keyframes navUnderlineIn {
    from { width: 0; opacity: 0; }
    to { width: 80%; opacity: 1; }
}

/* Software dropdown */
.navbar .dropdown-menu-dark {
    background: var(--bg-secondary, #1e1e2e);
    border: 1px solid var(--border, #3a3a4a);
}
.navbar .dropdown-menu-dark .dropdown-item {
    color: var(--text-secondary, #b0b0c0);
}
.navbar .dropdown-menu-dark .dropdown-item:hover,
.navbar .dropdown-menu-dark .dropdown-item:focus {
    background: var(--accent-light, rgba(46,93,154,0.15));
    color: var(--text-primary, #e0e0e0);
}

.nav-pin-hidden {
    display: none !important;
}

.nav-custom-pins-host {
    display: flex;
    align-items: center;
}

.nav-custom-pins {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.nav-custom-pin-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.nav-pin-menu {
    width: min(32rem, calc(100vw - 1.5rem));
    min-width: min(24rem, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    max-height: min(72vh, 34rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav-pin-menu-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.3rem;
}

.nav-pin-menu-row > .dropdown-item,
.nav-pin-menu-row > .nav-pin-menu-link {
    flex: 1 1 auto;
    min-width: 0;
}

.nav-pin-menu-row > button.dropdown-item {
    text-align: left;
}

.nav-pin-toggle {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    background: transparent;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.nav-pin-toggle:hover,
.nav-pin-toggle:focus-visible {
    color: var(--accent);
    background: var(--accent-light);
}

.nav-pin-toggle.is-pinned {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent-light) 72%, transparent);
}

.nav-pin-toggle:active {
    transform: translateY(1px);
}

.software-live-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
}

.software-live-link > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.software-live-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: rgba(148, 163, 184, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.software-live-indicator.is-live {
    background: var(--success);
    box-shadow:
        0 0 0 1px rgba(34, 197, 94, 0.3),
        0 0 10px rgba(34, 197, 94, 0.32);
}

.nav-messages-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.notification-bell-item {
    position: relative;
    z-index: 10110;
}

.notification-bell-btn {
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.notification-badge {
    position: absolute;
    top: 0.28rem;
    right: 0.22rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.22rem;
    border-radius: 999px;
    font-size: 0.62rem;
    line-height: 1rem;
    text-align: center;
    font-weight: 700;
    background: var(--danger);
    color: #fff;
}

.notification-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    width: min(360px, 85vw);
    max-height: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 10120;
    color: var(--text-primary);
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
    font-size: 0.82rem;
}

.notification-mark-all-btn {
    font-size: 0.68rem;
    padding: 0.2rem 0.45rem;
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    background: transparent;
}

.notification-mark-all-btn:hover,
.notification-mark-all-btn:focus-visible {
    color: var(--text-primary);
    border-color: var(--border);
    background: var(--bg-hover);
}

.notification-mark-all-btn:disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.notification-list {
    max-height: 360px;
    overflow-y: auto;
}

.notification-empty {
    padding: 0.9rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
}

.notification-item {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border-light);
    background: transparent;
    color: inherit;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.62rem 0.72rem;
    cursor: pointer;
}

.notification-item:last-child {
    border-bottom: 0;
}

.notification-item:hover {
    background: var(--bg-hover);
}

.notification-item.is-unread {
    background: color-mix(in srgb, var(--accent-light) 55%, var(--bg-card));
}

.notification-item-icon {
    color: var(--accent);
    font-size: 0.95rem;
    line-height: 1;
    margin-top: 0.1rem;
}

.notification-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.notification-item-title {
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--text-primary);
}

.notification-item-message {
    font-size: 0.74rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-item-time {
    font-size: 0.68rem;
    color: var(--text-muted);
}

:root[data-theme="dark"] .notification-panel {
    background: linear-gradient(180deg, rgba(16, 24, 38, 0.98), rgba(14, 22, 34, 0.98));
    border-color: rgba(120, 149, 196, 0.28);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] .notification-panel-header {
    border-bottom-color: rgba(120, 149, 196, 0.2);
}

:root[data-theme="dark"] .notification-item {
    border-bottom-color: rgba(120, 149, 196, 0.16);
}

:root[data-theme="dark"] .notification-item:hover {
    background: rgba(77, 110, 168, 0.14);
}

:root[data-theme="dark"] .notification-item.is-unread {
    background: color-mix(in srgb, var(--accent, #3b82f6) 18%, rgba(255, 255, 255, 0.02));
}

:root[data-theme="dark"] .notification-empty {
    color: #9fb0c8;
}

.navbar-dark .navbar-nav .nav-messages-link.active {
    color: var(--accent-secondary) !important;
}

.navbar-dark .navbar-nav .nav-messages-link.active::after {
    background: var(--accent-secondary);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-on-dark) !important;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
    text-decoration: none;
    line-height: 1.5;
}

.theme-toggle:hover,
.theme-toggle:focus {
    background-color: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.theme-toggle-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.theme-toggle-text {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}

.navbar-dark .navbar-nav .nav-link.text-warning {
    color: var(--warning) !important;
}

.navbar-dark .navbar-nav .nav-link.text-warning:hover {
    background-color: var(--warning-bg);
}

.navbar .nav-link.text-light {
    color: var(--text-on-dark) !important;
    opacity: 0.75;
    font-weight: 400;
}

.navbar .btn-link.text-danger {
    color: var(--danger) !important;
    opacity: 0.8;
    font-size: 0.9rem;
    font-weight: 500;
    transition: opacity var(--transition-fast);
    text-decoration: none;
}

.navbar .btn-link.text-danger:hover {
    opacity: 1;
}

/* ===== CARDS / PANELS ===== */

/* --- Cards --- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
    overflow: hidden;
}

.room-card-full {
    border-color: var(--danger);
}

.room-card-golden {
    position: relative;
    border-color: rgba(184, 134, 11, 0.45);
    background: linear-gradient(155deg, rgba(255, 244, 210, 0.35), rgba(255, 255, 255, 0));
}

.room-card-golden::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(184, 134, 11, 0.25);
    pointer-events: none;
}

/* --- Room card: user membership indicator --- */
.badge-room-member {
    font-size: 0.6rem;
    padding: 0.15em 0.4em;
    border: 1px solid var(--success, #22c55e);
    color: var(--success, #22c55e);
    background: var(--success-bg, rgba(34, 197, 94, 0.08));
    border-radius: var(--radius-sm, 4px);
    font-weight: 500;
    vertical-align: middle;
}

.card-header {
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    padding: 0.5rem 0.75rem;
}

/* Clickable room cards */
a .card,
a.text-decoration-none .card {
    cursor: pointer;
}

a .card:hover,
a.text-decoration-none .card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover);
}

/* Full room card */
.card.border-danger {
    border-color: var(--border) !important;
    opacity: 0.6;
    position: relative;
}

/* ===== BUTTONS ===== */

/* --- Buttons --- */
.btn {
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.8rem;
    transition: all var(--transition-fast);
    letter-spacing: 0.01em;
}

.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 4px 12px var(--accent-glow);
}

.btn-room-official {
    background: linear-gradient(135deg, #f7d278, #e2b23f);
    border-color: #cf9b22;
    color: #453100;
    font-weight: 700;
}

.btn-room-official:hover,
.btn-room-official:focus {
    background: linear-gradient(135deg, #efc967, #d7a52f);
    border-color: #b98416;
    color: #2f2200;
    box-shadow: 0 4px 12px rgba(185, 132, 22, 0.3);
}

.btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent);
}

.btn-outline-primary:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px var(--accent-glow);
}

.btn-outline-danger {
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-outline-danger:hover {
    background-color: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}

.btn-success:hover {
    background-color: #16a34a;
    border-color: #16a34a;
}

.btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
}

.btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: #fff;
}

.btn-warning:hover {
    background-color: #d97706;
    border-color: #d97706;
    color: #fff;
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.btn-ghost:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.btn-outline-secondary:disabled {
    opacity: 0.5;
}

.btn-sm {
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-sm);
}

/* ===== FORMS / INPUTS ===== */

/* --- Forms --- */
.form-control,
.form-select {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
    font-size: 0.925rem;
    background-color: var(--bg-input);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background-color: var(--bg-card);
    color: var(--text-primary);
    outline: none;
}

.form-control::placeholder {
    color: var(--text-muted);
}

:root[data-theme="dark"] .form-control:-webkit-autofill,
:root[data-theme="dark"] .form-control:-webkit-autofill:hover,
:root[data-theme="dark"] .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
    transition: background-color 9999s ease-in-out 0s;
    box-shadow: 0 0 0 1000px var(--bg-input) inset;
}

.form-control[readonly],
.form-control:read-only {
    background-color: var(--bg-input);
    color: var(--text-primary);
    opacity: 0.75;
    cursor: default;
}

.form-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.form-check-input {
    border: 1px solid var(--border);
    border-radius: 4px;
    width: 1.1em;
    height: 1.1em;
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--accent-glow);
    border-color: var(--accent);
}

/* --- Badges --- */
.badge {
    font-weight: 500;
    font-size: 0.72rem;
    padding: 0.3em 0.6em;
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
}

.badge.bg-secondary {
    background-color: rgba(107, 114, 128, 0.12) !important;
    color: var(--text-secondary);
}

.badge.bg-success {
    background-color: var(--success-bg) !important;
    color: var(--success);
}

.badge.bg-danger {
    background-color: var(--danger-bg) !important;
    color: var(--danger);
}

.badge.bg-warning {
    background-color: var(--warning-bg) !important;
    color: #b45309;
}

.badge.bg-info {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: var(--info);
}

/* --- Tables (Admin) --- */
.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table thead.table-dark th {
    background-color: var(--bg-navbar);
    color: var(--text-on-dark);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: none;
    padding: 0.75rem 1rem;
}

.table thead.table-dark th:first-child {
    border-radius: var(--radius-md) 0 0 0;
}

.table thead.table-dark th:last-child {
    border-radius: 0 var(--radius-md) 0 0;
}

.table tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.9rem;
}

.table-hover tbody tr:hover {
    background-color: var(--bg-hover);
}

.table-danger,
tr.table-danger {
    background-color: var(--danger-bg) !important;
}

/* --- Nav Pills (filter tabs) --- */
.nav-pills .nav-link {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-xl);
    transition: all var(--transition-fast);
}

.nav-pills .nav-link:hover {
    color: var(--accent);
    background-color: var(--accent-light);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--accent);
    color: var(--text-on-accent);
    box-shadow: 0 2px 8px var(--accent-glow);
}

.nav-pills.flex-nowrap {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.nav-pills.flex-nowrap::-webkit-scrollbar {
    display: none;
}

.nav-pills.flex-nowrap .nav-item {
    white-space: nowrap;
}

/* --- Navbar Icons --- */
.navbar-nav .nav-link i.bi {
    font-size: 1.15rem;
    vertical-align: -0.1em;
}

.nav-rewards-link,
.nav-games-link,
.nav-admin-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Games nav — highlight with green accent */
:root[data-theme="dark"] .nav-games-link i.bi {
    color: var(--success) !important;
    transition: filter var(--transition-fast);
}

:root[data-theme="dark"] .nav-games-link:hover i.bi,
:root[data-theme="dark"] .nav-games-link:focus i.bi {
    filter: brightness(1.25);
}

.navbar-dark .navbar-nav .nav-games-link.active::after {
    background: var(--success);
}

/* --- Alerts --- */
.alert {
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    padding: 1rem 1.25rem;
}

.alert-info {
    background-color: rgba(59, 130, 246, 0.08);
    color: var(--info);
}

/* ===== GAME PAGES ===== */

/* --- Legacy game-type-card (kept for compatibility) --- */
.game-type-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.game-type-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* --- Game Showcase Cards --- */
.game-showcase-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.game-showcase-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.game-showcase-icon {
    min-height: 8.25rem;
    padding: 1.15rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    position: relative;
}

.game-showcase-icon::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
}

.game-showcase-content {
    padding: 0.85rem 1rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.game-showcase-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.game-showcase-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.55rem;
    flex: 0 1 auto;
    line-height: 1.38;
}

.game-showcase-meta {
    display: flex;
    gap: 0.4rem 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.game-meta-item {
    font-size: 0.68rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.game-meta-ai {
    color: var(--success);
    font-weight: 600;
}

.game-showcase-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-light, var(--border));
    padding-top: 0.55rem;
    margin-top: 0.15rem;
}

.game-showcase-actions .btn {
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .game-showcase-icon {
        min-height: 7rem;
    }
}

.game-showcase-how {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    overflow: hidden;
}

.game-showcase-how-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.game-showcase-how-steps {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.game-command {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
}

.game-pool-near {
    color: var(--text-secondary);
}

.game-pool-usd {
    font-size: 0.72em;
    color: var(--text-muted);
    margin-left: 0.2rem;
}

.game-pool-percent {
    margin-left: 0.25rem;
}

.game-pool-source {
    margin-left: 0.35rem;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

/* --- Game Rooms Section --- */
.game-rooms-section {
    border-top: 1px solid var(--border);
    padding-top: var(--space-lg);
}

.game-category-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: var(--space-md) 0 var(--space-sm);
}

.game-category-count {
    font-size: 0.72rem;
    background: var(--accent-light);
    color: var(--accent);
    padding: 0.15em 0.5em;
    border-radius: var(--radius-xl);
    font-weight: 600;
}

.empty-state-compact {
    padding: var(--space-lg) var(--space-md);
}

.empty-state-compact .empty-state-icon {
    font-size: 2rem;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

/* --- Empty State --- */
.empty-state {
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
}

.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    opacity: 0.3;
}

.home-empty-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-md);
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    opacity: 1;
}

.empty-state p {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: var(--space-md);
}

/* --- Stat Cards --- */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-card-icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
    opacity: 0.7;
}

.stat-card-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-card-label {
    font-size: 0.825rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.stat-card.accent {
    border-left: 4px solid var(--accent);
}

.stat-card.accent .stat-card-value {
    color: var(--accent);
}

.stat-card.success {
    border-left: 4px solid var(--success);
}

.stat-card.success .stat-card-value {
    color: var(--success);
}

.stat-card.warning {
    border-left: 4px solid var(--warning);
}

.stat-card.warning .stat-card-value {
    color: var(--warning);
}

/* --- Stat Card Variants --- */
.stat-card.info {
    border-left: 4px solid var(--info);
}

.stat-card.info .stat-card-value {
    color: var(--info);
}

/* ===== HOME DASHBOARD ===== */

/* --- Hero Section --- */
.hero-section {
    background: linear-gradient(135deg, var(--bg-navbar) 0%, #1a2234 50%, #25324a 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-xl);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(75, 107, 189, 0.18), transparent 70%);
    pointer-events: none;
}

.hero-section h2 {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
}

.hero-section p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

.hero-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    flex-wrap: wrap;
}

.home-shell {
    max-width: 1320px;
}

.home-panel-shell {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.home-panel-shell-inline {
    height: 100%;
}

.home-panel-shell-inline .home-panel-shell-body {
    flex: 1 1 0;
    min-height: 0;
}

.home-panel-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.1rem 0.2rem;
}

.home-panel-shell-title {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
}

.home-panel-shell-toggle {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.home-panel-shell-toggle:hover,
.home-panel-shell-toggle:focus-visible {
    color: var(--text-primary);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-light) 55%, var(--bg-card));
}

.home-panel-shell-toggle i {
    font-size: 0.75rem;
}

.home-panel-shell-summary {
    display: none;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.8rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-input) 74%, var(--bg-card));
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.home-panel-shell.is-collapsed .home-panel-shell-summary {
    display: flex;
}

.home-panel-shell.is-collapsed .home-panel-shell-body {
    display: none;
}

.home-panel-shell.is-collapsed .home-panel-shell-toggle i {
    transform: rotate(180deg);
}

.home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 48%),
        linear-gradient(140deg, #101820 0%, #18232d 52%, #243033 100%);
    box-shadow: 0 18px 48px rgba(3, 10, 20, 0.22);
    padding: clamp(1rem, 2.2vw, 1.75rem);
    color: #f4f7fc;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.85fr);
    gap: 1rem;
}

.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.03) 0,
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px,
            transparent 22px
    );
    pointer-events: none;
}

.home-hero::after {
    display: none;
}

.home-hero-content,
.home-hero-panel {
    position: relative;
    z-index: 2;
}

.home-hero-brand {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
}

.home-hero h2 {
    color: #fff;
    font-size: clamp(1.35rem, 2.3vw, 2rem);
    margin-bottom: 0.55rem;
}

.home-hero h2 span {
    color: #c8daf8;
}

.home-hero-description {
    color: rgba(230, 240, 255, 0.76);
    max-width: 60ch;
    margin: 0;
}

.home-hero-metrics {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.home-hero-metric {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    background: rgba(7, 10, 16, 0.22);
    padding: 0.6rem 0.7rem;
}

.home-hero-metric strong {
    display: block;
    font-size: 1.15rem;
    line-height: 1.15;
}

.home-hero-metric span {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(228, 236, 248, 0.74);
    margin-top: 0.2rem;
}

.home-hero-panel {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-lg);
    background: rgba(8, 12, 20, 0.66);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.home-hero-panel-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(230, 239, 250, 0.74);
    margin-bottom: 0.25rem;
}

.home-hero-achievements {
    margin-top: 0.5rem;
}

.home-hero-achievements-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    cursor: pointer;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(230, 239, 250, 0.74);
}

.home-hero-achievements-summary::-webkit-details-marker {
    display: none;
}

.home-hero-achievements-count {
    font-size: 0.66rem;
    font-weight: 700;
    padding: 0.08rem 0.34rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(239, 246, 255, 0.9);
}

.home-hero-achievements-body {
    margin-top: 0.45rem;
    display: grid;
    gap: 0.35rem;
}

.home-hero-panel-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.83rem;
    color: rgba(233, 241, 252, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.45rem;
}

.home-hero-panel-row strong {
    color: #fff;
    font-size: 1rem;
}

.home-hero-panel-footnote {
    margin-top: 0.15rem;
    font-size: 0.74rem;
    color: rgba(228, 238, 250, 0.78);
    line-height: 1.35;
}

/* --- Dashboard Rewards Panel --- */
.dash-rewards {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.dash-rewards-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(135deg, #0f1827, #1a2640);
    color: #fff;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dash-rewards-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dash-rewards-title h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.dash-rewards-title i {
    font-size: 1.1rem;
    color: #f59e0b;
}

.dash-rewards-pool {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.dash-pool-total,
.dash-pool-user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.dash-pool-total-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-alt, var(--accent));
}

.dash-pool-total-usd {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
}

.dash-pool-amount {
    font-size: 1rem;
    font-weight: 700;
    color: var(--success);
}

.dash-pool-usd {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
}

.dash-pool-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.1rem;
}

.dash-stat-sub {
    display: block;
    font-size: 0.62rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
    font-style: italic;
}

.dash-game-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.dash-game-tab {
    padding: 0.6rem 1rem;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.dash-game-tab:hover {
    color: var(--text-primary);
}

.dash-game-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.dash-tab-pct {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 0.3rem;
}

.dash-game-panel {
    display: none;
    padding: 1rem 1.1rem;
}

.dash-game-panel.active {
    display: block;
}

.dash-game-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
}

.dash-stat {
    text-align: center;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    background: var(--bg-input);
}

.dash-stat-value {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.dash-stat-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.15rem;
}

.dash-stat-highlight .dash-stat-value {
    color: var(--success);
}

.dash-game-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-light, var(--border));
}

.dash-rewards-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.1rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.dash-total-reward {
    font-size: 0.88rem;
    color: var(--text-primary);
}

.dash-rewards-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    margin-left: auto;
}

.dash-rewards-link:hover {
    text-decoration: underline;
}

.dash-rewards-empty {
    padding: 1.5rem;
    text-align: center;
}

.dash-rewards-empty p {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 0.5rem;
}

/* --- Arena CTA Quick Action --- */
.quick-action-arena {
    border: 1px solid var(--warning);
    background: linear-gradient(150deg, var(--bg-card), rgba(245, 158, 11, 0.08));
    position: relative;
}
.quick-action-arena:hover {
    border-color: var(--warning);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.18);
}
.quick-action-cta {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    color: var(--warning);
    font-size: 0.85rem;
}

/* ===== ACHIEVEMENTS / AWARDS ===== */

/* --- Achievement Tier Badges --- */
.achievement-icon-sm { font-size: 0.9rem; margin-right: 0.25rem; }
.achievement-tier-bronze { background: #cd7f32; color: #fff; }
.achievement-tier-silver { background: #c0c0c0; color: #1a1a2e; }
.achievement-tier-gold { background: #ffd700; color: #1a1a2e; }
.achievement-tier-platinum { background: linear-gradient(135deg, #e5e4e2, #b4b4b4); color: #1a1a2e; }

/* ===== ONLINE USERS SIDEBAR ===== */

/* --- User Search in Sidebar --- */
.online-users-search { position: relative; }
.user-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 6px);
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
}
.search-result-item:hover { background: var(--bg-hover); }
.search-empty {
    padding: 0.6rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: center;
}

/* --- Online Users Section --- */
.online-users-sidebar {
    position: sticky;
    top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    background: var(--bg-card);
    border: 1px solid var(--accent-muted, rgba(79, 110, 247, 0.25));
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 2px 12px rgba(79, 110, 247, 0.08);
}

.online-users-toolbar {
    margin-bottom: 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-muted, rgba(79, 110, 247, 0.2));
}

.online-users-toolbar h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--accent, #4f6ef7);
}

.online-visibility-form {
    margin: 0;
}

.online-visibility-btn {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

.online-users-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    min-height: 96px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    overflow-x: hidden;
}

.online-visibility-note {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-secondary);
    padding: 0.4rem 0.55rem;
    font-size: 0.74rem;
    margin-bottom: 0.45rem;
}

.online-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse 2s ease-in-out infinite;
    box-shadow: 0 0 6px var(--success);
}

.online-dot-sm {
    width: 8px;
    height: 8px;
}

.online-user-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border-light, var(--border));
    transition: background-color 0.15s;
    gap: 1.1rem;
    min-width: 0;
}

.online-user-item:hover {
    background: var(--bg-hover);
    color: inherit;
}

.online-user-link {
    min-width: 0;
    /* The avatar (40px circle) sits flush against the username without breathing room
       since Bootstrap's d-flex class is applied inline but no gap is set. Force a
       readable gap and a small left padding on the name so the initials never appear
       to overlap the text. */
    gap: 0.75rem;
}

.online-user-link .online-user-avatar {
    flex-shrink: 0;
}

.online-user-link .online-user-info {
    padding-left: 0;
    min-width: 0;
}

.online-user-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.online-user-info {
    flex: 1;
    min-width: 0;
    padding-right: 0.5rem;
}

.online-user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.online-user-activity {
    margin-top: 0.12rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.online-user-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.home-meta-note {
    font-size: 0.78rem;
}

.home-badge-mini {
    font-size: 0.65rem;
}

.home-friend-add-btn {
    font-size: 0.7rem;
}

.online-user-status {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-card, #151b26);
    flex-shrink: 0;
}

.online-user-status.online { background: var(--success, #22c55e); }
.online-user-status.away   { background: var(--warning, #f59e0b); }
.online-user-status.dnd    { background: var(--danger, #ef4444); }

.online-users-empty {
    text-align: center;
    padding: var(--space-lg) 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* --- Section Header --- */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.section-header h4 {
    margin: 0;
    font-size: 1.1rem;
}

/* --- Quick Action Cards --- */
.quick-action {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-normal);
}

.quick-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: inherit;
}

.quick-action-icon {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.quick-action-token {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.quick-action-icon.accent {
    background: var(--accent-light);
}

.quick-action-icon.success {
    background: var(--success-bg);
}

.quick-action-text h6 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.quick-action-text p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.quick-action-live-badge {
    background: rgba(148, 163, 184, 0.18) !important;
    border: 1px solid rgba(148, 163, 184, 0.34);
    color: #cfd5df !important;
    font-weight: 600;
}

/* --- Category Badge --- */
.badge.badge-category {
    background-color: rgba(107, 114, 128, 0.08);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    font-weight: 500;
}

/* ===== ADMIN ===== */

/* --- Admin Tab (inside log console) --- */
.admin-tab-body {
    padding: 0.5rem 0.75rem;
    overflow-y: auto;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    padding: var(--space-md);
}

.admin-stat {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    background: var(--log-header-bg);
    border: 1px solid var(--log-border);
    border-radius: var(--radius-md);
}

.admin-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font-sans);
}

.admin-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 0.5rem 0.5rem 0.25rem;
}

.admin-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    transition: background var(--transition-fast);
}

.admin-user-row:hover {
    background: var(--bg-hover);
}

.admin-user-name {
    font-weight: 600;
    color: var(--log-text);
}

.admin-user-activity {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.admin-user-banned .admin-user-name {
    color: var(--danger);
    text-decoration: line-through;
}

.admin-empty {
    text-align: center;
    padding: var(--space-xl) 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* --- Log Console Tabs --- */
.log-tabs {
    display: flex;
    gap: 0.2rem;
    margin-left: 0.5rem;
}

.log-tab {
    background: none;
    border: 1px solid var(--log-border);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.log-tab:hover {
    background: var(--bg-hover);
    color: var(--log-text);
}

.log-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.log-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.log-tab-content-hidden {
    display: none;
}

.log-tab-content .terminal-output {
    flex: 1;
    overflow-y: auto;
    min-height: 80px;
    padding: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--log-text);
    background: var(--log-bg);
}

.log-tab-content .terminal-input-area {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border-top: 1px solid var(--log-border);
    background: var(--log-header-bg);
}

.log-tab-content .terminal-prompt {
    color: var(--accent);
    font-weight: 700;
    font-family: var(--font-mono);
}

.log-tab-content .terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--log-text);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    outline: none;
}

/* ===== DM PANEL ===== */

/* --- DM Panel (slide-in sidebar) --- */
.dm-panel {
    position: fixed;
    top: 72px;
    right: -300px;
    width: 300px;
    height: min(70vh, 520px);
    max-height: calc(100vh - 96px);
    z-index: var(--z-sidebar);
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    transition: right 300ms cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.dm-panel.dm-panel-visible {
    right: 0;
}

/* --- DM Panel Free Positioning (drag/resize) --- */
.dm-panel.dm-panel-free {
    right: auto !important;
    transition: none;
    border-radius: var(--radius-lg);
}

.dm-resize-handle {
    position: absolute;
    z-index: 10;
}

.dm-resize-n  { top: -3px; left: 8px; right: 8px; height: 6px; cursor: n-resize; }
.dm-resize-s  { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: s-resize; }
.dm-resize-e  { top: 8px; bottom: 8px; right: -3px; width: 6px; cursor: e-resize; }
.dm-resize-w  { top: 8px; bottom: 8px; left: -3px; width: 6px; cursor: w-resize; }
.dm-resize-ne { top: -3px; right: -3px; width: 12px; height: 12px; cursor: ne-resize; }
.dm-resize-nw { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nw-resize; }
.dm-resize-se { bottom: -3px; right: -3px; width: 12px; height: 12px; cursor: se-resize; }
.dm-resize-sw { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: sw-resize; }

.dm-panel-reset {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    margin-right: 0.25rem;
    transition: all var(--transition-fast);
}

.dm-panel-reset:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dm-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.dm-panel-title {
    font-weight: 700;
    font-size: 0.9rem;
}

.dm-panel-close {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 1.1rem;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    transition: all var(--transition-fast);
}

.dm-panel-close:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
}

.dm-conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem;
}

.dm-conversation-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dm-conversation-item:hover {
    background: var(--bg-hover);
}

.dm-conv-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-alt));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    position: relative;
}

.dm-online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--bg-card);
}

.dm-conv-info {
    flex: 1;
    min-width: 0;
}

.dm-conv-name {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-conv-preview {
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-unread-count {
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.dm-chat-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dm-chat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.dm-back-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dm-back-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dm-chat-partner-name {
    font-weight: 600;
    font-size: 0.8rem;
}

.dm-mark-all-btn {
    margin-left: auto;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.dm-mark-all-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dm-message-area {
    flex: 1;
    overflow-y: auto;
    padding: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dm-message {
    max-width: 82%;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-md);
    font-size: 0.76rem;
    word-wrap: break-word;
}

.dm-file-msg {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.dm-file-msg a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.dm-file-msg a:hover {
    text-decoration: underline;
}

.dm-own .dm-file-msg a {
    color: #fff;
}

.dm-own {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.dm-other {
    align-self: flex-start;
    background: var(--bg-hover);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.dm-msg-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.15rem;
}

.dm-msg-time {
    font-size: 0.6rem;
    opacity: 0.7;
}

.dm-read-indicator {
    font-size: 0.55rem;
    opacity: 0.7;
}

.dm-input-area {
    display: flex;
    gap: 0.4rem;
    padding: 0.45rem 0.55rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.dm-file-btn {
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.55rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.dm-file-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dm-file-progress {
    padding: 0.3rem 0.55rem 0;
}

.dm-file-progress-bar {
    height: 6px;
    background: var(--border-light);
    border-radius: 999px;
    overflow: hidden;
}

.dm-file-progress-fill {
    height: 100%;
    background: var(--accent);
}

.dm-input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.55rem;
    font-size: 0.76rem;
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition-fast);
}

.dm-input:focus {
    border-color: var(--accent);
}

.dm-send-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dm-send-btn:hover {
    background: var(--accent-hover);
}

.dm-empty {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.dm-loading {
    text-align: center;
    padding: var(--space-lg) 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.dm-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 10px;
    min-width: 14px;
    text-align: center;
}

/* ===== SETTINGS ===== */

/* --- Settings Page --- */
.settings-container {
    max-width: 720px;
    margin: 0 auto;
}

.settings-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.settings-section h6 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.settings-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.settings-tabs .nav-link i.bi {
    font-size: 1rem;
}

.settings-tabs .nav-link.active {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
}

.settings-tabs .nav-link:not(.active):hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.settings-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-light, var(--border));
}

.settings-toggle:last-child {
    border-bottom: none;
}

.settings-theme-btn {
    min-width: 5rem;
}

.settings-pill-group {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
}

.settings-pill-btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 120ms, color 120ms;
}

.settings-pill-btn + .settings-pill-btn {
    border-left: 1px solid var(--border);
}

.settings-pill-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.settings-pill-btn.active {
    background: var(--accent);
    color: var(--text-on-accent);
}

/* --- Settings responsive --- */
@media (max-width: 575.98px) {
    .settings-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .settings-tabs .nav-link {
        white-space: nowrap;
        font-size: 0.8rem;
        padding: 0.35rem 0.6rem;
    }

    .settings-toggle {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* --- Footer --- */
footer {
    background-color: var(--bg-footer) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

footer small {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ===== TYPOGRAPHY ===== */

/* --- Headings --- */
h2, h3, h4, h5 {
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* --- Focus States --- */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* --- Page entry animation --- */
main > .container,
main > .container-fluid {
    animation: fadeIn 300ms ease both;
}

/* --- Dividers --- */
hr {
    border-color: var(--border-light);
    opacity: 0.6;
}

/* --- Misc Utilities --- */
.text-primary {
    color: var(--accent) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

a {
    color: var(--accent);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-hover);
}

/* Online status dot */
.text-success {
    color: var(--success) !important;
}

/* ===== TOAST NOTIFICATIONS ===== */

/* --- Toast Notification --- */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast-notification {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.85rem 1.15rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    animation: slideInDown 300ms ease both;
    pointer-events: auto;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toast-notification.toast-success {
    border-left: 3px solid var(--success);
}

.toast-notification.toast-error {
    border-left: 3px solid var(--danger);
}

.toast-notification.toast-warning {
    border-left: 3px solid var(--warning);
}

.toast-notification.toast-info {
    border-left: 3px solid var(--info);
}

.toast-notification.toast-exit {
    animation: fadeIn 200ms ease reverse both;
}

.toast-notification.toast-invite {
    border-left: 3px solid var(--success);
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 360px;
}

.invite-toast-msg {
    font-weight: 500;
}

.invite-toast-actions {
    display: flex;
    gap: 0.5rem;
}

.invite-toast-actions .btn {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
}

/* ===== MODALS / OVERLAYS ===== */

/* --- Modal Overlay --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 200ms ease both;
}

.modal-dialog-custom {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    width: 100%;
    max-width: 400px;
    /* Cap to viewport so deep-content modals (e.g. room settings with
       audio + member-override + member-management sections) keep the
       action row reachable. Overflow scrolls within the modal body. */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    animation: slideInUp 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-dialog-custom h5 {
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.modal-dialog-custom .btn-row {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Room Settings is the deepest modal (accent + tags + audio + Golgufus +
   member overrides + member list). Keep it compact and pin Save/Cancel to the
   bottom so they stay reachable while the body scrolls. */
#roomSettingsModal .btn-row {
    position: sticky;
    bottom: 0;
    margin: 0.75rem -1.5rem -1.5rem;   /* span to edges + cancel modal bottom padding */
    padding: 0.75rem 1.5rem;
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
}

#roomSettingsModal .mb-3,
#roomSettingsModal .room-settings-section {
    margin-bottom: 0.6rem;
}

#roomSettingsModal .form-label.small {
    margin-bottom: 0.25rem;
}

/* ===== LAYOUT / CONTAINER ===== */

/* --- Layout Spacing --- */
.container-fluid.flex-grow-1 {
    padding: var(--space-md) var(--space-lg);
}

.card-body {
    padding: var(--space-md);
}

.mb-3 {
    margin-bottom: var(--space-md) !important;
}

.mb-4 {
    margin-bottom: var(--space-lg) !important;
}

.row.g-3 > [class*="col"] {
    padding: var(--space-sm);
}

.row.g-4 > [class*="col"] {
    padding: var(--space-md);
}

footer {
    padding: var(--space-lg) 0 !important;
}

/* --- Auth Form Centering --- */
.auth-form-container {
    max-width: 440px;
    margin: var(--space-xl) auto;
}

/* --- Log Console --- */
.log-console {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    background: var(--log-bg);
    border-top: 1px solid var(--log-border);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--log-text);
    height: 36px;
    transition: height 300ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Reserve space for the fixed-position log console (only rendered for admins
   with ViewLogs). Without this the collapsed 36px bar overlays the footer. */
body.has-log-console {
    padding-bottom: 36px;
}

.log-console.log-expanded {
    height: 300px;
}

.log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Fixed height + nowrap: swapping per-tab controls (the wide Logs filter vs
       the narrow Terminal/Admin buttons) must not reflow or wrap the bar. That
       reflow on first open was the visual height "glitch". The collapsed console
       is also 36px, so the bar height is constant whether open or closed. */
    flex-wrap: nowrap;
    height: 36px;
    padding: 0.4rem 0.75rem;
    background: var(--log-header-bg);
    border-bottom: 1px solid var(--log-border);
    flex-shrink: 0;
    gap: 0.5rem;
    overflow: hidden;
}

.log-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.log-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
    justify-content: flex-end;
    overflow: hidden;
}

.log-toggle-btn {
    background: none;
    border: 1px solid var(--log-border);
    color: var(--log-text);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    line-height: 1;
    transition: background var(--transition-fast);
}

.log-toggle-btn:hover {
    background: var(--bg-hover);
}

.log-title {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.log-count-badge {
    background: rgba(108, 92, 231, 0.2);
    color: var(--accent);
    font-size: 0.68rem;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    font-weight: 600;
}

.log-filter-input {
    background: var(--log-bg);
    border: 1px solid var(--log-border);
    color: var(--log-text);
    font-family: inherit;
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    width: 140px;
    outline: none;
    transition: border-color var(--transition-fast);
}

.log-filter-input:focus {
    border-color: var(--accent);
}

.log-filter-input::placeholder {
    color: var(--text-muted);
}

.log-clear-btn {
    background: none;
    border: 1px solid var(--log-border);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.68rem;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.log-clear-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--danger);
    color: var(--danger);
}

#logTabControls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    justify-content: flex-end;
}

/* Log level filter buttons */
.log-level-filters {
    display: flex;
    gap: 2px;
    margin-right: 0.5rem;
}

.log-level-btn {
    background: none;
    border: 1px solid var(--log-border);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.log-level-btn.active {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.log-level-btn[data-level="inf"].active { color: #58a6ff; border-color: #58a6ff; }
.log-level-btn[data-level="wrn"].active { color: #d29922; border-color: #d29922; }
.log-level-btn[data-level="err"].active { color: #f85149; border-color: #f85149; }
.log-level-btn[data-level="dbg"].active { color: var(--text-muted); border-color: var(--text-muted); }

.log-level-btn:hover {
    background: var(--bg-hover);
}

/* Navbar log toggle button */
.log-toggle-nav {
    font-size: 1.1rem;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.log-toggle-nav:hover {
    opacity: 1;
}

.log-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.25rem 0;
}

.log-line {
    padding: 0.1rem 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    border-left: 2px solid transparent;
}

.log-line:hover {
    background: var(--bg-hover);
}

.log-time {
    color: var(--text-muted);
}

.log-level {
    font-weight: 600;
}

.log-category {
    color: var(--text-muted);
}

.log-msg {
    color: var(--log-text);
}

.log-exception {
    color: #f97583;
    padding-left: 1rem;
    font-size: 0.72rem;
    white-space: pre-wrap;
    opacity: 0.85;
}

/* Level colors */
.log-trc .log-level { color: var(--text-muted); }
.log-dbg .log-level { color: var(--text-muted); }
.log-inf .log-level { color: #58a6ff; }
.log-inf { border-left-color: rgba(88, 166, 255, 0.3); }
.log-wrn .log-level { color: #d29922; }
.log-wrn { border-left-color: rgba(210, 153, 34, 0.4); background: rgba(210, 153, 34, 0.04); }
.log-err .log-level { color: #f85149; }
.log-err { border-left-color: rgba(248, 81, 73, 0.4); background: rgba(248, 81, 73, 0.06); }
.log-ftl .log-level { color: #ff7b72; font-weight: 700; }
.log-ftl { border-left-color: #ff7b72; background: rgba(255, 123, 114, 0.08); }

/* Log console scrollbar */
.log-body::-webkit-scrollbar {
    width: 5px;
}

.log-body::-webkit-scrollbar-track {
    background: transparent;
}

.log-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.log-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ===== NAV LABELS (desktop hidden, mobile visible) ===== */

.nav-label {
    display: none;
}

/* ===== RESPONSIVE / MEDIA QUERIES ===== */

/* --- Responsive: 1000px desktop fit pass --- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container-fluid.flex-grow-1 {
        padding: 0.85rem 1rem;
    }

    .app-page-shell,
    .home-shell {
        max-width: 1010px;
    }

    .navbar .container-fluid {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }

    .navbar-brand {
        margin-right: 0.65rem;
    }

    .brand-lockup-navbar {
        width: 14rem;
        height: 3.5rem;
    }

    .navbar-dark .navbar-nav .nav-link {
        font-size: 0.82rem;
        padding: 0.42rem 0.55rem;
    }

    .navbar-nav {
        gap: 0.15rem !important;
    }

    .nav-custom-pins {
        gap: 0.1rem;
    }

    .nav-pin-menu {
        width: min(20rem, calc(100vw - 1.5rem));
        min-width: min(18rem, calc(100vw - 1.5rem));
        max-height: calc(100vh - 4.5rem);
    }

    .home-panel-shell {
        gap: 0.35rem;
    }

    .home-panel-shell-header {
        padding-inline: 0.1rem;
    }

    .home-hero {
        grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.72fr);
        gap: 0.75rem;
        padding: 1rem;
        border-radius: var(--radius-lg);
    }

    .home-hero::after {
        background-position: right -3rem center;
        background-size: min(64%, 38rem) auto;
        opacity: 0.48;
    }

    .brand-lockup-hero {
        width: 9.5rem;
        height: 5.75rem;
        margin-bottom: 0.25rem;
    }

    .home-hero-brand {
        min-height: 5.75rem;
    }

    .home-hero h2 {
        font-size: 1.55rem;
        margin-bottom: 0.35rem;
    }

    .home-hero-description {
        font-size: 0.88rem;
    }

    .hero-actions {
        gap: 0.45rem;
        margin-top: 0.85rem;
    }

    .home-hero-metrics {
        gap: 0.45rem;
        margin-top: 0.85rem;
    }

    .home-hero-metric {
        padding: 0.48rem 0.55rem;
    }

    .home-hero-metric strong {
        font-size: 1.02rem;
    }

    .home-hero-panel {
        padding: 0.72rem;
        gap: 0.42rem;
    }

    .home-hero-panel-row {
        font-size: 0.78rem;
        padding-bottom: 0.35rem;
    }

    .dash-rewards-header {
        padding: 0.72rem 0.9rem;
    }

    .dash-game-tab {
        padding: 0.52rem 0.85rem;
    }

    .dash-game-panel {
        padding: 0.75rem 0.9rem;
    }

    .dash-game-stats {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .dash-stat {
        padding: 0.45rem 0.35rem;
    }
}

/* --- Responsive: Collapsed Navbar (< 992px) --- */
@media (max-width: 991.98px) {
    #navbarNav {
        max-height: 70vh;
        overflow-y: auto;
    }

    #navbarNav .navbar-nav.me-auto {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 0.4rem;
        margin-bottom: 0.4rem;
    }

    #navbarNav .navbar-nav .nav-link {
        padding: 0.55rem 0.75rem;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Show text labels next to icons on collapsed nav */
    .nav-label {
        display: inline;
        font-weight: 500;
    }

    /* Mute icon colors for uniform look in collapsed nav */
    #navbarNav .navbar-nav .nav-link i.bi {
        color: rgba(255, 255, 255, 0.7);
        font-size: 1rem;
        width: 1.2rem;
        text-align: center;
    }

    #navbarNav .navbar-nav .nav-link.active i.bi,
    #navbarNav .navbar-nav .nav-link:hover i.bi {
        color: #fff;
    }

    .nav-custom-pins-host {
        display: block;
    }

    .nav-custom-pins {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
    }

    .nav-custom-pin-link {
        justify-content: flex-start !important;
        width: 100%;
    }

    .nav-pin-menu {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        max-height: 60vh;
    }

    .nav-pin-menu-row {
        padding: 0.05rem 0.25rem;
    }

    .notification-panel {
        position: fixed;
        top: 3.5rem;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        max-height: min(65vh, 420px);
    }

}

/* --- Responsive: Tablet (< 768px) --- */
@media (max-width: 767.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .card {
        border-radius: var(--radius-md);
    }

    .btn {
        padding: 0.45rem 0.9rem;
    }

    .log-console.log-expanded {
        height: 200px;
    }

    .log-filter-input {
        width: 100px;
    }

    .container-fluid.flex-grow-1 {
        padding: var(--space-md);
    }

    /* Hero section compact */
    .hero-section {
        padding: var(--space-lg) var(--space-md);
    }

    .hero-section h2 {
        font-size: 1.35rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
        text-align: center;
    }

    .home-hero {
        grid-template-columns: 1fr;
    }

    .home-hero::after {
        background-position: center 0.5rem;
        background-size: min(88%, 30rem) auto;
        opacity: 0.28;
    }

    .home-hero-panel {
        margin-top: 0.35rem;
    }

    .dash-rewards-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .dash-game-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .dash-rewards-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .dash-rewards-link {
        margin-left: 0;
    }

    .online-users-sidebar {
        position: static;
        top: auto;
    }

    /* Stat cards */
    .stat-card {
        padding: var(--space-md);
    }

    .stat-card-value {
        font-size: 1.35rem;
    }

    /* Section headers */
    .section-header h4 {
        font-size: 1rem;
    }

    /* Quick action cards stack */
    .quick-action {
        padding: var(--space-md);
    }

    .admin-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
        padding: var(--space-sm);
    }

    /* DM panel narrower on tablet */
    .dm-panel {
        width: 300px;
        right: -300px;
    }
}

/* --- Responsive: Mobile (< 576px) --- */
@media (max-width: 575.98px) {
    html {
        font-size: 14px;
    }

    .container,
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .container-fluid.flex-grow-1 {
        padding: var(--space-sm);
    }

    /* Navbar compact */
    .navbar {
        padding: 0.4rem 0;
    }

    .brand-lockup-navbar {
        width: min(52vw, 11rem);
        height: 2.5rem;
    }

    .brand-lockup-navbar .brand-logo {
        height: 100%;
        max-height: none;
    }

    .navbar-dark .navbar-nav .nav-link {
        font-size: 0.85rem;
        padding: 0.5rem 0.7rem;
    }

    /* Cards full width */
    .card {
        border-radius: var(--radius-sm);
    }

    .card-body {
        padding: var(--space-md);
    }

    /* Buttons larger touch targets */
    .btn {
        min-height: 42px;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .btn-sm {
        min-height: 34px;
        padding: 0.35rem 0.7rem;
    }

    /* Forms larger touch targets */
    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 1rem;
    }

    /* Hero section */
    .hero-section {
        padding: var(--space-lg) var(--space-md);
        border-radius: var(--radius-md);
    }

    .home-hero {
        border-radius: var(--radius-md);
        padding: var(--space-md);
    }

    .home-hero-metrics {
        grid-template-columns: 1fr;
    }

    .hero-section h2 {
        font-size: 1.2rem;
    }

    .hero-section p {
        font-size: 0.875rem;
    }

    /* Stat cards smaller */
    .stat-card {
        padding: var(--space-sm) var(--space-xs);
    }

    .stat-card-value {
        font-size: 1.2rem;
    }

    .stat-card-label {
        font-size: 0.72rem;
    }

    /* Online users section */
    .online-users-section {
        padding: 0;
    }

    .online-users-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .online-user-item {
        padding: 0.6rem 0.45rem;
        gap: 0.55rem;
    }

    .online-user-link {
        min-width: 0;
    }

    .online-user-info {
        padding-right: 0.25rem;
    }

    .online-user-actions {
        margin-left: auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.2rem;
    }

    .home-friend-add-btn {
        white-space: nowrap;
    }

    .online-user-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    /* Admin panel full-screen on mobile */
    .admin-panel.admin-panel-visible {
        height: 70vh;
    }

    .admin-stats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    /* DM panel full-screen on mobile */
    .dm-panel {
        width: 100vw;
        right: -100vw;
        top: 0;
        height: 100vh;
        border-radius: 0;
    }

    .dm-panel.dm-panel-visible {
        right: 0;
    }

    .dm-panel.dm-panel-free {
        position: fixed !important;
        top: 0 !important;
        left: auto !important;
        right: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }

    .dm-resize-handle,
    .dm-panel-reset {
        display: none !important;
    }

    /* Modal full-width on mobile */
    .modal-dialog-custom {
        margin: 0 0.75rem;
        max-width: none;
    }

    /* Toast notifications */
    .toast-container {
        left: 0.5rem;
        right: 0.5rem;
    }

    .toast-notification {
        max-width: none;
    }

    /* Footer compact */
    footer {
        padding: var(--space-md) 0 !important;
    }
}

@media (max-width: 420px) {
    .brand-lockup-navbar {
        width: min(58vw, 10rem);
        height: 2.3rem;
    }

    .brand-lockup-navbar .brand-logo {
        display: block;
        height: 100%;
        max-height: none;
    }
}

/* ============================================
   Global DM Badge (navbar)
   ============================================ */

.global-dm-badge {
    position: absolute;
    top: 2px;
    right: -6px;
    background: var(--danger, #ef4444);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    padding: 0 4px;
}

.room-search-input {
    width: 200px;
    max-width: 100%;
}

.hidden-inline {
    display: none;
}

.footer-brand-static {
    user-select: none;
}

/* .floating-message-btn was the mobile-only DM FAB; retired 2026-05-17. DMs now
   reach via the single central nav icon on all viewports. */

/* --- Bilingual TR/EN visibility (site-wide) --- */
body.lang-tr .lang-en,
body.lang-en .lang-tr {
    display: none !important;
}

/* ============================================
   Footer — Rich 3-column layout
   ============================================ */

.site-footer {
    background: var(--bg-navbar, #0f0f1a);
    color: var(--text-on-dark, #e5e7eb);
    padding: 2.5rem 0 0;
}

.site-footer a {
    color: var(--text-muted, #9ca3af);
    text-decoration: none;
    transition: color 0.2s;
}

.site-footer a:hover {
    color: var(--accent, #6c5ce7);
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.footer-tagline {
    color: var(--text-muted, #9ca3af);
    font-size: 0.85rem;
    margin-top: 0.85rem;
}

.footer-heading {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-on-dark, #e5e7eb);
    margin-bottom: 0.75rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.4rem;
}

.footer-links li a {
    font-size: 0.85rem;
}

.footer-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted, #9ca3af);
    margin-bottom: 0.4rem;
}

.footer-stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success, #22c55e);
    display: inline-block;
}

.footer-bottom {
    border-top: none;
    background-image: linear-gradient(90deg, transparent, var(--accent-light), var(--accent-secondary-light), transparent);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top;
    margin-top: 1.5rem;
    padding: 1rem 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
}

@media (max-width: 767.98px) {
    .site-footer .row > div {
        margin-bottom: 1.5rem;
    }
}

/* ===== PROFILE ===== */

.profile-page {
    --profile-accent: #a8bbff;
    --profile-accent-soft: rgba(168, 187, 255, 0.16);
    --profile-win: #7fd3af;
    --profile-loss: #f1a6b4;
    --profile-draw: #aab8cf;
    --profile-card-bg: color-mix(in srgb, var(--surface-panel-bg, var(--bg-card)) 92%, #122034);
    --profile-card-tint: color-mix(in srgb, var(--surface-panel-alt, var(--bg-input)) 82%, rgba(148, 165, 208, 0.08));
}

.profile-page-alert {
    border-color: color-mix(in srgb, var(--surface-panel-border, var(--border)) 84%, rgba(171, 190, 225, 0.18));
    box-shadow: var(--shadow-sm);
}

.profile-gradient-defs {
    position: absolute;
}

.profile-page-header {
    border-color: color-mix(in srgb, var(--profile-accent) 22%, var(--surface-panel-border, var(--border)));
    background:
        linear-gradient(
            140deg,
            color-mix(in srgb, var(--profile-accent) 12%, var(--surface-panel-bg, var(--bg-card))) 0%,
            color-mix(in srgb, var(--profile-card-tint) 88%, var(--surface-panel-bg, var(--bg-card))) 48%,
            color-mix(in srgb, var(--profile-win) 5%, var(--surface-panel-bg, var(--bg-card))) 100%
        );
    box-shadow: 0 16px 34px rgba(6, 14, 28, 0.18);
}

.profile-header-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-header-copy {
    min-width: 0;
}

.profile-avatar {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--profile-accent) 24%, var(--surface-panel-border, var(--border)));
    background:
        radial-gradient(circle at 28% 24%, color-mix(in srgb, var(--profile-accent) 42%, transparent), transparent 44%),
        color-mix(in srgb, var(--profile-card-tint) 82%, var(--surface-panel-bg, var(--bg-card)));
    box-shadow: 0 14px 28px rgba(12, 20, 34, 0.24);
    overflow: hidden;
}

.profile-avatar-image,
.profile-initials {
    grid-area: 1 / 1;
    width: 84px;
    height: 84px;
    border-radius: 50%;
}

.profile-avatar-image {
    position: relative;
    z-index: 2;
    display: block;
    object-fit: cover;
    background: color-mix(in srgb, var(--profile-card-bg) 92%, #0f172a);
}

.profile-avatar-image[hidden] {
    display: none;
}

.avatar-upload-current {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.avatar-upload-current img {
    flex: 0 0 auto;
    object-fit: cover;
}

.avatar-upload-current img[hidden] {
    display: none;
}

.profile-initials {
    position: relative;
    z-index: 1;
    background: linear-gradient(145deg, color-mix(in srgb, var(--profile-accent) 72%, #dce7ff), color-mix(in srgb, var(--profile-win) 44%, var(--profile-accent)));
    color: #f7fbff;
    font-size: 1.45rem;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(12, 20, 34, 0.2);
}

.profile-page-chip-muted {
    border-color: color-mix(in srgb, var(--profile-draw) 32%, var(--surface-panel-border, var(--border)));
    background: color-mix(in srgb, var(--profile-draw) 11%, transparent);
}

.profile-role-chip {
    font-weight: 700;
}

.profile-role-chip-admin {
    border-color: color-mix(in srgb, var(--profile-loss) 40%, var(--surface-panel-border, var(--border)));
    background: color-mix(in srgb, var(--profile-loss) 14%, transparent);
    color: color-mix(in srgb, var(--profile-loss) 72%, #ffd6dd);
}

.profile-role-chip-mod {
    border-color: color-mix(in srgb, var(--profile-accent) 42%, var(--surface-panel-border, var(--border)));
    background: color-mix(in srgb, var(--profile-accent) 13%, transparent);
    color: color-mix(in srgb, var(--profile-accent) 76%, #d7e2ff);
}

.profile-role-chip-default {
    border-color: color-mix(in srgb, var(--profile-draw) 34%, var(--surface-panel-border, var(--border)));
    background: color-mix(in srgb, var(--profile-draw) 10%, transparent);
}

.profile-page-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-section-card {
    padding: 1.05rem 1.1rem;
    border-radius: var(--radius-lg, 14px);
    border: 1px solid color-mix(in srgb, var(--surface-panel-border, var(--border)) 82%, rgba(160, 179, 212, 0.14));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--profile-card-bg) 100%, transparent),
            color-mix(in srgb, var(--profile-card-bg) 84%, rgba(102, 123, 164, 0.08))
        );
    box-shadow: 0 12px 24px rgba(6, 13, 25, 0.14);
}

.profile-summary-section {
    padding: 1rem;
}

.profile-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.profile-section-kicker {
    display: block;
    margin-bottom: 0.22rem;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.profile-section-title {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--text-primary);
}

.profile-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--profile-accent) 28%, var(--surface-panel-border, var(--border)));
    background: color-mix(in srgb, var(--profile-accent-soft) 70%, transparent);
    color: color-mix(in srgb, var(--profile-accent) 80%, #d7e2ff);
    font-size: 0.76rem;
    font-weight: 700;
}

.profile-section-muted {
    font-size: 0.84rem;
    color: var(--text-secondary);
}

.profile-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.profile-detail-card {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding: 0.9rem 0.95rem;
    border-radius: var(--radius-md, 10px);
    border: 1px solid color-mix(in srgb, var(--surface-panel-border, var(--border)) 86%, rgba(167, 186, 219, 0.15));
    background: color-mix(in srgb, var(--profile-card-tint) 86%, transparent);
}

.profile-detail-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.profile-inline-detail {
    font-size: 0.88rem;
}

.profile-invited-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.profile-invited-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-md, 10px);
    border: 1px solid color-mix(in srgb, var(--surface-panel-border, var(--border)) 88%, rgba(167, 186, 219, 0.14));
    background: color-mix(in srgb, var(--profile-card-tint) 84%, transparent);
}

/* ============================================
   Profile — Achievements
   ============================================ */

.achievement-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-md, 8px);
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg-card, #ffffff);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: default;
}

.profile-page .achievement-badge {
    border-color: color-mix(in srgb, var(--surface-panel-border, var(--border)) 82%, rgba(164, 183, 219, 0.16));
    background: color-mix(in srgb, var(--profile-card-tint) 90%, transparent);
    box-shadow: none;
}

.achievement-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.1));
}

.profile-page .achievement-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(6, 13, 25, 0.14);
}

.achievement-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.achievement-name {
    font-size: 0.78rem;
}

.achievement-bronze {
    border-color: #cd7f32;
    color: #cd7f32;
    background: rgba(205, 127, 50, 0.06);
}

.profile-page .achievement-bronze {
    border-color: rgba(197, 154, 118, 0.32);
    color: #d3b298;
    background: rgba(197, 154, 118, 0.1);
}

.achievement-silver {
    border-color: #a8a8a8;
    color: #6b6b6b;
    background: rgba(168, 168, 168, 0.06);
}

.profile-page .achievement-silver {
    border-color: rgba(176, 188, 207, 0.3);
    color: #d0d8e6;
    background: rgba(176, 188, 207, 0.1);
}

.achievement-gold {
    border-color: #f59e0b;
    color: #b45309;
    background: rgba(245, 158, 11, 0.08);
}

.profile-page .achievement-gold {
    border-color: rgba(229, 190, 125, 0.34);
    color: #f4d59f;
    background: rgba(229, 190, 125, 0.1);
}

.achievement-platinum {
    border-color: #3b82f6;
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.08);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.15);
}

.profile-page .achievement-platinum {
    border-color: rgba(168, 187, 255, 0.36);
    color: #d6e0ff;
    background: rgba(168, 187, 255, 0.12);
    box-shadow: none;
}

.award-badge {
    border-color: var(--accent, #4f46e5);
    color: var(--accent, #4f46e5);
    background: rgba(79, 70, 229, 0.06);
}

.profile-page .award-badge {
    border-color: color-mix(in srgb, var(--profile-accent) 38%, var(--surface-panel-border, var(--border)));
    color: color-mix(in srgb, var(--profile-accent) 80%, #dbe4ff);
    background: color-mix(in srgb, var(--profile-accent-soft) 72%, transparent);
}

.profile-awards-stack {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.profile-pool-claim-card {
    padding: 1rem 1.1rem;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid color-mix(in srgb, var(--accent, #4f46e5) 24%, var(--border-light, rgba(148, 163, 184, 0.3)));
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--accent, #4f46e5) 8%, var(--bg-card, #fff)),
        color-mix(in srgb, var(--success, #22c55e) 5%, var(--bg-card, #fff))
    );
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, 0.08));
}

.profile-page .profile-pool-claim-card {
    border-color: color-mix(in srgb, var(--profile-accent) 26%, var(--surface-panel-border, var(--border)));
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--profile-accent-soft) 88%, var(--profile-card-bg)),
        color-mix(in srgb, rgba(127, 211, 175, 0.12) 72%, var(--profile-card-bg))
    );
    box-shadow: 0 10px 22px rgba(6, 13, 25, 0.14);
}

.profile-pool-claim-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.profile-pool-claim-kicker {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent, #4f46e5);
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.profile-page .profile-pool-claim-kicker {
    color: color-mix(in srgb, var(--profile-accent) 78%, #d7e1ff);
}

.profile-pool-claim-amount {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}

.profile-pool-claim-meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.55rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.profile-pool-claim-window {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-muted);
}

.profile-pool-claim-note {
    margin-top: 0.75rem;
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.profile-pool-claim-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}

.profile-pool-claim-btn {
    font-weight: 700;
}

.profile-pool-claim-id {
    margin-top: 0.7rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.profile-pool-claim-id code {
    font-size: 0.72rem;
}

.award-count {
    font-size: 0.65rem;
    background: var(--accent, #4f46e5);
    color: #fff;
    border-radius: 999px;
    padding: 0 0.35rem;
    margin-left: 0.15rem;
    line-height: 1.4;
}

.profile-page .award-count {
    background: color-mix(in srgb, var(--profile-accent) 72%, #b7c8ff);
    color: #132038;
}

/* --- Profile Referral Card --- */
.profile-referral-card {
    padding: 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md, 8px);
}

.profile-page .profile-referral-card {
    background: color-mix(in srgb, var(--profile-card-tint) 90%, transparent);
    border-color: color-mix(in srgb, var(--profile-accent) 16%, var(--surface-panel-border, var(--border)));
}

.profile-referral-code-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.profile-referral-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.profile-referral-code-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.profile-referral-code {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.08em;
}

.profile-page .profile-referral-code {
    color: color-mix(in srgb, var(--profile-accent) 82%, #dbe4ff);
}

.profile-referral-copy {
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
}

/* ============================================
   Profile — Game Stats Cards
   ============================================ */

.profile-game-filter {
    max-width: 180px;
}

.profile-page .profile-game-filter {
    max-width: 220px;
    border-color: color-mix(in srgb, var(--profile-accent) 18%, var(--surface-panel-border, var(--border)));
    background: color-mix(in srgb, var(--profile-card-tint) 86%, transparent);
    color: var(--text-primary);
}

.profile-game-summary {
    cursor: pointer;
    list-style: none;
}

.profile-game-card .card-header {
    background: var(--bg-input, #f9fafb);
    font-size: 0.95rem;
    padding: 0.6rem 1rem;
}

.profile-page .profile-game-card {
    background: transparent;
    border: none;
    box-shadow: none;
}

.profile-page .profile-game-card details {
    overflow: hidden;
    border-radius: var(--radius-lg, 14px);
    border: 1px solid color-mix(in srgb, var(--surface-panel-border, var(--border)) 84%, rgba(160, 179, 212, 0.16));
    background: color-mix(in srgb, var(--profile-card-tint) 88%, transparent);
}

.profile-page .profile-game-card .card-header {
    background: color-mix(in srgb, var(--profile-card-bg) 82%, rgba(153, 171, 214, 0.08));
    border-bottom: 1px solid color-mix(in srgb, var(--surface-panel-border, var(--border)) 82%, rgba(160, 179, 212, 0.12));
}

.profile-game-card .card-body {
    padding: 1rem;
}

.profile-page .profile-game-card .card-body {
    background: color-mix(in srgb, var(--profile-card-bg) 94%, rgba(100, 120, 160, 0.05));
}

.profile-game-card .badge {
    font-size: 0.75rem;
}

.profile-game-card details summary::-webkit-details-marker {
    display: none;
}

.profile-game-card details .details-chevron {
    transition: transform 200ms ease;
    font-size: 0.75rem;
}

.profile-game-card details:not([open]) .details-chevron {
    transform: rotate(-90deg);
}

/* ============================================
   Profile v2 — Hero Summary + Visual Redesign
   ============================================ */
.profile-summary-hero {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 0;
}

.profile-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--bg-input), color-mix(in srgb, var(--accent) 8%, var(--bg-input)));
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-light));
    border-radius: var(--radius-lg, 12px);
}

.profile-page .profile-hero-card {
    gap: 1.2rem;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--profile-accent-soft) 88%, var(--profile-card-bg)),
        color-mix(in srgb, rgba(127, 211, 175, 0.08) 72%, var(--profile-card-bg))
    );
    border-color: color-mix(in srgb, var(--profile-accent) 22%, var(--surface-panel-border, var(--border-light)));
}

.profile-hero-main { display: flex; flex-direction: column; }

.profile-hero-number {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.profile-hero-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.25rem;
}

.profile-page .profile-hero-number {
    color: #f4f7ff;
}

.profile-page .profile-hero-label {
    color: color-mix(in srgb, var(--text-muted) 82%, #d0dbf3);
}

/* --- Radial Progress (SVG circular gauge) --- */
.profile-radial-progress {
    position: relative;
    width: 100px;
    height: 100px;
}

.profile-radial-progress.profile-radial-sm {
    width: 64px;
    height: 64px;
}

.profile-radial-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.profile-radial-track {
    fill: none;
    stroke: color-mix(in srgb, var(--border, #94a3b8) 40%, transparent);
    stroke-width: 6;
}

.profile-page .profile-radial-track {
    stroke: color-mix(in srgb, var(--surface-panel-border, var(--border)) 56%, rgba(172, 190, 222, 0.14));
}

.profile-radial-fill {
    fill: none;
    stroke: url(#radialGradient);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dasharray 600ms ease;
}

.profile-radial-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.profile-radial-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.profile-radial-value-sm { font-size: 0.9rem; }

.profile-radial-sublabel {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

/* --- Supporting Mini Stats --- */
.profile-supporting-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.profile-page .profile-supporting-stats {
    gap: 0.65rem;
}

.profile-mini-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 0.4rem;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md, 8px);
    gap: 0.15rem;
}

.profile-mini-stat i { font-size: 1rem; color: var(--text-muted); }
.profile-mini-stat-win i { color: var(--success, #22c55e); }
.profile-mini-stat-loss i { color: var(--danger, #ef4444); }

.profile-page .profile-mini-stat {
    background: color-mix(in srgb, var(--profile-card-tint) 88%, transparent);
    border-color: color-mix(in srgb, var(--surface-panel-border, var(--border)) 84%, rgba(160, 179, 212, 0.12));
}

.profile-page .profile-mini-stat-win {
    background: color-mix(in srgb, rgba(127, 211, 175, 0.12) 84%, var(--profile-card-tint));
    border-color: rgba(127, 211, 175, 0.2);
}

.profile-page .profile-mini-stat-loss {
    background: color-mix(in srgb, rgba(241, 166, 180, 0.1) 84%, var(--profile-card-tint));
    border-color: rgba(241, 166, 180, 0.18);
}

.profile-page .profile-mini-stat i {
    color: color-mix(in srgb, var(--text-muted) 80%, #c9d4ee);
}

.profile-page .profile-mini-stat-win i {
    color: var(--profile-win);
}

.profile-page .profile-mini-stat-loss i {
    color: var(--profile-loss);
}

.profile-mini-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.profile-mini-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- W/L/D Stacked Bar --- */
.profile-wld-bar-container { margin-bottom: 1rem; }

.profile-wld-bar {
    display: flex;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-input);
}

.profile-wld-segment { min-width: 2px; transition: width 400ms ease; }
.profile-wld-win { background: #22c55e; }
.profile-wld-loss { background: #ef4444; }
.profile-wld-draw { background: #94a3b8; }

.profile-page .profile-wld-bar {
    background: color-mix(in srgb, var(--profile-card-bg) 74%, rgba(160, 179, 212, 0.08));
}

.profile-page .profile-wld-win,
.profile-page .profile-wld-dot-win {
    background: var(--profile-win);
}

.profile-page .profile-wld-loss,
.profile-page .profile-wld-dot-loss {
    background: var(--profile-loss);
}

.profile-page .profile-wld-draw,
.profile-page .profile-wld-dot-draw {
    background: var(--profile-draw);
}

.profile-wld-legend {
    display: flex;
    gap: 1rem;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.profile-wld-legend-item { display: flex; align-items: center; gap: 0.3rem; }

.profile-wld-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.profile-wld-dot-win { background: #22c55e; }
.profile-wld-dot-loss { background: #ef4444; }
.profile-wld-dot-draw { background: #94a3b8; }

/* --- Game Metrics Row (rank + win rate + played) --- */
.profile-game-metrics {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 0;
}

/* --- Rank Badge --- */
.profile-rank-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-lg, 12px);
    min-width: 72px;
}

.profile-page .profile-rank-badge {
    background: linear-gradient(135deg, rgba(168, 187, 255, 0.14), rgba(140, 201, 194, 0.12));
    border-color: rgba(168, 187, 255, 0.24);
}

.profile-rank-hash { font-size: 0.7rem; color: var(--accent); font-weight: 600; line-height: 1; }
.profile-rank-number { font-size: 1.8rem; font-weight: 800; color: var(--accent); line-height: 1; }

.profile-page .profile-rank-hash,
.profile-page .profile-rank-number {
    color: color-mix(in srgb, var(--profile-accent) 80%, #dbe4ff);
}
.profile-rank-label {
    font-size: 0.58rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

.profile-game-winrate { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.profile-game-winrate-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.profile-game-played-stat { display: flex; flex-direction: column; align-items: center; }
.profile-game-played-value { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.profile-game-played-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* --- Gradient Divider --- */
.profile-gradient-divider {
    height: 1px;
    margin: 0.75rem 0;
    background: linear-gradient(90deg, transparent, var(--border, #374151), transparent);
}

.profile-page .profile-gradient-divider {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--profile-accent) 20%, var(--surface-panel-border, var(--border))), transparent);
}

/* --- Category Cards v2 --- */
.profile-category-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
}

.profile-category-card-v2 {
    text-align: center;
    padding: 0.5rem 0.35rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm, 4px);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.profile-page .profile-category-card-v2 {
    background: color-mix(in srgb, var(--profile-card-bg) 84%, rgba(160, 179, 212, 0.06));
    border-color: color-mix(in srgb, var(--surface-panel-border, var(--border)) 84%, rgba(160, 179, 212, 0.16));
}

.profile-category-card-v2:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.profile-page .profile-category-card-v2:hover {
    box-shadow: 0 8px 18px rgba(6, 13, 25, 0.14);
}

.profile-category-featured {
    grid-column: span 2;
    padding: 0.75rem;
    background: linear-gradient(135deg, var(--bg-input), color-mix(in srgb, var(--accent) 6%, var(--bg-card)));
    border-color: color-mix(in srgb, var(--accent) 25%, var(--border-light));
}

.profile-page .profile-category-featured {
    background: linear-gradient(135deg, color-mix(in srgb, var(--profile-accent-soft) 76%, var(--profile-card-bg)), color-mix(in srgb, rgba(127, 211, 175, 0.08) 64%, var(--profile-card-bg)));
    border-color: color-mix(in srgb, var(--profile-accent) 28%, var(--surface-panel-border, var(--border-light)));
}

.profile-category-featured .profile-category-value-v2 { font-size: 1.5rem; }

.profile-category-value-v2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.profile-category-label-v2 {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.1rem;
}

.profile-category-rank-v2 {
    font-size: 0.62rem;
    color: var(--accent);
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

.profile-page .profile-category-rank-v2 {
    color: color-mix(in srgb, var(--profile-accent) 80%, #dbe4ff);
}

.profile-category-rank-v2 i { font-size: 0.58rem; }

/* --- Profile v2 Mobile --- */
@media (max-width: 575px) {
    .profile-hero-card {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    .profile-hero-number { font-size: 2.2rem; }
    .profile-supporting-stats { grid-template-columns: repeat(2, 1fr); }
    .profile-game-metrics {
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
    }
    .profile-category-featured { grid-column: span 1; }
    .profile-pool-claim-head {
        flex-direction: column;
    }
    .profile-pool-claim-actions .btn {
        width: 100%;
    }
}

/* --- Profile Comments --- */
.profile-comment-form .input-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    background: var(--bg-input, #fff);
}

.profile-page .profile-comment-form .input-group {
    border-color: color-mix(in srgb, var(--surface-panel-border, var(--border)) 86%, rgba(160, 179, 212, 0.14));
    background: color-mix(in srgb, var(--profile-card-tint) 86%, transparent);
}

.profile-comment-form .form-control {
    border: none;
    background: transparent;
    box-shadow: none;
}

.profile-comment-form .form-control:focus {
    box-shadow: none;
}

.profile-comment-form .btn {
    border: none;
    border-left: 1px solid var(--border);
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
}

.profile-page .profile-comment-form .btn {
    border-left-color: color-mix(in srgb, var(--profile-accent) 18%, var(--surface-panel-border, var(--border)));
    background: color-mix(in srgb, var(--profile-accent-soft) 82%, transparent);
    color: color-mix(in srgb, var(--profile-accent) 82%, #dbe4ff);
}

.profile-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.profile-comment-card {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--bg-card, var(--bg-surface));
}

.profile-page .profile-comment-card {
    margin-bottom: 0;
    border-radius: var(--radius-md, 10px);
    border-color: color-mix(in srgb, var(--surface-panel-border, var(--border)) 86%, rgba(160, 179, 212, 0.14));
    background: color-mix(in srgb, var(--profile-card-tint) 88%, transparent);
}

.profile-comment-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.profile-page .table thead th {
    border-color: color-mix(in srgb, var(--surface-panel-border, var(--border)) 82%, rgba(160, 179, 212, 0.12));
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.profile-page .table tbody td {
    border-color: color-mix(in srgb, var(--surface-panel-border-soft, var(--border-light)) 82%, rgba(160, 179, 212, 0.1));
}

/* ============================================
   Professional rank & role colors
   ============================================ */
.rank-gold { color: #f59e0b; font-weight: 700; font-size: 1.1rem; }
.rank-silver { color: #94a3b8; font-weight: 700; font-size: 1.05rem; }
.rank-bronze { color: #b45309; font-weight: 700; font-size: 1rem; }

.leaderboard-thead {
    background: var(--bg-card);
    border-bottom: 2px solid var(--border);
}

.leaderboard-thead th {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.75rem;
}

.lb-col-rank {
    width: 60px;
}

.lb-col-score {
    width: 100px;
}

.lb-col-share {
    width: 90px;
}

.lb-col-near {
    width: 120px;
}

.lb-col-status {
    width: 90px;
}

.lb-status-badge {
    font-size: 0.68rem;
}

.leaderboard-table tbody td {
    color: var(--text-primary);
    border-color: var(--border-light);
}

.leaderboard-table tbody td a {
    color: var(--accent);
}

.leaderboard-table tbody td a:hover {
    color: var(--accent-hover);
}

:root[data-theme="dark"] .leaderboard-table {
    background: #131b29;
}

:root[data-theme="dark"] .leaderboard-thead {
    background: #1a2436;
    border-bottom-color: #2f3d56;
}

:root[data-theme="dark"] .leaderboard-table tbody td {
    color: #e6edf8;
    border-color: rgba(126, 160, 232, 0.16);
}

:root[data-theme="dark"] .leaderboard-table .text-muted {
    color: #a8b6cc !important;
}

:root[data-theme="dark"] .leaderboard-table tbody td a {
    color: #9fc1ff;
}

:root[data-theme="dark"] .leaderboard-table tbody td a:hover {
    color: #c5dbff;
}

.badge-owner {
    background-color: var(--accent-light) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent);
}

.navbar-dark .nav-admin-link:hover,
.navbar-dark .nav-ai-link:hover { color: #fff !important; }

/* --- Presence Toggle (navbar) --- */
.nav-presence-btn {
    padding: 0.35rem 0.4rem !important;
    margin-left: 0.25rem;
}
.presence-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: background-color var(--transition-fast);
}
.presence-dot.online { background-color: var(--success); }
.presence-dot.offline { background-color: var(--text-muted); }

@media (max-width: 767.98px) {
    .profile-header-identity {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-detail-grid {
        grid-template-columns: 1fr;
    }

    .profile-invited-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

.badge-tag-game { background-color: var(--accent-light) !important; color: var(--accent) !important; }
.badge-tag-single { background-color: rgba(107, 114, 128, 0.12) !important; color: var(--text-secondary) !important; }
.badge-tag-mmo { background-color: rgba(59, 130, 246, 0.1) !important; color: var(--info) !important; }
.badge-tag-golden {
    background: linear-gradient(135deg, #ffe7a0, #f7ca63) !important;
    color: #5d4300 !important;
    border: 1px solid rgba(165, 118, 8, 0.35);
    font-weight: 700;
}

/* ===== SECRET CHANNEL ===== */

/* --- NX (Admin Encrypted Stream) --- */
.nx-o {
    position: fixed;
    inset: 0;
    z-index: var(--z-toast);
    background: rgba(3, 7, 18, 0.68);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.85rem;
}

.nx-c {
    width: min(96vw, 540px);
    height: min(78vh, 640px);
    display: flex;
    flex-direction: column;
    background: #0b1220;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.55);
}

.nx-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.58rem 0.72rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    background: #0f172a;
}

.nx-hl {
    display: flex;
    flex-direction: column;
    gap: 0.03rem;
}

.nx-t {
    font-family: var(--font-mono);
    color: #dbeafe;
    font-size: 0.81rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
}

.nx-s {
    color: #94a3b8;
    font-size: 0.72rem;
    line-height: 1.1;
}

.nx-s.ok {
    color: #4ade80;
}

.nx-s.warn {
    color: #fbbf24;
}

.nx-s.err {
    color: #f87171;
}

.nx-x {
    background: transparent;
    border: none;
    color: #94a3b8;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}

.nx-x:hover {
    color: #f8fafc;
    background: rgba(148, 163, 184, 0.14);
}

.nx-l {
    flex: 1;
    overflow-y: auto;
    padding: 0.64rem 0.72rem;
    font-family: var(--font-mono);
    font-size: 0.79rem;
    color: #e2e8f0;
    line-height: 1.56;
    background: #0a1020;
}

.nx-m {
    margin-bottom: 0.34rem;
    word-break: break-word;
}

.nx-time {
    color: #64748b;
    font-size: 0.7rem;
    margin-right: 0.36rem;
}

.nx-u {
    color: #93c5fd;
    font-weight: 700;
    margin-right: 0.16rem;
}

.nx-f {
    color: #94a3b8;
    font-style: italic;
}

.nx-r {
    display: flex;
    gap: 0.44rem;
    padding: 0.56rem 0.62rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    background: #0f172a;
}

.nx-i {
    flex: 1;
    background: #0a1020;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 8px;
    color: #e2e8f0;
    font-family: var(--font-mono);
    font-size: 0.79rem;
    padding: 0.48rem 0.6rem;
}

.nx-i:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.18);
}

.nx-b {
    border: none;
    border-radius: 8px;
    background: #1d4ed8;
    color: #f8fafc;
    font-weight: 600;
    font-size: 0.78rem;
    padding: 0.42rem 0.84rem;
    cursor: pointer;
}

.nx-b:hover {
    background: #2563eb;
}

.nx-g {
    position: fixed;
    inset: 0;
    z-index: var(--z-tooltip);
    background: rgba(2, 6, 23, 0.74);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem;
}

.nx-gc {
    width: min(92vw, 350px);
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.55);
    padding: 1rem;
    text-align: center;
}

.nx-gc h5 {
    margin-bottom: 0.45rem;
    color: #dbeafe;
    font-size: 0.95rem;
}

.nx-gh {
    margin-bottom: 0.62rem;
    color: #94a3b8;
    font-size: 0.73rem;
}

.nx-gc input {
    width: 100%;
    background: #0a1020;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 7px;
    color: #e2e8f0;
    font-family: var(--font-mono);
    font-size: 0.79rem;
    padding: 0.46rem 0.54rem;
    margin-bottom: 0.72rem;
}

.nx-gc input:focus {
    outline: none;
    border-color: #60a5fa;
}

.nx-dg {
    margin-bottom: 0.62rem;
    text-align: left;
}

.nx-ds {
    color: #94a3b8;
    font-size: 0.75rem;
    cursor: pointer;
    user-select: none;
    padding: 0.24rem 0;
    font-family: var(--font-mono);
}

.nx-ds:hover {
    color: #dbeafe;
}

.nx-dg[open] .nx-ds {
    margin-bottom: 0.32rem;
}

.nx-calc {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.nx-calc-in {
    font-size: 0.78rem !important;
    padding: 0.34rem 0.5rem !important;
}

.nx-calc-row {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

.nx-calc-row .nx-calc-in {
    flex: 1;
}

.nx-calc-fetch {
    padding: 0.2rem 0.4rem !important;
    min-height: unset !important;
    font-size: 1rem;
    line-height: 1;
    color: #94a3b8;
}

.nx-calc-fetch:hover {
    color: #dbeafe;
}

.nx-calc-result {
    margin-top: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: #94a3b8;
    word-break: break-all;
    line-height: 1.5;
}

.nx-calc-result code {
    color: #60a5fa;
    background: none;
    padding: 0;
}

.nx-calc-label {
    color: #64748b;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.nx-ga {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.38rem;
}

@media (max-width: 767.98px) {
    .nx-o {
        padding: 0;
        align-items: stretch;
    }

    .nx-c {
        width: 100%;
        height: 100dvh;
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .nx-r {
        flex-wrap: wrap;
    }

    .nx-b {
        width: 100%;
    }
}

/* Global request activity */
.global-request-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: var(--z-top);
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease;
}

.global-request-indicator.visible {
    opacity: 1;
}

.global-request-bar {
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 140ms ease-out;
    background: linear-gradient(90deg, #22d3ee 0%, #60a5fa 55%, #818cf8 100%);
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    .global-request-bar {
        transition: none;
    }
}

/* --- Pool Help Tooltip --- */
.pool-help-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: help;
    margin-left: 0.35rem;
    vertical-align: middle;
}

/* ============================================
   Light Mode — Component Overrides
   ============================================ */

/* --- Navbar --- */
:root[data-theme="light"] .navbar {
    background: var(--bg-navbar) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
}

:root[data-theme="light"] .navbar .nav-link i.bi {
    color: var(--text-secondary);
}

:root[data-theme="light"] .navbar-dark .navbar-nav .nav-link i.bi {
    color: currentColor;
}

:root[data-theme="light"] .nav-games-link i.bi {
    color: currentColor !important;
    filter: none !important;
}

:root[data-theme="light"] .brand-golgufus {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent);
    filter: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .navbar-dark .navbar-nav .nav-link {
    color: var(--text-secondary);
}

:root[data-theme="light"] .navbar-dark .navbar-nav .nav-link:hover,
:root[data-theme="light"] .navbar-dark .navbar-nav .nav-link:focus {
    color: var(--text-primary);
    background-color: rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .navbar-dark .navbar-nav .nav-link.active {
    color: var(--accent);
}

:root[data-theme="light"] .navbar .nav-link.text-light {
    color: var(--text-primary) !important;
}

:root[data-theme="light"] .navbar .btn-link.text-danger {
    color: var(--danger) !important;
}

:root[data-theme="light"] .navbar-toggler-icon {
    filter: invert(0.5);
}

:root[data-theme="light"] .theme-toggle {
    color: var(--text-secondary) !important;
}

:root[data-theme="light"] .presence-dot.online {
    background: var(--success);
}

/* --- Footer --- */
:root[data-theme="light"] .site-footer {
    background: var(--bg-footer);
    color: var(--text-primary);
    border-top: 1px solid var(--border);
}

:root[data-theme="light"] .site-footer a {
    color: var(--text-secondary);
}

:root[data-theme="light"] .site-footer a:hover {
    color: var(--accent);
}

:root[data-theme="light"] .footer-brand {
    color: var(--accent);
}

:root[data-theme="light"] .footer-heading {
    color: var(--text-primary);
}

:root[data-theme="light"] .footer-bottom {
    color: var(--text-muted);
}

:root[data-theme="light"] footer {
    background-color: var(--bg-footer) !important;
    border-top: 1px solid var(--border) !important;
}

/* --- Home Hero — lighter gradient --- */
:root[data-theme="light"] .home-hero {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 48%),
        linear-gradient(140deg, #d8dee4 0%, #e6e8ea 55%, #f4f1ea 100%);
    border-color: var(--border);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .home-hero::before {
    background:
        linear-gradient(125deg, rgba(0, 0, 0, 0.02), transparent),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.02) 0, rgba(0, 0, 0, 0.02) 1px, transparent 1px, transparent 22px);
}

:root[data-theme="light"] .home-hero::after {
    filter: saturate(0.95) contrast(1.02);
    opacity: 0.22;
}

:root[data-theme="light"] .home-hero h2 {
    color: var(--text-primary);
}

:root[data-theme="light"] .home-hero h2 span {
    color: var(--accent);
}

:root[data-theme="light"] .home-hero-description {
    color: var(--text-secondary);
}

:root[data-theme="light"] .home-hero-panel {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
}

:root[data-theme="light"] .home-hero-panel-title {
    color: var(--text-primary);
}

:root[data-theme="light"] .home-hero-panel-row {
    color: var(--text-secondary);
}

:root[data-theme="light"] .home-hero-panel-row strong {
    color: var(--text-primary);
}

:root[data-theme="light"] .home-hero-metrics {
    color: var(--text-secondary);
}

:root[data-theme="light"] .home-hero-metric strong {
    color: var(--text-primary);
}

:root[data-theme="light"] .home-hero-metric {
    background: rgba(255, 255, 255, 0.55);
    border-color: var(--border);
}

:root[data-theme="light"] .home-hero-metric span {
    color: var(--text-muted);
}

:root[data-theme="light"] .home-hero-panel-row {
    border-bottom-color: var(--border-light);
}

:root[data-theme="light"] .home-hero-achievements-summary {
    color: var(--text-secondary);
}

:root[data-theme="light"] .home-hero-achievements-count {
    border-color: var(--border);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.72);
}

:root[data-theme="light"] .home-hero-panel-footnote {
    color: var(--text-secondary);
}

/* --- Dashboard Rewards Header — lighter gradient --- */
:root[data-theme="light"] .dash-rewards-header {
    background: linear-gradient(135deg, #d0d9ea, #dfe8f4);
    color: var(--text-primary);
}

:root[data-theme="light"] .dash-rewards-title h5 {
    color: var(--text-primary);
}

/* --- Ops Page Header (Admin / Control Center) --- */
:root[data-theme="light"] .ops-page-header {
    background: linear-gradient(180deg, #e8ecf3, #f0f3f8);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
}

:root[data-theme="light"] .ops-page-kicker,
:root[data-theme="light"] .ops-page-metric-label,
:root[data-theme="light"] .awp-metric-label {
    color: var(--text-secondary);
    opacity: 1;
}

:root[data-theme="light"] .ops-page-title,
:root[data-theme="light"] .ops-page-metric-value {
    color: var(--text-primary);
}

:root[data-theme="light"] .ops-page-description {
    color: var(--text-secondary);
}

/* --- Mobile collapsed nav — light mode --- */
@media (max-width: 991.98px) {
    :root[data-theme="light"] #navbarNav .navbar-nav .nav-link {
        color: var(--text-secondary);
    }

    :root[data-theme="light"] #navbarNav .navbar-nav .nav-link:hover {
        color: var(--text-primary);
        background-color: rgba(0, 0, 0, 0.04);
    }

    :root[data-theme="light"] #navbarNav .navbar-nav .nav-link.active {
        color: var(--accent);
    }

    :root[data-theme="light"] #navbarNav .navbar-nav .nav-link i.bi {
        color: var(--text-muted);
    }

    :root[data-theme="light"] #navbarNav .navbar-nav .nav-link.active i.bi,
    :root[data-theme="light"] #navbarNav .navbar-nav .nav-link:hover i.bi {
        color: var(--text-primary);
    }

    :root[data-theme="light"] #navbarNav .navbar-nav.me-auto {
        border-bottom-color: var(--border);
    }
}

/* --- Light Mode: Buttons --- */
:root[data-theme="light"] .btn-outline-light {
    color: var(--accent);
    border-color: var(--accent);
    background: transparent;
}

:root[data-theme="light"] .btn-outline-light:hover,
:root[data-theme="light"] .btn-outline-light:focus {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* --- Light Mode: Log Console / Terminal Bar --- */
:root[data-theme="light"] .log-console {
    background: #f3f4f7;
    border-top-color: var(--border);
    color: #2c3340;
}

:root[data-theme="light"] .log-header {
    background: #e4e7ed;
    border-bottom-color: var(--border);
}

:root[data-theme="light"] .log-toggle-btn {
    border-color: var(--border);
    color: var(--text-secondary);
}

:root[data-theme="light"] .log-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .log-tab {
    color: var(--text-secondary);
}

:root[data-theme="light"] .log-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

:root[data-theme="light"] .log-tab:hover {
    color: var(--text-primary);
}

:root[data-theme="light"] .log-title {
    color: var(--text-secondary);
}

:root[data-theme="light"] .log-count-badge {
    background: var(--accent-light);
    color: var(--accent);
}

:root[data-theme="light"] .log-filter-input {
    background: #fff;
    border-color: var(--border);
    color: var(--text-primary);
}

:root[data-theme="light"] .log-body {
    background: #f8f9fb;
}

:root[data-theme="light"] .log-entry {
    border-bottom-color: var(--border-light);
}

:root[data-theme="light"] .log-inf .log-level { color: #1d6fb5; }
:root[data-theme="light"] .log-wrn .log-level { color: #a67c17; }
:root[data-theme="light"] .log-err .log-level { color: #c93c37; }
:root[data-theme="light"] .log-dbg .log-level { color: #6b7585; }

:root[data-theme="light"] .log-level-btn {
    border-color: var(--border);
    color: var(--text-secondary);
}

:root[data-theme="light"] .log-level-btn.active {
    background: var(--accent-light);
    color: var(--accent);
    border-color: var(--accent);
}

:root[data-theme="light"] .terminal-output {
    background: #f8f9fb;
    color: var(--text-primary);
}

:root[data-theme="light"] .terminal-input {
    color: var(--text-primary);
}

:root[data-theme="light"] .terminal-prompt {
    color: var(--accent);
}

:root[data-theme="light"] .log-status-badge {
    color: var(--text-secondary);
}

/* --- Light Mode: Dashboard Stats & Rewards Panels --- */
:root[data-theme="light"] .dash-stat {
    background: #f2f4f8;
    border: 1px solid var(--border-light);
}

:root[data-theme="light"] .dash-pool-total-amount {
    color: var(--accent);
}

:root[data-theme="light"] .dash-pool-total-usd,
:root[data-theme="light"] .dash-pool-usd {
    color: var(--text-muted);
}

:root[data-theme="light"] .dash-pool-label {
    color: var(--text-muted);
}

:root[data-theme="light"] .dash-rewards-footer {
    color: var(--text-secondary);
}

:root[data-theme="light"] .dash-total-reward {
    color: var(--text-primary);
}

:root[data-theme="light"] .dash-game-footer .badge {
    opacity: 0.9;
}