/* ================================================================================================
   SEPTICA PRO - ULTRA PREMIUM UI/UX
   Romanian Card Game - Casino Royale Edition
   
   Design System:
   - Bootstrap 5.3.2 Grid System (responsive foundation)
   - Material Design 3 Navigation Rail
   - Glassmorphism & Neumorphism
   - 3D Card Effects with Depth
   - Premium Color Palette
   - Advanced Animations
   - Full Responsive (Bootstrap breakpoints: xs, sm, md, lg, xl, xxl)
   
   Bootstrap Integration:
   - Uses Bootstrap Grid (container-fluid, row, col)
   - Uses Bootstrap Spacing (gap, p-, m- utilities)
   - Uses Bootstrap Flexbox utilities (d-flex, flex-column, etc.)
   - Custom CSS complements Bootstrap, doesn't override core system
   
   MOBILE FIRST APPROACH:
   - Base CSS values target smallest screens (mobile)
   - Progressive enhancement via min-width media queries
   - Touch targets: 44px minimum for all interactive elements
   - Layout dimensions scale up for larger screens
   - Cards: 50x70px (mobile) → 70x98px (desktop)
   - Header: 60px (mobile) → 70px (desktop)
   - Navigation: 48px (mobile) → 72px (desktop)
   
   NOTE: Some legacy max-width media queries remain for specific features
   but core layout follows mobile-first principles.
================================================================================================ */

/* ================================================================================================
   1. CSS VARIABLES & DESIGN TOKENS (Bootstrap-compatible)
================================================================================================ */
:root {
    /* Primary Colors - Casino Royale */
    --color-primary: #1a4d2e;
    --color-primary-light: #2d7a4f;
    --color-primary-dark: #0f2819;
    --color-primary-rgb: 26, 77, 46;
    
    /* Accent Colors - Gold */
    --color-accent: #ffd700;
    --color-accent-light: #ffe44d;
    --color-accent-dark: #b8960a;
    --color-accent-rgb: 255, 215, 0;
    
    /* Neutral Colors */
    --color-bg-primary: #0a0e0d;
    --color-bg-secondary: #141a17;
    --color-bg-tertiary: #1e2622;
    --color-surface: #243029;
    --color-surface-light: #2d3a32;
    
    /* Text Colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.75);
    --color-text-tertiary: rgba(255, 255, 255, 0.5);
    --color-text-disabled: rgba(255, 255, 255, 0.3);
    
    /* Semantic Colors */
    --color-success: #4ade80;
    --color-success-rgb: 74, 222, 128;
    --color-warning: #fbbf24;
    --color-warning-rgb: 251, 191, 36;
    --color-error: #ef4444;
    --color-error-rgb: 239, 68, 68;
    --color-info: #3b82f6;
    --color-info-rgb: 59, 130, 246;

    /* Card Suit Colors */
    --color-suit-red: #dc2626;
    --color-suit-black: #1f2937;

    /* Glass Effects */
    --glass-bg: rgba(255, 255, 255, 0.08);

/* ================================================================================================
   GAME PRELOADER - Dead code (HTML removed) — kept as placeholder
================================================================================================ */

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

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

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

@keyframes shimmerGold {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-shadow: rgba(0, 0, 0, 0.3);

    /* Glassmorphism Blur Levels */
    --glass-blur: 20px;
    --glass-blur-heavy: 40px;
    --glass-blur-light: 12px;
    --glass-blur-touch: 10px;

    /* Glassmorphism Backgrounds */
    --glass-bg-strong: rgba(255, 255, 255, 0.12);
    --glass-bg-medium: rgba(255, 255, 255, 0.08);
    --glass-bg-subtle: rgba(255, 255, 255, 0.04);
    --glass-bg-card: rgba(255, 255, 255, 0.06);

    /* Glassmorphism Borders */
    --glass-border-strong: rgba(255, 255, 255, 0.25);
    --glass-border-medium: rgba(255, 255, 255, 0.15);
    --glass-border-accent: rgba(var(--color-accent-rgb), 0.2);

    /* Glassmorphism Table */
    --glass-table-bg: rgba(26, 77, 46, 0.25);
    --glass-table-bg-center: rgba(26, 77, 46, 0.35);
    --glass-table-border: rgba(var(--color-accent-rgb), 0.15);

    /* Background Mesh Colors (behind glass) */
    --bg-mesh-1: rgba(26, 77, 46, 0.4);
    --bg-mesh-2: rgba(var(--color-accent-rgb), 0.06);
    --bg-mesh-3: rgba(42, 105, 66, 0.3);
    
    /* ✨ Glow & Luminous Shadow System */
    --glow-color: var(--color-accent-rgb);
    --glow-xs: 0 0 6px rgba(var(--glow-color), 0.15);
    --glow-sm: 0 0 10px rgba(var(--glow-color), 0.2), 0 0 20px rgba(var(--glow-color), 0.1);
    --glow-md: 0 0 15px rgba(var(--glow-color), 0.3), 0 0 30px rgba(var(--glow-color), 0.15), 0 0 45px rgba(var(--glow-color), 0.08);
    --glow-lg: 0 0 20px rgba(var(--glow-color), 0.4), 0 0 40px rgba(var(--glow-color), 0.2), 0 0 60px rgba(var(--glow-color), 0.1);
    --glow-xl: 0 0 30px rgba(var(--glow-color), 0.5), 0 0 60px rgba(var(--glow-color), 0.25), 0 0 90px rgba(var(--glow-color), 0.12);
    --glow-text: 0 0 8px rgba(var(--glow-color), 0.6), 0 0 16px rgba(var(--glow-color), 0.3);
    --glow-border: rgba(var(--glow-color), 0.35);
    --glow-border-hover: rgba(var(--glow-color), 0.6);
    
    /* Elevation Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Card 3D Shadows */
    --card-shadow: 0 4px 8px rgba(0, 0, 0, 0.4),
                   0 8px 16px rgba(0, 0, 0, 0.3),
                   0 16px 32px rgba(0, 0, 0, 0.2);
    
    /* Spacing Scale (Bootstrap-compatible: matches $spacer scale) */
    --space-xs: 4px;   /* BS: .25rem */
    --space-sm: 8px;   /* BS: .5rem */
    --space-md: 16px;  /* BS: 1rem */
    --space-lg: 24px;  /* BS: 1.5rem */
    --space-xl: 32px;  /* BS: 2rem */
    --space-2xl: 48px; /* BS: 3rem */
    --space-3xl: 64px; /* BS: 4rem */
    
    /* Bootstrap 5.3 Breakpoints Reference:
       xs: 0px     (default, mobile-first)
       sm: 576px   (landscape phones)
       md: 768px   (tablets)
       lg: 992px   (desktops)
       xl: 1200px  (large desktops)
       xxl: 1400px (extra large desktops)
       
       Custom breakpoints for fine control:
       480px: small mobile portrait
       375px: extra small mobile (iPhone SE)
    */
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    
    /* Layout Dimensions - Mobile First (base values for smallest screens) */
    --nav-rail-width: 48px; /* Mobile: compact navigation */
    --nav-rail-width-collapsed: 48px; /* Mobile: always compact */
    --top-bar-height: 60px; /* Mobile: compact header */
    --status-bar-height: 40px; /* Consistent across all devices */
    --context-panel-width: 280px; /* Mobile/Tablet: narrower panel */
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    --font-display: 'Poppins', 'Inter', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    
    /* Z-Index Scale */
    --z-base: 1;
    
    /* Mobile Viewport Fix - iOS Safari dynamic viewport */
    --viewport-height: 100vh;
    --viewport-height-small: 100svh; /* Small viewport (Safari address bar visible) */
    --viewport-height-large: 100lvh; /* Large viewport (Safari address bar hidden) */
    --viewport-height-dynamic: 100dvh; /* Dynamic viewport (recommended for mobile) */
    
    /* Safe Area Insets - iOS Notch & Home Indicator Support */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ================================================================================================
   1.5 THEME VARIATIONS
================================================================================================ */

/* Midnight Blue Theme */
[data-theme="midnight"] {
    --color-primary: #1e3a5f;
    --color-primary-light: #2d5a8f;
    --color-primary-dark: #0f1d2f;
    --color-primary-rgb: 30, 58, 95;

    --color-accent: #e0e7ff;
    --color-accent-light: #f0f4ff;
    --color-accent-dark: #9ca3af;
    --color-accent-rgb: 224, 231, 255;

    --color-bg-primary: #0a0e1a;
    --color-bg-secondary: #141a27;
    --color-bg-tertiary: #1e2632;
    --color-surface: #243052;
    --color-surface-light: #2d3a62;

    --glass-table-bg: rgba(30, 58, 95, 0.25);
    --glass-table-bg-center: rgba(30, 58, 95, 0.35);
    --bg-mesh-1: rgba(30, 58, 95, 0.4);
    --bg-mesh-2: rgba(30, 58, 95, 0.3);
    --bg-mesh-3: rgba(224, 231, 255, 0.15);
}

/* Ruby Passion Theme */
[data-theme="ruby"] {
    --color-primary: #4a1e1e;
    --color-primary-light: #7a2e2e;
    --color-primary-dark: #2a0e0e;
    --color-primary-rgb: 74, 30, 30;

    --color-accent: #ffd700;
    --color-accent-light: #ffe44d;
    --color-accent-dark: #b8960a;
    --color-accent-rgb: 255, 215, 0;

    --color-bg-primary: #0e0a0a;
    --color-bg-secondary: #1a1414;
    --color-bg-tertiary: #261e1e;
    --color-surface: #3a2d2d;
    --color-surface-light: #4a3d3d;

    --glass-table-bg: rgba(74, 30, 30, 0.25);
    --glass-table-bg-center: rgba(74, 30, 30, 0.35);
    --bg-mesh-1: rgba(74, 30, 30, 0.4);
    --bg-mesh-2: rgba(74, 30, 30, 0.3);
    --bg-mesh-3: rgba(var(--color-accent-rgb), 0.15);
}

/* Royal Purple Theme */
[data-theme="purple"] {
    --color-primary: #3d2a5f;
    --color-primary-light: #5d3a8f;
    --color-primary-dark: #1d0a2f;
    --color-primary-rgb: 61, 42, 95;

    --color-accent: #d4af37;
    --color-accent-light: #f4cf57;
    --color-accent-dark: #a48f27;
    --color-accent-rgb: 212, 175, 55;

    --color-bg-primary: #0e0a1a;
    --color-bg-secondary: #1a1427;
    --color-bg-tertiary: #261e32;
    --color-surface: #362d52;
    --color-surface-light: #463d62;

    --glass-table-bg: rgba(61, 42, 95, 0.25);
    --glass-table-bg-center: rgba(61, 42, 95, 0.35);
    --bg-mesh-1: rgba(61, 42, 95, 0.4);
    --bg-mesh-2: rgba(61, 42, 95, 0.3);
    --bg-mesh-3: rgba(var(--color-accent-rgb), 0.15);
}

/* Ocean Breeze Theme */
[data-theme="ocean"] {
    --color-primary: #1e4d4d;
    --color-primary-light: #2e7a7a;
    --color-primary-dark: #0e2a2a;
    --color-primary-rgb: 30, 77, 77;

    --color-accent: #ff6b6b;
    --color-accent-light: #ff8b8b;
    --color-accent-dark: #cc5555;
    --color-accent-rgb: 255, 107, 107;

    --color-bg-primary: #0a1414;
    --color-bg-secondary: #141a1a;
    --color-bg-tertiary: #1e2626;
    --color-surface: #2d3a3a;
    --color-surface-light: #3d4a4a;

    --glass-table-bg: rgba(30, 77, 77, 0.25);
    --glass-table-bg-center: rgba(30, 77, 77, 0.35);
    --bg-mesh-1: rgba(30, 77, 77, 0.4);
    --bg-mesh-2: rgba(30, 77, 77, 0.3);
    --bg-mesh-3: rgba(255, 107, 107, 0.15);
}

/* === POKER THEMES === */

/* Texas Hold'em Gold Theme */
[data-theme="texas"] {
    --color-primary: #2a2000;
    --color-primary-light: #4a3a00;
    --color-primary-dark: #1a1000;
    --color-primary-rgb: 42, 32, 0;

    --color-accent: #ffb700;
    --color-accent-light: #ffd700;
    --color-accent-dark: #cc9200;
    --color-accent-rgb: 255, 183, 0;

    --color-bg-primary: #0d0a00;
    --color-bg-secondary: #1a1400;
    --color-bg-tertiary: #2a2000;
    --color-surface: #3a3000;
    --color-surface-light: #4a4000;

    --glass-table-bg: rgba(42, 32, 0, 0.3);
    --glass-table-bg-center: rgba(255, 183, 0, 0.2);
    --bg-mesh-1: rgba(255, 183, 0, 0.3);
    --bg-mesh-2: rgba(42, 32, 0, 0.4);
    --bg-mesh-3: rgba(var(--color-accent-rgb), 0.2);
}

/* Vegas Neon Theme */
[data-theme="vegas"] {
    --color-primary: #4a0e4a;
    --color-primary-light: #7a1e7a;
    --color-primary-dark: #2a002a;
    --color-primary-rgb: 74, 14, 74;

    --color-accent: #ff00ff;
    --color-accent-light: #ff69ff;
    --color-accent-dark: #cc00cc;
    --color-accent-rgb: 255, 0, 255;

    --color-bg-primary: #0e000e;
    --color-bg-secondary: #1a0a1a;
    --color-bg-tertiary: #2a1a2a;
    --color-surface: #3a2a3a;
    --color-surface-light: #4a3a4a;

    --glass-table-bg: rgba(74, 14, 74, 0.3);
    --glass-table-bg-center: rgba(255, 0, 255, 0.15);
    --bg-mesh-1: rgba(255, 0, 255, 0.35);
    --bg-mesh-2: rgba(74, 14, 74, 0.4);
    --bg-mesh-3: rgba(138, 43, 226, 0.25);
}

/* Monte Carlo Elegance Theme */
[data-theme="monaco"] {
    --color-primary: #2a2a2a;
    --color-primary-light: #4a4a4a;
    --color-primary-dark: #1a1a1a;
    --color-primary-rgb: 42, 42, 42;

    --color-accent: #e8e8e8;
    --color-accent-light: #ffffff;
    --color-accent-dark: #b8b8b8;
    --color-accent-rgb: 232, 232, 232;

    --color-bg-primary: #0a0a0a;
    --color-bg-secondary: #141414;
    --color-bg-tertiary: #1e1e1e;
    --color-surface: #2d2d2d;
    --color-surface-light: #3d3d3d;

    --glass-table-bg: rgba(42, 42, 42, 0.3);
    --glass-table-bg-center: rgba(232, 232, 232, 0.1);
    --bg-mesh-1: rgba(232, 232, 232, 0.15);
    --bg-mesh-2: rgba(42, 42, 42, 0.4);
    --bg-mesh-3: rgba(192, 192, 192, 0.2);
}

/* Macau Fortune Theme */
[data-theme="macau"] {
    --color-primary: #8b0000;
    --color-primary-light: #b22222;
    --color-primary-dark: #5a0000;
    --color-primary-rgb: 139, 0, 0;

    --color-accent: #ffd700;
    --color-accent-light: #ffe44d;
    --color-accent-dark: #ccaa00;
    --color-accent-rgb: 255, 215, 0;

    --color-bg-primary: #1a0000;
    --color-bg-secondary: #2a0a0a;
    --color-bg-tertiary: #3a1414;
    --color-surface: #4a1e1e;
    --color-surface-light: #5a2e2e;

    --glass-table-bg: rgba(139, 0, 0, 0.3);
    --glass-table-bg-center: rgba(var(--color-accent-rgb), 0.2);
    --bg-mesh-1: rgba(139, 0, 0, 0.4);
    --bg-mesh-2: rgba(var(--color-accent-rgb), 0.25);
    --bg-mesh-3: rgba(220, 20, 60, 0.2);
}

/* Atlantic Sunset Theme */
[data-theme="atlantic"] {
    --color-primary: #1e4a6a;
    --color-primary-light: #2e6a9a;
    --color-primary-dark: #0e2a3a;
    --color-primary-rgb: 30, 74, 106;

    --color-accent: #ff8c42;
    --color-accent-light: #ffaa69;
    --color-accent-dark: #cc6e35;
    --color-accent-rgb: 255, 140, 66;

    --color-bg-primary: #0a1420;
    --color-bg-secondary: #14202a;
    --color-bg-tertiary: #1e2e3a;
    --color-surface: #2d3e4a;
    --color-surface-light: #3d4e5a;

    --glass-table-bg: rgba(30, 74, 106, 0.3);
    --glass-table-bg-center: rgba(255, 140, 66, 0.15);
    --bg-mesh-1: rgba(30, 74, 106, 0.4);
    --bg-mesh-2: rgba(255, 140, 66, 0.3);
    --bg-mesh-3: rgba(30, 144, 255, 0.2);
}

/* === DARK THEMES === */

/* Black Diamond Theme */
[data-theme="diamond"] {
    --color-primary: #0a0a0f;
    --color-primary-light: #1a1a2e;
    --color-primary-dark: #000000;
    --color-primary-rgb: 10, 10, 15;

    --color-accent: #00d4ff;
    --color-accent-light: #5ae4ff;
    --color-accent-dark: #0099cc;
    --color-accent-rgb: 0, 212, 255;

    --color-bg-primary: #000000;
    --color-bg-secondary: #0a0a0f;
    --color-bg-tertiary: #14141f;
    --color-surface: #1a1a2e;
    --color-surface-light: #252540;

    --glass-table-bg: rgba(10, 10, 15, 0.4);
    --glass-table-bg-center: rgba(0, 212, 255, 0.15);
    --bg-mesh-1: rgba(0, 212, 255, 0.25);
    --bg-mesh-2: rgba(10, 10, 15, 0.5);
    --bg-mesh-3: rgba(90, 228, 255, 0.15);
}

/* Onyx Gold Theme */
[data-theme="onyx"] {
    --color-primary: #0f0f0a;
    --color-primary-light: #1f1f14;
    --color-primary-dark: #000000;
    --color-primary-rgb: 15, 15, 10;

    --color-accent: #c9a961;
    --color-accent-light: #e0c589;
    --color-accent-dark: #a08948;
    --color-accent-rgb: 201, 169, 97;

    --color-bg-primary: #000000;
    --color-bg-secondary: #0a0a08;
    --color-bg-tertiary: #14140f;
    --color-surface: #1f1f14;
    --color-surface-light: #2a2a1e;

    --glass-table-bg: rgba(15, 15, 10, 0.4);
    --glass-table-bg-center: rgba(201, 169, 97, 0.2);
    --bg-mesh-1: rgba(201, 169, 97, 0.2);
    --bg-mesh-2: rgba(15, 15, 10, 0.5);
    --bg-mesh-3: rgba(224, 197, 137, 0.15);
}

/* Crimson Shadow Theme */
[data-theme="crimson"] {
    --color-primary: #0f0000;
    --color-primary-light: #1f0a0a;
    --color-primary-dark: #000000;
    --color-primary-rgb: 15, 0, 0;

    --color-accent: #dc143c;
    --color-accent-light: #ff1744;
    --color-accent-dark: #a00020;
    --color-accent-rgb: 220, 20, 60;

    --color-bg-primary: #000000;
    --color-bg-secondary: #0a0000;
    --color-bg-tertiary: #140505;
    --color-surface: #1f0a0a;
    --color-surface-light: #2a1414;

    --glass-table-bg: rgba(15, 0, 0, 0.4);
    --glass-table-bg-center: rgba(220, 20, 60, 0.2);
    --bg-mesh-1: rgba(220, 20, 60, 0.3);
    --bg-mesh-2: rgba(15, 0, 0, 0.5);
    --bg-mesh-3: rgba(255, 23, 68, 0.2);
}

/* Emerald Night Theme */
[data-theme="emerald"] {
    --color-primary: #001f0f;
    --color-primary-light: #0a2f1a;
    --color-primary-dark: #000000;
    --color-primary-rgb: 0, 31, 15;

    --color-accent: #50c878;
    --color-accent-light: #7ce39d;
    --color-accent-dark: #3a9b5c;
    --color-accent-rgb: 80, 200, 120;

    --color-bg-primary: #000000;
    --color-bg-secondary: #000a05;
    --color-bg-tertiary: #00140a;
    --color-surface: #0a2f1a;
    --color-surface-light: #143f24;

    --glass-table-bg: rgba(0, 31, 15, 0.4);
    --glass-table-bg-center: rgba(80, 200, 120, 0.2);
    --bg-mesh-1: rgba(80, 200, 120, 0.25);
    --bg-mesh-2: rgba(0, 31, 15, 0.5);
    --bg-mesh-3: rgba(124, 227, 157, 0.15);
}

/* Platinum Elite Theme */
[data-theme="platinum"] {
    --color-primary: #0a0a0a;
    --color-primary-light: #1a1a1a;
    --color-primary-dark: #000000;
    --color-primary-rgb: 10, 10, 10;

    --color-accent: #e5e4e2;
    --color-accent-light: #ffffff;
    --color-accent-dark: #b8b7b5;
    --color-accent-rgb: 229, 228, 226;

    --color-bg-primary: #000000;
    --color-bg-secondary: #050505;
    --color-bg-tertiary: #0f0f0f;
    --color-surface: #1a1a1a;
    --color-surface-light: #252525;

    --glass-table-bg: rgba(10, 10, 10, 0.4);
    --glass-table-bg-center: rgba(229, 228, 226, 0.1);
    --bg-mesh-1: rgba(229, 228, 226, 0.15);
    --bg-mesh-2: rgba(10, 10, 10, 0.5);
    --bg-mesh-3: rgba(255, 255, 255, 0.1);
}

/* === PURPLE HAZE THEME === */

/* Purple Haze Theme - Inspired by homepage purple-blue gradient (#667eea → #764ba2) */
[data-theme="haze"] {
    --color-primary: #0a0e1a;
    --color-primary-light: #1a1f3a;
    --color-primary-dark: #050711;
    --color-primary-rgb: 10, 14, 26;

    --color-accent: #667eea;
    --color-accent-light: #a78bfa;
    --color-accent-dark: #764ba2;
    --color-accent-rgb: 102, 126, 234;

    --color-bg-primary: #0a0e1a;
    --color-bg-secondary: #0f1323;
    --color-bg-tertiary: #1a1f3a;
    --color-surface: #1e2438;
    --color-surface-light: #252b45;

    --glass-table-bg: rgba(10, 14, 26, 0.4);
    --glass-table-bg-center: rgba(102, 126, 234, 0.08);
    --bg-mesh-1: rgba(102, 126, 234, 0.15);
    --bg-mesh-2: rgba(118, 75, 162, 0.12);
    --bg-mesh-3: rgba(167, 139, 250, 0.08);
}

/* === EMERALD FOREST THEME === */

/* Emerald Forest Theme - Inspired by homepage green success (#10b981) */
[data-theme="forest"] {
    --color-primary: #0a1410;
    --color-primary-light: #1a2f1a;
    --color-primary-dark: #050a08;
    --color-primary-rgb: 10, 20, 16;

    --color-accent: #10b981;
    --color-accent-light: #34d399;
    --color-accent-dark: #059669;
    --color-accent-rgb: 16, 185, 129;

    --color-bg-primary: #0a1410;
    --color-bg-secondary: #0f1915;
    --color-bg-tertiary: #14241d;
    --color-surface: #1a2f25;
    --color-surface-light: #203a2d;

    --glass-table-bg: rgba(10, 20, 16, 0.4);
    --glass-table-bg-center: rgba(16, 185, 129, 0.08);
    --bg-mesh-1: rgba(16, 185, 129, 0.15);
    --bg-mesh-2: rgba(5, 150, 105, 0.12);
    --bg-mesh-3: rgba(52, 211, 153, 0.08);
}

/* === LIGHT THEME === */

/* Royal Light Theme - Premium Light Mode */
[data-theme="light"] {
    /* Primary colors - Clean neutral backgrounds */
    --color-primary: #e4e6e8;
    --color-primary-light: #f0f2f4;
    --color-primary-dark: #cdd0d4;
    --color-primary-rgb: 228, 230, 232;

    /* Accent - Rich Gold (saturated for contrast) */
    --color-accent: #c49a2a;
    --color-accent-light: #dab94d;
    --color-accent-dark: #a07d1a;
    --color-accent-rgb: 196, 154, 42;

    /* Backgrounds - Clean whites (neutral, no yellow) */
    --color-bg-primary: #f8f9fa;
    --color-bg-secondary: #f0f2f4;
    --color-bg-tertiary: #e6e8eb;
    --color-surface: #ffffff;
    --color-surface-light: #f8f9fa;

    /* Text colors - High contrast blacks */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-tertiary: #6a6a6a;
    --color-text-disabled: #9a9a9a;

    /* Glass effects - Subtle with depth */
    --glass-bg: rgba(255, 255, 255, 0.88);
    --glass-bg-strong: rgba(255, 255, 255, 0.95);
    --glass-bg-medium: rgba(255, 255, 255, 0.78);
    --glass-bg-subtle: rgba(248, 249, 250, 0.6);
    --glass-bg-card: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-border-strong: rgba(0, 0, 0, 0.18);
    --glass-border-medium: rgba(0, 0, 0, 0.12);
    --glass-border-accent: rgba(196, 154, 42, 0.35);
    --glass-shadow: rgba(0, 0, 0, 0.06);
    --glass-table-bg: rgba(228, 230, 232, 0.45);
    --glass-table-bg-center: rgba(196, 154, 42, 0.08);
    --glass-table-border: rgba(196, 154, 42, 0.25);

    /* Mesh backgrounds - Subtle gold accents */
    --bg-mesh-1: rgba(196, 154, 42, 0.06);
    --bg-mesh-2: rgba(228, 230, 232, 0.35);
    --bg-mesh-3: rgba(196, 154, 42, 0.04);

    /* Semantic colors - Adjusted for light theme */
    --color-success: #2d7a3e;
    --color-success-rgb: 45, 122, 62;
    --color-error: #c93030;
    --color-error-rgb: 201, 48, 48;
    --color-warning: #e6a700;
    --color-warning-rgb: 230, 167, 0;
    --color-info: #1a73e8;
    --color-info-rgb: 26, 115, 232;

    /* Card Suit Colors - Light theme (higher contrast) */
    --color-suit-red: #b91c1c;
    --color-suit-black: #111827;

    /* Gold accent for cards/special elements */
    --color-gold: #d4af37;

    /* Enhanced shadows for light theme (more visible) */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.06);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.12),
                   0 4px 16px rgba(0, 0, 0, 0.08),
                   0 8px 24px rgba(0, 0, 0, 0.06);

    /* Light theme glow — softer, warmer, more refined */
    --glow-color: var(--color-accent-rgb);
    --glow-xs: 0 0 6px rgba(var(--glow-color), 0.08);
    --glow-sm: 0 0 12px rgba(var(--glow-color), 0.1);
    --glow-md: 0 0 20px rgba(var(--glow-color), 0.12);
    --glow-lg: 0 0 30px rgba(var(--glow-color), 0.15);
    --glow-xl: 0 0 50px rgba(var(--glow-color), 0.12);
    --glow-text: 0 0 6px rgba(var(--glow-color), 0.2);
    --glow-border: rgba(var(--glow-color), 0.25);
    --glow-border-hover: rgba(var(--glow-color), 0.4);
}

/* Light theme specific adjustments */
[data-theme="light"] .nav-rail {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    background: linear-gradient(0deg,
        rgba(250, 249, 247, 0.98) 0%,
        rgba(245, 243, 238, 0.95) 100%
    );
}

[data-theme="light"] .nav-item {
    color: var(--color-text-secondary);
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .nav-item:hover {
    color: var(--color-text-primary);
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: rgba(var(--color-accent-rgb), 0.3);
}

[data-theme="light"] .nav-item.active {
    color: var(--color-text-primary);
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.2) 0%,
        rgba(var(--color-accent-rgb), 0.15) 100%
    );
    border-color: var(--color-accent);
}

[data-theme="light"] .nav-item .material-symbols-rounded {
    color: var(--color-text-secondary);
}

[data-theme="light"] .nav-item:hover .material-symbols-rounded,
[data-theme="light"] .nav-item.active .material-symbols-rounded {
    color: var(--color-accent);
}

/* Light theme: Primary nav bar */
[data-theme="light"] .nav-bar-btn {
    color: var(--color-text-secondary);
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .nav-bar-btn:hover {
    color: var(--color-text-primary);
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: rgba(var(--color-accent-rgb), 0.3);
}

[data-theme="light"] .nav-bar-btn.active {
    color: var(--color-text-primary);
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.2) 0%,
        rgba(var(--color-accent-rgb), 0.15) 100%
    );
    border-color: var(--color-accent);
}

[data-theme="light"] .nav-bar-btn .material-symbols-rounded {
    color: var(--color-text-secondary);
}

[data-theme="light"] .nav-bar-btn:hover .material-symbols-rounded,
[data-theme="light"] .nav-bar-btn.active .material-symbols-rounded {
    color: var(--color-accent);
}

[data-theme="light"] .nav-bar-fab {
    color: #fff;
}

/* Light theme: Drawer */
[data-theme="light"] .drawer-panel {
    background: linear-gradient(180deg,
        rgba(250, 249, 247, 0.98) 0%,
        rgba(245, 243, 238, 0.95) 100%
    );
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .drawer-handle-bar {
    background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .drawer-toggle-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--color-text-secondary);
}

[data-theme="light"] .drawer-toggle-btn:hover,
[data-theme="light"] .drawer-toggle-btn.active {
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: rgba(var(--color-accent-rgb), 0.3);
    color: var(--color-accent);
}

[data-theme="light"] .drawer-toggles {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .drawer-category-label {
    color: var(--color-text-tertiary);
}

[data-theme="light"] .drawer-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
    color: var(--color-text-secondary);
}

[data-theme="light"] .drawer-item:hover {
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: rgba(var(--color-accent-rgb), 0.3);
    color: var(--color-text-primary);
}

[data-theme="light"] .status-item {
    color: var(--color-text-secondary);
}

[data-theme="light"] .status-item .material-symbols-rounded {
    color: var(--color-accent);
}

[data-theme="light"] .status-btn {
    color: var(--color-text-secondary);
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .status-btn:hover {
    color: var(--color-text-primary);
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: rgba(var(--color-accent-rgb), 0.3);
}

[data-theme="light"] .score-value {
    color: var(--color-accent);
}

[data-theme="light"] .score-label {
    color: var(--color-text-tertiary);
}

[data-theme="light"] .context-panel {
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.06);
    background: linear-gradient(180deg,
        rgba(240, 242, 244, 0.98) 0%,
        rgba(248, 249, 250, 0.98) 100%
    );
}

[data-theme="light"] .panel-title {
    color: var(--color-accent);
}

[data-theme="light"] .panel-back {
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(var(--color-accent-rgb), 0.2);
}

[data-theme="light"] .panel-back:hover {
    color: var(--color-text-primary);
    background: rgba(var(--color-accent-rgb), 0.12);
    border-color: rgba(var(--color-accent-rgb), 0.3);
}

[data-theme="light"] .panel-close {
    color: var(--color-text-secondary);
}

[data-theme="light"] .panel-close:hover {
    color: var(--color-text-primary);
    background: rgba(var(--color-accent-rgb), 0.12);
}

[data-theme="light"] .table-felt {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 4px 16px rgba(0, 0, 0, 0.06),
        inset 0 0 30px rgba(0, 0, 0, 0.03),
        0 2px 4px rgba(0, 0, 0, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(var(--color-accent-rgb), 0.12);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .table-felt::after {
    opacity: 0.04;
    mix-blend-mode: multiply;
}

[data-theme="light"] .table-cards {
    background: radial-gradient(ellipse at 50% 50%,
        rgba(0, 0, 0, 0.02) 0%,
        rgba(0, 0, 0, 0.05) 100%);
    box-shadow:
        inset 0 1px 4px rgba(0, 0, 0, 0.06),
        inset 0 0 8px rgba(0, 0, 0, 0.03),
        0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .card.card-back {
    background:
        repeating-conic-gradient(
            rgba(0, 0, 0, 0.02) 0% 25%,
            transparent 0% 50%
        ) 0 0 / 6px 6px,
        linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

[data-theme="light"] .card.card-back::before {
    border-color: rgba(var(--color-accent-rgb), 0.15);
    background: radial-gradient(circle at 50% 50%,
        rgba(var(--color-accent-rgb), 0.08) 0%, transparent 60%);
}

[data-theme="light"] .deck-card-back {
    background:
        repeating-conic-gradient(
            rgba(0, 0, 0, 0.02) 0% 25%,
            transparent 0% 50%
        ) 0 0 / 5px 5px,
        linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .player-seat.active-turn {
    border-color: rgba(var(--color-accent-rgb), 0.5);
    box-shadow:
        0 0 16px rgba(var(--color-accent-rgb), 0.15),
        0 0 32px rgba(var(--color-accent-rgb), 0.06),
        inset 0 1px 0 rgba(var(--color-accent-rgb), 0.1);
}

[data-theme="light"] .modal-header h2 {
    color: var(--color-accent);
    text-shadow: none;
}

[data-theme="light"] .modal-close:hover {
    color: var(--color-text-primary);
}

/* ====== LIGHT THEME — Modal Comprehensive Overrides ====== */

/* Modal overlay — lighter backdrop */
[data-theme="light"] .modal-overlay {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Modal container — white/light background */
[data-theme="light"] .modal-container {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(248, 249, 250, 0.97) 50%,
        rgba(255, 255, 255, 0.98) 100%
    );
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 16px 64px rgba(0, 0, 0, 0.08);
}

/* Top glow line — accent on light */
[data-theme="light"] .modal-container::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.6) 50%,
        transparent 100%
    );
}

/* Modal header — subtle accent tint */
[data-theme="light"] .modal-header {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.06) 0%,
        rgba(var(--color-accent-rgb), 0.02) 100%
    );
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .modal-header::after {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.3) 50%,
        transparent 100%
    );
}

/* Modal icon — lighter glass */
[data-theme="light"] .modal-icon {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.1) 0%,
        rgba(var(--color-accent-rgb), 0.05) 100%
    );
    border-color: rgba(var(--color-accent-rgb), 0.2);
    box-shadow:
        0 4px 12px rgba(var(--color-accent-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Modal close button — softer red on light */
[data-theme="light"] .modal-close {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.08) 0%,
        rgba(220, 38, 38, 0.08) 100%
    );
    border-color: rgba(239, 68, 68, 0.2);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
}

[data-theme="light"] .modal-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* Modal body scrollbar */
[data-theme="light"] .modal-body {
    scrollbar-color: rgba(var(--color-accent-rgb), 0.3) rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(var(--color-accent-rgb), 0.3) 0%,
        rgba(var(--color-accent-rgb), 0.2) 100%
    );
    border: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .modal-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
        rgba(var(--color-accent-rgb), 0.5) 0%,
        rgba(var(--color-accent-rgb), 0.35) 100%
    );
}

/* Game setup — count option buttons */
[data-theme="light"] .count-option-btn {
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.02) 0%,
        rgba(0, 0, 0, 0.01) 100%
    );
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .count-option-btn:hover {
    border-color: rgba(var(--color-accent-rgb), 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .count-option-btn.active {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.12) 0%,
        rgba(var(--color-accent-rgb), 0.06) 100%
    );
    border-color: var(--color-accent);
    box-shadow: 0 0 16px rgba(var(--color-accent-rgb), 0.15);
}

/* Game setup — difficulty buttons */
[data-theme="light"] .difficulty-btn {
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.02) 0%,
        rgba(0, 0, 0, 0.01) 100%
    );
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .difficulty-btn:hover {
    border-color: rgba(var(--color-accent-rgb), 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .difficulty-btn.active {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.1) 0%,
        rgba(var(--color-accent-rgb), 0.05) 100%
    );
    border-color: var(--color-accent);
}

/* Settings — toggle switch */
[data-theme="light"] .setting-item input[type="checkbox"] {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .setting-item input[type="checkbox"]::before {
    background: linear-gradient(135deg, #aaa 0%, #999 100%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .setting-item input[type="checkbox"]:checked {
    box-shadow:
        inset 0 1px 4px rgba(var(--color-accent-rgb), 0.2),
        0 0 8px rgba(var(--color-accent-rgb), 0.2);
}

[data-theme="light"] .setting-item input[type="checkbox"]:checked::before {
    box-shadow: 0 1px 6px rgba(var(--color-accent-rgb), 0.3);
}

/* Settings — range slider */
[data-theme="light"] .setting-item input[type="range"] {
    background: linear-gradient(90deg,
        rgba(var(--color-accent-rgb), 0.15) 0%,
        rgba(0, 0, 0, 0.04) 100%
    );
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .setting-item input[type="range"]::-webkit-slider-thumb {
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 1px 6px rgba(var(--color-accent-rgb), 0.3),
        0 0 0 3px rgba(var(--color-accent-rgb), 0.08);
}

/* Settings — item border */
[data-theme="light"] .setting-item {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* Theme selector option */
[data-theme="light"] .theme-option {
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.02) 0%,
        rgba(0, 0, 0, 0.01) 100%
    );
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .theme-option:hover {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.06) 0%,
        rgba(0, 0, 0, 0.02) 100%
    );
    border-color: rgba(var(--color-accent-rgb), 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .theme-option.active {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.1) 0%,
        rgba(var(--color-accent-rgb), 0.05) 100%
    );
}

[data-theme="light"] .theme-color {
    border-color: rgba(0, 0, 0, 0.12);
}

/* Game end modal — result stats */
[data-theme="light"] .result-stat {
    background: rgba(0, 0, 0, 0.02);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .result-stat:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Rules modal — points-zero badge */
[data-theme="light"] .rules-point-badge.points-zero {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

/* Rules modal — sections */
[data-theme="light"] .rules-section {
    background: rgba(var(--color-accent-rgb), 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .rules-section:hover {
    border-color: rgba(var(--color-accent-rgb), 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .rules-section-header:hover {
    background: rgba(var(--color-accent-rgb), 0.06);
}

/* Button ripple effect */
[data-theme="light"] .settings-buttons .btn::before {
    background: rgba(0, 0, 0, 0.06);
}

/* Setup info box */
[data-theme="light"] .setup-info {
    background: rgba(var(--color-accent-rgb), 0.04);
    border-color: rgba(var(--color-accent-rgb), 0.15);
}

/* ====== END LIGHT THEME — Modal Overrides ====== */

[data-theme="light"] .settings-section {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.06) 0%,
        rgba(255, 255, 255, 0.5) 100%
    );
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .settings-section:hover {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.1) 0%,
        rgba(255, 255, 255, 0.7) 100%
    );
    border-color: rgba(var(--color-accent-rgb), 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .settings-section h3 {
    color: var(--color-accent);
}

[data-theme="light"] .setting-item label {
    color: var(--color-text-secondary);
}

[data-theme="light"] .setting-item label:hover {
    color: var(--color-text-primary);
}

/* Buttons in light theme */
[data-theme="light"] .btn-control {
    color: var(--color-text-primary);
}

[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: #1a1a1a;
    font-weight: 700;
}

[data-theme="light"] .btn-secondary {
    background: rgba(0, 0, 0, 0.04);
    border: 2px solid rgba(0, 0, 0, 0.12);
    color: var(--color-text-primary);
}

[data-theme="light"] .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
}

/* Achievement cards */
[data-theme="light"] .achievement-card {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(245, 243, 238, 0.8) 100%
    );
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .achievement-card:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(245, 243, 238, 0.9) 100%
    );
    border-color: rgba(var(--color-accent-rgb), 0.3);
}

[data-theme="light"] .achievement-title {
    color: var(--color-text-primary);
}

[data-theme="light"] .achievement-description {
    color: var(--color-text-secondary);
}

[data-theme="light"] .achievement-progress-value {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Stats cards */
[data-theme="light"] .stat-card {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(245, 243, 238, 0.8) 100%
    );
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .stat-card:hover {
    border-color: rgba(var(--color-accent-rgb), 0.3);
}

[data-theme="light"] .stat-value {
    color: var(--color-text-primary);
}

[data-theme="light"] .stat-label {
    color: var(--color-text-secondary);
}

/* Chat messages */
[data-theme="light"] .chat-message {
    color: var(--color-text-primary);
}

[data-theme="light"] .chat-message-player {
    background: rgba(var(--color-accent-rgb), 0.1);
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
}

[data-theme="light"] .chat-message-opponent {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .chat-message-system {
    background: rgba(0, 0, 0, 0.03);
    color: var(--color-text-tertiary);
}

[data-theme="light"] .chat-input-field {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.12);
    color: var(--color-text-primary);
}

[data-theme="light"] .chat-input-field:focus {
    border-color: var(--color-accent);
}

[data-theme="light"] .chat-input-field::placeholder {
    color: var(--color-text-disabled);
}

/* Chat structure - light theme */
[data-theme="light"] .chat-tab-bar {
    background: rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .chat-tab {
    color: var(--color-text-secondary);
}

[data-theme="light"] .chat-tab:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text-primary);
}

[data-theme="light"] .chat-tab-active {
    background: rgba(var(--color-accent-rgb), 0.12) !important;
    color: var(--color-accent) !important;
    border-color: rgba(var(--color-accent-rgb), 0.3);
}

[data-theme="light"] .chat-messages {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.02) 0%,
        rgba(0, 0, 0, 0.01) 100%);
}

[data-theme="light"] .chat-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .chat-messages::-webkit-scrollbar-thumb {
    background: rgba(var(--color-accent-rgb), 0.25);
}

[data-theme="light"] .chat-input-area {
    background: rgba(255, 255, 255, 0.9) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .chat-input-context {
    color: var(--color-text-tertiary);
}

[data-theme="light"] .chat-emoji-picker {
    background: linear-gradient(135deg,
        rgba(248, 249, 250, 0.98) 0%,
        rgba(240, 242, 244, 0.98) 100%);
    border-color: rgba(var(--color-accent-rgb), 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .chat-action-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--color-text-secondary);
}

[data-theme="light"] .chat-action-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .chat-message-timestamp {
    color: var(--color-text-disabled);
}

[data-theme="light"] .chat-message-name-opponent {
    color: var(--color-info);
}

/* Tabs and navigation */
[data-theme="light"] .nav-tabs .nav-link {
    color: var(--color-text-secondary);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .nav-tabs .nav-link:hover {
    color: var(--color-text-primary);
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: rgba(var(--color-accent-rgb), 0.2);
}

[data-theme="light"] .nav-tabs .nav-link.active {
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: var(--color-accent);
}

/* Table info and game elements */
[data-theme="light"] .table-info {
    color: var(--color-text-secondary);
}

[data-theme="light"] .round-display {
    color: var(--color-text-primary);
}

[data-theme="light"] .deck-count {
    color: var(--color-accent);
}

/* Player info */
[data-theme="light"] .player-name,
[data-theme="light"] .opponent-name {
    color: var(--color-text-primary);
}

[data-theme="light"] .player-info,
[data-theme="light"] .opponent-info {
    color: var(--color-text-secondary);
}

[data-theme="light"] .cards-count {
    color: var(--color-accent);
}

[data-theme="light"] .points-display {
    color: var(--color-accent);
}

/* Turn indicator */
[data-theme="light"] .turn-indicator {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    color: #1a1a1a;
}

/* Result modal */
[data-theme="light"] .result-title {
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        var(--color-accent-light) 50%,
        var(--color-accent) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .result-score {
    background: linear-gradient(180deg,
        var(--color-accent) 0%,
        var(--color-accent-dark) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .result-subtitle {
    color: var(--color-text-secondary);
}

[data-theme="light"] .ranking-table {
    color: var(--color-text-primary);
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ranking-table th {
    background: rgba(var(--color-accent-rgb), 0.08);
    border-bottom-color: rgba(0, 0, 0, 0.08);
    color: var(--color-text-secondary);
}

[data-theme="light"] .ranking-table td {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .ranking-table tbody tr:hover {
    background: rgba(var(--color-accent-rgb), 0.06);
}

[data-theme="light"] .ranking-table tr.rank-human td {
    background: rgba(var(--color-info-rgb), 0.06);
}

/* Player count selector */
[data-theme="light"] .count-btn {
    background: rgba(0, 0, 0, 0.04);
    border: 2px solid rgba(0, 0, 0, 0.1);
    color: var(--color-text-secondary);
}

[data-theme="light"] .count-btn:hover {
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: rgba(var(--color-accent-rgb), 0.3);
    color: var(--color-text-primary);
}

[data-theme="light"] .count-btn.active {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    border-color: var(--color-accent);
    color: #1a1a1a;
}

/* Theme selector */
[data-theme="light"] .theme-option {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(245, 243, 238, 0.6) 100%
    );
    border: 2px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .theme-option:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(245, 243, 238, 0.8) 100%
    );
    border-color: rgba(var(--color-accent-rgb), 0.3);
}

[data-theme="light"] .theme-option.active {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.15) 0%,
        rgba(var(--color-accent-rgb), 0.08) 100%);
    border-color: var(--color-accent);
}

[data-theme="light"] .theme-name {
    color: var(--color-text-secondary);
}

[data-theme="light"] .theme-option.active .theme-name {
    color: var(--color-accent);
    font-weight: 700;
}

[data-theme="light"] .theme-check {
    background: var(--color-accent);
    color: #1a1a1a;
}

/* Badges and labels */
[data-theme="light"] .badge {
    background: rgba(var(--color-accent-rgb), 0.2);
    color: var(--color-accent-dark);
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
}

[data-theme="light"] .label {
    color: var(--color-text-secondary);
}

/* Tooltips */
[data-theme="light"] .tooltip {
    background: rgba(26, 26, 26, 0.95);
    color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Scrollbars for light theme */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(var(--color-accent-rgb), 0.4);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-accent-rgb), 0.6);
}

/* Card hover effects in light theme */
[data-theme="light"] .card:hover {
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 0 20px rgba(var(--color-accent-rgb), 0.2);
}

/* All material icons default color */
[data-theme="light"] .material-symbols-rounded {
    color: var(--color-text-secondary);
}

/* Fix any remaining white text */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
    color: var(--color-text-primary);
}

[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] div {
    color: inherit;
}

/* Ensure all buttons have proper text color */
[data-theme="light"] button {
    color: var(--color-text-primary);
}

/* Links */
[data-theme="light"] a {
    color: var(--color-accent);
}

[data-theme="light"] a:hover {
    color: var(--color-accent-dark);
}

/* Top Bar - Light Theme */
[data-theme="light"] .top-bar {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .top-bar::before {
    background: linear-gradient(90deg, transparent, rgba(var(--color-accent-rgb), 0.08), transparent);
}

/* Action Buttons - Light Theme */
[data-theme="light"] .action-btn {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--color-text-secondary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .action-btn:hover {
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.12) 0%, rgba(var(--color-accent-rgb), 0.06) 100%);
    border-color: rgba(var(--color-accent-rgb), 0.35);
    color: var(--color-text-primary);
}

[data-theme="light"] .action-btn .material-symbols-rounded {
    color: var(--color-text-secondary);
}

[data-theme="light"] .action-btn:hover .material-symbols-rounded {
    color: var(--color-accent-dark);
}

/* Brand section - Light Theme */
[data-theme="light"] .brand-icon {
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.15) 0%, rgba(var(--color-accent-rgb), 0.08) 100%);
    border-color: rgba(var(--color-accent-rgb), 0.3);
}

[data-theme="light"] .brand-text h1 {
    color: var(--color-text-primary) !important;
}

[data-theme="light"] .brand-tagline {
    color: var(--color-accent-dark);
}

/* Stats - Light Theme */
[data-theme="light"] .stat-item {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .stat-value {
    color: var(--color-text-primary);
}

[data-theme="light"] .stat-label {
    color: var(--color-text-tertiary);
}

[data-theme="light"] .stat-change.positive {
    color: var(--color-success);
}

/* Light Theme - Profile avatar */
[data-theme="light"] .profile-avatar-img {
    border-color: rgba(0, 0, 0, 0.15);
}

/* Body background - Light Theme */
[data-theme="light"] body {
    background:
        radial-gradient(ellipse at 20% 50%, var(--bg-mesh-1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, var(--bg-mesh-3) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 80%, var(--bg-mesh-2) 0%, transparent 45%),
        linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-tertiary) 40%, var(--color-bg-primary) 100%);
}

/* Light theme — Compact Room Cards & Lobby */
[data-theme="light"] .mpc-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .mpc-card.clickable:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(var(--color-accent-rgb), 0.25);
}
[data-theme="light"] .mpc-name {
    color: var(--color-text-primary);
}
[data-theme="light"] .mp-room-search {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.10);
    color: var(--color-text-primary);
}
[data-theme="light"] .mp-room-search:focus {
    background: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .mp-search-clear {
    background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .mp-search-clear:hover {
    background: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .mpp-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .mpp-btn:hover:not(.disabled):not(.active) {
    background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .mpc-action-btn.spectate {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .mpc-action-btn.spectate:hover {
    background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .mp-empty-text {
    color: var(--color-text-secondary);
}

/* ================================================================================================
   2. RESET & BASE STYLES
================================================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* ✅ Force 100% height for mobile fullscreen */
    height: 100%;
    height: 100dvh;
}

body {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-primary);
    background:
        radial-gradient(ellipse at 20% 50%, var(--bg-mesh-1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, var(--bg-mesh-3) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 80%, var(--bg-mesh-2) 0%, transparent 45%),
        radial-gradient(ellipse at 70% 60%, rgba(var(--color-accent-rgb), 0.03) 0%, transparent 35%),
        linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-primary-dark) 40%, var(--color-bg-primary) 100%);
    overflow: hidden;
    /* ✅ Force 100dvh for mobile fullscreen (iOS Safari dynamic viewport) */
    height: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    /* ✅ Mobile optimization: disable pull-to-refresh on iOS Safari */
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    /* ✅ Mobile optimization: prevent text size adjustment on orientation change */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* ✅ Mobile optimization: prevent bounce/rubber-band scrolling */
    -webkit-overflow-scrolling: auto;
    /* ✅ Prevent scroll chaining */
    scroll-behavior: auto;
    /* ✅ Disable user selection for game UI */
    -webkit-tap-highlight-color: transparent;
}

/* Material Symbols Configuration */
.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 24px;
    user-select: none;
    /* CLS fix: reserve space before icon font loads */
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: middle;
    overflow: visible;
}

/* ================================================================================================
   3. APP CONTAINER
================================================================================================ */
.app-container {
    /* Flexbox layout → Bootstrap: .container-fluid .d-flex .flex-column */
    display: flex;
    flex-direction: column;
    height: 100vh; /* Use standard viewport height */
    height: 100dvh; /* Use dynamic viewport height on supported browsers (iOS Safari) */
    max-height: 100vh;
    max-height: 100dvh;
    width: 100%;
    max-width: 100vw;
    overflow: hidden; /* Prevent scroll on container */
    position: relative;
}

/* iOS Safari specific fix */
@supports (-webkit-touch-callout: none) {
    .app-container {
        height: -webkit-fill-available;
    }
}

/* ================================================================================================
   4. TOP BAR - PREMIUM HEADER
================================================================================================ */

/* Top Bar Container */
.top-bar {
    position: relative;
    min-height: 40px;
    height: auto;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(var(--glow-color), 0.12);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: var(--z-sticky);
    padding: 4px 10px;
    overflow-x: visible;
    overflow-y: visible;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-accent-rgb), 0.4) rgba(0, 0, 0, 0.2);
}

/* Scrollbar styling for webkit browsers */
.top-bar::-webkit-scrollbar {
    height: 6px;
}

.top-bar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.top-bar::-webkit-scrollbar-thumb {
    background: rgba(var(--color-accent-rgb), 0.4);
    border-radius: 3px;
}

.top-bar::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-accent-rgb), 0.6);
}

/* Animated background shimmer */
.top-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--color-accent-rgb), 0.08),
        transparent
    );
    background-size: 200% 100%;
    animation: shimmerGold 4s linear infinite;
    pointer-events: none;
}

.top-bar.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.top-bar:hover {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        var(--glow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-bottom-color: var(--glow-border);
}

/* Brand Section */
.brand-section {
    position: relative;
    z-index: 2;
}

.brand-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        #f59e0b 100%
    );
    border-radius: 10px;
    box-shadow: 
        0 4px 16px rgba(var(--color-accent-rgb), 0.5),
        var(--glow-md),
        inset 0 -2px 8px rgba(0, 0, 0, 0.2),
        inset 0 2px 8px rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.brand-icon:hover::before {
    transform: translateX(100%);
}

.brand-icon:hover {
    transform: translateY(-3px) rotate(-5deg) scale(1.05);
    box-shadow: 
        0 8px 24px rgba(var(--color-accent-rgb), 0.7),
        var(--glow-xl),
        inset 0 -2px 8px rgba(0, 0, 0, 0.3),
        inset 0 2px 8px rgba(255, 255, 255, 0.4);
}

.brand-icon .material-symbols-rounded {
    font-size: 20px;
    color: var(--color-primary-dark);
    font-variation-settings: 'FILL' 1, 'wght' 700;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.brand-icon:hover .material-symbols-rounded {
    transform: scale(1.1) rotate(5deg);
}

/* Brand Text */
.brand-text {
    line-height: 1.2;
    position: relative;
}

.brand-text h1 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 900;
    color: var(--color-accent);
    letter-spacing: 0.5px;
    text-shadow: 
        0 2px 12px rgba(var(--color-accent-rgb), 0.5),
        0 0 40px rgba(var(--color-accent-rgb), 0.3),
        0 4px 8px rgba(0, 0, 0, 0.3);
    line-height: 1;
    margin: 0;
    transition: all 0.3s ease;
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        #fde047 50%,
        var(--color-accent) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.brand-text:hover h1 {
    transform: scale(1.05);
    filter: drop-shadow(0 0 12px rgba(var(--glow-color), 0.6));
}

.brand-tagline {
    font-size: 9px;
    font-weight: 600;
    color: rgba(var(--color-accent-rgb), 0.7);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 2px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Brand Title (slim bar - direct h1, no wrapper) */
.brand-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--color-accent) 0%, #fde047 50%, var(--color-accent) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
    text-shadow: none;
}

/* ── Brand Logo (from admin panel) ── */
.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.brand-logo-img {
    max-height: 32px;
    width: auto;
    border-radius: 6px;
    object-fit: contain;
}

/* ── Profile Avatar ── */
.action-btn-profile {
    text-decoration: none;
}

.profile-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(var(--color-accent-rgb), 0.3);
}

/* ── Drawer Exit Button ── */
.drawer-item-exit {
    color: var(--color-error, #ef4444) !important;
}

.drawer-item-exit .material-symbols-rounded {
    color: var(--color-error, #ef4444) !important;
}

/* Stats Layer */
.stats-layer {
    position: relative;
    z-index: 2;
}

.stat-item {
    padding: 5px 7px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 100%
    );
    border-radius: 6px;
    border: 1px solid rgba(var(--glow-color), 0.1);
    backdrop-filter: blur(12px);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
    box-shadow: var(--glow-xs);
}

.stat-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        transparent,
        rgba(var(--color-accent-rgb), 0.1),
        transparent
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-item:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.08) 100%
    );
    border-color: var(--glow-border-hover);
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        var(--glow-md);
}

.stat-item:hover::before {
    opacity: 1;
}

/* Stat Icon */
.stat-icon {
    font-size: 11px;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.2) 0%,
        rgba(251, 191, 36, 0.15) 100%
    );
    border-radius: 5px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 2px 6px rgba(var(--color-accent-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.stat-item:hover .stat-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow:
        0 3px 9px rgba(var(--color-accent-rgb), 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Stat Content */
.stat-content {
    gap: 1px;
}

.stat-value {
    font-size: 9px;
    font-weight: 900;
    color: var(--color-accent);
    font-family: var(--font-display);
    white-space: nowrap;
    text-shadow: var(--glow-text);
    transition: all 0.3s ease;
}

.stat-item:hover .stat-value {
    transform: scale(1.05);
    text-shadow:
        0 1px 6px rgba(var(--glow-color), 0.7),
        0 0 16px rgba(var(--glow-color), 0.4),
        0 0 30px rgba(var(--glow-color), 0.2);
}

.stat-label {
    font-size: 5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.stat-change {
    font-size: 6px;
    font-weight: 700;
    margin-top: 1px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 1px;
}

.stat-change.positive {
    color: var(--color-success);
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.stat-change.negative {
    color: var(--color-error);
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

/* Stat Badge */
.stat-badge {
    font-size: 6px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    white-space: nowrap;
    display: inline-block;
    margin-top: 1px;
}

.stat-badge.hot {
    background: linear-gradient(135deg,
        rgba(255, 149, 0, 0.3) 0%,
        rgba(255, 94, 0, 0.25) 100%
    );
    color: #ff9500;
    border: 1px solid rgba(255, 149, 0, 0.5);
    box-shadow: 
        0 0 12px rgba(255, 149, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: hotBadgePulse 2s ease-in-out infinite;
}

@keyframes hotBadgePulse {
    0%, 100% {
        box-shadow: 
            0 0 12px rgba(255, 149, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(255, 149, 0, 0.6),
            0 0 40px rgba(255, 149, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

/* ✨ Luminous Glow Pulse — for active/focused elements */
@keyframes glowPulse {
    0%, 100% {
        box-shadow:
            var(--glow-sm),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow:
            var(--glow-lg),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
}

@keyframes glowPulseSoft {
    0%, 100% {
        box-shadow: var(--glow-xs);
        border-color: rgba(var(--glow-color), 0.2);
    }
    50% {
        box-shadow: var(--glow-sm);
        border-color: rgba(var(--glow-color), 0.4);
    }
}

@keyframes glowTextPulse {
    0%, 100% {
        text-shadow: 0 0 6px rgba(var(--glow-color), 0.4), 0 0 12px rgba(var(--glow-color), 0.2);
    }
    50% {
        text-shadow: 0 0 10px rgba(var(--glow-color), 0.7), 0 0 20px rgba(var(--glow-color), 0.35), 0 0 35px rgba(var(--glow-color), 0.15);
    }
}

/* Action Buttons */
.actions-section {
    position: relative;
    z-index: 2;
}

.action-btn {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );
    border: 1px solid rgba(var(--glow-color), 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    backdrop-filter: blur(8px);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.2),
        var(--glow-xs),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.action-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    opacity: 0;
    transform: scale(0);
    transition: all 0.4s ease;
}

.action-btn:hover::before {
    opacity: 1;
    transform: scale(1);
}

.action-btn .material-symbols-rounded {
    font-size: 18px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.action-btn:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.12) 100%
    );
    border-color: var(--glow-border-hover);
    color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.3),
        var(--glow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.action-btn:hover .material-symbols-rounded {
    transform: scale(1.15) rotate(5deg);
}

.action-btn:active {
    transform: translateY(-1px);
}

/* Action Login Button - Glow Effect for Guests */
.action-btn-login {
    background: linear-gradient(135deg,
        rgba(102, 126, 234, 0.25) 0%,
        rgba(118, 75, 162, 0.2) 100%
    ) !important;
    border-color: rgba(102, 126, 234, 0.5) !important;
    animation: loginBtnPulse 2.5s ease-in-out infinite;
}

.action-btn-login .material-symbols-rounded {
    color: #a5b4fc !important;
}

.action-btn-login:hover {
    background: linear-gradient(135deg,
        rgba(102, 126, 234, 0.4) 0%,
        rgba(118, 75, 162, 0.35) 100%
    ) !important;
    border-color: rgba(102, 126, 234, 0.7) !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4) !important;
}

@keyframes loginBtnPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(102, 126, 234, 0.2); }
    50% { box-shadow: 0 0 16px rgba(102, 126, 234, 0.5); }
}

/* Action Close Button - Special Styling */
.action-close {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.2) 0%,
        rgba(220, 38, 38, 0.15) 100%
    );
    border-color: rgba(239, 68, 68, 0.3);
}

.action-close:hover {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.3) 0%,
        rgba(220, 38, 38, 0.25) 100%
    );
    border-color: rgba(239, 68, 68, 0.5);
    color: var(--color-error);
    box-shadow: 
        0 8px 20px rgba(239, 68, 68, 0.3),
        0 0 24px rgba(239, 68, 68, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.action-close:hover .material-symbols-rounded {
    transform: scale(1.15) rotate(90deg);
}

/* Responsive Adjustments */
@media (min-width: 1366px) {
    .top-bar {
        min-height: 40px;
        padding: 4px 16px;
    }

    .brand-icon {
        width: 32px;
        height: 32px;
    }

    .brand-icon .material-symbols-rounded {
        font-size: 20px;
    }

    .brand-title {
        font-size: 17px;
    }
}

/* ================================================================================================
   5. MAIN CONTENT LAYOUT
================================================================================================ */
.main-content {
    /* Flex → Bootstrap: .row .g-0 .d-flex (removed .flex-fill to avoid conflicts) */
    /* Manual flex control for vertical fill between header and footer */
    display: flex;
    flex: 1;
    position: relative;
    overflow: hidden; /* Required for context-panel slide animation */
    min-height: 0; /* Fix flexbox overflow in nested flex containers */
    max-height: 100%; /* Prevent overflow beyond container */
    /* Layout: game-canvas [flex: 1 with bottom padding] | context-panel [280px overlay] */
    /* Note: nav-rail is now position:fixed bottom, outside document flow */
    padding-bottom: calc(80px + var(--sab, 0px)); /* Space for bottom nav (status + 5 buttons) + safe area */
}

/* ================================================================================================
   6. NAVIGATION RAIL (Bottom Navigation Bar)
================================================================================================ */
.nav-rail {
    /* Mobile First: Bottom Navigation Bar with Status Row */
    /* Override Bootstrap flexbox properties */
    flex: none !important;
    max-width: none !important;
    flex-basis: auto !important;
    
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    height: auto; /* Auto height for two rows */
    min-height: 80px; /* Status row + 5-button nav bar */
    background: linear-gradient(0deg,
        rgba(var(--color-primary-rgb), 0.98) 0%,
        rgba(var(--color-primary-rgb), 0.85) 100%
    );
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    border-right: none !important; /* Remove old sidebar border */
    /* Safe area for iOS notch/home indicator */
    padding-bottom: calc(var(--sab, 0px) + 8px);
    padding-top: 6px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transition: transform var(--transition-base), opacity var(--transition-base);
    z-index: var(--z-fixed);
    display: flex !important;
    flex-direction: column !important; /* Vertical: status-row + nav-items */
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.3), 0 -4px 30px rgba(var(--glow-color), 0.08);
}

.nav-rail.collapsed {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

/* ── Immersive Mode: Hide header & footer, table fills full viewport ── */
body.immersive-mode .top-bar {
    display: none !important;
}

body.immersive-mode .nav-rail {
    display: none !important;
}

body.immersive-mode .app-container {
    padding: 0 !important;
}

body.immersive-mode .main-content {
    padding: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
}

body.immersive-mode .game-canvas {
    padding: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
}

body.immersive-mode .game-area {
    max-height: none !important;
    height: 100% !important;
}

body.immersive-mode.game-menu .lobby-view {
    max-height: none !important;
    flex: 1 1 auto !important;
}

/* Floating Focus toggle button — arrow design matching Table */
@keyframes immersivePulse {
    0%, 100% { box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.2), 0 2px 12px rgba(0,0,0,0.25); }
    50%      { box-shadow: 0 0 22px rgba(var(--color-accent-rgb), 0.45), 0 2px 12px rgba(0,0,0,0.25); }
}
@keyframes immersiveBounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(0.85); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.immersive-toggle-float {
    position: fixed;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    z-index: var(--z-overlay);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--color-accent-rgb), 0.3);
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 0.9) 0%,
        rgba(var(--color-primary-rgb), 0.7) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--color-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.7;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    animation: immersivePulse 3s ease-in-out 2;
    transition: opacity 0.3s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                top 0.4s ease, bottom 0.4s ease, left 0.4s ease,
                width 0.3s ease, height 0.3s ease,
                border-color 0.3s ease;
}

/* 4 corner arrows — expand/collapse visual */
.immersive-arrows-box {
    position: relative;
    width: 20px;
    height: 20px;
}
.imm-arrow {
    position: absolute;
    width: 7px;
    height: 7px;
    border-color: currentColor;
    border-style: solid;
    border-width: 0;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.imm-tl { top: 0; left: 0; border-top-width: 2.5px; border-left-width: 2.5px; }
.imm-tr { top: 0; right: 0; border-top-width: 2.5px; border-right-width: 2.5px; }
.imm-bl { bottom: 0; left: 0; border-bottom-width: 2.5px; border-left-width: 2.5px; }
.imm-br { bottom: 0; right: 0; border-bottom-width: 2.5px; border-right-width: 2.5px; }

@keyframes immArrowExpand {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; transform: translate(-2px, -2px); }
}
@keyframes immArrowExpandTR {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; transform: translate(2px, -2px); }
}
@keyframes immArrowExpandBL {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; transform: translate(-2px, 2px); }
}
@keyframes immArrowExpandBR {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; transform: translate(2px, 2px); }
}
.imm-tl { animation: immArrowExpand 2s ease-in-out infinite; }
.imm-tr { animation: immArrowExpandTR 2s ease-in-out infinite 0.1s; }
.imm-bl { animation: immArrowExpandBL 2s ease-in-out infinite 0.2s; }
.imm-br { animation: immArrowExpandBR 2s ease-in-out infinite 0.3s; }

body.immersive-mode .imm-tl { top: 5px; left: 5px; animation-name: immArrowExpandBR; }
body.immersive-mode .imm-tr { top: 5px; right: 5px; animation-name: immArrowExpandBL; }
body.immersive-mode .imm-bl { bottom: 5px; left: 5px; animation-name: immArrowExpandTR; }
body.immersive-mode .imm-br { bottom: 5px; right: 5px; animation-name: immArrowExpand; }

.immersive-toggle-float:hover .imm-arrow { animation: none; opacity: 1; }

.immersive-toggle-float:hover {
    opacity: 1;
    border-color: rgba(var(--color-accent-rgb), 0.6);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 24px rgba(var(--color-accent-rgb), 0.4), 0 4px 16px rgba(0,0,0,0.3);
}

.immersive-toggle-float:active {
    transform: translateY(-50%) scale(0.9);
    opacity: 1;
}

.immersive-toggle-float.immersive-transitioning {
    animation: immersiveBounce 0.4s ease-out !important;
}

/* Glow halo */
.immersive-glow {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}
.immersive-toggle-float:hover .immersive-glow {
    background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.25) 0%, transparent 70%);
}

/* Focus ON: subtle, dark */
body.immersive-mode .immersive-toggle-float {
    opacity: 0.5;
    animation: none;
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
body.immersive-mode .immersive-arrows-box {
    width: 18px;
    height: 18px;
}
body.immersive-mode .immersive-toggle-float:hover {
    opacity: 0.95;
    transform: scale(1.1);
    box-shadow: 0 0 18px rgba(var(--color-accent-rgb), 0.35), 0 4px 14px rgba(0,0,0,0.25);
}

/* Light theme */
[data-theme="light"] .immersive-toggle-float {
    background: linear-gradient(135deg, rgba(255,255,255,0.94) 0%, rgba(240,238,232,0.88) 100%);
    border-color: rgba(0,0,0,0.12);
    color: var(--color-accent-dark);
}
[data-theme="light"] .immersive-toggle-float:hover {
    border-color: rgba(var(--color-accent-rgb), 0.4);
    box-shadow: 0 0 18px rgba(var(--color-accent-rgb), 0.2), 0 4px 16px rgba(0,0,0,0.08);
}
[data-theme="light"] .immersive-glow {
    background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.08) 0%, transparent 70%);
}

/* Hide header & footer when typing in chat (mobile keyboard) */
body.chat-typing .top-bar {
    display: none !important;
}
body.chat-typing .nav-rail {
    display: none !important;
}

/* Dead nav-items/wrapper/divider removed (old scrollable nav pattern) */

.nav-item {
    position: relative;
    flex: 0 0 auto;
    min-width: 52px;
    max-width: 72px;
    height: 48px;
    /* Flexbox layout: centered icon + label */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.02);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.nav-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    border-radius: 50%;
}

.nav-item:hover::before {
    width: 120px;
    height: 120px;
}

.nav-item:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--glow-border);
    transform: translateY(-2px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.15),
        var(--glow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-item.active {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.18) 0%,
        rgba(var(--color-accent-rgb), 0.08) 100%
    );
    color: var(--color-accent);
    border: 2px solid var(--glow-border-hover);
    box-shadow: 
        var(--glow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    animation: glowPulse 3s ease-in-out infinite;
}

.nav-item.active .material-symbols-rounded {
    text-shadow: var(--glow-text);
    animation: glowTextPulse 3s ease-in-out infinite;
}

.nav-item .material-symbols-rounded {
    /* Mobile First: compact icons */
    font-size: 24px;
    position: relative;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item:hover .material-symbols-rounded {
    transform: scale(1.1);
}

.nav-item.active .material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 600;
    /* Mobile First: compact active icon */
    font-size: 26px;
    text-shadow: 0 2px 12px rgba(var(--color-accent-rgb), 0.4);
}

.nav-item.active::before {
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, rgba(255,215,0,0.2) 0%, transparent 70%);
}

.nav-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-item.active .nav-label {
    text-shadow: 0 1px 8px rgba(var(--color-accent-rgb), 0.3);
    max-width: 100%;
    /* Mobile First: always visible in bottom nav */
    display: block;
    line-height: 1.2;
}

/* Chat nav unread badge */
.chat-nav-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #ff4444, #ff6b6b);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(255, 68, 68, 0.5);
    z-index: 5;
    pointer-events: none;
    animation: chatBadgeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-nav-badge.pulse {
    animation: chatBadgePulse 0.6s ease-out;
}
@keyframes floatChatIn {
    from { opacity: 0; transform: translate(-50%, -50%) translateY(8px); }
    to { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
@keyframes chatBadgeIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes chatBadgePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.nav-rail.collapsed .nav-label {
    display: none;
}

.nav-badge {
    position: absolute;
    top: 4px;
    right: 50%;
    transform: translateX(10px);
    /* Mobile First: compact badge */
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: linear-gradient(135deg, var(--color-error) 0%, #dc2626 100%);
    color: white;
    font-size: 9px;
    font-weight: 700;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    z-index: 2;
}

.nav-footer {
    /* Hidden in bottom nav - no collapse button needed */
    display: none;
}

/* Dead .nav-collapse removed */

/* ================================================================================================
   6b. PRIMARY NAV BAR (5-button fixed bottom bar + FAB center)
================================================================================================ */
.nav-bar-primary {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0 var(--space-xs);
    gap: 2px;
}

.nav-bar-btn {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 48px;
    background: rgba(255, 255, 255, 0.02);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Ripple effect */
.nav-bar-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    border-radius: 50%;
}

.nav-bar-btn:hover::before {
    width: 120px;
    height: 120px;
}

.nav-bar-btn:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--glow-border);
    transform: translateY(-2px);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15),
        var(--glow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-bar-btn.active {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.18) 0%,
        rgba(var(--color-accent-rgb), 0.08) 100%
    );
    color: var(--color-accent);
    border: 2px solid var(--glow-border-hover);
    transform: translateY(-1px);
    box-shadow:
        var(--glow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation: glowPulse 3s ease-in-out infinite;
}

.nav-bar-btn.active::before {
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, rgba(255,215,0,0.2) 0%, transparent 70%);
}

.nav-bar-btn .material-symbols-rounded {
    font-size: 22px;
    position: relative;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-bar-btn:hover .material-symbols-rounded {
    transform: scale(1.1);
}

.nav-bar-btn.active .material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 600;
    font-size: 24px;
    text-shadow: 0 2px 12px rgba(var(--color-accent-rgb), 0.4);
    animation: glowTextPulse 3s ease-in-out infinite;
}

.nav-bar-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

.nav-bar-btn.active .nav-bar-label {
    text-shadow: 0 1px 8px rgba(var(--color-accent-rgb), 0.3);
}

/* Nav badge on primary bar buttons */
.nav-bar-btn .nav-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 16px);
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: linear-gradient(135deg, var(--color-error) 0%, #dc2626 100%);
    color: white;
    font-size: 9px;
    font-weight: 700;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    z-index: 2;
}

/* FAB Center Button */
.nav-bar-fab {
    position: relative;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        var(--color-accent-bright, var(--color-accent)) 100%
    );
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: var(--color-primary);
    cursor: pointer;
    transform: translateY(-12px);
    box-shadow:
        0 4px 20px rgba(var(--color-accent-rgb), 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.nav-bar-fab:hover {
    transform: translateY(-14px) scale(1.05);
    box-shadow:
        0 6px 28px rgba(var(--color-accent-rgb), 0.5),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.nav-bar-fab:active {
    transform: translateY(-10px) scale(0.98);
}

.nav-bar-fab .material-symbols-rounded {
    font-size: 26px;
    font-variation-settings: 'FILL' 1;
    position: relative;
    z-index: 1;
}

.nav-bar-fab .nav-bar-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.nav-fab-profile {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.5),
        rgba(var(--color-accent-rgb), 0.3));
    border: 2px solid rgba(var(--color-accent-rgb), 0.6);
    box-shadow:
        0 4px 20px rgba(var(--color-accent-rgb), 0.35),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.nav-fab-profile:hover {
    box-shadow:
        0 6px 28px rgba(var(--color-accent-rgb), 0.5),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.nav-fab-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.nav-fab-initials {
    font-size: 15px;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
}

/* Menu dot indicator (notifications in drawer) */
.nav-bar-dot {
    position: absolute;
    top: 6px;
    right: calc(50% - 14px);
    width: 8px;
    height: 8px;
    background: var(--color-error);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
    z-index: 3;
}

/* ================================================================================================
   6c. MENU DRAWER (slide-up panel)
================================================================================================ */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999; /* above all game elements incl. perspective/3D stacking contexts */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.drawer-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    background: linear-gradient(180deg,
        rgba(var(--color-primary-rgb), 0.98) 0%,
        rgba(var(--color-primary-rgb), 0.95) 100%
    );
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 0 var(--space-md) calc(var(--sab, 0px) + var(--space-md));
    z-index: 2000; /* above all game elements incl. perspective/3D stacking contexts */
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
}

.drawer-panel.open {
    transform: translateY(0);
}

.drawer-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 8px;
    cursor: grab;
}

.drawer-handle-bar {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.drawer-toggles {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: var(--space-sm);
}

.drawer-toggle-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
    font-weight: 600;
}

.drawer-toggle-btn:hover,
.drawer-toggle-btn.active {
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: rgba(var(--color-accent-rgb), 0.3);
    color: var(--color-accent);
}

.drawer-toggle-btn .material-symbols-rounded {
    font-size: 20px;
}

.drawer-category {
    margin-bottom: var(--space-sm);
}

.drawer-category-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-tertiary);
    padding: var(--space-xs) 0;
}

.drawer-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xs);
}

.drawer-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 4px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 11px;
    font-weight: 500;
}

.drawer-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--glow-border);
    color: var(--color-text-primary);
}

.drawer-item:active {
    transform: scale(0.96);
}

.drawer-item .material-symbols-rounded {
    font-size: 22px;
    transition: all 0.3s ease;
}

.drawer-item:hover .material-symbols-rounded {
    color: var(--color-accent);
    transform: scale(1.1);
}

.drawer-item .nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: linear-gradient(135deg, var(--color-error) 0%, #dc2626 100%);
    color: white;
    font-size: 9px;
    font-weight: 700;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    z-index: 2;
}

/* Hide drawer on chat typing */
body.chat-typing .drawer-panel,
body.chat-typing .drawer-backdrop {
    display: none !important;
}

/* ================================================================================================
   7. GAME CANVAS - 3D CARD TABLE
================================================================================================ */
.game-canvas {
    /* Override Bootstrap col properties */
    flex: 1 !important;
    max-width: none !important;

    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%; /* Full width since nav-rail no longer takes left space */
    /* Mobile First: compact padding for small screens */
    padding: 0 var(--space-sm) var(--space-sm) var(--space-sm);
    perspective: 1000px; /* Required for 3D card transforms */
    overflow-y: auto; /* Allow vertical scroll if content exceeds */
    overflow-x: hidden; /* Prevent horizontal scroll */
    background:
        radial-gradient(ellipse at 30% 40%, rgba(var(--color-primary-rgb, 26, 77, 46), 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(var(--color-accent-rgb), 0.03) 0%, transparent 40%);
}

.game-area {
    display: flex;
    flex-direction: column;
    flex: 1; /* Required to fill game-canvas height */
    /* Layout handled by Bootstrap: .d-flex .flex-column */
    transform-style: preserve-3d; /* Preserve 3D transforms for cards */
    min-height: 0; /* Fix flexbox overflow issue */
    max-height: 100%; /* Prevent overflow */
    width: 100%; /* Prevent flex cross-axis overflow on narrow viewports (Fold 5) */
}

body.game-menu .game-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Game Play Container: 4-Player Grid Layout */
.game-play-container.game-4p {
    display: grid;
    grid-template-areas:
        ".      north   ."
        "west   table   east"
        ".      south   .";
    grid-template-columns: minmax(100px, 180px) 1fr minmax(100px, 180px);
    grid-template-rows: auto 1fr auto;
    flex: 1;
    min-height: 0;
    gap: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* Grid area assignments */
.seat-west  { grid-area: west; }
.seat-east  { grid-area: east; }

/* ═══════════════════════════════════════════════════════════════
   DESKTOP: Side Players (Vest/Est) - Clean Layout
   ═══════════════════════════════════════════════════════════════ */

/* Hide ALL native scrollbars on side seat containers + hands */
.seat-west,
.seat-east {
    overflow: hidden !important;
    scrollbar-width: none !important;
    gap: 6px !important;
}
.seat-west::-webkit-scrollbar,
.seat-east::-webkit-scrollbar {
    display: none !important;
}
.seat-west .seat-hand,
.seat-east .seat-hand {
    overflow: hidden !important;
    scrollbar-width: none !important;
}
.seat-west .seat-hand::-webkit-scrollbar,
.seat-east .seat-hand::-webkit-scrollbar {
    display: none !important;
}

/* Larger cards for side players on desktop */
.game-4p .seat-west .card,
.game-4p .seat-east .card,
.game-3p .seat-east .card {
    width: 34px !important;
    height: 46px !important;
    font-size: 11px !important;
}

/* Side player hand - more room */
.game-4p .seat-west .seat-hand,
.game-4p .seat-east .seat-hand,
.game-3p .seat-east .seat-hand {
    min-height: 50px !important;
    max-height: 54px !important;
    gap: 3px !important;
    padding: 3px !important;
}

/* Fix balance truncation on side players */
.seat-west .player-meta,
.seat-east .player-meta {
    flex-wrap: nowrap !important;
    min-width: max-content !important;
}
.seat-west .meta-item,
.seat-east .meta-item {
    white-space: nowrap !important;
}

/* Player name - wider for desktop */
.seat-west .player-name,
.seat-east .player-name {
    max-width: 90px !important;
}

/* Bigger avatar for side players on desktop */
.game-4p .seat-west .player-avatar,
.game-4p .seat-east .player-avatar,
.game-3p .seat-east .player-avatar {
    width: 24px !important;
    height: 24px !important;
}

/* South player info - keep visible, no changes */

/* ═══════════════════════════════════════════════════════════════
   STATE MANAGEMENT - Menu vs Active Game
   ═══════════════════════════════════════════════════════════════ */

/* MENU STATE: Hide players, show only start button */
body.game-menu .seat-north,
body.game-menu .seat-south,
body.game-menu .seat-east,
body.game-menu .seat-west {
    display: none !important;
}

body.game-menu .table-deck,
body.game-menu .table-cards,
body.game-menu .table-info,
body.game-menu .player-count-selector {
    display: none !important;
}

/* MENU STATE: Style table-area and table-felt for welcome screen */
body.game-menu .table-area {
    padding: var(--space-lg) !important;
}

body.game-menu .table-felt {
    width: 100% !important;
    max-width: 900px !important;
    min-height: 400px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--space-xl) !important;
}

/* MENU STATE: Style table-message for centered button */
body.game-menu .table-message {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
}

/* Welcome Branding */
body.game-menu .table-message::before {
    content: '🎴';
    font-size: 80px;
    line-height: 1;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(255, 215, 0, 0.3));
}

body.game-menu .table-message::after {
    content: 'Septica Pro';
    font-size: 42px;
    font-weight: 900;
    font-family: var(--font-display);
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        #f4d03f 50%,
        var(--color-accent) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: textShine 3s linear infinite;
    margin-top: -24px;
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.5));
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Panel Content Animations - Page Flip Effect (Carte) */
@keyframes pageFlip {
    0% {
        opacity: 0;
        transform: perspective(1200px) rotateY(-90deg);
        transform-origin: left center;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        transform: perspective(1200px) rotateY(0deg);
        transform-origin: left center;
    }
}

/* Page Flip pentru MOBIL - cu translateX(0) la final pentru a preveni conflicte */
@keyframes pageFlipMobile {
    0% {
        opacity: 0;
        transform: perspective(1200px) rotateY(-90deg) translateX(0);
        transform-origin: left center;
    }
    50% {
        opacity: 0.5;
        transform: perspective(1200px) rotateY(-45deg) translateX(0);
    }
    100% {
        opacity: 1;
        transform: perspective(1200px) rotateY(0deg) translateX(0);
        transform-origin: left center;
    }
}

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

body.game-menu .table-message button {
    margin: 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Card animations removed - clean minimal design */

/* GAME ACTIVE STATE: Show seats based on player count */
body.game-active .seat-north,
body.game-active .seat-south {
    display: flex !important;
}

body.game-active .game-4p .seat-east,
body.game-active .game-4p .seat-west,
body.game-active .game-3p .seat-east {
    display: flex !important;
}

body.game-active .game-2p .seat-east,
body.game-active .game-2p .seat-west {
    display: none !important;
}

body.game-active .game-3p .seat-west {
    display: none !important;
}

body.game-active .table-message {
    display: none; /* JS va seta display: block când e necesar */
    position: absolute !important;
    bottom: clamp(8px, 2vw, 16px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    max-width: 85% !important;
    white-space: nowrap !important;
    font-size: clamp(9px, 1.8vw, 11px) !important;
    padding: clamp(3px, 0.8vh, 5px) clamp(7px, 1.5vw, 12px) !important;
    border-radius: clamp(5px, 1.2vw, 8px) !important;
}

/* Continuation buttons (Taie/Pas) inside table-message — compact always */
body.game-active .table-message .btn-control {
    min-height: 26px;
    max-height: 30px;
    padding: 3px 10px;
    font-size: 11px;
    line-height: 1.2;
}

body.game-active .table-message .btn-control .material-symbols-rounded {
    font-size: 13px;
}

/* table-message: și mai compact când chat panel activ */
body.game-active:has(.context-panel.active) .table-message {
    font-size: clamp(8px, 1.4vw, 10px) !important;
    padding: clamp(2px, 0.5vh, 3px) clamp(5px, 1vw, 8px) !important;
    border-radius: 5px !important;
    bottom: 2px !important;
}

/* ================================================================================================
   10.0.0 MULTIPLAYER CREATE ROOM MODAL
================================================================================================ */

.mp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    animation: mp-modal-fadein 0.2s ease-out;
}

@keyframes mp-modal-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mp-modal-card {
    background: var(--table-bg, #1a2332);
    border: 1px solid var(--gold-primary, #d4a843);
    border-radius: 16px;
    padding: 24px;
    width: 90%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 168, 67, 0.15);
    animation: mp-modal-slidein 0.25s ease-out;
}

@keyframes mp-modal-slidein {
    from { transform: translateY(20px) scale(0.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.mp-modal-header {
    text-align: center;
    margin-bottom: 20px;
}

.mp-modal-header h3 {
    color: var(--gold-primary, #d4a843);
    font-size: 1.3rem;
    margin: 0 0 4px;
    font-weight: 700;
}

.mp-modal-header small {
    color: var(--text-secondary, #8899aa);
    font-size: 0.8rem;
}

.mp-modal-field {
    margin-bottom: 16px;
}

.mp-modal-label {
    display: block;
    color: var(--text-secondary, #8899aa);
    font-size: 0.8rem;
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mp-modal-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text-primary, #e2e8f0);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.mp-modal-input:focus {
    border-color: var(--gold-primary, #d4a843);
}

.mp-modal-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.mp-opt-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mp-opt-btn {
    flex: 1;
    min-width: 60px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text-secondary, #8899aa);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    white-space: nowrap;
}

.mp-opt-btn:hover {
    background: rgba(212, 168, 67, 0.1);
    border-color: rgba(212, 168, 67, 0.3);
    color: var(--text-primary, #e2e8f0);
}

.mp-opt-btn.selected {
    background: rgba(212, 168, 67, 0.2);
    border-color: var(--gold-primary, #d4a843);
    color: var(--gold-primary, #d4a843);
    box-shadow: 0 0 8px rgba(212, 168, 67, 0.15);
}

.mp-modal-hint {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary, #8899aa);
    font-style: italic;
    min-height: 1.2em;
}

.mp-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.mp-modal-btn-create,
.mp-modal-btn-cancel {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.mp-modal-btn-create {
    background: linear-gradient(135deg, var(--gold-primary, #d4a843), #b8922e);
    color: #1a1a2e;
    box-shadow: 0 4px 12px rgba(212, 168, 67, 0.3);
}

.mp-modal-btn-create:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(212, 168, 67, 0.4);
}

.mp-modal-btn-cancel {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, #8899aa);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mp-modal-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #e2e8f0);
}

/* Private room badge in lobby */
.mp-room-badge-private {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(212, 168, 67, 0.15);
    color: var(--gold-primary, #d4a843);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Join request notification for host */
.mp-join-request {
    background: rgba(212, 168, 67, 0.1);
    border: 1px solid rgba(212, 168, 67, 0.3);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    animation: mp-modal-slidein 0.3s ease-out;
}

.mp-join-request-name {
    color: var(--text-primary, #e2e8f0);
    font-weight: 600;
    font-size: 0.9rem;
}

.mp-join-request-actions {
    display: flex;
    gap: 6px;
}

.mp-join-request-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.mp-join-request-btn.approve {
    background: rgba(76, 175, 80, 0.2);
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.mp-join-request-btn.approve:hover {
    background: rgba(76, 175, 80, 0.3);
}

.mp-join-request-btn.deny {
    background: rgba(244, 67, 54, 0.2);
    color: #ef5350;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.mp-join-request-btn.deny:hover {
    background: rgba(244, 67, 54, 0.3);
}

/* Host action buttons (kick/ban) in room view */
.mp-host-actions {
    display: flex;
    gap: 4px;
    margin-left: 6px;
}

.mp-host-btn {
    padding: 3px 8px;
    border: none;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}

.mp-host-btn.kick {
    background: rgba(255, 152, 0, 0.2);
    color: #ffa726;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.mp-host-btn.kick:hover {
    background: rgba(255, 152, 0, 0.35);
}

.mp-host-btn.ban {
    background: rgba(244, 67, 54, 0.2);
    color: #ef5350;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.mp-host-btn.ban:hover {
    background: rgba(244, 67, 54, 0.35);
}

/* Pending approval overlay */
.mp-pending-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.mp-pending-card {
    background: var(--table-bg, #1a2332);
    border: 1px solid var(--gold-primary, #d4a843);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    max-width: 340px;
}

.mp-pending-card h3 {
    color: var(--gold-primary, #d4a843);
    margin: 0 0 8px;
}

.mp-pending-card p {
    color: var(--text-secondary, #8899aa);
    margin: 0 0 16px;
    font-size: 0.9rem;
}

.mp-pending-card .mp-modal-btn-cancel {
    width: 100%;
}

/* ================================================================================================
   SPECTATOR STYLES
================================================================================================ */

/* Spectator section in room view */
.mp-spectator-section {
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.mp-spectator-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary, #8899aa);
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.mp-spectator-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mp-spectator-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary, #8899aa);
}

.mp-spectator-item.me {
    border-color: rgba(var(--color-accent-rgb, 212, 168, 67), 0.3);
    background: rgba(var(--color-accent-rgb, 212, 168, 67), 0.08);
    color: var(--color-accent, #d4a843);
}

.mp-spectator-item .mp-host-actions {
    margin-left: 4px;
}

.mp-spectator-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

/* Spectator notice in room view */
.mp-spectator-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    margin-top: 10px;
    background: rgba(100, 181, 246, 0.08);
    border: 1px solid rgba(100, 181, 246, 0.2);
    border-radius: 12px;
    color: #64b5f6;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

/* Spectate button in lobby */
.mp-spectate-btn {
    background: rgba(100, 181, 246, 0.12) !important;
    border-color: rgba(100, 181, 246, 0.3) !important;
    color: #64b5f6 !important;
}

.mp-spectate-btn:hover {
    background: rgba(100, 181, 246, 0.2) !important;
}

/* Spectator count in lobby room card */
.mp-spectator-count {
    color: var(--text-secondary, #8899aa);
    font-size: 0.75rem;
}

/* ================================================================================================
   ROOM MANAGEMENT PANEL (shared between lobby panel and table overlay)
================================================================================================ */
.mp-room-mgmt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.mp-room-mgmt.compact {
    max-width: 400px;
    margin: 0 auto;
}

.mp-room-mgmt-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-room-mgmt-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.78rem;
    color: var(--text-secondary, #8899aa);
}

/* Room management inside table overlay */
.mp-table-room-panel {
    max-width: 460px;
    width: 92%;
    max-height: 80vh;
    overflow-y: auto;
}

.mp-table-room-panel .mp-player-list {
    margin: 0;
}

.mp-table-room-panel .mp-player-slot {
    padding: 6px 8px;
    gap: 6px;
}

.mp-table-room-panel .mp-player-avatar {
    width: 28px;
    height: 28px;
    font-size: 16px;
}

.mp-table-room-panel .mp-player-name {
    font-size: 0.82rem;
}

.mp-table-room-panel .mp-player-rating {
    font-size: 0.7rem;
}

.mp-table-room-panel .mp-player-ready-status {
    font-size: 0.72rem;
    padding: 2px 6px;
}

.mp-table-room-panel .mp-ready-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
}

.mp-table-room-panel .mp-spectator-section {
    margin-top: 4px;
}

/* Leave table button inside management panel */
.mp-btn-leave-table {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    margin-top: 4px;
    background: transparent;
    border: 1px solid rgba(244, 67, 54, 0.25);
    border-radius: 10px;
    color: #ef9a9a;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mp-btn-leave-table:hover {
    background: rgba(244, 67, 54, 0.12);
    border-color: rgba(244, 67, 54, 0.4);
    color: #ef5350;
}

/* ================================================================================================
   10.0.0.1 ROOM WAITING — FULL TABLE TAKEOVER (mw-* prefix)
   A premium, tab-based room waiting screen that fills the entire table area.
================================================================================================ */

/* ── Table-felt full takeover mode ── */
.table-felt.mw-waiting-mode {
    position: relative;
    padding: 0 !important;
    justify-content: stretch;
    align-items: stretch;
    height: 100%;
}

.table-felt.mw-waiting-mode .table-message {
    position: relative !important;
    inset: auto !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    display: flex !important;
    flex: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: inherit !important;
    z-index: 10;
}

/* Hide game-info overlay when in waiting mode */
.table-felt.mw-waiting-mode .table-info,
.table-felt.mw-waiting-mode .table-deck,
.table-felt.mw-waiting-mode .table-cards {
    display: none !important;
}

/* ── Root container — fills entire table-felt ── */
.mw-room-takeover {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg,
        rgba(var(--color-primary-rgb, 15, 23, 42), 0.92) 0%,
        rgba(var(--color-primary-rgb, 15, 23, 42), 0.97) 50%,
        rgba(var(--color-primary-rgb, 15, 23, 42), 0.94) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-xl, 16px);
    border: 1px solid rgba(var(--color-accent-rgb, 255, 215, 0), 0.15);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: mwFadeIn 0.3s ease-out;
}

@keyframes mwFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* ── Title bar ── */
.mw-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(90deg,
        rgba(var(--color-accent-rgb, 255, 215, 0), 0.08) 0%,
        transparent 100%
    );
    border-bottom: 1px solid rgba(var(--color-accent-rgb, 255, 215, 0), 0.1);
    flex-shrink: 0;
}

.mw-title-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mw-title-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.mw-title-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
}

/* ── Title bar actions (timer, invite, leave) ── */
.mw-title-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mw-title-timer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-secondary, #94a3b8);
    background: rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.06);
    border: 1px solid rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.08);
    white-space: nowrap;
    transition: all 0.3s ease;
}

.mw-title-timer .material-symbols-rounded {
    font-size: 14px;
}

.mw-title-timer.warning {
    color: #ffb347;
    background: rgba(255, 165, 0, 0.12);
    border-color: rgba(255, 165, 0, 0.25);
}

.mw-title-timer.danger {
    color: #ff6b6b;
    background: rgba(255, 80, 80, 0.15);
    border-color: rgba(255, 80, 80, 0.3);
    animation: mwTimerFlash 1s ease infinite;
}

@keyframes mwTimerFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.mw-title-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.06);
    color: var(--color-text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.mw-title-action-btn .material-symbols-rounded {
    font-size: 16px;
}

.mw-title-action-btn:hover {
    background: rgba(var(--color-accent-rgb, 255, 215, 0), 0.15);
    color: var(--color-accent, #ffd700);
}

.mw-title-action-btn:active {
    transform: scale(0.9);
}

.mw-title-action-btn.mw-title-leave:hover {
    background: rgba(255, 80, 80, 0.15);
    color: #ff6b6b;
}

.mw-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.mw-badge.ranked {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.15));
    color: var(--gold-primary, #ffd700);
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.mw-badge.casual {
    background: rgba(100, 180, 255, 0.12);
    color: #8ab4f8;
    border: 1px solid rgba(100, 180, 255, 0.2);
}

.mw-badge.players {
    background: rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.06);
    color: var(--color-text-secondary, #94a3b8);
    border: 1px solid rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.08);
}

.mw-badge.waiting {
    background: rgba(255, 165, 0, 0.12);
    color: #ffb347;
    border: 1px solid rgba(255, 165, 0, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mw-badge.full {
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.mw-waiting-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffb347;
    animation: mwPulse 1.4s ease-in-out infinite;
}

@keyframes mwPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ── Tab bar ── */
.mw-tab-bar {
    display: flex;
    gap: 2px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(var(--color-accent-rgb, 255, 215, 0), 0.06);
    flex-shrink: 0;
}

.mw-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 6px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-secondary, #94a3b8);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    min-height: 40px;
}

.mw-tab .material-symbols-rounded {
    font-size: 18px;
    transition: color 0.2s ease;
}

.mw-tab:hover {
    background: rgba(var(--color-accent-rgb, 255, 215, 0), 0.06);
    color: var(--color-text-primary, #fff);
}

.mw-tab.active {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb, 255, 215, 0), 0.12) 0%,
        rgba(var(--color-accent-rgb, 255, 215, 0), 0.06) 100%
    );
    color: var(--color-accent, #ffd700);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.mw-tab.active .material-symbols-rounded {
    color: var(--color-accent, #ffd700);
}

.mw-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--color-accent, #ffd700);
    border-radius: 2px 2px 0 0;
}

.mw-tab-label {
    white-space: nowrap;
}

.mw-tab-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    animation: mwBadgePop 0.3s ease-out;
}

@keyframes mwBadgePop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* ── Tab content ── */
.mw-tab-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.mw-tab-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-accent-rgb, 255, 215, 0), 0.2) transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.mw-tab-panel.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mw-tab-panel::-webkit-scrollbar {
    width: 4px;
}
.mw-tab-panel::-webkit-scrollbar-track {
    background: transparent;
}
.mw-tab-panel::-webkit-scrollbar-thumb {
    background: rgba(var(--color-accent-rgb, 255, 215, 0), 0.2);
    border-radius: 4px;
}

/* ── TAB 1: Masă — Player cards ── */
.mw-player-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.mw-player-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    background: linear-gradient(135deg,
        rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.04) 0%,
        rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.02) 100%
    );
    border: 1px solid rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.06);
    border-radius: 12px;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.mw-player-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgba(var(--color-accent-rgb, 255, 215, 0), 0.3);
    border-radius: 0 3px 3px 0;
    transition: background 0.25s ease;
}

.mw-player-card.mw-card-me {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb, 255, 215, 0), 0.08) 0%,
        rgba(var(--color-accent-rgb, 255, 215, 0), 0.03) 100%
    );
    border-color: rgba(var(--color-accent-rgb, 255, 215, 0), 0.15);
}

.mw-player-card.mw-card-me::before {
    background: var(--color-accent, #ffd700);
}

.mw-player-card.mw-card-ready {
    border-color: rgba(76, 175, 80, 0.25);
}

.mw-player-card.mw-card-ready::before {
    background: #4caf50;
}

.mw-player-card.mw-card-empty {
    border-style: dashed;
    border-color: rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.08);
    opacity: 0.6;
}

.mw-player-card.mw-card-empty::before {
    display: none;
}

/* Player avatar */
.mw-card-avatar {
    position: relative;
    width: 49px;
    height: 49px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.06);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.mw-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mw-card-avatar.empty {
    border: 2px dashed rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.15);
    background: transparent;
}

.mw-card-avatar.empty .material-symbols-rounded {
    font-size: 20px;
    color: var(--color-text-secondary, #94a3b8);
}

.mw-card-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(var(--color-primary-rgb, 15, 23, 42), 0.9);
}

.mw-card-status-dot.ready {
    background: #4caf50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
}

.mw-card-status-dot.waiting {
    background: #ff9800;
    animation: mwPulse 1.4s ease-in-out infinite;
}

/* Player info */
.mw-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mw-card-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-card-name.empty {
    color: var(--color-text-secondary, #94a3b8);
    font-style: italic;
    font-weight: 400;
}

.mw-card-rating {
    font-size: 0.68rem;
    font-weight: 700;
}

.mw-rating-good { color: #4caf50; }
.mw-rating-warn { color: #ff9800; }
.mw-rating-bad { color: #ef4444; }

/* Ready badge */
.mw-card-ready-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mw-card-ready-badge .material-symbols-rounded {
    font-size: 18px;
}

.mw-card-ready-badge.ready {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}

.mw-card-ready-badge.waiting {
    background: rgba(255, 152, 0, 0.1);
    color: #ff9800;
}

/* Host actions on player cards */
.mw-card-host-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.mw-host-btn {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.mw-host-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    transform: scale(1.1);
}

.mw-host-btn.ban {
    background: rgba(156, 39, 176, 0.1);
    color: #ba68c8;
}

.mw-host-btn.ban:hover {
    background: rgba(156, 39, 176, 0.25);
}

/* Spectators inline */
.mw-spectators {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
    margin-top: 4px;
}

.mw-spec-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-secondary, #94a3b8);
}

.mw-spec-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.68rem;
    background: rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.04);
    color: var(--color-text-secondary, #94a3b8);
    border: 1px solid rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.06);
}

.mw-spec-tag.me {
    background: rgba(var(--color-accent-rgb, 255, 215, 0), 0.08);
    color: var(--color-accent, #ffd700);
    border-color: rgba(var(--color-accent-rgb, 255, 215, 0), 0.15);
}

.mw-spec-kick {
    border: none;
    background: none;
    color: #ef4444;
    font-size: 0.65rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.7;
}

.mw-spec-kick:hover { opacity: 1; }

/* Spectator notice */
.mw-spectator-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    margin-top: 6px;
    border-radius: 10px;
    background: rgba(100, 180, 255, 0.08);
    color: #8ab4f8;
    font-size: 0.78rem;
    font-weight: 500;
}

/* Ready button */
.mw-ready-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
}

.mw-ready-btn .material-symbols-rounded {
    font-size: 22px;
}

.mw-ready-btn.not-ready {
    background: linear-gradient(135deg, #4caf50, #66bb6a);
    color: #fff;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3);
}

.mw-ready-btn.not-ready:hover {
    background: linear-gradient(135deg, #66bb6a, #81c784);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.mw-ready-btn.not-ready:active {
    transform: translateY(0);
}

.mw-ready-btn.is-ready {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.1));
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    box-shadow: none;
}

.mw-ready-btn.is-ready:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.15));
}

/* Starting pulse */
.mw-starting-pulse {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    margin-top: 8px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.08));
    color: #81c784;
    font-size: 0.9rem;
    font-weight: 700;
    animation: mwStartingBreathe 1.5s ease-in-out infinite;
}

.mw-starting-pulse .material-symbols-rounded {
    font-size: 22px;
    animation: mwStartingSpin 2s linear infinite;
}

@keyframes mwStartingBreathe {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

@keyframes mwStartingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Starting fullscreen (all ready) */
.mw-starting-fullscreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    color: #81c784;
    font-size: 1.2rem;
    font-weight: 700;
    animation: mwStartingBreathe 1.5s ease-in-out infinite;
}

.mw-starting-fullscreen .material-symbols-rounded {
    font-size: 48px;
    animation: mwStartingSpin 2s linear infinite;
}

/* ── TAB 2: Info ── */
.mw-info-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.mw-info-card {
    background: rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.03);
    border: 1px solid rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.06);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mw-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.03);
}

.mw-info-row:last-child {
    border-bottom: none;
}

.mw-info-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-secondary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mw-info-value {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-primary, #fff);
}

.mw-countdown-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 152, 0, 0.08);
    border: 1px solid rgba(255, 152, 0, 0.15);
    color: #ffb347;
    font-size: 0.78rem;
    font-weight: 500;
}

.mw-countdown-card .material-symbols-rounded {
    font-size: 18px;
    color: #ff9800;
}

.mw-alert-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
}

.mw-alert-card.warn {
    background: rgba(255, 152, 0, 0.08);
    border: 1px solid rgba(255, 152, 0, 0.12);
    color: #ffb347;
}

.mw-alert-card.success {
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.12);
    color: #81c784;
}

.mw-leave-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding: 10px 16px;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.mw-leave-btn .material-symbols-rounded {
    font-size: 16px;
}

.mw-leave-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

/* ── Mobile portrait responsive overrides ── */
@media (max-width: 480px) and (orientation: portrait) {
    .mw-title-bar {
        padding: 8px 10px;
    }
    .mw-title-text {
        font-size: 0.78rem;
    }
    .mw-badge {
        font-size: 0.6rem;
        padding: 2px 6px;
    }
    .mw-tab {
        padding: 7px 4px;
        min-height: 38px;
    }
    .mw-tab .material-symbols-rounded {
        font-size: 16px;
    }
    .mw-tab-label {
        font-size: 0.7rem;
    }
    .mw-tab-panel {
        padding: 8px;
    }
    .mw-player-card {
        padding: 10px 13px;
        gap: 10px;
    }
    .mw-card-avatar {
        width: 44px;
        height: 44px;
    }
    .mw-card-name {
        font-size: 0.78rem;
    }
}

@media (max-width: 375px) and (orientation: portrait) {
    .mw-title-bar {
        padding: 6px 8px;
        flex-wrap: wrap;
    }
    .mw-title-badges {
        gap: 4px;
    }
    .mw-badge {
        font-size: 0.55rem;
        padding: 1px 5px;
    }
    .mw-tab-bar {
        padding: 3px 4px;
    }
    .mw-tab {
        padding: 6px 3px;
        min-height: 36px;
        gap: 3px;
    }
    .mw-tab-label {
        font-size: 0.65rem;
    }
    .mw-player-card {
        padding: 9px 10px;
        gap: 9px;
    }
    .mw-card-avatar {
        width: 39px;
        height: 39px;
    }
    .mw-card-name {
        font-size: 0.73rem;
    }
    .mw-ready-btn {
        padding: 10px 16px;
        font-size: 0.82rem;
        min-height: 44px;
    }
}

/* ── Landscape overrides ── */
@media (max-height: 500px) and (orientation: landscape) {
    .mw-title-bar {
        padding: 4px 10px;
    }
    .mw-tab-bar {
        padding: 2px 4px;
    }
    .mw-tab {
        padding: 5px 4px;
        min-height: 32px;
    }
    .mw-tab-panel {
        padding: 6px;
    }
    .mw-player-card {
        padding: 8px 10px;
    }
    .mw-card-avatar {
        width: 36px;
        height: 36px;
    }
    .mw-ready-btn {
        padding: 8px 16px;
        font-size: 0.8rem;
        min-height: 38px;
    }
}

/* ── Tablet portrait ── */
@media (min-width: 481px) and (max-width: 768px) and (orientation: portrait) {
    .mw-player-card {
        padding: 16px 18px;
    }
    .mw-card-avatar {
        width: 55px;
        height: 55px;
    }
    .mw-card-name {
        font-size: 0.88rem;
    }
    .mw-ready-btn {
        padding: 14px 24px;
        font-size: 0.95rem;
    }
}

/* ── Desktop / large screens ── */
@media (min-width: 1024px) {
    .mw-room-takeover {
        max-width: 100%;
    }
    .mw-player-cards {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .mw-player-card {
        flex: 1 1 calc(50% - 4px);
        min-width: 200px;
    }
}

/* ── Touch device improvements ── */
@media (hover: none) and (pointer: coarse) {
    .mw-tab {
        min-height: 44px;
    }
    .mw-host-btn {
        width: 32px;
        height: 32px;
    }
    .mw-ready-btn {
        min-height: 48px;
    }
    .mw-leave-btn {
        min-height: 44px;
    }
}

/* ── Tab slide transitions ── */
.mw-tab-panel {
    will-change: transform, opacity;
}

.mw-tab-panel.mw-slide-out-left {
    animation: mwSlideOutLeft 0.25s ease forwards;
}
.mw-tab-panel.mw-slide-out-right {
    animation: mwSlideOutRight 0.25s ease forwards;
}
.mw-tab-panel.mw-slide-in-left {
    animation: mwSlideInLeft 0.25s ease forwards;
}
.mw-tab-panel.mw-slide-in-right {
    animation: mwSlideInRight 0.25s ease forwards;
}

@keyframes mwSlideOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-30px); }
}
@keyframes mwSlideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(30px); }
}
@keyframes mwSlideInLeft {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes mwSlideInRight {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ── Player card entrance animation ── */
.mw-player-card {
    animation: mwCardSlideIn 0.3s ease-out both;
}
.mw-player-card:nth-child(1) { animation-delay: 0ms; }
.mw-player-card:nth-child(2) { animation-delay: 60ms; }
.mw-player-card:nth-child(3) { animation-delay: 120ms; }
.mw-player-card:nth-child(4) { animation-delay: 180ms; }

@keyframes mwCardSlideIn {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Ready button pulse animation ── */
.mw-ready-btn.mw-btn-pulse {
    animation: mwBtnPulse 0.4s ease;
}
@keyframes mwBtnPulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* ── Countdown urgency states ── */
.mw-countdown-card.warning {
    background: rgba(255, 152, 0, 0.15);
    border-color: rgba(255, 152, 0, 0.35);
    color: #ff9800;
}
.mw-countdown-card.warning .material-symbols-rounded {
    color: #ff9800;
    animation: mwPulse 1.2s ease-in-out infinite;
}
.mw-countdown-card.danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
    animation: mwDangerFlash 1s ease-in-out infinite;
}
.mw-countdown-card.danger .material-symbols-rounded {
    color: #ef4444;
    animation: mwPulse 0.6s ease-in-out infinite;
}
@keyframes mwDangerFlash {
    0%, 100% { border-color: rgba(239, 68, 68, 0.4); }
    50% { border-color: rgba(239, 68, 68, 0.7); background: rgba(239, 68, 68, 0.2); }
}

/* ── Invite button ── */
.mw-invite-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding: 10px 16px;
    border: 1px solid rgba(var(--color-accent-rgb, 255, 215, 0), 0.2);
    border-radius: 10px;
    background: rgba(var(--color-accent-rgb, 255, 215, 0), 0.06);
    color: var(--color-accent, #ffd700);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.mw-invite-btn .material-symbols-rounded {
    font-size: 16px;
}
.mw-invite-btn:hover {
    background: rgba(var(--color-accent-rgb, 255, 215, 0), 0.12);
    border-color: rgba(var(--color-accent-rgb, 255, 215, 0), 0.3);
}

/* ── Custom confirm dialog ── */
.mw-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.mw-confirm-overlay.visible {
    background: rgba(0, 0, 0, 0.6);
}
.mw-confirm-overlay.mw-confirm-closing {
    background: rgba(0, 0, 0, 0);
}
.mw-confirm-dialog {
    background: linear-gradient(145deg,
        rgba(var(--color-primary-rgb, 15, 23, 42), 0.97),
        rgba(var(--color-primary-rgb, 15, 23, 42), 0.99)
    );
    border: 1px solid rgba(var(--color-accent-rgb, 255, 215, 0), 0.15);
    border-radius: 16px;
    padding: 20px 24px;
    min-width: 260px;
    max-width: 360px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    animation: mwDialogIn 0.25s ease-out;
}
.mw-confirm-closing .mw-confirm-dialog {
    animation: mwDialogOut 0.2s ease-in forwards;
}
@keyframes mwDialogIn {
    from { opacity: 0; transform: scale(0.92) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes mwDialogOut {
    to { opacity: 0; transform: scale(0.92) translateY(10px); }
}
.mw-confirm-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary, #fff);
    margin-bottom: 8px;
}
.mw-confirm-msg {
    font-size: 0.82rem;
    color: var(--color-text-secondary, #94a3b8);
    line-height: 1.5;
    margin-bottom: 18px;
}
.mw-confirm-msg strong {
    color: var(--color-text-primary, #fff);
}
.mw-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.mw-confirm-btn {
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.mw-confirm-btn.cancel {
    background: rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.06);
    color: var(--color-text-secondary, #94a3b8);
    border: 1px solid rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.08);
}
.mw-confirm-btn.cancel:hover {
    background: rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.1);
}
.mw-confirm-btn.confirm {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8));
    color: #fff;
}
.mw-confirm-btn.confirm:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
}

/* ── Ambient floating cards ── */
.mw-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.mw-room-takeover > *:not(.mw-ambient) {
    position: relative;
    z-index: 1;
}
.mw-float-card {
    position: absolute;
    font-size: 1.4rem;
    opacity: 0.04;
    animation: mwFloat 20s linear infinite;
}
.mw-float-card { top: 10%; left: 5%; animation-delay: 0s; }
.mw-float-card.d2 { top: 60%; left: 85%; animation-delay: -4s; font-size: 1.8rem; }
.mw-float-card.d3 { top: 30%; left: 50%; animation-delay: -8s; font-size: 1.2rem; }
.mw-float-card.d4 { top: 80%; left: 20%; animation-delay: -12s; font-size: 1.6rem; }
.mw-float-card.d5 { top: 15%; left: 75%; animation-delay: -16s; font-size: 1rem; }

@keyframes mwFloat {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.04; }
    25% { opacity: 0.07; }
    50% { transform: translateY(-30px) rotate(180deg); opacity: 0.05; }
    75% { opacity: 0.06; }
    100% { transform: translateY(0) rotate(360deg); opacity: 0.04; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .mw-room-takeover,
    .mw-tab-badge,
    .mw-starting-pulse,
    .mw-starting-fullscreen .material-symbols-rounded,
    .mw-waiting-pulse,
    .mw-player-card,
    .mw-float-card,
    .mw-countdown-card.danger {
        animation: none !important;
    }
    .mw-tab, .mw-host-btn, .mw-ready-btn, .mw-leave-btn,
    .mw-tab-panel, .mw-confirm-overlay, .mw-confirm-dialog {
        transition-duration: 0.01ms !important;
    }
    .mw-tab-panel.mw-slide-out-left,
    .mw-tab-panel.mw-slide-out-right,
    .mw-tab-panel.mw-slide-in-left,
    .mw-tab-panel.mw-slide-in-right {
        animation: none !important;
    }
}

/* ================================================================================================
   ROOM WAITING MODE — Complete Layout System
   ================================================================================================
   Scope: body.room-waiting (set when player is in multiplayer room waiting screen)

   DESIGN GOALS:
   ─ Table panel (mw-room-takeover) fills maximum space
   ─ Player seats compact but VISIBLE (avatar + name, no cards/meta)
   ─ Chat scrolls INTERNALLY — never overflows the container
   ─ Stable dimensions — tab switching doesn't resize anything

   LAYOUT CHAIN (every level must be height-constrained):
   .app-container (100dvh)
     → .main-content (flex:1, overflow:hidden)
       → .game-canvas (flex:1, overflow:hidden in room-waiting)
         → .game-area (flex:1, overflow:hidden)
           → .game-play-container (grid: auto/1fr/auto, overflow:hidden)
             → .table-area [grid 1fr] (overflow:hidden, align-items:stretch)
               → .table-felt (height:100%, no min-height)
                 → .table-message (flex:1, overflow:hidden)
                   → .mw-room-takeover (flex column, overflow:hidden)
                     → .mw-tab-content (flex:1, position:relative)
                       → .mw-tab-panel (position:absolute inset:0)
   ================================================================================================ */

/* ─── GLOBAL (all screen sizes) ─── */

/* 1. Overflow containment chain — prevent any level from growing with content */
body.room-waiting .game-canvas {
    overflow: hidden !important;
}
body.room-waiting .game-area {
    overflow: hidden !important;
    min-height: 0 !important;
}
body.room-waiting .game-play-container,
body.room-waiting .game-play-container.game-2p,
body.room-waiting .game-play-container.game-3p,
body.room-waiting .game-play-container.game-4p {
    overflow: hidden !important;
}

/* ── MP Game Bar ── */
.mp-game-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 4px 4px;
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.12), rgba(var(--color-accent-rgb), 0.06));
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
    z-index: 50;
    gap: 8px;
    margin: 4px 8px;
    flex-shrink: 0;
}
body.mp-game-active .mp-game-bar { display: flex; }
body.room-waiting .mp-game-bar { display: none; }
.mp-game-bar-info {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; color: var(--color-accent);
    letter-spacing: 0.02em; opacity: 0.85;
}
.mp-game-bar-info .material-symbols-rounded { font-size: 14px; }
.mp-game-bar-leave {
    display: flex; align-items: center; gap: 3px;
    padding: 5px 10px;
    background: rgba(var(--color-accent-rgb), 0.18);
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
    border-radius: var(--radius-md);
    color: var(--color-accent);
    font-size: 11px; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease; white-space: nowrap;
}
.mp-game-bar-leave:hover { background: rgba(var(--color-accent-rgb), 0.35); transform: translateY(-1px); }
.mp-game-bar-leave:active { transform: translateY(0); }
.mp-game-bar-leave .material-symbols-rounded { font-size: 14px; }
[data-theme="light"] .mp-game-bar {
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.1), rgba(var(--color-accent-rgb), 0.04));
}
[data-theme="light"] .mp-game-bar-leave { background: rgba(var(--color-accent-rgb), 0.12); }

/* ── Join Request / Spectator Offer Overlay ── */
.mp-joinreq-overlay {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    animation: fadeIn 0.25s ease;
}
.mp-joinreq-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px; padding: 28px 24px 22px; max-width: 300px; width: 88%;
    background: linear-gradient(145deg, var(--color-bg-secondary, #1e1e2e), var(--color-bg-primary, #121218));
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
    animation: joinreqPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
}
@keyframes joinreqPop {
    0%   { opacity: 0; transform: scale(0.85) translateY(16px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.mp-joinreq-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(var(--color-accent-rgb), 0.12);
    border: 2px solid rgba(var(--color-accent-rgb), 0.25);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mp-joinreq-info { display: flex; flex-direction: column; gap: 3px; }
.mp-joinreq-title { font-size: 16px; font-weight: 700; color: var(--color-text-primary); }
.mp-joinreq-sub { font-size: 12px; color: var(--color-text-secondary); line-height: 1.4; }
.mp-joinreq-btns { display: flex; gap: 10px; width: 100%; margin-top: 4px; }
.mp-joinreq-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    gap: 5px; padding: 9px 14px; border: none; border-radius: 10px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: all 0.2s ease; letter-spacing: 0.02em;
}
.mp-joinreq-btn .material-symbols-rounded { font-size: 17px; }
.mp-joinreq-btn.accept {
    background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25);
}
.mp-joinreq-btn.accept:active { transform: scale(0.96); }
.mp-joinreq-btn.refuse {
    background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}
.mp-joinreq-btn.refuse:active { transform: scale(0.96); }
.mp-joinreq-card.mp-pending-mode .mp-joinreq-avatar { border-color: transparent; background: none; }
.mp-pending-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(var(--color-accent-rgb), 0.15);
    border-top-color: var(--color-accent);
    border-radius: 50%; animation: pendSpin 0.9s linear infinite;
}
@keyframes pendSpin { to { transform: rotate(360deg); } }
.mp-joinreq-card.mp-denied-mode .mp-denied-avatar { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); }
[data-theme="light"] .mp-joinreq-overlay { background: rgba(0, 0, 0, 0.35); }
[data-theme="light"] .mp-joinreq-card { background: #fff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); }
[data-theme="light"] .mp-joinreq-avatar { background: rgba(var(--color-accent-rgb), 0.08); border-color: rgba(var(--color-accent-rgb), 0.18); }
[data-theme="light"] .mp-joinreq-title { color: #1a1a2e; }

/* 2. Table area: stretch to fill grid cell, no scrolling */
body.room-waiting .table-area {
    overflow: hidden !important;
    min-height: 0 !important;
    align-items: stretch !important;
    padding: 2px !important;
}

/* 3. Table felt: fill parent, reset min-height */
body.room-waiting .table-felt {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
}

/* 4. Table message: flex child, fill table-felt */
body.room-waiting .table-felt.mw-waiting-mode .table-message {
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 5. Room takeover inner containers */
body.room-waiting .mw-room-takeover {
    min-height: 0 !important;
    max-height: 100% !important;
}
body.room-waiting .mw-tab-content {
    min-height: 0 !important;
}
body.room-waiting .mw-tab-panel.active {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
}
/* 7. Seats: hide cards and meta, keep avatar + name visible */
body.room-waiting .seat-hand {
    display: none !important;
}
body.room-waiting .player-meta {
    display: none !important;
}

/* ─── DESKTOP (≥769px) ─── */
@media (min-width: 769px) {
    body.room-waiting .game-play-container,
    body.room-waiting .game-play-container.game-2p,
    body.room-waiting .game-play-container.game-3p,
    body.room-waiting .game-play-container.game-4p {
        grid-template-rows: auto 1fr auto !important;
        gap: 6px !important;
    }

    body.room-waiting .player-info {
        padding: 6px 10px !important;
        gap: 6px !important;
    }

    body.room-waiting .player-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    body.room-waiting .player-name {
        font-size: 0.85rem !important;
    }

    body.room-waiting .table-area {
        padding: 4px !important;
    }
}

/* ─── LANDSCAPE (max-height ≤500px) ─── */
@media (max-height: 500px) and (orientation: landscape) {
    body.room-waiting .game-play-container,
    body.room-waiting .game-play-container.game-2p,
    body.room-waiting .game-play-container.game-3p,
    body.room-waiting .game-play-container.game-4p {
        grid-template-rows: auto 1fr auto !important;
        gap: 1px !important;
    }

    body.room-waiting .player-info {
        padding: 2px 6px !important;
        gap: 3px !important;
    }

    body.room-waiting .player-avatar {
        width: 22px !important;
        height: 22px !important;
    }

    body.room-waiting .player-name {
        font-size: 0.72rem !important;
    }
}

/*
   ─── MOBILE PORTRAIT room-waiting overrides ───
   IMPORTANT: These MUST come AFTER the main mobile layout rules (~line 18094)
   which set grid-template-rows: minmax(90px,auto) 1fr minmax(110px,auto).
   In room-waiting, seats only show avatar+name (no cards), so we use
   fixed small rows for seats and give the rest to the table panel.
   We place these rules at the END of the file via a dedicated block below.
   ───────────────────────────────────────────────────────────────────────── */

/* ================================================================================================
   10.0.1 TABLE-MESSAGE — MULTIPLAYER WAITING STATES (Theme-aware)
================================================================================================ */

/* Base MP overlay card inside table-message */
.mp-table-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 0.85) 0%,
        rgba(var(--color-primary-rgb), 0.92) 100%
    );
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    border-radius: var(--radius-xl, 16px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    text-align: center;
    min-width: 220px;
    max-width: 320px;
    animation: fadeInUpStagger 0.35s ease-out;
}

/* Title text */
.mp-table-overlay .mp-overlay-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-accent);
    font-family: var(--font-display);
    letter-spacing: 0.3px;
}

/* Subtitle / description */
.mp-table-overlay .mp-overlay-subtitle {
    font-size: 13px;
    color: rgba(var(--color-accent-rgb), 0.6);
    line-height: 1.4;
}

/* Icon large (for expired state etc) */
.mp-table-overlay .mp-overlay-icon {
    font-size: 36px;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(var(--color-accent-rgb), 0.2));
}

/* ── Table-message override when it contains an overlay (expired, etc) ── */
body.game-active .table-message:has(.mp-table-overlay) {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    white-space: normal !important;
    max-width: 90% !important;
    width: auto !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 100 !important;
}

/* Pulsing waiting dots */
.mp-waiting-dots {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.mp-waiting-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: 0.7;
}

.mp-waiting-dots span:nth-child(1) { animation: pulse-gold 1.5s ease-in-out infinite; }
.mp-waiting-dots span:nth-child(2) { animation: pulse-gold 1.5s ease-in-out 0.3s infinite; }
.mp-waiting-dots span:nth-child(3) { animation: pulse-gold 1.5s ease-in-out 0.6s infinite; }

/* Countdown timer */
.mp-countdown {
    font-size: 12px;
    color: rgba(var(--color-accent-rgb), 0.5);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s, font-weight 0.3s;
}

.mp-countdown.warning {
    color: var(--color-accent);
    font-weight: 600;
}

.mp-countdown.danger {
    color: #ef4444;
    font-weight: 700;
}

.mp-countdown.danger #mpCountdownValue {
    animation: pulse-gold 1s ease-in-out infinite;
}

/* Status badge (ready, info) */
.mp-overlay-badge {
    padding: 5px 14px;
    border-radius: var(--radius-sm, 6px);
    font-size: 11px;
    font-weight: 600;
}

.mp-overlay-badge.success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #22c55e;
}

/* Success message (player joined, game starting) */
.mp-overlay-success {
    font-size: 15px;
    font-weight: 700;
    color: #22c55e;
    text-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
}

.mp-overlay-success.starting {
    animation: pulse-gold 1.2s ease-in-out infinite;
}

/* Player count info */
.mp-overlay-info {
    font-size: 12px;
    color: rgba(var(--color-accent-rgb), 0.55);
}

/* Ready waiting text */
.mp-overlay-ready-status {
    font-size: 13px;
    color: #22c55e;
    font-weight: 600;
}

/* ── MP Buttons ── */

/* Primary action button (Sunt Gata, Înapoi la Lobby) */
.mp-btn-primary {
    min-height: 42px;
    padding: 10px 28px;
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        var(--color-accent-dark) 100%
    );
    border: none;
    border-radius: var(--radius-lg, 10px);
    color: var(--color-bg-primary, #000);
    font-weight: 700;
    font-size: 14px;
    font-family: var(--font-sans);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.25);
}

.mp-btn-primary:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 20px rgba(var(--color-accent-rgb), 0.35);
}

.mp-btn-primary:active {
    transform: scale(0.98);
}

.mp-btn-primary .material-symbols-rounded {
    font-size: 20px;
}

/* Ready button — green variant */
.mp-btn-ready {
    min-height: 44px;
    padding: 10px 32px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    border-radius: var(--radius-md, 8px);
    color: white;
    font-weight: 700;
    font-size: 14px;
    font-family: var(--font-sans);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
    animation: pulse-gold 2s ease-in-out infinite;
    transition: transform 0.15s;
}

.mp-btn-ready:hover {
    transform: scale(1.04);
}

.mp-btn-ready .material-symbols-rounded {
    font-size: 20px;
}

/* Cancel ready — subtle danger */
.mp-btn-cancel {
    min-height: 36px;
    padding: 6px 20px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-md, 8px);
    color: #ef4444;
    font-weight: 600;
    font-size: 12px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.2s;
}

.mp-btn-cancel:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Leave / danger button */
.mp-btn-leave {
    min-height: 40px;
    padding: 8px 24px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md, 8px);
    color: #ef4444;
    font-weight: 600;
    font-size: 13px;
    font-family: var(--font-sans);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, border-color 0.2s;
}

.mp-btn-leave:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.35);
}

.mp-btn-leave .material-symbols-rounded {
    font-size: 18px;
}

/* Ghost / subtle leave */
.mp-btn-ghost {
    padding: 6px 16px;
    background: none;
    border: 1px solid rgba(var(--color-accent-rgb), 0.1);
    border-radius: var(--radius-sm, 6px);
    color: rgba(var(--color-accent-rgb), 0.4);
    font-size: 11px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.mp-btn-ghost:hover {
    border-color: rgba(var(--color-accent-rgb), 0.25);
    color: rgba(var(--color-accent-rgb), 0.6);
}

/* ── 2-Player Grid Layout ── */
.game-play-container.game-2p {
    display: grid;
    grid-template-areas:
        "north"
        "table"
        "south";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    flex: 1;
    min-height: 0;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}
.game-2p .seat-east,
.game-2p .seat-west { display: none; }

/* ── 3-Player Grid Layout ── */
.game-play-container.game-3p {
    display: grid;
    grid-template-areas:
        "north  north"
        "table  east"
        "south  south";
    grid-template-columns: 1fr minmax(100px, 180px);
    grid-template-rows: auto 1fr auto;
    flex: 1;
    min-height: 0;
    gap: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}
.game-3p .seat-west { display: none; }

/* ── Player Count Selector ── */
.player-count-selector {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.player-count-selector .count-btn {
    padding: 10px 20px;
    border: 2px solid rgba(var(--color-accent-rgb), 0.3);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    min-height: 44px;
    touch-action: manipulation;
}

.player-count-selector .count-btn:hover {
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: rgba(var(--color-accent-rgb), 0.5);
    color: var(--color-text-primary);
    transform: translateY(-2px);
}

.player-count-selector .count-btn.active {
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.2) 0%, rgba(var(--color-accent-rgb), 0.1) 100%);
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.25);
}

/* Score group in status bar */
.score-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.game-play-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%, var(--bg-mesh-1) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 30%, var(--bg-mesh-3) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 70%, var(--bg-mesh-2) 0%, transparent 35%);
    border-radius: var(--radius-xl);
    pointer-events: none;
    z-index: 0;
}

/* ================================================================================================
   8. PLAYER AREAS - OPPONENT & USER
================================================================================================ */
.opponent-area,
.player-area {
    /* Layout handled by Bootstrap: .d-flex .align-items-center .gap-2 .gap-md-3 */
    /* Note: justify-content-between in HTML separates info from cards */
    /* Grid child: respects minmax(110px, auto) from parent */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(var(--glow-color), 0.12);
    border-top: 1px solid rgba(var(--glow-color), 0.2);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(var(--glass-blur-light));
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.2),
        var(--glow-xs);
    transition: all 0.3s ease;
    /* Mobile First: minimal padding */
    padding: var(--space-xs);
    position: relative;
    z-index: 1;
}

/* Custom justify-content removed - Bootstrap handles with .justify-content-between */

/* Player Info Card */
.player-info {
    /* Flexbox layout → Bootstrap: .d-flex .align-items-center .gap-3 */
    /* Mobile First: compact sizing */
    padding: var(--space-sm);
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.04) 100%
    );
    border: 1px solid var(--glass-border);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-lg);
    min-width: 140px;
    position: relative;
    transition: all var(--transition-base);
    backdrop-filter: blur(var(--glass-blur-light));
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.player-info:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.06) 100%
    );
    transform: translateY(-2px);
    border-color: var(--glow-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.3),
        var(--glow-md);
}

.player-avatar {
    position: relative;
    /* Mobile First: compact avatar */
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 2px solid var(--color-accent);
    box-shadow:
        0 0 12px rgba(var(--glow-color), 0.25),
        0 0 24px rgba(var(--glow-color), 0.1),
        0 4px 12px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease;
}

.player-avatar img {
    /* Width & Height → Bootstrap: .w-100 .h-100 */
    object-fit: cover;
}

/* Real user avatar - highlighted border */
.player-avatar img.user-avatar-game {
    object-fit: cover;
    border-radius: 50%;
}

.seat-south .player-avatar:has(.user-avatar-game) {
    border-color: var(--color-accent);
    box-shadow:
        0 0 12px rgba(var(--color-accent-rgb), 0.4),
        0 0 24px rgba(var(--color-accent-rgb), 0.15),
        0 4px 12px rgba(0, 0, 0, 0.3);
    animation: glowPulseSoft 4s ease-in-out infinite;
}

.player-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    /* border-radius → Bootstrap: .rounded-circle */
    border: 2px solid var(--color-bg-primary);
    background: var(--color-success);
    box-shadow: 0 0 12px var(--color-success);
}

.player-status.offline {
    background: var(--color-text-disabled);
    box-shadow: none;
}

.player-details {
    /* Flexbox layout → Bootstrap: .d-flex .flex-column .gap-1 */
}

.player-name {
    /* Mobile First: compact text */
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: var(--font-display);
    text-shadow: 0 0 10px rgba(var(--glow-color), 0.15);
}

.player-meta {
    /* Flexbox layout → Bootstrap: .d-flex .align-items-center .gap-3 */
}

.meta-item {
    /* Flexbox layout → Bootstrap: .d-flex .align-items-center .gap-1 */
    /* Mobile First: compact text */
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.meta-item .material-symbols-rounded {
    /* Mobile First: compact icons */
    font-size: 14px;
    color: var(--color-accent);
}

/* === Player Balance Display === */
.meta-item.meta-balance {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 1px 6px;
    gap: 3px;
}

.meta-item.meta-balance .material-symbols-rounded {
    font-size: 12px;
    color: var(--color-accent);
}

.player-balance-value {
    font-weight: 800;
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--color-accent);
}

/* ================================================================================================
   9. CARD HANDS - PLAYER & OPPONENT
   Note: HTML now uses Bootstrap flex utilities (d-flex, gap-2, justify-content-center)
   These CSS rules provide fallback & additional styling beyond Bootstrap basics
================================================================================================ */
.opponent-hand,
.player-hand {
    /* Layout handled by Bootstrap: .d-flex .flex-wrap .justify-content-center .gap-1/.gap-2 */
    flex: 1; /* Required to distribute space in player areas */
    /* Mobile First: compact height */
    min-height: 90px;
    padding: var(--space-xs);
    overflow-x: auto;
    overflow-y: visible; /* Allow cards to overflow for hover effects */
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-accent-rgb), 0.3) transparent;
}

.opponent-hand::-webkit-scrollbar,
.player-hand::-webkit-scrollbar {
    height: 4px;
}

.opponent-hand::-webkit-scrollbar-thumb,
.player-hand::-webkit-scrollbar-thumb {
    background: rgba(var(--color-accent-rgb), 0.3);
    border-radius: var(--radius-full);
}

.opponent-hand::-webkit-scrollbar-track,
.player-hand::-webkit-scrollbar-track {
    background: transparent;
}

/* ================================================================================================
   6. CARDS - 3D PREMIUM DESIGN
   
   Touch Target Standards:
   - Apple HIG: Minimum 44x44px for interactive elements
   - Material Design: Minimum 48x48px touch targets
   - Player cards: Min 48px width (clamp) ✅ COMPLIANT
   - Opponent cards: Min 28px width (non-interactive, visual only) ✅ OK
   
   Responsive sizing with clamp():
   - Desktop: 70x98px (default)
   - Tablet (768px): 48-75px (clamp with vw scaling)
   - Mobile: 40-62px (min size preserved)
   
   Bootstrap Integration:
   - HTML uses d-flex, flex-wrap, gap-2/gap-md-3
   - CSS provides fallback + card-specific styling
================================================================================================ */
.card {
    position: relative;
    /* Mobile First: smallest screen values */
    width: 50px;
    height: auto;
    aspect-ratio: 5 / 7;
    font-size: 18px;
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 240, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        var(--card-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all var(--transition-base);
    transform-style: preserve-3d;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    user-select: none;
    contain: layout style;
}

.card:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4),
                0 24px 48px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(var(--glow-color), 0.35),
                0 0 40px rgba(var(--glow-color), 0.15);
    z-index: 10;
    filter: brightness(1.08);
}

.card:not(.card-back):hover::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.2),
        rgba(var(--color-accent-rgb), 0.15));
    border-radius: var(--radius-md);
    z-index: -1;
    opacity: 0;
    animation: cardGlow 2s ease-in-out infinite;
}

@keyframes cardGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.6; }
}

/* Dezactivează hover lift pentru cărțile de pe masă */
.table-cards .card:hover,
#tableCards .card:hover {
    box-shadow: none !important;
    filter: none !important;
    cursor: default !important;
    transform: none !important;
}

/* Dezactivează și glow effect pentru cărțile de pe masă */
.table-cards .card:not(.card-back):hover::after,
#tableCards .card:not(.card-back):hover::after {
    display: none !important;
}

.card:active {
    transform: translateY(-8px) scale(1.05);
}

.card.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.card.card-back {
    background:
        /* Diamond weave micro-pattern (felt fabric) */
        repeating-conic-gradient(
            rgba(255, 255, 255, 0.03) 0% 25%,
            transparent 0% 50%
        ) 0 0 / 6px 6px,
        /* Base gradient using theme primary */
        linear-gradient(145deg,
            var(--color-primary) 0%,
            var(--color-primary-dark) 100%
        );
    border: 1.5px solid rgba(var(--color-accent-rgb), 0.3);
    box-shadow:
        var(--card-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 8px rgba(var(--glow-color), 0.08);
}

.card.card-back::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: calc(var(--radius-md) - 4px);
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    background:
        /* Center ornament glow */
        radial-gradient(circle at 50% 50%,
            rgba(var(--color-accent-rgb), 0.12) 0%,
            transparent 60%);
    pointer-events: none;
}

.card.card-back::after {
    content: '♠';
    font-size: 16px;
    color: rgba(var(--color-accent-rgb), 0.25);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Card Suits Colors */
.card.hearts,
.card.diamonds {
    color: var(--color-suit-red, #dc2626);
}

.card.clubs,
.card.spades {
    color: var(--color-suit-black, #1f2937);
}

/* Card Playing Animation */
@keyframes cardPlay {
    0% {
        transform: translateY(0) scale(1) rotateZ(0deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-100px) scale(1.2) rotateZ(15deg);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-50px) scale(1) rotateZ(0deg);
        opacity: 1;
    }
}

.card.playing {
    animation: cardPlay 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Table card special styling */
.table-card {
    position: relative;
    animation: cardLand 0.3s ease-out forwards;
}

@keyframes cardLand {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 🎯 CUTTER CARDS - Subtle Border Indicators (stays in line) */

/* 7 - Universal cutter (Gold) */
.cutter-7 {
    border: 2px solid rgba(255, 215, 0, 0.7) !important;
    box-shadow:
        0 0 8px rgba(255, 215, 0, 0.4),
        inset 0 0 6px rgba(255, 215, 0, 0.15) !important;
    animation: cutter-pulse-gold 2.5s ease-in-out infinite !important;
}

/* Same rank cutter (Red/Orange) */
.cutter-same-rank {
    border: 2px solid rgba(255, 99, 71, 0.7) !important;
    box-shadow:
        0 0 8px rgba(255, 99, 71, 0.4),
        inset 0 0 6px rgba(255, 99, 71, 0.15) !important;
    animation: cutter-pulse-red 2.5s ease-in-out infinite !important;
}

/* Special 8♣/8♠ in 3P (Cyan) */
.cutter-special {
    border: 2px solid rgba(0, 206, 209, 0.7) !important;
    box-shadow:
        0 0 8px rgba(0, 206, 209, 0.4),
        inset 0 0 6px rgba(0, 206, 209, 0.15) !important;
    animation: cutter-pulse-cyan 2.5s ease-in-out infinite !important;
}

@keyframes badge-bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

@keyframes cutter-pulse-gold {
    0%, 100% {
        box-shadow:
            0 0 6px rgba(255, 215, 0, 0.3),
            inset 0 0 4px rgba(255, 215, 0, 0.1);
    }
    50% {
        box-shadow:
            0 0 10px rgba(255, 215, 0, 0.5),
            inset 0 0 6px rgba(255, 215, 0, 0.2);
    }
}

@keyframes cutter-pulse-red {
    0%, 100% {
        box-shadow:
            0 0 6px rgba(255, 99, 71, 0.3),
            inset 0 0 4px rgba(255, 99, 71, 0.1);
    }
    50% {
        box-shadow:
            0 0 10px rgba(255, 99, 71, 0.5),
            inset 0 0 6px rgba(255, 99, 71, 0.2);
    }
}

@keyframes cutter-pulse-cyan {
    0%, 100% {
        box-shadow:
            0 0 6px rgba(0, 206, 209, 0.3),
            inset 0 0 4px rgba(0, 206, 209, 0.1);
    }
    50% {
        box-shadow:
            0 0 10px rgba(0, 206, 209, 0.5),
            inset 0 0 6px rgba(0, 206, 209, 0.2);
    }
}

.table-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(45deg, transparent 40%, rgba(var(--color-accent-rgb), 0.3) 50%, transparent 60%);
    background-size: 200% 200%;
    border-radius: var(--radius-md);
    opacity: 0;
    z-index: -1;
    animation: cardShimmer 3s linear infinite;
}

@keyframes cardShimmer {
    0% { background-position: 200% 200%; opacity: 0; }
    50% { opacity: 0.5; }
    100% { background-position: -200% -200%; opacity: 0; }
}

/* ================================================================================================
   MOBILE FIRST RESPONSIVE - CARDS
   Progressive Enhancement: Grow card sizes for larger screens
================================================================================================ */
@media (min-width: 576px) {
    /* sm: Landscape phones */
    .card {
        width: 55px;
        font-size: 20px;
    }
    
    .top-bar {
        padding: 4px 10px;
        min-height: 40px;
    }

    /* SM: Game canvas — same as Table (compact) */
    .game-canvas {
        padding: 0 var(--space-sm) var(--space-sm) var(--space-sm);
    }
    
    /* SM: Status bar compact improvements */
    .status-bar {
        height: 56px;
        padding: var(--space-xs) var(--space-md);
    }

    .status-item {
        font-size: 11px;
    }

    .user-avatar-badge { display: flex; }
    .user-avatar-badge .status-avatar { width: 20px; height: 20px; }
    .user-avatar-badge .material-symbols-rounded { font-size: 18px !important; }

    .score-label {
        font-size: 10px;
    }
    
    .score-value {
        font-size: 14px;
    }
    
    /* SM: Player info slight improvements */
    .player-avatar {
        width: 50px;
        height: 50px;
    }
    
    .player-info {
        min-width: 150px;
    }
    
    .opponent-hand,
    .player-hand {
        min-height: 100px;
    }
    
    /* SM: Button controls slight improvement */
    .btn-control {
        padding: var(--space-sm) var(--space-lg);
        font-size: 13.5px;
    }
    
}

@media (min-width: 768px) {
    /* md: Tablets */
    :root {
        --nav-rail-width: 56px;
        --top-bar-height: 40px;
    }

    .card {
        width: 60px;
        font-size: 22px;
    }

    /* MD: Game canvas — same as Table (compact) */
    .game-canvas {
        padding: 0 var(--space-sm) var(--space-sm) var(--space-sm);
    }

    .top-bar {
        min-height: 40px;
        padding: 4px 10px;
    }

    /* MD: Player info moderate sizing */
    .player-avatar {
        width: 52px;
        height: 52px;
    }
    
    .player-name {
        font-size: 15px;
    }
    
    .player-info {
        min-width: 170px;
        padding: var(--space-sm);
    }
    
    .meta-item {
        font-size: 12px;
    }
    
    .meta-item .material-symbols-rounded {
        font-size: 15px;
    }
    
    .opponent-hand,
    .player-hand {
        min-height: 110px;
    }
    
    /* MD: Button controls moderate sizing */
    .btn-control {
        padding: var(--space-sm) var(--space-lg);
        font-size: 14px;
    }
    
    .btn-control .material-symbols-rounded {
        font-size: 21px;
    }
    
    /* MD: Stats moderate size increase */
    .stat-icon {
        font-size: 20px;
        width: 32px;
        height: 32px;
    }
    
    .stat-value {
        font-size: 15px;
    }
    
    /* MD: Brand moderate improvements */
    .brand-icon {
        width: 40px;
        height: 40px;
    }
    
    .brand-icon .material-symbols-rounded {
        font-size: 28px;
    }
    
    .brand-text h1 {
        font-size: 20px;
    }
    
    .brand-tagline {
        font-size: 11px;
    }
    
    .action-btn {
        width: 44px;
        height: 44px;
    }
    
    .action-btn .material-symbols-rounded {
        font-size: 20px;
    }
    
    .brand-icon {
        width: 40px;
        height: 40px;
    }
    
    .brand-icon .material-symbols-rounded {
        font-size: 26px;
    }
    
    .brand-text h1 {
        font-size: 22px;
        letter-spacing: 0.4px;
    }
    
    .brand-tagline {
        font-size: 11px;
        letter-spacing: 1px;
    }
    
    .action-btn {
        width: 42px;
        height: 42px;
    }
    
    /* MD: Status bar sizing */
    .status-bar {
        height: 60px;
        padding: var(--space-sm) var(--space-lg);
    }
    
    .status-item {
        font-size: 12px;
    }
    
    .status-item .material-symbols-rounded {
        font-size: 20px;
    }
    
    .score-label {
        font-size: 11px;
    }
    
    .score-value {
        font-size: 15px;
    }
    
    .status-btn {
        width: 42px;
        height: 42px;
    }
    
    .status-btn .material-symbols-rounded {
        font-size: 20px;
    }
}

/* ── Desktop: Compact game layout — reduce vertical gaps ── */
@media (min-width: 768px) {
    body.game-active:not(.room-waiting) .game-play-container.game-2p,
    body.game-active:not(.room-waiting) .game-play-container.game-3p,
    body.game-active:not(.room-waiting) .game-play-container.game-4p {
        grid-template-rows: auto auto auto;
        align-content: space-between;
        gap: clamp(4px, 1vh, 16px);
    }
}

@media (min-width: 992px) {
    /* lg: Desktops - full size */
    :root {
        --nav-rail-width: 72px;
        --top-bar-height: 40px;
        --context-panel-width: 300px;
    }

    /* Adjust padding for taller bottom nav on desktop */
    .main-content {
        padding-bottom: calc(110px + var(--sab, 0px));
    }

    .context-panel {
        max-height: calc(100dvh - var(--top-bar-height, 40px) - 110px - var(--sab, 0px)) !important;
    }

    .card {
        width: 70px;
        font-size: 24px;
    }

    .top-bar {
        min-height: 40px;
        padding: 4px 14px;
    }

    .status-btn {
        width: 36px;
        height: 36px;
    }

    .panel-close {
        width: 40px;
        height: 40px;
    }
    
    .modal-close {
        width: 40px;
        height: 40px;
    }
    
    /* Desktop: Status bar & controls larger text */
    .status-bar {
        min-height: 64px;
        padding: var(--space-sm) var(--space-xl);
    }
    
    .status-item {
        font-size: 13px;
    }
    
    .status-item .material-symbols-rounded {
        font-size: 22px;
    }
    
    .score-label {
        font-size: 12px;
    }
    
    .score-value {
        font-size: 16px;
    }
    
    .status-btn {
        width: 44px;
        height: 44px;
    }
    
    .status-btn .material-symbols-rounded {
        font-size: 22px;
    }
    
    .btn-control {
        padding: var(--space-md) var(--space-xl);
        font-size: 15px;
    }
    
    .btn-control .material-symbols-rounded {
        font-size: 22px;
    }
    
    /* LG: Game canvas — same as Table (compact) */
    .game-canvas {
        padding: 0 var(--space-sm) var(--space-sm) var(--space-sm);
    }
    
    /* Desktop: Game table & player areas - spacious */
    .opponent-area,
    .player-area {
        padding: var(--space-sm);
    }
    
    .player-info {
        padding: var(--space-md);
        min-width: 200px;
    }
    
    .opponent-hand,
    .player-hand {
        min-height: 130px;
        padding: var(--space-sm);
    }
    
    .table-area {
        padding: var(--space-sm); /* 8px — tighter on desktop */
    }

    .table-felt {
        /* min-height: clamp() already handles up to 300px */
        padding: var(--space-md); /* 16px — tighter on desktop */
    }
    
    /* Desktop: Player info - larger sizing */
    .player-avatar {
        width: 56px;
        height: 56px;
    }
    
    .player-name {
        font-size: 16px;
    }
    
    .meta-item {
        font-size: 13px;
    }
    
    .meta-item .material-symbols-rounded {
        font-size: 16px;
    }
    
    /* Desktop: Table info - clamp() already handles sizing */
    /* .table-pot, .table-last { font-size: 13px; } = clamp max, removed */
    /* .table-pot .material-symbols-rounded { font-size: 18px; } = clamp max, removed */
    
    .table-cards {
        /* min-height: clamp() already handles up to 140px */
        padding: var(--space-md); /* 16px > clamp max (8px) */
    }

    .table-message {
        padding: var(--space-md) var(--space-xl); /* 16px > clamp max (8px) */
        /* font-size: clamp() already handles up to 14px */
    }
    
    /* Desktop: Bottom Nav - more spacious */
    .nav-rail {
        min-height: 90px;
        padding-bottom: calc(var(--sab, 0px) + 12px);
        padding-top: 8px;
        gap: 6px;
    }

    .status-bar {
        height: 40px;
        padding: 6px var(--space-md);
    }

    /* Old nav-items selectors (deprecated - kept for safety) */
    .nav-items {
        max-width: 800px;
        gap: 8px;
    }

    .nav-item {
        height: 52px;
        max-width: 100px;
    }

    .nav-item .material-symbols-rounded {
        font-size: 26px;
    }

    .nav-item.active .material-symbols-rounded {
        font-size: 28px;
    }

    .nav-label {
        display: block;
        font-size: 11px;
    }

    .nav-badge {
        min-width: 18px;
        height: 18px;
        font-size: 10px;
    }

    /* New nav-bar-primary desktop overrides */
    .nav-bar-primary {
        max-width: 600px;
        gap: 8px;
    }

    .nav-bar-btn {
        height: 52px;
    }

    .nav-bar-btn .material-symbols-rounded {
        font-size: 24px;
    }

    .nav-bar-btn.active .material-symbols-rounded {
        font-size: 26px;
    }

    .nav-bar-fab {
        width: 60px;
        height: 60px;
    }

    .nav-bar-fab .material-symbols-rounded {
        font-size: 28px;
    }

    .nav-bar-label {
        font-size: 11px;
    }

    .drawer-items {
        grid-template-columns: repeat(5, 1fr);
    }

    /* 🖥️ DESKTOP: Chat folosește structura standard ca Game Tables - scroll natural */
    /* NU mai facem override - lăsăm base styling să funcționeze */
}

@media (min-width: 1200px) {
    /* xl: Large desktops */
    :root {
        --top-bar-height: 70px;
        --context-panel-width: 320px;
    }
    
    .brand-text h1 {
        font-size: 24px; /* Larger on big screens */
    }
    
    /* XL: Enhanced stats sizing */
    .stat-icon {
        font-size: 24px;
        width: 36px;
        height: 36px;
    }
    
    .stat-value {
        font-size: 17px;
    }
    
    .stat-label {
        font-size: 10px;
        letter-spacing: 0.5px;
    }
    
    .stat-change,
    .stat-badge {
        font-size: 11px;
    }
    
    /* XL: Status bar enhanced */
    .status-item {
        font-size: 14px;
    }
    
    .status-item .material-symbols-rounded {
        font-size: 24px;
    }
    
    .score-label {
        font-size: 13px;
    }
    
    .score-value {
        font-size: 17px;
    }
    
    /* XL: Player info enhanced */
    .card {
        width: 75px;
        font-size: 26px;
    }
    
    .player-avatar {
        width: 60px;
        height: 60px;
    }
    
    .player-name {
        font-size: 17px;
    }
    
    .player-info {
        min-width: 220px;
    }
    
    .meta-item {
        font-size: 14px;
    }
    
    .meta-item .material-symbols-rounded {
        font-size: 17px;
    }
    
    .opponent-hand,
    .player-hand {
        min-height: 130px;
    }

    .table-felt {
        max-width: min(950px, 80vw);
    }

    /* XL: Button controls enhanced */
    .btn-control {
        padding: var(--space-md) var(--space-xl);
        font-size: 16px;
    }
    
    .btn-control .material-symbols-rounded {
        font-size: 24px;
    }
}

@media (min-width: 1400px) {
    /* xxl: Extra large desktops - maximum comfortable sizing */
    .stat-item {
        padding: var(--space-sm) var(--space-md);
    }
    
    .brand-text h1 {
        font-size: 26px;
    }
    
    .stat-icon {
        font-size: 26px;
        width: 38px;
        height: 38px;
    }
    
    .stat-value {
        font-size: 18px;
    }
    
    .stat-label {
        font-size: 11px;
    }
    
    .stat-change,
    .stat-badge {
        font-size: 12px;
    }
    
    /* XXL: Status bar maximum sizing */
    .status-bar {
        min-height: 68px;
    }
    
    .status-item {
        font-size: 15px;
    }
    
    .score-label {
        font-size: 14px;
    }
    
    .score-value {
        font-size: 18px;
    }
    
    /* XXL: Player info maximum comfortable sizing */
    .card {
        width: 85px;
        font-size: 28px;
    }
    
    .player-avatar {
        width: 64px;
        height: 64px;
    }
    
    .player-name {
        font-size: 18px;
    }
    
    .player-info {
        min-width: 260px;
        padding: 10px 14px;
    }

    .meta-item {
        font-size: 15px;
    }

    .meta-item .material-symbols-rounded {
        font-size: 18px;
    }

    .opponent-hand,
    .player-hand {
        min-height: 140px;
    }

    .table-felt {
        max-width: min(1100px, 75vw);
    }

    /* XXL: Button controls maximum sizing */
    .btn-control {
        padding: var(--space-md) var(--space-xl);
        font-size: 17px;
    }
    
    .btn-control .material-symbols-rounded {
        font-size: 26px;
    }
}

/* ================================================================================================
   10. TABLE AREA - FELT SURFACE
================================================================================================ */
.table-area {
    grid-area: table;
    /* Grid child: center cell in 4P layout */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2px, 1vw, var(--space-sm));
    position: relative;
    overflow-y: auto;
}

.table-felt {
    width: 100%;
    max-width: min(800px, 85vw);
    min-height: clamp(130px, 28vw, 240px);
    contain: layout style;
    background:
        /* Spotlight — asymmetric overhead light (slightly off-center, like a casino lamp) */
        radial-gradient(ellipse 70% 50% at 40% 35%,
            rgba(255, 255, 255, 0.06) 0%,
            transparent 55%),
        /* Bottom vignette — darkens edges for depth */
        radial-gradient(ellipse at 50% 100%,
            rgba(0, 0, 0, 0.12) 0%,
            transparent 50%),
        /* Base felt gradient */
        linear-gradient(135deg,
            var(--glass-table-bg) 0%,
            var(--glass-table-bg-center) 50%,
            var(--glass-table-bg) 100%
        );
    /* Table rim — raised wood rail with gold inlay */
    border: 3px solid rgba(65, 40, 20, 0.85);
    border-top: 3px solid rgba(100, 68, 35, 0.75);
    border-bottom: 3px solid rgba(35, 22, 10, 0.92);
    border-radius: clamp(20px, 5vw, 50px);
    box-shadow:
        /* Inner gold inlay line (premium detail) */
        inset 0 0 0 1px rgba(var(--color-accent-rgb), 0.1),
        /* Inner top-edge highlight */
        inset 0 2px 0 rgba(255, 255, 255, 0.08),
        /* Inner deep shadow (felt recess) */
        inset 0 6px 28px rgba(0, 0, 0, 0.5),
        /* Inner ambient occlusion */
        inset 0 0 50px rgba(0, 0, 0, 0.18),
        /* Contact shadow */
        0 2px 4px rgba(0, 0, 0, 0.3),
        /* Gold accent trim (flush with rim) */
        0 0 0 1px rgba(var(--color-accent-rgb), 0.2),
        0 0 0 2px rgba(65, 40, 20, 0.3),
        /* Primary drop shadow */
        0 12px 40px rgba(0, 0, 0, 0.4),
        /* Ambient shadow */
        0 24px 64px rgba(0, 0, 0, 0.18),
        /* Warm rim glow */
        0 0 20px rgba(var(--color-accent-rgb), 0.06);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(var(--space-sm), 2vw, var(--space-md));
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    touch-action: manipulation;
}

/* Felt texture overlay — SVG feTurbulence noise for realistic fabric */
.table-felt::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        /* Top-to-bottom light gradient (3D bevel) */
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 35%,
            transparent 70%,
            rgba(0, 0, 0, 0.08) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Noise texture layer (felt grain) */
.table-felt::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    filter: url(#feltNoise);
    opacity: 0.06;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

.table-info {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    right: var(--space-sm);
    /* Flexbox layout → Bootstrap: .d-flex .justify-content-between .align-items-center */
    gap: var(--space-xs);
    z-index: 2;
}

.table-pot,
.table-last {
    padding: clamp(2px, 0.8vh, var(--space-xs)) clamp(4px, 1.5vw, var(--space-sm));
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.04) 0%,
        rgba(var(--color-accent-rgb), 0.08) 100%
    );
    border: 1px solid rgba(var(--glow-color), 0.2);
    border-top: 1px solid rgba(var(--glow-color), 0.3);
    border-radius: var(--radius-md);
    /* Mobile First: 320px (11px) → fluid clamp() → 992px+ (13px) */
    font-size: clamp(11px, 2vw, 13px);
    font-weight: 600;
    color: var(--color-text-secondary);
    /* Flexbox layout → Bootstrap: .d-flex .align-items-center .gap-1 */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.2),
        var(--glow-xs);
    transition: all 0.3s ease;
    backdrop-filter: blur(var(--glass-blur-light));
    -webkit-backdrop-filter: blur(var(--glass-blur-light));
    flex-shrink: 1;
    min-width: 0;
    max-width: 48%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-pot .material-symbols-rounded,
.table-last .material-symbols-rounded {
    /* Mobile First: 320px (12px) → fluid clamp() → 992px+ (16px) */
    font-size: clamp(12px, 2.5vw, 16px);
    color: var(--color-accent);
}

.table-pot {
    max-width: 25%;
    font-variant-numeric: tabular-nums;
}

.table-last {
    margin-right: var(--space-md);
}

/* ==================== PASS BUTTON (#mpPassBtn) — responsive, din CSS nu inline ==================== */
#mpPassBtn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    border-radius: clamp(6px, 1.5vw, 10px);
    color: #fff;
    font-weight: 700;
    font-size: clamp(10px, 2vw, 13px);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.5vw, 4px);
    min-height: clamp(26px, 4vh, 36px);
    padding: clamp(3px, 0.8vh, 6px) clamp(8px, 2.2vw, 16px);
    box-shadow: 0 3px 12px rgba(245, 158, 11, 0.4);
    animation: pulse-gold 2s ease-in-out infinite;
    white-space: nowrap;
}

#mpPassBtn .material-symbols-rounded {
    font-size: clamp(13px, 2.5vw, 20px);
}

/* Pass button când chat panel e activ (table comprimat) */
body.game-active:has(.context-panel.active) #mpPassBtn {
    min-height: clamp(20px, 3vh, 26px) !important;
    padding: clamp(2px, 0.5vh, 3px) clamp(5px, 1.2vw, 8px) !important;
    font-size: clamp(9px, 1.5vw, 11px) !important;
    border-radius: 6px !important;
    gap: 2px !important;
}

body.game-active:has(.context-panel.active) #mpPassBtn .material-symbols-rounded {
    font-size: clamp(10px, 1.8vw, 13px) !important;
}

/* table-pot / table-last când chat panel e activ */
body.game-active:has(.context-panel.active) .table-pot,
body.game-active:has(.context-panel.active) .table-last {
    padding: 2px 4px !important;
    font-size: clamp(7px, 1.3vw, 9px) !important;
}

body.game-active:has(.context-panel.active) .table-pot .material-symbols-rounded,
body.game-active:has(.context-panel.active) .table-last .material-symbols-rounded {
    font-size: clamp(9px, 1.6vw, 12px) !important;
}

/* ==================== SEAT SPEECH BUBBLES ==================== */
/* Apar lângă fiecare seat când un jucător trimite un mesaj în chat */
/* Portal-ul (#seatBubblesPortal) este position:fixed pe document.body (JS) */
/* Bubbles sunt position:fixed, poziționate cu getBoundingClientRect() din JS */

.seat-bubble {
    position: fixed;
    pointer-events: none;
    max-width: clamp(90px, 28vw, 190px);
    padding: clamp(4px, 0.9vh, 7px) clamp(8px, 1.8vw, 13px);
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 0.92) 0%,
        rgba(var(--color-primary-rgb), 0.97) 100%
    );
    border: 1px solid rgba(var(--glow-color), 0.4);
    border-top: 1px solid rgba(var(--glow-color), 0.55);
    border-radius: clamp(8px, 2vw, 12px);
    font-size: clamp(9px, 1.8vw, 11px);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        var(--glow-xs);
    /* Entry animation via standalone `scale` — nu conflictuează cu transform de poziționare */
    animation: seatBubbleIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 150;
}

/* Tail (coada speech bubble) via ::after */
.seat-bubble::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Transform-origin per seat — bubble crește din vârful cozii */
.seat-bubble-south { transform-origin: bottom center; }
.seat-bubble-north { transform-origin: top center; }
.seat-bubble-east  { transform-origin: right center; }
.seat-bubble-west  { transform-origin: left center; }

/* SOUTH — bubble deasupra; coada spre JOS */
.seat-bubble-south::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left:  7px solid transparent;
    border-right: 7px solid transparent;
    border-top:   7px solid rgba(var(--color-primary-rgb), 0.95);
}

/* NORTH — bubble dedesubt; coada spre SUS */
.seat-bubble-north::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left:   7px solid transparent;
    border-right:  7px solid transparent;
    border-bottom: 7px solid rgba(var(--color-primary-rgb), 0.95);
}

/* EAST — bubble la stânga; coada spre DREAPTA */
.seat-bubble-east::after {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-top:    7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left:   7px solid rgba(var(--color-primary-rgb), 0.95);
}

/* WEST — bubble la dreapta; coada spre STÂNGA */
.seat-bubble-west::after {
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border-top:    7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right:  7px solid rgba(var(--color-primary-rgb), 0.95);
}

/* East/West în rândul de sus pe mobile — bubble dedesubt, coadă spre SUS */
.seat-bubble-east.seat-bubble-top-row,
.seat-bubble-west.seat-bubble-top-row {
    transform-origin: top center;
}
.seat-bubble-east.seat-bubble-top-row::after,
.seat-bubble-west.seat-bubble-top-row::after {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top:    7px solid transparent;
    border-left:   7px solid transparent;
    border-right:  7px solid transparent;
    border-bottom: 7px solid rgba(var(--color-primary-rgb), 0.95);
}
[data-theme="light"] .seat-bubble-east.seat-bubble-top-row::after,
[data-theme="light"] .seat-bubble-west.seat-bubble-top-row::after {
    border-bottom-color: rgba(248,248,248,0.97);
}

/* Eticheta cu numele jucătorului (doar pentru oponenți) */
.seat-bubble-name {
    display: block;
    font-size: 0.75em;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 2px;
    letter-spacing: 0.02em;
    opacity: 0.9;
}

.seat-bubble-text {
    display: block;
}

/* Animație de ieșire */
.seat-bubble.seat-bubble-out {
    animation: seatBubbleOut 0.35s ease-in forwards;
}

/* Entry — `scale` standalone nu conflictuează cu `transform` (poziționare) */
@keyframes seatBubbleIn {
    0%   { opacity: 0; scale: 0.3; }
    60%  { opacity: 1; scale: 1.09; }
    100% { opacity: 1; scale: 1; }
}

/* Exit */
@keyframes seatBubbleOut {
    0%   { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 0.5; }
}

/* Light theme overrides */
[data-theme="light"] .seat-bubble {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,248,248,0.98) 100%);
    border-color: rgba(0, 0, 0, 0.15);
    border-top-color: rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.9) inset;
}
[data-theme="light"] .seat-bubble-south::after { border-top-color:    rgba(248,248,248,0.97); }
[data-theme="light"] .seat-bubble-north::after { border-bottom-color: rgba(248,248,248,0.97); }
[data-theme="light"] .seat-bubble-east::after  { border-left-color:   rgba(248,248,248,0.97); }
[data-theme="light"] .seat-bubble-west::after  { border-right-color:  rgba(248,248,248,0.97); }

.table-cards {
    /* Single row, cards compress with negative margin */
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: clamp(80px, 15vw, 120px);
    padding: clamp(var(--space-xs), 1vw, var(--space-sm));
    width: 100%;
    position: relative;
    z-index: 2;
    /* Sunken card play zone */
    background: radial-gradient(ellipse at 50% 50%,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.1) 100%);
    border-radius: clamp(10px, 2vw, 18px);
    box-shadow:
        inset 0 1px 6px rgba(0, 0, 0, 0.2),
        inset 0 0 12px rgba(0, 0, 0, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Cards on table: cascading pile with dynamic overlap */
.table-cards .card {
    flex-shrink: 0;
    margin-left: -18px;
    transition: margin-left 0.3s ease;
}

.table-cards .card:first-child {
    margin-left: 0;
}

/* Last played card - subtle pop effect */
.table-cards .card:last-child {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

/* ══════════════════════════════════════════
   PREVIOUS ROUNDS - Mini Card Strip
   ══════════════════════════════════════════ */

/* Container for one completed round's mini cards */
.pile-round {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 3px 5px;
    margin-right: 2px;
}

/* Round label (R1, R2...) */
.pile-round-label {
    font-size: 8px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 2px;
    flex-shrink: 0;
}

/* Individual mini card chip */
.pile-mini-card {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Segoe UI', system-ui, sans-serif;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    color: #e0e0e0;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Red suits */
.pile-mini-card.red {
    color: #ff6b6b;
}

/* Cutter highlight on mini card */
.pile-mini-card.mini-cutter {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.4);
    color: #ffd700;
}

.pile-mini-card.mini-cutter.red {
    color: #ffaa00;
}

/* Separator arrow */
.pile-separator {
    color: var(--color-text-secondary, #999);
    font-size: 14px;
    margin: 0 4px;
    opacity: 0.5;
    flex-shrink: 0;
}

/* Deck visual on table */
.table-deck {
    position: absolute;
    right: var(--space-md);
    bottom: var(--space-md); /* 🚀 JOS în loc de centru */
    top: auto;
    transform: none; /* 🚀 Fără translateY */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 3;
}

.deck-stack {
    position: relative;
    width: 44px;
    height: 62px;
}

.deck-card-back {
    position: absolute;
    width: 44px;
    height: 62px;
    aspect-ratio: 5 / 7;
    border-radius: 4px;
    background:
        /* Subtle diamond weave pattern */
        repeating-conic-gradient(
            rgba(255, 255, 255, 0.025) 0% 25%,
            transparent 0% 50%
        ) 0 0 / 5px 5px,
        linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border: 1.5px solid rgba(var(--color-accent-rgb), 0.35);
    border-top: 1.5px solid rgba(var(--color-accent-rgb), 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* 3D stacking depth — each card offsets slightly for physical stack illusion */
.deck-card-back:nth-child(1) { top: 0; left: 0; }
.deck-card-back:nth-child(2) { top: -1.5px; left: 0.5px; }
.deck-card-back:nth-child(3) { top: -3px; left: 1px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 4px rgba(var(--color-accent-rgb), 0.1); }

.deck-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-gold);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.35) 100%);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(var(--color-accent-rgb), 0.15);
    font-variant-numeric: tabular-nums;
    min-width: 1.5em;
    text-align: center;
}

.table-deck.empty {
    opacity: 0.3;
}

.table-message {
    position: relative;
    bottom: 4px;
    left: var(--space-sm);
    /* Mobile First: compact padding */
    padding: var(--space-sm) var(--space-lg);
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 0.88) 0%,
        rgba(var(--color-primary-rgb), 0.94) 100%
    );
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
    border-top: 1px solid rgba(var(--color-accent-rgb), 0.35);
    border-radius: var(--radius-lg);
    color: var(--color-accent);
    font-weight: 700;
    text-align: left;
    /* Mobile First: 320px (12px) → fluid clamp() → 992px+ (14px) */
    font-size: clamp(12px, 2.5vw, 14px);
    /* Text alignment → Bootstrap: .text-center */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 0 12px rgba(var(--color-accent-rgb), 0.1);
    z-index: 1;
    white-space: nowrap;
}

/* ================================================================================================
   10.1 TABLE ENHANCEMENTS - VISUAL & UX IMPROVEMENTS
================================================================================================ */

/* Enhanced 3D Table with Glassmorphism + Specular Highlight */
.table-felt.enhanced-3d {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(var(--color-primary-rgb, 42, 105, 66), 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(var(--color-primary-rgb, 26, 77, 46), 0.25) 0%, transparent 50%),
        linear-gradient(135deg, var(--glass-table-bg) 0%, var(--glass-table-bg-center) 50%, var(--glass-table-bg) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 8px 32px rgba(0, 0, 0, 0.5),
        0 16px 48px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(var(--color-accent-rgb), 0.1);
    backdrop-filter: blur(var(--glass-blur-heavy));
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
}

/* Card Glow States */
.card.collectable {
    box-shadow:
        0 0 20px rgba(var(--color-accent-rgb), 0.5),
        0 0 40px rgba(var(--color-accent-rgb), 0.2),
        0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(var(--color-accent-rgb), 0.8);
    animation: pulse-gold 2.5s ease-in-out infinite;
}

.card.last-played {
    box-shadow:
        0 0 10px rgba(var(--color-accent-rgb), 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(var(--color-accent-rgb), 0.7);
    animation: pulse-gold 2.5s ease-in-out infinite;
}

.card.playable {
    box-shadow:
        0 0 12px rgba(var(--color-accent-rgb), 0.5),
        0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(var(--color-accent-rgb), 0.7);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card.playable:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow:
        0 0 20px rgba(var(--color-accent-rgb), 0.7),
        0 8px 24px rgba(0, 0, 0, 0.4);
}

.card.invalid {
    cursor: not-allowed;
}

/* Turn Indicator Visual */
.turn-indicator {
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.9) 0%, rgba(var(--color-accent-rgb), 0.95) 100%);
    color: var(--color-primary-dark, white);
    padding: 8px 20px;
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), 0.4);
    animation: bounce-in 0.5s ease-out;
    z-index: 10;
}

.turn-indicator::before {
    content: '▲';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    color: rgba(59, 130, 246, 0.9);
    animation: arrow-bounce 1s ease-in-out infinite;
}

.turn-indicator.with-timer {
    padding-right: 50px;
}

.turn-timer {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

/* Enhanced Pot Value Display */
.table-pot.enhanced {
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.2) 0%, rgba(218, 165, 32, 0.3) 100%);
    border: 2px solid rgba(var(--glow-color), 0.5);
    box-shadow:
        0 4px 16px rgba(var(--glow-color), 0.25),
        var(--glow-sm),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
    animation: glowPulseSoft 3s ease-in-out infinite;
}
    

.pot-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-accent);
    margin-left: 4px;
}

.pot-coins {
    display: inline-flex;
    gap: 2px;
    margin-left: 8px;
}

.pot-coin {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 30% 30%, var(--color-accent), var(--color-accent-dark));
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: coin-shine 2s ease-in-out infinite;
}

.pot-coin:nth-child(2) { animation-delay: 0.2s; }
.pot-coin:nth-child(3) { animation-delay: 0.4s; }

/* Floating Points Feedback */
.floating-points {
    position: absolute;
    font-size: 24px;
    font-weight: 900;
    color: var(--color-success, #22c55e);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    animation: float-up 2s ease-out forwards;
    z-index: 100;
}

.floating-points.negative {
    color: var(--color-error, #ef4444);
}

/* Card Throw Animation Enhancement */
.card.throwing {
    animation: card-throw 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 50;
}

@keyframes card-throw {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    30% {
        transform: translateY(-80px) rotate(-5deg) scale(1.1);
    }
    60% {
        transform: translateY(-40px) rotate(5deg) scale(1.05);
    }
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

/* Card Collection Animation */
.card.collecting {
    animation: card-collect 0.8s ease-in forwards;
    z-index: 60;
}

@keyframes card-collect {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translate(var(--collect-x), var(--collect-y)) scale(0.8) rotate(180deg);
        opacity: 0.8;
    }
    100% {
        transform: translate(var(--collect-x), var(--collect-y)) scale(0.3) rotate(360deg);
        opacity: 0;
    }
}

/* Sparkle Effect for Collection */
.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(var(--color-accent-rgb), 1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: sparkle-burst 0.8s ease-out forwards;
    z-index: 70;
}

@keyframes sparkle-burst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--spark-x), var(--spark-y)) scale(0);
        opacity: 0;
    }
}

/* Victory Celebration */
.victory-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(var(--color-accent-rgb), 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 90;
    animation: victory-pulse 0.5s ease-out;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--confetti-color, #ffd700);
    animation: confetti-fall 3s ease-out forwards;
    z-index: 95;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Trick History Display */
.trick-history {
    position: absolute;
    top: 50%;
    right: -200px;
    transform: translateY(-50%);
    width: 180px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: var(--radius-lg);
    padding: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    transition: right 0.3s ease;
    z-index: 20;
}

.trick-history.visible {
    right: 16px;
}

.trick-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    font-size: 11px;
}

.trick-winner {
    color: var(--color-accent);
    font-weight: 700;
}

/* Card Stack Progressive z-index (fallback, JS also sets inline) */
.table-cards .card:nth-child(1) { z-index: 1; }
.table-cards .card:nth-child(2) { z-index: 2; }
.table-cards .card:nth-child(3) { z-index: 3; }
.table-cards .card:nth-child(4) { z-index: 4; }
.table-cards .card:nth-child(5) { z-index: 5; }
.table-cards .card:nth-child(6) { z-index: 6; }
.table-cards .card:nth-child(7) { z-index: 7; }
.table-cards .card:nth-child(8) { z-index: 8; }
.table-cards .card:nth-child(n+9) { z-index: 9; }

/* Hint System */
.hint-indicator {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.95));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    animation: hint-pulse 1.5s ease-in-out infinite;
    cursor: pointer;
    z-index: 10;
}

/* Keyframe Animations */
@keyframes pulse-green {
    0%, 100% {
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.6), 0 0 40px rgba(34, 197, 94, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(34, 197, 94, 0.8), 0 0 60px rgba(34, 197, 94, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    }
}

@keyframes pulse-gold {
    0%, 100% {
        box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.5), 0 2px 8px rgba(0, 0, 0, 0.25);
    }
}

@keyframes reactionFloat {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.3); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -120%) scale(1.5); }
}

@keyframes bounce-in {
    0% {
        transform: translateX(-50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateX(-50%) scale(1.1);
    }
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
}

@keyframes arrow-bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes coin-shine {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.6), 0 0 12px rgba(var(--color-accent-rgb), 0.3);
    }
}

@keyframes float-up {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(1.5);
        opacity: 0;
    }
}

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

@keyframes hint-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
    }
}

/* Valid Moves Only Mode */
.valid-moves-only .card:not(.playable) {
    pointer-events: none;
    opacity: 0.3;
    filter: grayscale(1);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .card.throwing,
    .card.collecting,
    .sparkle,
    .confetti,
    .turn-indicator,
    .floating-points {
        animation: none !important;
        transition: none !important;
    }

    .card.collectable,
    .card.last-played {
        animation: none !important;
    }
}

/* ================================================================================================
   11. GAME CONTROLS
================================================================================================ */
/* .game-controls - REMOVED: Fully handled by Bootstrap .d-flex .flex-wrap .justify-content-center .gap-* .p-* */

.btn-control {
    /* Flexbox layout → Bootstrap: .d-flex .align-items-center .justify-content-center .gap-2 */
    /* Mobile First: compact padding and text */
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    /* ✅ Touch optimization: minimum 44px touch target (iOS HIG) */
    min-height: 44px;
    /* ✅ Touch optimization: faster tap response */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.btn-control::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-control:hover::before {
    width: 300px;
    height: 300px;
}

.btn-control .material-symbols-rounded {
    /* Mobile First: compact icons */
    font-size: 20px;
    position: relative;
    z-index: 1;
}

.btn-control span:not(.material-symbols-rounded) {
    position: relative;
    z-index: 1;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: var(--color-primary-dark);
    box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), 0.5);
}

.btn-primary:active {
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    color: var(--color-text-primary);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* ================================================================================================
   12. CONTEXT PANEL - SIDEBAR
================================================================================================ */
.context-panel {
    /* Bootstrap: .col-auto sets flex: 0 0 auto + width: auto */
    /* Override with flex-basis for fixed width control (Mobile First) */
    flex: 0 0 var(--context-panel-width);
    max-width: var(--context-panel-width);
    /* CRITICAL: Explicit flex layout for scroll to work */
    display: flex !important;
    flex-direction: column !important;
    height: calc(100% - var(--sab, 0px)) !important;
    max-height: calc(100dvh - var(--top-bar-height, 60px) - 112px - var(--sab, 0px)) !important;
    background: linear-gradient(180deg,
        rgba(var(--color-primary-rgb), 0.95) 0%,
        rgba(var(--color-primary-rgb), 0.98) 100%
    );
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(var(--glow-color), 0.1);
    box-shadow: -4px 0 30px rgba(var(--glow-color), 0.06);
    /* Grid → Bootstrap: .col-auto */
    position: relative;
    z-index: var(--z-dropdown);
    transition: transform var(--transition-base);
    /* 3D setup pentru page flip animation */
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Page Flip Animation - ÎNTREGUL PANEL se întoarce ca o filă de carte */
.context-panel.page-flip-in {
    animation: pageFlip 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.context-panel.hidden {
    transform: translateX(100%);
    flex-basis: 0;
    max-width: 0;
    min-width: 0;
    overflow: hidden;
}

.panel-header {
    /* Flexbox layout → Bootstrap: .d-flex .align-items-center .justify-content-between */
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-md); /* Reduced from space-lg */
    border-bottom: 1px solid rgba(var(--glow-color), 0.08);
    box-shadow: 0 4px 20px rgba(var(--glow-color), 0.04);
    position: relative;
}

/* ── Panel Loading Bar ── */
.panel-loading-bar {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2.5px;
    background: linear-gradient(90deg,
        rgba(var(--color-accent-rgb), 0.6),
        rgba(var(--color-accent-rgb), 1),
        rgba(var(--color-accent-rgb), 0.6)
    );
    border-radius: 0 2px 2px 0;
    box-shadow:
        0 0 8px rgba(var(--color-accent-rgb), 0.4),
        0 0 20px rgba(var(--color-accent-rgb), 0.15);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.15s ease;
}

.panel-loading-bar.active {
    opacity: 1;
    animation: panelLoadingSlide 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.panel-loading-bar.fade-out {
    opacity: 0;
    transition: opacity 0.25s ease;
}

@keyframes panelLoadingSlide {
    0% {
        width: 0;
    }
    15% {
        width: 30%;
    }
    50% {
        width: 70%;
    }
    85% {
        width: 92%;
    }
    100% {
        width: 100%;
    }
}

.panel-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-accent);
    text-shadow: var(--glow-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}
.panel-title .panel-title-icon {
    font-size: 16px !important;
    line-height: 1;
    opacity: 0.85;
}

.panel-back {
    /* Back button - matches close button style */
    width: 36px;
    height: 36px;
    /* Flexbox layout → Bootstrap: .d-flex .align-items-center .justify-content-center */
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.panel-back:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(-2px);
}

.panel-back:active {
    transform: translateX(-2px) scale(0.95);
    background: rgba(255, 255, 255, 0.15);
}

.panel-back .material-symbols-rounded {
    font-size: 20px;
    transition: transform var(--transition-base);
}

.panel-back:hover .material-symbols-rounded {
    transform: translateX(-1px);
}

.panel-close {
    /* Compact close button */
    width: 36px; /* Reduced from 44px */
    height: 36px;
    /* Flexbox layout → Bootstrap: .d-flex .align-items-center .justify-content-center */
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
}

.panel-content {
    /* CRITICAL: flex: 1 makes it take remaining space */
    flex: 1 1 auto;
    min-height: 0;
    /* PROFESSIONAL: Force scroll on ALL devices */
    overflow-y: scroll !important;
    overflow-x: hidden;
    /* Mobile First: compact padding */
    padding: clamp(12px, 3vw, 20px);
    /* Smooth scroll for mobile iOS */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Perf: isolate layout from innerHTML changes */
    contain: layout style;
}

/* Page flip effect - nu mai avem nevoie de stagger, panelul întreg se întoarce */

/* PROFESSIONAL SCROLLBAR - Visible on ALL devices */
.panel-content::-webkit-scrollbar {
    /* Mobile First: Always visible, wider scrollbar */
    width: 10px;
    display: block !important;
}

.panel-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.panel-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(var(--color-accent-rgb), 0.6) 0%,
        rgba(var(--color-accent-rgb), 0.5) 100%
    );
    border-radius: var(--radius-full);
    border: 2px solid rgba(var(--color-accent-rgb), 0.3);
    /* Always visible shadow */
    box-shadow: 0 0 6px rgba(var(--color-accent-rgb), 0.4);
}

.panel-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
        rgba(var(--color-accent-rgb), 0.8) 0%,
        rgba(var(--color-accent-rgb), 0.7) 100%
    );
    box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.6);
}

.panel-content::-webkit-scrollbar-thumb:active {
    background: var(--color-accent);
}

/* ================================================================================================
   13. STATUS BAR - Integrated into nav-rail
================================================================================================ */
.status-bar {
    /* Integrated as first row in nav-rail */
    width: 100%;
    height: 36px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 4px var(--space-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: nowrap !important;
    background: none !important;
    backdrop-filter: none !important;
    border-top: none !important;
    z-index: auto !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.status-bar::-webkit-scrollbar {
    display: none;
}

.status-item {
    /* Flexbox layout → Bootstrap: .d-flex .align-items-center .gap-1 .gap-md-2 */
    /* Mobile First: compact text */
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.status-item .material-symbols-rounded {
    /* Mobile First: compact icons */
    font-size: 18px;
    color: var(--color-accent);
    flex-shrink: 0;
}

/* === USER AVATAR IN STATUS BAR === */
.status-avatar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
    flex-shrink: 0;
}
.user-avatar-badge {
    cursor: pointer;
    transition: opacity 0.2s;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb), 0.1);
    border: 1px solid rgba(var(--color-accent-rgb), 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.user-avatar-badge:hover { opacity: 0.8; }
.user-avatar-badge .material-symbols-rounded {
    font-size: 16px !important;
    color: var(--color-text-secondary);
}

/* === BALANCE BADGE === */
.balance-badge {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 3px 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.balance-badge:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Status player info removed - no room in status bar */

.balance-badge .material-symbols-rounded {
    font-size: 15px !important;
}

.balance-value {
    font-weight: 800;
    font-family: var(--font-display);
    font-size: 12px;
    min-width: 20px;
    text-align: center;
}

.balance-badge.balance-positive {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.1);
}

.balance-badge.balance-positive .balance-value {
    color: #22c55e;
}

.balance-badge.balance-positive .material-symbols-rounded {
    color: #22c55e !important;
}

.balance-badge.balance-negative {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
}

.balance-badge.balance-negative .balance-value {
    color: #ef4444;
}

.balance-badge.balance-negative .material-symbols-rounded {
    color: #ef4444 !important;
}

.balance-badge.balance-zero .balance-value {
    color: var(--color-text-secondary);
}

.balance-badge.balance-zero .material-symbols-rounded {
    color: var(--color-text-secondary) !important;
}

/* Balance change animation */
@keyframes balancePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.balance-badge.balance-changed {
    animation: balancePulse 0.5s ease;
}

.score-display {
    /* gap handled by Bootstrap: .gap-3 */
}

.score-label {
    color: var(--color-text-tertiary);
    /* Mobile First: compact text */
    font-size: 9px;
    font-weight: 600;
}

.score-value {
    /* Mobile First: compact text */
    font-size: 13px;
    font-weight: 800;
    color: var(--color-accent);
    font-family: var(--font-display);
    text-shadow: 0 0 8px rgba(var(--glow-color), 0.3);
    font-variant-numeric: tabular-nums;
}

.score-separator {
    color: var(--color-text-disabled);
    font-size: 12px;
}

.status-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* === XP BAR (integrated in status-bar) === */
.xp-bar-container {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-accent);
    max-width: 140px;
}

.xp-bar-container #levelBadge {
    font-size: 10px;
    font-weight: 800;
    color: var(--color-accent);
    flex-shrink: 0;
}

.xp-progress-track {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.xp-progress-track > div {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-bright, var(--color-accent)));
    border-radius: 2px;
    transition: width 0.5s ease;
}

.xp-bar-container #xpLabel {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.status-btn {
    /* Compact size for integrated nav-rail */
    width: 32px;
    height: 32px;
    /* Flexbox layout → Bootstrap: .d-flex .align-items-center .justify-content-center */
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(var(--glow-color), 0.1);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.2),
        var(--glow-xs),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.status-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.status-btn:hover::before {
    width: 80px;
    height: 80px;
}

.status-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--glow-border);
    color: var(--color-text-primary);
    transform: translateY(-2px);
    box-shadow: 
        0 4px 12px rgba(255, 255, 255, 0.15),
        var(--glow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.status-btn:active {
    transform: translateY(0);
    box-shadow: 
        0 2px 8px rgba(255, 255, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.status-btn .material-symbols-rounded {
    font-size: 16px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.status-btn:hover .material-symbols-rounded {
    transform: scale(1.15);
}

/* === HINT COUNT BADGE === */
.hint-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 14px;
    height: 14px;
    font-size: 8px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
    color: #fff;
    background: var(--color-accent);
    border-radius: 7px;
    padding: 0 3px;
    z-index: 1;
}

/* ================================================================================================
   14. ACHIEVEMENTS PANEL - Premium Trophy System
================================================================================================ */

/* Achievements Header */
.achievements-header {
    position: relative;
    padding: 28px 24px;
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.25) 0%,
        rgba(251, 191, 36, 0.25) 100%
    );
    border-radius: 16px;
    border: 2px solid rgba(var(--color-accent-rgb), 0.4);
    overflow: hidden;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 
        0 8px 24px rgba(var(--color-accent-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.achievements-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--color-accent-rgb), 0.15),
        transparent
    );
    background-size: 200% 100%;
    animation: shimmerGold 3s linear infinite;
}

.achievements-header-content {
    position: relative;
    z-index: 1;
}

.achievements-trophy-icon {
    font-size: 72px;
    line-height: 1;
    margin-bottom: 12px;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(var(--color-accent-rgb), 0.5));
}

.achievements-title {
    color: var(--color-accent);
    margin: 0 0 12px 0;
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 
        0 2px 8px rgba(var(--color-accent-rgb), 0.5),
        0 0 20px rgba(var(--color-accent-rgb), 0.3);
}

.achievements-progress-badge {
    display: inline-block;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    border: 2px solid var(--color-accent);
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.achievements-progress-value {
    font-size: 36px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 4px;
}

.achievements-progress-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Achievement Cards Grid */
.achievements-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.achievement-card {
    position: relative;
    padding: 18px;
    border-radius: 16px;
    cursor: pointer;
    backdrop-filter: blur(12px);
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.achievement-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.01) 100%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
}

.achievement-card:hover {
    transform: translateY(-5px) scale(1.02);
}

.achievement-card:hover::before {
    opacity: 1;
}

/* Unlocked Achievement */
.achievement-card-unlocked {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.15) 0%,
        rgba(251, 191, 36, 0.1) 100%
    );
    border: 2px solid rgba(var(--color-accent-rgb), 0.4);
    animation: float 3s ease-in-out infinite;
    box-shadow: 
        0 4px 16px rgba(var(--color-accent-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.achievement-card-unlocked:hover {
    box-shadow: 
        0 12px 32px rgba(var(--color-accent-rgb), 0.4),
        0 0 40px rgba(var(--color-accent-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.achievement-card-unlocked::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    height: 4px;
    background: linear-gradient(90deg,
        transparent,
        var(--color-accent),
        transparent
    );
    background-size: 200% 100%;
    animation: shine 3s linear infinite;
}

/* Locked Achievement */
.achievement-card-locked {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.01) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    filter: grayscale(0.8);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.achievement-card-locked:hover {
    filter: grayscale(0.6);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Achievement Content Layout */
.achievement-content {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Achievement Icon */
.achievement-icon-wrapper {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.achievement-card-unlocked .achievement-icon-wrapper {
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        #f59e0b 100%
    );
    box-shadow: 
        0 8px 24px rgba(var(--color-accent-rgb), 0.5),
        inset 0 -2px 8px rgba(0, 0, 0, 0.2),
        inset 0 2px 8px rgba(255, 255, 255, 0.3);
    animation: glowPulse 2s ease-in-out infinite;
}

.achievement-card-locked .achievement-icon-wrapper {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.achievement-card:hover .achievement-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
}

/* Lock Overlay */
.achievement-lock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    backdrop-filter: blur(4px);
}

/* Achievement Info */
.achievement-info {
    flex: 1;
    min-width: 0;
}

.achievement-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.achievement-name {
    font-size: 17px;
    font-weight: 900;
    color: white;
    margin: 0;
    letter-spacing: 0.3px;
}

.achievement-card-unlocked .achievement-name {
    color: var(--color-accent);
    text-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.4);
}

/* Rarity Badge */
.achievement-rarity-badge {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: 1px solid;
    transition: all 0.3s ease;
}

.achievement-rarity-common {
    background: rgba(156, 163, 175, 0.2);
    border-color: rgba(156, 163, 175, 0.5);
    color: #9ca3af;
}

.achievement-rarity-rare {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
    color: #3b82f6;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}

.achievement-rarity-epic {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.5);
    color: #a855f7;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
}

.achievement-rarity-legendary {
    background: rgba(var(--color-accent-rgb), 0.2);
    border-color: rgba(var(--color-accent-rgb), 0.5);
    color: var(--color-accent);
    box-shadow: 0 0 16px rgba(var(--color-accent-rgb), 0.4);
    animation: glowPulse 2s ease-in-out infinite;
}

.achievement-card:hover .achievement-rarity-badge {
    transform: scale(1.05);
}

/* Achievement Description */
.achievement-description {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 10px 0;
    line-height: 1.4;
}

/* Progress Bar Container */
.achievement-progress-container {
    margin-top: 10px;
}

.achievement-progress-bar {
    position: relative;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.achievement-progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--color-info) 0%,
        var(--color-accent) 100%
    );
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 0 8px rgba(59, 130, 246, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.achievement-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.achievement-progress-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 6px;
    font-weight: 700;
}

/* Checkmark for Unlocked */
.achievement-checkmark {
    font-size: 36px;
    color: var(--color-success);
    flex-shrink: 0;
    animation: checkmarkPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    filter: drop-shadow(0 2px 8px rgba(74, 222, 128, 0.6));
}

@keyframes checkmarkPop {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Glow Pulse Animation for Legendary */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 
            0 8px 24px rgba(var(--color-accent-rgb), 0.5),
            inset 0 -2px 8px rgba(0, 0, 0, 0.2),
            inset 0 2px 8px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 
            0 8px 32px rgba(var(--color-accent-rgb), 0.7),
            0 0 40px rgba(var(--color-accent-rgb), 0.5),
            inset 0 -2px 8px rgba(0, 0, 0, 0.2),
            inset 0 2px 8px rgba(255, 255, 255, 0.4);
    }
}

/* Responsive Achievements Panel */
@media (max-width: 768px) {
    .achievements-header {
        padding: 20px 16px;
    }

    .achievements-trophy-icon {
        font-size: 56px;
    }

    .achievements-title {
        font-size: 20px;
    }

    .achievements-progress-value {
        font-size: 28px;
    }

    .achievement-card {
        padding: 14px;
    }

    .achievement-content {
        gap: 14px;
    }

    .achievement-icon-wrapper {
        width: 56px;
        height: 56px;
        font-size: 32px;
        border-radius: 14px;
    }

    .achievement-name {
        font-size: 15px;
    }

    .achievement-description {
        font-size: 12px;
    }

    .achievement-checkmark {
        font-size: 28px;
    }
}

/* ========================================================================
   MULTIPLAYER LOBBY — Theme-aware, Responsive
   ======================================================================== */

/* Lobby Container */
.mp-lobby {
    padding: clamp(12px, 3vw, 20px);
    background: linear-gradient(135deg, 
        rgba(var(--color-primary-rgb), 0.15) 0%, 
        rgba(var(--color-accent-rgb), 0.04) 100%
    );
    border-radius: clamp(10px, 2vw, 16px);
    border: 1px solid rgba(var(--color-accent-rgb), 0.15);
    position: relative;
    overflow: hidden;
}

.mp-lobby::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(var(--color-accent-rgb), 0.4), 
        transparent
    );
}

/* Lobby Header */
.mp-lobby-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(12px, 2.5vw, 18px);
    flex-wrap: wrap;
    gap: 10px;
}

.mp-lobby-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mp-lobby-icon {
    width: clamp(36px, 7vw, 44px);
    height: clamp(36px, 7vw, 44px);
    border-radius: clamp(8px, 1.5vw, 12px);
    background: linear-gradient(135deg, 
        rgba(var(--color-accent-rgb), 0.15), 
        rgba(var(--color-primary-rgb), 0.3)
    );
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 3.5vw, 22px);
    color: var(--color-accent);
    flex-shrink: 0;
}

.mp-lobby-title {
    color: var(--color-accent);
    margin: 0;
    font-size: clamp(14px, 3vw, 18px);
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.mp-lobby-status {
    font-size: clamp(10px, 2vw, 12px);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.mp-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.mp-status-dot.connected {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.mp-status-dot.connecting {
    background: #f59e0b;
    animation: mp-pulse 1.5s ease-in-out infinite;
}

.mp-status-dot.disconnected {
    background: #ef4444;
}

.mp-status-dot.offline {
    background: #6b7280;
}

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

/* Create Room Button */
.mp-create-btn {
    min-height: clamp(36px, 7vw, 42px);
    padding: clamp(6px, 1.2vw, 8px) clamp(12px, 2.5vw, 18px);
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    border: none;
    border-radius: clamp(8px, 1.5vw, 10px);
    color: var(--color-bg-primary);
    font-weight: 700;
    font-size: clamp(11px, 2.2vw, 13px);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.25s ease;
    white-space: nowrap;
    touch-action: manipulation;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.2);
}

.mp-create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--color-accent-rgb), 0.35);
}

.mp-create-btn:active {
    transform: translateY(0);
}

/* Room List Container */
/* Filter Bar (context panel lobby) */
.mp-filter-bar {
    padding: 0;
}
.mp-filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mp-filter-chips {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
}
.mp-filter-chips::-webkit-scrollbar { display: none; }
.mp-chip {
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: inherit;
    touch-action: manipulation;
}
.mp-chip:hover {
    border-color: rgba(255,215,0,0.3);
    color: var(--color-text-primary, #fff);
}
.mp-chip.active {
    background: var(--color-accent, #ffd700);
    color: #000;
    border-color: var(--color-accent, #ffd700);
}
.mp-chip-sep {
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.mp-sort-select {
    flex-shrink: 0;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 20px;
}
.mp-sort-select option {
    background: var(--color-surface, #1a1a2e);
    color: var(--color-text-primary, #fff);
}

/* Light theme overrides */
[data-theme="light"] .mp-chip {
    border-color: rgba(0,0,0,0.12);
    color: var(--color-text-secondary);
}
[data-theme="light"] .mp-chip:hover {
    border-color: rgba(0,0,0,0.25);
}
[data-theme="light"] .mp-chip.active {
    background: var(--color-accent, #b8860b);
    color: #fff;
    border-color: var(--color-accent, #b8860b);
}
[data-theme="light"] .mp-chip-sep {
    background: rgba(0,0,0,0.1);
}
[data-theme="light"] .mp-sort-select {
    border-color: rgba(0,0,0,0.12);
    background-color: rgba(0,0,0,0.03);
    color: var(--color-text-secondary);
}

.mp-room-list {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.5vw, 10px);
}

/* Empty State */
.mp-empty-state {
    padding: clamp(24px, 5vw, 40px) clamp(16px, 3vw, 20px);
    text-align: center;
    color: var(--color-text-secondary);
}

.mp-empty-icon {
    font-size: clamp(40px, 8vw, 56px);
    display: block;
    margin-bottom: clamp(8px, 2vw, 14px);
    opacity: 0.25;
    filter: grayscale(0.5);
}

.mp-empty-text {
    font-size: clamp(12px, 2.5vw, 14px);
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.5);
}

.mp-empty-cta {
    font-size: clamp(11px, 2.2vw, 13px);
    color: var(--color-accent);
    font-weight: 600;
}

/* Room Card */
.mp-room-card {
    padding: clamp(10px, 2vw, 14px);
    background: rgba(var(--color-primary-rgb), 0.12);
    border: 1px solid rgba(var(--color-accent-rgb), 0.1);
    border-radius: clamp(8px, 1.5vw, 12px);
    transition: all 0.25s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
}

.mp-room-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    border-radius: 0 3px 3px 0;
    transition: background 0.25s ease;
}

.mp-room-card.waiting::before {
    background: #22c55e;
}

.mp-room-card.playing::before {
    background: #f59e0b;
}

.mp-room-card.full::before {
    background: #6b7280;
}

.mp-room-card.joinable {
    cursor: pointer;
}

.mp-room-card.joinable:hover {
    background: rgba(var(--color-primary-rgb), 0.22);
    border-color: rgba(var(--color-accent-rgb), 0.25);
    transform: translateX(3px);
}

.mp-room-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: clamp(6px, 1.5vw, 10px);
}

.mp-room-name {
    font-size: clamp(13px, 2.5vw, 15px);
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.mp-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: clamp(8px, 1.6vw, 10px);
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.mp-badge.ranked {
    background: rgba(var(--color-accent-rgb), 0.15);
    color: var(--color-accent);
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
}

.mp-badge.casual {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Room Info Row */
.mp-room-info {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.5vw, 12px);
    flex-wrap: wrap;
}

.mp-room-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: clamp(10px, 2vw, 12px);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.mp-room-stat .material-symbols-rounded {
    font-size: clamp(14px, 2.5vw, 16px);
}

.mp-room-stat-value {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.mp-room-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: clamp(10px, 2vw, 12px);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    margin-left: auto;
}

.mp-room-state.waiting {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.mp-room-state.playing {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

/* Join Button */
.mp-join-btn {
    min-height: clamp(32px, 6vw, 38px);
    padding: clamp(4px, 1vw, 6px) clamp(12px, 2.5vw, 18px);
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    border: none;
    border-radius: clamp(6px, 1.2vw, 8px);
    color: var(--color-bg-primary);
    font-weight: 700;
    font-size: clamp(11px, 2vw, 13px);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(var(--color-accent-rgb), 0.2);
}

.mp-join-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.35);
}

.mp-room-locked {
    padding: clamp(4px, 1vw, 6px) clamp(10px, 2vw, 14px);
    background: rgba(255, 255, 255, 0.04);
    border-radius: clamp(6px, 1.2vw, 8px);
    font-size: clamp(10px, 2vw, 12px);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Room Bottom Row (info + button) */
.mp-room-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Player Dots */
.mp-player-dots {
    display: flex;
    align-items: center;
    gap: 3px;
}

.mp-player-dot {
    width: clamp(8px, 1.6vw, 10px);
    height: clamp(8px, 1.6vw, 10px);
    border-radius: 50%;
    border: 1.5px solid rgba(var(--color-accent-rgb), 0.3);
    transition: all 0.2s;
}

.mp-player-dot.filled {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 4px rgba(var(--color-accent-rgb), 0.4);
}

.mp-player-dot.empty {
    background: transparent;
}

/* ── Lobby Header (connection + create + search) ── */
.mp-lobby-header {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.5vw, 8px);
}

.mp-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mp-status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(11px, 2.2vw, 13px);
    color: var(--color-text-secondary);
}

.mp-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.3s, box-shadow 0.3s;
}

.mp-status-dot.connected {
    background: var(--color-success, #22c55e);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.mp-status-dot.disconnected {
    background: var(--color-error, #ef4444);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

.mp-status-text {
    color: var(--color-text-secondary);
    font-size: clamp(10px, 2vw, 12px);
}

.mp-create-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: clamp(6px, 1.2vw, 8px) clamp(10px, 2vw, 14px);
    background: linear-gradient(135deg, var(--color-success, #22c55e) 0%, #16a34a 100%);
    border: none;
    border-radius: clamp(6px, 1.2vw, 8px);
    color: white;
    font-weight: 700;
    font-size: clamp(11px, 2.2vw, 13px);
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
}

.mp-create-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}

/* ── Search ── */
.mp-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.mp-search-icon {
    position: absolute;
    left: 10px;
    font-size: 18px;
    color: var(--color-text-secondary);
    pointer-events: none;
    opacity: 0.5;
}

.mp-room-search {
    width: 100%;
    padding: clamp(7px, 1.5vw, 9px) 12px clamp(7px, 1.5vw, 9px) 34px;
    background: rgba(var(--color-primary-rgb), 0.08);
    border: 1px solid rgba(var(--color-primary-rgb), 0.15);
    border-radius: clamp(6px, 1.2vw, 8px);
    color: var(--color-text-primary);
    font-size: clamp(11px, 2.2vw, 13px);
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.mp-room-search::placeholder {
    color: var(--color-text-disabled, rgba(255, 255, 255, 0.3));
}

.mp-room-search:focus {
    border-color: rgba(var(--color-accent-rgb), 0.35);
    background: rgba(var(--color-primary-rgb), 0.12);
}

.mp-search-clear {
    position: absolute;
    right: 6px;
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(var(--color-primary-rgb), 0.15);
    border-radius: 50%;
    color: var(--color-text-secondary);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    touch-action: manipulation;
}

.mp-search-clear:hover {
    background: rgba(var(--color-primary-rgb), 0.25);
}

/* ── Compact Room Cards (mpc-*) ── */
.mpc-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(6px, 1.5vw, 10px);
    padding: clamp(8px, 1.6vw, 10px) clamp(10px, 2vw, 12px);
    background: rgba(var(--color-primary-rgb), 0.10);
    border: 1px solid rgba(var(--color-accent-rgb), 0.08);
    border-radius: clamp(6px, 1.2vw, 10px);
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: background 0.2s, border-color 0.2s;
}

.mpc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    border-radius: 0 3px 3px 0;
    transition: background 0.25s;
}

.mpc-card.waiting::before { background: var(--color-success, #22c55e); }
.mpc-card.playing::before { background: #f59e0b; }
.mpc-card.full::before    { background: #6b7280; }

.mpc-card.clickable {
    cursor: pointer;
}

.mpc-card.clickable:hover {
    background: rgba(var(--color-primary-rgb), 0.20);
    border-color: rgba(var(--color-accent-rgb), 0.20);
}

.mpc-card.clickable:active {
    transform: scale(0.98);
}

.mpc-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mpc-name {
    font-size: clamp(11px, 2.3vw, 13px);
    font-weight: 700;
    color: var(--color-text-primary, white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpc-meta {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1vw, 6px);
    flex-wrap: wrap;
}

.mpc-dots {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.mpc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--color-accent-rgb), 0.25);
    background: transparent;
    transition: all 0.2s;
}

.mpc-dot.on {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 3px rgba(var(--color-accent-rgb), 0.4);
}

.mpc-chip {
    font-size: clamp(9px, 1.8vw, 10px);
    color: var(--color-text-secondary);
    white-space: nowrap;
    line-height: 1;
}

.mpc-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.mpc-action-btn {
    padding: clamp(5px, 1vw, 6px) clamp(10px, 2vw, 14px);
    border: none;
    border-radius: clamp(5px, 1vw, 7px);
    font-weight: 700;
    font-size: clamp(10px, 2vw, 12px);
    cursor: pointer;
    transition: all 0.2s;
    touch-action: manipulation;
    white-space: nowrap;
}

.mpc-action-btn.join {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark, #b8860b) 100%);
    color: var(--color-bg-primary, #0a0a0a);
    box-shadow: 0 2px 6px rgba(var(--color-accent-rgb), 0.25);
}

.mpc-action-btn.join:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(var(--color-accent-rgb), 0.35);
}

.mpc-action-btn.spectate {
    background: rgba(var(--color-primary-rgb), 0.10);
    color: var(--color-text-secondary);
    border: 1px solid rgba(var(--color-primary-rgb), 0.18);
}

.mpc-action-btn.spectate:hover {
    background: rgba(var(--color-primary-rgb), 0.20);
}

.mpc-status-label {
    font-size: clamp(9px, 1.8vw, 11px);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 5px;
    white-space: nowrap;
}

.mpc-status-label.playing {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.mpc-status-label.full {
    color: #6b7280;
    background: rgba(107, 114, 128, 0.1);
}

/* ══ Lobby Card — Table-style vertical layout ══ */
/* ── Room Card (glassmorphism) ── */
.lobby-card {
    display: flex; flex-direction: column; gap: clamp(4px, 0.8vw, 6px);
    padding: clamp(7px, 1.4vw, 10px); padding-left: clamp(11px, 2vw, 14px);
    background: var(--glass-bg-card, rgba(255,255,255,0.06));
    backdrop-filter: blur(var(--glass-blur-light, 8px));
    -webkit-backdrop-filter: blur(var(--glass-blur-light, 8px));
    border: 1px solid var(--glass-border-medium, rgba(255,255,255,0.1));
    border-radius: clamp(6px, 1.2vw, 10px);
    position: relative; overflow: hidden; cursor: default;
    transition: all 0.25s ease;
}
.lobby-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
    border-radius: 3px 0 0 3px;
}
.lobby-card.lc-waiting::before { background: var(--color-success, #22c55e); }
.lobby-card.lc-playing::before { background: #f59e0b; }
.lobby-card.lc-full::before { background: #6b7280; }
.lobby-card.lc-clickable { cursor: pointer; }
.lobby-card.lc-clickable:hover {
    background: rgba(var(--color-primary-rgb), 0.12);
    border-color: rgba(var(--color-accent-rgb), 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.lobby-card.lc-clickable:active { transform: translateY(0); }

.lobby-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lobby-card-host { display: flex; align-items: center; gap: clamp(5px, 1vw, 6px); min-width: 0; flex: 1; }
.lobby-card-avatar {
    width: clamp(24px, 4vw, 28px); height: clamp(24px, 4vw, 28px);
    border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.15);
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: clamp(11px, 2vw, 13px); color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); line-height: 1;
}
.lc-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.lobby-card-info { min-width: 0; flex: 1; }
.lobby-card-name { font-size: clamp(11px, 2.2vw, 12px); font-weight: 700; color: var(--color-text-primary, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.lobby-card-room { font-size: clamp(10px, 2vw, 11px); color: var(--color-text-tertiary, var(--color-text-secondary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby-card-room .lc-lock { font-size: 10px; }
.lc-pts { margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--color-accent); opacity: 0.85; }
.lc-rated { color: #f59e0b; }
.lobby-card-action { flex-shrink: 0; }

.lc-badge { font-size: clamp(8px, 1.6vw, 9px); font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 4px; vertical-align: middle; white-space: nowrap; letter-spacing: 0.02em; }
.lc-badge-open { background: rgba(34,197,94,0.15); color: #22c55e; }
.lc-badge-playing { background: rgba(245,158,11,0.15); color: #f59e0b; }
.lc-badge-full { background: rgba(107,114,128,0.15); color: #9ca3af; }

.lobby-card-meta { display: flex; align-items: center; gap: clamp(4px, 0.8vw, 6px); flex-wrap: wrap; }
.lc-dots { display: flex; align-items: center; gap: 3px; }
.lc-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--color-text-disabled, rgba(255,255,255,0.2)); background: transparent; transition: all 0.2s; }
.lc-dot.on { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 4px rgba(var(--color-accent-rgb), 0.3); }
.lc-chip { font-size: clamp(9px, 1.8vw, 10px); font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--glass-bg-medium, rgba(255,255,255,0.06)); color: var(--color-text-secondary); white-space: nowrap; }

.lc-action-btn { padding: clamp(4px, 0.8vw, 6px) clamp(8px, 1.6vw, 12px); border-radius: clamp(5px, 0.8vw, 7px); font-size: clamp(9px, 1.8vw, 11px); font-weight: 700; border: none; cursor: pointer; touch-action: manipulation; transition: all 0.2s; white-space: nowrap; }
.lc-action-btn.lc-join { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark, #b8860b)); color: var(--color-bg-primary, #000); }
.lc-action-btn.lc-join:hover { box-shadow: 0 2px 10px rgba(var(--color-accent-rgb), 0.3); }
.lc-action-btn.lc-spectate { background: rgba(255,255,255,0.06); color: var(--color-text-secondary); border: 1px solid var(--glass-border-medium, rgba(255,255,255,0.1)); }
.lc-action-btn.lc-spectate:hover { background: rgba(255,255,255,0.1); }
.lc-status-label { font-size: clamp(10px, 2vw, 11px); font-weight: 600; color: var(--color-text-disabled); padding: clamp(5px, 1vw, 7px) clamp(8px, 1.5vw, 10px); }

/* Lobby Pagination */
.lobby-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 0; }
.lobby-page-btn { min-width: 32px; height: 32px; border: 1px solid var(--glass-border-medium, rgba(255,255,255,0.1)); border-radius: 8px; background: var(--glass-bg-subtle, rgba(255,255,255,0.04)); color: var(--color-text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.lobby-page-btn:hover:not([disabled]) { background: rgba(var(--color-accent-rgb), 0.12); border-color: rgba(var(--color-accent-rgb), 0.2); }
.lobby-page-btn.active { background: rgba(var(--color-accent-rgb), 0.2); border-color: rgba(var(--color-accent-rgb), 0.3); color: var(--color-accent); }
.lobby-page-btn[disabled] { opacity: 0.3; cursor: default; }

/* Pull-to-refresh indicator */
.lobby-pull-indicator { height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: height 0.15s, opacity 0.15s; opacity: 0; color: var(--color-text-secondary); }
.lobby-pull-indicator.ready { color: var(--color-accent); }
.lobby-pull-indicator.refreshing .material-symbols-rounded { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Light theme overrides */
[data-theme="light"] .lobby-card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); backdrop-filter: none; }
[data-theme="light"] .lobby-card.lc-clickable:hover { background: rgba(0,0,0,0.06); }
[data-theme="light"] .lobby-card-name { color: #1e293b; }
[data-theme="light"] .lc-action-btn.lc-join { color: #fff; }
[data-theme="light"] .lobby-page-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); color: #475569; }
[data-theme="light"] .lobby-page-btn.active { background: rgba(var(--color-accent-rgb), 0.15); color: var(--color-accent); }
[data-theme="light"] .lobby-stats-bar { background: rgba(var(--color-accent-rgb), 0.06); border-color: rgba(var(--color-accent-rgb), 0.1); }
[data-theme="light"] .lobby-stat { color: #666; }
[data-theme="light"] .lobby-stat strong { color: #333; }
[data-theme="light"] .lobby-ai-card { background: rgba(var(--color-accent-rgb), 0.06); border-color: rgba(var(--color-accent-rgb), 0.1); }
[data-theme="light"] .lobby-ai-text strong { color: #333; }
[data-theme="light"] .lobby-ai-stats strong { color: #333; }
[data-theme="light"] .lobby-card { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.08); }

/* ── Other Rooms (when inside a room) ── */
.mpc-other-header {
    font-size: clamp(11px, 2.2vw, 13px);
    font-weight: 700;
    color: var(--color-text-secondary);
    padding: clamp(8px, 1.5vw, 10px) 0 clamp(4px, 1vw, 6px);
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.12);
    margin-top: clamp(4px, 1vw, 6px);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Pagination ── */
.mp-room-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: clamp(4px, 1vw, 6px) 0;
}

.mpp-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid rgba(var(--color-primary-rgb), 0.15);
    border-radius: 6px;
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-text-secondary);
    font-size: clamp(11px, 2.2vw, 12px);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

.mpp-btn:hover:not(.disabled):not(.active) {
    background: rgba(var(--color-primary-rgb), 0.18);
    border-color: rgba(var(--color-accent-rgb), 0.2);
}

.mpp-btn.active {
    background: rgba(var(--color-accent-rgb), 0.2);
    color: var(--color-accent);
    border-color: rgba(var(--color-accent-rgb), 0.35);
}

.mpp-btn.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.mpp-ellipsis {
    color: var(--color-text-secondary);
    font-size: 12px;
    padding: 0 2px;
    opacity: 0.4;
}

.mpp-info {
    margin-left: 8px;
    font-size: clamp(9px, 1.8vw, 11px);
    color: var(--color-text-secondary);
    opacity: 0.6;
}

/* ── Room View (Waiting in Room) ── */

.mp-room-view {
    padding: clamp(12px, 2.5vw, 18px);
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 0.15) 0%,
        rgba(var(--color-accent-rgb), 0.05) 100%
    );
    border: 1px solid rgba(var(--color-accent-rgb), 0.15);
    border-radius: clamp(10px, 2vw, 14px);
    position: relative;
}

.mp-room-view-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: clamp(12px, 2.5vw, 16px);
    gap: 8px;
}

.mp-room-view-title {
    font-size: clamp(15px, 3vw, 18px);
    font-weight: 800;
    color: white;
    margin: 0;
    letter-spacing: 0.3px;
}

.mp-room-view-meta {
    font-size: clamp(10px, 2vw, 12px);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.mp-leave-btn {
    min-height: 32px;
    padding: 4px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    color: #ef4444;
    font-weight: 600;
    font-size: clamp(10px, 2vw, 12px);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    touch-action: manipulation;
    flex-shrink: 0;
}

.mp-leave-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

/* Player Left Alert */
.mp-alert {
    padding: clamp(8px, 2vw, 12px);
    margin-bottom: clamp(10px, 2vw, 14px);
    background: rgba(var(--color-accent-rgb), 0.08);
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    border-radius: clamp(8px, 1.5vw, 10px);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(11px, 2.2vw, 13px);
    color: var(--color-accent);
    font-weight: 600;
}

/* Player Slots */
.mp-player-list {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.2vw, 8px);
    margin-bottom: clamp(14px, 2.5vw, 18px);
}

.mp-player-slot {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 12px);
    padding: clamp(8px, 1.5vw, 12px);
    background: rgba(var(--color-primary-rgb), 0.1);
    border: 1px solid rgba(var(--color-accent-rgb), 0.08);
    border-radius: clamp(8px, 1.5vw, 10px);
    transition: all 0.2s;
}

.mp-player-slot.me {
    background: rgba(var(--color-accent-rgb), 0.06);
    border-color: rgba(var(--color-accent-rgb), 0.18);
}

.mp-player-slot.ready {
    border-color: rgba(34, 197, 94, 0.3);
}

.mp-player-avatar {
    width: clamp(32px, 6vw, 40px);
    height: clamp(32px, 6vw, 40px);
    border-radius: 50%;
    background: linear-gradient(135deg, 
        rgba(var(--color-primary-rgb), 0.4), 
        rgba(var(--color-accent-rgb), 0.15)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(14px, 2.5vw, 18px);
    flex-shrink: 0;
    overflow: hidden;
    transition: border-color 0.2s;
}

.mp-player-slot.ready .mp-player-avatar {
    border: 2px solid #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.2);
}

.mp-player-slot:not(.ready) .mp-player-avatar {
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.mp-player-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.mp-player-name {
    font-size: clamp(12px, 2.5vw, 14px);
    font-weight: 700;
    color: white;
}

.mp-player-host-badge {
    font-size: clamp(9px, 1.8vw, 11px);
    color: var(--color-accent);
    margin-left: 4px;
    font-weight: 600;
}

.mp-player-rating {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 6px;
    letter-spacing: 0.3px;
    cursor: help;
}

.mp-rating-good {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.mp-rating-warn {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.mp-rating-bad {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.mp-player-ready-status {
    font-size: clamp(10px, 2vw, 12px);
    font-weight: 700;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.mp-player-ready-status.ready {
    color: #22c55e;
}

.mp-player-ready-status.waiting {
    color: #f59e0b;
}

/* Empty Slot */
.mp-player-slot.empty-slot {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.08);
    background: transparent;
    justify-content: center;
}

.mp-empty-slot-text {
    font-size: clamp(11px, 2.2vw, 13px);
    color: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Ready Button */
.mp-ready-btn {
    width: 100%;
    min-height: clamp(44px, 8vw, 50px);
    padding: clamp(10px, 2vw, 14px);
    border: none;
    border-radius: clamp(8px, 1.5vw, 12px);
    color: white;
    font-weight: 800;
    font-size: clamp(13px, 2.8vw, 16px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
    touch-action: manipulation;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.mp-ready-btn.not-ready {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}

.mp-ready-btn.not-ready:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(34, 197, 94, 0.4);
}

.mp-ready-btn.is-ready {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.mp-ready-btn.is-ready:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(239, 68, 68, 0.4);
}

.mp-starting-msg {
    text-align: center;
    margin-top: clamp(8px, 1.5vw, 12px);
    font-size: clamp(12px, 2.5vw, 14px);
    color: #22c55e;
    font-weight: 700;
    animation: mp-pulse 1s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Login Required State */
.mp-login-required {
    padding: clamp(24px, 5vw, 36px) clamp(16px, 3vw, 20px);
    text-align: center;
}

.mp-login-icon {
    font-size: clamp(36px, 7vw, 48px);
    display: block;
    margin-bottom: 12px;
    opacity: 0.4;
}

.mp-login-text {
    font-size: clamp(12px, 2.5vw, 14px);
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.mp-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    color: var(--color-bg-primary);
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    touch-action: manipulation;
}

.mp-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.3);
}

/* Responsive adjustments */
@media (max-width: 400px) {
    .mp-room-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .mp-room-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .mp-join-btn {
        justify-content: center;
        width: 100%;
    }

    .mp-lobby-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .mp-create-btn {
        justify-content: center;
        width: 100%;
    }
    
    .mp-room-view-header {
        flex-direction: column;
    }
    
    .mp-leave-btn {
        align-self: flex-end;
    }
}

/* Achievement Unlock Celebration */
.achievement-unlock-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 90%;
    max-width: 420px;
    padding: 32px 28px;
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.25) 0%,
        rgba(251, 191, 36, 0.25) 100%
    );
    border: 3px solid var(--color-accent);
    border-radius: 20px;
    z-index: 10000;
    opacity: 0;
    backdrop-filter: blur(20px);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 0 80px rgba(var(--color-accent-rgb), 0.6),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
    text-align: center;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.achievement-unlock-notification.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.achievement-unlock-notification::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(45deg,
        transparent,
        rgba(var(--color-accent-rgb), 0.6),
        transparent
    );
    border-radius: 20px;
    animation: borderGlow 2s linear infinite;
    z-index: -1;
}

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

.achievement-unlock-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(var(--color-accent-rgb), 0.3);
    border: 2px solid var(--color-accent);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 900;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    animation: badgePulse 1.5s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(var(--color-accent-rgb), 0.8);
    }
}

.achievement-unlock-icon {
    font-size: 80px;
    line-height: 1;
    margin-bottom: 16px;
    filter: drop-shadow(0 8px 24px rgba(var(--color-accent-rgb), 0.8));
    animation: iconBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes iconBounce {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.3) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.achievement-unlock-title {
    font-size: 26px;
    font-weight: 900;
    color: var(--color-accent);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 
        0 2px 12px rgba(var(--color-accent-rgb), 0.8),
        0 0 40px rgba(var(--color-accent-rgb), 0.5);
    animation: titleSlide 0.6s ease-out 0.2s both;
}

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

.achievement-unlock-description {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 20px 0;
    line-height: 1.5;
    animation: titleSlide 0.6s ease-out 0.3s both;
}

.achievement-unlock-rarity {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 2px solid;
    animation: titleSlide 0.6s ease-out 0.4s both;
}

.achievement-unlock-rarity.common {
    background: rgba(156, 163, 175, 0.3);
    border-color: rgba(156, 163, 175, 0.7);
    color: #d1d5db;
}

.achievement-unlock-rarity.rare {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.7);
    color: #60a5fa;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.achievement-unlock-rarity.epic {
    background: rgba(168, 85, 247, 0.3);
    border-color: rgba(168, 85, 247, 0.7);
    color: #c084fc;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

.achievement-unlock-rarity.legendary {
    background: rgba(var(--color-accent-rgb), 0.3);
    border-color: rgba(var(--color-accent-rgb), 0.7);
    color: #fde047;
    box-shadow: 0 0 30px rgba(var(--color-accent-rgb), 0.6);
    animation: legendaryGlow 1.5s ease-in-out infinite, titleSlide 0.6s ease-out 0.4s both;
}

@keyframes legendaryGlow {
    0%, 100% {
        box-shadow: 0 0 30px rgba(var(--color-accent-rgb), 0.6);
    }
    50% {
        box-shadow: 0 0 50px rgba(var(--color-accent-rgb), 1);
    }
}

/* Backdrop Overlay */
.achievement-unlock-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.achievement-unlock-backdrop.show {
    opacity: 1;
    pointer-events: all;
}

/* Responsive Unlock Notification */
@media (max-width: 768px) {
    .achievement-unlock-notification {
        max-width: 340px;
        padding: 24px 20px;
    }

    .achievement-unlock-badge {
        font-size: 11px;
        padding: 6px 16px;
    }

    .achievement-unlock-icon {
        font-size: 64px;
    }

    .achievement-unlock-title {
        font-size: 20px;
    }

    .achievement-unlock-description {
        font-size: 13px;
    }

    .achievement-unlock-rarity {
        font-size: 10px;
        padding: 5px 12px;
    }
}

/* ================================================================================================
   14.5. CHAT PANEL - Premium Messaging System
================================================================================================ */

/* Chat Container */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

/* ======== Chat Tab Bar ======== */
.chat-tab-bar {
    display: flex;
    background: rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px;
    gap: 4px;
    flex-shrink: 0;
    z-index: 3;
}

.chat-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    min-height: 40px;
}

.chat-tab .material-symbols-rounded {
    font-size: 18px;
}

.chat-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
}

.chat-tab-active {
    background: rgba(var(--color-accent-rgb), 0.15) !important;
    border-color: rgba(var(--color-accent-rgb), 0.35);
    color: var(--color-accent) !important;
    box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.2);
}

.chat-tab-active .material-symbols-rounded {
    color: var(--color-accent);
}

.chat-tab-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    border-radius: 9px;
    color: white;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    animation: badgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
}

@keyframes badgePop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* Hide inactive chat container */
.chat-hidden {
    display: none !important;
}

/* Chat input context indicator */
.chat-input-context {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Chat Login Prompt (for global chat when not logged in) */
.chat-login-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: 200px;
    text-align: center;
    padding: 30px;
}

.chat-login-prompt p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.chat-login-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: rgba(var(--color-accent-rgb), 0.15);
    border: 1px solid rgba(var(--color-accent-rgb), 0.4);
    border-radius: 8px;
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.chat-login-link:hover {
    background: rgba(var(--color-accent-rgb), 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.3);
}

.chat-login-link .material-symbols-rounded {
    font-size: 18px;
}

/* Chat Empty State */
.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 200px;
    text-align: center;
    padding: 30px;
}

.chat-empty-state p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
}

.chat-empty-state small {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.2);
}

.chat-header {
    position: relative;
    padding: 20px;
    background: linear-gradient(135deg,
        rgba(26, 77, 46, 0.4) 0%,
        rgba(59, 130, 246, 0.3) 100%
    );
    border-bottom: 2px solid rgba(var(--color-accent-rgb), 0.25);
    backdrop-filter: blur(12px);
    z-index: 2;
}

.chat-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--color-accent-rgb), 0.08),
        transparent
    );
    background-size: 200% 100%;
    animation: shimmerGold 4s linear infinite;
}

.chat-header-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Chat Avatar */
.chat-avatar {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.chat-avatar-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        #f59e0b 100%
    );
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    box-shadow: 
        0 4px 16px rgba(var(--color-accent-rgb), 0.5),
        inset 0 2px 8px rgba(255, 255, 255, 0.2);
}

.chat-avatar-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: var(--color-success);
    border: 3px solid var(--color-bg-primary);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
    }
    50% {
        box-shadow: 0 0 16px rgba(74, 222, 128, 1);
    }
}

/* Chat Info */
.chat-info {
    flex: 1;
    min-width: 0;
}

.chat-title {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 900;
    color: white;
    letter-spacing: 0.3px;
}

.chat-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.chat-online-indicator {
    width: 8px;
    height: 8px;
    background: var(--color-success);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--color-success);
}

.chat-online-count {
    font-weight: 700;
    color: var(--color-success);
}

/* Chat Action Buttons (Settings, Search) */
.chat-action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-settings-btn,
.chat-search-toggle-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.chat-settings-btn:hover,
.chat-search-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(var(--color-accent-rgb), 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.3);
}

.chat-settings-btn .material-symbols-rounded,
.chat-search-toggle-btn .material-symbols-rounded {
    font-size: 20px;
}

.chat-search-toggle-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

/* Chat Search Bar */
.chat-search-bar {
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 2px solid rgba(var(--color-accent-rgb), 0.2);
    backdrop-filter: blur(12px);
    display: none;
    animation: slideDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chat-search-bar.visible {
    display: block;
}

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

.chat-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-search-input {
    flex: 1;
    padding: 10px 40px 10px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: white;
    font-size: 14px;
    font-family: var(--font-sans);
    outline: none;
    transition: all 0.25s ease;
}

.chat-search-input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
}

.chat-search-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

.chat-search-clear {
    position: absolute;
    right: 60px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    font-size: 16px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.chat-search-input:not(:placeholder-shown) ~ .chat-search-clear {
    opacity: 1;
    visibility: visible;
}

.chat-search-clear:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: var(--color-error);
    color: var(--color-error);
    transform: scale(1.1);
}

.chat-search-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.chat-search-close:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: var(--color-error);
    color: var(--color-error);
}

.chat-search-results {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-search-count {
    font-weight: 700;
    color: var(--color-accent);
}

.chat-search-navigation {
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-search-nav-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-search-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--color-accent);
    transform: scale(1.05);
}

.chat-search-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.chat-search-nav-btn .material-symbols-rounded {
    font-size: 16px;
}

/* Highlighted Search Results in Messages */
.chat-message-bubble mark {
    background: rgba(255, 215, 0, 0.4);
    color: white;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 700;
    animation: highlightPulse 1.5s ease-in-out infinite;
}

@keyframes highlightPulse {
    0%, 100% {
        background: rgba(255, 215, 0, 0.4);
    }
    50% {
        background: rgba(255, 215, 0, 0.6);
    }
}

/* Chat Messages Area */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.15) 100%
    );
    scroll-behavior: smooth;
}

/* Hide scrollbar but keep functionality */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(var(--color-accent-rgb), 0.3);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-accent-rgb), 0.5);
}

/* Date Separator */
.chat-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px 0 16px;
    position: relative;
}

.chat-date-separator::before,
.chat-date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.3) 50%,
        transparent 100%
    );
}

.chat-date-separator-text {
    padding: 6px 16px;
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.15) 0%,
        rgba(var(--color-accent-rgb), 0.08) 100%
    );
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-accent);
    margin: 0 12px;
    white-space: nowrap;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Unread Messages Indicator */
.chat-unread-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    position: relative;
}

.chat-unread-separator::before {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-error) 50%,
        transparent 100%
    );
    animation: unreadPulse 2s ease-in-out infinite;
}

.chat-unread-separator-text {
    padding: 6px 14px;
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.3) 0%,
        rgba(220, 38, 38, 0.2) 100%
    );
    border: 1px solid var(--color-error);
    border-radius: 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-error);
    margin: 0 12px;
    white-space: nowrap;
    box-shadow:
        0 0 16px rgba(239, 68, 68, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3);
    animation: unreadBadgePulse 2s ease-in-out infinite;
}

@keyframes unreadPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

@keyframes unreadBadgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 16px rgba(239, 68, 68, 0.4),
            0 2px 8px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow:
            0 0 24px rgba(239, 68, 68, 0.6),
            0 4px 12px rgba(0, 0, 0, 0.4);
    }
}

/* Message Container */
.chat-message {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    animation: messageSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Message Alignment */
.chat-message-player {
    align-items: flex-end;
}

.chat-message-opponent {
    align-items: flex-start;
}

.chat-message-system {
    align-items: center;
}

/* Message Header (avatar + name) */
.chat-message-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.chat-message-player .chat-message-header {
    flex-direction: row-reverse;
}

.chat-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chat-message-avatar-player {
    border: 2px solid var(--color-accent);
    box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.4);
}

.chat-message-avatar-opponent {
    border: 2px solid var(--color-info);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.chat-message-name {
    font-size: 13px;
    font-weight: 700;
}

.chat-message-name-player {
    color: var(--color-accent);
}

.chat-message-name-opponent {
    color: var(--color-info);
}

/* Message Content Wrapper */
.chat-message-content-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 75%;
}

.chat-message-system .chat-message-content-wrapper {
    max-width: 85%;
}

/* Message Bubble - Modern Design with Tails */
.chat-message-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: clamp(13px, 2.5vw, 14px);
    font-family: var(--font-sans);
    line-height: 1.5;
    word-wrap: break-word;
    position: relative;
    backdrop-filter: blur(12px);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.25),
        0 4px 20px rgba(0, 0, 0, 0.15),
        var(--glow-xs);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Message Bubble Hover Effect */
.chat-message-bubble:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 6px 24px rgba(0, 0, 0, 0.2),
        var(--glow-sm);
}

/* Player Message Bubble with Tail */
.chat-message-bubble-player {
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        var(--color-accent-dark) 100%
    );
    color: white;
    font-weight: 600;
    border-bottom-right-radius: 4px;
    box-shadow:
        0 3px 12px rgba(var(--glow-color), 0.5),
        0 6px 24px rgba(var(--glow-color), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Player Bubble Tail (Arrow) */
.chat-message-bubble-player::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -6px;
    width: 0;
    height: 0;
    border-left: 8px solid var(--color-accent-dark);
    border-top: 8px solid transparent;
    border-bottom: 0px solid transparent;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
}

/* Opponent Message Bubble with Tail */
.chat-message-bubble-opponent {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 100%
    );
    color: rgba(255, 255, 255, 0.95);
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(var(--glow-color), 0.12);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.3),
        var(--glow-xs),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Opponent Bubble Tail (Arrow) */
.chat-message-bubble-opponent::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -6px;
    width: 0;
    height: 0;
    border-right: 8px solid rgba(255, 255, 255, 0.08);
    border-top: 8px solid transparent;
    border-bottom: 0px solid transparent;
    filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.2));
}

/* System Message Bubble */
.chat-message-bubble-system {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.25) 0%,
        rgba(37, 99, 235, 0.15) 100%
    );
    color: var(--color-info);
    border: 1px solid rgba(59, 130, 246, 0.4);
    text-align: center;
    font-weight: 600;
    border-radius: 14px;
    box-shadow:
        0 2px 10px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Message Grouping - Hide avatar/name for consecutive messages from same user */
.chat-message.grouped .chat-message-header {
    display: none;
}

.chat-message.grouped {
    margin-top: -6px;
    margin-bottom: 2px;
}

.chat-message.grouped .chat-message-bubble {
    border-radius: 18px;
}

.chat-message.grouped.chat-message-player .chat-message-bubble {
    border-bottom-right-radius: 18px;
}

.chat-message.grouped.chat-message-opponent .chat-message-bubble {
    border-bottom-left-radius: 18px;
}

/* Remove tail from grouped messages */
.chat-message.grouped .chat-message-bubble-player::after,
.chat-message.grouped .chat-message-bubble-opponent::after {
    display: none;
}

/* Last message in group gets tail */
.chat-message.group-last.chat-message-player .chat-message-bubble {
    border-bottom-right-radius: 4px;
}

.chat-message.group-last.chat-message-opponent .chat-message-bubble {
    border-bottom-left-radius: 4px;
}

.chat-message.group-last .chat-message-bubble-player::after,
.chat-message.group-last .chat-message-bubble-opponent::after {
    display: block;
}

/* Message Reactions */
.chat-message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.chat-reaction {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.chat-reaction:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.chat-reaction-emoji {
    font-size: 15px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    line-height: 1;
}

.chat-reaction-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent);
}

.chat-reaction-add {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.25s ease;
}

.chat-reaction-add:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: scale(1.1);
}

/* Message Timestamp */
.chat-message-timestamp {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
    padding: 0 4px;
}

/* Message Status & Read Receipts */
.chat-message-status {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.chat-message-status .material-symbols-rounded {
    font-size: 14px;
}

.chat-message-status.read {
    color: var(--color-info);
}

/* Pinned Message Indicator */
.chat-message.pinned {
    position: relative;
}

.chat-message.pinned::before {
    content: '\1F4CC';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    animation: pinWiggle 3s ease-in-out infinite;
}

@keyframes pinWiggle {
    0%, 100% {
        transform: translateX(-50%) rotate(-5deg);
    }
    50% {
        transform: translateX(-50%) rotate(5deg);
    }
}

/* Message Context Menu (Long Press / Right Click) */
.chat-message-menu {
    position: absolute;
    background: linear-gradient(135deg,
        rgba(20, 26, 23, 0.98) 0%,
        rgba(26, 77, 46, 0.98) 100%
    );
    border: 2px solid rgba(var(--color-accent-rgb), 0.4);
    border-radius: 12px;
    min-width: 180px;
    padding: 8px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 24px rgba(var(--color-accent-rgb), 0.2);
    backdrop-filter: blur(20px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9) translateY(-10px);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chat-message-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

.chat-message-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.chat-message-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(var(--color-accent-rgb), 0.3);
    transform: translateX(3px);
}

.chat-message-menu-item:active {
    transform: translateX(1px) scale(0.98);
}

.chat-message-menu-item .material-symbols-rounded {
    font-size: 20px;
    color: var(--color-accent);
}

.chat-message-menu-item.danger {
    color: var(--color-error);
}

.chat-message-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
}

.chat-message-menu-item.danger .material-symbols-rounded {
    color: var(--color-error);
}

.chat-message-menu-divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.3) 50%,
        transparent 100%
    );
    margin: 6px 0;
}

/* Message Long Press Highlight */
.chat-message.long-press-active .chat-message-bubble {
    transform: scale(0.98);
    box-shadow:
        0 0 0 4px rgba(var(--color-accent-rgb), 0.3),
        0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Reply Thread Indicator */
.chat-message-reply-to {
    margin-bottom: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--color-accent);
    border-radius: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-message-reply-to:hover {
    background: rgba(0, 0, 0, 0.4);
    border-left-color: var(--color-accent-dark);
}

.chat-message-reply-to-name {
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 2px;
}

.chat-message-reply-to-text {
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 250px;
}

/* Typing Indicator - Enhanced */
.chat-typing-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    animation: messageSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chat-typing-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--color-info);
    box-shadow:
        0 2px 8px rgba(59, 130, 246, 0.4),
        0 0 16px rgba(59, 130, 246, 0.2);
    animation: avatarPulse 2s ease-in-out infinite;
}

@keyframes avatarPulse {
    0%, 100% {
        box-shadow:
            0 2px 8px rgba(59, 130, 246, 0.4),
            0 0 16px rgba(59, 130, 246, 0.2);
    }
    50% {
        box-shadow:
            0 3px 12px rgba(59, 130, 246, 0.6),
            0 0 24px rgba(59, 130, 246, 0.4);
    }
}

.chat-typing-bubble {
    padding: 14px 18px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.chat-typing-dot {
    width: 9px;
    height: 9px;
    background: var(--color-info);
    border-radius: 50%;
    animation: typingDotBounce 1.4s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.chat-typing-dot:nth-child(1) {
    animation-delay: 0s;
}

.chat-typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.chat-typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDotBounce {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: translateY(0) scale(1);
    }
    30% {
        opacity: 1;
        transform: translateY(-8px) scale(1.2);
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.8);
    }
}

/* Scroll to Bottom Button - Enhanced with Unread Badge */
.chat-scroll-to-bottom {
    position: absolute;
    bottom: 100px;
    right: 20px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        var(--color-accent-dark) 100%
    );
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    box-shadow:
        0 6px 20px rgba(var(--color-accent-rgb), 0.6),
        0 10px 36px rgba(var(--color-accent-rgb), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    z-index: 10;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
}

.chat-scroll-to-bottom.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.chat-scroll-to-bottom:hover {
    transform: translateY(-6px) scale(1.08);
    box-shadow:
        0 10px 32px rgba(var(--color-accent-rgb), 0.7),
        0 16px 48px rgba(var(--color-accent-rgb), 0.4),
        0 0 48px rgba(var(--color-accent-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
}

.chat-scroll-to-bottom:active {
    transform: translateY(-2px) scale(1.02);
}

.chat-scroll-to-bottom .material-symbols-rounded {
    font-size: 26px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Unread Count Badge on Scroll Button */
.chat-scroll-to-bottom-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    background: linear-gradient(135deg,
        var(--color-error) 0%,
        #dc2626 100%
    );
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    color: white;
    box-shadow:
        0 3px 12px rgba(239, 68, 68, 0.6),
        0 0 20px rgba(239, 68, 68, 0.4);
    animation: badgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
               badgePulse 2s ease-in-out 0.5s infinite;
}

@keyframes badgePop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 3px 12px rgba(239, 68, 68, 0.6),
            0 0 20px rgba(239, 68, 68, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow:
            0 4px 16px rgba(239, 68, 68, 0.8),
            0 0 28px rgba(239, 68, 68, 0.6);
    }
}

/* Chat Input Area */
/* Chat Input Area - Sticky Bottom (Messenger-style) */
.chat-input-area {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.6);
    border-top: 2px solid rgba(var(--glow-color), 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3), 0 -2px 20px rgba(var(--glow-color), 0.05);
}

/* Emoji Picker */
.chat-emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 20px;
    margin-bottom: 12px;
    padding: 16px;
    background: linear-gradient(135deg,
        rgba(20, 26, 23, 0.98) 0%,
        rgba(26, 77, 46, 0.98) 100%
    );
    border: 2px solid rgba(var(--color-accent-rgb), 0.4);
    border-radius: 16px;
    width: 340px;
    max-width: calc(100vw - 40px);
    max-height: 320px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 24px rgba(var(--color-accent-rgb), 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 20;
    backdrop-filter: blur(20px);
}

.chat-emoji-picker.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.chat-emoji-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.2);
}

.chat-emoji-picker-title {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chat-emoji-picker-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s ease;
}

.chat-emoji-picker-close:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: var(--color-error);
    color: var(--color-error);
    transform: scale(1.1);
}

.chat-emoji-grid-wrapper {
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-accent-rgb), 0.4) rgba(0, 0, 0, 0.3);
}

.chat-emoji-grid-wrapper::-webkit-scrollbar {
    width: 6px;
}

.chat-emoji-grid-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.chat-emoji-grid-wrapper::-webkit-scrollbar-thumb {
    background: rgba(var(--color-accent-rgb), 0.4);
    border-radius: 3px;
}

.chat-emoji-grid-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-accent-rgb), 0.6);
}

.chat-emoji-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.chat-emoji-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.chat-emoji-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(var(--color-accent-rgb), 0.3), transparent);
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.chat-emoji-btn:hover::before {
    opacity: 1;
}

.chat-emoji-btn:hover {
    background: rgba(var(--color-accent-rgb), 0.2);
    border-color: var(--color-accent);
    transform: scale(1.2);
    z-index: 1;
}

.chat-emoji-btn:active {
    transform: scale(1.1);
}

/* Input Row */
.chat-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Action Buttons */
.chat-action-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: white;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.3s ease;
    font-size: 20px;
}

.chat-action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.chat-action-btn-voice {
    color: var(--color-error);
}

.chat-action-btn-voice:hover {
    border-color: var(--color-error);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.chat-action-btn-image {
    color: var(--color-info);
}

.chat-action-btn-image:hover {
    border-color: var(--color-info);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.chat-action-btn-emoji:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.3);
}

.chat-action-btn-emoji {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.chat-action-btn .material-symbols-rounded {
    font-size: 20px;
}

/* Chat Input Field - Enhanced */
.chat-input-field {
    flex: 1;
    min-height: 44px;
    max-height: 120px;
    padding: 12px 16px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.08) 100%
    );
    border: 2px solid rgba(var(--glow-color), 0.12);
    border-radius: 14px;
    color: white;
    font-size: clamp(13px, 2.5vw, 14px);
    font-family: var(--font-sans);
    line-height: 1.5;
    outline: none;
    resize: none;
    overflow-y: auto;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-accent-rgb), 0.4) rgba(0, 0, 0, 0.3);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.15),
        var(--glow-xs),
        0 1px 0 rgba(255, 255, 255, 0.05);
}

.chat-input-field::-webkit-scrollbar {
    width: 5px;
}

.chat-input-field::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.chat-input-field::-webkit-scrollbar-thumb {
    background: rgba(var(--color-accent-rgb), 0.4);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.chat-input-field::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-accent-rgb), 0.6);
}

.chat-input-field::placeholder {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

.chat-input-field:focus {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.12) 100%
    );
    border-color: var(--color-accent);
    box-shadow:
        0 0 0 4px rgba(var(--glow-color), 0.15),
        inset 0 2px 6px rgba(0, 0, 0, 0.15),
        var(--glow-md);
    transform: translateY(-1px);
}

/* Send Button - Enhanced with Pulse Effect */
.chat-send-btn {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        var(--color-accent-dark) 100%
    );
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    color: white;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow:
        0 4px 20px rgba(var(--color-accent-rgb), 0.5),
        0 8px 32px rgba(var(--color-accent-rgb), 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Send Button Shine Effect */
.chat-send-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    transition: left 0.5s ease;
}

.chat-send-btn:hover::before {
    left: 100%;
}

.chat-send-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        0 8px 28px rgba(var(--color-accent-rgb), 0.65),
        0 12px 40px rgba(var(--color-accent-rgb), 0.35),
        0 0 40px rgba(var(--color-accent-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
}

.chat-send-btn:active {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 4px 16px rgba(var(--color-accent-rgb), 0.6),
        0 6px 24px rgba(var(--color-accent-rgb), 0.3);
}

.chat-send-btn .material-symbols-rounded {
    font-size: 24px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Send Button Disabled State */
.chat-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.chat-send-btn:disabled:hover {
    transform: none;
}

/* Input Info & Keyboard Shortcuts */
.chat-input-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 8px;
}

.chat-input-hints {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chat-input-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.chat-input-hint kbd {
    display: inline-block;
    padding: 2px 5px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-accent);
    box-shadow:
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.1);
}

.chat-character-count {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
}

.chat-character-count.warning {
    color: var(--color-warning);
    animation: countPulse 1s ease-in-out infinite;
}

.chat-character-count.error {
    color: var(--color-error);
    animation: countPulse 0.5s ease-in-out infinite;
}

@keyframes countPulse {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.chat-input-info .material-symbols-rounded {
    font-size: 14px;
}

.chat-input-kbd {
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 700;
}

/* Responsive Chat */
@media (max-width: 768px) {
    .chat-header {
        padding: 14px 16px;
    }

    .chat-avatar {
        width: 44px;
        height: 44px;
    }

    .chat-avatar-icon {
        font-size: 24px;
    }

    .chat-title {
        font-size: 16px;
    }

    .chat-status {
        font-size: 12px;
    }

    .chat-messages {
        padding: 14px;
        max-height: calc(100vh - 320px);
    }

    .chat-message-bubble {
        padding: 10px 14px;
        font-size: 13px;
        max-width: 100%;
        word-break: break-word;
    }

    .chat-message-avatar {
        width: 28px;
        height: 28px;
    }

    .chat-message-name {
        font-size: 12px;
    }

    .chat-message-timestamp {
        font-size: 10px;
    }

    .chat-input-area {
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        background: rgba(0, 0, 0, 0.8);
    }

    .chat-input-row {
        gap: 8px;
    }

    .chat-action-btn {
        width: 40px;
        height: 40px;
    }

    .chat-action-btn .material-symbols-rounded {
        font-size: 18px;
    }

    .chat-input-field {
        font-size: 13px;
        padding: 10px 14px;
        min-height: 40px;
        max-height: 100px;
    }

    .chat-send-btn {
        width: 44px;
        height: 44px;
    }

    .chat-send-btn .material-symbols-rounded {
        font-size: 22px;
    }

    .chat-emoji-picker {
        left: 16px;
        right: 16px;
        width: auto;
        max-width: calc(100vw - 32px);
        padding: 12px;
        max-height: 260px;
    }

    .chat-emoji-grid-wrapper {
        max-height: 180px;
    }

    .chat-emoji-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
    }

    .chat-emoji-btn {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .chat-scroll-to-bottom {
        width: 44px;
        height: 44px;
        bottom: 80px;
        right: 16px;
    }

    .chat-scroll-to-bottom .material-symbols-rounded {
        font-size: 22px;
    }

    .chat-reaction {
        padding: 3px 8px;
        font-size: 12px;
    }

    .chat-reaction-add {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .chat-header {
        padding: 12px;
    }

    .chat-avatar {
        width: 40px;
        height: 40px;
    }

    .chat-avatar-icon {
        font-size: 20px;
    }

    .chat-title {
        font-size: 14px;
    }

    .chat-status {
        font-size: 11px;
    }

    .chat-messages {
        padding: 12px;
    }
    
    /* Compact message bubbles - TikTok style */
    .chat-message {
        margin-bottom: 6px !important;
    }
    
    .chat-message-content-wrapper {
        max-width: 72% !important;
    }
    
    .chat-message-system .chat-message-content-wrapper {
        max-width: 82% !important;
    }

    .chat-message-bubble {
        padding: 8px 12px;
        font-size: 12px;
    }

    .chat-input-area {
        padding: 10px 12px;
    }

    .chat-action-btn {
        width: 36px;
        height: 36px;
    }

    .chat-action-btn .material-symbols-rounded {
        font-size: 16px;
    }

    .chat-input-field {
        font-size: 12px;
        padding: 8px 12px;
    }

    .chat-send-btn {
        width: 40px;
        height: 40px;
    }

    .chat-emoji-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
    }

    .chat-emoji-btn {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .chat-input-info {
        font-size: 11px;
    }
}

/* ================================================================================================
   15.5 MOBILE LANDSCAPE OPTIMIZATION (Messenger Chat)
   Optimize for landscape mode on phones (very limited height)
================================================================================================ */
@media (max-width: 812px) and (max-height: 450px) and (orientation: landscape) {
    /* Ultra-compact panel header for landscape */
    .context-panel .panel-header {
        padding: 8px 12px !important;
        min-height: 44px !important;
        border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.15) !important;
    }

    .context-panel .panel-back {
        width: 36px !important;
        height: 36px !important;
    }

    .context-panel .panel-back .material-symbols-rounded {
        font-size: 18px !important;
    }

    .context-panel .panel-title {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    .context-panel .panel-close {
        width: 36px !important;
        height: 36px !important;
    }

    /* Panel content with reduced header height */
    .context-panel .panel-content {
        height: calc(100vh - 44px) !important;
        max-height: calc(100vh - 44px) !important;
        padding: 0 !important;
    }

    /* Chat container optimizations */
    .chat-header {
        padding: 8px 12px !important;
        min-height: 50px !important;
    }

    .chat-avatar {
        width: 36px !important;
        height: 36px !important;
    }

    .chat-avatar-icon {
        font-size: 18px !important;
    }

    .chat-title {
        font-size: 13px !important;
        margin-bottom: 2px !important;
    }

    .chat-status,
    .chat-online-count {
        font-size: 10px !important;
    }

    .chat-settings-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .chat-settings-btn .material-symbols-rounded {
        font-size: 16px !important;
    }

    /* Ultra-compact messages area */
    .chat-messages {
        padding: 8px 12px !important;
        max-height: calc(100vh - 44px - 50px - 90px) !important;
        gap: 6px !important;
    }

    /* Compact message bubbles - TikTok style */
    .chat-message {
        margin-bottom: 4px !important;
    }
    
    .chat-message-content-wrapper {
        max-width: 65% !important;
    }
    
    .chat-message-system .chat-message-content-wrapper {
        max-width: 75% !important;
    }

    .chat-message-header {
        margin-bottom: 4px !important;
        gap: 6px !important;
    }

    .chat-message-avatar {
        width: 24px !important;
        height: 24px !important;
    }

    .chat-message-name {
        font-size: 11px !important;
    }

    .chat-message-bubble {
        padding: 6px 10px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        border-radius: 12px !important;
    }

    .chat-message-timestamp {
        font-size: 9px !important;
        margin-top: 2px !important;
    }

    /* Compact reactions */
    .chat-message-reactions {
        margin-top: 4px !important;
        gap: 4px !important;
    }

    .chat-reaction {
        padding: 2px 6px !important;
        font-size: 11px !important;
    }

    .chat-reaction-emoji {
        font-size: 13px !important;
    }

    .chat-reaction-count {
        font-size: 10px !important;
    }

    .chat-reaction-add {
        width: 24px !important;
        height: 24px !important;
        font-size: 14px !important;
    }

    /* Compact typing indicator */
    .chat-typing-indicator {
        margin-bottom: 8px !important;
        gap: 6px !important;
    }

    .chat-typing-avatar {
        width: 24px !important;
        height: 24px !important;
    }

    .chat-typing-bubble {
        padding: 6px 10px !important;
        gap: 3px !important;
    }

    .chat-typing-dot {
        width: 6px !important;
        height: 6px !important;
    }

    /* Ultra-compact input area */
    .chat-input-area {
        padding: 8px 12px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        background: rgba(0, 0, 0, 0.85) !important;
        border-top: 1px solid rgba(var(--color-accent-rgb), 0.2) !important;
    }

    .chat-input-row {
        gap: 6px !important;
    }

    .chat-action-btn {
        width: 34px !important;
        height: 34px !important;
    }

    .chat-action-btn .material-symbols-rounded {
        font-size: 16px !important;
    }

    .chat-input-field {
        font-size: 12px !important;
        padding: 6px 10px !important;
        min-height: 34px !important;
        max-height: 80px !important;
        line-height: 1.4 !important;
    }

    .chat-send-btn {
        width: 38px !important;
        height: 38px !important;
    }

    .chat-send-btn .material-symbols-rounded {
        font-size: 18px !important;
    }

    /* Compact emoji picker for landscape */
    .chat-emoji-picker {
        max-height: 220px !important;
        padding: 10px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
    }

    .chat-emoji-picker-header {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }

    .chat-emoji-picker-title {
        font-size: 11px !important;
    }

    .chat-emoji-picker-close {
        width: 24px !important;
        height: 24px !important;
    }

    .chat-emoji-grid-wrapper {
        max-height: 140px !important;
    }

    .chat-emoji-grid {
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 4px !important;
    }

    .chat-emoji-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 16px !important;
    }

    /* Hide scroll to bottom button in landscape */
    .chat-scroll-to-bottom {
        width: 36px !important;
        height: 36px !important;
        bottom: 60px !important;
        right: 12px !important;
    }

    .chat-scroll-to-bottom .material-symbols-rounded {
        font-size: 18px !important;
    }

    /* Compact input info */
    .chat-input-info {
        font-size: 9px !important;
        padding: 4px 8px !important;
    }
}

/* ================================================================================================
   15a. TABLE-STYLE CHAT CLASSES (ct-tab, cmsg-* classes from Table reference)
   Added alongside old chat classes — do NOT remove old .chat-tab-bar etc. yet
================================================================================================ */

/* Chat Username Link — clickable in messages */
.chat-username-link {
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px dotted transparent;
}

.chat-username-link:hover {
    filter: brightness(1.3);
    border-bottom-color: currentColor;
}

/* Chat User Popup — appears on username click */
.chat-user-popup {
    position: fixed;
    z-index: 10001;
    width: 170px;
    background: var(--color-bg-secondary);
    border: 1px solid rgba(var(--color-accent-rgb), 0.15);
    border-radius: 10px;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px) scale(0.95);
    transition: all 0.15s ease;
    pointer-events: none;
}

.chat-user-popup.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.chat-popup-header {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.1);
    background: rgba(var(--color-accent-rgb), 0.04);
}

.chat-popup-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent);
}

.chat-popup-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.chat-popup-btn:last-child { border-bottom: none; }

.chat-popup-btn:hover {
    background: rgba(var(--color-accent-rgb), 0.08);
    color: var(--color-text-primary);
}

.chat-popup-btn .material-symbols-rounded {
    font-size: 16px;
    color: var(--color-accent);
}

/* Danger variant (unfriend, block, report) */
.chat-popup-btn.chat-popup-danger {
    color: #f87171;
}

.chat-popup-btn.chat-popup-danger .material-symbols-rounded {
    color: #ef4444;
}

.chat-popup-btn.chat-popup-danger:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

/* Friend badge in popup header */
.chat-popup-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(var(--color-accent-rgb), 0.15);
    color: var(--color-accent);
    margin-left: 6px;
}

/* Light theme */
[data-theme="light"] .chat-user-popup {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .chat-popup-header {
    background: rgba(var(--color-accent-rgb), 0.05);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .chat-popup-btn {
    color: #555;
    border-bottom-color: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .chat-popup-btn:hover {
    background: rgba(var(--color-accent-rgb), 0.06);
    color: #222;
}

/* ---- Chat Tabs Bar (Table-style) ---- */
.chat-tabs-bar {
    display: flex;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    gap: 3px;
}
.ct-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px 4px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-width: 0;
}
.ct-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-secondary);
}
.ct-tab.ct-active {
    background: rgba(var(--color-accent-rgb), 0.15);
    color: var(--color-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.ct-icon {
    font-size: 20px;
    line-height: 1;
}
.ct-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-transform: uppercase;
}
.ct-badge {
    position: absolute;
    top: 0;
    right: 2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: #ef4444;
    color: #fff;
    border-radius: 7px;
    font-size: 8px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.4);
}

/* Individual tab active colors */
#chatTabGlobal.ct-active  { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
#chatTabTable.ct-active   { background: rgba(var(--color-accent-rgb), 0.15); color: var(--color-accent); }
#chatTabPrivate.ct-active { background: rgba(74, 222, 128, 0.12); color: #4ade80; }
#chatTabFriends.ct-active { background: rgba(167, 139, 250, 0.15); color: #a78bfa; }
#chatTabNotifs.ct-active  { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

/* Light theme — tabs bar */
[data-theme="light"] .chat-tabs-bar {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .ct-tab {
    color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .ct-tab:hover {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .ct-tab.ct-active {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] #chatTabGlobal.ct-active  { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
[data-theme="light"] #chatTabTable.ct-active   { background: rgba(var(--color-accent-rgb), 0.1); color: var(--color-accent); }
[data-theme="light"] #chatTabPrivate.ct-active { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
[data-theme="light"] #chatTabFriends.ct-active { background: rgba(139, 92, 246, 0.1); color: #7c3aed; }
[data-theme="light"] #chatTabNotifs.ct-active  { background: rgba(245, 158, 11, 0.1); color: #d97706; }

/* ---- Chat Messages (Table-style cmsg-* classes) ---- */
/* Chat user lists — show ~5 users, scroll rest */
#chatGlobalUsers,
#chatRoomUsers {
    max-height: 155px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-accent-rgb), 0.15) transparent;
}
#chatGlobalUsers::-webkit-scrollbar,
#chatRoomUsers::-webkit-scrollbar { width: 4px; }
#chatGlobalUsers::-webkit-scrollbar-track,
#chatRoomUsers::-webkit-scrollbar-track { background: transparent; }
#chatGlobalUsers::-webkit-scrollbar-thumb,
#chatRoomUsers::-webkit-scrollbar-thumb { background: rgba(var(--color-accent-rgb), 0.2); border-radius: 4px; }

.cmsg-container {
    flex-direction: column;
    gap: 6px;
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    min-height: min(200px, 40vh);
    max-height: 50vh;
    background: rgba(0,0,0,0.12);
    border-radius: 8px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-accent-rgb), 0.15) transparent;
}
.cmsg-container::-webkit-scrollbar { width: 4px; }
.cmsg-container::-webkit-scrollbar-track { background: transparent; }
.cmsg-container::-webkit-scrollbar-thumb { background: rgba(var(--color-accent-rgb), 0.2); border-radius: 4px; }

.cmsg-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.cmsg-me { flex-direction: row-reverse; }
.cmsg-other { flex-direction: row; }
.cmsg-enter { animation: fadeInUp 0.2s ease; }

.cmsg-avatar-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.cmsg-avatar-initial {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-accent);
    flex-shrink: 0;
}

.cmsg-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 80%;
}
.cmsg-me .cmsg-content { align-items: flex-end; }
.cmsg-other .cmsg-content { align-items: flex-start; }

.cmsg-bubble {
    padding: 7px 11px;
    font-size: 13px;
    color: var(--color-text-primary);
    word-break: break-word;
    line-height: 1.4;
}
.cmsg-me .cmsg-bubble {
    border-radius: 12px 12px 3px 12px;
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.25) 0%,
        rgba(var(--color-accent-rgb), 0.15) 100%);
    border: 1px solid rgba(var(--color-accent-rgb), 0.12);
}
.cmsg-other .cmsg-bubble {
    border-radius: 12px 12px 12px 3px;
    background: rgba(var(--glass-bg-rgb, 255,255,255), 0.06);
    border: 1px solid rgba(var(--glass-bg-rgb, 255,255,255), 0.06);
}

.cmsg-name {
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.cmsg-me .cmsg-name { color: var(--color-accent); }
.cmsg-other .cmsg-name { color: var(--color-text-secondary); }

.cmsg-time {
    font-size: 9px;
    color: var(--color-text-tertiary);
    padding: 0 3px;
}

.cmsg-del-btn {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    font-size: 11px;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0.4;
    transition: opacity 0.2s, color 0.2s;
}
.cmsg-del-btn:hover { opacity: 1; color: #ef4444; }

.cmsg-empty {
    text-align: center;
    color: var(--color-text-tertiary);
    padding: 20px;
    font-size: 12px;
}

.cmsg-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(var(--glass-bg-rgb, 255,255,255), 0.06);
    border: 1px solid rgba(var(--glass-bg-rgb, 255,255,255), 0.1);
    border-radius: 10px;
    color: var(--color-text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
    min-height: 0;
    max-height: 38px;
}
.cmsg-input:focus {
    border-color: rgba(var(--color-accent-rgb), 0.4);
    background: rgba(var(--glass-bg-rgb, 255,255,255), 0.1);
}

/* Light theme — cmsg input */
[data-theme="light"] .cmsg-input {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
    color: var(--color-text-primary);
}
[data-theme="light"] .cmsg-input:focus {
    background: rgba(0,0,0,0.06);
    border-color: rgba(var(--color-accent-rgb), 0.3);
}

/* Light theme — cmsg messages */
[data-theme="light"] .cmsg-container {
    background: rgba(0,0,0,0.04);
}
[data-theme="light"] .cmsg-me .cmsg-bubble {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.15) 0%,
        rgba(var(--color-accent-rgb), 0.08) 100%);
    border-color: rgba(var(--color-accent-rgb), 0.15);
}
[data-theme="light"] .cmsg-other .cmsg-bubble {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .cmsg-avatar-initial {
    background: rgba(var(--color-accent-rgb), 0.12);
}

/* ================================================================================================
   15b. GAME LOG PANEL — Tabs + Live Log + History
================================================================================================ */

/* === Log Tabs Toggle === */
.log-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.log-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.log-tab:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.04);
}

.log-tab-active {
    background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.2) !important;
    color: var(--color-primary, #3b82f6) !important;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb, 59, 130, 246), 0.15);
}

.log-tab-badge {
    background: rgba(var(--color-accent-rgb, 255, 215, 0), 0.2);
    color: var(--color-accent, #ffd700);
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* === Live Log Entries === */
.live-log-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

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

.live-log-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    animation: slideInLogEntry 0.25s ease forwards;
    border-left: 3px solid transparent;
    transition: background 0.15s ease;
}

.live-log-entry:hover {
    background: rgba(255, 255, 255, 0.06);
}

.live-log-icon {
    font-size: 14px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.live-log-msg {
    flex: 1;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    line-height: 1.3;
}

.live-log-time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    font-weight: 600;
    font-family: var(--font-display);
    flex-shrink: 0;
    min-width: 55px;
    text-align: right;
}

/* Entry type colors */
.live-log-system {
    border-left-color: rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.05);
}
.live-log-system .live-log-msg { color: rgba(165, 180, 252, 0.85); }

.live-log-player {
    border-left-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.05);
}
.live-log-player .live-log-msg { color: #86efac; font-weight: 700; }

.live-log-opponent {
    border-left-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.04);
}
.live-log-opponent .live-log-msg { color: rgba(252, 165, 165, 0.85); }

.live-log-success, .live-log-trick {
    border-left-color: rgba(var(--color-accent-rgb, 255, 215, 0), 0.5);
    background: rgba(var(--color-accent-rgb, 255, 215, 0), 0.06);
}
.live-log-success .live-log-msg,
.live-log-trick .live-log-msg { color: var(--color-accent, #ffd700); font-weight: 700; }

.live-log-warning {
    border-left-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.05);
}
.live-log-warning .live-log-msg { color: #fbbf24; }

.live-log-play {
    border-left-color: rgba(56, 189, 248, 0.4);
    background: rgba(56, 189, 248, 0.04);
}
.live-log-play .live-log-msg { color: rgba(186, 230, 253, 0.85); }

/* === History Section — Professional Redesign === */
.game-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Summary Stats Bar */
.hist-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1) 0%, rgba(var(--color-accent-rgb, 255, 215, 0), 0.08) 100%);
    border-radius: 12px;
    border: 1px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.15);
    margin-bottom: 4px;
}

.hist-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.hist-summary-num {
    font-size: 20px;
    font-weight: 900;
    font-family: var(--font-display);
    color: white;
}

.hist-summary-num.hist-wins { color: #22c55e; }
.hist-summary-num.hist-losses { color: #ef4444; }

.hist-summary-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* History Card */
@keyframes histCardIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.hist-card {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
    opacity: 0;
    animation: histCardIn 0.35s ease forwards;
}

.hist-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.hist-accent {
    width: 4px;
    flex-shrink: 0;
}

.hist-card-win .hist-accent {
    background: linear-gradient(180deg, #22c55e, #16a34a);
}

.hist-card-loss .hist-accent {
    background: linear-gradient(180deg, #ef4444, #dc2626);
}

.hist-card-tie .hist-accent {
    background: linear-gradient(180deg, #f59e0b, #d97706);
}

.hist-card-body {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Row 1: Result + Reward */
.hist-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hist-result {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hist-result-icon {
    font-size: 16px;
}

.hist-result-text {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.hist-card-win .hist-result-text { color: #22c55e; }
.hist-card-loss .hist-result-text { color: #ef4444; }
.hist-card-tie .hist-result-text { color: #f59e0b; }

.hist-capot {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
    letter-spacing: 0.5px;
}

.hist-reward-chip {
    font-size: 12px;
    font-weight: 900;
    font-family: var(--font-display);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.hist-reward-pos {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.hist-reward-neg {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Row 2: Meta info */
.hist-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hist-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
}

.hist-meta-item .material-symbols-rounded {
    font-size: 13px;
    opacity: 0.6;
}

.hist-mode-mp {
    color: rgba(56, 189, 248, 0.8) !important;
}

.hist-mode-ai {
    color: rgba(168, 85, 247, 0.8) !important;
}

/* Row 3: Opponents */
.hist-opponents {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.hist-opponents-label {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.hist-opponents-names {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Row 4: Scoreboard */
.hist-scoreboard {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}

.hist-sb-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-radius: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.hist-sb-me {
    background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.12);
    color: white;
    font-weight: 700;
}

.hist-sb-pos {
    width: 18px;
    text-align: center;
    font-size: 12px;
    flex-shrink: 0;
}

.hist-sb-name {
    flex: 1;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 55px;
}

.hist-sb-score {
    font-weight: 800;
    font-family: var(--font-display);
    color: var(--color-accent, #ffd700);
    min-width: 24px;
    text-align: right;
}

.hist-sb-score small {
    font-size: 9px;
    opacity: 0.5;
}

.hist-sb-bal {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
}

.hist-sb-chg {
    font-weight: 800;
    font-family: var(--font-display);
    font-size: 11px;
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}

.hist-chg-pos { color: #22c55e; }
.hist-chg-neg { color: #ef4444; }
.hist-chg-zero { color: rgba(255, 255, 255, 0.3); }

/* Row 5: Footer */
.hist-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.hist-footer-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
}

.hist-footer-item .material-symbols-rounded {
    font-size: 12px;
}

/* Responsive: compact on small screens */
@media (max-width: 400px) {
    .hist-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .hist-meta {
        gap: 8px;
    }
    .hist-sb-bal {
        display: none;
    }
}

/* History Load More Button */
.hist-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
    border: 1px dashed rgba(var(--color-primary-rgb, 59, 130, 246), 0.3);
    border-radius: 10px;
    color: var(--color-primary, #3b82f6);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hist-load-more:hover {
    background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
    border-color: rgba(var(--color-primary-rgb, 59, 130, 246), 0.5);
}

.hist-load-more:disabled {
    opacity: 0.5;
    cursor: default;
}

.hist-load-more .material-symbols-rounded {
    font-size: 18px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ================================================================================================
   15c. LEADERBOARD PANEL — Top 100 Premium
================================================================================================ */

.lb-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* === Hero Header === */
.lb-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.06) 100%);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

.lb-hero::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.lb-hero-icon {
    font-size: 32px;
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.3));
}

.lb-hero-info {
    flex: 1;
}

.lb-hero-title {
    font-size: 14px;
    font-weight: 900;
    font-family: var(--font-display);
    color: white;
    letter-spacing: -0.3px;
}

.lb-hero-sub {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    margin-top: 2px;
}

/* === Sort Buttons === */
.lb-sort-bar {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.lb-sort-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 4px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.lb-sort-btn .material-symbols-rounded {
    font-size: 13px;
}

.lb-sort-btn:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
}

.lb-sort-active {
    background: rgba(var(--color-accent-rgb, 255, 215, 0), 0.15) !important;
    color: var(--color-accent, #ffd700) !important;
    box-shadow: 0 2px 10px rgba(var(--color-accent-rgb, 255, 215, 0), 0.12);
}

/* === Empty state === */
.lb-empty {
    text-align: center;
    padding: 50px 20px;
}

.lb-empty-icon {
    font-size: 56px;
    opacity: 0.25;
    display: block;
    margin-bottom: 12px;
}

.lb-empty p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px;
}

.lb-empty small {
    color: rgba(255, 255, 255, 0.25);
    font-size: 11px;
}

/* === Podium === */
.lb-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    padding: 20px 4px 0;
    margin-bottom: 6px;
}

.lb-podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    max-width: 110px;
    position: relative;
}

.lb-crown {
    font-size: 20px;
    margin-bottom: -4px;
    animation: crownFloat 2s ease-in-out infinite;
    filter: drop-shadow(0 2px 6px rgba(255, 215, 0, 0.5));
}

@keyframes crownFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.lb-podium-avatar-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-podium-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.1);
    z-index: 1;
    transition: transform 0.2s ease;
}

.lb-podium-place:hover .lb-podium-avatar {
    transform: scale(1.08);
}

.lb-podium-1 .lb-podium-avatar {
    width: 56px;
    height: 56px;
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.lb-podium-2 .lb-podium-avatar {
    border-color: #c0c0c0;
    box-shadow: 0 0 14px rgba(192, 192, 192, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.lb-podium-3 .lb-podium-avatar {
    border-color: #cd7f32;
    box-shadow: 0 0 14px rgba(205, 127, 50, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.lb-podium-me .lb-podium-avatar {
    border-color: var(--color-primary, #3b82f6) !important;
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb, 59, 130, 246), 0.5) !important;
}

.lb-podium-medal {
    font-size: 16px;
    position: absolute;
    bottom: -6px;
    right: -4px;
    z-index: 2;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.lb-podium-name {
    font-size: 11px;
    font-weight: 800;
    color: white;
    text-align: center;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4px;
}

.lb-podium-value {
    font-size: 15px;
    font-weight: 900;
    font-family: var(--font-display);
    color: var(--color-accent, #ffd700);
    text-shadow: 0 1px 4px rgba(255, 215, 0, 0.2);
}

.lb-podium-sub {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
}

.lb-podium-bar {
    width: 100%;
    border-radius: 10px 10px 0 0;
    margin-top: 4px;
    position: relative;
    overflow: hidden;
}

.lb-podium-1 .lb-podium-bar {
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.04) 100%);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-bottom: none;
}

.lb-podium-2 .lb-podium-bar {
    background: linear-gradient(180deg, rgba(192, 192, 192, 0.15) 0%, rgba(192, 192, 192, 0.03) 100%);
    border: 1px solid rgba(192, 192, 192, 0.12);
    border-bottom: none;
}

.lb-podium-3 .lb-podium-bar {
    background: linear-gradient(180deg, rgba(205, 127, 50, 0.15) 0%, rgba(205, 127, 50, 0.03) 100%);
    border: 1px solid rgba(205, 127, 50, 0.12);
    border-bottom: none;
}

/* === Current User Card === */
.lb-me-card {
    padding: 10px;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 59, 130, 246), 0.08) 0%, rgba(var(--color-primary-rgb, 59, 130, 246), 0.03) 100%);
    border: 1px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
    border-radius: 12px;
}

.lb-me-label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary, #3b82f6);
    margin-bottom: 6px;
    padding-left: 4px;
}

/* === Section Header === */
.lb-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.3);
    padding: 6px 2px 2px;
}

.lb-section-header .material-symbols-rounded {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.2);
}

.lb-section-badge {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
}

/* === Ranking Rows === */
.lb-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: all 0.15s ease;
    position: relative;
}

.lb-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.lb-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}

.lb-row:nth-child(even):hover {
    background: rgba(255, 255, 255, 0.05);
}

.lb-row-me {
    background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.08) !important;
    border: 1px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.15);
}

.lb-rank {
    font-size: 11px;
    font-weight: 800;
    font-family: var(--font-display);
    color: rgba(255, 255, 255, 0.3);
    min-width: 30px;
    text-align: center;
    flex-shrink: 0;
}

.lb-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.lb-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.lb-row:hover .lb-avatar {
    transform: scale(1.05);
}

.lb-row-me .lb-avatar {
    border-color: rgba(var(--color-primary-rgb, 59, 130, 246), 0.4);
}

.lb-you-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background: var(--color-primary, #3b82f6);
    border: 2px solid var(--color-bg-primary, #0a0e27);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(var(--color-primary-rgb, 59, 130, 246), 0.6);
}

.lb-player-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lb-name {
    font-size: 12px;
    font-weight: 700;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-name small {
    font-size: 10px;
    color: var(--color-primary, #3b82f6);
    font-weight: 600;
}

.lb-mini-stats {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
}

.lb-mini-sep {
    opacity: 0.3;
}

.lb-sub {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
}

.lb-stat-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.lb-stat-main {
    font-size: 14px;
    font-weight: 900;
    font-family: var(--font-display);
    color: var(--color-accent, #ffd700);
    line-height: 1.1;
}

.lb-stat-label {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === Responsive === */
@media (max-width: 400px) {
    .lb-podium-avatar {
        width: 36px;
        height: 36px;
    }
    .lb-podium-1 .lb-podium-avatar {
        width: 46px;
        height: 46px;
    }
    .lb-sort-btn {
        font-size: 8px;
        padding: 6px 3px;
    }
    .lb-sort-btn .material-symbols-rounded {
        font-size: 12px;
    }
    .lb-hero {
        padding: 10px 12px;
    }
    .lb-hero-icon {
        font-size: 26px;
    }
    .lb-crown {
        font-size: 16px;
    }
}

/* ================================================================================================
   16. STATS PANEL - Premium Statistics Display
================================================================================================ */

/* === Balance Hero Card === */
.stats-balance-hero {
    position: relative;
    padding: 20px 24px;
    border-radius: 16px;
    border: 2px solid;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
}

.stats-balance-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
    background-size: 200% 100%;
    animation: shimmerGold 3s linear infinite;
}

.stats-balance-hero.balance-card-positive {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(16, 185, 129, 0.08) 100%);
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.15);
}

.stats-balance-hero.balance-card-negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(220, 38, 38, 0.08) 100%);
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.15);
}

.stats-balance-hero.balance-card-zero {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.1) 0%, rgba(100, 116, 139, 0.08) 100%);
    border-color: rgba(148, 163, 184, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.stats-balance-icon {
    font-size: 36px;
    flex-shrink: 0;
}

.stats-balance-main {
    flex: 1;
}

.stats-balance-amount {
    font-size: 32px;
    font-weight: 900;
    font-family: var(--font-display);
    line-height: 1;
    margin-bottom: 4px;
}

.balance-card-positive .stats-balance-amount { color: #22c55e; }
.balance-card-negative .stats-balance-amount { color: #ef4444; }
.balance-card-zero .stats-balance-amount { color: var(--color-text-secondary); }

.stats-balance-label {
    font-size: 11px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.stats-balance-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    flex-shrink: 0;
}

.stats-balance-meta span {
    font-size: 11px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

/* Stats Header - Win Rate Display */
.stats-header {
    position: relative;
    padding: 32px 24px;
    background: linear-gradient(135deg,
        rgba(139, 92, 246, 0.2) 0%,
        rgba(236, 72, 153, 0.2) 100%
    );
    border-radius: 16px;
    border: 2px solid rgba(139, 92, 246, 0.3);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 
        0 8px 24px rgba(139, 92, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stats-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(139, 92, 246, 0.15),
        transparent
    );
    background-size: 200% 100%;
    animation: shimmerGold 3s linear infinite;
}

.stats-header-content {
    position: relative;
    text-align: center;
}

.stats-header-icon {
    font-size: 64px;
    margin-bottom: 12px;
    animation: iconFloat 4s ease-in-out infinite;
}

.stats-header-title {
    color: var(--color-accent);
    margin: 0 0 16px 0;
    font-size: 24px;
    font-weight: 800;
    font-family: var(--font-display);
    text-shadow: 0 2px 12px rgba(var(--color-accent-rgb), 0.3);
}

.stats-win-rate-badge {
    display: inline-block;
    padding: 16px 32px;
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(20, 26, 23, 0.6) 100%
    );
    border-radius: 14px;
    border: 2px solid var(--color-accent);
    backdrop-filter: blur(10px);
    box-shadow: 
        0 8px 24px rgba(var(--color-accent-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stats-win-rate-value {
    font-size: 48px;
    font-weight: 900;
    font-family: var(--font-display);
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        #f472b6 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    animation: scoreCount 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stats-win-rate-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 6px;
}

/* Stats Grid - Main Statistics */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card {
    padding: 18px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 2px;
    opacity: 0.8;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.stat-card-wins {
    background: linear-gradient(135deg,
        rgba(74, 222, 128, 0.15) 0%,
        rgba(34, 197, 94, 0.1) 100%
    );
    border-color: rgba(74, 222, 128, 0.3);
}

.stat-card-wins::before {
    background: var(--color-success);
}

.stat-card-wins:hover {
    border-color: rgba(74, 222, 128, 0.5);
    box-shadow: 0 12px 32px rgba(74, 222, 128, 0.2);
}

.stat-card-losses {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.15) 0%,
        rgba(220, 38, 38, 0.1) 100%
    );
    border-color: rgba(239, 68, 68, 0.3);
}

.stat-card-losses::before {
    background: var(--color-error);
}

.stat-card-losses:hover {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 12px 32px rgba(239, 68, 68, 0.2);
}

.stat-card-games {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.15) 0%,
        rgba(37, 99, 235, 0.1) 100%
    );
    border-color: rgba(59, 130, 246, 0.3);
}

.stat-card-games::before {
    background: var(--color-info);
}

.stat-card-games:hover {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.2);
}

.stat-card-points {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.15) 0%,
        rgba(234, 179, 8, 0.1) 100%
    );
    border-color: rgba(var(--color-accent-rgb), 0.3);
}

.stat-card-points::before {
    background: var(--color-accent);
}

.stat-card-points:hover {
    border-color: rgba(var(--color-accent-rgb), 0.5);
    box-shadow: 0 12px 32px rgba(var(--color-accent-rgb), 0.2);
}

.stat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.stat-card-icon {
    font-size: 32px;
}

.stat-card-badge {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    backdrop-filter: blur(5px);
}

.stat-card-value {
    font-size: 36px;
    font-weight: 900;
    font-family: var(--font-display);
    margin-bottom: 6px;
    line-height: 1;
}

.stat-card-wins .stat-card-value {
    color: var(--color-success);
    text-shadow: 0 2px 12px rgba(74, 222, 128, 0.4);
}

.stat-card-losses .stat-card-value {
    color: var(--color-error);
    text-shadow: 0 2px 12px rgba(239, 68, 68, 0.4);
}

.stat-card-games .stat-card-value {
    color: var(--color-info);
    text-shadow: 0 2px 12px rgba(59, 130, 246, 0.4);
}

.stat-card-points .stat-card-value {
    color: var(--color-accent);
    text-shadow: 0 2px 12px rgba(var(--color-accent-rgb), 0.4);
}

.stat-card-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

/* Stats Progress Bar */
.stats-progress-container {
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    margin-bottom: 20px;
}

.stats-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.stats-progress-label {
    font-size: 13px;
    font-weight: 700;
    color: white;
}

.stats-progress-value {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-accent);
    text-shadow: 0 1px 8px rgba(var(--color-accent-rgb), 0.3);
}

.stats-progress-track {
    height: 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-progress-bar {
    height: 100%;
    background: linear-gradient(90deg,
        var(--color-success) 0%,
        var(--color-accent) 100%
    );
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.5);
    animation: fillBar 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fillBar {
    from { width: 0; }
}

/* Stats Streaks */
.stats-streak-card {
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 12px;
}

.stats-streak-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(74, 222, 128, 0.3);
    transform: translateX(4px);
    box-shadow: 0 8px 24px rgba(74, 222, 128, 0.15);
}

.stats-streak-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg,
        var(--color-success) 0%,
        #22c55e 100%
    );
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.4);
    flex-shrink: 0;
}

.stats-streak-content {
    flex: 1;
}

.stats-streak-value {
    font-size: 24px;
    font-weight: 800;
    font-family: var(--font-display);
    color: var(--color-success);
    line-height: 1;
    margin-bottom: 4px;
    text-shadow: 0 2px 12px rgba(74, 222, 128, 0.4);
}

.stats-streak-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

/* Stats Records Section */
.stats-records {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.stats-record-item {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.stats-record-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(var(--color-accent-rgb), 0.2);
    transform: translateX(2px);
}

.stats-record-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-record-label .material-symbols-rounded {
    font-size: 18px;
    color: var(--color-accent);
}

.stats-record-value {
    font-size: 16px;
    font-weight: 800;
    font-family: var(--font-display);
    color: var(--color-accent);
}

/* Mobile Responsive Stats */
@media (max-width: 768px) {
    .stats-header {
        padding: 24px 16px;
    }

    .stats-header-icon {
        font-size: 52px;
    }

    .stats-header-title {
        font-size: 20px;
    }

    .stats-win-rate-badge {
        padding: 12px 24px;
    }

    .stats-win-rate-value {
        font-size: 38px;
    }

    .stats-grid {
        gap: 10px;
    }

    .stat-card {
        padding: 14px;
    }

    .stat-card-icon {
        font-size: 28px;
    }

    .stat-card-value {
        font-size: 28px;
    }

    .stat-card-label {
        font-size: 11px;
    }

    .stats-streak-icon {
        width: 42px;
        height: 42px;
        font-size: 22px;
    }

    .stats-streak-value {
        font-size: 20px;
    }
}

/* ================================================================================================
   17. MODALS - Premium UX/UI Design
================================================================================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center,
        rgba(var(--color-accent-rgb), 0.03) 0%,
        transparent 50%
    );
    pointer-events: none;
}

@keyframes modalShimmer {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    /* Position → Bootstrap: .position-relative */
    position: relative;
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    background: linear-gradient(145deg,
        rgba(20, 26, 23, 0.98) 0%,
        rgba(10, 14, 13, 0.95) 50%,
        rgba(15, 20, 18, 0.98) 100%
    );
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 20px;
    box-shadow: 
        0 0 0 1px rgba(var(--glow-color), 0.15),
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 16px 64px rgba(0, 0, 0, 0.4),
        var(--glow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(40px);
    overflow: hidden;
    transform: scale(0.85) translateY(40px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.4) 50%,
        transparent 100%
    );
    animation: topGlowScan 3s ease-in-out infinite;
}

@keyframes topGlowScan {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.modal-overlay.active .modal-container {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Close Button - Premium Design */
.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    /* Flexbox layout → Bootstrap: .d-flex .align-items-center .justify-content-center */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, 
        rgba(239, 68, 68, 0.15) 0%, 
        rgba(220, 38, 38, 0.15) 100%
    );
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 12px rgba(239, 68, 68, 0.2),
        0 0 20px rgba(239, 68, 68, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: fixed;
    overflow: hidden;
}

.modal-close::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.modal-close:hover::before {
    width: 150px;
    height: 150px;
}

.modal-close:hover {
    background: linear-gradient(135deg, 
        rgba(239, 68, 68, 0.3) 0%, 
        rgba(220, 38, 38, 0.3) 100%
    );
    border-color: rgba(239, 68, 68, 0.7);
    transform: rotate(90deg) scale(1.15);
    box-shadow: 
        0 8px 24px rgba(239, 68, 68, 0.4),
        0 0 40px rgba(239, 68, 68, 0.35),
        0 0 60px rgba(239, 68, 68, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.modal-close .material-symbols-rounded {
    font-size: 20px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.modal-close:active {
    transform: rotate(90deg) scale(0.95);
    box-shadow: 
        0 4px 12px rgba(239, 68, 68, 0.3),
        0 0 30px rgba(239, 68, 68, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Modal Header - Enhanced */
.modal-header {
    position: relative;
    /* Flexbox layout → Bootstrap: .d-flex .align-items-center .gap-3 */
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.15);
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.03) 0%,
        rgba(26, 77, 46, 0.05) 100%
    );
}

.modal-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.5) 50%,
        transparent 100%
    );
}

.modal-icon {
    position: relative;
    font-size: 42px;
    width: 56px;
    height: 56px;
    /* Flexbox layout → Bootstrap: .d-flex .align-items-center .justify-content-center */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.15) 0%,
        rgba(var(--color-accent-rgb), 0.08) 100%
    );
    border: 2px solid rgba(var(--color-accent-rgb), 0.3);
    border-radius: 16px;
    box-shadow: 
        0 8px 24px rgba(var(--color-accent-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: iconFloat 4s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-6px) rotate(-3deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(6px) rotate(3deg); }
}

.modal-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(135deg, 
        rgba(var(--color-accent-rgb), 0.4), 
        transparent
    );
    border-radius: 18px;
    filter: blur(8px);
    opacity: 0.6;
    z-index: -1;
    animation: iconGlow 3s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.modal-header h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        var(--color-accent-light) 40%,
        var(--color-accent) 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 20px rgba(var(--color-accent-rgb), 0.3);
    letter-spacing: 0.5px;
    margin: 0;
    animation: textShine 5s linear infinite;
}

@keyframes textShine {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Modal Body - Enhanced Scrolling */
.modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(85vh - 140px);
    /* Custom Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-accent-rgb), 0.5) rgba(255, 255, 255, 0.05);
}

.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(var(--color-accent-rgb), 0.6) 0%,
        rgba(var(--color-accent-rgb), 0.3) 100%
    );
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
        rgba(var(--color-accent-rgb), 0.8) 0%,
        rgba(var(--color-accent-rgb), 0.5) 100%
    );
}

/* ================================================================================================
   RULES MODAL — Professional Structured Layout
   All colors use theme CSS variables → auto-adapts to every theme
================================================================================================ */

/* Section Cards */
.rules-section {
    background: rgba(var(--color-accent-rgb), 0.03);
    border: 1px solid rgba(var(--color-accent-rgb), 0.1);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.rules-section:hover {
    border-color: rgba(var(--color-accent-rgb), 0.2);
    box-shadow: var(--glow-xs);
}

.rules-section-highlight {
    border-color: rgba(var(--color-accent-rgb), 0.25);
    background: rgba(var(--color-accent-rgb), 0.06);
}

.rules-section-tips {
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.04), rgba(var(--color-accent-rgb), 0.02));
}

/* Section Header — clickable toggle */
.rules-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.rules-section-header:hover {
    background: rgba(var(--color-accent-rgb), 0.06);
}

.rules-section-header h3 {
    flex: 1;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.2px;
}

.rules-icon {
    font-size: 1.25rem;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.rules-chevron {
    font-size: 20px;
    color: var(--color-text-disabled);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.rules-section.collapsed .rules-chevron {
    transform: rotate(-90deg);
}

/* Section Body — collapsible */
.rules-section-body {
    padding: 0 16px 14px;
    transition: all 0.3s ease;
}

.rules-section.collapsed .rules-section-body {
    display: none;
}

.rules-section-body p {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    line-height: 1.65;
    margin: 0 0 8px;
}

.rules-section-body p:last-child {
    margin-bottom: 0;
}

.rules-section-body strong {
    color: var(--color-accent);
}

/* 2-Column Info Cards */
.rules-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rules-info-card {
    background: rgba(var(--color-accent-rgb), 0.06);
    border: 1px solid rgba(var(--color-accent-rgb), 0.12);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.rules-info-card:hover {
    border-color: rgba(var(--color-accent-rgb), 0.25);
    box-shadow: var(--glow-xs);
    transform: translateY(-1px);
}

.rules-info-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}

.rules-info-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-accent);
    text-shadow: var(--glow-text);
    line-height: 1.2;
}

.rules-info-desc {
    font-size: 0.72rem;
    color: var(--color-text-disabled);
    margin-top: 4px;
}

/* Points Row */
.rules-points-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.rules-point-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    flex: 1;
    min-width: 100px;
}

.rules-point-badge.points-high {
    background: rgba(var(--color-accent-rgb), 0.12);
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
}

.rules-point-badge.points-zero {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.card-rank {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-accent);
}

.points-zero .card-rank {
    color: var(--color-text-disabled);
    font-size: 0.8rem;
}

.point-val {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}

/* Callout / Info Box */
.rules-callout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(var(--color-accent-rgb), 0.06);
    border-left: 3px solid rgba(var(--color-accent-rgb), 0.5);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.rules-callout .material-symbols-rounded {
    font-size: 18px;
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 1px;
}

.rules-callout.callout-warn {
    background: rgba(245, 158, 11, 0.06);
    border-left-color: rgba(245, 158, 11, 0.6);
}

.rules-callout.callout-warn .material-symbols-rounded {
    color: #f59e0b;
}

/* Numbered Steps */
.rules-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rules-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.83rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    transition: all 0.2s ease;
}

.rules-step:hover {
    background: rgba(var(--color-accent-rgb), 0.04);
    border-color: rgba(var(--color-accent-rgb), 0.1);
}

.step-num {
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb), 0.15);
    color: var(--color-accent);
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* Cut/Capture Cards */
.rules-cut-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.rules-cut-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.rules-cut-item:hover {
    border-color: rgba(var(--color-accent-rgb), 0.2);
    background: rgba(var(--color-accent-rgb), 0.04);
}

.rules-cut-item.cut-special {
    border-color: rgba(var(--color-accent-rgb), 0.2);
    background: rgba(var(--color-accent-rgb), 0.06);
}

.cut-card-icon {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.2), rgba(var(--color-accent-rgb), 0.08));
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-accent);
    flex-shrink: 0;
    box-shadow: var(--glow-xs);
}

.cut-desc {
    font-size: 0.83rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.cut-desc strong {
    color: var(--color-accent);
}

/* Tips */
.rules-tips {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rules-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.83rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    background: rgba(var(--color-accent-rgb), 0.03);
    border: 1px solid rgba(var(--color-accent-rgb), 0.06);
    transition: all 0.2s ease;
}

.rules-tip:hover {
    background: rgba(var(--color-accent-rgb), 0.06);
    border-color: rgba(var(--color-accent-rgb), 0.15);
    transform: translateX(3px);
}

.tip-icon {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-accent);
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    filter: drop-shadow(0 0 4px rgba(var(--color-accent-rgb), 0.3));
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .rules-grid-2 {
        grid-template-columns: 1fr;
    }
    
    .rules-points-row {
        flex-direction: column;
    }
    
    .rules-section-header {
        padding: 10px 12px;
    }
    
    .rules-section-body {
        padding: 0 12px 12px;
    }
}

/* ================================================================================================
   END RULES MODAL
================================================================================================ */

/* Rules Panel (inside context-panel) */
.rules-panel-wrap {
    padding: 12px;
}
.rules-panel-wrap .rules-section {
    margin-bottom: 8px;
}
.rules-panel-wrap .rules-section-header h3 {
    font-size: 0.88rem;
}

/* Settings Modal - Premium Cards */
.settings-modal {
    max-width: 550px;
}

/* Game Setup Modal - Premium Design */
.game-setup-modal {
    max-width: 650px;
}

.setup-section {
   /* margin-bottom: 24px;*/
}

.setup-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.setup-label .material-symbols-rounded {
    font-size: 20px;
    color: var(--color-accent);
}

/* Player Count Options */
.player-count-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.count-option-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.count-option-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.15) 0%,
        rgba(var(--color-accent-rgb), 0.05) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.count-option-btn:hover::before,
.count-option-btn.active::before {
    opacity: 1;
}

.count-option-btn:hover {
    border-color: rgba(var(--color-accent-rgb), 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), 0.2);
}

.count-option-btn.active {
    border-color: var(--color-accent);
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.2) 0%,
        rgba(var(--color-accent-rgb), 0.1) 100%
    );
    box-shadow:
        0 0 20px rgba(var(--color-accent-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.count-number {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text-primary);
    position: relative;
    z-index: 1;
}

.count-option-btn.active .count-number {
    color: var(--color-accent);
}

.count-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 4px;
    position: relative;
    z-index: 1;
}

/* Difficulty Options */
.difficulty-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.difficulty-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 13px;
    color: var(--color-text-secondary);
}

.difficulty-btn .material-symbols-rounded {
    font-size: 28px;
}

.difficulty-btn:hover {
    border-color: rgba(var(--color-accent-rgb), 0.4);
    transform: translateY(-2px);
}

.difficulty-btn.active {
    border-color: var(--color-accent);
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.15) 0%,
        rgba(var(--color-accent-rgb), 0.08) 100%
    );
    color: var(--color-text-primary);
}

.difficulty-btn[data-difficulty="easy"] .material-symbols-rounded {
    color: #10b981;
}

.difficulty-btn[data-difficulty="medium"] .material-symbols-rounded {
    color: #f59e0b;
}

.difficulty-btn[data-difficulty="hard"] .material-symbols-rounded {
    color: #ef4444;
}

.diff-name {
    font-weight: 700;
    font-size: 13px;
}

.diff-stars {
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 1;
}

.diff-desc {
    font-size: 10px;
    color: var(--color-text-disabled);
    font-style: italic;
}

.difficulty-btn.active .diff-desc {
    color: var(--color-text-tertiary);
}

/* Setup Info */
.setup-info {
    padding: 16px;
    background: rgba(var(--color-accent-rgb), 0.05);
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    border-radius: 12px;
    margin-top: 24px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.info-item .material-symbols-rounded {
    color: var(--color-accent);
    font-size: 20px;
}

.settings-section {
    margin-bottom: 16px;
    padding: 16px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.01) 100%
    );
    border: 1px solid rgba(var(--color-accent-rgb), 0.1);
    border-radius: 14px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.settings-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.05) 50%,
        transparent 100%
    );
    transition: all 0.6s ease;
}

.settings-section:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(var(--color-accent-rgb), 0.03) 100%
    );
    border-color: rgba(var(--color-accent-rgb), 0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(var(--color-accent-rgb), 0.15);
}

.settings-section:hover::before {
    left: 100%;
}

.settings-section h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.3);
}

.setting-item {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.setting-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.setting-item:hover {
    padding-left: 8px;
}

.setting-item label {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.setting-item label:hover {
    color: var(--color-text-primary);
}

/* Premium Toggle Switch */
.setting-item input[type="checkbox"] {
    appearance: none;
    width: 56px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.setting-item input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--color-text-secondary) 0%, var(--color-text-tertiary) 100%);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.setting-item input[type="checkbox"]:checked {
    background: linear-gradient(135deg, 
        rgba(var(--color-accent-rgb), 0.8) 0%, 
        rgba(var(--color-accent-rgb), 0.6) 100%
    );
    border-color: rgba(var(--color-accent-rgb), 0.8);
    box-shadow: 
        inset 0 2px 8px rgba(var(--color-accent-rgb), 0.3),
        0 0 16px rgba(var(--color-accent-rgb), 0.4);
}

.setting-item input[type="checkbox"]:checked::before {
    transform: translateX(28px);
    background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 100%);
    box-shadow: 0 2px 12px rgba(var(--color-accent-rgb), 0.6);
}

/* Premium Range Slider */
.setting-item input[type="range"] {
    flex: 1;
    height: 8px;
    background: linear-gradient(90deg,
        rgba(var(--color-accent-rgb), 0.2) 0%,
        rgba(var(--color-accent-rgb), 0.05) 100%
    );
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    border-radius: 4px;
    outline: none;
    appearance: none;
    margin: 0 16px;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
}

.setting-item input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        var(--color-accent-dark) 100%
    );
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    box-shadow:
        0 2px 8px rgba(var(--color-accent-rgb), 0.5),
        0 0 0 4px rgba(var(--color-accent-rgb), 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.setting-item input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.3);
    box-shadow:
        0 4px 16px rgba(var(--color-accent-rgb), 0.7),
        0 0 0 6px rgba(var(--color-accent-rgb), 0.2);
}

.setting-item input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.15);
}

.setting-item input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.5);
}

#volumeValue {
    min-width: 52px;
    text-align: center;
    font-weight: 700;
    color: var(--color-accent);
    text-shadow: 0 1px 4px rgba(var(--color-accent-rgb), 0.3);
}

/* Settings Buttons - Premium CTAs */
.settings-buttons {
    /* Flexbox layout → Bootstrap: .d-flex .gap-3 .mt-4 */
    display: flex;
    gap: 12px;
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid rgba(var(--color-accent-rgb), 0.15);
}

.settings-buttons .btn {
    flex: 1;
    padding: 14px 28px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}

.settings-buttons .btn .material-symbols-rounded {
    font-size: 20px;
    transition: all 0.3s ease;
}

.settings-buttons .btn:hover .material-symbols-rounded {
    transform: scale(1.2) rotate(10deg);
}

.settings-buttons .btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.settings-buttons .btn:hover::before {
    width: 300px;
    height: 300px;
}

/* Theme Selector in Settings */
.theme-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
}

@media (max-width: 576px) {
    .theme-selector {
        grid-template-columns: repeat(2, 1fr);
    }
}

.theme-option {
    position: relative;
    padding: 16px 12px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.01) 100%
    );
    border: 2px solid rgba(var(--color-accent-rgb), 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.theme-option:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(var(--color-accent-rgb), 0.03) 100%
    );
    border-color: rgba(var(--color-accent-rgb), 0.4);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(var(--color-accent-rgb), 0.2);
}

.theme-option.active {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.15) 0%,
        rgba(var(--color-accent-rgb), 0.08) 100%);
    border-color: var(--color-accent);
    box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.3);
}

.theme-preview {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 10px;
}

.theme-color {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: color 0.3s ease;
}

.theme-option.active .theme-name {
    color: var(--color-accent);
}

.theme-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: var(--color-accent);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #0a0e0d;
}

.theme-option.active .theme-check {
    display: flex;
}

.settings-buttons .btn-primary {
    background: linear-gradient(135deg, 
        rgba(var(--color-accent-rgb), 0.95) 0%, 
        rgba(var(--color-accent-rgb), 0.95) 100%
    );
    border: 2px solid rgba(var(--color-accent-rgb), 0.6);
    color: #0a0e0d;
    box-shadow: 
        0 8px 24px rgba(var(--color-accent-rgb), 0.35),
        0 0 30px rgba(var(--color-accent-rgb), 0.25),
        0 0 50px rgba(var(--color-accent-rgb), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.settings-buttons .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 36px rgba(var(--color-accent-rgb), 0.5),
        0 0 40px rgba(var(--color-accent-rgb), 0.4),
        0 0 70px rgba(var(--color-accent-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.settings-buttons .btn-primary:active {
    transform: translateY(-1px);
    box-shadow: 
        0 6px 20px rgba(var(--color-accent-rgb), 0.4),
        0 0 35px rgba(var(--color-accent-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.settings-buttons .btn-secondary {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.03) 100%
    );
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-secondary);
    box-shadow: 
        0 4px 12px rgba(255, 255, 255, 0.08),
        0 0 20px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.settings-buttons .btn-secondary:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.06) 100%
    );
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--color-text-primary);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(255, 255, 255, 0.15),
        0 0 30px rgba(255, 255, 255, 0.1),
        0 0 50px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.settings-buttons .btn-secondary:active {
    transform: translateY(0);
    box-shadow: 
        0 4px 16px rgba(255, 255, 255, 0.12),
        0 0 25px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.settings-buttons .btn > span {
    position: relative;
    z-index: 1;
}

/* Individual Setting Buttons */
.setting-item button {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.15) 0%,
        rgba(var(--color-accent-rgb), 0.08) 100%
    );
    border: 2px solid rgba(var(--color-accent-rgb), 0.3);
    border-radius: 10px;
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.setting-item button:hover {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.9) 0%,
        rgba(var(--color-accent-rgb), 0.9) 100%
    );
    color: var(--color-bg);
    transform: translateY(-3px);
    box-shadow: 
        0 8px 24px rgba(var(--color-accent-rgb), 0.5),
        0 0 30px rgba(var(--color-accent-rgb), 0.4),
        0 0 50px rgba(var(--color-accent-rgb), 0.2);
    border-color: rgba(var(--color-accent-rgb), 0.7);
}

.setting-item button:active {
    transform: translateY(-1px);
    box-shadow: 
        0 5px 16px rgba(var(--color-accent-rgb), 0.4),
        0 0 25px rgba(var(--color-accent-rgb), 0.3);
}

/* Rules Modal - Enhanced Content */
.modal-body p {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 16px;
}

.modal-body p:last-child {
    margin-bottom: 0;
}

.modal-body strong {
    color: var(--color-accent);
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(var(--color-accent-rgb), 0.2);
}

.modal-body ul, .modal-body ol {
    margin: 16px 0;
    padding-left: 28px;
}

.modal-body li {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 10px;
    position: relative;
}

.modal-body li::marker {
    color: var(--color-accent);
    font-weight: 700;
}

/* Game End Modal - Victory/Defeat Celebration */
.result-container {
    text-align: center;
    padding: 32px 0;
}

/* ====== GAME END MODAL - Professional Layout ====== */
.game-end-modal {
    max-width: 420px !important;
    width: 92% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.game-end-modal > .modal-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 28px 24px 20px !important;
    text-align: center !important;
    gap: 0 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.result-animation {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.result-animation::before {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle,
        rgba(var(--color-accent-rgb), 0.25) 0%,
        transparent 70%
    );
    border-radius: 50%;
    animation: resultPulse 2.5s ease-in-out infinite;
}

@keyframes resultPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 0.9; }
}

.result-animation .material-symbols-rounded {
    font-size: 56px;
    z-index: 1;
    animation: resultBounce 1.5s cubic-bezier(0.68, -0.35, 0.265, 1.35) infinite;
}

@keyframes resultBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.result-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        var(--color-accent-light) 50%,
        var(--color-accent) 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 14px 0;
    letter-spacing: 1px;
    animation: titlePulse 3s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes titlePulse {
    0%, 100% { 
        background-position: 0% 50%;
    }
    50% { 
        background-position: 100% 50%;
    }
}

.result-score {
    font-size: 48px;
    font-weight: 900;
    font-family: var(--font-display);
    background: linear-gradient(180deg,
        var(--color-accent) 0%,
        var(--color-accent-dark) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 16px 0;
    animation: scoreCount 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scoreCount {
    0% { 
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    100% { 
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.result-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    width: 100%;
}

.result-stat {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s ease;
}

.result-stat:first-child {
    border-radius: 8px 8px 0 0;
}

.result-stat:last-child {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

.result-stat:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: none;
    box-shadow: none;
}

.result-stat-value {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--color-accent);
    display: inline;
    margin-bottom: 0;
    text-shadow: none;
}

.result-stat-label {
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* Auto-rematch toggle switch */
.auto-rematch-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 4px;
    width: 100%;
}

.auto-rematch-toggle label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease;
}

.auto-rematch-toggle label:hover {
    background: rgba(255, 255, 255, 0.06);
}

.rematch-switch {
    position: relative;
    width: 34px;
    height: 18px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9px;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.rematch-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: transform 0.3s ease, background 0.3s ease;
}

#autoRematchToggle:checked + .rematch-switch {
    background: var(--color-success, #4caf50);
}

#autoRematchToggle:checked + .rematch-switch::after {
    transform: translateX(16px);
    background: var(--color-accent-light);
}

.auto-rematch-toggle label:hover .rematch-switch {
    background: rgba(255, 255, 255, 0.25);
}

#autoRematchToggle:checked + .rematch-switch:hover {
    background: color-mix(in srgb, var(--color-success, #4caf50) 80%, white);
}

#autoRematchCountdown {
    font-weight: 600;
    font-size: 12px;
    color: var(--color-accent);
    text-align: center;
    margin-bottom: 4px;
    animation: pulse-countdown 1s ease-in-out infinite;
}

@keyframes pulse-countdown {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.result-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    width: 100%;
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--color-bg-card, #1a1f2e);
    padding: 12px 0 4px;
}

.result-actions .btn,
.result-actions .btn-control {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border-radius: 10px;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: none;
    min-height: 40px;
}

.result-actions .btn .material-symbols-rounded,
.result-actions .btn-control .material-symbols-rounded {
    font-size: 24px;
    transition: all 0.3s ease;
}

.result-actions .btn:hover .material-symbols-rounded,
.result-actions .btn-control:hover .material-symbols-rounded {
    transform: scale(1.3) rotate(-10deg);
}

.result-actions .btn::after,
.result-actions .btn-control::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: 0;
}

.result-actions .btn:hover::after,
.result-actions .btn-control:hover::after {
    width: 400px;
    height: 400px;
}

.result-actions .btn > span,
.result-actions .btn-control > span {
    position: relative;
    z-index: 1;
}

.result-actions .btn-primary,
.result-actions .btn-control.btn-primary {
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.95) 0%,
        rgba(var(--color-accent-rgb), 0.95) 100%
    );
    border: 2px solid rgba(var(--color-accent-rgb), 0.6);
    color: #0a0e0d;
    box-shadow: 
        0 10px 30px rgba(var(--color-accent-rgb), 0.4),
        0 0 40px rgba(var(--color-accent-rgb), 0.3),
        0 0 60px rgba(var(--color-accent-rgb), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.result-actions .btn-primary:hover,
.result-actions .btn-control.btn-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 16px 40px rgba(var(--color-accent-rgb), 0.6),
        0 0 50px rgba(var(--color-accent-rgb), 0.45),
        0 0 80px rgba(var(--color-accent-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.result-actions .btn-primary:active,
.result-actions .btn-control.btn-primary:active {
    transform: translateY(-2px) scale(1);
    box-shadow: 
        0 8px 24px rgba(var(--color-accent-rgb), 0.5),
        0 0 35px rgba(var(--color-accent-rgb), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.result-actions .btn-secondary,
.result-actions .btn-control.btn-secondary {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.15) 0%,
        rgba(220, 38, 38, 0.15) 100%
    );
    border: 2px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    box-shadow: 
        0 4px 12px rgba(239, 68, 68, 0.2),
        0 0 20px rgba(239, 68, 68, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.result-actions .btn-secondary:hover,
.result-actions .btn-control.btn-secondary:hover {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.25) 0%,
        rgba(220, 38, 38, 0.25) 100%
    );
    border-color: rgba(239, 68, 68, 0.5);
    transform: translateY(-3px);
    box-shadow: 
        0 10px 28px rgba(239, 68, 68, 0.35),
        0 0 35px rgba(239, 68, 68, 0.25),
        0 0 55px rgba(239, 68, 68, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.result-actions .btn-secondary:active,
.result-actions .btn-control.btn-secondary:active {
    transform: translateY(-1px);
    box-shadow: 
        0 6px 20px rgba(239, 68, 68, 0.3),
        0 0 30px rgba(239, 68, 68, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Mobile Responsive Modal Styles - Bottom Sheet Pattern */
@media (max-width: 768px) {
    /* Backdrop - mai transparent pentru a vedea masa */
    .modal-overlay {
        background: rgba(0, 0, 0, 0.6);
        align-items: flex-end;
        justify-content: center;
    }

    /* Bottom Sheet Container */
    .modal-container {
        width: 100%;
        max-width: 100%;
        max-height: 65vh;
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
        margin-bottom: 0;
        position: relative;
    }

    .modal-overlay.active .modal-container {
        transform: translateY(0);
    }

    /* Drag Handle Indicator */
    .modal-container::after {
        content: '';
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        z-index: 100;
    }

    .modal-close {
        width: 36px;
        height: 36px;
        top: 10px;
        right: 10px;
    }

    .modal-close .material-symbols-rounded {
        font-size: 18px;
    }

    .modal-header {
        padding: 20px 18px 14px;
        gap: 12px;
    }

    .modal-icon {
        width: 48px;
        height: 48px;
        font-size: 36px;
    }

    .modal-header h2 {
        font-size: 18px;
    }

    .modal-body {
        padding: 14px 18px 18px;
        max-height: calc(65vh - 110px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .settings-section {
        padding: 14px;
        margin-bottom: 14px;
    }

    .settings-section h3 {
        font-size: 16px;
    }

    .setting-item {
        padding: 14px 0;
    }

    .setting-item label {
        font-size: 14px;
        gap: 12px;
    }

    .settings-buttons {
        flex-direction: column;
        gap: 12px;
        padding-top: 20px;
        margin-top: 20px;
    }

    .settings-buttons .btn {
        width: 100%;
        padding: 14px 24px;
    }

    /* Game End Modal - Mobile Portrait */
    .game-end-modal {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        transform: translateY(100%) !important;
    }

    .modal-overlay.active .game-end-modal {
        transform: translateY(0) !important;
    }

    .game-end-modal > .modal-body {
        padding: 20px 16px 16px !important;
        max-height: 70vh !important;
    }

    .result-animation {
        width: 52px;
        height: 52px;
        margin: 0 auto 8px;
    }

    .result-animation::before {
        inset: -6px;
    }

    .result-animation .material-symbols-rounded {
        font-size: 40px;
    }

    .result-title {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .result-score {
        font-size: 40px;
        margin-bottom: 10px;
    }

    .result-ranking {
        margin: 6px 0 2px;
    }

    .ranking-table th {
        padding: 5px 8px;
        font-size: 9px;
    }

    .ranking-table td {
        padding: 6px 8px;
        font-size: 12px;
    }

    .ranking-table .rank-medal {
        font-size: 14px;
        width: 28px;
    }

    .ranking-table .rank-cards {
        font-size: 10px;
    }

    .ranking-table .rank-reward {
        font-size: 11px;
    }

    .ranking-table .rank-balance {
        font-size: 10px;
    }

    .bonus-tag {
        font-size: 8px;
        padding: 1px 3px;
    }

    .result-stats {
        margin: 0;
    }

    .result-stat {
        padding: 8px 12px;
    }

    .result-stat-value {
        font-size: 14px;
    }

    .result-stat-label {
        font-size: 11px;
    }

    .result-actions {
        flex-direction: row;
        gap: 8px;
        margin-top: 10px;
    }

    .result-actions .btn,
    .result-actions .btn-control {
        padding: 10px 12px;
        font-size: 12px;
        min-height: 38px;
        border-radius: 10px;
    }
}

/* Mobile Landscape - Ultra Compact Bottom Sheet */
@media (max-width: 768px) and (orientation: landscape) {
    /* Backdrop transparent pentru vizibilitate masă */
    .modal-overlay {
        background: rgba(0, 0, 0, 0.5);
        align-items: flex-end;
    }

    /* Bottom Sheet - mai jos în landscape */
    .modal-container {
        width: 100%;
        max-width: 100%;
        max-height: 70vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }

    .modal-overlay.active .modal-container {
        transform: translateY(0);
    }

    /* Drag Handle mai mic în landscape */
    .modal-container::after {
        top: 8px;
        width: 32px;
        height: 3px;
    }

    .modal-close {
        width: 32px;
        height: 32px;
        top: 8px;
        right: 8px;
    }

    .modal-close .material-symbols-rounded {
        font-size: 16px;
    }

    .modal-header {
        padding: 16px 16px 10px;
        gap: 10px;
    }

    .modal-icon {
        width: 40px;
        height: 40px;
        font-size: 30px;
        border-radius: 10px;
    }

    .modal-header h2 {
        font-size: 16px;
        letter-spacing: 0.3px;
    }

    .modal-body {
        padding: 12px 16px 16px;
        max-height: calc(70vh - 85px);
        font-size: 13px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-body p {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 12px;
    }

    .modal-body li {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 6px;
    }

    .settings-section {
        padding: 12px;
        margin-bottom: 10px;
    }

    .settings-section h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .setting-item {
        padding: 10px 0;
    }

    .setting-item label {
        font-size: 12px;
    }
}

/* Tablet Landscape Adjustments */
@media (min-width: 768px) and (max-width: 992px) and (orientation: landscape) {
    .modal-container {
        max-width: 700px;
        max-height: 80vh;
    }

    .modal-header {
        padding: 18px 22px;
    }

    .modal-body {
        max-height: calc(80vh - 130px);
        padding: 18px 22px;
    }

    .toast {
        bottom: 110px;
    }
}

/* ================================================================================================
   18. TOAST NOTIFICATIONS
================================================================================================ */
.toast {
    position: fixed;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    min-width: 280px;
    max-width: 90%;
    padding: 16px 24px;
    background: linear-gradient(135deg,
        rgba(20, 26, 23, 0.98) 0%,
        rgba(10, 14, 13, 0.98) 100%
    );
    border: 2px solid rgba(var(--color-accent-rgb), 0.3);
    border-radius: 12px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(var(--color-accent-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.toast-success {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(34, 197, 94, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.toast-info {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(59, 130, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.toast-warning {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(245, 158, 11, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.toast-error {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(239, 68, 68, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Mobile Toast Position */
@media (max-width: 768px) {
    .toast {
        bottom: 120px;
        min-width: 240px;
        padding: 14px 20px;
        font-size: 14px;
    }
}

/* ================================================================================================
   19. PARTICLE CONTAINER
================================================================================================ */
.particle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--viewport-height-dynamic, 100%);
    pointer-events: none;
    z-index: 9999;
    /* ✅ Performance: layer promotion only when animating */
    will-change: auto; /* Remove permanent will-change */
}

/* ================================================================================================
   20. ANIMATIONS & KEYFRAMES
================================================================================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

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

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(var(--color-accent-rgb), 0.6);
    }
}

@keyframes confetti {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ================================================================================================
   21. RESPONSIVE BREAKPOINTS
================================================================================================ */

/* Tablet Landscape (1366px) */
@media (max-width: 1366px) {
    :root {
        --top-bar-height: 65px; /* Responsive: slightly smaller */
        --context-panel-width: 280px;
    }
    
    .stats-layer {
        padding: 0 var(--space-md);
    }
    
    .stat-item {
        padding: var(--space-sm) var(--space-md);
    }
}

/* Tablet Portrait (1024px) */
@media (max-width: 1024px) and (orientation: landscape) {
    :root {
        --nav-rail-width: 56px;
        --top-bar-height: 60px; /* Mobile: compact */
    }

    /* Mobile First: nav-label hidden by default in base CSS */
    /* Stats-layer visibility now controlled by Bootstrap classes in HTML */

    .brand-layer {
        padding: var(--space-md);
    }

    /* LANDSCAPE ONLY: Context panel overlay din dreapta */
    /* Bootstrap .col-auto flex properties don't apply when position: absolute */
    .context-panel {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        /* FORCE display flex for scroll to work */
        display: flex !important;
        flex-direction: column !important;
        flex: none; /* Reset Bootstrap flexbox */
        width: var(--context-panel-width); /* Use width (not flex-basis) for absolute positioning */
        max-width: none; /* Allow full variable width */
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5);
    }

    /* Hidden state with absolute positioning: use width instead of flex-basis */
    .context-panel.hidden {
        width: 0; /* Override flex-basis when position: absolute */
    }
}

/* ================================================================================================
   22. UTILITY CLASSES
================================================================================================ */
.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden !important;
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

.slide-in-left {
    animation: slideInLeft 0.3s ease-out;
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

.glow {
    animation: glow 2s ease-in-out infinite;
}

.no-scroll {
    overflow: visible !important;
}

.text-gradient {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ================================================================================================
   MOBILE RESPONSIVE & ORIENTATION
================================================================================================ */

/* Orientation Warning Overlay */
.orientation-warning {
    display: none;
    position: fixed;
    inset: 0; /* ✅ Modern shorthand for top/right/bottom/left: 0 */
    width: 100%; /* ✅ Explicit width for iOS Safari */
    height: var(--viewport-height-dynamic, 100vh); /* ✅ iOS Safari fix */
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-primary) 100%);
    z-index: 999999;
    /* Flexbox layout → Bootstrap: .d-flex .align-items-center .justify-content-center */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.orientation-warning.show {
    display: flex !important;
    opacity: 1;
    pointer-events: all;
}

.orientation-content {
    /* Text alignment → Bootstrap: .text-center */
    padding: 40px;
    animation: pulse 2s ease-in-out infinite;
}

.phone-icon {
    font-size: 100px;
    margin-bottom: 20px;
    animation: shake 1s ease-in-out infinite;
}

.rotate-arrow {
    font-size: 80px;
    color: var(--color-accent);
    margin-bottom: 20px;
    animation: spin 2s linear infinite;
}

.orientation-content h2 {
    color: white;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 12px;
}

.orientation-content p {
    color: rgba(255,255,255,0.7);
    font-size: 16px;
}

@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

/* Responsive: Only show warning on mobile portrait - hide by default */
.orientation-warning {
    display: none !important;
}

@media (max-width: 768px) and (orientation: portrait) {
    .orientation-warning.show {
        display: flex !important;
    }

    /* stats-layer removed from top-bar (now in dropdown) */

    /* CRITICAL: Permite context-panel să iasă din main-content */
    .main-content {
        overflow: visible !important;
        position: relative !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       GAME ACTIVE STATE — Panel overlay (position: absolute)
       ═══════════════════════════════════════════════════════════════ */

    /* Base - Performance optimization (doar când joc activ) */
    body.game-active .app-container,
    body.game-active .game-canvas,
    body.game-active .game-play-container,
    body.game-active .context-panel {
        will-change: transform, opacity;
    }

    /* ═══════════════════════════════════════════════════════════════
       CONTEXT PANEL ACTIV ÎN JOC — Comprimare în 50vh
       Panel-ul e position:fixed bottom sheet (50vh).
       Jocul trebuie comprimat în jumătatea de sus vizibilă.
       ═══════════════════════════════════════════════════════════════ */

    /* Ascunde header-ul când panel activ — scoate din flow complet */
    body.game-active:has(.context-panel.active) .top-bar {
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        padding: 0 !important;
        border: none !important;
        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.25s ease-out !important;
    }

    /* App container: overflow hidden, fără padding-bottom extra */
    body.game-active:has(.context-panel.active) .app-container {
        overflow: hidden !important;
        padding-bottom: 0 !important;
    }

    /* Main content: fără padding (header ascuns, footer sub panel) */
    body.game-active:has(.context-panel.active) .main-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Game canvas: EXACT 50vh — elimină gap-ul dintre joc și panel */
    body.game-active:has(.context-panel.active) .game-canvas {
        height: 50dvh !important;
        min-height: 50dvh !important;
        max-height: 50dvh !important;
        overflow: hidden !important;
        padding-bottom: 0 !important;
        flex: none !important;
    }

    /* Grid-ul jocului: toate auto + space-between — north sus, south jos, table centrat */
    body.game-active:has(.context-panel.active) .game-play-container,
    body.game-active:has(.context-panel.active) .game-play-container.game-2p,
    body.game-active:has(.context-panel.active) .game-play-container.game-3p,
    body.game-active:has(.context-panel.active) .game-play-container.game-4p {
        grid-template-rows: auto auto auto !important;
        align-content: space-between !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    /* Oponenți: compact dar vizibili */
    body.game-active:has(.context-panel.active) .seat-north,
    body.game-active:has(.context-panel.active) .seat-west,
    body.game-active:has(.context-panel.active) .seat-east {
        max-height: 44px !important;
        overflow: hidden !important;
    }

    body.game-active:has(.context-panel.active) .seat-north .seat-hand,
    body.game-active:has(.context-panel.active) .seat-west .seat-hand,
    body.game-active:has(.context-panel.active) .seat-east .seat-hand {
        max-height: 30px !important;
        padding: 1px !important;
    }

    body.game-active:has(.context-panel.active) .seat-north .player-info,
    body.game-active:has(.context-panel.active) .seat-west .player-info,
    body.game-active:has(.context-panel.active) .seat-east .player-info {
        padding: 1px 4px !important;
        min-height: 0 !important;
    }

    body.game-active:has(.context-panel.active) .seat-north .player-meta,
    body.game-active:has(.context-panel.active) .seat-west .player-meta,
    body.game-active:has(.context-panel.active) .seat-east .player-meta {
        display: none !important;
    }

    /* User (sud): compact, cărți vizibile */
    body.game-active:has(.context-panel.active) .seat-south {
        overflow: hidden !important;
        gap: 0 !important;
    }

    body.game-active:has(.context-panel.active) .seat-south .seat-hand {
        max-height: 50px !important;
        padding: 1px !important;
    }

    body.game-active:has(.context-panel.active) .seat-south .player-info {
        min-height: 0 !important;
        padding: 1px 4px !important;
    }

    body.game-active:has(.context-panel.active) .seat-south .player-meta {
        display: none !important;
    }

    /* Table area: zero padding, compact */
    body.game-active:has(.context-panel.active) .table-area {
        padding: 0 !important;
        overflow: hidden !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.game-active:has(.context-panel.active) .table-felt {
        padding: 4px !important;
        border-radius: 8px !important;
        overflow: hidden !important;     /* clipează orice element care iese din felt */
        position: relative !important;   /* asigură că absolute children sunt ancorate */
    }

    /* Table cards — centrate, nu depășesc felt-ul */
    body.game-active:has(.context-panel.active) .table-cards {
        max-height: 70px !important;     /* limitat la spațiul disponibil în felt */
        overflow: visible !important;    /* cărțile trebuie să fie vizibile */
    }

    /* Table info — mai compact */
    body.game-active:has(.context-panel.active) .table-info {
        top: 2px !important;
        left: 2px !important;
        right: 40px !important;          /* lasă loc pentru deck în dreapta */
    }

    /* Deck: mic în colțul dreapta-jos, nu acoperă cărțile jucate */
    body.game-active:has(.context-panel.active) .table-deck {
        position: absolute !important;
        bottom: 4px !important;
        right: 4px !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: 5 !important;
    }

    body.game-active:has(.context-panel.active) .deck-stack,
    body.game-active:has(.context-panel.active) .deck-card-back {
        width: 36px !important;
        height: 50px !important;
    }

    body.game-active:has(.context-panel.active) .deck-count {
        font-size: 9px !important;
    }

    /* Game active — base state (panel deschis sau închis) */
    body.game-active .app-container {
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    body.game-active .game-canvas {
        position: relative !important;
        flex: 1 !important;
        overflow: hidden !important;
    }

    body.game-active .game-canvas::after {
        display: none !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       MENU STATE - Layout pentru ecranul de start
       ═══════════════════════════════════════════════════════════════ */

    body.game-menu .game-canvas {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: var(--space-sm) !important;
    }

    body.game-menu .table-area {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    body.game-menu .table-felt {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 300px !important;
        padding: var(--space-md) !important;
    }

    body.game-menu .table-message {
        width: 100% !important;
    }

    body.game-menu .table-message button {
        width: auto !important;
        max-width: 90% !important;
    }

    /* HIDE player seats în MENU STATE */
    body.game-menu .player-seat {
        display: none !important;
    }

    /* HIDE deck și table cards în MENU STATE */
    body.game-menu .table-deck,
    body.game-menu .table-cards,
    body.game-menu .table-info {
        display: none !important;
    }

    /* SHOW player seats doar în GAME ACTIVE */
    body.game-active .player-seat {
        display: flex !important;
    }

    /* CONTEXT PANEL: Animație Premium Bottom Sheet */
    .context-panel {
        /* RESET Bootstrap classes */
        flex: none !important;
        flex-basis: auto !important;

        /* Fixed positioning jos */
        position: fixed !important;
        top: 50vh !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: 50vh !important;
        max-height: 50vh !important;
        min-height: 50vh !important;

        /* Transform pentru slide UP cu bounce */
        transform: translateY(100%) !important;
        transition:
            transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 0.3s ease-out,
            opacity 0.3s ease-out !important;
        opacity: 0 !important;

        /* Styling Premium */
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        border: none !important;
        border-left: none !important;
        box-shadow:
            0 -8px 32px rgba(0, 0, 0, 0.3),
            0 -2px 8px rgba(0, 0, 0, 0.2) !important;
        z-index: 1100 !important;
        overflow: hidden !important;
        padding: 0 !important;
        background: linear-gradient(180deg,
            rgba(15, 20, 18, 0.98) 0%,
            rgba(10, 14, 13, 0.98) 100%
        ) !important;
        backdrop-filter: blur(20px) !important;

        /* Display */
        display: flex !important;
        flex-direction: column !important;
        pointer-events: all !important;
        will-change: transform, opacity !important;
    }

    /* Active state - Slide UP cu bounce effect */
    .context-panel:not(.hidden),
    .context-panel.active {
        transform: translateY(0) !important;
        opacity: 1 !important;
        box-shadow:
            0 -12px 48px rgba(0, 0, 0, 0.5),
            0 -4px 16px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(var(--color-accent-rgb), 0.2) !important;
        pointer-events: all !important;
        visibility: visible !important;
        animation: slideUpBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    }

    @keyframes slideUpBounce {
        0% {
            transform: translateY(100%);
            opacity: 0;
        }
        60% {
            transform: translateY(-1%);
        }
        80% {
            transform: translateY(0.5%);
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Hidden state - Slide DOWN smooth */
    .context-panel.hidden {
        transform: translateY(100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        transition:
            transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.25s ease-in,
            visibility 0s 0.4s !important;
    }

    /* OVERRIDE orice inline style de la AnimationEngine */
    .context-panel[style] {
        transform: translateY(0) !important;
    }

    .context-panel.hidden[style] {
        transform: translateY(100%) !important;
    }

    /* Drag Handle - Animated indicator */
    .context-panel::before {
        content: '' !important;
        position: absolute !important;
        top: 5px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 36px !important;
        height: 3px !important;
        background: rgba(255, 255, 255, 0.25) !important;
        border-radius: 2px !important;
        z-index: 100 !important;
        display: block !important;
        animation: none !important;
        box-shadow: none !important;
    }

    /* handlePulse keyframe removed — drag handle uses static style */

    /* Separator glow line - top border */
    .context-panel::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 1px !important;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(var(--color-accent-rgb), 0.5) 50%,
            transparent 100%
        ) !important;
        display: block !important;
        animation: none !important;
        opacity: 0.7 !important;
    }

    /* Panel Header — compact single-line for portrait */
    .context-panel .panel-header {
        padding: 4px 10px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex-shrink: 0 !important;
    }

    /* Panel header buttons — compact on portrait */
    .context-panel .panel-back,
    .context-panel .panel-close {
        width: 28px !important;
        height: 28px !important;
        border-radius: 6px !important;
    }

    .context-panel .panel-back .material-symbols-rounded,
    .context-panel .panel-close .material-symbols-rounded {
        font-size: 16px !important;
    }

    /* Chat header content — inline compact */
    .context-panel .chat-header-content {
        gap: 6px !important;
    }

    .context-panel .chat-avatar {
        width: 26px !important;
        height: 26px !important;
    }

    .context-panel .chat-avatar-icon {
        font-size: 12px !important;
        border-width: 1.5px !important;
    }

    .context-panel .chat-avatar-status {
        width: 6px !important;
        height: 6px !important;
        border-width: 1px !important;
    }

    .context-panel .chat-title {
        font-size: 12px !important;
        margin: 0 !important;
    }

    .context-panel .chat-status {
        font-size: 9px !important;
        gap: 3px !important;
    }

    .context-panel .chat-info {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .context-panel .chat-info h6 {
        margin: 0 !important;
    }

    .context-panel .chat-online-indicator {
        width: 5px !important;
        height: 5px !important;
    }

    /* Panel Content - SUB masă, scrollable, vizibil */
    .context-panel .panel-content {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px !important;
        background: rgba(0, 0, 0, 0.1) !important;
        scroll-behavior: smooth !important;
        overscroll-behavior: contain !important;
    }

    /* Chat Input - previne scroll page când focus */
    .context-panel .chat-input-area,
    .context-panel #chatInput {
        scroll-margin-bottom: 0 !important;
        scroll-snap-align: none !important;
    }

    /* Chat container - conține scroll */
    .context-panel .chat-container {
        overscroll-behavior: contain !important;
        overflow: hidden !important;
    }

    /* Asigură vizibilitate completă conținut */
    .context-panel .panel-content > * {
        margin-bottom: 12px !important;
    }

    .context-panel .panel-content > *:last-child {
        margin-bottom: 0 !important;
    }

    /* Separator line între joc și panel */
    .context-panel::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 1px !important;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(var(--color-accent-rgb), 0.5) 50%,
            transparent 100%
        ) !important;
        display: block !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       TABLE CARDS - CASCADING PILE (single row, dynamic overlap)
       ═══════════════════════════════════════════════════════════════ */

    body.game-active .table-cards {
        min-height: clamp(80px, 18vw, 130px) !important;
        max-height: 180px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 12px !important;
        overflow: visible !important;
        width: 100% !important;
        gap: 0 !important;
    }

    /* Card dimensions for mobile - margin-left controlled by JS */
    body.game-active .table-cards .card {
        flex: 0 0 auto !important;
        width: 48px !important;
        height: 67px !important;
    }

    /* Mini card strip on mobile */
    .pile-round {
        padding: 2px 4px !important;
        gap: 1px !important;
        border-radius: 5px !important;
    }

    .pile-mini-card {
        font-size: 10px !important;
        padding: 1px 3px !important;
    }

    .pile-round-label {
        font-size: 7px !important;
    }

    .pile-separator {
        font-size: 11px !important;
        margin: 0 3px !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       CHAT REDESIGN — MOBILE PORTRAIT (Bottom Sheet, 50vh)
       Compact layout: maximize message space while playing cards
       ═══════════════════════════════════════════════════════════════ */

    /* Panel content — flex container când chat activ, chat-ul are scroll intern */
    .panel-content:has(.chat-container) {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    /* Chat container — flex child, fills remaining space */
    .context-panel:not(.hidden) .chat-container {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* Hide input context indicator — redundant with tab bar */
    .chat-input-context {
        display: none !important;
    }

    /* ── Tab Bar — Compact pill style ── */
    .chat-tab-bar {
        padding: 2px 6px !important;
        gap: 3px !important;
        min-height: 28px !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        flex-shrink: 0 !important;
    }

    .chat-tab {
        padding: 3px 0 !important;
        font-size: 11px !important;
        min-height: 24px !important;
        gap: 4px !important;
        border-radius: 6px !important;
    }

    .chat-tab .material-symbols-rounded {
        font-size: 13px !important;
    }

    .chat-tab-badge {
        min-width: 14px !important;
        height: 14px !important;
        font-size: 9px !important;
        padding: 0 3px !important;
        top: 2px !important;
        right: 4px !important;
    }

    /* ── Messages Area — Compact padding, flex scroll ── */
    .context-panel:not(.hidden) .chat-messages {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        max-height: none !important;
        padding: 8px 10px !important;
        background: transparent !important;
    }

    .chat-messages::-webkit-scrollbar {
        width: 3px !important;
    }

    /* ── Message Bubbles — Compact ── */
    .chat-message-bubble {
        padding: 7px 10px !important;
        font-size: 13px !important;
        border-radius: 14px !important;
        min-height: auto !important;
        display: flex !important;
        align-items: center !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
    }

    .chat-message-bubble-player::after,
    .chat-message-bubble-opponent::after {
        border-width: 6px !important;
    }

    .chat-message-bubble:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }

    /* ── Message Header — Tighter ── */
    .chat-message-header {
        margin-bottom: 2px !important;
        gap: 5px !important;
    }

    .chat-message-avatar {
        width: 24px !important;
        height: 24px !important;
    }

    .chat-message-name {
        font-size: 11px !important;
    }

    .chat-message-timestamp {
        font-size: 9px !important;
        margin-top: 2px !important;
    }

    /* ── Message Grouping — Tighter ── */
    .chat-message {
        margin-bottom: 6px !important;
    }

    .chat-message.grouped {
        margin-top: -4px !important;
        margin-bottom: 2px !important;
    }

    /* ── Swipe to Reply ── */
    .chat-message.swipe-active {
        transform: translateX(60px) !important;
        transition: transform 0.2s ease-out !important;
    }

    .chat-message.swipe-active::before {
        content: '\21A9\FE0F' !important;
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 24px !important;
        opacity: 0.7 !important;
    }

    /* ── Reactions Compact ── */
    .chat-reaction {
        padding: 2px 6px !important;
        font-size: 11px !important;
        gap: 3px !important;
    }

    .chat-reaction-emoji {
        font-size: 13px !important;
    }

    /* ── Typing Indicator Compact ── */
    .chat-typing-indicator {
        margin-bottom: 8px !important;
        gap: 6px !important;
    }

    .chat-typing-avatar {
        width: 24px !important;
        height: 24px !important;
    }

    .chat-typing-bubble {
        padding: 8px 12px !important;
    }

    .chat-typing-dot {
        width: 6px !important;
        height: 6px !important;
    }

    /* ── Search Bar Compact ── */
    .chat-search-bar {
        padding: 8px 10px !important;
    }

    .chat-search-input {
        padding: 7px 32px 7px 10px !important;
        font-size: 13px !important;
        min-height: 36px !important;
    }

    .chat-search-results {
        font-size: 11px !important;
        margin-top: 4px !important;
    }

    /* ── Context Menu ── */
    .chat-message-menu {
        min-width: 180px !important;
        max-width: calc(100vw - 24px) !important;
        left: 12px !important;
        right: 12px !important;
    }

    .chat-message-menu-item {
        padding: 10px 14px !important;
        font-size: 13px !important;
        min-height: 44px !important;
    }

    /* ── Scroll to Bottom — Compact, above input ── */
    .chat-scroll-to-bottom {
        bottom: 56px !important;
        right: 8px !important;
        width: 36px !important;
        height: 36px !important;
    }

    .chat-scroll-to-bottom .material-symbols-rounded {
        font-size: 18px !important;
    }

    .chat-scroll-to-bottom-badge {
        min-width: 16px !important;
        height: 16px !important;
        font-size: 9px !important;
    }

    /* ── Input Hints & Character Count ── */
    .chat-input-hints {
        display: none !important;
    }

    .chat-character-count {
        font-size: 9px !important;
    }

    /* ── Date Separator & Unread ── */
    .chat-date-separator-text {
        padding: 4px 10px !important;
        font-size: 9px !important;
        margin: 0 6px !important;
    }

    .chat-unread-separator-text {
        padding: 4px 10px !important;
        font-size: 9px !important;
    }

    /* ── Reply Thread Compact ── */
    .chat-message-reply-to {
        padding: 5px 8px !important;
        font-size: 10px !important;
        margin-bottom: 3px !important;
    }

    .chat-message-reply-to-text {
        max-width: 180px !important;
    }

    /* ── Pinned Message ── */
    .chat-message.pinned::before {
        font-size: 14px !important;
        top: -5px !important;
    }

    /* ── Input Area — Flex child la bottom, NU sticky/fixed ── */
    .chat-input-area {
        position: relative !important;
        flex-shrink: 0 !important;
        padding: 6px 8px !important;
        padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2) !important;
    }

    /* ── Input Row — Tight spacing ── */
    .chat-input-row {
        gap: 6px !important;
        margin-bottom: 0 !important;
    }

    /* ── Emoji Button — Smaller ── */
    .chat-action-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 16px !important;
        border-radius: 50% !important;
    }

    .chat-action-btn .material-symbols-rounded {
        font-size: 16px !important;
    }

    /* ── Input Field — Compact, prevents iOS zoom ── */
    .chat-input-field {
        min-height: 36px !important;
        max-height: 80px !important;
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        padding: 8px 12px !important;
        border-radius: 18px !important;
        overscroll-behavior: contain !important;
    }

    /* ── Send Button — Compact circle ── */
    .chat-send-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        touch-action: manipulation !important;
    }

    .chat-send-btn .material-symbols-rounded {
        font-size: 18px !important;
    }

    /* ── Emoji Picker — Compact, wider grid ── */
    .chat-emoji-picker {
        width: calc(100vw - 16px) !important;
        max-width: 360px !important;
        left: 8px !important;
        right: 8px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 10px !important;
        max-height: 200px !important;
    }

    .chat-emoji-picker-header {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }

    .chat-emoji-picker-title {
        font-size: 12px !important;
    }

    .chat-emoji-grid-wrapper {
        max-height: 150px !important;
    }

    .chat-emoji-grid {
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 4px !important;
    }

    .chat-emoji-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 20px !important;
        border-radius: 6px !important;
    }

    /* Legacy selectors — kept for compatibility, values aligned with compact redesign */
    .chat-header-title {
        font-size: 13px !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       KEYBOARD OPEN — Reposition panel via JS visualViewport
       ═══════════════════════════════════════════════════════════════ */
    .context-panel.keyboard-open {
        transition: top 0.15s ease-out, height 0.15s ease-out !important;
    }

    .context-panel.keyboard-open .panel-header {
        padding: 4px 10px 3px !important;
        min-height: 32px !important;
    }

    .context-panel.keyboard-open .panel-back,
    .context-panel.keyboard-open .panel-close {
        width: 26px !important;
        height: 26px !important;
    }

    .context-panel.keyboard-open .chat-tab-bar {
        padding: 2px 6px !important;
    }

    .context-panel.keyboard-open .chat-tab {
        padding: 3px 0 !important;
        min-height: 24px !important;
        font-size: 11px !important;
    }

    .context-panel.keyboard-open .chat-input-area {
        padding: 4px 8px !important;
        padding-bottom: 4px !important;
    }

    .context-panel.keyboard-open .chat-input-field {
        min-height: 32px !important;
        padding: 6px 10px !important;
    }

    .context-panel.keyboard-open .chat-action-btn {
        width: 30px !important;
        height: 30px !important;
    }

    .context-panel.keyboard-open .chat-send-btn {
        width: 32px !important;
        height: 32px !important;
    }

    /* Compress game canvas when keyboard open — player cards must stay visible */
    body.game-active:has(.context-panel.keyboard-open) .game-canvas {
        height: 25dvh !important;
        min-height: 25dvh !important;
        max-height: 25dvh !important;
        overflow: hidden !important;
        padding-bottom: 0 !important;
        flex: none !important;
        transition: height 0.2s ease-out !important;
    }

    /* Keyboard open: hide opponent hand, keep only name to save space */
    body.game-active:has(.context-panel.keyboard-open) .seat-north .seat-hand,
    body.game-active:has(.context-panel.keyboard-open) .seat-west .seat-hand,
    body.game-active:has(.context-panel.keyboard-open) .seat-east .seat-hand {
        display: none !important;
    }

    body.game-active:has(.context-panel.keyboard-open) .seat-north,
    body.game-active:has(.context-panel.keyboard-open) .seat-west,
    body.game-active:has(.context-panel.keyboard-open) .seat-east {
        max-height: 20px !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       PAGE FLIP ANIMATION - PORTRAIT MODE
       ═══════════════════════════════════════════════════════════════ */

    /* Page flip animation pentru context panel în portrait */
    .context-panel.page-flip-in {
        animation: pageFlipMobile 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    /* Override transform properties pentru a permite animația */
    body.game-active .context-panel.page-flip-in {
        transform: none !important;
        will-change: transform, opacity !important;
    }
}

/* ================================================================================================
   RESPONSIVE BREAKPOINTS
================================================================================================ */

/* Mobile Portrait (< 480px) */
@media (max-width: 480px) and (orientation: portrait) {
    .top-bar {
        padding: 5px 10px;
    }
    
    .brand-title {
        font-size: 18px;
    }
    
    .nav-pills-custom .nav-link {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .card {
        width: 50px;
        height: 70px;
        font-size: 24px;
    }
    
    /* Full width context panel on small portrait screens */
    .context-panel {
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px !important;
    }
}

/* Mobile Landscape (< 768px) */
@media (max-width: 768px) and (orientation: landscape) {
    body {
        overflow: hidden;
    }
    
    .app-container {
        height: 100vh;
        height: 100dvh;
    }
    
    /* Compact header */
    .top-bar {
        padding: 3px 8px;
        min-height: 36px;
    }
    
    .brand-icon {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
    
    .brand-title {
        font-size: 14px;
    }
    
    .stats-layer {
        padding: 4px 12px;
        gap: 8px;
    }
    
    .stat-item {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .stat-value {
        font-size: 14px;
    }
    
    .controls-layer {
        padding: 4px 12px;
        gap: 6px;
    }
    
    .control-btn {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .nav-pills-custom {
        gap: 4px;
    }
    
    .nav-pills-custom .nav-link {
        padding: 6px 10px;
        font-size: 11px;
        gap: 4px;
    }
    
    .nav-pills-custom .material-symbols-rounded {
        font-size: 14px;
    }
    
    /* Compact game area */
    .game-area {
        padding: 0 4px 4px 4px;
        gap: 8px;
    }
    
    .opponent-info, .player-info {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .info-avatar {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .info-name {
        font-size: 13px;
    }
    
    .score-display {
        font-size: 16px;
    }
    
    /* Smaller cards for mobile landscape */
    .card {
        width: 45px;
        height: 63px;
        font-size: 20px;
        border-radius: 4px;
    }
    
    .card-suit {
        font-size: 18px;
    }
    
    .card-rank {
        font-size: 14px;
    }
    
    /* Compact hands */
    .player-hand, .opponent-hand {
        gap: 6px;
        min-height: 70px;
    }
    
    .game-table {
        min-height: 80px;
        padding: 8px;
    }
    
    /* Compact context panel (still position: absolute from 1024px query) */
    .context-panel {
        width: 85%; /* Absolute positioned: use width percentage */
        max-width: 400px;
        max-height: 70vh;
        padding: 12px;
    }
    
    .context-header {
        padding: 8px;
        margin-bottom: 8px;
    }
    
    .context-title {
        font-size: 16px;
    }
    
    .context-body {
        max-height: calc(70vh - 100px);
        padding: 8px;
    }
    
    /* Compact chat */
    .chat-messages {
        max-height: 150px;
    }
    
    .chat-message {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .chat-input-container input {
        font-size: 12px;
        padding: 8px 10px;
    }
    
    /* Smaller buttons */
    button {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    /* Game controls */
    .game-controls {
        gap: 8px;
    }
    
    .game-controls button {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .card {
        width: 70px;
        height: 98px;
    }
    
    .context-panel {
        max-width: 600px;
    }
    
    .nav-pills-custom .nav-link {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* Desktop (> 1024px) - Default styles already optimized */

/* Touch-friendly enhancements */
@media (hover: none) and (pointer: coarse) {
    /* Increase tap targets for touch devices */
    button, .nav-link, .card {
        min-height: 44px; /* iOS recommended tap target */
    }
    
    .card:active {
        transform: scale(0.95);
    }
    
    button:active {
        transform: scale(0.98);
    }
    
    /* Remove hover effects on touch devices */
    .card:hover,
    .user-card:hover,
    .log-card:hover {
        transform: none;
    }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-top)) {
    .top-bar {
        padding-top: max(12px, env(safe-area-inset-top));
    }
    
    /* Bottom padding handled by .main-content for bottom nav */
}

/* Mobile: Full-screen context panel */
@media (max-width: 768px) {
    .context-panel {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        flex-basis: 100vw !important;
        z-index: 1050 !important;
        transform: translateX(100%);
    }

    .context-panel:not(.hidden) {
        transform: translateX(0) !important;
    }

    /* Page flip animation pe mobil - adaptată pentru fullscreen */
    /* IMPORTANT: Trebuie să override translateX(0) de mai sus */
    .context-panel:not(.hidden).page-flip-in {
        animation: pageFlipMobile 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        transform: none !important; /* Remove translateX override during animation */
    }

    /* Adjust content for bottom nav */
    .context-panel .panel-content {
       /* padding-bottom: calc(100px + var(--sab, 0px)) !important;*/
        max-height: calc(100vh - 56px) !important; /* Full height minus panel header */
    }

    /* Compact chat header */
    .chat-header-bg {
        padding: 8px 12px !important;
    }

    /* Maximize chat messages area */
    .chat-messages {
        max-height: calc(100vh - 280px) !important; /* Full height minus header, input, nav */
        min-height: 300px !important;
    }
}

/* Mobile ONLY - Compact chat messages (TikTok style) */
@media (max-width: 768px) and (max-height: 1024px) {
    /* Compact chat messages - TikTok style */
    .chat-message {
        margin-bottom: 8px !important;
    }
    
    .chat-message-content-wrapper {
        max-width: 70% !important;
    }
    
    .chat-message-system .chat-message-content-wrapper {
        max-width: 80% !important;
    }
    
    .chat-message-bubble {
        padding: 8px 12px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        border-radius: 12px !important;
    }
    
    .chat-message-bubble-player {
        border-bottom-right-radius: 4px !important;
    }
    
    .chat-message-bubble-opponent {
        border-bottom-left-radius: 4px !important;
    }
    
    .chat-message-bubble-system {
        border-radius: 10px !important;
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
    
    .chat-message-header {
        gap: 6px !important;
        margin-bottom: 4px !important;
    }
    
    .chat-message-avatar {
        width: 28px !important;
        height: 28px !important;
    }
    
    .chat-message-name {
        font-size: 11px !important;
    }
    
    .chat-message-timestamp {
        font-size: 9px !important;
        margin-top: 2px !important;
    }
    
    .chat-input-container input {
        font-size: 11px !important;
        padding: 8px 10px !important;
        min-height: 38px !important;
    }
    
    /* Chat input — rămâne în flex flow (NU fixed) */
    .context-panel .chat-input-area {
        position: relative !important;
        flex-shrink: 0 !important;
        z-index: 5 !important;
    }

    /* Chat container — flex column cu messages scrollabil */
    .chat-container {
        overflow: hidden !important;
    }
    
    /* Smaller reaction buttons */
    .reaction-btn {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    
    /* Compact typing indicator */
    .typing-indicator {
        padding: 6px 10px !important;
        font-size: 10px !important;
    }
}

/* Prevent text selection on game elements */
.card, .game-table, .player-hand, .opponent-hand {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ================================================================================================
   RESPONSIVE MOBILE DESIGN - Flexbox + Media Queries + clamp()
================================================================================================ */

/* Tablet & Landscape Mobile (768px and below) */
@media (max-width: 768px) {
    /* ✅ Touch & Performance Optimizations */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    .card:active, .context-panel.animating {
        will-change: transform;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    button, .card, .nav-item, .btn-control {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Top Bar & Brand Responsive */
    .top-bar {
        height: clamp(50px, 12vw, 70px);
        padding: clamp(4px, 1vw, 8px);
    }

    .brand-icon {
        width: 40px;
        height: 40px;
    }

    .brand-icon .material-symbols-rounded {
        font-size: 24px;
    }

    .brand-text h1 {
        font-size: clamp(0.9rem, 2.5vw, 1.3rem);
    }

    .brand-tagline {
        font-size: 9px;
    }
    
    .brand-layer {
        padding: clamp(4px, 1vw, 8px);
    }

    /* Stats Responsive */
    .stat-item {
        padding: 8px 10px;
    }

    .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .stat-value {
        font-size: 14px;
    }

    .stat-label {
        font-size: 8px;
    }

    /* Action Buttons */
    .action-btn {
        width: 40px;
        height: 40px;
    }

    .action-btn .material-symbols-rounded {
        font-size: 18px;
    }
    
    /* Game container adjustments */
    #gameArea {
        padding: clamp(8px, 2vw, 15px);
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Card sizing with clamp - MUCH BIGGER for hands */
    .card {
        width: clamp(48px, 10vw, 75px) !important;
        height: clamp(67px, 14vw, 105px) !important;
        font-size: clamp(0.6rem, 1.8vw, 0.9rem) !important;
        border-radius: clamp(3px, 0.8vw, 6px);
    }
    
    /* Opponent cards MUCH smaller */
    .opponent-hand .card {
        width: clamp(28px, 6vw, 45px) !important;
        height: clamp(39px, 8.4vw, 63px) !important;
        font-size: clamp(0.4rem, 1.2vw, 0.6rem) !important;
    }
    
    .card .rank {
        font-size: clamp(1rem, 2.5vw, 1.3rem) !important;
        margin: clamp(2px, 0.5vw, 4px) 0;
        font-weight: 900;
        line-height: 1;
    }
    
    .card .suit {
        font-size: clamp(1.4rem, 3.5vw, 1.8rem) !important;
        margin: clamp(2px, 0.5vw, 4px) 0;
        line-height: 1;
    }
    
    /* Opponent rank and suit smaller */
    .opponent-hand .card .rank {
        font-size: clamp(0.5rem, 1.2vw, 0.8rem) !important;
        margin: clamp(1px, 0.3vw, 2px) 0;
        font-weight: 700;
    }
    
    .opponent-hand .card .suit {
        font-size: clamp(0.7rem, 1.8vw, 1.1rem) !important;
        margin: clamp(1px, 0.3vw, 3px) 0;
    }
    
    /* Flexbox hands for responsive wrapping */
    .hand {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: clamp(2px, 0.7vw, 5px);
        padding: clamp(3px, 1vw, 6px);
        margin-top: 0;
        margin-bottom: auto;
    }
    
    /* Push player hand higher up */
    .player-hand {
        margin-top: auto;
        padding-bottom: clamp(10px, 3vw, 20px);
    }
    
    .opponent-hand {
        padding-top: clamp(5px, 1.5vw, 10px);
    }
    
    /* Table cards - mobile portrait 768px */
    #tableCards .card,
    .table-cards .card {
        width: 50px !important;
        height: 70px !important;
        font-size: 16px !important;
    }
    
    #tableCards .card .rank,
    .table-cards .card .rank {
        font-size: 1.1rem !important;
        font-weight: 800;
        margin: 2px 0 !important;
    }
    
    #tableCards .card .suit,
    .table-cards .card .suit {
        font-size: 1.6rem !important;
        margin: 2px 0 !important;
    }

    /* Table felt - mobile portrait */
    .table-felt {
        min-height: 78px !important;
        max-height: 120px !important;
        padding: 6px !important;
    }

    .table-cards {
        min-height: 65px !important;
        padding: 4px !important;
    }

    /* Table info - compact for mobile */
    .table-info {
        font-size: 10px !important;
        padding: 2px 4px !important;
        top: 3px !important;
        left: 3px !important;
        right: 3px !important;
    }

    .table-pot,
    .table-last {
        font-size: 9px !important;
        padding: 2px 5px !important;
    }

    .table-pot .material-symbols-rounded,
    .table-last .material-symbols-rounded {
        font-size: 13px !important;
    }

    /* Table deck - compact for mobile */
    .table-deck {
        right: 4px !important;
        bottom: 4px !important;
    }

    .deck-stack {
        width: 34px !important;
        height: 48px !important;
    }

    .deck-card-back {
        width: 34px !important;
        height: 48px !important;
    }

    .deck-count {
        font-size: 9px !important;
        padding: 1px 4px !important;
    }

    /* Table message - mobile */
    .table-message {
        font-size: 11px !important;
        padding: 4px 8px !important;
        white-space: normal !important;
        max-width: 90% !important;
        left: auto !important;
    }
    
    /* Table area sizing handled by base CSS mobile-first clamp() */
    /* Player/opponent areas sizing handled by base CSS mobile-first */
    
    .player-info,
    .opponent-info {
        padding: 0;
        margin: 0;
        font-size: clamp(0.65rem, 1.6vw, 0.85rem);
    }
    
    /* Opponent info extra small */
    .opponent-info {
        font-size: clamp(0.55rem, 1.3vw, 0.7rem);
        transform: scale(0.85);
    }
    
    .player-avatar {
        width: clamp(24px, 6vw, 36px);
        height: clamp(24px, 6vw, 36px);
    }
    
    /* Opponent avatar much smaller */
    .opponent-info .player-avatar {
        width: clamp(18px, 4.5vw, 28px);
        height: clamp(18px, 4.5vw, 28px);
    }
    
    .player-details {
        padding: 0;
        margin: 0;
    }
    
    .player-name {
        font-size: clamp(0.7rem, 1.8vw, 0.9rem);
        margin: 0;
    }
    
    /* Opponent name smaller */
    .opponent-info .player-name {
        font-size: clamp(0.6rem, 1.4vw, 0.75rem);
    }
    
    /* Score panel */
    #scorePanel {
        font-size: clamp(0.75rem, 2vw, 1rem);
        padding: clamp(8px, 2vw, 12px);
    }
    
    #scorePanel h3 {
        font-size: clamp(0.9rem, 2.2vw, 1.2rem);
    }
    
    /* Control buttons */
    button {
        font-size: clamp(0.8rem, 2vw, 1rem) !important;
        padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 20px) !important;
        min-height: 44px; /* Touch-friendly minimum */
    }
    
    /* Context panels */
    .context-panel {
        max-width: 95vw;
        padding: clamp(12px, 3vw, 20px);
    }
    
    .context-panel h2 {
        font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    }
}

/* Mobile Landscape & Smaller Tablets (576px and below) */
@media (max-width: 576px) {
    /* Even smaller header */
    .top-bar {
        height: clamp(45px, 11vw, 60px);
    }
    
    .brand-text h1 {
        font-size: clamp(0.85rem, 2.2vw, 1.1rem);
    }
    
    .action-btn {
        width: clamp(32px, 8vw, 40px);
        height: clamp(32px, 8vw, 40px);
    }
    
    /* BIGGER card sizes for hands */
    .card {
        width: clamp(44px, 11vw, 70px) !important;
        height: clamp(62px, 15.4vw, 98px) !important;
        font-size: clamp(0.55rem, 1.9vw, 0.85rem) !important;
    }
    
    .opponent-hand .card {
        width: clamp(26px, 6.5vw, 42px) !important;
        height: clamp(36px, 9.1vw, 59px) !important;
        font-size: clamp(0.38rem, 1.3vw, 0.58rem) !important;
    }
    
    .card .rank {
        font-size: clamp(0.95rem, 2.5vw, 1.2rem) !important;
        margin: clamp(2px, 0.5vw, 4px) 0;
        font-weight: 900;
        line-height: 1;
    }
    
    .card .suit {
        font-size: clamp(1.3rem, 3.5vw, 1.8rem) !important;
        margin: clamp(2px, 0.5vw, 4px) 0;
        line-height: 1;
    }
    
    .opponent-hand .card .rank {
        font-size: clamp(0.45rem, 1.2vw, 0.7rem) !important;
        margin: clamp(1px, 0.3vw, 2px) 0;
        font-weight: 700;
    }
    
    .opponent-hand .card .suit {
        font-size: clamp(0.65rem, 1.8vw, 1rem) !important;
        margin: clamp(1px, 0.3vw, 3px) 0;
    }
    
    /* Tighter gaps */
    .hand {
        gap: clamp(2px, 0.6vw, 4px);
        padding: clamp(2px, 0.8vw, 5px);
    }
    
    /* Push hands higher */
    .player-hand {
        padding-bottom: clamp(15px, 4vw, 25px);
    }
    
    /* Table cards - mobile portrait 576px */
    #tableCards .card,
    .table-cards .card {
        width: 48px !important;
        height: 67px !important;
        font-size: 15px !important;
    }
    
    #tableCards .card .rank,
    .table-cards .card .rank {
        font-size: 1rem !important;
        font-weight: 800;
        margin: 2px 0 !important;
    }
    
    #tableCards .card .suit,
    .table-cards .card .suit {
        font-size: 1.5rem !important;
        margin: 2px 0 !important;
    }

    .table-felt {
        min-height: 68px !important;
        max-height: 105px !important;
        padding: 4px !important;
    }

    .table-cards {
        min-height: 60px !important;
        padding: 3px !important;
    }

    .deck-stack {
        width: 32px !important;
        height: 45px !important;
    }

    .deck-card-back {
        width: 32px !important;
        height: 45px !important;
    }
    
    .player-avatar {
        width: clamp(22px, 5.5vw, 32px);
        height: clamp(22px, 5.5vw, 32px);
    }
    
    .opponent-info .player-avatar {
        width: clamp(16px, 4vw, 24px);
        height: clamp(16px, 4vw, 24px);
    }
    
    .player-info,
    .opponent-info {
        padding: 0;
        margin: 0;
    }
    
    .opponent-info {
        font-size: clamp(0.5rem, 1.2vw, 0.65rem);
        transform: scale(0.8);
    }
    
    /* Side panels stack better */
    #leftPanel, #rightPanel {
        font-size: clamp(0.7rem, 1.8vw, 0.9rem);
    }
    
    /* Smaller control elements */
    #controls {
        gap: clamp(6px, 1.5vw, 10px);
        padding: clamp(6px, 1.5vw, 10px);
    }
}

/* Mobile Portrait (480px and below) */
@media (max-width: 480px) {
    /* Minimal header */
    .top-bar {
        height: clamp(40px, 10vw, 55px);
    }
    
    .brand-text h1 {
        font-size: clamp(0.8rem, 2vw, 1rem);
    }
    
    .brand-tagline {
        font-size: clamp(0.6rem, 1.5vw, 0.75rem);
    }
    
    /* BIGGER cards for small phones */
    .card {
        width: clamp(42px, 12vw, 66px) !important;
        height: clamp(59px, 16.8vw, 92px) !important;
        font-size: clamp(0.52rem, 2.2vw, 0.78rem) !important;
        border-width: 1px;
    }
    
    .opponent-hand .card {
        width: clamp(24px, 7vw, 38px) !important;
        height: clamp(34px, 9.8vw, 53px) !important;
        font-size: clamp(0.36rem, 1.5vw, 0.54rem) !important;
    }
    
    .card .rank {
        font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
        margin: clamp(1px, 0.4vw, 3px) 0;
        font-weight: 900;
        line-height: 1;
    }
    
    .card .suit {
        font-size: clamp(1.2rem, 3.5vw, 1.6rem) !important;
        margin: clamp(1px, 0.4vw, 3px) 0;
        line-height: 1;
    }
    
    .opponent-hand .card .rank {
        font-size: clamp(0.4rem, 1.2vw, 0.65rem) !important;
        margin: clamp(1px, 0.3vw, 2px) 0;
        font-weight: 700;
    }
    
    .opponent-hand .card .suit {
        font-size: clamp(0.6rem, 1.8vw, 0.9rem) !important;
        margin: clamp(1px, 0.3vw, 2px) 0;
    }
    
    /* Very tight layout */
    .hand {
        gap: clamp(1px, 0.5vw, 3px);
        padding: clamp(2px, 0.6vw, 4px);
    }
    
    /* Push player hand up more on small screens */
    .player-hand {
        padding-bottom: clamp(18px, 5vw, 30px);
    }
    
    /* Table cards - mobile portrait 480px */
    #tableCards .card,
    .table-cards .card {
        width: 44px !important;
        height: 62px !important;
        font-size: 14px !important;
    }
    
    #tableCards .card .rank,
    .table-cards .card .rank {
        font-size: 0.95rem !important;
        font-weight: 800;
        margin: 1px 0 !important;
    }
    
    #tableCards .card .suit,
    .table-cards .card .suit {
        font-size: 1.4rem !important;
        margin: 1px 0 !important;
    }

    .table-felt {
        min-height: 60px !important;
        max-height: 90px !important;
        padding: 3px !important;
    }

    .table-cards {
        min-height: 55px !important;
        padding: 2px !important;
    }

    .table-info {
        font-size: 9px !important;
        padding: 1px 3px !important;
    }

    .table-pot,
    .table-last {
        font-size: 8px !important;
        padding: 2px 4px !important;
    }

    .table-pot .material-symbols-rounded,
    .table-last .material-symbols-rounded {
        font-size: 11px !important;
    }

    .deck-stack {
        width: 30px !important;
        height: 42px !important;
    }

    .deck-card-back {
        width: 30px !important;
        height: 42px !important;
    }

    .deck-count {
        font-size: 9px !important;
    }

    .table-message {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
    
    .player-avatar {
        width: clamp(20px, 5vw, 30px);
        height: clamp(20px, 5vw, 30px);
    }
    
    .opponent-info .player-avatar {
        width: clamp(14px, 3.5vw, 22px);
        height: clamp(14px, 3.5vw, 22px);
    }
    
    .player-info,
    .opponent-info {
        padding: 0;
        margin: 0;
    }
    
    .opponent-info {
        font-size: clamp(0.45rem, 1.1vw, 0.6rem);
        transform: scale(0.75);
    }
    
    /* Single column layout for panels */
    #gameContainer {
        flex-direction: column;
    }
    
    #leftPanel, #rightPanel {
        width: 100%;
        max-width: none;
    }
}

/* Extra Small Mobile (375px and below) */
@media (max-width: 375px) {
    /* Absolute minimal header */
    .top-bar {
        height: clamp(35px, 9vw, 50px);
    }
    
    .brand-text h1 {
        font-size: clamp(0.75rem, 1.8vw, 0.95rem);
    }
    
    .action-btn {
        width: clamp(28px, 7vw, 36px);
        height: clamp(28px, 7vw, 36px);
    }
    
    /* BIGGER minimum card sizes */
    .card {
        width: clamp(40px, 13vw, 62px) !important;
        height: clamp(56px, 18.2vw, 87px) !important;
        font-size: clamp(0.5rem, 2.4vw, 0.72rem) !important;
    }
    
    .opponent-hand .card {
        width: clamp(22px, 7.5vw, 36px) !important;
        height: clamp(31px, 10.5vw, 50px) !important;
        font-size: clamp(0.34rem, 1.7vw, 0.5rem) !important;
    }
    
    .card .rank {
        font-size: clamp(0.8rem, 2.5vw, 1rem) !important;
        margin: clamp(1px, 0.3vw, 2px) 0;
        font-weight: 900;
        line-height: 1;
    }
    
    .card .suit {
        font-size: clamp(1.1rem, 3.5vw, 1.4rem) !important;
        margin: clamp(1px, 0.3vw, 2px) 0;
        line-height: 1;
    }
    
    .opponent-hand .card .rank {
        font-size: clamp(0.38rem, 1.2vw, 0.6rem) !important;
        margin: clamp(1px, 0.3vw, 2px) 0;
        font-weight: 700;
    }
    
    .opponent-hand .card .suit {
        font-size: clamp(0.55rem, 1.8vw, 0.85rem) !important;
        margin: clamp(1px, 0.3vw, 2px) 0;
    }
    
    /* Minimal gaps */
    .hand {
        gap: clamp(1px, 0.4vw, 2px);
        padding: clamp(1px, 0.5vw, 3px);
    }
    
    /* Maximum push up for tiny screens */
    .player-hand {
        padding-bottom: clamp(20px, 6vw, 35px);
    }
    
    /* Table cards - mobile portrait 375px */
    #tableCards .card,
    .table-cards .card {
        width: 40px !important;
        height: 56px !important;
        font-size: 13px !important;
    }
    
    #tableCards .card .rank,
    .table-cards .card .rank {
        font-size: 0.85rem !important;
        font-weight: 800;
        margin: 1px 0 !important;
    }
    
    #tableCards .card .suit,
    .table-cards .card .suit {
        font-size: 1.2rem !important;
        margin: 1px 0 !important;
    }

    .table-felt {
        min-height: 49px !important;
        max-height: 70px !important;
        padding: 2px !important;
    }

    .table-cards {
        min-height: 48px !important;
        padding: 2px !important;
    }

    .table-info {
        font-size: 8px !important;
        padding: 1px 2px !important;
    }

    .table-pot,
    .table-last {
        font-size: 7px !important;
        padding: 1px 3px !important;
    }

    .table-pot .material-symbols-rounded,
    .table-last .material-symbols-rounded {
        font-size: 10px !important;
    }

    .deck-stack {
        width: 28px !important;
        height: 39px !important;
    }

    .deck-card-back {
        width: 28px !important;
        height: 39px !important;
    }

    .deck-count {
        font-size: 8px !important;
    }

    .table-message {
        font-size: 9px !important;
        padding: 3px 5px !important;
    }
    
    .player-avatar {
        width: clamp(18px, 4.5vw, 26px);
        height: clamp(18px, 4.5vw, 26px);
    }
    
    .opponent-info .player-avatar {
        width: clamp(12px, 3vw, 20px);
        height: clamp(12px, 3vw, 20px);
    }
    
    .player-info,
    .opponent-info {
        padding: 0;
        margin: 0;
    }
    
    .opponent-info {
        font-size: clamp(0.4rem, 1vw, 0.55rem);
        transform: scale(0.7);
    }
    
    /* Compact everything */
    #scorePanel {
        font-size: clamp(0.65rem, 1.8vw, 0.85rem);
        padding: clamp(6px, 1.5vw, 10px);
    }
    
    button {
        font-size: clamp(0.7rem, 2.2vw, 0.9rem) !important;
        padding: clamp(6px, 1.5vw, 10px) clamp(10px, 2.5vw, 15px) !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets for mobile */
    .card {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    }

    button {
        min-height: 44px; /* iOS Human Interface Guidelines minimum */
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    .card:hover {
        transform: none !important;
    }

    /* Use active state instead */
    .card:active {
        transform: scale(0.95);
        opacity: 0.8;
    }

    /* Glassmorphism touch optimization: lighter blur for performance */
    .table-felt {
        backdrop-filter: blur(var(--glass-blur-touch));
        -webkit-backdrop-filter: blur(var(--glass-blur-touch));
    }

    .table-felt.enhanced-3d {
        backdrop-filter: blur(var(--glass-blur-touch));
        -webkit-backdrop-filter: blur(var(--glass-blur-touch));
    }

    .table-pot,
    .table-last {
        backdrop-filter: blur(var(--glass-blur-touch));
        -webkit-backdrop-filter: blur(var(--glass-blur-touch));
    }

    .table-message {
        backdrop-filter: blur(var(--glass-blur-touch));
        -webkit-backdrop-filter: blur(var(--glass-blur-touch));
    }

    .opponent-area,
    .player-area {
        backdrop-filter: blur(var(--glass-blur-touch));
        -webkit-backdrop-filter: blur(var(--glass-blur-touch));
    }

    .player-info {
        backdrop-filter: blur(var(--glass-blur-touch));
        -webkit-backdrop-filter: blur(var(--glass-blur-touch));
    }
}

/* Ultra-small touch screens: remove blur from non-critical elements for GPU performance */
@media (hover: none) and (pointer: coarse) and (max-width: 480px) {
    .table-pot,
    .table-last,
    .player-info,
    .table-message {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ================================================================================================
   PWA INSTALL BANNER - Mobile Fullscreen Prompt
================================================================================================ */
.pwa-install-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 400px;
    background: linear-gradient(135deg, rgba(26, 77, 46, 0.98) 0%, rgba(45, 122, 79, 0.98) 100%);
    backdrop-filter: blur(20px);
    border: 2px solid var(--color-accent);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(var(--color-accent-rgb), 0.3);
    z-index: 10000;
    animation: slideUpBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pwa-install-banner.hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    pointer-events: none;
}

.pwa-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pwa-banner-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.pwa-banner-text {
    flex: 1;
}

.pwa-banner-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.pwa-banner-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.3;
}

.pwa-banner-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--color-accent-rgb), 0.2);
}

.pwa-banner-btn {
    flex: 1;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.pwa-banner-btn.install {
    background: var(--color-accent);
    color: #0a0e0d;
}

.pwa-banner-btn.install:hover {
    background: var(--color-accent-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.4);
}

.pwa-banner-btn.dismiss {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.pwa-banner-btn.dismiss:hover {
    background: rgba(255, 255, 255, 0.15);
}

@keyframes slideUpBounce {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(100px);
    }
    60% {
        opacity: 1;
        transform: translateX(-50%) translateY(-10px);
    }
    80% {
        transform: translateX(-50%) translateY(5px);
    }
    100% {
        transform: translateX(-50%) translateY(0);
    }
}

/* Desktop - banner vizibil pe toate dispozitivele */

/* ================================================================================================
   MOBILE 100% SCREEN FILL OPTIMIZATION - Portrait & Landscape
   Optimized pentru a umple 100% din ecran pe mobil, elimină nevoia de fullscreen button
================================================================================================ */

/* Base Mobile Portrait Optimization (<768px) */
@media (max-width: 767px) {
    /* Force 100dvh pentru umplere completă ecran */
    html, body {
        height: 100%;
        height: 100vh;
        height: 100dvh !important;
        min-height: 100%;
        min-height: 100vh;
        min-height: 100dvh !important;
        overflow: hidden !important;
        position: fixed !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .app-container {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Reset Bootstrap padding/margin în Portrait */
    .app-container.container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        --bs-gutter-x: 0 !important;
    }

    .main-content.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        --bs-gutter-x: 0 !important;
    }

    .game-canvas.col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .nav-rail.col-auto {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Top Bar - Minimal height pentru Portrait */
    .top-bar {
        min-height: 48px !important;
        height: 48px !important;
        max-height: 48px !important;
        padding: 6px 8px !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    /* Brand - Compact pentru Portrait */
    .brand {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
        overflow: hidden !important;
    }

    .brand-text {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .brand-text h1 {
        font-size: 16px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .brand-tagline {
        font-size: 8px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Header Buttons - Sincronizat cu Footer în Portrait */
    .action-btn {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
        min-width: 36px !important;
    }

    .action-btn .material-symbols-rounded {
        font-size: 20px !important;
    }

    .brand-icon {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
        min-width: 36px !important;
    }

    .brand-icon .material-symbols-rounded {
        font-size: 20px !important;
    }

    /* Actions Group - No overflow */
    .actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
    }

    /* Main Content - Fill exact space între header și footer */
    /* nav-rail is position:fixed, min-height:100px + status-bar ~32-40px + safe-area
       so we need at least 100px padding to avoid content under it */
    .main-content {
        flex: 1 !important;
        overflow: hidden !important;
        padding: 0 !important;
        padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: 0 !important;
    }

    /* Game Canvas - flex fill, NOT height:100% (that ignores parent padding) */
    .game-canvas {
        flex: 1 !important;
        height: auto !important;
        max-height: 100% !important;
        overflow: hidden !important;
        padding: 0 0 2px 0 !important;
        display: flex;
        flex-direction: column;
    }

    .game-area {
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* ═══ GAME AREA OPTIMIZATIONS - Portrait ═══ */
    /* 🎯 LAYOUT NOU: Oponenți în linie sus, Masă mare, User full width jos */

    /* CSS Grid Layout NOU pentru toate modurile (2P/3P/4P) */
    .game-play-container,
    .game-play-container.game-2p,
    .game-play-container.game-3p,
    .game-play-container.game-4p {
        display: grid !important;
        grid-template-rows: auto 1fr auto !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2px !important;
        height: 100% !important;
        align-items: stretch !important;
    }

    /* ═══ RÂND 1: OPONENȚI SUS (în linie orizontală) ═══ */
    /* Grid positioning: Rând 1, 3 coloane */

    .seat-west {
        grid-row: 1 !important;
        grid-column: 1 !important;
        justify-self: center !important;
    }

    .seat-north {
        grid-row: 1 !important;
        grid-column: 2 !important;
        justify-self: center !important;
    }

    .seat-east {
        grid-row: 1 !important;
        grid-column: 3 !important;
        justify-self: center !important;
    }

    /* Seat containers pentru oponenți */
    .seat-north,
    .seat-west,
    .seat-east {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important; /* ✨ Mai mult spațiu între elemente */
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Player info oponenți - ✨ ÎMBUNĂTĂȚIT pentru lizibilitate */
    .seat-north .player-info,
    .seat-west .player-info,
    .seat-east .player-info {
        display: flex !important;
        padding: 3px 4px !important; /* ✨ Mai mult padding */
        min-width: auto !important;
        flex-direction: column !important;
        gap: 2px !important; /* ✨ Respirație între avatar și detalii */
        align-items: center !important;
    }

    .seat-north .player-avatar,
    .seat-west .player-avatar,
    .seat-east .player-avatar {
        display: block !important;
        width: 20px !important; /* ✨ Mai mare: 16px → 20px */
        height: 20px !important; /* ✨ Mai mare: 16px → 20px */
        flex-shrink: 0 !important;
    }

    .seat-north .player-details,
    .seat-west .player-details,
    .seat-east .player-details {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important; /* ✨ Respirație între nume și meta */
        visibility: visible !important;
        opacity: 1 !important;
    }

    .seat-north .player-name,
    .seat-west .player-name,
    .seat-east .player-name {
        display: block !important;
        font-size: 10px !important; /* ✨ Lizibil: 7px → 10px */
        max-width: 60px !important; /* ✨ Ușor mai larg pentru text */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        line-height: 1.1 !important; /* ✨ Ușor mai mult spațiu vertical */
        visibility: visible !important;
        opacity: 1 !important;
    }

    .seat-north .player-meta,
    .seat-west .player-meta,
    .seat-east .player-meta {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important; /* ✨ Respirație între items */
        font-size: 9px !important; /* ✨ Mai citeț: 7px → 9px */
        visibility: visible !important;
        opacity: 1 !important;
    }

    .seat-north .meta-item,
    .seat-west .meta-item,
    .seat-east .meta-item {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important; /* ✨ Respirație între icon și text */
        font-size: 9px !important; /* ✨ Mai citeț: 7px → 9px */
        line-height: 1.1 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .seat-north .meta-item .material-symbols-rounded,
    .seat-west .meta-item .material-symbols-rounded,
    .seat-east .meta-item .material-symbols-rounded {
        display: inline-block !important;
        font-size: 11px !important; /* ✨ Mai vizibil: 9px → 11px */
        line-height: 1 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Opponent hands - ✨ ÎMBUNĂTĂȚIT pentru vizibilitate */
    .seat-north .seat-hand,
    .seat-west .seat-hand,
    .seat-east .seat-hand {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 2px !important; /* ✨ Respirație între cărți */
        padding: 2px !important; /* ✨ Mai mult padding */
        min-height: 28px !important; /* ✨ Mai înalt: 24px → 28px */
        max-height: 36px !important; /* ✨ Mai înalt: 30px → 36px */
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
    }

    /* Opponent cards - ✨ MAI MARI pentru vizibilitate */
    .seat-north .card,
    .seat-west .card,
    .seat-east .card {
        width: 26px !important; /* ✨ Mai larg: 22px → 26px */
        height: 36px !important; /* ✨ Mai înalt: 31px → 36px */
        font-size: 9px !important; /* ✨ Font mai mare */
        flex-shrink: 0 !important;
    }

    .seat-north .card .rank,
    .seat-west .card .rank,
    .seat-east .card .rank {
        font-size: 1.1rem !important;
        margin: 1px 0 !important;
    }

    .seat-north .card .suit,
    .seat-west .card .suit,
    .seat-east .card .suit {
        font-size: 1.8rem !important;
        margin: 1px 0 !important;
    }

    /* Visibility pentru 2P/3P/4P */
    .game-2p .seat-west,
    .game-2p .seat-east {
        display: none !important; /* 2P: doar NORD */
    }

    .game-3p .seat-west {
        display: none !important; /* 3P: NORD + EST */
    }

    /* 4P: toți vizibili (no override needed) */

    /* ═══ RÂND 2: MASĂ (ia tot spațiul vertical disponibil) ═══ */
    .table-area {
        grid-row: 2 !important;
        grid-column: 1 / -1 !important; /* Span all 3 columns */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: stretch !important; /* Stretch pe înălțime pentru a umple rândul */
        min-height: 0 !important;
        overflow: visible !important; /* ✨ FIX: Permite cărților să fie vizibile complet */
        width: 100% !important;
        height: 100% !important; /* Ia toată înălțimea row-ului */
    }

    /* Table Felt - 2 STĂRI: Înainte de joc vs În joc */

    /* STARE 1: Înainte de joc (cu butoane selector) - Fill table area */
    .table-felt {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* STARE 2: În joc (butoane ascunse, cărți active) - HEIGHT 100%, NELIMITAT */
    .table-area.game-active .table-felt {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 10px !important;
        justify-content: center !important;
    }

    .table-cards {
        gap: 0 !important;
        min-height: 100px !important;
        padding: 8px !important;
        flex: 1 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .table-cards .card {
        /* margin-left controlled by JS applyTableCardLayout() */
        transition: margin-left 0.25s ease !important;
    }

    /* Table card sizing is handled by graduated breakpoints:
       768px → 576px → 480px → 375px → 374px
       Do NOT set width/height here as it overrides the cascade */

    .table-info {
        font-size: 11px !important;
        padding: 4px 8px !important;
        flex-shrink: 0 !important;
        /* ✨ MUTAT JOS: Info la baza mesei */
        position: absolute !important;
        top: auto !important;
        bottom: var(--space-sm) !important;
        left: var(--space-sm) !important;
        right: auto !important;
        width: auto !important;
        display: flex !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
        z-index: 5 !important; /* Deasupra cărților */
    }

    .table-pot,
    .table-last {
        gap: 3px !important;
        max-width: none !important;
        font-size: 10px !important; /* ✨ Ușor mai mic pentru compact */
        padding: 3px 6px !important;
    }

    /* ✨ DECK MUTAT JOS: Lângă info, pe dreapta */
    .table-deck {
        position: absolute !important;
        top: auto !important;
        bottom: var(--space-sm) !important;
        right: var(--space-sm) !important;
        left: auto !important;
        transform: none !important;
        z-index: 5 !important; /* Deasupra cărților */
    }

    /* Buton Pornește Jocul - dimensiune confortabilă */
    #startGameTableBtn {
        min-height: 44px !important;
        padding: 10px 20px !important;
        font-size: 15px !important;
        margin: 12px auto !important;
    }

    /* Butoanele din table-message în timpul jocului (Continuă/Taie/Pas) - MICI */
    body.game-active .table-message .btn-control {
        min-height: 24px !important;
        max-height: 28px !important;
        padding: 2px 8px !important;
        font-size: 10px !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    body.game-active .table-message .btn-control .material-symbols-rounded {
        font-size: 12px !important;
    }

    #startGameTableBtn .material-symbols-rounded {
        font-size: 22px !important;
    }

    /* ═══ RÂND 3: USER (SOUTH) - FULL WIDTH JOS ═══ */
    /* HTML order: .seat-hand, .player-info → column = cards TOP, info BOTTOM */
    .seat-south {
        grid-row: 3 !important;
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 4px !important;
    }

    /* User hand - ✨ ÎMBUNĂTĂȚIT pentru confort */
    .seat-south .seat-hand {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 4px !important; /* ✨ Respirație între cărți: 2px → 4px */
        padding: 4px !important; /* ✨ Mai mult padding: 2px → 4px */
        min-height: 75px !important; /* ✨ Mai înalt: 55px → 75px */
        max-height: 85px !important; /* ✨ Mai înalt: 65px → 85px */
        width: 100% !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    /* 🎯 Turn Badge - Mobile Portrait specific */
    .player-turn-badge {
        top: -24px !important;
        font-size: 10px !important;
        padding: 3px 8px !important;
        gap: 3px !important;
    }

    .player-turn-badge .turn-icon {
        font-size: 12px !important;
    }

    /* 🎯 User Sud badge - vizibil pe mobile */
    .seat-south .player-turn-badge {
        font-size: 10px !important;
        padding: 3px 8px !important;
        gap: 3px !important;
        font-weight: 800;
        box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.4);
    }

    .seat-south .player-turn-badge .turn-icon {
        font-size: 11px !important;
    }

    /* User cards - ✨ MAI MARI pentru interacțiune */
    .seat-south .card {
        width: 48px !important; /* ✨ Mai larg: 44px → 48px */
        height: 67px !important; /* ✨ Mai înalt: 62px → 67px */
        font-size: 16px !important; /* ✨ Font mai mare */
        flex-shrink: 0 !important;
    }

    .seat-south .card .rank {
        font-size: 1.2rem !important;
        margin: 2px 0 !important;
    }

    .seat-south .card .suit {
        font-size: 1.8rem !important;
        margin: 2px 0 !important;
    }

    /* User info - ✨ ÎMBUNĂTĂȚIT pentru lizibilitate */
    .seat-south .player-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important; /* ✨ Mai mult spațiu: 3px → 4px */
        padding: 4px 6px !important; /* ✨ Mai mult padding: 2px → 4px 6px */
        width: auto !important;
        min-height: 40px !important; /* ✨ Înălțime minimă garantată */
    }

    .seat-south .player-avatar {
        width: 32px !important; /* ✨ Mai mare: 26px → 32px */
        height: 32px !important; /* ✨ Mai mare: 26px → 32px */
    }

    .seat-south .player-name {
        font-size: 13px !important; /* ✨ Mai clar: 11px → 13px */
        font-weight: 600 !important;
    }

    .seat-south .player-details {
        display: flex !important;
        flex-direction: row !important;
        gap: 5px !important; /* ✨ Respirație: 4px → 5px */
    }

    .seat-south .meta-item {
        font-size: 10px !important; /* ✨ Mai citeț: 9px → 10px */
    }

    .seat-south .meta-item .material-symbols-rounded {
        font-size: 13px !important; /* ✨ Icons mai mari */
    }

    /* Table Felt - ✨ Optimizat Portrait pentru masă generoasă */
    .table-felt {
        min-height: 126px !important;
        max-height: 224px !important;
        padding: 12px !important;
    }

    .table-cards {
        gap: 0 !important;
        min-height: 100px !important;
        padding: 8px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }

    .table-cards .card {
        /* margin-left controlled by JS applyTableCardLayout() */
        transition: margin-left 0.25s ease !important;
    }

    /* ═══ OVERRIDE OLD STYLES (acum folosim layout nou) ═══ */
    /* Vechile reguli pentru grid sunt suprascrise de flexbox de mai sus */

    /* Bottom Nav - Minimal + Safe Area */
    .nav-rail {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        flex-shrink: 0;
    }

    .status-bar {
        min-height: 32px !important;
        height: auto !important;
        max-height: 64px !important;
        padding: 3px 6px !important;
       /* flex-wrap: wrap !important;*/
        gap: 2px 6px !important;
        overflow: hidden !important;
    }

    /* Compact XP bar on mobile */
    .xp-bar-container {
        max-width: 100px !important;
        padding: 1px 4px !important;
        gap: 3px !important;
        font-size: 9px !important;
    }

    .xp-bar-container #xpLabel {
        display: none !important;
    }

    .xp-progress-track {
        width: 30px !important;
    }

    /* Smaller action buttons on mobile */
    .status-btn {
        width: 26px !important;
        height: 26px !important;
    }

    .status-btn .material-symbols-rounded {
        font-size: 14px !important;
    }

    .status-actions {
        gap: 1px !important;
    }

    .nav-items {
        min-height: 48px !important;
        height: 48px !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
    }

    .nav-item {
        padding: 4px 8px !important;
    }

    .nav-label {
        font-size: 9px !important;
    }

    /* New nav-bar landscape */
    .nav-bar-btn {
        height: 42px !important;
    }
    .nav-bar-fab {
        width: 48px !important;
        height: 48px !important;
        transform: translateY(-8px) !important;
    }
    .nav-bar-label {
        font-size: 9px !important;
    }
}

/* Mobile Landscape Full Optimization (orientation: landscape) */
@media (max-width: 992px) and (orientation: landscape) {
    /* Force 100dvh pentru Landscape */
    html, body {
        height: 100%;
        height: 100vh;
        height: 100dvh !important;
        min-height: 100%;
        min-height: 100vh;
        min-height: 100dvh !important;
        overflow: hidden !important;
        position: fixed !important;
        width: 100%;
    }

    .app-container {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    /* Top Bar - ULTRA minimal pentru Landscape */
    .top-bar {
        min-height: 36px !important;
        height: 36px !important;
        padding: 3px 8px !important;
    }

    .brand-text h1 {
        font-size: 14px !important;
    }

    .brand-tagline {
        display: none !important; /* Hide pe landscape pentru spațiu */
    }

    .action-btn {
        width: 32px !important;
        height: 32px !important;
    }

    /* Main Content - Maximizare spațiu vertical */
    .main-content {
        flex: 1 !important;
        overflow: hidden !important;
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: 0 !important;
    }

    /* Game Canvas - flex fill, NOT height:100% (respects parent padding-bottom) */
    .game-canvas {
        flex: 1 !important;
        height: auto !important;
        max-height: 100% !important;
        padding: 0 2px 2px 2px !important;
        overflow: hidden !important;
    }

    .game-area {
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* ═══ GAME AREA OPTIMIZATIONS - Landscape ═══ */

    /* Grid Gaps - ULTRA minimal pentru landscape */
    .game-play-container {
        gap: 2px !important;
    }

    .game-play-container.game-2p {
        gap: 2px !important;
    }

    .game-play-container.game-3p {
        gap: 2px !important;
        grid-template-columns: 1fr minmax(45px, 75px) !important;
    }

    .game-play-container.game-4p {
        gap: 2px !important;
        grid-template-columns: minmax(42px, 70px) 1fr minmax(42px, 70px) !important;
    }

    /* Table Felt - ULTRA compressed pentru landscape (înălțime critic limitată) */
    .table-felt {
        min-height: 70px !important;
        max-height: 95px !important;
        padding: 4px !important;
    }

    .table-cards {
        gap: 0 !important;
        min-height: 55px !important;
        padding: 3px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }

    .table-cards .card {
        /* margin-left controlled by JS applyTableCardLayout() */
        transition: margin-left 0.2s ease !important;
    }

    /* Player/Opponent Hands - ULTRA-compact landscape */
    .player-hand,
    .seat-south .seat-hand {
        min-height: 48px !important;
        max-height: 62px !important;
        padding: 2px !important;
        gap: 2px !important;
    }

    .opponent-hand,
    .seat-north .seat-hand {
        min-height: 38px !important;
        max-height: 50px !important;
        padding: 2px !important;
        gap: 2px !important;
    }

    /* Side Seats - Ultra-minimal */
    .seat-east .seat-hand,
    .seat-west .seat-hand {
        min-height: 38px !important;
        max-height: 48px !important;
        padding: 1px !important;
        gap: 1px !important;
    }

    /* Card Sizes - Landscape (mai mici pentru încadrare) */
    .card {
        width: 44px !important;
        height: 62px !important;
        font-size: 15px !important;
    }

    /* Opponent cards - mai mici */
    .opponent-hand .card,
    .seat-north .card {
        width: 36px !important;
        height: 50px !important;
        font-size: 13px !important;
    }

    /* Table cards - vizibile dar compacte */
    .table-cards .card,
    #tableCards .card {
        width: 46px !important;
        height: 64px !important;
        font-size: 15px !important;
    }

    /* Side seats cards - ultra-mici */
    .seat-east .card,
    .seat-west .card {
        width: 18px !important;
        height: 25px !important;
        font-size: 7px !important;
    }

    /* Card rank/suit - sized for landscape cards */
    .card .rank {
        font-size: 1.1rem !important;
        margin: 2px 0 !important;
    }

    .card .suit {
        font-size: 1.6rem !important;
        margin: 2px 0 !important;
    }

    /* Table card rank/suit */
    #tableCards .card .rank,
    .table-cards .card .rank {
        font-size: 1.0rem !important;
        margin: 2px 0 !important;
    }

    #tableCards .card .suit,
    .table-cards .card .suit {
        font-size: 1.5rem !important;
        margin: 2px 0 !important;
    }

    .opponent-hand .card .rank,
    .seat-north .card .rank,
    .seat-west .card .rank,
    .seat-east .card .rank {
        font-size: 0.6rem !important;
        margin: 1px 0 !important;
    }

    .opponent-hand .card .suit,
    .seat-north .card .suit,
    .seat-west .card .suit,
    .seat-east .card .suit {
        font-size: 0.8rem !important;
        margin: 1px 0 !important;
    }

    /* Player Info - ULTRA compact landscape */
    .player-info {
        min-width: auto !important;
        padding: 3px !important;
    }

    .player-avatar {
        width: 30px !important;
        height: 30px !important;
    }

    .player-name {
        font-size: 11px !important;
    }

    .meta-item {
        font-size: 9px !important;
    }

    /* Side seats - minimal */
    .seat-east .player-info,
    .seat-west .player-info {
        padding: 2px !important;
    }

    .seat-east .player-avatar,
    .seat-west .player-avatar {
        width: 20px !important;
        height: 20px !important;
    }

    .seat-east .player-name,
    .seat-west .player-name {
        font-size: 8px !important; /* Micro font pentru spațiu landscape */
        max-width: 35px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Table Info - Minimal */
    .table-info {
        font-size: 9px !important;
        padding: 2px 4px !important;
        margin-bottom: 2px !important;
    }

    .table-pot,
    .table-last {
        font-size: 8px !important;
        padding: 2px 4px !important;
    }

    .table-pot .material-symbols-rounded,
    .table-last .material-symbols-rounded {
        font-size: 12px !important;
    }

    /* Table Deck - compact landscape */
    .table-deck {
        right: 3px !important;
        bottom: 3px !important;
    }

    .deck-stack {
        width: 30px !important;
        height: 42px !important;
    }

    .deck-card-back {
        width: 30px !important;
        height: 42px !important;
    }

    .deck-count {
        font-size: 8px !important;
        padding: 1px 3px !important;
    }

    /* Table Message - compact landscape */
    .table-message {
        font-size: 10px !important;
        padding: 3px 6px !important;
        white-space: normal !important;
    }

    /* Bottom Nav - ULTRA minimal */
    .nav-rail {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    .status-bar {
        min-height: 22px !important;
        height: 22px !important;
        padding: 2px 6px !important;
    }

    .status-item {
        font-size: 8px !important;
    }

    .status-item .material-symbols-rounded {
        font-size: 12px !important;
    }

    .nav-items {
        min-height: 48px !important;
        height: 48px !important;
    }

    .nav-label {
        font-size: 8px !important;
    }

    .nav-bar-btn {
        height: 40px !important;
    }
    .nav-bar-fab {
        width: 46px !important;
        height: 46px !important;
        transform: translateY(-6px) !important;
    }
    .nav-bar-label {
        font-size: 8px !important;
    }
}

/* Extra Small Landscape (max-height: 500px) - iPhone 12/13/14 landscape */
@media (max-height: 500px) and (orientation: landscape) {
    .top-bar {
        min-height: 32px !important;
        height: 32px !important;
        padding: 2px 6px !important;
    }

    .brand-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .action-btn {
        width: 28px !important;
        height: 28px !important;
    }

    /* Game Area - Extra compressed */
    .table-felt {
        min-height: 60px !important;
        max-height: 85px !important;
        padding: 3px !important;
    }

    .table-cards {
        min-height: 48px !important;
        padding: 2px !important;
        gap: 0 !important;
    }

    .table-cards .card {
        /* margin-left controlled by JS applyTableCardLayout() */
        transition: margin-left 0.2s ease !important;
    }

    .opponent-hand,
    .seat-north .seat-hand {
        min-height: 32px !important;
        max-height: 42px !important;
        padding: 2px !important;
    }

    .player-hand,
    .seat-south .seat-hand {
        min-height: 36px !important;
        max-height: 48px !important;
        padding: 2px !important;
    }

    /* Cards - mai mici */
    .card {
        width: 40px !important;
        height: 56px !important;
        font-size: 14px !important;
    }

    .opponent-hand .card {
        width: 32px !important;
        height: 45px !important;
        font-size: 12px !important;
    }

    .table-cards .card {
        width: 42px !important;
        height: 59px !important;
    }

    .seat-east .card,
    .seat-west .card {
        width: 16px !important;
        height: 22px !important;
    }

    /* Player info - mai mic */
    .player-avatar {
        width: 26px !important;
        height: 26px !important;
    }

    .player-name {
        font-size: 10px !important;
    }

    /* Table deck - compressed */
    .table-deck {
        right: 2px !important;
        bottom: 2px !important;
    }

    .deck-stack {
        width: 28px !important;
        height: 39px !important;
    }

    .deck-card-back {
        width: 28px !important;
        height: 39px !important;
    }

    .deck-count {
        font-size: 7px !important;
    }

    .table-info {
        font-size: 8px !important;
        padding: 1px 3px !important;
    }

    .table-pot,
    .table-last {
        font-size: 7px !important;
        padding: 1px 3px !important;
    }

    .table-pot .material-symbols-rounded,
    .table-last .material-symbols-rounded {
        font-size: 10px !important;
    }

    .table-message {
        font-size: 9px !important;
        padding: 2px 5px !important;
    }

    .status-bar {
        min-height: 20px !important;
        height: 20px !important;
        padding: 1px 4px !important;
    }

    .nav-items {
        min-height: 44px !important;
        height: 44px !important;
    }

    .nav-bar-btn {
        height: 38px !important;
    }
    .nav-bar-fab {
        width: 44px !important;
        height: 44px !important;
        transform: translateY(-6px) !important;
    }
    .nav-bar-label {
        font-size: 8px !important;
    }
}

/* iPhone SE Landscape (max-height: 400px) - 568x320px */
@media (max-height: 400px) and (orientation: landscape) {
    .top-bar {
        min-height: 28px !important;
        height: 28px !important;
        padding: 1px 4px !important;
    }

    .brand-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .brand-text h1 {
        font-size: 12px !important;
    }

    .action-btn {
        width: 24px !important;
        height: 24px !important;
    }

    .action-btn .material-symbols-rounded {
        font-size: 16px !important;
    }

    /* Game Area - Maximum compression */
    .game-canvas {
        padding: 0 1px 1px 1px !important;
    }

    .game-play-container {
        gap: 1px !important;
    }

    .table-felt {
        min-height: 52px !important;
        max-height: 70px !important;
        padding: 2px !important;
    }

    .table-cards {
        min-height: 42px !important;
        padding: 2px !important;
        gap: 0 !important;
    }

    .table-cards .card {
        /* margin-left controlled by JS applyTableCardLayout() */
        transition: margin-left 0.15s ease !important;
    }

    .opponent-hand,
    .seat-north .seat-hand {
        min-height: 26px !important;
        max-height: 34px !important;
        padding: 1px !important;
        gap: 1px !important;
    }

    .player-hand,
    .seat-south .seat-hand {
        min-height: 30px !important;
        max-height: 40px !important;
        padding: 1px !important;
        gap: 1px !important;
    }

    .seat-east .seat-hand,
    .seat-west .seat-hand {
        min-height: 26px !important;
        max-height: 34px !important;
    }

    /* Cards - Ultra-compressed */
    .card {
        width: 36px !important;
        height: 50px !important;
        font-size: 13px !important;
    }

    .opponent-hand .card,
    .seat-north .card {
        width: 28px !important;
        height: 39px !important;
        font-size: 11px !important;
    }

    .table-cards .card,
    #tableCards .card {
        width: 38px !important;
        height: 53px !important;
        font-size: 13px !important;
    }

    .seat-east .card,
    .seat-west .card {
        width: 14px !important;
        height: 20px !important;
        font-size: 6px !important;
    }

    /* Card symbols - properly sized for landscape */
    .card .rank {
        font-size: 0.95rem !important;
        margin: 1px 0 !important;
    }

    .card .suit {
        font-size: 1.4rem !important;
        margin: 1px 0 !important;
    }

    #tableCards .card .rank,
    .table-cards .card .rank {
        font-size: 0.9rem !important;
        margin: 1px 0 !important;
    }

    #tableCards .card .suit,
    .table-cards .card .suit {
        font-size: 1.3rem !important;
        margin: 1px 0 !important;
    }

    .opponent-hand .card .rank,
    .seat-north .card .rank,
    .seat-west .card .rank,
    .seat-east .card .rank {
        font-size: 0.5rem !important;
        margin: 1px 0 !important;
    }

    .opponent-hand .card .suit,
    .seat-north .card .suit,
    .seat-west .card .suit,
    .seat-east .card .suit {
        font-size: 0.7rem !important;
        margin: 1px 0 !important;
    }

    /* Player info - minimal */
    .player-avatar {
        width: 22px !important;
        height: 22px !important;
    }

    .player-name {
        font-size: 9px !important;
    }

    .table-info {
        font-size: 8px !important;
        padding: 1px 3px !important;
    }

    .table-pot,
    .table-last {
        font-size: 7px !important;
        padding: 1px 2px !important;
    }

    .table-pot .material-symbols-rounded,
    .table-last .material-symbols-rounded {
        font-size: 9px !important;
    }

    .table-deck {
        right: 2px !important;
        bottom: 2px !important;
    }

    .deck-stack {
        width: 24px !important;
        height: 34px !important;
    }

    .deck-card-back {
        width: 24px !important;
        height: 34px !important;
    }

    .deck-count {
        font-size: 7px !important;
    }

    .table-message {
        font-size: 8px !important;
        padding: 2px 4px !important;
    }

    .status-bar {
        min-height: 18px !important;
        height: 18px !important;
    }

    .status-item {
        font-size: 7px !important;
    }

    .nav-items {
        min-height: 40px !important;
        height: 40px !important;
    }

    .nav-bar-btn {
        height: 36px !important;
    }
    .nav-bar-fab {
        width: 42px !important;
        height: 42px !important;
        transform: translateY(-4px) !important;
    }
    .nav-bar-label {
        font-size: 7px !important;
    }
}

/* Absolute Minimum - 320px height landscape (cel mai mic device) */
@media (max-height: 320px) and (orientation: landscape) {
    .top-bar {
        min-height: 24px !important;
        height: 24px !important;
        padding: 1px 3px !important;
    }

    .brand-icon {
        width: 18px !important;
        height: 18px !important;
    }

    .brand-text h1 {
        font-size: 11px !important;
    }

    .stats-layer {
        display: none !important; /* Hide stats pentru spațiu maxim */
    }

    .action-btn {
        width: 20px !important;
        height: 20px !important;
    }

    .action-btn .material-symbols-rounded {
        font-size: 14px !important;
    }

    /* Game Area - ABSOLUTE MINIMUM */
    .game-canvas {
        padding: 0px !important;
    }

    .game-play-container {
        gap: 1px !important;
    }

    .table-felt {
        min-height: 44px !important;
        max-height: 60px !important;
        padding: 2px !important;
    }

    .table-cards {
        min-height: 36px !important;
        padding: 1px !important;
        gap: 0 !important;
    }

    .table-cards .card {
        /* margin-left controlled by JS applyTableCardLayout() */
        transition: margin-left 0.15s ease !important;
    }

    .opponent-hand,
    .seat-north .seat-hand {
        min-height: 22px !important;
        max-height: 30px !important;
        padding: 1px !important;
        gap: 1px !important;
    }

    .player-hand,
    .seat-south .seat-hand {
        min-height: 26px !important;
        max-height: 34px !important;
        padding: 1px !important;
        gap: 1px !important;
    }

    /* Cards - ABSOLUTE MINIMUM */
    .card {
        width: 32px !important;
        height: 45px !important;
        font-size: 11px !important;
    }

    .opponent-hand .card,
    .seat-north .card {
        width: 24px !important;
        height: 34px !important;
        font-size: 9px !important;
    }

    .table-cards .card,
    #tableCards .card {
        width: 34px !important;
        height: 48px !important;
        font-size: 12px !important;
    }

    .seat-east .card,
    .seat-west .card {
        width: 12px !important;
        height: 17px !important;
        font-size: 5px !important;
    }

    /* Card symbols - absolute minimum */
    .card .rank {
        font-size: 0.85rem !important;
        margin: 1px 0 !important;
    }

    .card .suit {
        font-size: 1.2rem !important;
        margin: 1px 0 !important;
    }

    #tableCards .card .rank,
    .table-cards .card .rank {
        font-size: 0.8rem !important;
        margin: 1px 0 !important;
    }

    #tableCards .card .suit,
    .table-cards .card .suit {
        font-size: 1.1rem !important;
        margin: 1px 0 !important;
    }

    .opponent-hand .card .rank,
    .seat-north .card .rank,
    .seat-west .card .rank,
    .seat-east .card .rank {
        font-size: 0.45rem !important;
        margin: 0 !important;
    }

    .opponent-hand .card .suit,
    .seat-north .card .suit,
    .seat-west .card .suit,
    .seat-east .card .suit {
        font-size: 0.6rem !important;
        margin: 0 !important;
    }

    /* Player info - absolute minimal */
    .player-avatar {
        width: 18px !important;
        height: 18px !important;
    }

    .player-name {
        font-size: 8px !important;
    }

    .meta-item {
        display: none !important; /* Hide meta pentru spațiu */
    }

    .table-info {
        font-size: 7px !important;
        padding: 1px 2px !important;
    }

    .table-pot,
    .table-last {
        font-size: 6px !important;
        padding: 1px 2px !important;
    }

    .table-pot .material-symbols-rounded,
    .table-last .material-symbols-rounded {
        font-size: 8px !important;
    }

    .table-deck {
        right: 1px !important;
        bottom: 1px !important;
    }

    .deck-stack {
        width: 20px !important;
        height: 28px !important;
    }

    .deck-card-back {
        width: 20px !important;
        height: 28px !important;
    }

    .deck-count {
        font-size: 6px !important;
        padding: 0 2px !important;
    }

    .table-message {
        font-size: 7px !important;
        padding: 1px 3px !important;
    }

    .status-bar {
        min-height: 16px !important;
        height: auto !important;
        max-height: 24px !important;
        padding: 1px 3px !important;
        overflow: hidden !important;
    }

    .xp-bar-container {
        display: none !important;
    }

    .status-item {
        font-size: 6px !important;
    }

    .status-item .material-symbols-rounded {
        font-size: 10px !important;
    }

    .nav-items {
        min-height: 36px !important;
        height: 36px !important;
    }

    .nav-badge {
        display: none !important; /* Hide badges pentru spațiu */
    }

    .nav-label {
        font-size: 7px !important;
    }

    .nav-bar-btn {
        height: 34px !important;
    }
    .nav-bar-btn .nav-badge {
        display: none !important;
    }
    .nav-bar-fab {
        width: 40px !important;
        height: 40px !important;
        transform: translateY(-4px) !important;
    }
    .nav-bar-fab .material-symbols-rounded {
        font-size: 20px !important;
    }
    .nav-bar-label {
        font-size: 7px !important;
    }
    .nav-bar-dot {
        display: none !important;
    }
}

/* Extra Small Portrait (<375px) - iPhone SE, Android mini */
@media (max-width: 374px) and (orientation: portrait) {
    .top-bar {
        min-height: 44px !important;
        height: 44px !important;
        padding: 5px 8px !important;
    }

    .brand-text h1 {
        font-size: 14px !important;
    }

    .brand-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .action-btn {
        width: 30px !important;
        height: 30px !important;
    }

    /* Game Area - Extra Small Portrait - LAYOUT NOU */
    .game-canvas {
        padding: 0 2px 2px 2px !important;
    }

    .game-play-container {
        gap: 3px !important;
    }

    /* Oponenți sus - mai mici */
    .seat-north .player-avatar,
    .seat-west .player-avatar,
    .seat-east .player-avatar {
        width: 24px !important;
        height: 24px !important;
    }

    .seat-north .player-name,
    .seat-west .player-name,
    .seat-east .player-name {
        font-size: 9px !important;
        max-width: 50px !important;
    }

    .seat-north .seat-hand,
    .seat-west .seat-hand,
    .seat-east .seat-hand {
        min-height: 38px !important;
        max-height: 46px !important;
        gap: 2px !important;
    }

    .seat-north .card,
    .seat-west .card,
    .seat-east .card {
        width: 30px !important;
        height: 42px !important;
        font-size: 11px !important;
    }

    .seat-north .card .rank,
    .seat-west .card .rank,
    .seat-east .card .rank {
        font-size: 0.5rem !important;
        margin: 1px 0 !important;
    }

    .seat-north .card .suit,
    .seat-west .card .suit,
    .seat-east .card .suit {
        font-size: 0.7rem !important;
        margin: 1px 0 !important;
    }

    /* Table - mai mică */
    .table-felt {
        min-height: 49px !important;
        max-height: 77px !important;
        padding: 3px !important;
    }

    .table-cards {
        min-height: 50px !important;
        gap: 0 !important;
    }

    .table-cards .card {
        /* margin-left controlled by JS applyTableCardLayout() */
        transition: margin-left 0.25s ease !important;
    }

    .table-cards .card,
    #tableCards .card {
        width: 38px !important;
        height: 53px !important;
        font-size: 13px !important;
    }

    #tableCards .card .rank,
    .table-cards .card .rank {
        font-size: 0.8rem !important;
        margin: 1px 0 !important;
    }

    #tableCards .card .suit,
    .table-cards .card .suit {
        font-size: 1.1rem !important;
        margin: 1px 0 !important;
    }

    .table-info {
        font-size: 7px !important;
        padding: 1px 2px !important;
        top: 2px !important;
        left: 2px !important;
        right: 2px !important;
    }

    .table-pot,
    .table-last {
        font-size: 7px !important;
        padding: 1px 3px !important;
    }

    .table-pot .material-symbols-rounded,
    .table-last .material-symbols-rounded {
        font-size: 9px !important;
    }

    .deck-stack {
        width: 26px !important;
        height: 36px !important;
    }

    .deck-card-back {
        width: 26px !important;
        height: 36px !important;
    }

    .deck-count {
        font-size: 7px !important;
    }

    .table-message {
        font-size: 9px !important;
        padding: 2px 5px !important;
    }

    /* User (South) - mai mici dar încă confortabile */
    .seat-south .seat-hand {
        min-height: 72px !important;
        max-height: 86px !important;
        gap: 3px !important;
    }

    .seat-south .card {
        width: 36px !important;
        height: 50px !important;
        font-size: 12px !important;
    }

    .seat-south .card .rank {
        font-size: 0.75rem !important;
        margin: 1px 0 !important;
    }

    .seat-south .card .suit {
        font-size: 1.0rem !important;
        margin: 1px 0 !important;
    }

    .seat-south .player-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .seat-south .player-name {
        font-size: 12px !important;
    }

    .seat-south .meta-item {
        font-size: 10px !important;
    }

    /* Extra small portrait: compact status bar */
    .status-bar {
        min-height: 28px !important;
        height: auto !important;
        max-height: 56px !important;
        padding: 2px 4px !important;
        gap: 1px 4px !important;
    }

    .xp-bar-container {
        display: none !important;
    }

    .status-actions {
        gap: 0px !important;
    }

    .status-btn {
        width: 24px !important;
        height: 24px !important;
    }

    .status-btn .material-symbols-rounded {
        font-size: 12px !important;
    }

    .balance-badge {
        padding: 1px 4px !important;
        font-size: 9px !important;
    }

    .balance-badge .material-symbols-rounded {
        font-size: 12px !important;
    }
}

/* iOS Safari specific - Prevent address bar bounce */
@supports (-webkit-touch-callout: none) {
    html, body {
        height: -webkit-fill-available !important;
    }

    .app-container {
        height: -webkit-fill-available !important;
        min-height: -webkit-fill-available !important;
    }
}

/* ================================================================================================
   FULLSCREEN MODE - When browser bar is hidden (Fullscreen API or PWA)
================================================================================================ */
:fullscreen,
::backdrop {
    background: var(--bg-base, #0a0e0d) !important;
}

/* Fullscreen API active */
:fullscreen .app-container,
:fullscreen html,
:fullscreen body {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

/* PWA standalone/fullscreen mode */
@media (display-mode: fullscreen), (display-mode: standalone) {
    html, body {
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .app-container {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }
}

/* ================================================================================================
   END OF SEPTICA PRO CSS
================================================================================================ */

/* ================================================================================================
   MOBILE LANDSCAPE - SIMPLE OPTIMIZATION
   Only essential changes to fit everything on screen
================================================================================================ */

/* ================================================================================================
   MOBILE LANDSCAPE FIX - Fit ALL content without scroll
   Target: iPhone SE landscape (568x320) = smallest device

   Calculation for 320px height:
   - Header: 36px
   - Opponent: 45px
   - Table: 130px
   - Player: 50px
   - Bottom Nav: 56px
   Total: ~317px (leaves small margin) ✓
================================================================================================ */

@media (max-width: 1023px) and (orientation: landscape) {

    /* Adjust padding for compact bottom nav in landscape */
    .main-content {
        padding-bottom: calc(88px + var(--sab, 0px)) !important;
    }
    
    /* Compact status bar for landscape */
    .status-bar {
        min-height: 28px !important;
        padding: 2px 8px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
    
    .status-item {
        font-size: 9px !important;
    }
    
    .status-item .material-symbols-rounded {
        font-size: 14px !important;
    }
    
    .score-label {
        font-size: 8px !important;
    }

    .score-value {
        font-size: 11px !important;
    }

    /* Hide XP label and compact XP bar in landscape */
    .xp-bar-container {
        max-width: 80px !important;
        padding: 1px 4px !important;
        gap: 2px !important;
        font-size: 8px !important;
    }

    .xp-bar-container #xpLabel {
        display: none !important;
    }

    .xp-progress-track {
        width: 24px !important;
        height: 3px !important;
    }
    
    .status-btn {
        width: 28px !important;
        height: 28px !important;
    }
    
    .status-btn .material-symbols-rounded {
        font-size: 14px !important;
    }

    /* REMOVE padding from main container */
    .game-canvas {
        padding: 0 2px 2px 2px !important;
    }

    /* TOP BAR: 36-40px */
    .top-bar {
        min-height: 36px !important;
        height: 36px !important;
        padding: 4px 8px !important;
    }

    /* STATUS BAR / FOOTER: auto height for content */
    .status-bar {
        min-height: 28px !important;
        height: auto !important;
        max-height: 36px !important;
        padding: 2px 8px !important;
        overflow-x: auto !important;
    }

    /* OPPONENT AREA: 45px total */
    .opponent-area {
        padding: 3px !important;
        min-height: 45px !important;
        max-height: 60px !important;
    }

    .opponent-hand {
        min-height: 40px !important;
        max-height: 50px !important;
        padding: 2px !important;
        overflow: visible !important;
    }

    /* PLAYER AREA: 50px total */
    .player-area {
        padding: 3px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }

    .player-hand {
        min-height: 45px !important;
        max-height: 60px !important;
        padding: 2px !important;
        overflow: visible !important;
    }

    /* TABLE AREA: 130px total */
    .table-area {
        padding: 2px !important;
        flex: 1 !important;
        min-height: 100px !important;
        max-height: 130px !important;
    }

    .table-felt {
        padding: 6px !important;
        min-height: 90px !important;
        max-height: 120px !important;
    }

    .table-info {
        margin-bottom: 2px !important;
    }

    .table-cards {
        min-height: 60px !important;
        max-height: 70px !important;
        padding: 2px !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }

    .table-cards .card {
        /* margin-left controlled by JS applyTableCardLayout() */
        transition: margin-left 0.15s ease !important;
    }

    .table-message {
        font-size: 10px !important;
        padding: 2px 6px !important;
        margin-top: 2px !important;
    }

    /* CARDS: Smaller sizes */
    .card {
        width: 38px !important;
        height: 53px !important;
        font-size: 14px !important;
    }

    .opponent-hand .card {
        width: 26px !important;
        height: 36px !important;
        font-size: 10px !important;
    }

    .table-cards .card {
        width: 44px !important;
        height: 62px !important;
    }

    /* PLAYER INFO: Compact */
    .player-info {
        padding: 3px 6px !important;
        min-width: 100px !important;
    }

    .player-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .player-name {
        font-size: 11px !important;
        line-height: 1.1 !important;
    }

    .meta-item {
        font-size: 9px !important;
    }

    /* BUTTONS: Smaller */
    .btn-control {
        padding: 4px 10px !important;
        font-size: 11px !important;
        height: 28px !important;
    }

    .action-btn,
    .status-btn {
        width: 32px !important;
        height: 32px !important;
    }

    .action-btn .material-symbols-rounded,
    .status-btn .material-symbols-rounded {
        font-size: 16px !important;
    }

    /* NAVIGATION: Compact bottom nav for landscape */
    .nav-rail {
        min-height: 88px !important;
        padding: 4px calc(var(--sal, 0px) + 8px) calc(var(--sab, 0px) + 6px) calc(var(--sar, 0px) + 8px) !important;
        gap: 2px !important;
    }

    .nav-items {
        gap: 2px !important;
    }

    .nav-item {
        height: 44px !important;
        min-width: 42px !important;
        max-width: 70px !important;
        gap: 1px !important;
    }

    .nav-item .material-symbols-rounded {
        font-size: 20px !important;
    }

    .nav-label {
        font-size: 9px !important;
        display: block !important;
    }

    /* New nav-bar landscape */
    .nav-rail {
        min-height: 76px !important;
    }
    .nav-bar-primary {
        gap: 4px !important;
    }
    .nav-bar-btn {
        height: 44px !important;
    }
    .nav-bar-fab {
        width: 50px !important;
        height: 50px !important;
        transform: translateY(-8px) !important;
    }
    .nav-bar-label {
        font-size: 9px !important;
        display: block !important;
    }

    /* BRAND: Compact */
    .brand-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .brand-icon .material-symbols-rounded {
        font-size: 18px !important;
    }

    .brand-text h1 {
        font-size: 14px !important;
    }

    .brand-tagline {
        display: none !important;
    }

    /* STATS: Hide or minimize */
    .stat-item {
        padding: 2px 4px !important;
        font-size: 9px !important;
    }

    .stat-icon {
        width: 18px !important;
        height: 18px !important;
        font-size: 12px !important;
    }

    .stat-label {
        display: none !important;
    }

    /* STATUS BAR: Compact */
    .status-item {
        font-size: 10px !important;
    }

    .score-label {
        font-size: 8px !important;
    }

    .score-value {
        font-size: 12px !important;
    }

    /* CONTEXT PANEL: Messenger-Style Full-Screen Slide */
    .context-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        transform: translateX(100%) !important;
        opacity: 1 !important;
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3) !important;
        z-index: 1100 !important;
        pointer-events: none !important;
        background: linear-gradient(180deg,
            rgba(10, 14, 13, 0.98) 0%,
            rgba(20, 26, 23, 0.95) 100%
        ) !important;
    }

    .context-panel.hidden {
        display: none !important;
    }

    .context-panel.active {
        transform: translateX(0) !important;
        pointer-events: all !important;
    }

    /* No backdrop needed - full screen */
    .context-panel::before {
        display: none !important;
    }

    /* Panel header Messenger-style */
    .context-panel .panel-header {
        padding: 12px 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        min-height: 56px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        backdrop-filter: blur(20px) !important;
    }

    .context-panel .panel-back {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        flex-shrink: 0 !important;
    }

    .context-panel .panel-back:active {
        transform: scale(0.95) !important;
        background: rgba(255, 255, 255, 0.15) !important;
    }

    .context-panel .panel-title {
        font-size: 16px !important;
        font-weight: 700 !important;
        flex: 1 !important;
        text-align: center !important;
    }

    .context-panel .panel-close {
        width: 40px !important;
        height: 40px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    .context-panel .panel-close .material-symbols-rounded {
        font-size: 20px !important;
    }

    /* Panel content scrollable - full height */
    .context-panel .panel-content {
        padding: 0 !important;
        height: calc(100vh - 56px) !important;
        max-height: calc(100vh - 56px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Compact content inside panels */
    .context-panel .panel-content h4 {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }

    .context-panel .panel-content .panel-section {
        margin-bottom: 8px !important;
    }

    /* Tables & Chat: Ultra compact in landscape */
    .context-panel .panel-content > div {
        gap: 6px !important;
    }

    /* Reduce all font sizes */
    .context-panel .panel-content * {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    /* Keep icons readable */
    .context-panel .material-symbols-rounded {
        font-size: 14px !important;
    }

    /* Compact buttons */
    .context-panel button {
        min-height: 36px !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
    }

    /* Stats boxes compact */
    .context-panel [style*="padding: clamp"] {
        padding: 4px !important;
    }

    /* MODALS: Smaller */
    .modal-content {
        max-width: 85vw !important;
        max-height: 75vh !important;
        padding: 10px !important;
    }

    .modal-title {
        font-size: 14px !important;
    }

    .modal-body {
        font-size: 11px !important;
    }
    
    /* GAME LOADER: Compact for landscape */
    .loader-content {
        max-width: 420px;
        padding: 16px 20px;
        gap: 14px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .loader-logo { flex: 0 0 100%; gap: 2px; }
    .logo-icon { font-size: 32px; }
    .logo-text { font-size: 18px; letter-spacing: 2px; }
    .logo-tagline { font-size: 9px; }

    .loader-cards { display: none; } /* Hide shuffle anim on landscape — too small */

    .loader-checklist {
        flex: 1 1 55%;
        gap: 6px;
    }

    .loader-check-item { padding: 6px 10px; font-size: 11px; }
    .check-icon { width: 18px; height: 18px; font-size: 10px; }

    .loader-progress-container { flex: 0 0 100%; }
    .loader-tip { display: none; }
}

/* Extra small landscape (iPhone SE: 568x320) */
@media (max-width: 667px) and (orientation: landscape) {

    /* Even smaller for tiny screens */
    .top-bar {
        min-height: 32px !important;
        height: 32px !important;
    }

    .status-bar {
        min-height: 32px !important;
        height: 32px !important;
    }

    .card {
        width: 34px !important;
        height: 48px !important;
    }

    .opponent-hand .card {
        width: 24px !important;
        height: 34px !important;
    }

    .table-cards .card {
        width: 40px !important;
        height: 56px !important;
    }

    .opponent-area {
        max-height: 50px !important;
    }

    .player-area {
        max-height: 60px !important;
    }

    .table-area {
        max-height: 110px !important;
    }
}

/* ================================================================================================
   GAME LOADER - Professional Card Game Loading Experience
================================================================================================ */
.game-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--viewport-height-dynamic, 100vh);
    background: linear-gradient(160deg, var(--color-bg-primary) 0%, var(--color-primary) 40%, var(--color-bg-primary) 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-loader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Ambient glow behind content */
.loader-ambient {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.12) 0%, transparent 65%);
    animation: ambientPulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ambientPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.4; }
}

/* Loader Content Card */
.loader-content {
    position: relative;
    z-index: 2;
    max-width: 440px;
    width: 88%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 36px 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(var(--color-accent-rgb), 0.12);
    border-radius: 20px;
    backdrop-filter: blur(24px);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: fadeInUp 0.6s ease;
}

/* ── Logo Section ────────── */
.loader-logo {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.logo-icon {
    font-size: 56px;
    display: block;
    filter: drop-shadow(0 4px 16px rgba(var(--color-accent-rgb), 0.4));
    animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.logo-text {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--color-accent);
    letter-spacing: 3px;
    margin: 0;
    text-shadow: 0 0 24px rgba(var(--color-accent-rgb), 0.4);
}

.logo-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
}

/* ── Card Shuffle Animation ────────── */
.loader-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 64px;
    position: relative;
}

.loader-card {
    width: 40px;
    height: 56px;
    background: linear-gradient(145deg,
        rgba(var(--color-accent-rgb), 0.15) 0%,
        rgba(var(--color-accent-rgb), 0.05) 100%
    );
    border: 1.5px solid rgba(var(--color-accent-rgb), 0.25);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    position: absolute;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: cardShuffle 2.4s ease-in-out infinite;
    transform-origin: center bottom;
}

.loader-card:nth-child(1) { animation-delay: 0s; }
.loader-card:nth-child(2) { animation-delay: 0.15s; }
.loader-card:nth-child(3) { animation-delay: 0.3s; }
.loader-card:nth-child(4) { animation-delay: 0.45s; }

@keyframes cardShuffle {
    0%   { transform: translateX(0) rotate(0deg); opacity: 1; }
    15%  { transform: translateX(-40px) rotate(-8deg) translateY(-6px); }
    30%  { transform: translateX(0) rotate(0deg); opacity: 1; }
    45%  { transform: translateX(40px) rotate(8deg) translateY(-6px); }
    60%  { transform: translateX(0) rotate(0deg); opacity: 1; }
    100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}

/* ── Status Checklist ────────── */
.loader-checklist {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.loader-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.4s ease;
}

.loader-check-item.active {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(var(--color-accent-rgb), 0.2);
    background: rgba(var(--color-accent-rgb), 0.06);
}

.loader-check-item.done {
    color: rgba(255, 255, 255, 0.65);
    border-color: rgba(16, 185, 129, 0.2);
    background: rgba(16, 185, 129, 0.04);
}

.check-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    transition: all 0.4s ease;
}

/* Pending state — empty ring */
.loader-check-item .check-icon {
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: transparent;
}

/* Active state — spinner ring */
.loader-check-item.active .check-icon {
    border: 2px solid rgba(var(--color-accent-rgb), 0.2);
    border-top-color: var(--color-accent);
    animation: spin 0.8s linear infinite;
}

/* Done state — green check */
.loader-check-item.done .check-icon {
    border: none;
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.check-label {
    flex: 1;
    font-weight: 500;
}

.check-detail {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
    margin-left: auto;
    transition: color 0.3s ease;
}

.loader-check-item.active .check-detail {
    color: rgba(var(--color-accent-rgb), 0.7);
}

.loader-check-item.done .check-detail {
    color: rgba(16, 185, 129, 0.6);
}

/* ── Progress Bar ────────── */
.loader-progress-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-bar-bg {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        var(--color-accent) 0%,
        var(--color-accent-light, var(--color-accent)) 50%,
        var(--color-accent) 100%
    );
    background-size: 200% 100%;
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.4);
    animation: loaderShimmer 1.8s ease-in-out infinite;
}

@keyframes loaderShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Glow sweep */
.progress-bar-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.25) 50%,
        transparent 100%
    );
    animation: sweepGlow 2.5s ease-in-out infinite;
}

@keyframes sweepGlow {
    0%   { left: -60%; }
    100% { left: 160%; }
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
}

.status-text {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.percent-text {
    font-weight: 700;
    font-size: 13px;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

/* ── Loader Tips ────────── */
.loader-tip {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    padding-top: 4px;
    animation: tipFade 6s ease-in-out infinite;
}

@keyframes tipFade {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* ── Mobile Responsive ────────── */
@media (max-width: 768px) {
    .loader-content {
        padding: 28px 24px;
        gap: 22px;
        max-width: 380px;
    }

    .logo-icon { font-size: 44px; }
    .logo-text { font-size: 24px; letter-spacing: 2px; }
    .logo-tagline { font-size: 11px; }

    .loader-card { width: 34px; height: 48px; font-size: 18px; }

    .loader-check-item {
        padding: 8px 12px;
        font-size: 12px;
    }

    .check-icon { width: 20px; height: 20px; font-size: 11px; }
}

/* ── Light Theme ────────── */
[data-theme="light"] .game-loader {
    background: linear-gradient(160deg, #faf9f6 0%, #f0ede5 40%, #faf9f6 100%);
}

[data-theme="light"] .loader-ambient {
    background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.08) 0%, transparent 65%);
}

[data-theme="light"] .loader-content {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
}

[data-theme="light"] .logo-tagline {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .loader-card {
    background: linear-gradient(145deg, rgba(var(--color-accent-rgb), 0.1) 0%, rgba(var(--color-accent-rgb), 0.03) 100%);
    border-color: rgba(var(--color-accent-rgb), 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .loader-check-item {
    color: rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .loader-check-item.active {
    color: rgba(0, 0, 0, 0.75);
    background: rgba(var(--color-accent-rgb), 0.05);
    border-color: rgba(var(--color-accent-rgb), 0.15);
}

[data-theme="light"] .loader-check-item.done {
    color: rgba(0, 0, 0, 0.6);
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.15);
}

[data-theme="light"] .loader-check-item .check-icon {
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .check-detail {
    color: rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .progress-bar-bg {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .status-text {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .loader-tip {
    color: rgba(0, 0, 0, 0.3);
}

/* ================================================================================================
   YOUR TURN INDICATOR - v2.6 (Simple Addition)
================================================================================================ */

.your-turn-indicator {
    display: none !important; /* ✅ DISABLED: folosim player-turn-badge */
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 9999;

    /* Visual */
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: var(--color-primary-dark);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    font-family: var(--font-display, 'Poppins', sans-serif);
    text-transform: uppercase;
    letter-spacing: 1px;

    /* Effects */
    box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), 0.5),
                0 0 0 2px rgba(var(--color-accent-rgb), 0.2);

    /* Animation properties */
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.your-turn-indicator.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    animation: turnPulse 1.5s ease-in-out infinite;
}

/* Pulse animation */
@keyframes turnPulse {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), 0.5),
                    0 0 0 2px rgba(var(--color-accent-rgb), 0.2);
        transform: translateX(-50%) translateY(0) scale(1);
    }
    50% {
        box-shadow: 0 6px 24px rgba(var(--color-accent-rgb), 0.8),
                    0 0 0 3px rgba(var(--color-accent-rgb), 0.4);
        transform: translateX(-50%) translateY(0) scale(1.05);
    }
}

/* Arrow indicator */
.your-turn-indicator::before {
    content: '▼';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--color-accent);
    animation: arrowBounce 0.8s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(5px);
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .your-turn-indicator {
        bottom: 60px;
        padding: 6px 12px;
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .your-turn-indicator::before {
        font-size: 20px;
        bottom: -16px;
    }
}

/* Small mobile */
@media (max-width: 375px) {
    .your-turn-indicator {
        padding: 10px 20px;
        font-size: 14px;
        letter-spacing: 1px;
    }
}

/* ================================================================================================
   4-PLAYER LAYOUT - SEAT STYLES
================================================================================================ */

/* Base Player Seat */
.player-seat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background:
        /* Spotlight — asymmetric overhead light (same as table) */
        radial-gradient(ellipse 70% 50% at 40% 35%,
            rgba(255, 255, 255, 0.06) 0%,
            transparent 55%),
        /* Bottom vignette — darkens edges for depth */
        radial-gradient(ellipse at 50% 100%,
            rgba(0, 0, 0, 0.12) 0%,
            transparent 50%),
        /* Base felt gradient */
        linear-gradient(135deg,
            var(--glass-table-bg) 0%,
            var(--glass-table-bg-center) 50%,
            var(--glass-table-bg) 100%);
    /* Table rim — raised wood rail with gold inlay (identical to table) */
    border: 3px solid rgba(65, 40, 20, 0.85);
    border-top: 3px solid rgba(100, 68, 35, 0.75);
    border-bottom: 3px solid rgba(35, 22, 10, 0.92);
    border-radius: clamp(20px, 5vw, 50px);
    box-shadow:
        /* Inner gold inlay line (premium detail) */
        inset 0 0 0 1px rgba(var(--color-accent-rgb), 0.1),
        /* Inner top-edge highlight */
        inset 0 2px 0 rgba(255, 255, 255, 0.08),
        /* Inner deep shadow (felt recess) */
        inset 0 6px 28px rgba(0, 0, 0, 0.5),
        /* Inner ambient occlusion */
        inset 0 0 50px rgba(0, 0, 0, 0.18),
        /* Contact shadow */
        0 2px 4px rgba(0, 0, 0, 0.3),
        /* Gold accent trim (flush with rim) */
        0 0 0 1px rgba(var(--color-accent-rgb), 0.2),
        0 0 0 2px rgba(65, 40, 20, 0.3),
        /* Primary drop shadow */
        0 12px 40px rgba(0, 0, 0, 0.4),
        /* Ambient shadow */
        0 24px 64px rgba(0, 0, 0, 0.18),
        /* Warm rim glow */
        0 0 20px rgba(var(--color-accent-rgb), 0.06);
    padding: 4px;
    contain: layout style;
    position: relative;
    z-index: 1;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* 3D bevel on seats */
.player-seat::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        /* 3D bevel gradient (same as table::before) */
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 35%,
            transparent 70%,
            rgba(0, 0, 0, 0.08) 100%);
    pointer-events: none;
    z-index: 2;
}


/* Bottom warm glow — gold accent contact light */
.player-seat::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: radial-gradient(ellipse at center,
        rgba(var(--color-accent-rgb), 0.12) 0%,
        transparent 70%);
    pointer-events: none;
    z-index: 4;
}

/* Active Turn — Gold inlay lights up on wood rim */
.player-seat.active-turn {
    border-color: rgba(var(--color-accent-rgb), 0.5);
    border-top-color: rgba(var(--color-accent-rgb), 0.6);
    border-bottom-color: rgba(var(--color-accent-rgb), 0.35);
    box-shadow:
        inset 0 0 0 1px rgba(var(--color-accent-rgb), 0.2),
        inset 0 2px 0 rgba(var(--color-accent-rgb), 0.12),
        inset 0 6px 28px rgba(0, 0, 0, 0.4),
        inset 0 0 50px rgba(0, 0, 0, 0.12),
        0 0 12px rgba(var(--color-accent-rgb), 0.25),
        0 0 0 1px rgba(var(--color-accent-rgb), 0.3),
        0 0 0 2px rgba(65, 40, 20, 0.2),
        0 0 30px rgba(var(--color-accent-rgb), 0.1),
        0 12px 40px rgba(0, 0, 0, 0.3),
        0 24px 64px rgba(0, 0, 0, 0.12);
    animation: seatPulse 2.5s ease-in-out infinite;
}

@keyframes seatPulse {
    0%, 100% {
        box-shadow:
            inset 0 0 0 1px rgba(var(--color-accent-rgb), 0.2),
            inset 0 2px 0 rgba(var(--color-accent-rgb), 0.12),
            inset 0 6px 28px rgba(0, 0, 0, 0.4),
            inset 0 0 50px rgba(0, 0, 0, 0.12),
            0 0 12px rgba(var(--color-accent-rgb), 0.25),
            0 0 0 1px rgba(var(--color-accent-rgb), 0.3),
            0 0 0 2px rgba(65, 40, 20, 0.2),
            0 0 30px rgba(var(--color-accent-rgb), 0.1),
            0 12px 40px rgba(0, 0, 0, 0.3),
            0 24px 64px rgba(0, 0, 0, 0.12);
    }
    50% {
        box-shadow:
            inset 0 0 0 1px rgba(var(--color-accent-rgb), 0.28),
            inset 0 2px 0 rgba(var(--color-accent-rgb), 0.18),
            inset 0 6px 28px rgba(0, 0, 0, 0.35),
            inset 0 0 50px rgba(0, 0, 0, 0.1),
            0 0 18px rgba(var(--color-accent-rgb), 0.35),
            0 0 0 1px rgba(var(--color-accent-rgb), 0.4),
            0 0 0 2px rgba(65, 40, 20, 0.15),
            0 0 40px rgba(var(--color-accent-rgb), 0.14),
            0 12px 40px rgba(0, 0, 0, 0.25),
            0 24px 64px rgba(0, 0, 0, 0.1);
    }
}

.player-seat.active-turn .player-info {
    border-color: rgba(var(--color-accent-rgb), 0.4);
}

/* Active turn — bevel gets warm gold tint */
.player-seat.active-turn::before {
    background:
        linear-gradient(180deg,
            rgba(var(--color-accent-rgb), 0.06) 0%,
            transparent 35%,
            transparent 70%,
            rgba(0, 0, 0, 0.06) 100%);
}

/* Active turn — bottom gold glow intensifies */
.player-seat.active-turn::after {
    background: radial-gradient(ellipse at center,
        rgba(var(--color-accent-rgb), 0.25) 0%,
        transparent 65%);
}

/* Active Turn — Avatar glow ring */
.player-seat.active-turn .player-avatar {
    border-color: rgba(var(--color-accent-rgb), 0.7) !important;
    box-shadow:
        0 0 0 2px rgba(var(--color-accent-rgb), 0.4),
        0 0 10px rgba(var(--color-accent-rgb), 0.3),
        0 0 20px rgba(var(--color-accent-rgb), 0.1) !important;
    animation: avatarGlow 2.5s ease-in-out infinite;
}

@keyframes avatarGlow {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(var(--color-accent-rgb), 0.4),
            0 0 10px rgba(var(--color-accent-rgb), 0.3),
            0 0 20px rgba(var(--color-accent-rgb), 0.1);
    }
    50% {
        box-shadow:
            0 0 0 3px rgba(var(--color-accent-rgb), 0.55),
            0 0 14px rgba(var(--color-accent-rgb), 0.4),
            0 0 28px rgba(var(--color-accent-rgb), 0.15);
    }
}

/* 🎯 Seats - position relative pentru badge positioning */
.seat-north,
.seat-south,
.seat-east,
.seat-west {
    position: relative !important;
}

/* 🎯 Player Turn Badge - arată pe fiecare user când e rândul lui */
.player-turn-badge {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg,
        rgba(var(--color-accent-rgb), 0.95) 0%,
        rgba(var(--color-accent-rgb), 1) 100%);
    color: var(--color-primary-dark, #1a1a2e);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow:
        0 4px 12px rgba(var(--color-accent-rgb), 0.4),
        0 0 0 2px rgba(var(--color-accent-rgb), 0.2);
    animation: badge-appear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 20;
}

/* 🎯 User Sud - badge LÂNGĂ avatar, nu peste cărți */
.seat-south .player-turn-badge {
    position: relative !important; /* Relative în player-info */
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-left: auto !important; /* Push la dreapta */
    flex-shrink: 0 !important;
}

.player-turn-badge .turn-icon {
    font-size: 14px;
    animation: pulse-icon 1.5s ease-in-out infinite;
}

.player-turn-badge .turn-text {
    font-family: var(--font-display);
    letter-spacing: 0.02em;
}

@keyframes badge-appear {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes pulse-icon {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* Player Info inside seats (compact) */
.player-seat .player-info {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.03) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    width: 100%;
    min-width: 0;
    transition: border-color 0.3s ease;
}

.player-seat .player-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 2px solid var(--color-accent);
}

.player-seat .player-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.player-seat .player-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-seat .player-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.player-seat .meta-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.player-seat .meta-item .material-symbols-rounded {
    font-size: 13px;
    color: var(--color-accent);
}

/* Seat Hand - Cards Container */
.player-seat .seat-hand {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2px;
    min-height: 30px;
    width: 100%;
    padding: 2px;
}

/* NORTH seat - single row: avatar + cards inline, centered */
.seat-north {
    grid-area: north;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 3px 6px;
}

/* Desktop: Keep north seat compact so info stays close to cards */
@media (min-width: 992px) {
    .seat-north {
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
        padding: 4px 16px;
    }
}

.seat-north .player-info {
    flex-shrink: 0;
    width: auto;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    gap: 0;
}


.seat-north .seat-hand {
    width: auto;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 2px;
    min-height: auto;
    justify-content: center;
}

/* SOUTH seat - human player, cards above info */
.seat-south {
    grid-area: south;
    flex-direction: column;
    align-items: center;
}

.seat-south .seat-hand {
    gap: 6px;
    min-height: 80px;
}

.seat-south .player-info {
    justify-content: center;
}

.seat-south .player-avatar {
    width: 40px;
    height: 40px;
}

.seat-south .player-name {
    font-size: 14px;
}

/* WEST and EAST seats - vertical compact layout */
.seat-west,
.seat-east {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow-y: auto;
}

.seat-west .seat-hand,
.seat-east .seat-hand {
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
    min-height: 28px;
}

/* AI cards at half size */
.seat-west .seat-hand .card,
.seat-east .seat-hand .card {
    width: 22px;
    height: 31px;
    font-size: 8px;
    border-radius: 3px;
}

.seat-north .seat-hand .card {
    width: 25px;
    height: 35px;
    font-size: 9px;
    border-radius: 3px;
}

/* ================================================================================================
   4-PLAYER RESPONSIVE - TABLET (< 768px)
================================================================================================ */
@media (max-width: 768px) {
    .game-play-container.game-4p {
        grid-template-columns: minmax(50px, 90px) 1fr minmax(50px, 90px);
        grid-template-rows: auto 1fr auto;
        gap: 3px;
    }

    /* Hide name on side seats, show only avatar + score */
    .seat-west .player-name,
    .seat-east .player-name {
        display: none;
    }

    .seat-west .player-avatar,
    .seat-east .player-avatar {
        width: 26px;
        height: 26px;
    }

    .seat-west .player-info,
    .seat-east .player-info {
        padding: 4px 6px;
        gap: 5px;
    }

    .seat-west .seat-hand .card,
    .seat-east .seat-hand .card {
        width: 20px;
        height: 28px;
        font-size: 7px;
    }

    .seat-north .seat-hand .card {
        width: 22px;
        height: 31px;
        font-size: 8px;
    }

    .seat-north .player-avatar {
        width: 26px;
        height: 26px;
    }

    .seat-north .player-info {
        padding: 4px 6px;
        gap: 5px;
    }
}

/* ================================================================================================
   4-PLAYER RESPONSIVE - SMALL MOBILE (< 480px)
================================================================================================ */
@media (max-width: 480px) {
    .game-play-container.game-4p {
        grid-template-columns: minmax(38px, 65px) 1fr minmax(38px, 65px);
        grid-template-rows: auto 1fr auto;
        gap: 2px;
    }

    .seat-west .seat-hand .card,
    .seat-east .seat-hand .card {
        width: 18px;
        height: 25px;
        font-size: 6px;
        border-radius: 2px;
    }

    .seat-north .seat-hand .card {
        width: 20px;
        height: 28px;
        font-size: 7px;
    }

    /* Hide player name in north too on small screens */
    .seat-north .player-name {
        display: none;
    }

    .player-seat .player-info {
        padding: 3px 5px;
    }

    .player-seat .player-avatar {
        width: 22px;
        height: 22px;
    }

    .seat-south .player-avatar {
        width: 32px;
        height: 32px;
    }

    .seat-south .seat-hand {
        gap: 4px;
        min-height: 60px;
    }
}

/* ================================================================================================
   2-PLAYER RESPONSIVE - TABLET (< 768px)
================================================================================================ */
@media (max-width: 768px) {
    .game-play-container.game-2p {
        gap: 3px;
    }
}

/* ================================================================================================
   2-PLAYER RESPONSIVE - SMALL MOBILE (< 480px)
================================================================================================ */
@media (max-width: 480px) {
    .game-play-container.game-2p {
        gap: 2px;
    }

    .player-count-selector {
        gap: 4px;
    }

    .player-count-selector .count-btn {
        padding: 8px 12px;
        font-size: 12px;
        min-height: 40px;
    }
}

/* ================================================================================================
   4-PLAYER RESPONSIVE - ULTRA SMALL MOBILE (< 375px)
================================================================================================ */
@media (max-width: 375px) {
    .game-play-container.game-4p {
        grid-template-columns: minmax(34px, 58px) 1fr minmax(34px, 58px);
        gap: 1px;
    }

    .game-4p .seat-west .seat-hand .card,
    .game-4p .seat-east .seat-hand .card {
        width: 16px !important;
        height: 22px !important;
        font-size: 5px !important;
        border-radius: 2px !important;
    }

    .game-4p .seat-west .player-avatar,
    .game-4p .seat-east .player-avatar {
        width: 18px !important;
        height: 18px !important;
    }

    .game-4p .seat-west .player-info,
    .game-4p .seat-east .player-info {
        padding: 2px 3px !important;
        gap: 3px !important;
        min-width: 0 !important;
    }

    .game-4p .seat-west .player-name,
    .game-4p .seat-east .player-name {
        font-size: 7px !important;
    }
}

/* ================================================================================================
   3-PLAYER RESPONSIVE - TABLET (< 768px)
================================================================================================ */
@media (max-width: 768px) {
    .game-play-container.game-3p {
        grid-template-columns: 1fr minmax(50px, 90px);
        gap: 3px;
    }
}

/* ================================================================================================
   3-PLAYER RESPONSIVE - SMALL MOBILE (< 480px)
================================================================================================ */
@media (max-width: 480px) {
    .game-play-container.game-3p {
        grid-template-columns: 1fr minmax(44px, 75px);
        gap: 2px;
    }
}

/* ================================================================================================
   RESULT RANKING TABLE
================================================================================================ */
.result-ranking {
    margin: 8px 0 4px;
    width: 100%;
}

.ranking-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ranking-table th {
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
}

.ranking-table td {
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ranking-table tbody tr:last-child td {
    border-bottom: none;
}

.ranking-table tr.rank-1st td {
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.05);
}

.ranking-table tr.rank-human td {
    background: rgba(var(--color-info-rgb), 0.08);
}

.ranking-table .rank-medal {
    font-size: 16px;
    text-align: center;
    width: 32px;
}

.ranking-table .rank-score {
    font-weight: 800;
    text-align: right;
    font-family: var(--font-display);
    color: var(--color-accent);
}

.ranking-table .rank-cards {
    text-align: right;
    color: var(--color-text-secondary);
    font-size: 11px;
}

/* === REWARD SYSTEM STYLES === */
.ranking-table .rank-reward {
    text-align: right;
    font-weight: 800;
    font-family: var(--font-display);
    font-size: 13px;
}

.rank-reward.reward-positive {
    color: #22c55e;
}

.rank-reward.reward-negative {
    color: #ef4444;
}

.rank-reward.reward-neutral {
    color: var(--color-text-secondary);
}

.ranking-table .rank-balance {
    text-align: right;
    font-weight: 700;
    font-family: var(--font-display);
    font-size: 12px;
}

.rank-balance.reward-positive {
    color: #22c55e;
}

.rank-balance.reward-negative {
    color: #ef4444;
}

.result-stat-highlight {
    background: rgba(var(--color-accent-rgb), 0.08);
    border-radius: 8px;
}

.result-stat-value.reward-positive {
    color: #22c55e !important;
}

.result-stat-value.reward-negative {
    color: #ef4444 !important;
}

.bonus-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.bonus-tag.capot {
    background: rgba(234, 179, 8, 0.2);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.bonus-tag.zero {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.bonus-tag.streak {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* ====== GUEST WARNING BANNER ====== */

/* ── Guest Warning Banner ── */
.guest-warning-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: linear-gradient(135deg, var(--glass-bg, rgba(15, 22, 41, 0.92)) 0%, var(--glass-bg-hover, rgba(30, 20, 50, 0.95)) 100%);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    padding: 0;
    box-shadow:
        0 1px 0 var(--glass-border, rgba(255, 255, 255, 0.06)),
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(var(--color-accent-rgb, 255, 215, 0), 0.15);
    animation: guestBannerSlideDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
}

.guest-warning-banner.guest-warning-hidden {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.guest-warning-content {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 16px;
    position: relative;
    overflow: hidden;
}

/* Animated accent line at top */
.guest-warning-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent, #ffd700), var(--color-accent-light, #ffe44d), var(--color-accent, #ffd700));
    background-size: 300% 100%;
    animation: guestAccentShimmer 4s linear infinite;
}

@keyframes guestAccentShimmer {
    0% { background-position: 0% 0; }
    100% { background-position: 300% 0; }
}

/* Icon */
.guest-warning-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb, 255, 215, 0), 0.15), rgba(var(--color-accent-rgb, 255, 215, 0), 0.05));
    border: 1px solid rgba(var(--color-accent-rgb, 255, 215, 0), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.guest-warning-icon-wrap .material-symbols-rounded {
    font-size: 20px;
    color: var(--color-accent, #ffd700);
}

/* Text body */
.guest-warning-body {
    flex: 1;
    min-width: 0;
}

.guest-warning-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary, #ffffff);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1px;
}

.guest-warning-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(var(--color-accent-rgb, 255, 215, 0), 0.15);
    color: var(--color-accent-light, #ffe44d);
    border: 1px solid rgba(var(--color-accent-rgb, 255, 215, 0), 0.25);
}

.guest-warning-text {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.75));
    line-height: 1.35;
}

/* Login button */
.guest-warning-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: linear-gradient(135deg, var(--color-accent-dark, #b8960a), var(--color-accent, #ffd700));
    border: 1px solid rgba(var(--color-accent-rgb, 255, 215, 0), 0.3);
    border-radius: 10px;
    color: var(--color-bg-primary, #0a0e0d);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 4px 16px rgba(var(--color-accent-rgb, 255, 215, 0), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
}

.guest-warning-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: translateX(-100%);
    animation: guestLoginShimmer 3s ease-in-out infinite;
}

@keyframes guestLoginShimmer {
    0%, 70% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.guest-warning-login:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 8px 24px rgba(var(--color-accent-rgb, 255, 215, 0), 0.5),
        0 0 40px rgba(var(--color-accent-rgb, 255, 215, 0), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.guest-warning-login:active {
    transform: translateY(0) scale(0.98);
}

.guest-warning-login .material-symbols-rounded {
    font-size: 16px;
}

/* Close button */
.guest-warning-close {
    background: var(--glass-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.75));
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
    padding: 0;
}

.guest-warning-close .material-symbols-rounded {
    font-size: 16px;
}

.guest-warning-close:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    transform: rotate(90deg);
}

@keyframes guestBannerSlideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Mobile responsive ── */
@media (max-width: 576px) {
    .guest-warning-content {
        gap: 8px;
        padding: 8px 12px;
    }
    .guest-warning-icon-wrap {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }
    .guest-warning-icon-wrap .material-symbols-rounded {
        font-size: 17px;
    }
    .guest-warning-title {
        font-size: 12px;
    }
    .guest-warning-text {
        font-size: 10.5px;
    }
    .guest-warning-badge {
        display: none;
    }
    .guest-warning-login {
        padding: 6px 12px;
        font-size: 11.5px;
        gap: 4px;
    }
    .guest-warning-login .material-symbols-rounded {
        font-size: 14px;
    }
}

/* ================================================================================================
   MOBILE RESPONSIVE — ROOM MANAGEMENT PANEL & MINI CHAT
   Professional responsive design for portrait, landscape, and all breakpoints
================================================================================================ */

/* ── PORTRAIT: Small Phones (≤375px) ── */
@media (max-width: 375px) {
    .mp-table-room-panel {
        width: 96%;
        max-width: none;
        max-height: 75vh;
        padding: 10px 8px;
        gap: 8px;
        border-radius: 12px;
    }

    body.game-active .table-message {
        bottom: 2px !important;
    }

    .mp-table-room-panel .mp-overlay-title { font-size: 0.9rem; }
    .mp-table-room-panel .mp-overlay-subtitle { font-size: 0.72rem; }

    .mp-table-room-panel .mp-room-mgmt { gap: 5px; }

    .mp-table-room-panel .mp-room-mgmt-meta {
        flex-wrap: wrap;
        gap: 4px;
        font-size: 0.65rem;
    }

    .mp-table-room-panel .mp-player-slot {
        padding: 4px 6px;
        gap: 5px;
        border-radius: 6px;
    }

    .mp-table-room-panel .mp-player-avatar {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }

    .mp-table-room-panel .mp-player-name { font-size: 0.75rem; }
    .mp-table-room-panel .mp-player-host-badge { font-size: 0.6rem; }
    .mp-table-room-panel .mp-player-rating { font-size: 0.62rem; }

    .mp-table-room-panel .mp-player-ready-status {
        font-size: 0.65rem;
        padding: 1px 4px;
    }

    .mp-table-room-panel .mp-player-ready-status .material-symbols-rounded {
        font-size: 14px;
    }

    .mp-table-room-panel .mp-host-actions { gap: 3px; }
    .mp-table-room-panel .mp-host-btn {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }

    .mp-table-room-panel .mp-ready-btn {
        padding: 8px 14px;
        font-size: 0.82rem;
    }

    .mp-table-room-panel .mp-spectator-section { font-size: 0.7rem; }

    .mp-table-room-panel .mp-btn-leave-table {
        padding: 6px 12px;
        font-size: 0.72rem;
    }

}

/* ── PORTRAIT: Standard Phones (376px–480px) ── */
@media (min-width: 376px) and (max-width: 480px) {
    .mp-table-room-panel {
        width: 94%;
        max-width: none;
        max-height: 78vh;
        padding: 12px 10px;
        gap: 10px;
    }

    body.game-active .table-message {
        bottom: 4px !important;
    }

    .mp-table-room-panel .mp-overlay-title { font-size: 0.95rem; }
    .mp-table-room-panel .mp-room-mgmt-meta { font-size: 0.68rem; }

    .mp-table-room-panel .mp-player-slot {
        padding: 5px 7px;
        gap: 6px;
    }

    .mp-table-room-panel .mp-player-avatar {
        width: 26px;
        height: 26px;
    }

    .mp-table-room-panel .mp-player-name { font-size: 0.78rem; }
    .mp-table-room-panel .mp-player-rating { font-size: 0.66rem; }
    .mp-table-room-panel .mp-player-ready-status { font-size: 0.68rem; }
}

/* ── PORTRAIT: Large Phones (481px–576px) ── */
@media (min-width: 481px) and (max-width: 576px) {
    .mp-table-room-panel {
        width: 90%;
        max-width: 440px;
        max-height: 80vh;
    }
}

/* ── LANDSCAPE: All phones (short viewport) ── */
@media (orientation: landscape) and (max-height: 500px) {
    /* Hide lobby ads — need full width */
    .lobby-ad { display: none !important; }

    .mp-table-room-panel {
        width: 60%;
        max-width: 480px;
        max-height: 92vh;
        padding: 8px 12px;
        gap: 6px;
        border-radius: 10px;
    }

    body.game-active .table-message {
        bottom: 2px !important;
    }

    .mp-table-room-panel .mp-overlay-title { font-size: 0.85rem; }
    .mp-table-room-panel .mp-overlay-subtitle { font-size: 0.7rem; display: none; }
    .mp-table-room-panel .mp-waiting-dots { display: none; }
    .mp-table-room-panel #mpRoomCountdown { font-size: 0.68rem; }

    .mp-table-room-panel .mp-room-mgmt { gap: 4px; }
    .mp-table-room-panel .mp-room-mgmt-header { margin-bottom: 2px; }
    .mp-table-room-panel .mp-room-mgmt-meta { font-size: 0.65rem; gap: 4px; }

    .mp-table-room-panel .mp-player-list {
        max-height: 120px;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .mp-table-room-panel .mp-player-slot {
        padding: 3px 6px;
        gap: 5px;
    }

    .mp-table-room-panel .mp-player-avatar {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }

    .mp-table-room-panel .mp-player-name { font-size: 0.72rem; }
    .mp-table-room-panel .mp-player-rating { font-size: 0.6rem; }
    .mp-table-room-panel .mp-player-ready-status {
        font-size: 0.62rem;
        padding: 1px 4px;
    }
    .mp-table-room-panel .mp-player-ready-status .material-symbols-rounded {
        font-size: 14px;
    }

    .mp-table-room-panel .mp-ready-btn {
        padding: 6px 16px;
        font-size: 0.82rem;
    }

    .mp-table-room-panel .mp-spectator-section {
        font-size: 0.68rem;
        margin-top: 2px;
    }

    .mp-table-room-panel .mp-btn-leave-table {
        padding: 5px 10px;
        font-size: 0.72rem;
    }

    .mp-table-room-panel .mp-starting-msg { font-size: 0.78rem; }
}

/* ── LANDSCAPE: Very small phones (max-height: 380px) ── */
@media (orientation: landscape) and (max-height: 380px) {
    .mp-table-room-panel {
        width: 55%;
        max-width: 420px;
        max-height: 96vh;
        padding: 6px 10px;
        gap: 4px;
    }

    .mp-table-room-panel .mp-overlay-title { font-size: 0.8rem; }
    .mp-table-room-panel .mp-room-mgmt-meta { font-size: 0.6rem; }

    .mp-table-room-panel .mp-player-slot {
        padding: 2px 5px;
        gap: 4px;
    }

    .mp-table-room-panel .mp-player-avatar {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .mp-table-room-panel .mp-player-name { font-size: 0.68rem; }
    .mp-table-room-panel .mp-player-rating { font-size: 0.58rem; }

    .mp-table-room-panel .mp-ready-btn {
        padding: 5px 12px;
        font-size: 0.78rem;
    }

    .mp-table-room-panel .mp-btn-leave-table {
        padding: 4px 8px;
        font-size: 0.68rem;
    }
}

/* ── LANDSCAPE: Tablets (501px ≤ height ≤ 900px) ── */
@media (orientation: landscape) and (min-height: 501px) and (max-height: 900px) {
    .mp-table-room-panel {
        width: 50%;
        max-width: 500px;
        max-height: 85vh;
    }
}

/* ── TABLET PORTRAIT (577px–768px) ── */
@media (min-width: 577px) and (max-width: 768px) and (orientation: portrait) {
    .mp-table-room-panel {
        width: 80%;
        max-width: 480px;
    }
}

/* ── TABLET PORTRAIT (769px–1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .mp-table-room-panel {
        width: 65%;
        max-width: 500px;
    }
}

/* ── LARGE SCREENS (>1024px) ── */
@media (min-width: 1025px) {
    .mp-table-room-panel {
        width: 50%;
        max-width: 520px;
    }
}

/* ── TOUCH DEVICES: ensure tap targets are adequate ── */
@media (hover: none) and (pointer: coarse) {
    .mp-table-room-panel .mp-player-slot {
        min-height: 40px;
    }

    .mp-table-room-panel .mp-host-btn {
        min-width: 28px;
        min-height: 28px;
    }

    .mp-table-room-panel .mp-ready-btn {
        min-height: 44px;
    }

    .mp-table-room-panel .mp-btn-leave-table {
        min-height: 38px;
    }
}

/* ── SAFE AREA: iOS notch and home indicator ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body.game-active .table-message {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mp-table-room-panel {
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
}

/* ── ACCESSIBILITY: Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .chat-nav-badge,
    .chat-nav-badge.pulse {
        animation: none;
    }
}

/* ================================================================================================
   ROOM WAITING — MOBILE PORTRAIT OVERRIDES (must be at END of file)
   ================================================================================================
   These override the main mobile grid rules (grid-template-rows: minmax(90px,auto) 1fr minmax(110px,auto))
   which come earlier. In room-waiting, seats only show avatar+name (no cards/meta),
   so we use small fixed rows and give maximum space to the table panel.

   Layout (portrait mobile):
   ┌─────────────────────┐
   │  North seat (40px)  │  ← avatar + name only
   ├─────────────────────┤
   │                     │
   │   Table area (1fr)  │  ← room panel with tabs
   │                     │
   ├─────────────────────┤
   │  South seat (48px)  │  ← host/user avatar + name
   └─────────────────────┘
   ================================================================================================ */

/* ─── ALL MOBILE PORTRAIT (≤767px) ─── */
@media (max-width: 767px) {
    body.room-waiting .game-play-container,
    body.room-waiting .game-play-container.game-2p,
    body.room-waiting .game-play-container.game-3p,
    body.room-waiting .game-play-container.game-4p {
        grid-template-rows: minmax(36px, auto) 1fr minmax(44px, auto) !important;
        gap: 2px !important;
        align-items: stretch !important;
    }

    /* Seats: compact single-line, reset column-reverse from game mode */
    body.room-waiting .seat-south {
        flex-direction: column !important;
    }

    body.room-waiting .player-info {
        padding: 4px 8px !important;
        gap: 4px !important;
        min-height: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    body.room-waiting .player-avatar {
        width: 26px !important;
        height: 26px !important;
        flex-shrink: 0 !important;
    }

    body.room-waiting .player-name {
        font-size: 0.78rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Table area: no extra padding eats space */
    body.room-waiting .table-area {
        padding: 1px !important;
        align-items: stretch !important;
        align-self: stretch !important;
    }

    /* Table felt: fill grid cell completely */
    body.room-waiting .table-felt {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        border-radius: 10px !important;
    }
}

/* ─── SMALL MOBILE (≤480px) ─── */
@media (max-width: 480px) {
    body.room-waiting .game-play-container,
    body.room-waiting .game-play-container.game-2p,
    body.room-waiting .game-play-container.game-3p,
    body.room-waiting .game-play-container.game-4p {
        grid-template-rows: minmax(32px, auto) 1fr minmax(40px, auto) !important;
        gap: 1px !important;
    }

    body.room-waiting .player-info {
        padding: 3px 6px !important;
        gap: 3px !important;
    }

    body.room-waiting .player-avatar {
        width: 22px !important;
        height: 22px !important;
    }

    body.room-waiting .player-name {
        font-size: 0.72rem !important;
    }
}

/* ─── VERY SMALL MOBILE (≤375px) ─── */
@media (max-width: 375px) {
    body.room-waiting .game-play-container,
    body.room-waiting .game-play-container.game-2p,
    body.room-waiting .game-play-container.game-3p,
    body.room-waiting .game-play-container.game-4p {
        grid-template-rows: minmax(28px, auto) 1fr minmax(36px, auto) !important;
        gap: 1px !important;
    }

    body.room-waiting .player-info {
        padding: 2px 4px !important;
        gap: 2px !important;
    }

    body.room-waiting .player-avatar {
        width: 18px !important;
        height: 18px !important;
    }

    body.room-waiting .player-name {
        font-size: 0.68rem !important;
    }
}

/* ================================================================================================
   LOBBY MODE (game-menu) — Context Panel Full Height
   Panel-ul "Mese de Joc" ocupă tot ecranul sub header la prima intrare.
   Doar în starea lobby (game-menu), nu și în jocul activ.
   Top-bar = 48px pe toate dimensiunile portrait mobile.
================================================================================================ */
@media (max-width: 768px) {
    body.game-menu .context-panel {
        top: 48px !important;
        height: calc(100vh - 48px) !important;
        height: calc(100dvh - 48px) !important;
        max-height: calc(100vh - 48px) !important;
        max-height: calc(100dvh - 48px) !important;
        min-height: calc(100vh - 48px) !important;
        min-height: calc(100dvh - 48px) !important;
        border-radius: 0 !important;
    }

    /* Ascunde drag handle-ul (linia de sus) — nu mai e nevoie, panel-ul e full */
    body.game-menu .context-panel::before {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   DEAL ANIMATION — Override overflow so cards can fly from deck
   to all player hands without being clipped by parent containers.
   Applied via body.is-dealing class during dealCardsWithAnimation().
   ═══════════════════════════════════════════════════════════════════ */
body.is-dealing .player-hand,
body.is-dealing .seat-hand,
body.is-dealing .player-seat,
body.is-dealing .table-area,
body.is-dealing .game-play-container,
body.is-dealing .game-area,
body.is-dealing .table-cards {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CARD CAPTURE FLY ANIMATION
   ═══════════════════════════════════════════════════════════════════ */
.capture-fly-card {
    border-radius: 6px;
    backface-visibility: hidden;
    will-change: transform, left, top, opacity;
    filter: brightness(1.15) saturate(1.2);
    border: 1.5px solid rgba(255, 215, 0, 0.5) !important;
}
[data-theme="light"] .capture-fly-card {
    filter: brightness(1.05) saturate(1.1);
    border-color: rgba(180, 140, 0, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CAPTURE POPUP — arată cărțile câștigate lângă seat
   ═══════════════════════════════════════════════════════════════════ */
.capture-popup {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.88);
    border: 1px solid rgba(var(--color-accent-rgb), 0.5);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(var(--color-accent-rgb), 0.15);
    white-space: nowrap;
    pointer-events: none;
    z-index: 200;
    animation: capturePopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.capture-popup-south { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; }
.capture-popup-north { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; }
.capture-popup-east,
.capture-popup-west { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; }

@keyframes capturePopIn {
    0% { opacity: 0; scale: 0.5; }
    100% { opacity: 1; scale: 1; }
}
.capture-popup-out {
    animation: capturePopOut 0.35s ease-in forwards !important;
}
@keyframes capturePopOut {
    0% { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 0.7; }
}

.capture-chip {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.95);
    font-size: clamp(11px, 2.2vw, 14px);
    font-weight: 800;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.capture-chip.chip-red { color: #dc2626; }
.capture-chip.chip-black { color: #1f2937; }

.capture-plus {
    font-size: clamp(10px, 1.8vw, 13px);
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}
.capture-sum {
    font-size: clamp(11px, 2.2vw, 14px);
    color: #22c55e;
    font-weight: 800;
    margin-left: 2px;
    text-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}

.capture-flash {
    animation: captureInfoFlash 0.6s ease-out;
}
@keyframes captureInfoFlash {
    0% { box-shadow: 0 0 16px rgba(34, 197, 94, 0.7), inset 0 0 8px rgba(34, 197, 94, 0.3); }
    100% { box-shadow: none; }
}

[data-theme="light"] .capture-popup {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(var(--color-accent-rgb), 0.6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 12px rgba(var(--color-accent-rgb), 0.1);
}
[data-theme="light"] .capture-plus { color: rgba(0, 0, 0, 0.4); }
[data-theme="light"] .capture-sum { color: #16a34a; text-shadow: none; }

/* ═══════════════════════════════════════════════════
   LOBBY VIEW — Full-screen lobby (matches Table style)
   ═══════════════════════════════════════════════════ */
.lobby-view { display: none; }
body.game-menu .lobby-view {
    display: flex; flex-direction: column; align-items: center; flex: 1;
    min-height: 0; max-height: calc(100vh - 120px); overflow-y: auto; overflow-x: hidden;
    padding: clamp(8px,2vw,16px); padding-bottom: clamp(8px,2vw,16px);
    gap: clamp(8px,1.5vw,12px);
    scroll-behavior: smooth;
}
body.game-menu .lobby-view > * { width: 100%; }
.lobby-view::-webkit-scrollbar { width: 4px; }
.lobby-view::-webkit-scrollbar-track { background: transparent; }
.lobby-view::-webkit-scrollbar-thumb { background: rgba(var(--color-accent-rgb),0.15); border-radius: 4px; }
body.game-menu .game-play-container { display: none !important; }
body.game-menu .table-message { display: none !important; }
/* Context panel hidden only when lobby-view is showing AND panel is not active */
body.game-menu .context-panel:not(.active) { display: none !important; }

/* Quick Join button */
.lobby-btn-quick {
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.2), rgba(var(--color-accent-rgb), 0.08));
    color: var(--color-accent); border: 1px solid rgba(var(--color-accent-rgb), 0.25);
    position: relative; overflow: hidden;
}
.lobby-btn-quick:hover {
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.3), rgba(var(--color-accent-rgb), 0.15));
    transform: translateY(-1px);
}
.lobby-btn-quick .material-symbols-rounded { font-size: 18px; }

/* AI Card */
.lobby-ai-card {
    display: flex; align-items: center; gap: clamp(10px, 2vw, 16px);
    padding: clamp(6px, 1.2vw, 10px) clamp(10px, 2vw, 16px);
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: clamp(6px, 1.2vw, 10px); font-size: clamp(11px, 2.2vw, 13px);
    color: var(--color-text-secondary); flex: 1; min-width: 0;
}
.lobby-ai-info { display: flex; align-items: center; gap: 8px; }
.lobby-ai-text { display: flex; flex-direction: column; line-height: 1.2; }
.lobby-ai-text strong { color: white; font-size: clamp(12px, 2.4vw, 14px); font-weight: 700; }
.lobby-ai-text span { font-size: clamp(9px, 1.8vw, 11px); color: var(--color-text-secondary); }
.lobby-ai-stats { display: flex; gap: clamp(8px, 1.6vw, 14px); font-size: clamp(11px, 2.2vw, 12px); color: var(--color-text-secondary); margin-left: auto; }
.lobby-ai-stats strong { color: white; font-weight: 700; }
.lobby-ai-play-btn {
    display: flex; align-items: center; gap: 4px;
    padding: clamp(5px, 1vw, 8px) clamp(10px, 2vw, 14px);
    background: linear-gradient(135deg, var(--color-success, #22c55e), #22c55e);
    border: none; border-radius: clamp(5px, 1vw, 7px);
    color: white; font-weight: 700; font-size: clamp(11px, 2.2vw, 12px);
    cursor: pointer; white-space: nowrap; transition: all 0.2s; touch-action: manipulation;
    transition: all 0.2s;
}
.lobby-ai-play-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), 0.4); }

/* Leaderboard */
.lobby-leaderboard {
    background: rgba(var(--color-accent-rgb), 0.04);
    border: 1px solid rgba(var(--color-accent-rgb), 0.1);
    border-radius: 10px; padding: 8px 12px;
}
.lobby-lb-header { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--color-accent); }
.lobby-lb-header .material-symbols-rounded { font-size: 18px; }
.lobby-lb-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.lobby-lb-list::-webkit-scrollbar { display: none; }
.lobby-lb-item { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); white-space: nowrap; min-width: 0; flex-shrink: 0; }
.lobby-lb-rank { font-weight: 800; font-size: 14px; min-width: 16px; }
.lobby-lb-avatar { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.lobby-lb-name { font-size: 12px; font-weight: 600; }
.lobby-lb-pts { font-size: 11px; color: var(--color-accent); font-weight: 600; }
.lobby-lb-loading { font-size: 12px; color: var(--color-text-secondary); }

/* Sort select */
.lobby-sort-select {
    background: rgba(255,255,255,0.06); color: var(--color-text-primary);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
    padding: 4px 8px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.lobby-sort-select option { background: var(--color-bg-primary); }

.lobby-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; }
.lobby-header-left { display: flex; align-items: center; gap: 12px; }
.lobby-online-indicator, .lobby-rooms-count { display: flex; align-items: center; gap: 5px; font-size: clamp(11px,2.2vw,13px); color: var(--color-text-secondary); font-weight: 600; }
.lobby-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; transition: background 0.3s; }
.lobby-status-dot.connected { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.lobby-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.lobby-btn { min-height: 36px; padding: 6px 14px; border: none; border-radius: 8px; font-weight: 700; font-size: clamp(11px,2.2vw,13px); cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.25s; white-space: nowrap; touch-action: manipulation; }
.lobby-btn .material-symbols-rounded { font-size: 18px; }
.lobby-btn-create { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark, #b8860b)); color: var(--color-bg-primary); box-shadow: 0 2px 8px rgba(var(--color-accent-rgb),0.25); }
.lobby-btn-create:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--color-accent-rgb),0.35); }
.lobby-btn-create:disabled { opacity: 0.5; pointer-events: none; }
.lobby-btn-ai { background: rgba(var(--color-success-rgb,34,197,94),0.15); color: var(--color-success); border: 1px solid rgba(var(--color-success-rgb,34,197,94),0.2); }
.lobby-btn-ai:hover { background: rgba(var(--color-success-rgb,34,197,94),0.25); }

.lobby-stats-row { display: flex; align-items: stretch; gap: clamp(6px, 1.2vw, 10px); flex-wrap: wrap; }
.lobby-stats-bar {
    display: flex; align-items: center; gap: clamp(12px, 3vw, 20px);
    padding: clamp(6px, 1.2vw, 10px) clamp(10px, 2vw, 16px);
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: clamp(6px, 1.2vw, 10px); font-size: clamp(11px, 2.2vw, 13px);
    color: var(--color-text-secondary);
}
.lobby-stat { display: flex; align-items: center; gap: 4px; }
.lobby-stat strong { color: white; font-weight: 700; }
.lobby-stat-icon { font-size: clamp(14px, 2.8vw, 16px); }

.lobby-filter-bar { display: flex; align-items: center; gap: 6px; }
.lobby-filters-scroll { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 2px 0; }
.lobby-filters-scroll::-webkit-scrollbar { display: none; }
.lobby-chip { padding: 4px 9px; border-radius: 5px; font-size: clamp(10px,2vw,11px); font-weight: 600; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.03); color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; transition: all 0.2s; flex-shrink: 0; }
.lobby-chip:hover { background: rgba(var(--color-accent-rgb),0.08); }
.lobby-chip.active { background: rgba(var(--color-accent-rgb),0.15); border-color: rgba(var(--color-accent-rgb),0.3); color: var(--color-accent); }
.lobby-chip-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.08); flex-shrink: 0; }
.lobby-search-toggle { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.06); border-radius: 7px; background: rgba(255,255,255,0.03); color: var(--color-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.lobby-search-toggle:hover { background: rgba(var(--color-accent-rgb),0.1); color: var(--color-accent); }

.lobby-search-row { padding: 0 0 2px; }
.lobby-search-wrap { display: flex; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 0 10px; gap: 8px; }
.lobby-search-icon { font-size: 18px; color: var(--color-text-tertiary,#666); }
.lobby-search-input { flex: 1; background: none; border: none; outline: none; color: var(--color-text-primary); font-size: clamp(12px,2.5vw,14px); padding: 8px 0; font-family: inherit; }
.lobby-search-input::placeholder { color: var(--color-text-disabled,#555); }
.lobby-search-clear { background: none; border: none; color: var(--color-text-tertiary); cursor: pointer; font-size: 16px; padding: 4px; }

/* ── Modal Close Button (for room detail modal) ── */
.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-primary-rgb), 0.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 10;
    padding: 0;
    font-size: 0;
    line-height: 1;
}
.modal-close-btn .material-symbols-rounded { font-size: 18px; }
.modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
    transform: rotate(90deg);
}
.modal-close-btn:active { transform: rotate(90deg) scale(0.9); }

/* ── Room Detail Modal ── */
.room-detail-modal { max-width: 380px; width: 92%; padding: clamp(14px, 2.5vw, 18px); max-height: 85vh; overflow-y: auto; }
.rdm-header { text-align: center; padding-bottom: clamp(8px, 1.5vw, 12px); border-bottom: 1px solid var(--glass-border-medium); margin-bottom: clamp(8px, 1.5vw, 12px); }
.rdm-room-name { font-size: clamp(14px, 3vw, 17px); font-weight: 800; color: var(--color-text-primary); margin-bottom: 2px; }
.rdm-host { font-size: clamp(10px, 2vw, 11px); color: var(--color-text-tertiary); }
.rdm-players { display: flex; flex-direction: column; gap: 6px; margin-bottom: clamp(8px, 1.5vw, 12px); }
.rdm-player { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--glass-bg-subtle); border-radius: 8px; border: 1px solid var(--glass-border-medium); }
.rdm-player-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: #fff; flex-shrink: 0; }
.rdm-player-name { font-size: 12px; font-weight: 700; color: var(--color-text-primary); flex: 1; }
.rdm-player-badge { font-size: 8px; font-weight: 700; padding: 2px 5px; border-radius: 4px; background: rgba(var(--color-accent-rgb), 0.15); color: var(--color-accent); }
.rdm-empty-slot { padding: 6px 8px; background: var(--glass-bg-subtle); border-radius: 8px; border: 1px dashed var(--glass-border-medium); text-align: center; font-size: 10px; color: var(--color-text-disabled); }
.rdm-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: clamp(10px, 2vw, 14px); }
.rdm-setting { padding: 6px; background: var(--glass-bg-subtle); border-radius: 8px; text-align: center; }
.rdm-setting-value { font-size: clamp(14px, 2.5vw, 16px); font-weight: 800; color: var(--color-accent); }
.rdm-setting-label { font-size: 9px; color: var(--color-text-tertiary); margin-top: 1px; }
.rdm-actions { display: flex; gap: 6px; }
.rdm-actions .rdm-action-btn { flex: 1; padding: clamp(8px, 1.8vw, 10px); border: none; border-radius: 8px; font-weight: 700; font-size: clamp(12px, 2.2vw, 13px); cursor: pointer; transition: all 0.25s; }
.rdm-action-btn.rdm-join { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-bg-primary); box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), 0.3); }
.rdm-action-btn.rdm-join:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(var(--color-accent-rgb), 0.4); }
.rdm-action-btn.rdm-spectate { background: rgba(255, 255, 255, 0.06); color: var(--color-text-secondary); border: 1px solid var(--glass-border-medium); }
.rdm-action-btn.rdm-spectate:hover { background: rgba(255, 255, 255, 0.1); }
[data-theme="light"] .rdm-player { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .rdm-setting { background: rgba(0, 0, 0, 0.03); }
[data-theme="light"] .room-detail-modal { background: rgba(255, 255, 255, 0.95); }

/* ── Lobby Card Entrance Animations ── */
.lobby-card {
    animation: card-entrance 0.4s ease-out both;
}
.lobby-card:nth-child(1) { animation-delay: 0s; }
.lobby-card:nth-child(2) { animation-delay: 0.05s; }
.lobby-card:nth-child(3) { animation-delay: 0.1s; }
.lobby-card:nth-child(4) { animation-delay: 0.15s; }
.lobby-card:nth-child(5) { animation-delay: 0.2s; }
.lobby-card:nth-child(6) { animation-delay: 0.25s; }
.lobby-card:nth-child(7) { animation-delay: 0.3s; }
.lobby-card:nth-child(8) { animation-delay: 0.35s; }
.lobby-card:nth-child(9) { animation-delay: 0.4s; }
.lobby-card:nth-child(n+10) { animation-delay: 0.45s; }
@keyframes card-entrance {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.lobby-card.lc-clickable:hover {
    transform: translateY(-2px) perspective(600px) rotateX(1deg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 12px rgba(var(--color-accent-rgb), 0.1);
}

/* ── Waiting Glow + Badge Pulse ── */
@keyframes waiting-glow {
    0%, 100% { border-color: rgba(74, 222, 128, 0.15); }
    50% { border-color: rgba(74, 222, 128, 0.4); }
}
@keyframes badge-pulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.6; }
}

/* ── Search Spin ── */
@keyframes search-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(90deg); }
}

/* ── Coin Flip ── */
.balance-badge.balance-updated {
    animation: coin-flip 0.6s ease-out;
}
@keyframes coin-flip {
    0% { transform: scale(1) rotateY(0); }
    30% { transform: scale(1.15) rotateY(180deg); }
    60% { transform: scale(1.1) rotateY(360deg); }
    100% { transform: scale(1) rotateY(360deg); }
}

/* ── Star Twinkle + Background Particles ── */
.lc-chip .material-symbols-rounded {
    animation: star-twinkle 3s ease-in-out infinite;
}
@keyframes star-twinkle {
    0%, 100% { opacity: 0.7; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.4); }
}
.lobby-grid::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(var(--color-accent-rgb), 0.3), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(var(--color-accent-rgb), 0.2), transparent),
        radial-gradient(1px 1px at 50% 40%, rgba(var(--color-accent-rgb), 0.25), transparent),
        radial-gradient(1px 1px at 70% 80%, rgba(var(--color-accent-rgb), 0.15), transparent),
        radial-gradient(1px 1px at 90% 30%, rgba(var(--color-accent-rgb), 0.2), transparent),
        radial-gradient(1.5px 1.5px at 15% 70%, rgba(var(--color-accent-rgb), 0.3), transparent),
        radial-gradient(1px 1px at 85% 50%, rgba(var(--color-accent-rgb), 0.2), transparent);
    animation: particles-drift 20s linear infinite;
}
@keyframes particles-drift {
    0% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-8px) translateX(4px); }
    50% { transform: translateY(-3px) translateX(-3px); }
    75% { transform: translateY(-10px) translateX(2px); }
    100% { transform: translateY(0) translateX(0); }
}

/* ── Chip Timer ── */
.lc-chip-timer {
    position: relative;
    overflow: hidden;
}
.lc-chip-timer::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.6), transparent);
    animation: timer-sweep 30s linear infinite;
}
@keyframes timer-sweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ── Report Player Button ── */
.report-player-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 4px;
    color: #ef4444;
    cursor: pointer;
    padding: 2px 3px;
    line-height: 1;
    transition: all 0.2s;
    z-index: 2;
    opacity: 0.6;
}
.report-player-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.6);
    opacity: 1;
}

/* ── Guest Overlay ── */
.lobby-guest-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(30px, 6vw, 60px);
    text-align: center;
    gap: 10px;
    position: absolute;
    inset: 0;
    background: rgba(var(--color-primary-rgb), 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 5;
    border-radius: inherit;
}
.lobby-guest-title { font-size: clamp(14px, 3vw, 18px); font-weight: 700; color: var(--color-text-primary); }
.lobby-guest-sub { font-size: clamp(11px, 2.2vw, 13px); color: var(--color-text-secondary); }
.lobby-guest-or { font-size: 11px; color: var(--color-text-disabled); }

/* ── Card Enter/Leave Animations ── */
@keyframes lobbyCardIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.lobby-card.lc-entering { animation: lobbyCardIn 0.3s ease both; }
.lobby-card.lc-entering:nth-child(1) { animation-delay: 0ms; }
.lobby-card.lc-entering:nth-child(2) { animation-delay: 40ms; }
.lobby-card.lc-entering:nth-child(3) { animation-delay: 80ms; }
.lobby-card.lc-entering:nth-child(4) { animation-delay: 120ms; }
.lobby-card.lc-entering:nth-child(5) { animation-delay: 160ms; }
.lobby-card.lc-entering:nth-child(6) { animation-delay: 200ms; }
.lobby-card.lc-entering:nth-child(7) { animation-delay: 240ms; }
.lobby-card.lc-entering:nth-child(8) { animation-delay: 280ms; }
.lobby-card.lc-entering:nth-child(9) { animation-delay: 320ms; }
.lobby-card.lc-leaving { opacity: 0; transform: scale(0.95); pointer-events: none; }
.mpc-card.lc-entering { animation: lobbyCardIn 0.25s ease both; }
.mpc-card.lc-leaving { opacity: 0; transform: scale(0.95); pointer-events: none; }

/* ── Lobby Refreshing Shimmer ── */
@keyframes lobbyShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.lobby-grid.lobby-refreshing .lobby-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--color-accent-rgb), 0.06) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: lobbyShimmer 0.6s ease;
    pointer-events: none;
}

/* ── Pull to Refresh ── */
.lobby-pull-indicator {
    height: 0;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: height 0.2s, opacity 0.2s;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}
.lobby-pull-indicator .material-symbols-rounded {
    font-size: 22px;
    transition: transform 0.3s;
}
.lobby-pull-indicator.ready .material-symbols-rounded {
    color: var(--color-accent);
    transform: rotate(180deg);
}
.lobby-pull-indicator.refreshing .material-symbols-rounded {
    animation: spin 0.6s linear infinite;
}

/* ── Light Theme Lobby Overrides ── */
[data-theme="light"] .lobby-stats-bar {
    background: rgba(var(--color-accent-rgb), 0.06);
    border-color: rgba(var(--color-accent-rgb), 0.1);
}
[data-theme="light"] .lobby-stat { color: #666; }
[data-theme="light"] .lobby-stat strong { color: #333; }
[data-theme="light"] .lobby-ai-card {
    background: rgba(var(--color-accent-rgb), 0.06);
    border-color: rgba(var(--color-accent-rgb), 0.1);
}
[data-theme="light"] .lobby-ai-text strong { color: #333; }
[data-theme="light"] .lobby-ai-stats strong { color: #333; }
[data-theme="light"] .lobby-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .lobby-card.lc-clickable:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .lobby-chip {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--color-text-secondary);
}
[data-theme="light"] .lobby-chip.active {
    background: rgba(var(--color-accent-rgb), 0.12);
    border-color: rgba(var(--color-accent-rgb), 0.25);
}
[data-theme="light"] .lc-chip {
    background: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .lobby-search-wrap {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .lobby-guest-overlay {
    background: rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .lobby-sort-select {
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--color-text-primary);
}
[data-theme="light"] .lobby-sort-select option {
    background: #fff;
    color: #1a1a1a;
}
[data-theme="light"] .lc-badge-open { background: rgba(34, 197, 94, 0.1); }
[data-theme="light"] .lc-badge-playing { background: rgba(245, 158, 11, 0.1); }
[data-theme="light"] .lc-badge-full { background: rgba(107, 114, 128, 0.1); }

/* ── Dice Mascot 3D ── */
.lobby-dice-mascot {
    width: 28px;
    height: 28px;
    perspective: 120px;
    flex-shrink: 0;
}
.dice-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: diceFloat 10s ease-in-out infinite;
}
@keyframes diceFloat {
    0%, 100% { transform: rotateX(15deg) rotateY(15deg); }
    25% { transform: rotateX(195deg) rotateY(105deg); }
    50% { transform: rotateX(375deg) rotateY(195deg); }
    75% { transform: rotateX(195deg) rotateY(285deg); }
}
.dice-face {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: grid;
    padding: 4px;
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.9), rgba(var(--color-accent-rgb), 0.7));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
}
.dice-face span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-bg-primary);
    place-self: center;
}
.dice-f1 { grid-template: 1fr / 1fr; transform: translateZ(14px); }
.dice-f2 { grid-template: 1fr 1fr / 1fr; transform: rotateY(180deg) translateZ(14px); }
.dice-f2 span:first-child { place-self: start end; }
.dice-f2 span:last-child { place-self: end start; }
.dice-f3 { grid-template: 1fr 1fr 1fr / 1fr; transform: rotateY(90deg) translateZ(14px); }
.dice-f3 span:first-child { place-self: start end; }
.dice-f3 span:last-child { place-self: end start; }
.dice-f4 { grid-template: 1fr 1fr / 1fr 1fr; transform: rotateY(-90deg) translateZ(14px); }
.dice-f5 { grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr; transform: rotateX(90deg) translateZ(14px); }
.dice-f5 span:nth-child(1) { grid-area: 1/1; }
.dice-f5 span:nth-child(2) { grid-area: 1/3; }
.dice-f5 span:nth-child(3) { grid-area: 2/2; }
.dice-f5 span:nth-child(4) { grid-area: 3/1; }
.dice-f5 span:nth-child(5) { grid-area: 3/3; }
.dice-f6 { grid-template: 1fr 1fr 1fr / 1fr 1fr; transform: rotateX(-90deg) translateZ(14px); }

/* Ad columns — hidden by default, visible only in lobby */
.lobby-ad { display: none; flex: 0 0 160px; width: 160px; min-height: 100%; align-items: flex-start; justify-content: center; padding: 12px 8px; }
body.game-menu .lobby-ad { display: flex; flex-direction: column; gap: 12px; }

.lobby-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(6px,1vw,10px); align-content: start; }
@media (max-width: 768px) { .lobby-grid { grid-template-columns: repeat(2,1fr); } body.game-menu .lobby-ad { display: none; } }
@media (max-width: 480px) { .lobby-grid { grid-template-columns: 1fr; } }

.lobby-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(40px, 8vw, 80px) clamp(20px, 4vw, 40px); text-align: center; flex: 1; }
.lobby-empty-icon { font-size: clamp(48px, 10vw, 72px); opacity: 0.2; }
.lobby-empty-title { font-size: clamp(14px, 3vw, 18px); color: var(--color-text-secondary); margin-top: 12px; font-weight: 600; }
.lobby-empty-sub { font-size: clamp(12px, 2.5vw, 14px); color: var(--color-text-tertiary); margin-top: 4px; }

.lobby-pagination { display: flex; justify-content: center; gap: 4px; padding: 8px 0; }

.lobby-guest-overlay {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: clamp(30px, 6vw, 60px); text-align: center; gap: 10px;
    position: absolute; inset: 0;
    background: rgba(var(--color-primary-rgb), 0.85);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    z-index: 5; border-radius: inherit;
}
.lobby-guest-title { font-size: clamp(14px, 3vw, 18px); font-weight: 700; color: var(--color-text-primary); }
.lobby-guest-sub { font-size: clamp(11px, 2.2vw, 13px); color: var(--color-text-secondary); }
.lobby-guest-or { font-size: 11px; color: var(--color-text-disabled); }

.lobby-sort-select {
    height: clamp(32px, 6vw, 36px); padding: 0 clamp(8px, 1.5vw, 10px);
    border: 1px solid var(--glass-border-medium); border-radius: clamp(6px, 1vw, 8px);
    background: var(--glass-bg-subtle); color: var(--color-text-secondary);
    font-size: clamp(10px, 2vw, 11px); font-weight: 600; font-family: inherit;
    cursor: pointer; flex-shrink: 0; outline: none;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; padding-right: 22px;
}
.lobby-sort-select:focus { border-color: rgba(var(--color-accent-rgb), 0.3); }
.lobby-sort-select option { background: var(--color-bg-secondary); color: var(--color-text-primary); }

/* ── Animated Card Mascot ── */
.lobby-card-mascot { width: 32px; height: 28px; flex-shrink: 0; position: relative; }
.card-fan { position: relative; width: 100%; height: 100%; animation: cardFanFloat 8s ease-in-out infinite; }
.mascot-card {
    position: absolute; width: 20px; height: 28px; border-radius: 3px;
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.9), rgba(var(--color-accent-rgb), 0.7));
    border: 1px solid rgba(255,255,255,0.2); box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800; color: var(--color-bg-primary); line-height: 1;
    transform-origin: bottom center;
}
.mascot-card small { font-size: 7px; line-height: 1; }
.mc-1 { transform: rotate(-18deg); left: 0; z-index: 1; }
.mc-2 { transform: rotate(0deg); left: 6px; z-index: 2; }
.mc-3 { transform: rotate(18deg); left: 12px; z-index: 1; }
@keyframes cardFanFloat {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(3deg) scale(1.03); }
    50% { transform: rotate(-2deg) scale(1); }
    75% { transform: rotate(1deg) scale(1.02); }
}

/* ── Lobby Animations (matching Table) ── */

/* 1. Online dot pulse */
.lobby-status-dot { animation: online-pulse 2s ease-in-out infinite; }
@keyframes online-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
    50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}

/* 2. Room cards stagger entrance — handled by lc-entering + lobbyCardIn below */

/* 3. Hover 3D tilt + glow */
.lobby-card.lc-clickable:hover {
    transform: translateY(-2px) perspective(600px) rotateX(1deg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 12px rgba(var(--color-accent-rgb), 0.1);
}

/* 4. "Intră Rapid" shimmer */
.lobby-btn-quick { position: relative; overflow: hidden; }
.lobby-btn-quick::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: btn-shimmer 3s ease-in-out infinite;
}
@keyframes btn-shimmer {
    0%, 70%, 100% { left: -100%; }
    85% { left: 150%; }
}

/* 5. Waiting rooms — animated pulsing border */
.lobby-card.lc-waiting {
    animation: waiting-glow 2.5s ease-in-out infinite;
}
@keyframes waiting-glow {
    0%, 100% { border-color: rgba(74, 222, 128, 0.15); }
    50% { border-color: rgba(74, 222, 128, 0.4); }
}

/* 6. "În joc" badge pulse */
.lc-badge-playing { animation: badge-pulse 2s ease-in-out infinite; }
@keyframes badge-pulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.6; }
}

/* 7. Stats count-up — subtle scale on load */
.lobby-stats-bar .lobby-stat { animation: stat-pop 0.5s ease-out both; }
.lobby-stats-bar .lobby-stat:nth-child(1) { animation-delay: 0.1s; }
.lobby-stats-bar .lobby-stat:nth-child(2) { animation-delay: 0.2s; }
.lobby-stats-bar .lobby-stat:nth-child(3) { animation-delay: 0.3s; }
@keyframes stat-pop {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

/* 8. "Joacă" button gradient shine */
.lobby-ai-play-btn { position: relative; overflow: hidden; }
.lobby-ai-play-btn::after {
    content: ''; position: absolute; top: 0; left: -120%;
    width: 80%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: play-shine 4s ease-in-out infinite;
}
@keyframes play-shine {
    0%, 60%, 100% { left: -120%; }
    75% { left: 150%; }
}

/* 9. "Creează Masă" subtle pulse */
.lobby-btn-create { animation: create-breathe 3s ease-in-out infinite; }
@keyframes create-breathe {
    0%, 100% { box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.1); }
    50% { box-shadow: 0 2px 16px rgba(var(--color-accent-rgb), 0.25); }
}

/* 10. Background gold particles */
.lobby-grid::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; z-index: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(var(--color-accent-rgb), 0.3), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(var(--color-accent-rgb), 0.2), transparent),
        radial-gradient(1px 1px at 50% 40%, rgba(var(--color-accent-rgb), 0.25), transparent),
        radial-gradient(1px 1px at 70% 80%, rgba(var(--color-accent-rgb), 0.15), transparent),
        radial-gradient(1px 1px at 90% 30%, rgba(var(--color-accent-rgb), 0.2), transparent);
    animation: particles-drift 20s linear infinite;
}
@keyframes particles-drift {
    0% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-8px) translateX(4px); }
    50% { transform: translateY(-3px) translateX(-3px); }
    75% { transform: translateY(-10px) translateX(2px); }
    100% { transform: translateY(0) translateX(0); }
}

/* 11. Card enter/leave animations (smooth lobby patching) */
@keyframes lobbyCardIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.lobby-card.lc-entering { animation: lobbyCardIn 0.3s ease both; }
.lobby-card.lc-entering:nth-child(1) { animation-delay: 0ms; }
.lobby-card.lc-entering:nth-child(2) { animation-delay: 40ms; }
.lobby-card.lc-entering:nth-child(3) { animation-delay: 80ms; }
.lobby-card.lc-entering:nth-child(4) { animation-delay: 120ms; }
.lobby-card.lc-entering:nth-child(5) { animation-delay: 160ms; }
.lobby-card.lc-entering:nth-child(6) { animation-delay: 200ms; }
.lobby-card.lc-entering:nth-child(7) { animation-delay: 240ms; }
.lobby-card.lc-entering:nth-child(8) { animation-delay: 280ms; }
.lobby-card.lc-entering:nth-child(9) { animation-delay: 320ms; }
.lobby-card.lc-leaving { opacity: 0; transform: scale(0.95); pointer-events: none; }
.mpc-card.lc-entering { animation: lobbyCardIn 0.25s ease both; }
.mpc-card.lc-leaving { opacity: 0; transform: scale(0.95); pointer-events: none; }

/* 12. Shimmer refresh effect */
@keyframes lobbyShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.lobby-grid.lobby-refreshing .lobby-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--color-accent-rgb), 0.06) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: lobbyShimmer 0.6s ease;
}

/* 13. Report player button */
.report-player-btn {
    position: absolute; top: 2px; right: 2px;
    background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 4px; color: #ef4444; cursor: pointer;
    padding: 2px 3px; line-height: 1; transition: all 0.2s; z-index: 2; opacity: 0.6;
}
.report-player-btn:hover { background: rgba(239, 68, 68, 0.3); border-color: rgba(239, 68, 68, 0.6); opacity: 1; }

/* 14. Phone compact (≤576px) */
@media (max-width: 576px) {
    body.game-menu .lobby-view { padding: 8px; max-height: calc(100vh - 130px); gap: 6px; }
    .lobby-card { padding: 8px; padding-left: 12px; gap: 4px; border-radius: 8px; }
    .lc-badge { font-size: 8px; padding: 1px 4px; }
    .lobby-chip { font-size: 8px; padding: 2px 5px; }
    .lobby-stats-row { flex-direction: column; gap: 4px; }
    .lobby-ai-stats { gap: 8px; font-size: 10px; }
    .lobby-ai-play-btn { padding: 5px 10px; font-size: 10px; }
}

/* 15. Reduce animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .lobby-status-dot, .lobby-card, .lobby-card.lc-waiting,
    .lc-badge-playing, .lobby-stats-bar .lobby-stat,
    .lobby-btn-quick::after, .lobby-ai-play-btn::after,
    .lobby-btn-create, .card-fan { animation: none !important; }
}

[data-theme="light"] .lobby-chip { border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.03); }
[data-theme="light"] .lobby-search-wrap { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .lobby-search-toggle { border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.02); }
[data-theme="light"] .lobby-btn-create { color: #fff; }
[data-theme="light"] .lobby-guest-overlay { background: rgba(255,255,255,0.9); }
[data-theme="light"] .lobby-sort-select { background-color: rgba(255,255,255,0.8); border-color: rgba(0,0,0,0.1); color: var(--color-text-primary); }
[data-theme="light"] .lobby-sort-select option { background: #fff; color: #1a1a1a; }