/* ================================================================================================
   WHIST - Premium Whist Game Styles
   Romanian Whist with Tiles - Piese Edition

   Design System:
   - Bootstrap 5.3.3 Grid System (responsive foundation)
   - Material Design 3 Navigation Rail
   - Glassmorphism & Neumorphism
   - Purple Accent Color Palette (matching rummy tiles)
   - Advanced Animations
   - Full Responsive (Bootstrap breakpoints: xs, sm, md, lg, xl, xxl)

   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
================================================================================================ */

/* ================================================================================================
   1. CSS VARIABLES & DESIGN TOKENS
================================================================================================ */
:root {
    /* Primary Colors - Whist Default (Dim — warm slate gray + soft blue) */
    --whist-bg: #1c2333;
    --whist-surface: #242d3f;
    --whist-surface-2: #2e384d;
    --whist-surface-3: #39445c;
    --whist-accent: #5b8def;
    --whist-accent-light: #7da5f2;
    --whist-accent-dark: #4a7de0;
    --whist-accent-glow: rgba(91, 141, 239, 0.3);
    --whist-accent-rgb: 91, 141, 239;
    --whist-gold: #ffd700;
    --whist-gold-rgb: 255, 215, 0;
    --whist-primary-rgb: 36, 45, 63;

    /* Text Colors */
    --whist-text: #d5dbe8;
    --whist-text-dim: rgba(213, 219, 232, 0.6);
    --whist-text-muted: rgba(213, 219, 232, 0.4);

    /* Border & Glass */
    --whist-border: rgba(91, 141, 239, 0.2);
    --whist-border-strong: rgba(91, 141, 239, 0.35);
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-bg-strong: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-blur: 20px;

    /* Semantic Colors */
    --whist-success: #4ade80;
    --whist-success-rgb: 74, 222, 128;
    --whist-danger: #f87171;
    --whist-danger-rgb: 248, 113, 113;
    --whist-warning: #fbbf24;
    --whist-warning-rgb: 251, 191, 36;
    --whist-info: #3b82f6;
    --whist-info-rgb: 59, 130, 246;

    /* Radii */
    --whist-radius: 12px;
    --whist-radius-sm: 8px;
    --whist-radius-xs: 6px;
    --whist-radius-lg: 16px;
    --whist-radius-xl: 20px;
    --whist-radius-full: 9999px;
    --whist-radius-tile: 6px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Poppins', var(--font-sans);
    /* Cifrele de pe piese — font numeric condensed, elegant */
    --font-tile: 'Oswald', 'Bebas Neue', 'Arial Narrow', var(--font-display);

    /* Tiles */
    --tile-width: 44px;
    --tile-height: 60px;
    --tile-width-sm: 36px;
    --tile-height-sm: 50px;
    --tile-font: 22px;
    --tile-font-sm: 18px;

    /* Glow System */
    --glow-color: var(--whist-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);
    --glow-lg: 0 0 20px rgba(var(--glow-color), 0.4), 0 0 40px rgba(var(--glow-color), 0.2);
    --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.25);
    --glow-border-hover: rgba(var(--glow-color), 0.4);

    /* Transition & Z-index (matching Table) */
    --transition-base: 0.3s ease;
    --z-fixed: 200;

    /* Viewport fit — dimensiuni header + footer (se override pe mobil) */
    --top-bar-h: 44px;
    --nav-rail-h: 93px;

    /* Background Mesh */
    --bg-mesh-1: rgba(91, 141, 239, 0.08);
    --bg-mesh-2: rgba(125, 165, 242, 0.05);
    --bg-mesh-3: rgba(74, 125, 224, 0.06);

    /* Safe Area Inset */
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);

    /* Table-compat vars — map --color-* to --whist-* so Table-inherited UI works */
    --color-primary: var(--whist-surface);
    --color-primary-rgb: var(--whist-primary-rgb);
    --color-primary-dark: var(--whist-surface-3);
    --color-accent: var(--whist-accent);
    --color-accent-rgb: var(--whist-accent-rgb);
    --color-accent-dark: var(--whist-accent-dark);
    --color-bg-primary: var(--whist-bg);
    --color-text-primary: var(--whist-text);
    --color-text-secondary: var(--whist-text-dim);
    --color-text-tertiary: var(--whist-text-muted);
    --color-text-disabled: var(--whist-text-muted);
    --color-success: var(--whist-success);
    --color-success-rgb: var(--whist-success-rgb);
    --color-error: var(--whist-danger);
    --color-error-rgb: var(--whist-danger-rgb);
    --color-warning: var(--whist-warning);
    --color-warning-rgb: var(--whist-warning-rgb);
    --color-info: var(--whist-info);
    --color-info-rgb: var(--whist-info-rgb);
}


/* ================================================================================================
   1b. THEME DEFINITIONS
================================================================================================ */

/* Default Theme (Dim — warm slate gray + soft blue) */
[data-theme="default"] {
    --whist-bg: #1c2333;
    --whist-surface: #242d3f;
    --whist-surface-2: #2e384d;
    --whist-surface-3: #39445c;
    --whist-accent: #5b8def;
    --whist-accent-light: #7da5f2;
    --whist-accent-dark: #4a7de0;
    --whist-accent-glow: rgba(91, 141, 239, 0.3);
    --whist-accent-rgb: 91, 141, 239;
    --whist-primary-rgb: 36, 45, 63;
    --whist-text: #d5dbe8;
    --whist-text-dim: rgba(213, 219, 232, 0.6);
    --whist-text-muted: rgba(213, 219, 232, 0.4);
    --whist-border: rgba(91, 141, 239, 0.2);
    --whist-border-strong: rgba(91, 141, 239, 0.35);
    --bg-mesh-1: rgba(91, 141, 239, 0.08);
    --bg-mesh-2: rgba(125, 165, 242, 0.05);
    --bg-mesh-3: rgba(74, 125, 224, 0.06);
}

/* Midnight Blue Theme */
[data-theme="midnight"] {
    --whist-bg: #0a0e1a;
    --whist-surface: #141a2e;
    --whist-surface-2: #1e2640;
    --whist-surface-3: #283050;
    --whist-accent: #e0e7ff;
    --whist-accent-light: #f0f4ff;
    --whist-accent-dark: #9ca3af;
    --whist-accent-glow: rgba(224, 231, 255, 0.2);
    --whist-accent-rgb: 224, 231, 255;
    --whist-text: #e8eaf0;
    --whist-text-dim: rgba(232, 234, 240, 0.6);
    --whist-text-muted: rgba(232, 234, 240, 0.4);
    --whist-border: rgba(224, 231, 255, 0.15);
    --whist-border-strong: rgba(224, 231, 255, 0.25);
    --bg-mesh-1: rgba(30, 58, 95, 0.3);
    --bg-mesh-2: rgba(224, 231, 255, 0.04);
    --bg-mesh-3: rgba(30, 58, 95, 0.2);
}

/* Ruby Passion Theme */
[data-theme="ruby"] {
    --whist-bg: #0e0a0a;
    --whist-surface: #1a1414;
    --whist-surface-2: #261e1e;
    --whist-surface-3: #322828;
    --whist-accent: #ffd700;
    --whist-accent-light: #ffe44d;
    --whist-accent-dark: #b8960a;
    --whist-accent-glow: rgba(255, 215, 0, 0.2);
    --whist-accent-rgb: 255, 215, 0;
    --whist-text: #f0e8e8;
    --whist-text-dim: rgba(240, 232, 232, 0.6);
    --whist-text-muted: rgba(240, 232, 232, 0.4);
    --whist-border: rgba(255, 215, 0, 0.15);
    --whist-border-strong: rgba(255, 215, 0, 0.25);
    --bg-mesh-1: rgba(74, 30, 30, 0.3);
    --bg-mesh-2: rgba(255, 215, 0, 0.04);
    --bg-mesh-3: rgba(74, 30, 30, 0.2);
}

/* Royal Purple Theme */
[data-theme="purple"] {
    --whist-bg: #0e0a1a;
    --whist-surface: #1a1427;
    --whist-surface-2: #261e32;
    --whist-surface-3: #322842;
    --whist-accent: #d4af37;
    --whist-accent-light: #f4cf57;
    --whist-accent-dark: #a48f27;
    --whist-accent-glow: rgba(212, 175, 55, 0.2);
    --whist-accent-rgb: 212, 175, 55;
    --whist-text: #e8e0f0;
    --whist-text-dim: rgba(232, 224, 240, 0.6);
    --whist-text-muted: rgba(232, 224, 240, 0.4);
    --whist-border: rgba(212, 175, 55, 0.15);
    --whist-border-strong: rgba(212, 175, 55, 0.25);
    --bg-mesh-1: rgba(61, 42, 95, 0.3);
    --bg-mesh-2: rgba(212, 175, 55, 0.04);
    --bg-mesh-3: rgba(61, 42, 95, 0.2);
}

/* Ocean Breeze Theme */
[data-theme="ocean"] {
    --whist-bg: #0a1414;
    --whist-surface: #141e1e;
    --whist-surface-2: #1e2828;
    --whist-surface-3: #283232;
    --whist-accent: #ff6b6b;
    --whist-accent-light: #ff8b8b;
    --whist-accent-dark: #cc5555;
    --whist-accent-glow: rgba(255, 107, 107, 0.2);
    --whist-accent-rgb: 255, 107, 107;
    --whist-text: #e8f0f0;
    --whist-text-dim: rgba(232, 240, 240, 0.6);
    --whist-text-muted: rgba(232, 240, 240, 0.4);
    --whist-border: rgba(255, 107, 107, 0.15);
    --whist-border-strong: rgba(255, 107, 107, 0.25);
    --bg-mesh-1: rgba(30, 77, 77, 0.3);
    --bg-mesh-2: rgba(255, 107, 107, 0.04);
    --bg-mesh-3: rgba(30, 77, 77, 0.2);
}

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

/* Texas Gold Theme */
[data-theme="texas"] {
    --whist-bg: #0d0a00;
    --whist-surface: #1a1400;
    --whist-surface-2: #2a2000;
    --whist-surface-3: #3a3000;
    --whist-accent: #ffb700;
    --whist-accent-light: #ffd700;
    --whist-accent-dark: #cc9200;
    --whist-accent-glow: rgba(255, 183, 0, 0.2);
    --whist-accent-rgb: 255, 183, 0;
    --whist-text: #f0e8d0;
    --whist-text-dim: rgba(240, 232, 208, 0.6);
    --whist-text-muted: rgba(240, 232, 208, 0.4);
    --whist-border: rgba(255, 183, 0, 0.15);
    --whist-border-strong: rgba(255, 183, 0, 0.25);
    --bg-mesh-1: rgba(255, 183, 0, 0.08);
    --bg-mesh-2: rgba(42, 32, 0, 0.3);
    --bg-mesh-3: rgba(255, 183, 0, 0.05);
}

/* Vegas Neon Theme */
[data-theme="vegas"] {
    --whist-bg: #0a0014;
    --whist-surface: #1a0e2a;
    --whist-surface-2: #2a1a3a;
    --whist-surface-3: #3a2a4a;
    --whist-accent: #ff00ff;
    --whist-accent-light: #ff55ff;
    --whist-accent-dark: #cc00cc;
    --whist-accent-glow: rgba(255, 0, 255, 0.2);
    --whist-accent-rgb: 255, 0, 255;
    --whist-text: #f0e0f0;
    --whist-text-dim: rgba(240, 224, 240, 0.6);
    --whist-text-muted: rgba(240, 224, 240, 0.4);
    --whist-border: rgba(255, 0, 255, 0.15);
    --whist-border-strong: rgba(255, 0, 255, 0.25);
    --bg-mesh-1: rgba(74, 14, 74, 0.3);
    --bg-mesh-2: rgba(255, 0, 255, 0.04);
    --bg-mesh-3: rgba(74, 14, 74, 0.2);
}

/* Monte Carlo Theme */
[data-theme="monaco"] {
    --whist-bg: #0a0a0a;
    --whist-surface: #1a1a1a;
    --whist-surface-2: #2a2a2a;
    --whist-surface-3: #333333;
    --whist-accent: #e8e8e8;
    --whist-accent-light: #ffffff;
    --whist-accent-dark: #b0b0b0;
    --whist-accent-glow: rgba(232, 232, 232, 0.15);
    --whist-accent-rgb: 232, 232, 232;
    --whist-text: #f0f0f0;
    --whist-text-dim: rgba(240, 240, 240, 0.6);
    --whist-text-muted: rgba(240, 240, 240, 0.4);
    --whist-border: rgba(232, 232, 232, 0.12);
    --whist-border-strong: rgba(232, 232, 232, 0.22);
    --bg-mesh-1: rgba(42, 42, 42, 0.3);
    --bg-mesh-2: rgba(232, 232, 232, 0.03);
    --bg-mesh-3: rgba(42, 42, 42, 0.2);
}

/* Macau Fortune Theme */
[data-theme="macau"] {
    --whist-bg: #0e0000;
    --whist-surface: #1a0808;
    --whist-surface-2: #2a1010;
    --whist-surface-3: #3a1818;
    --whist-accent: #ffd700;
    --whist-accent-light: #ffe44d;
    --whist-accent-dark: #b8960a;
    --whist-accent-glow: rgba(255, 215, 0, 0.2);
    --whist-accent-rgb: 255, 215, 0;
    --whist-text: #f0e0e0;
    --whist-text-dim: rgba(240, 224, 224, 0.6);
    --whist-text-muted: rgba(240, 224, 224, 0.4);
    --whist-border: rgba(255, 215, 0, 0.15);
    --whist-border-strong: rgba(255, 215, 0, 0.25);
    --bg-mesh-1: rgba(139, 0, 0, 0.2);
    --bg-mesh-2: rgba(255, 215, 0, 0.04);
    --bg-mesh-3: rgba(139, 0, 0, 0.15);
}

/* Atlantic Sunset Theme */
[data-theme="atlantic"] {
    --whist-bg: #0a1014;
    --whist-surface: #141e28;
    --whist-surface-2: #1e2e3a;
    --whist-surface-3: #283a4a;
    --whist-accent: #ff8c42;
    --whist-accent-light: #ffaa66;
    --whist-accent-dark: #cc6e32;
    --whist-accent-glow: rgba(255, 140, 66, 0.2);
    --whist-accent-rgb: 255, 140, 66;
    --whist-text: #e8f0f0;
    --whist-text-dim: rgba(232, 240, 240, 0.6);
    --whist-text-muted: rgba(232, 240, 240, 0.4);
    --whist-border: rgba(255, 140, 66, 0.15);
    --whist-border-strong: rgba(255, 140, 66, 0.25);
    --bg-mesh-1: rgba(30, 74, 106, 0.25);
    --bg-mesh-2: rgba(255, 140, 66, 0.04);
    --bg-mesh-3: rgba(30, 74, 106, 0.15);
}

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

/* Black Diamond Theme */
[data-theme="diamond"] {
    --whist-bg: #050508;
    --whist-surface: #0a0a12;
    --whist-surface-2: #12121e;
    --whist-surface-3: #1a1a28;
    --whist-accent: #00d4ff;
    --whist-accent-light: #44e0ff;
    --whist-accent-dark: #00a8cc;
    --whist-accent-glow: rgba(0, 212, 255, 0.2);
    --whist-accent-rgb: 0, 212, 255;
    --whist-text: #e0f0ff;
    --whist-text-dim: rgba(224, 240, 255, 0.6);
    --whist-text-muted: rgba(224, 240, 255, 0.4);
    --whist-border: rgba(0, 212, 255, 0.15);
    --whist-border-strong: rgba(0, 212, 255, 0.25);
    --bg-mesh-1: rgba(0, 212, 255, 0.04);
    --bg-mesh-2: rgba(0, 100, 130, 0.06);
    --bg-mesh-3: rgba(0, 212, 255, 0.03);
}

/* Onyx Gold Theme */
[data-theme="onyx"] {
    --whist-bg: #080804;
    --whist-surface: #12120a;
    --whist-surface-2: #1c1c12;
    --whist-surface-3: #26261a;
    --whist-accent: #c9a961;
    --whist-accent-light: #e0c880;
    --whist-accent-dark: #a08840;
    --whist-accent-glow: rgba(201, 169, 97, 0.2);
    --whist-accent-rgb: 201, 169, 97;
    --whist-text: #f0ead0;
    --whist-text-dim: rgba(240, 234, 208, 0.6);
    --whist-text-muted: rgba(240, 234, 208, 0.4);
    --whist-border: rgba(201, 169, 97, 0.15);
    --whist-border-strong: rgba(201, 169, 97, 0.25);
    --bg-mesh-1: rgba(201, 169, 97, 0.05);
    --bg-mesh-2: rgba(100, 85, 50, 0.06);
    --bg-mesh-3: rgba(201, 169, 97, 0.03);
}

/* Crimson Shadow Theme */
[data-theme="crimson"] {
    --whist-bg: #080002;
    --whist-surface: #120408;
    --whist-surface-2: #1c0a10;
    --whist-surface-3: #261018;
    --whist-accent: #dc143c;
    --whist-accent-light: #ef4444;
    --whist-accent-dark: #b01030;
    --whist-accent-glow: rgba(220, 20, 60, 0.2);
    --whist-accent-rgb: 220, 20, 60;
    --whist-text: #f0e0e0;
    --whist-text-dim: rgba(240, 224, 224, 0.6);
    --whist-text-muted: rgba(240, 224, 224, 0.4);
    --whist-border: rgba(220, 20, 60, 0.15);
    --whist-border-strong: rgba(220, 20, 60, 0.25);
    --bg-mesh-1: rgba(220, 20, 60, 0.05);
    --bg-mesh-2: rgba(100, 10, 30, 0.08);
    --bg-mesh-3: rgba(220, 20, 60, 0.03);
}

/* Emerald Night Theme */
[data-theme="emerald"] {
    --whist-bg: #001008;
    --whist-surface: #041a0e;
    --whist-surface-2: #0a2616;
    --whist-surface-3: #10321e;
    --whist-accent: #50c878;
    --whist-accent-light: #70e898;
    --whist-accent-dark: #38a058;
    --whist-accent-glow: rgba(80, 200, 120, 0.2);
    --whist-accent-rgb: 80, 200, 120;
    --whist-text: #e0f0e8;
    --whist-text-dim: rgba(224, 240, 232, 0.6);
    --whist-text-muted: rgba(224, 240, 232, 0.4);
    --whist-border: rgba(80, 200, 120, 0.15);
    --whist-border-strong: rgba(80, 200, 120, 0.25);
    --bg-mesh-1: rgba(80, 200, 120, 0.04);
    --bg-mesh-2: rgba(0, 80, 40, 0.08);
    --bg-mesh-3: rgba(80, 200, 120, 0.03);
}

/* Platinum Elite Theme */
[data-theme="platinum"] {
    --whist-bg: #060606;
    --whist-surface: #101010;
    --whist-surface-2: #1a1a1a;
    --whist-surface-3: #242424;
    --whist-accent: #e5e4e2;
    --whist-accent-light: #ffffff;
    --whist-accent-dark: #b0b0ae;
    --whist-accent-glow: rgba(229, 228, 226, 0.15);
    --whist-accent-rgb: 229, 228, 226;
    --whist-text: #f0f0f0;
    --whist-text-dim: rgba(240, 240, 240, 0.6);
    --whist-text-muted: rgba(240, 240, 240, 0.4);
    --whist-border: rgba(229, 228, 226, 0.12);
    --whist-border-strong: rgba(229, 228, 226, 0.22);
    --bg-mesh-1: rgba(229, 228, 226, 0.03);
    --bg-mesh-2: rgba(120, 120, 118, 0.05);
    --bg-mesh-3: rgba(229, 228, 226, 0.02);
}

/* === SPECIAL THEMES === */

/* Purple Haze Theme */
[data-theme="haze"] {
    --whist-bg: #0a0e1a;
    --whist-surface: #141828;
    --whist-surface-2: #1e2238;
    --whist-surface-3: #282c48;
    --whist-accent: #667eea;
    --whist-accent-light: #8898f0;
    --whist-accent-dark: #4a5ec8;
    --whist-accent-glow: rgba(102, 126, 234, 0.2);
    --whist-accent-rgb: 102, 126, 234;
    --whist-text: #e0e4f0;
    --whist-text-dim: rgba(224, 228, 240, 0.6);
    --whist-text-muted: rgba(224, 228, 240, 0.4);
    --whist-border: rgba(102, 126, 234, 0.15);
    --whist-border-strong: rgba(102, 126, 234, 0.25);
    --bg-mesh-1: rgba(102, 126, 234, 0.06);
    --bg-mesh-2: rgba(60, 80, 150, 0.08);
    --bg-mesh-3: rgba(102, 126, 234, 0.04);
}

/* Emerald Forest Theme */
[data-theme="forest"] {
    --whist-bg: #0a1410;
    --whist-surface: #121e18;
    --whist-surface-2: #1a2820;
    --whist-surface-3: #223228;
    --whist-accent: #10b981;
    --whist-accent-light: #34d399;
    --whist-accent-dark: #0a9068;
    --whist-accent-glow: rgba(16, 185, 129, 0.2);
    --whist-accent-rgb: 16, 185, 129;
    --whist-text: #e0f0e8;
    --whist-text-dim: rgba(224, 240, 232, 0.6);
    --whist-text-muted: rgba(224, 240, 232, 0.4);
    --whist-border: rgba(16, 185, 129, 0.15);
    --whist-border-strong: rgba(16, 185, 129, 0.25);
    --bg-mesh-1: rgba(16, 185, 129, 0.05);
    --bg-mesh-2: rgba(10, 100, 70, 0.08);
    --bg-mesh-3: rgba(16, 185, 129, 0.03);
}

/* === LIGHT THEME === */
[data-theme="light"] {
    --whist-bg: #f0f0f5;
    --whist-surface: #ffffff;
    --whist-surface-2: #f5f3fa;
    --whist-surface-3: #eee8f8;
    --whist-accent: #7c3aed;
    --whist-accent-light: #8b5cf6;
    --whist-accent-dark: #6d28d9;
    --whist-accent-glow: rgba(124, 58, 237, 0.15);
    --whist-accent-rgb: 124, 58, 237;
    --whist-text: #1e1b4b;
    --whist-text-dim: rgba(30, 27, 75, 0.5);
    --whist-text-muted: rgba(30, 27, 75, 0.35);
    --whist-border: rgba(124, 58, 237, 0.15);
    --whist-border-strong: rgba(124, 58, 237, 0.25);
    --whist-gold: #d4a040;
    --glass-bg: rgba(0, 0, 0, 0.03);
    --glass-bg-strong: rgba(0, 0, 0, 0.06);
    --glass-border: rgba(0, 0, 0, 0.08);
    --bg-mesh-1: rgba(124, 58, 237, 0.03);
    --bg-mesh-2: rgba(124, 58, 237, 0.02);
    --bg-mesh-3: rgba(124, 58, 237, 0.01);
}

/* Whist Wood & Gold — tema specifica Whist (lemn vintage + auriu) */
[data-theme="whist"] {
    --whist-bg: #2a1b0e;
    --whist-surface: #3a2310;
    --whist-surface-2: #4a2e16;
    --whist-surface-3: #5a3a1c;
    --whist-accent: #d4a544;
    --whist-accent-light: #f0c66a;
    --whist-accent-dark: #a8822a;
    --whist-accent-glow: rgba(212, 165, 68, 0.35);
    --whist-accent-rgb: 212, 165, 68;
    --whist-primary-rgb: 58, 35, 16;
    --whist-text: #f4ecd8;
    --whist-text-dim: rgba(244, 236, 216, 0.6);
    --whist-text-muted: rgba(244, 236, 216, 0.4);
    --whist-border: rgba(212, 165, 68, 0.25);
    --whist-border-strong: rgba(212, 165, 68, 0.4);
    --whist-gold: #d4a544;
    --bg-mesh-1: rgba(212, 165, 68, 0.1);
    --bg-mesh-2: rgba(139, 69, 19, 0.12);
    --bg-mesh-3: rgba(212, 165, 68, 0.06);
}

/* ================================================================================================
   1c. CROSS-GAME VAR OVERRIDES — force themes.css vars to resolve to Whist theme colors
   themes.css (shared) defines --color-accent / --primary-color / --glow-* per theme using
   Table-specific values (e.g., default uses #d4a040 gold, light uses #667eea indigo).
   These aliases beat themes.css :root[data-theme=...] blocks by same-specificity + later source.
================================================================================================ */
:root[data-theme="default"],
:root[data-theme="midnight"],
:root[data-theme="ruby"],
:root[data-theme="purple"],
:root[data-theme="ocean"],
:root[data-theme="texas"],
:root[data-theme="vegas"],
:root[data-theme="monaco"],
:root[data-theme="macau"],
:root[data-theme="atlantic"],
:root[data-theme="diamond"],
:root[data-theme="onyx"],
:root[data-theme="crimson"],
:root[data-theme="emerald"],
:root[data-theme="platinum"],
:root[data-theme="haze"],
:root[data-theme="forest"],
:root[data-theme="light"],
:root[data-theme="whist"] {
    --color-accent: var(--whist-accent);
    --color-accent-rgb: var(--whist-accent-rgb);
    --color-accent-dark: var(--whist-accent-dark);
    --color-primary: var(--whist-surface);
    --color-primary-rgb: var(--whist-primary-rgb);
    --color-text-primary: var(--whist-text);
    --color-text-secondary: var(--whist-text-dim);
    --primary-color: var(--whist-accent);
    --text-primary: var(--whist-text);
    --text-secondary: var(--whist-text-dim);
    --glow-color: var(--whist-accent-rgb);
    --glow-border: rgba(var(--whist-accent-rgb), 0.25);
    --glow-border-hover: rgba(var(--whist-accent-rgb), 0.4);
}

/* Kill hardcoded #667eea (Tailwind indigo) bleeding from themes.css into nav-bar-btn
   hover/active states on light and other themes where themes.css uses raw RGB. */
html .nav-bar-btn:hover {
    border-color: rgba(var(--whist-accent-rgb), 0.3);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15),
        0 0 15px rgba(var(--whist-accent-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html .nav-bar-btn.active {
    background: linear-gradient(135deg,
        rgba(var(--whist-accent-rgb), 0.18) 0%,
        rgba(var(--whist-accent-rgb), 0.08) 100%);
    border-color: rgba(var(--whist-accent-rgb), 0.4);
}
html .nav-bar-fab::before {
    background: radial-gradient(circle, rgba(var(--whist-accent-rgb), 0.3) 0%, transparent 70%);
}

/* ================================================================================================
   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;
    height: 100%;
    height: 100vh;
}

body {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.5;
    color: var(--whist-text);
    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(--whist-accent-rgb), 0.02) 0%, transparent 35%),
        linear-gradient(135deg, var(--whist-bg) 0%, var(--whist-bg) 100%);
    overflow: hidden;
    height: 100%;
    height: 100vh;
    min-height: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-overflow-scrolling: auto;
    scroll-behavior: auto;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

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


/* ================================================================================================
   3. ANIMATIONS & KEYFRAMES
================================================================================================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes slideInUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

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

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

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

@keyframes glowPulse {
    0%, 100% { box-shadow: var(--glow-sm); }
    50% { box-shadow: var(--glow-lg); }
}

@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);
    }
}

@keyframes tilePulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
    50% { box-shadow: 0 2px 12px rgba(74, 222, 128, 0.4); }
}

@keyframes tiltPhone {
    0%, 100% { transform: rotate(0); }
    50% { transform: rotate(90deg); }
}

@keyframes doublePulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); }
}

@keyframes toastIn {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toastOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100px); opacity: 0; }
}

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

@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); }
}

@keyframes card-entrance {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes badge-pulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.6; }
}

@keyframes stat-pop {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes avatar-ring {
    0%, 100% { box-shadow: 0 0 0 2px rgba(var(--whist-accent-rgb), 0.3); }
    50% { box-shadow: 0 0 8px 2px rgba(var(--whist-accent-rgb), 0.5); }
}

@keyframes btn-shimmer {
    0%, 70%, 100% { left: -100%; }
    85% { left: 150%; }
}

@keyframes waiting-glow {
    0%, 100% { border-color: rgba(74, 222, 128, 0.15); }
    50% { border-color: rgba(74, 222, 128, 0.4); }
}

@keyframes create-breathe {
    0%, 100% { box-shadow: 0 2px 8px rgba(var(--whist-accent-rgb), 0.1); }
    50% { box-shadow: 0 2px 16px rgba(var(--whist-accent-rgb), 0.25); }
}

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

@keyframes play-shine {
    0%, 60%, 100% { left: -120%; }
    75% { left: 150%; }
}

@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); }
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0.7; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.4); }
}

@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); }
}

@keyframes timer-sweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes active-turn-glow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(var(--whist-accent-rgb), 0.15);
    }
    50% {
        box-shadow: 0 0 14px rgba(var(--whist-accent-rgb), 0.35),
                    0 0 28px rgba(var(--whist-accent-rgb), 0.12);
    }
}

@keyframes seatBubble {
    0% { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.9); }
    10% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    85% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.95); }
}

/* ── Tile placement animations ── */
@keyframes tilePlaceOnTable {
    0% { opacity: 0; transform: scale(0.5) translateY(20px); }
    60% { opacity: 1; transform: scale(1.08) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes tileSlideIn {
    0% { opacity: 0; transform: translateX(-20px) scale(0.9); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes tileDealToHand {
    0% { opacity: 0; transform: translateY(-30px) rotateX(60deg) scale(0.7); }
    70% { opacity: 1; transform: translateY(2px) rotateX(-3deg) scale(1.03); }
    100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}

@keyframes tileDiscard {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1) translateY(-10px); }
    100% { opacity: 0; transform: scale(0.6) translateY(20px); }
}

@keyframes meldAppear {
    0% { opacity: 0; transform: scale(0.85) translateY(8px); }
    60% { opacity: 1; transform: scale(1.04) translateY(-1px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Animation classes for tiles */
.tile-animate-place {
    animation: tilePlaceOnTable 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.tile-animate-deal {
    animation: tileDealToHand 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.tile-animate-discard {
    animation: tileDiscard 0.3s ease-out forwards;
}

.tile-animate-slide {
    animation: tileSlideIn 0.25s ease-out forwards;
}

.meld-group-animate {
    animation: meldAppear 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ═══ MELD PARABOLIC ARC — tile flies from hand to etalare zone ═══ */
.tile-meld-arc {
    animation: tileMeldArc 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 100;
    pointer-events: none !important;
}

@keyframes tileMeldArc {
    0% {
        transform: translate(var(--arc-start-x, 0), var(--arc-start-y, 0)) scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform:
            translate(
                calc(var(--arc-start-x, 0) * 0.5),
                calc(var(--arc-start-y, 0) * 0.5 - 40px)
            )
            scale(1.15) rotate(8deg);
        opacity: 1;
    }
    85% {
        transform: translate(0, 0) scale(1.15) rotate(-3deg);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* ═══ MELD LANDING FLASH — white burst on landing ═══ */
.meld-landing-flash {
    position: absolute;
    pointer-events: none;
    width: var(--tile-width, 32px);
    height: var(--tile-height, 44px);
    border-radius: var(--whist-radius-tile, 4px);
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 235, 150, 0.6) 40%,
        transparent 70%);
    animation: meldLandingFlash 0.5s ease-out forwards;
    z-index: 101;
}

@keyframes meldLandingFlash {
    0% { opacity: 0; transform: scale(0.8); }
    20% { opacity: 1; transform: scale(1.4); }
    100% { opacity: 0; transform: scale(2.2); }
}

/* ═══ CONFETTI — mini celebration on first etalare ═══ */
.confetti-burst {
    position: absolute;
    pointer-events: none;
    z-index: 102;
}
.confetti-piece {
    position: absolute;
    width: 6px;
    height: 10px;
    animation: confettiFall 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}
.confetti-piece:nth-child(3n) { background: #ffd700; }
.confetti-piece:nth-child(3n+1) { background: #ef4444; }
.confetti-piece:nth-child(3n+2) { background: #3b82f6; }

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform:
            translate(0, 0)
            rotate(0deg)
            scale(0);
    }
    30% { transform: translate(var(--cx, 50px), -60px) rotate(180deg) scale(1); }
    100% {
        opacity: 0;
        transform:
            translate(calc(var(--cx, 50px) * 1.5), 80px)
            rotate(720deg)
            scale(0.7);
    }
}

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

@keyframes disconnectPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.05); }
}

@keyframes resultConfetti {
    0% { opacity: 1; transform: translateY(0) rotate(0deg); }
    100% { opacity: 0; transform: translateY(-100px) rotate(720deg); }
}

@keyframes panelLoadingBar {
    0% { width: 0; }
    50% { width: 70%; }
    100% { width: 100%; }
}


/* ================================================================================================
   4. APP CONTAINER
================================================================================================ */
.app-container {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* ================================================================================================
   5. TOP BAR
================================================================================================ */
/* ═══ WHIST TOP BAR — Casino felt premium with gold accents ═══ */
.top-bar {
    height: 48px;
    min-height: 48px;
    padding: 0 14px;
    background:
        /* Subtle tile pattern using theme accent */
        repeating-linear-gradient(45deg,
            transparent 0, transparent 10px,
            rgba(var(--whist-accent-rgb), 0.015) 10px, rgba(var(--whist-accent-rgb), 0.015) 11px),
        repeating-linear-gradient(-45deg,
            transparent 0, transparent 10px,
            rgba(var(--whist-accent-rgb), 0.015) 10px, rgba(var(--whist-accent-rgb), 0.015) 11px),
        /* Spotlight glow in center */
        radial-gradient(ellipse 60% 100% at 50% 0%,
            rgba(var(--whist-accent-rgb), 0.08) 0%,
            transparent 70%),
        /* Themed surface base */
        linear-gradient(180deg,
            rgba(var(--whist-primary-rgb), 0.96) 0%,
            rgba(var(--whist-primary-rgb), 0.98) 50%,
            var(--whist-bg) 100%);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--whist-accent-rgb), 0.35) 20%,
        rgba(var(--whist-accent-rgb), 0.55) 50%,
        rgba(var(--whist-accent-rgb), 0.35) 80%,
        transparent 100%) 1;
    z-index: 100;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.45),
        0 2px 0 rgba(var(--whist-accent-rgb), 0.08),
        inset 0 1px 0 rgba(var(--whist-accent-rgb), 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    position: relative;
    transition: all 0.3s ease;
}

/* Gold pinstripe top line */
.top-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 235, 150, 0.6) 30%,
        rgba(255, 215, 0, 0.9) 50%,
        rgba(255, 235, 150, 0.6) 70%,
        transparent);
    opacity: 0.8;
    pointer-events: none;
}

/* Shimmer sweep animation */
.top-bar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 215, 0, 0.06) 40%,
        rgba(255, 235, 150, 0.1) 50%,
        rgba(255, 215, 0, 0.06) 60%,
        transparent 100%);
    transform: skewX(-20deg);
    animation: shimmerAccent 9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmerAccent {
    0%, 30%   { left: -60%; opacity: 0; }
    40%       { opacity: 1; }
    60%       { opacity: 1; }
    70%, 100% { left: 160%; opacity: 0; }
}

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

.brand-section {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

/* Gold separator pipe before actions area */
.brand-section::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent,
        rgba(255, 215, 0, 0.25) 30%,
        rgba(255, 215, 0, 0.45) 50%,
        rgba(255, 215, 0, 0.25) 70%,
        transparent);
}

.brand-logo-img {
    height: 30px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

/* ═══ BRAND ICON — styled as a REAL Whist tile ═══ */
.brand-icon {
    width: 30px;
    height: 38px;
    /* Cream/ivory tile background — matching actual whist tiles */
    background:
        linear-gradient(145deg,
            #fffdf5 0%,
            #f7efd9 50%,
            #e9dbb8 100%);
    border-radius: 5px;
    border: 1.5px solid #b8860b;
    color: #b91c1c;       /* Red like a red suit tile */
    font-family: var(--font-tile, 'Oswald', sans-serif);
    font-size: 20px;
    font-weight: 900;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        /* Outer depth shadow */
        0 3px 8px rgba(0, 0, 0, 0.45),
        0 1px 3px rgba(0, 0, 0, 0.3),
        /* Inner highlights — tile depth effect */
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1.5px 1px rgba(184, 134, 11, 0.45),
        /* Gold outer ring */
        0 0 0 1px rgba(184, 134, 11, 0.35),
        0 0 8px rgba(255, 215, 0, 0.12);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7),
        0 -0.5px 0 rgba(0, 0, 0, 0.2);
}

.brand-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.brand-icon:hover::before {
    left: 100%;
}

.brand-icon:hover {
    transform: translateY(-2px) rotate(-4deg);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.55),
        0 2px 4px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1.5px 1px rgba(184, 134, 11, 0.45),
        0 0 0 1.5px rgba(255, 215, 0, 0.7),
        0 0 18px rgba(255, 215, 0, 0.35);
}

/* Hide the casino icon — we use the "R" letter via ::after */
.brand-icon .material-symbols-rounded {
    display: none;
}

/* Tile letter "R" — replaces material icon */
.brand-icon::after {
    content: 'R';
    font-family: var(--font-tile, 'Oswald', sans-serif);
    font-size: 22px;
    font-weight: 900;
    color: #b91c1c;
    line-height: 1;
    position: relative;
    z-index: 2;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 2px rgba(0, 0, 0, 0.15);
}

/* 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;
}

.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-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: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 215, 0, 0.55);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 0 0 3px rgba(255, 215, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.4);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.profile-avatar-img:hover {
    border-color: rgba(255, 215, 0, 0.85);
    transform: scale(1.06);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 0 0 3px rgba(255, 215, 0, 0.3),
        0 0 14px rgba(255, 215, 0, 0.35),
        0 4px 14px rgba(0, 0, 0, 0.35);
}

/* ═══ BRAND TITLE — Luxurious gold gradient with casino shimmer ═══ */
.brand-title {
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-size: clamp(15px, 2.5vw, 19px);
    font-weight: 800;
    background: linear-gradient(135deg,
        #b8860b 0%,
        #ffd700 20%,
        #fff3a0 38%,
        #ffd700 50%,
        #fff3a0 62%,
        #ffd700 80%,
        #b8860b 100%);
    background-size: 300% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
    animation: goldShimmer 5s ease-in-out infinite;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 8px rgba(255, 215, 0, 0.25));
    transition: all 0.3s ease;
}

.brand-title:hover {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(255, 215, 0, 0.5));
    letter-spacing: 1.3px;
}

/* Tagline added via ::after — "Whist Românesc" */
.brand-section .brand-title::after {
    content: 'Whist Romanesc';
    display: block;
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 215, 0, 0.55);
    -webkit-text-fill-color: rgba(255, 215, 0, 0.55);
    margin-top: 2px;
    line-height: 1;
    background: none;
    filter: none;
    animation: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

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

/* Legacy alias — keep for compatibility */
/* gradientShift — duplicat sters; definitia originala la linia 728 */

/* ═══ ACTION BUTTONS — Premium glass with gold ring on hover ═══ */
.action-btn {
    width: 36px;
    height: 36px;
    background:
        linear-gradient(145deg,
            rgba(255, 235, 150, 0.06) 0%,
            rgba(0, 0, 0, 0.3) 60%,
            rgba(0, 0, 0, 0.45) 100%);
    border: 1px solid rgba(255, 215, 0, 0.14);
    color: rgba(255, 235, 180, 0.75);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.35);
}

.action-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 120%,
        rgba(255, 215, 0, 0.25) 0%,
        transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.action-btn::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -50%;
    width: 40%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 235, 150, 0.9),
        transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.action-btn:hover {
    background:
        linear-gradient(145deg,
            rgba(255, 235, 150, 0.14) 0%,
            rgba(184, 134, 11, 0.12) 60%,
            rgba(0, 0, 0, 0.2) 100%);
    color: #ffe066;
    border-color: rgba(255, 215, 0, 0.55);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 215, 0, 0.25),
        0 6px 14px rgba(0, 0, 0, 0.4),
        0 0 14px rgba(255, 215, 0, 0.25);
}

.action-btn:hover::before { opacity: 1; }
.action-btn:hover::after { left: 110%; }

.action-btn:active {
    transform: translateY(0) scale(0.94);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 215, 0, 0.1);
}

.action-btn .material-symbols-rounded {
    font-size: 20px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.action-btn:hover .material-symbols-rounded {
    transform: scale(1.1);
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5));
}

/* Top bar actions */
.top-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}


/* ================================================================================================
   6. MAIN CONTENT AREA
================================================================================================ */
.main-content {
    flex: 1;
    overflow: hidden;
    min-height: 0;
    display: flex;
    padding-bottom: 110px;
}


/* ================================================================================================
   6a. NAVIGATION RAIL
================================================================================================ */
.nav-rail {
    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;
    min-height: 0;
    background:
        linear-gradient(0deg,
            rgba(var(--whist-accent-rgb), 0.04) 0%,
            transparent 60%),
        var(--whist-surface);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(var(--whist-accent-rgb), 0.1);
    border-right: none !important;
    padding-bottom: calc(var(--sab, 0px) + 8px);
    padding-top: 6px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transition: transform var(--transition-base, 0.3s ease), opacity var(--transition-base, 0.3s ease);
    z-index: var(--z-fixed, 200);
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    box-shadow:
        0 -2px 20px rgba(0, 0, 0, 0.35),
        0 -1px 0 rgba(var(--whist-accent-rgb), 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

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

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

/* Hide header & footer while game loader is active */
body:has(.game-loader:not(.hidden):not(.fade-out)) .top-bar,
body:has(.game-loader:not(.hidden):not(.fade-out)) .nav-rail {
    display: none !important;
}

/* ── Immersive Mode ── */
.top-bar,
.nav-rail {
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

.main-content {
    transition: padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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;
    max-height: 100vh !important;
    max-height: 100dvh !important;
}
body.immersive-mode .game-canvas {
    padding: 0 !important;
    height: 100vh !important;
    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;
}

/* ── Focus Mode Toggle — Round Button ── */
@keyframes immersivePulse {
    0%, 100% { box-shadow: 0 0 10px rgba(var(--whist-accent-rgb), 0.2), 0 2px 12px rgba(0,0,0,0.25); }
    50%      { box-shadow: 0 0 22px rgba(var(--whist-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: 300;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--whist-accent-rgb), 0.3);
    background: linear-gradient(135deg,
        rgba(var(--whist-primary-rgb, 36, 21, 66), 0.9) 0%,
        rgba(var(--whist-primary-rgb, 36, 21, 66), 0.7) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--whist-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.9;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    animation: immersivePulse 3s ease-in-out infinite;
    transition: opacity 0.3s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.3s ease;
}

.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(--whist-accent-rgb), 0.6);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 24px rgba(var(--whist-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;
}

.immersive-glow {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--whist-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(--whist-accent-rgb), 0.25) 0%, transparent 70%);
}

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);
}
body.immersive-mode .immersive-toggle-float:hover {
    opacity: 0.95;
    transform: scale(1.1);
}

.status-bar {
    width: 100%;
    height: 22px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-sm, 8px);
    /* Glassmorphism */
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.02) 50%,
            rgba(255, 215, 0, 0.03) 100%) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    flex-wrap: nowrap !important;
    z-index: auto !important;
    overflow: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 245, 220, 0.9);
    letter-spacing: 0.2px;
}

.status-bar::-webkit-scrollbar { display: none; }

/* Score groups — with subtle separators */
.status-bar .score-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    position: relative;
    transition: all 0.3s ease;
}

.status-bar .score-group.active-player {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
}

/* Animation for score updates */
.status-bar .score-group.score-flash-up {
    animation: scoreFlashUp 0.8s ease-out;
}
.status-bar .score-group.score-flash-down {
    animation: scoreFlashDown 0.8s ease-out;
}

@keyframes scoreFlashUp {
    0% { color: rgba(255, 245, 220, 0.9); transform: scale(1); }
    30% { color: #4ade80; transform: scale(1.2); text-shadow: 0 0 10px rgba(74, 222, 128, 0.7); }
    100% { color: rgba(255, 245, 220, 0.9); transform: scale(1); }
}
@keyframes scoreFlashDown {
    0% { color: rgba(255, 245, 220, 0.9); transform: scale(1); }
    30% { color: #ef4444; transform: scale(1.15); text-shadow: 0 0 10px rgba(239, 68, 68, 0.7); }
    100% { color: rgba(255, 245, 220, 0.9); transform: scale(1); }
}

/* Floating delta indicator */
.score-delta {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 800;
    pointer-events: none;
    animation: scoreDeltaFloat 1.4s ease-out forwards;
    z-index: 10;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.score-delta.positive { color: #4ade80; }
.score-delta.negative { color: #ef4444; }

@keyframes scoreDeltaFloat {
    0% { opacity: 0; transform: translate(-50%, 0) scale(0.7); }
    20% { opacity: 1; transform: translate(-50%, -8px) scale(1.1); }
    80% { opacity: 1; transform: translate(-50%, -24px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -32px) scale(0.9); }
}

.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, 4px);
    gap: 2px;
}

/* Override themes.css which hides icons in nav buttons */
.nav-bar-btn .material-symbols-rounded {
    display: inline-block !important;
    font-size: 20px;
}

.nav-bar-btn {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    height: 38px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg, 12px);
    color: var(--whist-text-dim);
    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-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, var(--whist-text));
    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 {
    /* Un singur background: linear-gradient subtil. Fara pseudo-radial suprapus. */
    background: linear-gradient(135deg,
        rgba(var(--whist-accent-rgb), 0.16) 0%,
        rgba(var(--whist-accent-rgb), 0.06) 100%
    );
    color: var(--whist-accent) !important;
    border: 1px solid rgba(var(--whist-accent-rgb), 0.45);
    transform: none;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    /* animation removed — fara pulsare permanenta pe buton activ */
}

/* Dezactivez complet radial-ul ::before pe activ — evita a 2-a textura vizibila */
.nav-bar-btn.active::before {
    width: 0 !important;
    height: 0 !important;
    background: none !important;
}

.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(--whist-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(--whist-accent-rgb), 0.3);
}

.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;
    background: linear-gradient(135deg, var(--whist-danger, #ef4444) 0%, #dc2626 100%);
    border-radius: var(--whist-radius-full, 9999px);
    font-size: 9px;
    font-weight: 700;
    color: white;
    padding: 0 4px;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    z-index: 2;
}

.nav-bar-fab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--whist-accent) 0%, var(--whist-accent-dark) 100%);
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    font-size: 10px;
    position: relative;
    top: -12px;
    box-shadow:
        0 4px 20px rgba(var(--whist-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.34, 1.56, 0.64, 1);
}

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

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

.nav-fab-profile {
    background: transparent;
    border: none;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.nav-fab-profile:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.nav-fab-profile::before { display: none; }

.nav-fab-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.nav-fab-initials {
    font-size: 14px;
    font-weight: 700;
}

.nav-bar-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--whist-danger);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(var(--whist-danger-rgb), 0.5);
}

.status-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

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

.nav-bar-dot {
    position: absolute;
    top: 4px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--whist-danger);
    box-shadow: 0 0 4px rgba(248, 113, 113, 0.6);
}

/* Status Bar Items — niciunul nu se taie, fiecare isi tine latimea minima */
.status-item {
    font-size: clamp(11px, 2.2vw, 13px);
    font-weight: 600;
    color: var(--whist-text-dim);
    white-space: nowrap;
    flex-shrink: 0;       /* CRITIC: fiecare item isi pastreaza lungimea — nu se taie la jumatate */
}

/* Balance badge — daca e prea mare, trunchiaza CUVANTUL "pts" nu cifrele,
   ca sa nu afecteze timer-ul care vine dupa */
.status-item.balance-badge {
    max-width: 100%;
    min-width: 0;         /* permite ellipsis in interior */
    overflow: hidden;
    text-overflow: ellipsis;
}
.status-item.balance-badge .balance-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Pe mobil, ascund "pts" text (lasa doar iconita + cifra) cand spatiu e limitat */
@media (max-width: 480px) {
    .status-item.balance-badge {
        font-size: 10px;
    }
    /* "pts" text devine ascuns daca balance are 4+ cifre pe mobil mic */
    .status-item.balance-badge[data-big="true"]::after {
        /* JS poate seta data-big="true" cand balance ≥ 10000 */
    }
}

/* Scor display — TOTDEAUNA vizibil cu numere numerice fixed-width */
.status-bar .score-group .score-value {
    font-variant-numeric: tabular-nums;
}

/* Game Timer din status bar — ROSU (per CERUT USER) */
.status-item-timer {
    color: #fca5a5 !important;
}
.status-item-timer .material-symbols-rounded {
    color: #f87171 !important;
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.35));
}
.status-item-timer #gameTimer,
.status-item-timer #gameTimerShort {
    color: #fca5a5;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Left status group — scroll orizontal silent daca overflow */
.status-left-group {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.status-left-group::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
}

/* Pe mobil foarte mic (<375px), reduc font + gap ca sa incap totul */
@media (max-width: 375px) {
    .status-bar { font-size: 10px; gap: 4px; padding: 0 6px; }
    .status-bar .status-item { font-size: 10px; gap: 2px !important; }
    .status-bar .status-item .material-symbols-rounded { font-size: 13px; }
    .status-avatar { width: 18px !important; height: 18px !important; }
    .status-bar .balance-badge .balance-value { font-size: 10px; }
    .status-bar .score-value { font-size: 10px; }
    .status-actions { gap: 3px !important; }
}

.status-item .material-symbols-rounded {
    font-size: 16px;
    color: var(--whist-accent);
}

.score-label {
    color: var(--whist-text-muted);
    font-size: 10px;
    font-weight: 600;
}

.score-value {
    font-size: 10px;
    font-weight: 700;
    color: var(--whist-accent);
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
}

.score-separator {
    color: var(--whist-text-muted);
    font-size: 12px;
}

.balance-badge {
    cursor: pointer;
    transition: all 0.3s;
    background: linear-gradient(135deg, rgba(var(--whist-accent-rgb), 0.1) 0%, rgba(var(--whist-accent-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--whist-accent-rgb), 0.15);
    border-radius: 8px;
    padding: 2px 8px;
    backdrop-filter: blur(8px);
}

.balance-badge:hover {
    color: var(--whist-accent);
    background: linear-gradient(135deg, rgba(var(--whist-accent-rgb), 0.15) 0%, rgba(var(--whist-accent-rgb), 0.08) 100%);
    border-color: rgba(var(--whist-accent-rgb), 0.25);
    box-shadow: var(--glow-xs);
}

.balance-value {
    font-weight: 700;
    color: var(--whist-accent);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px rgba(var(--whist-accent-rgb), 0.3);
}

.balance-badge.balance-positive .balance-value { color: var(--whist-success); }
.balance-badge.balance-negative .balance-value { color: var(--whist-danger); }
.balance-badge.balance-zero .balance-value { color: var(--whist-text-dim); }

.balance-badge.balance-updated {
    animation: coin-flip 0.6s ease-out;
}

/* Status Button */
.status-btn {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, rgba(var(--whist-accent-rgb), 0.1) 0%, rgba(var(--whist-accent-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--whist-accent-rgb), 0.15);
    border-radius: 8px;
    color: var(--whist-text-dim);
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.status-btn:hover {
    color: var(--whist-accent);
    background: rgba(var(--whist-accent-rgb), 0.15);
    box-shadow: var(--glow-xs);
}

.status-btn .hint-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 14px;
    height: 14px;
    background: var(--whist-accent);
    color: white;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* XP Bar */
.xp-bar-container {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(var(--whist-accent-rgb), 0.06);
    border: 1px solid rgba(var(--whist-accent-rgb), 0.1);
    transition: all 0.3s;
    height: 20px;
}

.xp-bar-container:hover {
    background: rgba(var(--whist-accent-rgb), 0.12);
    border-color: rgba(var(--whist-accent-rgb), 0.2);
}

#levelBadge {
    font-size: 10px;
    font-weight: 700;
    color: var(--whist-accent);
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(var(--whist-accent-rgb), 0.3);
}

.xp-progress-track {
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}

.xp-progress-track > div,
#xpProgressBar {
    height: 100%;
    background: linear-gradient(90deg, var(--whist-accent) 0%, var(--whist-accent-light) 100%);
    border-radius: 2px;
    transition: width 0.5s ease;
    box-shadow: 0 0 6px rgba(var(--whist-accent-rgb), 0.4);
}

#xpLabel {
    font-size: 9px;
    color: var(--whist-text-dim);
    white-space: nowrap;
}

/* Desktop adjustments (nav-rail stays fixed bottom on all sizes, like Table) */
@media (min-width: 768px) {
    .status-bar {
        min-height: 30px;
        font-size: 12px;
    }
}

.status-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* ================================================================================================
   6b. MENU DRAWER (slide-up panel)
================================================================================================ */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.drawer-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    background: linear-gradient(180deg,
        rgba(var(--whist-primary-rgb, 36, 21, 66), 0.98) 0%,
        var(--whist-bg, rgba(26, 10, 46, 0.95)) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(var(--whist-accent-rgb), 0.2);
    border-radius: var(--whist-radius-xl) var(--whist-radius-xl) 0 0;
    padding: 0 var(--space-md) calc(var(--sab, 0px) + var(--space-md));
    z-index: 2000;
    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-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.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(--whist-text-muted);
    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(--whist-radius-sm);
    color: var(--whist-text-dim);
    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: rgba(var(--whist-accent-rgb), 0.3);
    color: var(--whist-text);
}

.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(--whist-accent);
    transform: scale(1.1);
}

.drawer-item .nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
}

.drawer-item-exit {
    color: var(--whist-danger);
}

.drawer-item-exit:hover {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.3);
}

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


/* ================================================================================================
   7. GAME CANVAS
================================================================================================ */
.game-canvas {
    flex: 1 !important;
    max-width: none !important;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding: 0 var(--space-sm) var(--space-sm);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 60px;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(var(--whist-accent-rgb), 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(var(--whist-accent-rgb), 0.02) 0%, transparent 40%);
}

@media (min-width: 768px) {
    .game-canvas { padding-bottom: 0; }
}

.game-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    position: relative;
    overflow: hidden;
}


/* ================================================================================================
   7a. LOBBY VIEW
================================================================================================ */

/* Visibility toggle */
.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 - 155px);
    overflow-y: auto;
    overflow-x: clip;
    padding: clamp(8px, 2vw, 16px);
    padding-bottom: clamp(8px, 2vw, 16px);
    gap: clamp(8px, 1.5vw, 12px);
}

body.game-menu .lobby-view > * {
    width: 100%;
}

body.game-menu .game-setup-view { display: none !important; }
body.game-menu .game-table-wrapper { display: none !important; }

/* Lobby scrollbar */
.lobby-view::-webkit-scrollbar { width: 4px; }
.lobby-view::-webkit-scrollbar-track { background: transparent; }
.lobby-view::-webkit-scrollbar-thumb {
    background: rgba(var(--whist-accent-rgb), 0.15);
    border-radius: 4px;
}

/* ── Lobby Header ── */
.lobby-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 2vw, 12px);
    flex-wrap: wrap;
    padding-bottom: clamp(4px, 1vw, 8px);
}

.lobby-header-left {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2vw, 16px);
}

/* Tile Mascot */
.lobby-tile-mascot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.whist-logo-tiles {
    display: flex;
    align-items: flex-end;
    height: clamp(46px, 7.5vw, 58px);
}

.whist-logo-tiles .tile {
    width: clamp(24px, 3.8vw, 30px) !important;
    height: clamp(34px, 5.5vw, 44px) !important;
    font-size: clamp(9px, 1.6vw, 12px) !important;
    cursor: default;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.whist-logo-tiles .tile .tile-suit-dot {
    width: clamp(4px, 0.7vw, 6px) !important;
    height: clamp(4px, 0.7vw, 6px) !important;
}

.whist-logo-tiles .tile .joker-svg {
    width: 82% !important;
}

.whist-logo-tiles .tile .joker-label {
    font-size: 5px !important;
}

.whist-logo-tiles .tile:nth-child(1) { transform: rotate(-12deg) translateY(3px); z-index: 1; margin-right: -10px; }
.whist-logo-tiles .tile:nth-child(2) { transform: rotate(-5deg) translateY(1px); z-index: 2; margin-right: -10px; }
.whist-logo-tiles .tile:nth-child(3) { transform: rotate(2deg); z-index: 3; margin-right: -10px; }
.whist-logo-tiles .tile:nth-child(4) { transform: rotate(7deg) translateY(1px); z-index: 4; margin-right: -10px; }
.whist-logo-tiles .tile:nth-child(5) { transform: rotate(13deg) translateY(3px); z-index: 5; }

.lobby-tile-mascot:hover .whist-logo-tiles .tile:nth-child(1) { transform: rotate(-14deg) translateY(-5px); }
.lobby-tile-mascot:hover .whist-logo-tiles .tile:nth-child(2) { transform: rotate(-6deg) translateY(-7px); }
.lobby-tile-mascot:hover .whist-logo-tiles .tile:nth-child(3) { transform: rotate(1deg) translateY(-8px); }
.lobby-tile-mascot:hover .whist-logo-tiles .tile:nth-child(4) { transform: rotate(7deg) translateY(-7px); }
.lobby-tile-mascot:hover .whist-logo-tiles .tile:nth-child(5) { transform: rotate(14deg) translateY(-5px); }

.lobby-online-indicator,
.lobby-rooms-count {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(11px, 2.2vw, 13px);
    color: var(--whist-text-dim);
    font-weight: 600;
}

.lobby-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6b7280;
    transition: background 0.3s;
    animation: online-pulse 2s ease-in-out infinite;
}

.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: clamp(6px, 1.5vw, 10px);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Lobby Action Buttons ── */
.lobby-btn {
    min-height: clamp(34px, 6vw, 40px);
    padding: clamp(6px, 1vw, 8px) clamp(12px, 2.5vw, 16px);
    border: none;
    border-radius: clamp(8px, 1.5vw, 10px);
    font-weight: 700;
    font-size: clamp(11px, 2.2vw, 13px);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.25s ease;
    white-space: nowrap;
    font-family: inherit;
}

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

.lobby-btn-create {
    background: linear-gradient(135deg, var(--whist-accent), var(--whist-accent-dark));
    color: white;
    box-shadow: 0 2px 8px rgba(var(--whist-accent-rgb), 0.25);
    animation: create-breathe 3s ease-in-out infinite;
}

.lobby-btn-create:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--whist-accent-rgb), 0.35);
}

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

.lobby-btn-ai {
    background: rgba(var(--whist-success-rgb), 0.15);
    color: var(--whist-success);
    border: 1px solid rgba(var(--whist-success-rgb), 0.2);
}

.lobby-btn-ai:hover {
    background: rgba(var(--whist-success-rgb), 0.25);
    transform: translateY(-1px);
}

.lobby-btn-quick {
    background: rgba(var(--whist-accent-rgb), 0.12);
    color: var(--whist-accent);
    border: 1px solid rgba(var(--whist-accent-rgb), 0.2);
    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;
}

.lobby-btn-quick:hover {
    background: rgba(var(--whist-accent-rgb), 0.22);
    transform: translateY(-1px);
}

/* ── Lobby Stats Row ── */
.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(10px, 2vw, 16px);
    padding: clamp(8px, 1.5vw, 12px);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--whist-radius-sm);
    flex-wrap: nowrap;
    white-space: nowrap;
    flex-shrink: 0;
}

.lobby-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: clamp(11px, 2vw, 13px);
    color: var(--whist-text-dim);
    white-space: nowrap;
}

.lobby-stat strong {
    color: var(--whist-text);
    font-variant-numeric: tabular-nums;
}

.lobby-stat-icon {
    font-size: 16px !important;
}

.lobby-stats-bar .stat-item {
    animation: stat-pop 0.5s ease-out both;
}
.lobby-stats-bar .stat-item:nth-child(1) { animation-delay: 0.1s; }
.lobby-stats-bar .stat-item:nth-child(2) { animation-delay: 0.2s; }
.lobby-stats-bar .stat-item:nth-child(3) { animation-delay: 0.3s; }

/* ── 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: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--whist-radius-sm);
    flex: 1;
    min-width: 260px;
}

.lobby-ai-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lobby-ai-text {
    flex: 1;
}

.lobby-ai-text h4 {
    font-size: clamp(12px, 2.2vw, 14px);
    font-weight: 700;
    margin: 0;
    color: var(--whist-text);
}

.lobby-ai-text p {
    font-size: clamp(10px, 1.8vw, 12px);
    color: var(--whist-text-dim);
    margin: 0;
}

.lobby-ai-stats {
    display: flex;
    gap: clamp(8px, 1.6vw, 14px);
    font-size: clamp(11px, 2vw, 12px);
    color: var(--whist-text-dim);
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

.lobby-ai-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--whist-accent), var(--whist-accent-dark));
    color: white;
    border: none;
    border-radius: var(--whist-radius-sm);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    font-family: inherit;
}

.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;
}

.lobby-ai-play-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--whist-accent-rgb), 0.3);
}

/* ── Leaderboard ── */
.lobby-leaderboard {
    padding: 0;
    margin-bottom: 2px;
    min-width: 0;
}
.lobby-lb-item { flex-shrink: 0; }

.lobby-lb-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(12px, 2.2vw, 14px);
    font-weight: 700;
    color: var(--whist-accent);
    margin-bottom: 8px;
}

.lobby-lb-header .material-symbols-rounded {
    font-size: 18px;
    color: var(--whist-gold);
}

.lobby-lb-list {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    gap: clamp(6px, 1.2vw, 8px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--whist-accent-rgb), 0.35) transparent;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
}
.lobby-lb-list::-webkit-scrollbar { height: 6px; display: block; }
.lobby-lb-list::-webkit-scrollbar-track { background: transparent; }
.lobby-lb-list::-webkit-scrollbar-thumb { background: rgba(var(--whist-accent-rgb), 0.35); border-radius: 6px; }
.lobby-lb-item { scroll-snap-align: start; }
/* scrollbar styled above */

.lobby-lb-loading {
    font-size: 12px;
    color: var(--whist-text-dim);
    text-align: center;
    padding: 12px;
}

.lobby-lb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border, rgba(255,255,255,0.06));
    border-radius: 8px;
    min-width: 140px;
    flex-shrink: 0;
    font-size: 12px;
    transition: all 0.2s;
}

.lobby-lb-item:hover {
    background: rgba(var(--whist-accent-rgb), 0.06);
    border-color: rgba(var(--whist-accent-rgb), 0.15);
}

.lobby-lb-rank {
    font-size: clamp(14px, 2.8vw, 17px);
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    font-weight: 700;
    color: var(--whist-text-dim);
}

.lobby-lb-rank.top-1 { color: #ffd700; }
.lobby-lb-rank.top-2 { color: #c0c0c0; }
.lobby-lb-rank.top-3 { color: #cd7f32; }

.lobby-lb-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    color: white;
    animation: avatar-ring 3s ease-in-out infinite;
}

.lobby-lb-name {
    flex: 1;
    font-weight: 600;
    color: var(--whist-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lobby-lb-score {
    font-weight: 700;
    color: var(--whist-accent);
    font-variant-numeric: tabular-nums;
}

/* ── Filter Bar ── */
.lobby-filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lobby-filters-scroll {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.8vw, 6px);
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
    padding: 2px 0;
}

.lobby-filters-scroll::-webkit-scrollbar { display: none; }

.lobby-chip {
    padding: clamp(4px, 0.8vw, 5px) clamp(8px, 1.5vw, 10px);
    border-radius: clamp(4px, 0.8vw, 6px);
    font-size: clamp(10px, 2vw, 11px);
    font-weight: 600;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--whist-text-dim);
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
    transition: all 0.2s ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

.lobby-chip:hover {
    background: rgba(var(--whist-accent-rgb), 0.08);
}

.lobby-chip.active {
    background: rgba(var(--whist-accent-rgb), 0.15);
    border-color: rgba(var(--whist-accent-rgb), 0.3);
    color: var(--whist-accent);
}

.lobby-chip-sep {
    width: 1px;
    height: 16px;
    background: var(--glass-border);
    flex-shrink: 0;
}

.lobby-search-toggle {
    width: clamp(32px, 6vw, 36px);
    height: clamp(32px, 6vw, 36px);
    border: 1px solid var(--glass-border);
    border-radius: clamp(6px, 1vw, 8px);
    background: var(--glass-bg);
    color: var(--whist-text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.lobby-search-toggle:hover {
    background: rgba(var(--whist-accent-rgb), 0.1);
    color: var(--whist-accent);
}

.lobby-sort-select {
    height: clamp(32px, 6vw, 36px);
    padding: 0 clamp(8px, 1.5vw, 10px);
    border: 1px solid var(--glass-border);
    border-radius: clamp(6px, 1vw, 8px);
    background: var(--glass-bg);
    color: var(--whist-text-dim);
    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(--whist-accent-rgb), 0.3);
}

.lobby-sort-select option {
    background: var(--whist-surface);
    color: var(--whist-text);
}

/* ── Search Row ── */
.lobby-search-row { padding: 0 0 2px; }

.lobby-search-wrap {
    display: flex;
    align-items: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: clamp(8px, 1.5vw, 10px);
    padding: 0 clamp(8px, 1.5vw, 12px);
    gap: 8px;
}

.lobby-search-icon { font-size: 18px; color: var(--whist-text-muted); }

.lobby-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--whist-text);
    font-size: clamp(12px, 2.5vw, 14px);
    padding: clamp(8px, 1.5vw, 10px) 0;
    font-family: inherit;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
    max-height: 36px;
}

.lobby-search-input::placeholder { color: var(--whist-text-muted); }

.lobby-search-clear {
    background: none;
    border: none;
    color: var(--whist-text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
}

/* ── Room Cards Grid ── */
.lobby-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(6px, 1vw, 10px);
    width: 100%;
}

@media (max-width: 768px) {
    .lobby-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .lobby-grid { grid-template-columns: 1fr; }
}

/* ── Ad Columns ── */
.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;
    perspective: 1400px;
}

@media (max-width: 768px) {
    body.game-menu .lobby-ad { display: none; }
}

/* ── House Ad Card (rotative, premium) ── */
.lobby-ad-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 480px;
    padding: 28px 14px 20px;
    border-radius: 16px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.22);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    transition:
        transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1),
        box-shadow 0.4s ease,
        border-color 0.3s;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    animation: adFlipIn 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.05);
    transform-origin: center center;
}
.lobby-ad-card.ad-exit {
    animation: adFlipOut 0.4s cubic-bezier(0.5, 0, 0.7, 0.1) forwards;
    pointer-events: none;
}
/* Texture + light overlay */
.lobby-ad-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 8%, rgba(255, 215, 0, 0.22) 0%, transparent 55%),
        repeating-linear-gradient(45deg,
            transparent 0, transparent 14px,
            rgba(255, 255, 255, 0.02) 14px, rgba(255, 255, 255, 0.02) 15px);
    pointer-events: none;
    z-index: 0;
}
/* Inner gold frame */
.lobby-ad-card::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 215, 0, 0.14);
    border-radius: 11px;
    pointer-events: none;
    transition: border-color 0.3s;
    z-index: 0;
}
.lobby-ad-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(255, 215, 0, 0.55);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.6),
        0 0 28px rgba(255, 215, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #fff;
}
.lobby-ad-card:hover::after { border-color: rgba(255, 215, 0, 0.4); }

/* PROMO badge */
.lobby-ad-card .ad-label {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 9px;
    background: rgba(255, 215, 0, 0.18);
    color: #ffd700;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 10px;
    z-index: 2;
    backdrop-filter: blur(6px);
}

/* Shimmer overlay (activat la hover) */
.lobby-ad-card .ad-shimmer {
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 45%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.06) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
    transition: left 0.85s ease;
}
.lobby-ad-card:hover .ad-shimmer { left: 160%; }

/* Iconiță premium cu aureolă */
.lobby-ad-card .ad-icon {
    font-size: 56px !important;
    color: #ffd700;
    margin-top: 16px;
    padding: 18px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 215, 0, 0.1) 0%,
        transparent 70%);
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, 0.22),
        inset 0 0 22px rgba(255, 215, 0, 0.08);
    text-shadow:
        0 0 20px rgba(255, 215, 0, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.5);
    z-index: 1;
    animation: adIconFloat 4.5s ease-in-out infinite;
}

.lobby-ad-card .ad-body {
    text-align: center;
    z-index: 1;
    padding: 0 6px;
}
.lobby-ad-card .ad-name {
    font-family: 'Oswald', var(--font-display), sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
    background: linear-gradient(180deg, #ffe76b 0%, #fff6d2 48%, #c99b2c 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.lobby-ad-card .ad-slogan {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    opacity: 0.82;
    color: rgba(255, 255, 255, 0.92);
    font-style: italic;
    padding: 0 4px;
}
.lobby-ad-card .ad-body::after {
    content: '';
    display: block;
    width: 42px;
    height: 1px;
    margin: 12px auto 0;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.55), transparent);
}

/* CTA premium */
.lobby-ad-card .ad-cta {
    position: relative;
    padding: 11px 22px;
    border-radius: 22px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ffd700;
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.14) 0%,
        rgba(255, 215, 0, 0.04) 100%);
    border: 1px solid rgba(255, 215, 0, 0.4);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    z-index: 1;
    transition: all 0.3s;
}
.lobby-ad-card:hover .ad-cta {
    background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
    color: #1a0a2e;
    border-color: #ffd700;
    box-shadow:
        0 4px 14px rgba(255, 215, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.06);
}

@keyframes adFlipIn {
    0%   { opacity: 0; transform: rotateY(-135deg) scale(0.85); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: rotateY(0deg) scale(1); }
}
@keyframes adFlipOut {
    0%   { opacity: 1; transform: rotateY(0deg) scale(1); }
    100% { opacity: 0; transform: rotateY(135deg) scale(0.85); }
}
@keyframes adIconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-6px) rotate(2deg); }
}

/* Per-game gradients */
.lobby-ad-card[data-game="septica"]     { background: linear-gradient(135deg, #1e4d2e 0%, #0d3d20 60%, #082a16 100%); }
.lobby-ad-card[data-game="tabinet"]     { background: linear-gradient(135deg, #7a1626 0%, #4f0a17 60%, #33060f 100%); }
.lobby-ad-card[data-game="table"]       { background: linear-gradient(135deg, #5c3a1e 0%, #3a2310 60%, #221507 100%); }
.lobby-ad-card[data-game="video-poker"] { background: linear-gradient(135deg, #1e3a7a 0%, #0f2555 60%, #081638 100%); }
.lobby-ad-card[data-game="macao"]       { background: linear-gradient(135deg, #5a1f7a 0%, #3a0f5a 60%, #220738 100%); }

/* ── Room Card ── */
.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);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: clamp(6px, 1.2vw, 10px);
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: all 0.25s ease;
}

/* State stripe (left) */
.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(--whist-success); }
.lobby-card.lc-playing::before { background: #f59e0b; }
.lobby-card.lc-full::before    { background: #6b7280; }

/* Clickable hover */
.lobby-card.lc-clickable { cursor: pointer; }

.lobby-card.lc-clickable:hover {
    background: rgba(var(--whist-accent-rgb), 0.06);
    border-color: rgba(var(--whist-accent-rgb), 0.2);
    transform: translateY(-2px) perspective(600px) rotateX(1deg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 12px rgba(var(--whist-accent-rgb), 0.1);
}

.lobby-card.lc-clickable:active {
    transform: translateY(0);
}

/* Waiting rooms pulse */
.lobby-card.lc-waiting {
    animation: card-entrance 0.4s ease-out both, waiting-glow 2.5s ease-in-out infinite;
}

/* Card entering/leaving with stagger */
.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; }

/* Lobby shimmer refresh effect */
@keyframes lobbyShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}
.lobby-grid.lobby-refreshing .lobby-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--whist-accent-rgb), 0.06), transparent);
    animation: lobbyShimmer 1.5s ease infinite;
    pointer-events: none;
    border-radius: inherit;
}

/* Card top: host info + action */
.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;
}

.lobby-card-info {
    min-width: 0;
    flex: 1;
}

.lobby-card-name {
    font-size: clamp(11px, 2.2vw, 12px);
    font-weight: 700;
    color: var(--whist-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.lobby-card-room {
    font-size: clamp(10px, 2vw, 11px);
    color: var(--whist-text-muted);
    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(--whist-accent);
    opacity: 0.85;
}

/* Card meta: chips + dots */
.lobby-card-meta {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.8vw, 6px);
    flex-wrap: wrap;
}

.lc-chip {
    font-size: clamp(9px, 1.8vw, 10px);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--glass-bg-strong);
    color: var(--whist-text-dim);
    white-space: nowrap;
}

.lc-chip .material-symbols-rounded {
    animation: star-twinkle 3s ease-in-out infinite;
}

.lc-dots {
    display: flex;
    align-items: center;
    gap: 3px;
}

.lc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--whist-text-muted);
    background: transparent;
    transition: all 0.2s;
}

.lc-dot.on {
    background: var(--whist-accent);
    border-color: var(--whist-accent);
    box-shadow: 0 0 4px rgba(var(--whist-accent-rgb), 0.3);
}

/* Action button */
.lobby-card-action { flex-shrink: 0; }

.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;
    font-family: inherit;
}

.lc-action-btn.lc-join {
    background: linear-gradient(135deg, var(--whist-accent), var(--whist-accent-dark));
    color: white;
}

.lc-action-btn.lc-join:hover {
    box-shadow: 0 2px 10px rgba(var(--whist-accent-rgb), 0.3);
}

.lc-action-btn.lc-spectate {
    background: rgba(255, 255, 255, 0.06);
    color: var(--whist-text-dim);
    border: 1px solid var(--glass-border);
}

.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(--whist-text-muted);
    padding: clamp(5px, 1vw, 7px) clamp(8px, 1.5vw, 10px);
}

/* Status badges */
.lc-badge {
    font-size: clamp(8px, 1.6vw, 9px);
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 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;
}

.lc-status-badge[data-status="playing"] {
    animation: badge-pulse 2s ease-in-out infinite;
}

/* Pull-to-refresh indicator */
.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(--whist-text-muted);
    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(--whist-accent);
    transform: rotate(180deg);
}
.lobby-pull-indicator.refreshing .material-symbols-rounded {
    animation: spin 0.6s linear infinite;
}

/* 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;
}

/* ── Empty State ── */
.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(--whist-text-dim);
    margin-top: 12px;
    font-weight: 600;
}

.lobby-empty-sub {
    font-size: clamp(12px, 2.5vw, 14px);
    color: var(--whist-text-muted);
    margin-top: 4px;
}

/* ── 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-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--whist-text-dim);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.lobby-page-btn:hover {
    background: rgba(var(--whist-accent-rgb), 0.1);
}

.lobby-page-btn.active {
    background: rgba(var(--whist-accent-rgb), 0.15);
    border-color: rgba(var(--whist-accent-rgb), 0.3);
    color: var(--whist-accent);
}

/* ── 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(26, 10, 46, 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(--whist-text);
}

.lobby-guest-sub {
    font-size: clamp(11px, 2.2vw, 13px);
    color: var(--whist-text-dim);
}

.lobby-guest-or {
    font-size: 11px;
    color: var(--whist-text-muted);
}

/* 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(--whist-accent-rgb), 0.2), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(var(--whist-accent-rgb), 0.15), transparent),
        radial-gradient(1px 1px at 50% 40%, rgba(var(--whist-accent-rgb), 0.2), transparent),
        radial-gradient(1px 1px at 70% 80%, rgba(var(--whist-accent-rgb), 0.1), transparent),
        radial-gradient(1px 1px at 90% 30%, rgba(var(--whist-accent-rgb), 0.15), transparent);
    animation: particles-drift 20s linear infinite;
}


/* ================================================================================================
   7b. MULTIPLAYER GAME BAR
================================================================================================ */
.mp-game-bar {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--whist-surface);
    border-bottom: 1px solid var(--whist-border);
    flex-shrink: 0;
}

.mp-game-bar.active {
    display: flex;
}

/* Cand mp-game-bar e mutata in top-bar (JS), apare inline intre brand si actions */
.top-bar > .mp-game-bar.active {
    padding: 3px 12px;
    gap: 10px;
    background: rgba(10, 20, 12, 0.55);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-bottom: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 16px;
    margin: 0 8px;
    flex: 0 1 auto;
    min-width: 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Pe mobile mic, ascunde textul din mp-game-bar — doar iconita */
@media (max-width: 480px) {
    .top-bar > .mp-game-bar.active {
        padding: 3px 8px;
        gap: 6px;
        margin: 0 4px;
    }
    .top-bar > .mp-game-bar.active .mp-game-bar-leave span:not(.material-symbols-rounded),
    .top-bar > .mp-game-bar.active .mp-game-bar-info span:not(.material-symbols-rounded) {
        display: none;
    }
}

/* ═══ MESE BUTTON — premium pill cu arrow + glow la hover ═══ */
.mp-game-bar-leave {
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.08) 0%,
        rgba(0, 0, 0, 0.35) 100%);
    border: 1px solid rgba(255, 215, 0, 0.22);
    color: rgba(255, 235, 180, 0.92);
    cursor: pointer;
    padding: 5px 12px 5px 8px;
    border-radius: 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 2px 5px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px);
}

/* Shine sweep on top edge */
.mp-game-bar-leave::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -60%;
    width: 40%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 235, 150, 0.9), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.mp-game-bar-leave .material-symbols-rounded {
    font-size: 16px;
    color: rgba(255, 215, 0, 0.85);
    transition: transform 0.25s ease, color 0.25s ease;
}

.mp-game-bar-leave:hover {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.25) 0%,
        rgba(0, 0, 0, 0.2) 100%);
    border-color: rgba(239, 68, 68, 0.55);
    color: #fff;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.18),
        0 0 0 1px rgba(239, 68, 68, 0.3),
        0 6px 14px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(239, 68, 68, 0.25);
}

.mp-game-bar-leave:hover::before { left: 110%; }

.mp-game-bar-leave:hover .material-symbols-rounded {
    color: #fca5a5;
    transform: translateX(-2px);  /* arrow shifts left — inviting "go back" */
}

.mp-game-bar-leave:active {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 215, 0, 0.1);
}

.mp-game-bar-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--whist-text-dim);
}

.mp-game-bar-info .material-symbols-rounded {
    font-size: 16px;
}

body.game-active .mp-game-bar-info { color: rgba(255, 215, 0, 0.9); }
/* body.game-active .mp-game-bar-leave — stil custom deja definit mai sus, nu suprascriu */


/* ================================================================================================
   8. GAME SETUP VIEW
================================================================================================ */
.game-setup-view {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.setup-card {
    background: var(--whist-surface);
    border: 1px solid var(--whist-border);
    border-radius: var(--whist-radius);
    padding: 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.setup-header {
    text-align: center;
    margin-bottom: 28px;
}

.setup-header h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--whist-accent);
    margin: 0 0 4px;
}

.setup-header p {
    font-size: 14px;
    color: var(--whist-text-dim);
    margin: 0;
}

.setup-section { margin-bottom: 20px; }

.setup-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--whist-text-dim);
    margin-bottom: 10px;
}

.setup-label .material-symbols-rounded {
    font-size: 16px;
    color: var(--whist-accent);
}

/* Player Count Selector */
.player-count-selector,
.difficulty-selector {
    display: flex;
    gap: 8px;
}

.count-btn,
.diff-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: var(--whist-surface-2);
    border: 2px solid transparent;
    border-radius: var(--whist-radius-sm);
    color: var(--whist-text-dim);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
}

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

.count-btn:hover,
.diff-btn:hover {
    border-color: var(--whist-accent);
    color: var(--whist-text);
}

.count-btn.active,
.diff-btn.active {
    border-color: var(--whist-accent);
    background: var(--whist-accent-glow);
    color: var(--whist-accent);
}

.diff-stars {
    font-size: 16px;
    color: var(--whist-gold);
}

/* Start Button */
.setup-start-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--whist-accent), var(--whist-accent-light));
    border: none;
    border-radius: var(--whist-radius-sm);
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    transition: all 0.3s;
    box-shadow: 0 4px 20px var(--whist-accent-glow);
    font-family: inherit;
}

.setup-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--whist-accent-glow);
}

.setup-start-btn .material-symbols-rounded { font-size: 24px; }


/* ================================================================================================
   9. GAME PLAY VIEW
================================================================================================ */

/* Wrapper — contains everything (green table + action bar) */
.game-table-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    gap: 4px;
}

/* ═══ Green table — 4 zone etalare ca joci.ro ═══ */
/* 2026-04-21 DESKTOP LAYOUT v3: 4 ZONE ETALARE VERTICALE sus-pana-jos — fiecare jucator
   are coloana lui ingusta (zone1/zone2/zone3/zone4). Sidebar pe coloana 5 (180px).
   hand-bot full-width pe ultimele 4 coloane (sub toate zonele, NU sub sidebar).
   Mobile @media (max-width: 767px) override-uieste tot, mobilul ramane neatins. */
.game-play-view {
    flex: 1;
    display: grid;
    grid-template-areas:
        "zone1  zone2  zone3  zone4  hand-top"
        "zone1  zone2  zone3  zone4  hand-top"
        "zone1  zone2  zone3  zone4  hand-top"
        "zone1  zone2  zone3  zone4  sidebar"
        "hand-bot hand-bot hand-bot hand-bot sidebar";
    grid-template-columns: 1fr 1fr 1fr 1fr 180px;
    /* 2026-04-21 v5: seat-south min 170px garantat ca sa fie mereu COMPLET vizibil
       (stativ lemn + piese + info-bar + butoane). Zone etalare primesc cat ramane
       (minmax 0 1fr = shrink liber pana 0). Efect: zone putin mai mici, seat-south intreg. */
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(215px, auto);
    gap: 4px;
    overflow: hidden;
    position: relative;
    min-height: 0;
    /* ═══ Premium felt surface — casino-grade texture ═══ */
    background:
        /* Spot light — soft center highlight */
        radial-gradient(ellipse 80% 50% at 50% 20%, rgba(255,255,240,0.12) 0%, transparent 55%),
        /* Deep vignette — darker corners for focus */
        radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,0.28) 100%),
        /* Cross-hatched felt fibers — microscopic texture */
        repeating-linear-gradient(27deg,
            transparent 0, transparent 1.5px,
            rgba(0,0,0,0.025) 1.5px, rgba(0,0,0,0.025) 2px),
        repeating-linear-gradient(117deg,
            transparent 0, transparent 1.5px,
            rgba(0,0,0,0.02) 1.5px, rgba(0,0,0,0.02) 2px),
        /* Fine noise texture */
        repeating-linear-gradient(45deg,
            transparent 0, transparent 3px,
            rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px),
        /* Rich green felt gradient — deeper, more saturated */
        linear-gradient(175deg,
            #1e7e3a 0%,
            #1f8738 18%,
            #1c7a34 38%,
            #19712e 58%,
            #166628 78%,
            #12581f 100%);
    /* Cadru lemn GROS 12px, 3D realistic */
    border: 12px solid #6B4423;
    border-top-color: #9B7848;
    border-bottom-color: #3d2510;
    border-left-color: #7a5530;
    border-right-color: #7a5530;
    border-radius: 16px;
    padding: 6px 8px;
    box-shadow:
        inset 0 0 40px rgba(0,0,0,0.25),
        inset 0 0 8px rgba(0,0,0,0.12),
        inset 0 2px 0 rgba(255,255,255,0.04),
        0 0 0 1px #2a1808,
        0 0 0 3px #B09060,
        0 0 0 4px #3d2510,
        0 6px 20px rgba(0,0,0,0.5);
}

/* ═══ Casino watermark — "R" monogramă foarte estompată, centrul mesei ═══ */
.game-play-view::before {
    content: 'R';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Georgia', serif;
    font-size: clamp(140px, 22vw, 260px);
    font-weight: 900;
    font-style: italic;
    color: rgba(255, 215, 0, 0.028);
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.04),
        0 0 30px rgba(255, 215, 0, 0.015);
    pointer-events: none;
    z-index: 0;
    letter-spacing: -8px;
    user-select: none;
}

/* Etalare zones si sidebar trebuie sa stea deasupra watermark-ului */
.game-play-view > * { position: relative; z-index: 1; }

/* ── Seat positions ── */
/* 2026-04-21 DESKTOP: seat-north = coloana dreapta 180px (grid-area: hand-top).
   Oponentii se STIVUIESC VERTICAL (flex-direction: column). Overflow-y pentru
   safety cand sunt prea multi oponenti. Mobile override-uieste cu !important
   in @media (max-width: 767px) sa revina la flex-direction: row horizontal. */
.seat-north {
    grid-area: hand-top;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 6px;
    flex-shrink: 0;
    padding: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    min-height: 0;
    min-width: 0;
}
.seat-north::-webkit-scrollbar { display: none; }
.seat-south {
    grid-area: hand-bot;
    flex-shrink: 0;
    padding: 2px 0;
}

/* ═══ STATIV WHIST AUTENTIC — 2 shelves wooden + metal brackets cu rivets (ca pe poza 2D stylized) ═══ */
.seat-south .player-area {
    position: relative;
    background:
        /* 2026-04-21: Shelf separator + grain mutate pe .hand-scroll-wrapper
           (ca sa se alinieze cu midpoint-ul tilurilor). Aici ramane DOAR
           gradient-ul de baza lemn + un subtle grain pt. restul suprafetei
           (info-bar de jos). */
        /* GRAIN subtle global */
        repeating-linear-gradient(92deg,
            transparent 0, transparent 6px,
            rgba(70, 35, 15, 0.06) 6px, rgba(70, 35, 15, 0.06) 7px,
            transparent 7px, transparent 14px),
        /* LEMN BAZA — gradient warm natural */
        linear-gradient(180deg,
            #d89248 0%,
            #c57e30 45%,
            #a86520 85%,
            #8b5220 100%);
    padding: 0 34px;       /* loc pt. metal brackets stanga + dreapta */
    border: 1px solid #3a1f10;
    border-radius: 6px;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 230, 180, 0.25),
        inset 0 -2px 4px rgba(30, 12, 0, 0.3);
    /* NU overflow:hidden — brackets ::before/::after sunt absolute si se auto-contin prin
       width:34px + padding 34px pe parent. Daca setam hidden, blocam drag ghost-ul peste
       marginea stativului cand user trage piesa spre zona de etalare (lipire) */
    overflow: visible;
}

/* ═══ METAL BRACKET STÂNGA cu 6 rivets (2 coloane × 3 randuri) ═══ */
.seat-south .player-area::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 34px;
    background:
        /* 6 RIVETS — 2 coloane (8px + 22px) × 3 randuri (12px, 50%, calc(100%-12px)) */
        radial-gradient(circle 3px at 8px 12px,
            #0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
        radial-gradient(circle 3px at 22px 12px,
            #0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
        radial-gradient(circle 3px at 8px 50%,
            #0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
        radial-gradient(circle 3px at 22px 50%,
            #0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
        radial-gradient(circle 3px at 8px calc(100% - 12px),
            #0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
        radial-gradient(circle 3px at 22px calc(100% - 12px),
            #0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
        /* METAL walnut gradient pentru bracket */
        linear-gradient(90deg,
            #1a0b03 0%,
            #3a1f10 30%,
            #4a2a18 60%,
            #3a1f10 100%);
    border-radius: 6px 0 0 6px;
    border-right: 1px solid rgba(0, 0, 0, 0.45);
    box-shadow:
        inset 1px 1px 0 rgba(255, 220, 180, 0.15),
        inset -2px 0 4px rgba(0, 0, 0, 0.4);
    z-index: 2;
    pointer-events: none;
}

/* Info bar — light strip on wood, dark text (placed BELOW tiles) */
.seat-south .player-info-bar {
    position: relative;
    z-index: 2;
    background:
        linear-gradient(180deg,
            rgba(255, 245, 220, 0.45),
            rgba(210, 170, 110, 0.35));
    border-top: 1px solid rgba(100, 60, 25, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 240, 0.5),
        inset 0 -1px 0 rgba(100, 60, 25, 0.2);
    padding: 4px 8px;
}

.seat-south .player-info-bar .player-name-label,
.seat-south .player-info-bar .player-points,
.seat-south .player-info-bar .player-tiles-count {
    color: #3a2412;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.5);
}

/* 2026-04-21: DUAL-SHELF RACK — 2 rafturi distincte ca in referinta Whist pe Tabla.
   Separator dark intre cele 2 randuri de tiles + grain vertical pronuntat + edge highlights.
   Shelf-separatorul e aici (pe wrapper = doar inaltime tiles), NU pe player-area (care ar
   include si info-bar-ul jos si nu s-ar alinia la midpoint tiluri). */
.seat-south .hand-scroll-wrapper {
    position: relative;
    z-index: 2;
    background:
        /* 1. SHELF SEPARATOR — grooved shadow intre cele 2 rafturi, exact la 50% inaltime */
        linear-gradient(180deg,
            transparent 0%,
            transparent calc(50% - 5px),
            rgba(40, 18, 5, 0.35) calc(50% - 5px),
            rgba(25, 10, 0, 0.75) calc(50% - 2px),
            rgba(15, 6, 0, 0.9) 50%,
            rgba(25, 10, 0, 0.75) calc(50% + 2px),
            rgba(40, 18, 5, 0.35) calc(50% + 5px),
            transparent calc(50% + 5px),
            transparent 100%),
        /* 2. LUCIU pe muchia de sus a fiecarui raft — shine lemn lustruit */
        linear-gradient(180deg,
            rgba(255, 230, 170, 0.4) 0%,
            rgba(255, 230, 170, 0.1) 4%,
            transparent 45%,
            rgba(255, 225, 160, 0.32) 52%,    /* muchia de sus raft 2 */
            rgba(255, 225, 160, 0) 58%,
            transparent 100%),
        /* 3. GRAIN VERTICAL — linii verticale scurte ca pe raftul lui Whist pe Tabla */
        repeating-linear-gradient(90deg,
            transparent 0, transparent 3px,
            rgba(70, 35, 15, 0.18) 3px, rgba(70, 35, 15, 0.18) 4px,
            transparent 4px, transparent 9px,
            rgba(40, 20, 8, 0.12) 9px, rgba(40, 20, 8, 0.12) 10px,
            transparent 10px, transparent 16px,
            rgba(90, 50, 25, 0.08) 16px, rgba(90, 50, 25, 0.08) 17px),
        /* 4. WOOD BASE — gradient mai saturat ca in referinta */
        linear-gradient(180deg,
            #d89248 0%,
            #c57e30 45%,
            #b87228 55%,
            #a86520 100%);
    box-shadow:
        inset 0 2px 4px rgba(80, 50, 25, 0.35),
        inset 0 -1px 2px rgba(80, 50, 25, 0.25);
}

.seat-south .player-hand {
    padding: 10px 30px 12px;
}

/* ═══ METAL BRACKET DREAPTA cu 6 rivets (mirror la ::before) ═══
   Nota: luciul vechi "muchie sus raft" e acum integrat in backgroundul .player-area (highlight top gradient) */
.seat-south .player-area::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 34px;
    background:
        /* 6 RIVETS — 2 coloane (12px + 26px) × 3 randuri (12px, 50%, calc(100%-12px)) */
        radial-gradient(circle 3px at 12px 12px,
            #0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
        radial-gradient(circle 3px at 26px 12px,
            #0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
        radial-gradient(circle 3px at 12px 50%,
            #0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
        radial-gradient(circle 3px at 26px 50%,
            #0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
        radial-gradient(circle 3px at 12px calc(100% - 12px),
            #0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
        radial-gradient(circle 3px at 26px calc(100% - 12px),
            #0a0a0a 0%, #2a2a2a 40%, #4a4a4a 70%, transparent 75%),
        /* METAL walnut gradient mirror (invers vs ::before) */
        linear-gradient(90deg,
            #3a1f10 0%,
            #4a2a18 40%,
            #3a1f10 70%,
            #1a0b03 100%);
    border-radius: 0 6px 6px 0;
    border-left: 1px solid rgba(0, 0, 0, 0.45);
    box-shadow:
        inset -1px 1px 0 rgba(255, 220, 180, 0.15),
        inset 2px 0 4px rgba(0, 0, 0, 0.4);
    z-index: 2;
    pointer-events: none;
}

/* G. Colțuri metalice (feronerie) */
.seat-south .player-area > .hand-scroll-wrapper::before,
.seat-south .player-area > .hand-scroll-wrapper::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    top: 4px;
    background: radial-gradient(circle at 35% 35%,
        #f5d78a 0%,
        #b8891f 50%,
        #5c4110 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 3;
    pointer-events: none;
}
.seat-south .player-area > .hand-scroll-wrapper::before { left: 6px; }
.seat-south .player-area > .hand-scroll-wrapper::after { right: 6px; }

/* A. Glow pulsatoriu când e rândul jucătorului */
.seat-south .player-area.active-turn {
    animation: seatSouthTurnGlow 1.8s ease-in-out infinite;
}

@keyframes seatSouthTurnGlow {
    0%, 100% {
        box-shadow:
            0 4px 10px rgba(0, 0, 0, 0.35),
            0 1px 3px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 245, 220, 0.7),
            inset 0 -2px 3px rgba(110, 70, 35, 0.25),
            inset 0 0 0 1px rgba(140, 95, 50, 0.3),
            0 0 0 0 rgba(255, 200, 80, 0.0);
    }
    50% {
        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.4),
            0 1px 3px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 245, 220, 0.8),
            inset 0 -2px 3px rgba(110, 70, 35, 0.25),
            inset 0 0 0 1px rgba(200, 150, 70, 0.5),
            0 0 22px 2px rgba(255, 195, 80, 0.55);
    }
}

/* B. Contact shadow sub piese pe raft */
.seat-south .player-hand .tile {
    box-shadow:
        inset 0 .8px 0 rgba(255, 250, 232, .85),
        inset .5px 0 0 rgba(255, 250, 235, .4),
        inset 0 -.8px 0 rgba(120, 90, 45, .5),
        inset -.5px 0 0 rgba(130, 100, 55, .3),
        0 0 0 .4px rgba(95, 65, 25, .55),
        0 1px 0 rgba(60, 35, 12, .55),
        0 3px 5px rgba(60, 35, 15, .42),
        0 6px 10px rgba(60, 35, 15, .22);
}

/* I. Hover piesă — ridicare amplificată */
.seat-south .player-hand .tile:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow:
        inset 0 .8px 0 rgba(255, 250, 232, .9),
        inset .5px 0 0 rgba(255, 250, 235, .45),
        inset 0 -.8px 0 rgba(120, 90, 45, .5),
        inset -.5px 0 0 rgba(130, 100, 55, .3),
        0 0 0 .4px rgba(95, 65, 25, .6),
        0 4px 6px rgba(60, 35, 15, .48),
        0 10px 18px rgba(60, 35, 15, .32);
    z-index: 5;
}
.seat-south .player-hand .tile.selected {
    /* PRO: lift mic (-6px) + scale subtil (1.04) pentru a se distinge clar
       fara a incurca rearanjarea (era -16px inainte, interfera). Border gold
       3px + glow pulsant + inner highlight = vizibilitate maxima. */
    transform: translateY(-6px) scale(1.04) !important;
    border: 3px solid #ffd700 !important;
    box-shadow:
        0 0 0 2px rgba(255, 215, 0, 0.55),
        0 0 18px rgba(255, 215, 0, 0.85),
        0 8px 18px rgba(60, 35, 15, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -2px 4px rgba(255, 180, 40, 0.35) !important;
    animation: tileSelectedPulse 1.4s ease-in-out infinite;
    z-index: 8;
    position: relative;
}
.seat-south .player-hand .tile.selected::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 12px;
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    animation: tileSelectedHalo 1.4s ease-in-out infinite;
}
/* Badge numar selectie (1/2/3) — afisat doar pe meld-uri cu 2+ piese */
.seat-south .player-hand .tile.selected[data-sel-order]::after {
    content: attr(data-sel-order);
    position: absolute;
    top: -10px;
    left: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffd700 0%, #c08010 100%);
    color: #2a1810;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    text-shadow: none;
    z-index: 10;
    pointer-events: none;
    border: 1px solid rgba(80, 50, 20, 0.5);
}
@keyframes tileSelectedPulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(255, 215, 0, 0.55),
            0 0 18px rgba(255, 215, 0, 0.85),
            0 8px 18px rgba(60, 35, 15, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            inset 0 -2px 4px rgba(255, 180, 40, 0.35);
    }
    50% {
        box-shadow:
            0 0 0 3px rgba(255, 230, 80, 0.8),
            0 0 26px rgba(255, 220, 40, 1),
            0 10px 22px rgba(60, 35, 15, 0.7),
            inset 0 1px 0 rgba(255, 255, 255, 1),
            inset 0 -2px 6px rgba(255, 200, 60, 0.55);
    }
}
@keyframes tileSelectedHalo {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

/* F. Contor piese — badge circular stilizat */
.seat-south .player-info-bar .player-tiles-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: linear-gradient(180deg, #fff5dc 0%, #d4a76a 100%);
    color: #3a2412;
    font-weight: 700;
    font-size: 12px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(90, 55, 30, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.3);
    text-shadow: none;
}

/* D. Penalty în mână — afișaj puncte penalizare */
.seat-south .player-hand-penalty {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 245, 220, 0.3);
    border: 1px solid rgba(100, 60, 25, 0.3);
    font-size: 11px;
    font-weight: 600;
    color: #3a2412;
    transition: all 0.2s ease;
}
.seat-south .player-hand-penalty.penalty-low { background: rgba(120, 180, 80, 0.35); border-color: rgba(60, 110, 30, 0.5); }
.seat-south .player-hand-penalty.penalty-med { background: rgba(230, 180, 60, 0.35); border-color: rgba(140, 100, 30, 0.5); }
.seat-south .player-hand-penalty.penalty-high { background: rgba(220, 80, 50, 0.35); border-color: rgba(130, 40, 25, 0.5); color: #4a0f0a; }

/* E. Sugestie etalare (bec) — afișat doar când are combinații valide */
.seat-south .etalare-hint {
    display: none;
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(255, 215, 50, 0.85));
    animation: hintPulse 1.2s ease-in-out infinite;
    cursor: pointer;
    user-select: none;
}
.seat-south .etalare-hint.visible { display: inline-block; }

@keyframes hintPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 215, 50, 0.8)); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(255, 220, 80, 1)); }
}

/* J. Animație piesă nou trasă (slide in din dreapta) */
.seat-south .player-hand .tile.tile-just-drawn {
    animation: tileJustDrawn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes tileJustDrawn {
    0% {
        transform: translateX(120%) translateY(-18px) rotate(8deg);
        opacity: 0;
    }
    60% {
        transform: translateX(-4%) translateY(-4px) rotate(-2deg);
        opacity: 1;
    }
    100% {
        transform: translateX(0) translateY(0) rotate(0);
        opacity: 1;
    }
}

/* K. Animație sortare (FLIP-like fade + slide) */
.seat-south .player-hand.sorting .tile {
    animation: tileSortReflow 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes tileSortReflow {
    0% { opacity: 0.35; transform: scale(0.9); }
    60% { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}

/* L. Piesă OBLIGATORIU de folosit (ruptă din defaussa) — glow aurio-portocaliu pulsant */
.seat-south .player-hand .tile.tile-must-use {
    box-shadow:
        0 0 0 2px rgba(255, 170, 40, 0.85),
        0 0 14px rgba(255, 180, 60, 0.75),
        0 3px 10px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    animation: tileMustUsePulse 1.6s ease-in-out infinite;
    z-index: 3;
    position: relative;
}
.seat-south .player-hand .tile.tile-must-use::after {
    content: '!';
    position: absolute;
    top: -8px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffd866, #ff9c28);
    color: #3a1a00;
    font-size: 11px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(255, 150, 30, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    pointer-events: none;
    animation: tileMustUseBadge 1.6s ease-in-out infinite;
    z-index: 4;
}
@keyframes tileMustUsePulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(255, 170, 40, 0.85),
            0 0 12px rgba(255, 180, 60, 0.65),
            0 3px 10px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }
    50% {
        box-shadow:
            0 0 0 3px rgba(255, 190, 60, 1),
            0 0 22px rgba(255, 200, 80, 0.95),
            0 3px 14px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
}
@keyframes tileMustUseBadge {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

/* ═══ 4 ZONE ETALARE — fiecare jucator la locul lui ═══ */
/* ═══ ETALARE ZONE — tray-style with gold corner accents ═══ */
.etalare-zone {
    background:
        /* Subtle noise */
        repeating-linear-gradient(60deg,
            transparent 0, transparent 3px,
            rgba(0,0,0,0.02) 3px, rgba(0,0,0,0.02) 4px),
        /* Darker felt inset */
        linear-gradient(135deg,
            rgba(8, 50, 22, 0.55) 0%,
            rgba(5, 40, 18, 0.7) 100%);
    border: 1.5px solid rgba(255, 215, 0, 0.12);
    border-radius: 10px;
    /* 2026-04-21: padding top redus — labelul e mai subtil (8px font).
       Scroll e pe .etalare-scroll (copil intern); labelul ::before ramane fix. */
    padding: 18px 6px 6px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    /* Masa fixa — scroll e pe wrapper intern .etalare-scroll, NU pe zona */
    overflow: hidden;
    min-height: 0;
    transition: all 0.3s ease;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(255, 255, 255, 0.03);
}

/* 2026-04-21: Wrapper intern — GRUP DUPA GRUP (stacked vertical) + SCROLL VERTICAL.
   Rationale profesional (pattern ca Rummikub mobile / joci.ro Whist):
   - Fiecare meld = UN RAND (clar vizibil, usor de identificat)
   - Piesele din grup stau orizontal in interiorul grupului (grupul are display:flex row by default)
   - Grupurile stacked vertical (column) cu gap mic → compact
   - Daca grupurile depasesc inaltimea zonei → scroll vertical subtil (scrollbar auriu fin 4px)
   - Labelul ::before al .etalare-zone ramane fix in colt (wrapper-ul e non-label container) */
.etalare-scroll {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 3px;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    /* 2026-04-21 FIX DESKTOP SCROLL: min-height:0 obligatoriu pentru ca overflow-y sa
       declanseze scrollbar (default flex-item min-height e 'auto' = content size → nu scroll).
       flex:1 1 0 cu min-height:0 → wrapperul primeste spatiul disponibil al .etalare-zone
       si orice overflow activeaza scrollbarul. */
    min-height: 0;
    flex: 1 1 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 2px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.35) transparent;
}
.etalare-scroll::-webkit-scrollbar { width: 4px; height: 0; }
.etalare-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.18); border-radius: 2px; }
.etalare-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.45), rgba(184, 134, 11, 0.35));
    border-radius: 2px;
}
.etalare-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.65), rgba(184, 134, 11, 0.55));
}

/* Gold corner brackets — casino tray style */
.etalare-zone::before,
.etalare-zone::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
    transition: all 0.3s ease;
}
.etalare-zone::before {
    top: 4px;
    left: 4px;
    border-top: 2px solid rgba(255, 215, 0, 0.35);
    border-left: 2px solid rgba(255, 215, 0, 0.35);
    border-top-left-radius: 6px;
}
.etalare-zone::after {
    bottom: 4px;
    right: 4px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.35);
    border-right: 2px solid rgba(255, 215, 0, 0.35);
    border-bottom-right-radius: 6px;
}

/* Player label chip — modern badge */
.etalare-zone > .etalare-label,
.etalare-zone::marker {
    display: none;
}

/* Use data-label via a wrapper span (will be added by JS). Fallback: inject via pseudo ::before if no span exists */
/* 2026-04-21: Label subtil — minim vizual, maxim lizibil.
   Mai mic (8px), thin (500), fara uppercase, fara letter-spacing exagerat,
   ellipsis cand numele depaseste. Background si border abia vizibile. */
.etalare-zone[data-label]:not(:has(.etalare-label))::before {
    content: attr(data-label);
    position: absolute;
    top: 3px;
    left: 6px;
    width: auto;
    height: auto;
    max-width: calc(100% - 16px);
    padding: 0 5px;
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.10), rgba(184, 134, 11, 0.06));
    border: 1px solid rgba(255, 215, 0, 0.18) !important;
    font-size: 8px;
    font-weight: 500;
    line-height: 12px;
    color: rgba(255, 235, 180, 0.78);
    letter-spacing: 0.1px;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Alternating zone shading for depth */
.etalare-zone-1 { grid-area: zone1; }
.etalare-zone-2 { grid-area: zone2; }
.etalare-zone-3 { grid-area: zone3; }
.etalare-zone-4 { grid-area: zone4; }

/* Zone nefolosite (jucatori sub playerCount) — ascunse complet */
.etalare-zone.zone-unused {
    display: none !important;
}

/* ═══ LAYOUT DINAMIC dupa numarul de jucatori ═══
   Atributul [data-players="N"] e setat din JS (applyPlayerLayout) la fiecare start.
   Grid-ul se rearanjeaza ca sa foloseasca spatiul disponibil eficient. */

/* 2026-04-21 DESKTOP v3 — 4 ZONE ETALARE VERTICALE sus-pana-jos.
   Fiecare jucator primeste o coloana ingusta proprie. Sidebar pe ultima coloana (180px).
   Seat-south (hand-bot) ocupa doar coloanele zonelor, NU si sidebar-ul.
   2026-04-21 FIX CRITIC: wrap in @media (min-width: 768px) — specificitatea
   [data-players] (0,2,0) > .game-play-view mobil (0,1,0), deci fara wrap
   layout-ul desktop se aplica si pe mobil => mobilul se rupea. Acum doar desktop. */
@media (min-width: 768px) {
    /* 2026-04-21 v8: DESKTOP/LAPTOP — toata pagina se vede FARA SCROLL.
       Zone 2x2 compacte, seat-south + action-bar garantat vizibile.
       grid-rows: auto top rows + 1fr pentru zones (adaptiv) + auto hand-bot.
       Zonele NU mai sunt tuburi verticale lungi.
       FIX v8: padding-bottom .main-content redus de la 140 -> 20 cand joci activ.
       nav-rail-ul are z-index ridicat si poate overlay-ui un 20px fara probleme.
       Recuperez 120px spatiu pt zone etalare. */

    /* CRITICAL: game-area, wrapper, play-view constraints ca sa FIT viewport */
    .game-area {
        max-height: 100vh !important;
        height: 100%;
        overflow: hidden !important;
    }
    .game-table-wrapper {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: 100%;
        overflow: hidden !important;
    }
    .game-play-view {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: 100%;
    }
    .action-bar.action-bar-v2 {
        flex-shrink: 0 !important;
        max-height: 70px;
    }

    /* FIX v9 CRITIC: nav-rail e fixed bottom cu h=93px. Daca padding-bottom
       e mai mic, nav-rail OVERLAY-uieste action-bar-ul cu butoanele
       (TRAGE/ETALEAZA/LIPI/X) — user nu le vede. Fix: padding exact 93px
       ca action-bar sa se termine fix unde incepe nav-rail.
       Header sus 48px + content 502px + nav 93px = 643px viewport fit. */
    body.game-active .main-content,
    body.mp-game-active .main-content {
        padding-bottom: 93px !important;
    }

    /* FIX v10 SIZE-UP: game-play-view avea width natural ~683px + margin auto
       (centrat in game-table-wrapper 1184px). Zonele erau MICI.
       Fix: width 100% pe game-play-view cand joc activ — umple TOT
       containerul disponibil (stanga/dreapta pentru reclame raman la nivel
       de app-container 1200px, NU afectate). */
    body.game-active .game-play-view,
    body.mp-game-active .game-play-view {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* FIX v18 DESKTOP LAYOUT — FINAL testat in browser:
       - Opponentii: 180×75 cu NUME COMPLET (max-width 130, nu mai e trunchiat la "s...")
       - Info 2 randuri wrap (avatar+nume sus, timer+pct+tiles jos) = 36px total
       - Hand oponenti 26px (spate piese vizibile)
       - Sidebar: 253px (toate sectiunile piles+discard+log vizibile)
       - Hand-bot: 168px (hand-scroll 125 + info-bar 40 + margins 3)
       - Info-bar: 40px cu toate 5 butoane + 5 module
       Nume vizibile complet: sbot_laura14, sbot_dan11, sbot_simona16. */

    /* PlayView: padding redus ca sa facem loc la grid content */
    body.game-active .game-play-view,
    body.mp-game-active .game-play-view {
        padding: 6px !important;
    }

    /* seat-north devine transparent la grid — opponentii devin direct grid-children */
    body.game-active .seat-north,
    body.mp-game-active .seat-north {
        display: contents !important;
    }

    /* Opponent seats mapped to stacked grid areas (opp1/opp2/opp3) */
    body.game-active .opponent-area[data-seat="north"],
    body.mp-game-active .opponent-area[data-seat="north"] {
        grid-area: opp1 !important;
    }
    body.game-active .opponent-area[data-seat="east"],
    body.mp-game-active .opponent-area[data-seat="east"] {
        grid-area: opp2 !important;
    }
    body.game-active .opponent-area[data-seat="west"],
    body.mp-game-active .opponent-area[data-seat="west"] {
        grid-area: opp3 !important;
    }

    /* Opponent card: 180×75, info wrap 2 randuri, NUMELE COMPLET vizibil.
       Specificitate (0,3,1) bate rule-ul @media cu min-height 86 din baza. */
    body.game-active .game-play-view .opponent-area,
    body.mp-game-active .game-play-view .opponent-area {
        width: 100% !important;
        max-width: 180px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        min-height: 0 !important;
        max-height: 75px !important;
        height: 75px !important;
        padding: 4px 6px !important;
        gap: 3px !important;
        overflow: hidden !important;
    }
    body.game-active .game-play-view .opponent-area .opponent-info,
    body.mp-game-active .game-play-view .opponent-area .opponent-info {
        font-size: 10px !important;
        row-gap: 1px !important;
        column-gap: 4px !important;
        padding: 0 !important;
        max-height: 36px !important;
        flex-wrap: wrap !important;
        overflow: hidden !important;
        align-items: center !important;
        align-content: flex-start !important;
    }
    body.game-active .game-play-view .opponent-area .opponent-hand,
    body.mp-game-active .game-play-view .opponent-area .opponent-hand {
        max-height: 26px !important;
        min-height: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(255,215,0,0.3) transparent !important;
    }
    body.game-active .game-play-view .opponent-area .opponent-hand::-webkit-scrollbar,
    body.mp-game-active .game-play-view .opponent-area .opponent-hand::-webkit-scrollbar {
        height: 3px !important;
        display: block !important;
    }
    body.game-active .game-play-view .opponent-area .opponent-hand::-webkit-scrollbar-thumb,
    body.mp-game-active .game-play-view .opponent-area .opponent-hand::-webkit-scrollbar-thumb {
        background: rgba(255,215,0,0.3) !important;
        border-radius: 2px !important;
    }
    /* Nume opponent — COMPLET vizibil (max 130 > avg bot name 12 chars × 8px = 96). */
    body.game-active .game-play-view .opponent-area .opponent-name,
    body.mp-game-active .game-play-view .opponent-area .opponent-name {
        font-size: 11px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 130px !important;
    }
    body.game-active .game-play-view .opponent-area .seat-avatar,
    body.mp-game-active .game-play-view .opponent-area .seat-avatar {
        width: 20px !important;
        height: 20px !important;
    }

    /* v19 — ETALARE VERTICALA: 4 zone side-by-side (1fr x 4), fiecare tall column.
       Dubleaza spatiul vertical per zona (de la ~150px la ~300px).
       Oponentii + sidebar raman pe coloana 5 (180px fix). */

    /* 2 jucatori: 4 zone etalare verticale + 1 oponent + sidebar + hand-bot. */
    .game-play-view[data-players="2"] {
        grid-template-areas:
            "zone1 zone2 zone3 zone4 opp1"
            "zone1 zone2 zone3 zone4 sidebar"
            "zone1 zone2 zone3 zone4 sidebar"
            "zone1 zone2 zone3 zone4 sidebar"
            "hand-bot hand-bot hand-bot hand-bot sidebar" !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 180px !important;
        grid-template-rows: 75px 1fr 1fr 1fr 168px !important;
        row-gap: 5px !important;
    }

    /* 3 jucatori: 4 zone etalare verticale + 2 oponenti + sidebar + hand-bot. */
    .game-play-view[data-players="3"] {
        grid-template-areas:
            "zone1 zone2 zone3 zone4 opp1"
            "zone1 zone2 zone3 zone4 opp2"
            "zone1 zone2 zone3 zone4 sidebar"
            "zone1 zone2 zone3 zone4 sidebar"
            "hand-bot hand-bot hand-bot hand-bot sidebar" !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 180px !important;
        grid-template-rows: 75px 75px 1fr 1fr 168px !important;
        row-gap: 5px !important;
    }

    /* 4 jucatori: 4 zone etalare verticale + 3 oponenti + sidebar + hand-bot. */
    .game-play-view[data-players="4"] {
        grid-template-areas:
            "zone1 zone2 zone3 zone4 opp1"
            "zone1 zone2 zone3 zone4 opp2"
            "zone1 zone2 zone3 zone4 opp3"
            "zone1 zone2 zone3 zone4 sidebar"
            "hand-bot hand-bot hand-bot hand-bot sidebar" !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 180px !important;
        grid-template-rows: 75px 75px 75px 80px 168px !important;
        row-gap: 5px !important;
    }

    /* Seat-south: ZERO scroll — content (hand + info-bar) fit natural in 168. */
    body.game-active .seat-south,
    body.mp-game-active .seat-south {
        overflow: visible !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /* Sidebar: overflow-y:auto → piles+discard+log accesibile prin scroll auriu 4px. */
    body.game-active .whist-sidebar,
    body.mp-game-active .whist-sidebar,
    body.game-active .game-sidebar,
    body.mp-game-active .game-sidebar {
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 6px !important;
        gap: 6px !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(255,215,0,0.4) transparent !important;
    }
    body.game-active .whist-sidebar::-webkit-scrollbar,
    body.mp-game-active .whist-sidebar::-webkit-scrollbar,
    body.game-active .game-sidebar::-webkit-scrollbar,
    body.mp-game-active .game-sidebar::-webkit-scrollbar {
        width: 4px !important;
    }
    body.game-active .whist-sidebar::-webkit-scrollbar-thumb,
    body.mp-game-active .whist-sidebar::-webkit-scrollbar-thumb,
    body.game-active .game-sidebar::-webkit-scrollbar-thumb,
    body.mp-game-active .game-sidebar::-webkit-scrollbar-thumb {
        background: rgba(255,215,0,0.4) !important;
        border-radius: 2px !important;
    }

    /* Info-bar: 1 rand, NOWRAP, NO SCROLL, 40px total — selector cu specificitate
       extra (merged-actions + body prefix) ca sa bata rule-urile de la ~18953 + 19099. */
    body.game-active .seat-south .player-info-bar,
    body.mp-game-active .seat-south .player-info-bar,
    body.game-active .seat-south .player-info-bar.merged-actions,
    body.mp-game-active .seat-south .player-info-bar.merged-actions {
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        max-height: 40px !important;
        min-height: 0 !important;
        height: 40px !important;
        margin: 0 !important;
        align-items: center !important;
        gap: 3px !important;
        padding: 3px 6px !important;
    }
    body.game-active .seat-south .player-info-bar > *,
    body.mp-game-active .seat-south .player-info-bar > *,
    body.game-active .seat-south .player-info-bar.merged-actions > *,
    body.mp-game-active .seat-south .player-info-bar.merged-actions > * {
        flex: 0 0 auto !important;
    }
    /* Modules compacte — MICI ca sa incapa tot (v20.1). */
    body.game-active .seat-south .player-info-bar .player-module,
    body.mp-game-active .seat-south .player-info-bar .player-module {
        padding: 1px 3px !important;
        font-size: 9px !important;
        gap: 2px !important;
        max-height: 30px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* v20.2 — Reguli UNIFICATE (migrate din Block B @19174 pentru a preveni conflictele).
       Acopera: avatar/nume/tiles-count/hand-penalty/etalare-hint pe info-bar 40px. */
    body.game-active .seat-south .player-info-bar.merged-actions .seat-avatar,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .seat-avatar {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        flex: 0 0 auto !important;
    }
    body.game-active .seat-south .player-info-bar.merged-actions .player-name-label,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .player-name-label,
    body.game-active .seat-south .player-info-bar.merged-actions .player-name,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .player-name {
        font-size: 10px !important;
        font-weight: 700 !important;
        max-width: 90px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
    body.game-active .seat-south .player-info-bar.merged-actions .player-timer,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .player-timer {
        flex: 0 0 auto !important;
        font-size: 10px !important;
        padding: 1px 4px !important;
    }
    body.game-active .seat-south .player-info-bar.merged-actions .player-points,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .player-points {
        font-size: 10px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    body.game-active .seat-south .player-info-bar.merged-actions .player-tiles-count,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .player-tiles-count {
        min-width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
        padding: 1px 4px !important;
        flex: 0 0 auto !important;
    }
    body.game-active .seat-south .player-info-bar.merged-actions .player-hand-penalty,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .player-hand-penalty {
        font-size: 10px !important;
        padding: 1px 4px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    body.game-active .seat-south .player-info-bar.merged-actions .etalare-hint,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .etalare-hint {
        font-size: 14px !important;
        flex: 0 0 auto !important;
    }
    /* Sort buttons (palette, sort, layers in player-module-sort) — COMPACT + GRUP UNIT */
    body.game-active .seat-south .player-info-bar .sort-buttons,
    body.mp-game-active .seat-south .player-info-bar .sort-buttons {
        gap: 0 !important;
        display: flex !important;
    }
    body.game-active .seat-south .player-info-bar .sort-buttons .sort-btn,
    body.mp-game-active .seat-south .player-info-bar .sort-buttons .sort-btn {
        min-width: 0 !important;
        width: 26px !important;
        height: 26px !important;
        padding: 1px 2px !important;
        font-size: 9px !important;
        border-radius: 0 !important;
        border-left: 1px solid rgba(0, 0, 0, 0.3) !important;
    }
    /* Primul sort-btn — rounded stanga, fara border-left (NU setam box-shadow ca sa nu stricam :hover/:focus/:active) */
    body.game-active .seat-south .player-info-bar .sort-buttons .sort-btn:first-child,
    body.mp-game-active .seat-south .player-info-bar .sort-buttons .sort-btn:first-child {
        border-top-left-radius: 6px !important;
        border-bottom-left-radius: 6px !important;
        border-left: none !important;
    }
    /* Ultimul sort-btn — rounded dreapta (NU setam box-shadow ca sa nu stricam :hover/:focus/:active) */
    body.game-active .seat-south .player-info-bar .sort-buttons .sort-btn:last-child,
    body.mp-game-active .seat-south .player-info-bar .sort-buttons .sort-btn:last-child {
        border-top-right-radius: 6px !important;
        border-bottom-right-radius: 6px !important;
    }
    body.game-active .seat-south .player-info-bar .sort-buttons .sort-btn .material-symbols-rounded,
    body.mp-game-active .seat-south .player-info-bar .sort-buttons .sort-btn .material-symbols-rounded {
        font-size: 14px !important;
    }
    /* Action buttons (download=TRAGE, layers=ETALEAZĂ, add_box=LIPI, upload, star)
       Specificity war: rule-ul de la ~19099 .seat-south .player-info-bar.merged-actions
       .action-in-infobar (0,4,0) forteaza min-width 90 + height 44 + flex 1 1 0.
       Scriu cu body prefix + .merged-actions → (0,5,1) ca sa bat (0,5,0) primary. */
    body.game-active .seat-south .player-info-bar.merged-actions .action-in-infobar,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .action-in-infobar {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 28px !important;
        max-height: 28px !important;
        padding: 3px 6px !important;
        font-size: 10px !important;
        gap: 3px !important;
        white-space: nowrap !important;
    }
    body.game-active .seat-south .player-info-bar.merged-actions .action-in-infobar.btn-primary-action,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .action-in-infobar.btn-primary-action {
        flex: 0 0 auto !important;
    }
    body.game-active .seat-south .player-info-bar.merged-actions .action-in-infobar .material-symbols-rounded,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .action-in-infobar .material-symbols-rounded {
        font-size: 13px !important;
    }
    /* Hide keyboard shortcut hints (E/T/R) — redundante pe desktop, face loc */
    body.game-active .seat-south .player-info-bar.merged-actions .chip-shortcut,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .chip-shortcut {
        display: none !important;
    }

    /* ═══ v20 — GRUPARE BUTOANE ACTIUNE SEAT-SOUTH ═══
       User: "grupeaza toate butoanele user sud"
       Structura info-bar: [identity][timer][stats][hints][sort] | [Trage][Etaleaza][Lipi][Arunca][Atu]
       Efect: butoanele de actiune formeaza un TOOLBAR UNITAR — lipite intre ele (gap 0),
       aliniate la dreapta (margin-left:auto pe primul), frame auriu comun (inset box-shadow)
       si colturile exterioare rotunjite doar pe primul (stanga) + ultimul (dreapta).
       Separare clara fata de modulele info (care raman in stanga cu gap 3px intre ele). */

    /* PRIMUL buton de actiune (dupa un player-module) — push grupul la dreapta,
       corners rounded stanga, margin zero dreapta catre urmatorul buton. */
    body.game-active .seat-south .player-info-bar .player-module + .action-in-infobar,
    body.mp-game-active .seat-south .player-info-bar .player-module + .action-in-infobar,
    body.game-active .seat-south .player-info-bar.merged-actions .player-module + .action-in-infobar,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .player-module + .action-in-infobar {
        margin-left: auto !important;
        margin-right: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
    }

    /* Butoane actiune CONSECUTIVE — lipite (gap 0 via negative margin), fara corners rotunjite. */
    body.game-active .seat-south .player-info-bar .action-in-infobar + .action-in-infobar,
    body.mp-game-active .seat-south .player-info-bar .action-in-infobar + .action-in-infobar,
    body.game-active .seat-south .player-info-bar.merged-actions .action-in-infobar + .action-in-infobar,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .action-in-infobar + .action-in-infobar {
        margin-left: -3px !important; /* anuleaza gap 3px din flex parent */
        border-radius: 0 !important;
        border-left: 1px solid rgba(0, 0, 0, 0.35) !important; /* divider dark intre butoane */
    }

    /* ULTIMUL buton actiune — corners rotunjite dreapta. */
    body.game-active .seat-south .player-info-bar .action-in-infobar:last-child,
    body.mp-game-active .seat-south .player-info-bar .action-in-infobar:last-child,
    body.game-active .seat-south .player-info-bar.merged-actions .action-in-infobar:last-child,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .action-in-infobar:last-child {
        border-top-right-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
    }

    /* ZERO box-shadow !important pe butoane — ca sa nu blocheze :hover/:focus/:active
       care au propriile box-shadow in whist-pro.css linii 7317-7330, 19875, 19953, 20119.
       Gruparea vizuala se face DOAR prin border-radius + margin negative + border-left. */

    /* ═══ v20.3 (2026-04-22) — IMMERSIVE MODE OVERRIDE DESKTOP ═══
       User: "focus buton nu face acelasi lucru cum face in lobby si in masa de joc —
       el trebuie sa hide header si footer si sa mareasca".
       Root cause: regulile Block A (body.game-active .main-content { padding-bottom: 93px })
       au specificitate (0,2,0) egala cu regulile immersive de la linia 1554 dar sunt
       mai jos in fisier, deci castiga source-order. Rezultat: nav-rail si top-bar
       sunt ascunse dar .main-content ramane cu padding-bottom 93px si game-area
       nu se expandeaza in spatiul eliberat.
       Fix: overrides cu specificitate (0,3,0) via body.immersive-mode.game-active */
    body.immersive-mode.game-active .main-content,
    body.immersive-mode.mp-game-active .main-content {
        padding: 0 !important;
        padding-bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }
    body.immersive-mode.game-active .app-container,
    body.immersive-mode.mp-game-active .app-container {
        padding: 0 !important;
    }
    body.immersive-mode.game-active .game-play-view,
    body.immersive-mode.mp-game-active .game-play-view {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    body.immersive-mode.game-active .game-canvas,
    body.immersive-mode.mp-game-active .game-canvas {
        padding: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }
    body.immersive-mode.game-active .game-area,
    body.immersive-mode.mp-game-active .game-area {
        max-height: 100dvh !important;
        height: 100% !important;
    }
    body.immersive-mode.game-active .game-table-wrapper,
    body.immersive-mode.mp-game-active .game-table-wrapper {
        max-height: 100dvh !important;
        height: 100% !important;
    }

    /* v20.3b — GRID EXPAND pe 4P (user-request: "cand joc nu mareste").
       Root: la 4P grid-template-rows e 75+75+75+80+168=473px (FIX). Cand user joaca
       (not spectator), action-bar-v2 ramane vizibila cu ~20-40px padding empty,
       game-play-view ia ~940px, grid e 493px, rezulta ~450px zona verde goala jos.
       Fix A: row 4 → 1fr (zone4 + sidebar bottom expandeaza). 2P/3P aveau deja 1fr.
       Fix B: action-bar-v2 hidden in immersive (nu e nevoie — butoanele sunt in info-bar
       via _whistActionMerge.apply → action-bar-merged pe orice width). */
    body.immersive-mode.game-active .game-play-view[data-players="2"],
    body.mp-game-active.immersive-mode .game-play-view[data-players="2"] {
        grid-template-rows: 75px 1fr 1fr 1fr 168px !important;
    }
    body.immersive-mode.game-active .game-play-view[data-players="3"],
    body.mp-game-active.immersive-mode .game-play-view[data-players="3"] {
        grid-template-rows: 75px 75px 1fr 1fr 168px !important;
    }
    body.immersive-mode.game-active .game-play-view[data-players="4"],
    body.mp-game-active.immersive-mode .game-play-view[data-players="4"] {
        grid-template-rows: 75px 75px 75px 1fr 168px !important;
    }

    /* Hide action-bar-v2 in immersive — butoanele TRAGE/ETALEAZA/LIPESTE/ARUNCA/ATU
       sunt deja migrate in player-info-bar via _whistActionMerge. Action-bar empty
       cu padding gol ocupa 20-40px extra. Ascundem ca sa nu stricam grid height. */
    body.immersive-mode.game-active .action-bar.action-bar-v2.action-bar-merged,
    body.mp-game-active.immersive-mode .action-bar.action-bar-v2.action-bar-merged,
    body.immersive-mode.game-active .action-bar.action-bar-merged,
    body.mp-game-active.immersive-mode .action-bar.action-bar-merged {
        display: none !important;
    }
}

.etalare-zone:hover {
    border-color: rgba(255, 215, 0, 0.25);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.4),
        inset 0 0 24px rgba(255, 215, 0, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.05);
}
.etalare-zone:hover::before,
.etalare-zone:hover::after {
    border-color: rgba(255, 215, 0, 0.55);
}

/* Active turn — glowing gold border */
.etalare-zone.zone-active {
    border-color: rgba(255, 215, 0, 0.45);
    box-shadow:
        inset 0 0 20px rgba(255, 215, 0, 0.12),
        inset 0 1px 3px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 215, 0, 0.15);
    animation: zoneActivePulse 2.2s ease-in-out infinite;
}
.etalare-zone.zone-active::before,
.etalare-zone.zone-active::after {
    border-color: rgba(255, 215, 0, 0.8) !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

@keyframes zoneActivePulse {
    0%, 100% {
        box-shadow:
            inset 0 0 20px rgba(255, 215, 0, 0.1),
            inset 0 1px 3px rgba(0, 0, 0, 0.3),
            0 0 15px rgba(255, 215, 0, 0.1);
    }
    50% {
        box-shadow:
            inset 0 0 28px rgba(255, 215, 0, 0.18),
            inset 0 1px 3px rgba(0, 0, 0, 0.3),
            0 0 25px rgba(255, 215, 0, 0.25);
    }
}

/* ═══ ZONE-ACTIVE-MINE — flash STRONG cand e RANDUL MEU sa joc ═══
   Distinct de zone-active (pulse subtil aplicat la TOT randul curent).
   Aplicat doar pe zona MEA (south/myIndex), atrage atentia ca e tura mea. */
.etalare-zone.zone-active-mine {
    border-color: #ffd700 !important;
    border-width: 2px !important;
    animation: zoneActiveMineFlash 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
    z-index: 3;
}
.etalare-zone.zone-active-mine::before,
.etalare-zone.zone-active-mine::after {
    border-color: #fff8e0 !important;
    border-width: 3px !important;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.95) !important;
    animation: zoneCornersFlash 1.4s ease-in-out infinite !important;
}
@keyframes zoneActiveMineFlash {
    0%, 100% {
        box-shadow:
            inset 0 0 24px rgba(255, 215, 0, 0.25),
            inset 0 1px 3px rgba(0, 0, 0, 0.3),
            0 0 18px rgba(255, 215, 0, 0.55),
            0 0 0 0 rgba(255, 215, 0, 0.4);
        background:
            repeating-linear-gradient(60deg,
                transparent 0, transparent 3px,
                rgba(0,0,0,0.02) 3px, rgba(0,0,0,0.02) 4px),
            linear-gradient(135deg,
                rgba(20, 80, 35, 0.65) 0%,
                rgba(15, 65, 28, 0.78) 100%);
    }
    50% {
        box-shadow:
            inset 0 0 36px rgba(255, 215, 0, 0.42),
            inset 0 1px 3px rgba(0, 0, 0, 0.3),
            0 0 36px rgba(255, 215, 0, 0.85),
            0 0 0 6px rgba(255, 215, 0, 0);
        background:
            repeating-linear-gradient(60deg,
                transparent 0, transparent 3px,
                rgba(255, 215, 0, 0.04) 3px, rgba(255, 215, 0, 0.04) 4px),
            linear-gradient(135deg,
                rgba(40, 100, 50, 0.75) 0%,
                rgba(30, 85, 40, 0.85) 100%);
    }
}
@keyframes zoneCornersFlash {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

/* Label-ul zonei MELE proeminent cand e randul meu */
.etalare-zone.zone-active-mine[data-label]::before,
.etalare-zone.zone-active-mine > .etalare-label {
    color: #fff8e0 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.9), 0 1px 2px rgba(0,0,0,0.6) !important;
    background: linear-gradient(135deg, rgba(255,215,0,0.25), rgba(255,180,40,0.15)) !important;
    border-color: #ffd700 !important;
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
    .etalare-zone.zone-active-mine,
    .etalare-zone.zone-active-mine::before,
    .etalare-zone.zone-active-mine::after {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   MY-TURN-FLASH — flash sincronizat pe TIMER + BUTOANE + SEAT-SOUTH
   cand e randul user-ului. Aplicat pe body pentru reach global.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. TIMER (donut) flash auriu pulsant cand e tura mea */
body.my-turn-flash .seat-south .player-timer,
body.my-turn-flash .seat-south .timer-donut {
    animation: timerMyTurn 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
    border-color: #ffd700 !important;
}
@keyframes timerMyTurn {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(255, 215, 0, 0.7),
            0 0 8px rgba(255, 215, 0, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 0 8px rgba(255, 215, 0, 0),
            0 0 18px rgba(255, 215, 0, 0.85);
        transform: scale(1.04);
    }
}

/* 2. ACTION BAR — fundal flash subtil pe intregul container actiuni */
body.my-turn-flash .action-bar.action-bar-v2 {
    animation: actionBarMyTurn 1.6s ease-in-out infinite;
    border-radius: 8px;
}
@keyframes actionBarMyTurn {
    0%, 100% { background: transparent; }
    50%      { background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.06), transparent 70%); }
}

/* 3. SEAT-SOUTH — accent BAR auriu fin (jos pe ramă), nu ring imens
   Inlocuieste vechiul ring care acoperea toata tabla — acum doar o bara
   subtila luminoasa pe muchia de sus a ramei seat-ului. Plus o "săgeată"
   triunghi mic pe muchia stanga ca indicator subtle al rândului. */
body.my-turn-flash .seat-south {
    position: relative;
}
body.my-turn-flash .seat-south::after {
    content: '';
    position: absolute;
    top: -1px; left: 8%; right: 8%;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 215, 0, 0.85) 25%,
        rgba(255, 235, 150, 1) 50%,
        rgba(255, 215, 0, 0.85) 75%,
        transparent 100%);
    box-shadow:
        0 0 10px rgba(255, 215, 0, 0.7),
        0 0 18px rgba(255, 200, 60, 0.5);
    animation: seatSouthMyTurnBar 1.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
}
@keyframes seatSouthMyTurnBar {
    0%, 100% { opacity: 0.65; transform: scaleX(1); }
    50%      { opacity: 1;    transform: scaleX(1.05); }
}

/* 4. PLAYER-INFO-BAR (banda jos cu avatar+nume+pct+piese) — luminat auriu */
body.my-turn-flash .seat-south .player-info-bar {
    background:
        linear-gradient(180deg,
            rgba(255, 245, 200, 0.6),
            rgba(255, 215, 100, 0.4)) !important;
    border-top-color: rgba(255, 215, 0, 0.6) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 240, 0.7),
        inset 0 -1px 0 rgba(180, 140, 40, 0.4),
        0 0 12px rgba(255, 215, 0, 0.25) !important;
    animation: infoBarMyTurn 2s ease-in-out infinite;
}
@keyframes infoBarMyTurn {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.1); }
}

/* 5. Reduce-motion */
@media (prefers-reduced-motion: reduce) {
    body.my-turn-flash .seat-south .player-timer,
    body.my-turn-flash .seat-south .timer-donut,
    body.my-turn-flash .action-bar.action-bar-v2,
    body.my-turn-flash .seat-south::after,
    body.my-turn-flash .seat-south .player-info-bar {
        animation: none !important;
    }
}

/* Has melds — hide bottom-right corner bracket cand sunt melduri efective.
   2026-04-21: check-ul vechi `:not(:empty)` nu mai merge pt. ca zona contine
   acum wrapper .etalare-scroll permanent. Folosesc :has() pe .table-meld-group. */
.etalare-zone:has(.table-meld-group)::after {
    content: none;
}

.etalare-zone .meld-owner-tag,
.etalare-zone .meld-type-label {
    display: none;
}

/* Meld groups inside zones — GRUP DUPA GRUP (un rand fiecare) */
/* 2026-04-21: grupurile stacked vertical in .etalare-scroll (flex-direction:column).
   Fiecare grup = un rand, piesele intr-un grup stau orizontal.
   align-self:flex-start — grupul NU se stretch pe toata latimea (are latime naturala).
   max-width:100% — daca grupul are multe piese, nu depaseste zona (protectie). */
.etalare-zone .table-meld-group {
    padding: 2px 3px;
    gap: 1px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
    align-self: flex-start;
    max-width: 100%;
    width: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    /* 2026-04-21 FIX OVERFLOW: meld cu multe piese (runs A-K, 8-13 tiles) NU incap
       in zona inguste (~230px). Activ scroll orizontal + scrollbar VIZIBIL subtle
       auriu + fade mask la margine dreapta (hint vizual ca exista overflow).
       Touch: swipe orizontal pan-x enabled pe touch devices. */
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.45) rgba(0, 0, 0, 0.18);
    -webkit-overflow-scrolling: touch;
    /* Fade mask la margine dreapta — estompeaza piesa de pe margine ca hint
       ca exista mai mult content. Mask-ul e inactiv cand nu exista overflow
       (piesa finala e in zona completa). */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 10px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 10px), transparent 100%);
}
.etalare-zone .table-meld-group::-webkit-scrollbar { height: 3px; }
.etalare-zone .table-meld-group::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 2px;
}
.etalare-zone .table-meld-group::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg,
        rgba(255, 215, 0, 0.55) 0%,
        rgba(184, 134, 11, 0.4) 100%);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 245, 200, 0.25);
}
.etalare-zone .table-meld-group::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg,
        rgba(255, 235, 150, 0.85) 0%,
        rgba(255, 215, 0, 0.9) 100%);
}

/* 2026-04-21: Piesele din ZONELE DE ETALARE sunt mai mici (doar de vazut,
   nu de jucat — mana jucatorului ramane la dimensiune full).
   Pattern de la whist pro mobil: tiles 26×36 in etalare vs 44×60 in mana. */
.etalare-zone .tile {
    width: 26px !important;
    height: 36px !important;
    min-width: 26px !important;
    min-height: 36px !important;
    font-size: 13px !important;
    border-radius: 3px;
}
.etalare-zone .tile .joker-svg {
    width: 18px !important;
    height: auto !important;
}

/* Zone scrollbar — invisible (touch-friendly scroll) */
.etalare-zone::-webkit-scrollbar { width: 0; height: 0; display: none; }
.etalare-zone::-webkit-scrollbar-track { background: transparent; }
.etalare-zone::-webkit-scrollbar-thumb { background: transparent; }

/* ═══ SIDEBAR dreapta — pile + activity ═══ */
/* ═══ SIDEBAR — premium casino panel ═══ */
.whist-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background:
        /* Subtle noise */
        repeating-linear-gradient(120deg,
            transparent 0, transparent 3px,
            rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 4px),
        /* Panel gradient */
        linear-gradient(135deg,
            rgba(8, 30, 15, 0.75) 0%,
            rgba(3, 18, 8, 0.85) 100%);
    border: 1px solid rgba(255, 215, 0, 0.12);
    border-radius: 10px;
    padding: 6px 5px;
    overflow: hidden;
    min-height: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 20px rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* Gold top accent line */
.whist-sidebar::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 215, 0, 0.4) 50%,
        transparent);
}

.whist-sidebar .pile-area {
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 8px 4px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60px;
}
.whist-sidebar .pile-label {
    font-size: 8px;
    margin-top: 4px;
}
.whist-sidebar .draw-pile {
    flex: 1 1 auto;
    max-width: 100%;
}
.whist-sidebar .discard-pile {
    transform: scale(0.65);
    transform-origin: center;
    margin: -10px -5px;
}
.whist-sidebar .atu-display {
    transform: scale(0.7);
    transform-origin: center;
    margin: -8px -2px;
}
/* Nota: .activity-log e definit la sectiunea ACTIVITY LOG framed (linia ~4500) */

/* ═══ OPPONENT AREAS — premium card with avatar + glow ═══ */
/* 2026-04-21 DESKTOP: opponents STIVUITI VERTICAL in coloana 180px.
   Box = 100% width (umple coloana), flex grow ca fiecare slot sa-si ia parte egala din
   spatiu vertical. Tilurile scrolleaza orizontal cand depasesc latimea.
   Mobile portrait/landscape override cu !important la flex:1 1 0 + width auto in @media. */
.opponent-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 7px 10px 8px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 0;
    min-height: 0;
    box-sizing: border-box;
    background:
        linear-gradient(135deg,
            rgba(20, 45, 25, 0.55) 0%,
            rgba(10, 30, 15, 0.7) 100%);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Corner accent — subtle gold highlight */
.opponent-area::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 10%,
        rgba(255, 215, 0, 0.3) 50%,
        transparent 90%);
    border-radius: 12px 12px 0 0;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.opponent-area.active-turn {
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, 0.25),
        0 0 20px rgba(255, 215, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 235, 150, 0.15);
    animation: active-turn-glow 2s ease-in-out infinite;
    background:
        linear-gradient(135deg,
            rgba(30, 60, 35, 0.7) 0%,
            rgba(20, 45, 25, 0.8) 100%);
    transform: translateY(-1px);
}

.opponent-area.active-turn::before {
    opacity: 1;
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(255, 215, 0, 0.8) 50%,
        transparent 95%);
}

.opponent-info {
    display: flex;
    align-items: center;
    gap: 4px;                  /* gap redus — mai compact */
    font-size: 11px;           /* font mai mic per CERUT USER */
    width: 100%;
    font-weight: 600;
    flex-wrap: nowrap;
    min-width: 0;
    color: rgba(255, 245, 200, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Opponent avatar — circular badge with gradient */
.opponent-info .opponent-avatar,
.opponent-area .opponent-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        var(--color-accent, #ffd700) 0%,
        rgba(184, 134, 11, 0.8) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #1a1a1a;
    border: 2px solid rgba(255, 235, 150, 0.4);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.opponent-area.active-turn .opponent-avatar {
    transform: scale(1.08);
    border-color: rgba(255, 215, 0, 0.9);
    box-shadow:
        0 0 12px rgba(255, 215, 0, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: avatarPulse 1.8s ease-in-out infinite;
}

@keyframes avatarPulse {
    0%, 100% { transform: scale(1.08); }
    50% { transform: scale(1.14); }
}

/* Opponent card count pill */
.opponent-area .tile-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 3;
}

.opponent-name {
    font-weight: 600;
    color: var(--whist-text);
    flex: 0 1 auto;            /* permite shrink pt. timer/puncte */
    min-width: 0;
    max-width: 56px;           /* ~6-7 caractere, incape mai mult timer+puncte */
    overflow: hidden;
    text-overflow: ellipsis;   /* ellipsis clar in loc de scroll confuz */
    white-space: nowrap;
    font-size: 10px;           /* CERUT USER: font mai mic pt. opponent name */
    letter-spacing: -0.1px;
}
.opponent-name:hover {
    max-width: 160px;          /* la hover expand pt. a vedea numele complet */
    transition: max-width 0.3s ease;
}
.opponent-name::-webkit-scrollbar { display: none; }

/* Mini avatar langa nume (orice seat) */
.seat-avatar {
    width: 18px;               /* putin mai mic ca sa incap mai mult in info-bar */
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 215, 0, 0.45);
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.seat-avatar[hidden] { display: none; }

.opponent-tiles-count {
    background: #c0392b;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}

.opponent-points, .player-points {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    font-size: 10px;           /* font mai mic */
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    flex-shrink: 0;            /* nu se shrink ca sa nu se taie numarul */
    border: 1px solid rgba(255, 215, 0, 0.25);
    white-space: nowrap;
}

.opponent-status {
    font-size: 10px;
    color: var(--whist-success);
}

.opponent-hand {
    display: flex;
    gap: 2px;
    justify-content: flex-start;
    flex-wrap: nowrap;          /* tilurile NU wrap pe mai multe randuri */
    overflow-x: auto;           /* scroll orizontal daca depasesc latimea */
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    min-height: 28px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;    /* momentum scroll pe iOS */
}
.opponent-hand::-webkit-scrollbar { display: none; }

/* ═══ OPPONENT TILE BACK — ivory plain (Whist românesc real) ═══ */
/* Piesele reale de Whist sunt plastic ivory uniform, fără logo, fără emblem. */
.opponent-tile-back {
    width: 22px;
    height: 32px;
    border-radius: 3px;
    position: relative;
    /* Ivory warm — integrat cu rackul, gradient 3-stop */
    background: linear-gradient(172deg, #ead7a8 0%, #dcc58a 55%, #c8ad6a 100%);
    /* Bevel CRISP la dimensiuni mici — full-pixel, nu sub-pixel */
    border: 1px solid #5a3a14;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 210, .85),
        inset 1px 0 0 rgba(255, 240, 200, .45),
        inset 0 -1px 0 rgba(70, 45, 15, .65),
        inset -1px 0 0 rgba(100, 70, 30, .45),
        0 1px 0 rgba(40, 22, 8, .65),
        0 2px 3px rgba(0, 0, 0, .5),
        0 4px 7px rgba(0, 0, 0, .28);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* Highlight convex difuz — plastic mat, mai discret */
.opponent-tile-back::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 55% at 38% 25%,
        rgba(255, 240, 200, .32) 0%,
        transparent 60%);
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}

/* Fără ::after — piesele reale nu au logo/emblem pe spate */
.opponent-tile-back::after { display: none; }

/* ================================================================================================
   SEAT SPEECH BUBBLES
================================================================================================ */
.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);
    animation: seatBubbleIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 150;
}

.seat-bubble::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.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; }

.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);
}

.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);
}

.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);
}

.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);
}

.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);
}

.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; }

.seat-bubble.seat-bubble-out {
    animation: seatBubbleOut 0.35s ease-in forwards;
}

/* ── Table Center (hidden — replaced by 4 zones + sidebar) ── */
.table-center {
    display: none;
}
.table-main-row {
    display: none;
}

/* Zone labels */
.table-zone-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 215, 0, 0.7);
    padding: 3px 8px 1px;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Pile labels */
.pile-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin-top: 2px;
}

/* ── Activity Log — right side ── */
/* ═══ SIDEBAR SECTIONS — unified framed card look ═══ */
.sidebar-section {
    background:
        linear-gradient(135deg,
            rgba(0, 10, 5, 0.6) 0%,
            rgba(0, 5, 2, 0.75) 100%);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.25);
    min-height: 0;
}

/* 2026-04-21: REDESIGN SPATIU — Discard primeste MAJORITATEA spatiului vertical
   (multi-row grid), Log compresat la fix 100px la baza.
   Ierarhie: piles (top fix) → discard (flex:1 mare) → log (bottom fix). */
.sidebar-section-piles {
    flex: 0 0 auto;       /* dimensiune naturala, fara grow/shrink */
}
.sidebar-section-discard {
    flex: 1 1 0;          /* ia MAJORITATEA spatiului vertical pt. multi-row grid */
    min-height: 110px;    /* minim 3 randuri tile + header, ca sa aiba sens */
    display: flex;
    flex-direction: column;
    overflow: hidden;     /* scroll e pe .discard-history-strip intern */
}
.sidebar-section-log {
    flex: 0 0 auto;       /* fix, NU grow — log-ul e secundar, discard prioritar */
    max-height: 110px;    /* ~5-6 pastile vizibile, scroll pt. restul */
    min-height: 0;
    overflow: hidden;
}

/* Section header — gold accent with icon + title + controls */
.sidebar-section-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    background:
        linear-gradient(180deg,
            rgba(255, 215, 0, 0.06) 0%,
            rgba(0, 0, 0, 0.2) 100%);
    border-bottom: 1px solid rgba(255, 215, 0, 0.12);
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 215, 0, 0.85);
}
.sidebar-section-header .material-symbols-rounded {
    font-size: 13px;
    color: rgba(255, 215, 0, 0.6);
}
.sidebar-section-header .section-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Discard count badge — mini pill */
.discard-count-badge {
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(184, 134, 11, 0.18));
    border: 1px solid rgba(255, 215, 0, 0.4);
    font-size: 9px;
    font-weight: 800;
    color: rgba(255, 235, 180, 0.95);
    text-align: center;
    letter-spacing: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

/* Expand button */
.section-expand-btn {
    width: 16px;
    height: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: rgba(255, 215, 0, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.section-expand-btn:hover {
    background: rgba(255, 215, 0, 0.15);
    color: rgba(255, 235, 180, 1);
}
.section-expand-btn .material-symbols-rounded {
    font-size: 12px !important;
    color: inherit !important;
}

/* ═══ DISCARD HISTORY STRIP — multi-row GRID cu scroll vertical (desktop) ═══
   2026-04-21: Mare upgrade — de la single-row orizontal (~6 tile vizibile)
   la grid auto-fill (~6 pe rand × 8+ randuri = 48+ tile vizibile simultan).
   Tile-urile se rearanjeaza automat dupa latimea disponibila a sidebar-ului.
   Mobile override (portrait+landscape) pastreaza single-row horizontal. */
.discard-history-strip {
    flex: 1 1 0;
    min-width: 0;             /* CRITIC pentru scroll in grid container */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22px, 1fr));
    grid-auto-rows: 30px;
    gap: 3px;
    padding: 6px 4px 6px 6px;
    overflow-x: hidden;
    overflow-y: auto;
    align-content: flex-start;
    justify-content: flex-start;
    scroll-behavior: smooth;
    min-height: 0;            /* eliminat 46px, primeste flex:1 din parinte */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.35) rgba(0, 0, 0, 0.2);
    overscroll-behavior: contain;
}
.discard-history-strip::-webkit-scrollbar { width: 4px; height: 4px; }
.discard-history-strip::-webkit-scrollbar-track { background: rgba(0,0,0,0.15); border-radius: 2px; }
.discard-history-strip::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.28);
    border-radius: 2px;
}
.discard-history-strip::-webkit-scrollbar-thumb:hover { background: rgba(255, 215, 0, 0.45); }

.discard-history-empty {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.25);
    font-style: italic;
    padding: 0 6px;
    width: 100%;
    text-align: center;
}

/* Mini tile in strip — single-row layout, scroll orizontal */
.discard-history-tile {
    flex-shrink: 0;
    width: 22px;
    height: 30px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: linear-gradient(145deg, #ffffff 0%, #fefdf6 40%, #eaddc3 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-tile, 'Oswald', sans-serif);
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    position: relative;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    cursor: default;
    transition: transform 0.18s;
}
.discard-history-tile:hover { transform: translateY(-2px) scale(1.08); }

.discard-history-tile.color-red   { color: #b91c1c; }
.discard-history-tile.color-blue  { color: #1e40af; }
.discard-history-tile.color-yellow{ color: #facc15; -webkit-text-stroke: 0.3px #7c5e00; }
.discard-history-tile.color-black { color: #111111; }
.discard-history-tile.color-joker {
    background:
        /* Damask diamond pattern — identic cu tile-ul mare */
        repeating-linear-gradient(45deg,
            transparent 0, transparent 2px,
            rgba(184, 134, 11, 0.1) 2px, rgba(184, 134, 11, 0.1) 3px),
        repeating-linear-gradient(-45deg,
            transparent 0, transparent 2px,
            rgba(184, 134, 11, 0.1) 2px, rgba(184, 134, 11, 0.1) 3px),
        linear-gradient(135deg,
            #fff8dc 0%,
            #ffecb3 20%,
            #ffd700 50%,
            #ffb300 80%,
            #cc9900 100%);
    background-size: 6px 6px, 6px 6px, 100% 100%;
    color: #7b4f00;
    font-size: 12px;
    border: 1px solid #b8860b;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7),
        0 0 4px rgba(255, 215, 0, 0.4);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25),
        0 2px 6px rgba(184, 134, 11, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 0.5px rgba(255, 215, 0, 0.5);
    position: relative;
    overflow: hidden;
    animation: jokerShimmer 3s ease-in-out infinite;
}
/* Shimmer sweep identic cu .tile.color-joker::after (etalare/mana) */
.discard-history-tile.color-joker::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 255, 255, 0.5) 45%,
        rgba(255, 235, 150, 0.7) 50%,
        rgba(255, 255, 255, 0.5) 55%,
        transparent 70%);
    background-size: 250% 100%;
    background-position: -100% 0;
    animation: jokerSweep 2.8s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 2;
}
.discard-history-tile.color-joker > * {
    position: relative;
    z-index: 1;
}

.discard-history-tile .mini-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 1px;
    border: 0.5px solid rgba(0, 0, 0, 0.3);
    box-shadow:
        inset 0 0.5px 1px rgba(255, 255, 255, 0.4),
        inset 0 -0.5px 1px rgba(0, 0, 0, 0.2),
        0 0.5px 1px rgba(0, 0, 0, 0.2);
}
.discard-history-tile.color-red .mini-dot {
    background: radial-gradient(circle at 35% 30%, #ef4444 0%, #b91c1c 60%, #7f1d1d 100%);
    border-color: #7f1d1d;
}
.discard-history-tile.color-blue .mini-dot {
    background: radial-gradient(circle at 35% 30%, #3b82f6 0%, #1e40af 60%, #1e3a8a 100%);
    border-color: #1e3a8a;
}
.discard-history-tile.color-yellow .mini-dot {
    background: radial-gradient(circle at 35% 30%, #fef9c3 0%, #facc15 55%, #a16207 100%);
    border-color: #854d0e;
}
.discard-history-tile.color-black .mini-dot {
    background: radial-gradient(circle at 35% 30%, #4b5563 0%, #111111 60%, #000000 100%);
    border-color: #000000;
}

/* Top tile (most recent in wall) — scale moderat, gold glow puls, punct rosu indicator */
.discard-history-tile.is-top {
    border: 2px solid #ffd700;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(184, 134, 11, 0.6);
    transform: scale(1.05);
    animation: discardTopPulse 1.6s ease-in-out infinite;
    z-index: 3;
    margin: 0 3px;
    position: relative;
}
/* Punct rosu indicator ACUM — in colt sus-dreapta, vizibil inauntrul tile-ului */
.discard-history-tile.is-top::before {
    content: '';
    position: absolute;
    top: 1px;
    right: 1px;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle at 35% 30%, #ff6060 0%, #dc2626 60%, #7f1d1d 100%);
    border: 0.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255, 60, 60, 0.85);
    animation: discardTopDot 1.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 4;
}
@keyframes discardTopPulse {
    0%, 100% {
        border-color: #ffd700;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            inset 0 -1px 0 rgba(184, 134, 11, 0.6);
    }
    50% {
        border-color: #fff3a0;
        box-shadow:
            inset 0 0 0 1.5px rgba(255, 255, 255, 0.75),
            inset 0 1px 0 rgba(255, 255, 255, 1),
            inset 0 -1px 0 rgba(184, 134, 11, 0.6);
    }
}
@keyframes discardTopDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.25); }
}

/* Taken tile (in log but not in wall anymore) — faded DAR TOT VIZIBILA */
.discard-history-tile.is-taken {
    opacity: 0.72;
    filter: grayscale(0.25) brightness(0.9);
    border-style: dashed;
    border-color: rgba(255, 160, 160, 0.55);
}
.discard-history-tile.is-taken::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent 0,
        transparent 3px,
        rgba(0, 0, 0, 0.18) 3px,
        rgba(0, 0, 0, 0.18) 4px
    );
    border-radius: inherit;
    pointer-events: none;
}

/* Recently discarded animation */
.discard-history-tile.just-discarded {
    animation: discardSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes discardSlideIn {
    0% { transform: translateX(20px) scale(0.7); opacity: 0; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* Breakable tile in modal — current player can take from this depth */
.discard-history-tile.is-breakable {
    cursor: pointer;
    border-color: rgba(120, 200, 255, 0.7);
    border-width: 2px;
    box-shadow:
        0 0 0 1px rgba(120, 200, 255, 0.35),
        0 2px 6px rgba(80, 170, 255, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    animation: breakableHint 2.2s ease-in-out infinite;
}
.discard-history-tile.is-breakable:hover {
    transform: translateY(-3px) scale(1.15);
    border-color: #40c0ff;
    box-shadow:
        0 0 0 2px rgba(64, 192, 255, 0.75),
        0 4px 12px rgba(64, 192, 255, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation: none;
}
.discard-history-tile.is-breakable::before {
    content: '↓';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #40c0ff;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    opacity: 0.85;
}
@keyframes breakableHint {
    0%, 100% { box-shadow: 0 0 0 1px rgba(120, 200, 255, 0.35), 0 2px 6px rgba(80, 170, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.85); }
    50%      { box-shadow: 0 0 0 2px rgba(120, 200, 255, 0.6),  0 2px 10px rgba(80, 170, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.85); }
}

/* ═══ DISCARD HISTORY MODAL ═══ */
.discard-history-modal {
    position: fixed;
    inset: 0;
    z-index: 9900;
    display: flex;
    align-items: center;
    justify-content: center;
}
.discard-history-modal[hidden] { display: none; }

.discard-history-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.discard-history-modal-card {
    position: relative;
    background: linear-gradient(135deg,
        rgba(20, 30, 15, 0.98) 0%,
        rgba(8, 18, 10, 0.99) 100%);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 14px;
    width: min(92vw, 560px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 215, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.discard-history-modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(0, 0, 0, 0.2));
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}
.discard-history-modal-header h3 {
    margin: 0;
    flex: 1;
    font-size: 15px;
    color: rgba(255, 235, 180, 0.95);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}
.discard-history-modal-header .material-symbols-rounded { color: rgba(255, 215, 0, 0.7); }

.discard-history-modal-close {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.discard-history-modal-close:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fff;
}
.discard-history-modal-close .material-symbols-rounded { font-size: 18px; }

.discard-history-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Group by turn */
.discard-turn-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.discard-turn-header {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 215, 0, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.discard-turn-header .turn-player { color: rgba(255, 245, 220, 0.95); }
.discard-turn-header .turn-badge {
    padding: 1px 6px;
    background: rgba(255, 215, 0, 0.15);
    border-radius: 8px;
    font-size: 9px;
    color: rgba(255, 235, 180, 1);
}
.discard-turn-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* ═══ ACTIVITY LOG — framed premium ═══ */
.activity-log {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 0;
}

.activity-log-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    background:
        linear-gradient(180deg,
            rgba(255, 215, 0, 0.06) 0%,
            rgba(0, 0, 0, 0.2) 100%);
    border-bottom: 1px solid rgba(255, 215, 0, 0.12);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 215, 0, 0.85);
    flex-shrink: 0;
}

.activity-log-header .material-symbols-rounded {
    font-size: 13px;
    color: rgba(255, 215, 0, 0.6);
}

/* 2026-04-21: Desktop activity log — pastila stil mobile (player galben, actiune cyan,
   pill rotunjit cu bg + border). Stiva verticala in sidebar-ul vertical, dar CARD-uri
   individuale ca pe mobil (inline-flex pill-shape, nu text simplu). */
.activity-log-body {
    flex: 1 1 0;
    min-height: 0;        /* CRITIC: permite scroll intern fara sa creasca parintele */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 4px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;    /* pastila doar la cat are nevoie, nu stretch */
    gap: 3px;
}

.activity-log-body::-webkit-scrollbar { width: 3px; }
.activity-log-body::-webkit-scrollbar-track { background: transparent; }
.activity-log-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
}

.activity-log-entry {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 3px 7px;
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.95);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 160ms ease, border-color 160ms ease;
}

.activity-log-entry:hover {
    background: rgba(255, 215, 0, 0.10);
    border-color: rgba(255, 215, 0, 0.25);
}

/* Elimin stripe-ul alternat — pastilele sunt uniforme ca pe mobil */
.activity-log-entry:nth-child(odd) {
    background: rgba(255, 255, 255, 0.08);
}

.activity-log-entry .log-player-name {
    font-weight: 700;
    color: #FFD94A;      /* galben ca pe mobil */
    font-size: 10px;
}

.activity-log-entry .log-action-type {
    color: #8FE0F5;      /* cyan ca pe mobil */
    font-weight: 600;
    font-size: 10px;
}

.activity-log-entry .log-details {
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    opacity: 0.92;
}

/* Highlight intrarea cea mai noua (ultimul copil adaugat) */
.activity-log-entry:last-child {
    background: linear-gradient(180deg, rgba(255,215,0,0.12), rgba(255,215,0,0.06));
    border-color: rgba(255, 215, 0, 0.28);
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.08) inset;
}

.activity-log-empty {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    padding: 8px 4px;
    font-style: italic;
    align-self: stretch;      /* forteaza width 100% ca sa se centreze textul */
    width: 100%;
}

/* ── Hand Scroll Arrows ── */
.hand-scroll-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.hand-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 28px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Red arrows like reference */
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
    border: 2px solid #a93226;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 16px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.hand-scroll-arrow.visible {
    opacity: 1;
    pointer-events: auto;
}

.hand-scroll-arrow:hover {
    background: linear-gradient(180deg, #ff5c4c, #e74c3c);
    border-color: #e74c3c;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.5);
}

.hand-scroll-arrow.scroll-left {
    left: 2px;
}

.hand-scroll-arrow.scroll-right {
    right: 2px;
}

.hand-scroll-arrow .material-symbols-rounded {
    font-size: 18px;
}

/* Table Melds Area — left side ~55-60% */
.table-melds-area {
    flex: 3;
    min-height: 60px;
    background: rgba(34, 120, 50, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.table-melds-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    /* 2026-04-20: masa fixa → no scroll */
    overflow: hidden;
    max-height: 100%;
    align-content: flex-start;
}

.table-melds-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

.table-meld-group {
    display: flex;
    gap: 2px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    position: relative;
    transition: all 0.2s;
    cursor: pointer;
}

.table-meld-group:hover {
    border-color: var(--whist-accent);
}

.table-meld-group.highlight-attach {
    border-color: var(--whist-success);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
    cursor: pointer;
    position: relative;
}

.meld-owner-tag {
    position: absolute;
    top: -8px;
    left: 4px;
    font-size: 9px;
    font-weight: 600;
    background: rgba(0, 50, 20, 0.85);
    padding: 0 4px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.7);
}

.meld-type-label {
    position: absolute;
    bottom: -8px;
    right: 4px;
    font-size: 8px;
    font-weight: 600;
    background: rgba(0, 50, 20, 0.85);
    padding: 0 4px;
    border-radius: 4px;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-melds-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.25);
    font-style: italic;
}

/* Pile Area */
.pile-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 6px 8px;
    flex-shrink: 0;
}

.draw-pile {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
}

.draw-pile:hover { transform: scale(1.05); }
.draw-pile.disabled { opacity: 0.5; pointer-events: none; }

/* Pile-stack umple spatiul disponibil, centrat vertical + orizontal */
.pile-stack {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    padding: 2px;
}

/* Container teancuri (populat dinamic de JS) — centrat.
   2026-04-21 v13: flex-wrap pentru 15 teancuri — se aranjeaza automat pe 2-3 randuri
   cand spatiul orizontal e limitat. */
.pile-depth {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 2px 2px;
    pointer-events: none;
    width: 100%;
    max-width: 100%;
    padding: 2px;
    box-sizing: border-box;
}

/* Teanc = mini-stiva de 7 piese (1:1 cu realitatea).
   2026-04-21 v13: 15 teancuri incap pe un rand (8-9px wide × 15 + gap = ~150px).
   Piesele interioare 3px pt. vizibilitate clara. */
.pile-teanc {
    --teanc-pieces: 7;
    --teanc-piece-h: 3px;
    --teanc-cap-h: 7px;
    position: relative;
    flex: 0 0 auto;
    min-width: 7px;
    max-width: 9px;
    width: 9px;
    height: calc(var(--teanc-pieces) * var(--teanc-piece-h) + var(--teanc-cap-h));
    display: flex;
    flex-direction: column-reverse;
    gap: 0;
    border-radius: 2px;
    transition: transform 0.25s ease, height 0.35s ease;
}

/* Fiecare piesa in teanc = bara cu bevel 3D */
.pile-teanc-piece {
    height: var(--teanc-piece-h);
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.9) 0%,
        #f5e8c2 22%,
        #e8d9ae 60%,
        #cdb683 100%);
    border-left: 1px solid rgba(110, 80, 35, 0.55);
    border-right: 1px solid rgba(110, 80, 35, 0.55);
    border-top: 1px solid rgba(60, 40, 15, 0.6);
    box-shadow:
        inset 0 0.5px 0 rgba(255, 255, 255, 0.7),
        inset 0 -0.5px 0 rgba(80, 55, 25, 0.35);
}

.pile-teanc-piece:first-child {
    border-bottom: 1px solid rgba(60, 40, 15, 0.65);
    border-radius: 0 0 2.5px 2.5px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.7),
        inset 0 -0.5px 0 rgba(80, 55, 25, 0.35);
}

.pile-teanc-piece:last-child {
    height: var(--teanc-cap-h);
    background:
        radial-gradient(circle at 50% 50%, rgba(120, 90, 50, 0.65) 0%, rgba(100, 75, 40, 0.4) 1.8px, transparent 2px),
        radial-gradient(ellipse at 40% 30%, rgba(255, 253, 240, 0.85) 0%, transparent 60%),
        linear-gradient(145deg, #fffef5 0%, #faf4de 45%, #e8d9b0 100%);
    border: 1px solid rgba(110, 80, 40, 0.6);
    border-radius: 2.5px 2.5px 0 0;
    box-shadow:
        0 -1px 1px rgba(40, 25, 10, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -0.5px 0 rgba(120, 85, 40, 0.3);
}

/* Rotatie infima alternativa pe teancuri pt natural */
.pile-teanc:nth-child(odd)  { transform: rotate(-0.6deg); }
.pile-teanc:nth-child(even) { transform: rotate(0.4deg) translateY(-0.5px); }
.pile-teanc:nth-child(3n)   { transform: rotate(-0.3deg) translateY(-1px); }

/* 2026-04-21 v12: Enter/leave animations pentru diff in-place (reflecta diminuarea).
   .pile-teanc-enter  = state initial la creare (scale 0 + translateY jos)
   .pile-teanc-leave  = state final la stergere (fade + scale down)
   Piesele din interiorul teancurilor au propriile lor tranzitii. */
.pile-teanc {
    opacity: 1;
    transition:
        transform 0.25s ease,
        height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
}
.pile-teanc.pile-teanc-enter {
    opacity: 0;
    transform: translateY(8px) scale(0.6);
}
.pile-teanc.pile-teanc-leave {
    opacity: 0;
    transform: translateY(-10px) scale(0.4) rotate(-3deg);
    pointer-events: none;
}
.pile-teanc-piece {
    transition: opacity 0.25s ease, transform 0.3s ease, height 0.3s ease;
    opacity: 1;
}
.pile-teanc-piece.pile-teanc-piece-enter {
    opacity: 0;
    transform: translateY(4px) scaleY(0.1);
}
.pile-teanc-piece.pile-teanc-piece-leave {
    opacity: 0;
    transform: translateY(-6px) scaleY(0.1);
    height: 0 !important;
    pointer-events: none;
}

/* Hover — fluctuatie usoara per teanc */
.draw-pile:hover .pile-teanc:nth-child(odd)  { transform: rotate(-1deg) translateY(-3px); }
.draw-pile:hover .pile-teanc:nth-child(even) { transform: rotate(0.8deg) translateY(-5px); }
.draw-pile:hover .pile-teanc:nth-child(3n)   { transform: rotate(-0.5deg) translateY(-4px); }

/* Shadow ambient sub grupul de teancuri */
.pile-stack::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: -3px;
    height: 4px;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.15) 60%,
        transparent 100%);
    filter: blur(2px);
    pointer-events: none;
    z-index: -1;
}

/* Count mic sau zero — stack-ul se prabuseste vizual */
.draw-pile.pile-empty .pile-stack { --pile-depth-layers: 0; }

/* Vechile pile-tile din HTML nu mai sunt folosite — JS genereaza .pile-teanc dynamic */
.pile-tile { display: none !important; }

/* LEGACY rule — pastrata pentru referinta/compatibilitate dar fara efect */
.pile-tile-legacy-ignore {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    border-radius: 3px;
    border: 1px solid rgba(110, 80, 40, 0.55);
    /* Fildeș/os — gradient cald autentic */
    background:
        radial-gradient(ellipse at 40% 30%,
            rgba(255, 253, 240, 0.7) 0%,
            transparent 55%),
        linear-gradient(145deg,
            #fffef5 0%,
            #faf4e0 35%,
            #efe2c4 75%,
            #dbc9a3 100%);
    box-shadow:
        /* Umbra sub piesa */
        0 1px 1px rgba(0, 0, 0, 0.2),
        0 2px 3px rgba(0, 0, 0, 0.15),
        /* Interior bevel */
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(140, 100, 50, 0.25),
        inset 1px 0 0 rgba(255, 255, 255, 0.4),
        inset -1px 0 0 rgba(150, 115, 65, 0.2);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

/* Indent central (scobitura in spatele piesei) */
.pile-tile::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 40% 40%,
        rgba(140, 105, 60, 0.5) 0%,
        rgba(100, 75, 40, 0.7) 50%,
        rgba(70, 50, 25, 0.5) 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 1px 1px rgba(60, 40, 20, 0.6),
        inset 0 -0.5px 0 rgba(255, 240, 210, 0.4);
    pointer-events: none;
    z-index: 1;
}

/* Sheen diagonal subtil */
.pile-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 240, 0.12) 25%,
        transparent 50%);
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

/* Rotatii infime per piesa pentru look natural (rand uman, nu aliniat perfect) */
.pile-tile:nth-child(1) { transform: rotate(-0.8deg) translateY(-0.5px); }
.pile-tile:nth-child(2) { transform: rotate(0.3deg); }
.pile-tile:nth-child(3) { transform: rotate(-0.2deg); }
.pile-tile:nth-child(4) { transform: rotate(0.5deg) translateY(-0.5px); }
.pile-tile:nth-child(5) { transform: rotate(-0.4deg); }

/* Hover: randul se ridica usor si piesele fluctueaza */
.draw-pile:hover .pile-tile:nth-child(1) { transform: rotate(-1.2deg) translateY(-3px); }
.draw-pile:hover .pile-tile:nth-child(2) { transform: rotate(0.6deg) translateY(-4px); }
.draw-pile:hover .pile-tile:nth-child(3) { transform: rotate(-0.4deg) translateY(-5px); }
.draw-pile:hover .pile-tile:nth-child(4) { transform: rotate(0.8deg) translateY(-4px); }
.draw-pile:hover .pile-tile:nth-child(5) { transform: rotate(-0.8deg) translateY(-3px); }

.pile-count {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    transition: color 0.2s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

/* Flash cand se decrementeaza count-ul */
.pile-count.pile-count-tick {
    animation: pileCountTick 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Warning vizual daca totalul nu bate (transparenta totala) */
.pile-count.pile-count-mismatch {
    color: #ff5555 !important;
    text-shadow: 0 0 8px rgba(255, 85, 85, 0.7), 0 1px 2px rgba(0, 0, 0, 0.6);
    animation: pileMismatchBlink 0.8s ease-in-out infinite !important;
}
@keyframes pileMismatchBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ═══ PILE AUDIT BUTTON (icon mic langa pile-count) ═══ */
.pile-audit-btn {
    position: absolute;
    top: -8px;
    right: -10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, rgba(26, 10, 46, 0.92), rgba(40, 20, 70, 0.9));
    color: var(--whist-gold, #ffd700);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    z-index: 5;
}
.pile-audit-btn .material-symbols-rounded {
    font-size: 14px;
    font-variation-settings: 'FILL' 1;
}
.pile-audit-btn:hover {
    transform: scale(1.15);
    border-color: var(--whist-gold, #ffd700);
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.pile-audit-btn:active { transform: scale(0.96); }

/* ═══ TILE AUDIT MODAL ═══ */
.tile-audit-modal {
    position: fixed;
    inset: 0;
    z-index: 9900;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tile-audit-modal[hidden] { display: none; }
.tile-audit-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: auditFadeIn 0.2s ease;
}
.tile-audit-modal-card {
    position: relative;
    width: min(520px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, rgba(30, 14, 56, 0.98) 0%, rgba(18, 8, 36, 0.98) 100%);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 16px;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    animation: auditSlideIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes auditFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes auditSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.tile-audit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.06) 0%, transparent 100%);
}
.tile-audit-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tile-audit-modal-header h3 .material-symbols-rounded {
    font-size: 22px;
    color: var(--whist-gold, #ffd700);
    font-variation-settings: 'FILL' 1;
}
.tile-audit-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.tile-audit-modal-close:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fecaca;
}

.tile-audit-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.audit-total-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04));
    border: 1px solid rgba(34, 197, 94, 0.3);
    margin-bottom: 16px;
}
.audit-total-card.is-mismatch {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.05));
    border-color: rgba(239, 68, 68, 0.4);
    animation: pileMismatchBlink 1s ease-in-out infinite;
}
.audit-total-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}
.audit-total-value {
    font-size: 22px;
    font-weight: 800;
    color: #4ade80;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.5px;
}
.audit-total-card.is-mismatch .audit-total-value { color: #f87171; }
.audit-total-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}
.audit-total-status.ok { color: #4ade80; }
.audit-total-status.err { color: #f87171; }
.audit-total-status .material-symbols-rounded { font-size: 16px; }

.audit-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.audit-row {
    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;
    transition: background 0.2s;
}
.audit-row:hover { background: rgba(255, 255, 255, 0.05); }
.audit-row-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 215, 0, 0.12);
    color: var(--whist-gold, #ffd700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.audit-row-icon .material-symbols-rounded { font-size: 18px; font-variation-settings: 'FILL' 1; }
.audit-row-label {
    flex: 1 1 auto;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}
.audit-row-label small {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 2px;
    font-weight: 400;
}
.audit-row-count {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    min-width: 32px;
    text-align: right;
    letter-spacing: 0.5px;
}
.audit-row-sublist {
    margin: 4px 0 0 44px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.15);
    border-left: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 0 6px 6px 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.audit-row-sublist div {
    display: flex;
    justify-content: space-between;
}

.tile-audit-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}
.audit-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}
.audit-note .material-symbols-rounded {
    font-size: 16px;
    color: #4ade80;
    flex-shrink: 0;
    margin-top: 1px;
    font-variation-settings: 'FILL' 1;
}
.audit-note strong { color: var(--whist-gold, #ffd700); font-weight: 700; }

/* Light theme */
[data-theme="light"] .tile-audit-modal-card {
    background: linear-gradient(145deg, #ffffff 0%, #f4efe5 100%);
    border-color: rgba(180, 140, 60, 0.3);
}
[data-theme="light"] .tile-audit-modal-header h3 { color: #1a0a2e; }
[data-theme="light"] .tile-audit-modal-close {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .audit-row {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .audit-row-label { color: rgba(0, 0, 0, 0.8); }
[data-theme="light"] .audit-row-label small { color: rgba(0, 0, 0, 0.5); }
[data-theme="light"] .audit-row-count { color: #1a0a2e; }
[data-theme="light"] .audit-note { color: rgba(0, 0, 0, 0.7); }
[data-theme="light"] .tile-audit-modal-footer { background: rgba(0, 0, 0, 0.05); }
@keyframes pileCountTick {
    0%   { transform: translateX(-50%) scale(1);    color: rgba(255, 255, 255, 0.7); }
    40%  { transform: translateX(-50%) scale(1.35); color: var(--whist-gold, #ffd700); text-shadow: 0 0 8px rgba(255, 215, 0, 0.8); }
    100% { transform: translateX(-50%) scale(1);    color: rgba(255, 255, 255, 0.7); }
}

/* Pile state: low (< 4 piese) — warning color */
.draw-pile.pile-low .pile-count {
    color: #ffb454;
    text-shadow: 0 0 6px rgba(255, 180, 84, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
    animation: pileLowPulse 1.5s ease-in-out infinite;
}
@keyframes pileLowPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* Pile state: empty */
.draw-pile.pile-empty {
    opacity: 0.4;
    filter: grayscale(0.7);
    pointer-events: none;
}
.draw-pile.pile-empty .pile-count {
    color: #ef4444;
    animation: none;
}

/* ATU Display */
.atu-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* ATU centrat pe masa verde — VECHI, inlocuit de atu-beside-pile. Pastrat ca fallback. */
.atu-display.atu-center {
    grid-row: 2 / 4;
    grid-column: 1 / 3;
    align-self: center;
    justify-self: center;
    z-index: 5;
    padding: 0;
    background: transparent;
    gap: 1px;
    pointer-events: none;
    width: auto;
    height: auto;
}
.atu-display.atu-center .atu-label-small {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--whist-gold, #ffd700);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    line-height: 1;
}
.atu-display.atu-center .atu-tile-display {
    transform: scale(0.55);
    transform-origin: center top;
    margin: -4px 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

/* ═══ ATU — floating deasupra sidebar-section-piles (NU afecteaza pile-area/draw-pile) ═══ */
.whist-sidebar .sidebar-section-piles {
    position: relative;   /* doar asta: anchor pt. ATU absolute — nu atinge pile */
}
.atu-display.atu-beside-pile {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 6px 5px;
    background: linear-gradient(135deg,
        rgba(20, 45, 25, 0.85) 0%,
        rgba(10, 30, 15, 0.95) 100%);
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 8px;
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 215, 0, 0.15),
        0 0 10px rgba(255, 215, 0, 0.25);
    z-index: 6;
    pointer-events: none;
    animation: atuPulseBesidePile 2.4s ease-in-out infinite;
}
@keyframes atuPulseBesidePile {
    0%, 100% { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 215, 0, 0.15), 0 0 10px rgba(255, 215, 0, 0.25); }
    50%      { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 215, 0, 0.25), 0 0 16px rgba(255, 215, 0, 0.5); }
}
.atu-display.atu-beside-pile .atu-label-small {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffd700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    line-height: 1;
    text-transform: uppercase;
}
/* Marit ca sa matcheze piesele din etalare — scale 0.85 → ~37×51 desktop,
   clar vizibil fata de 0.42 (18×25) care era ilizibil. */
.atu-display.atu-beside-pile .atu-tile-display {
    transform: scale(0.85);
    transform-origin: center;
    margin: -3px 0 -4px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

.atu-label-small {
    font-size: 10px;
    font-weight: 700;
    color: var(--whist-gold);
    letter-spacing: 1px;
}

.atu-tile-display { position: relative; }

.atu-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(0, 40, 15, 0.6);
    border: 1px solid var(--whist-gold);
    border-radius: 6px;
}

.atu-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--whist-gold);
}

/* Discard Pile */
.discard-pile {
    position: relative;
    min-width: var(--tile-width);
    min-height: var(--tile-height);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: var(--whist-radius-tile);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.discard-pile:hover { border-color: rgba(255, 255, 255, 0.4); }

.discard-pile.can-take {
    border-color: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}

.discard-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}


/* ── Arrangement Zone ── */
.arrangement-zone {
    background: rgba(34, 100, 44, 0.5);
    border: 2px solid #ffd700;
    border-radius: 8px;
    padding: 6px 8px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15);
}

.arrangement-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #ffd700;
    margin-bottom: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.arrangement-header .material-symbols-rounded { font-size: 18px; }

.arrangement-points {
    margin-left: auto;
    font-weight: 700;
    font-size: 14px;
    color: var(--whist-gold);
}

.arrangement-clear-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: all 0.2s;
}

.arrangement-clear-btn:hover { color: #ff6b6b; }

.arrangement-tiles {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    min-height: 40px;
    padding: 4px;
}

.arrangement-group {
    display: flex;
    gap: 2px;
    padding: 4px 6px;
    background: var(--whist-surface-2);
    border: 1px solid var(--whist-border);
    border-radius: var(--whist-radius-xs);
    position: relative;
    transition: all 0.2s;
}

.arrangement-group.valid {
    border-color: var(--whist-success);
    background: rgba(var(--whist-success-rgb), 0.05);
}

.arrangement-group.invalid {
    border-color: var(--whist-danger);
    background: rgba(var(--whist-danger-rgb), 0.05);
}

.arrangement-group-label {
    position: absolute;
    top: -8px;
    left: 4px;
    font-size: 8px;
    font-weight: 600;
    background: var(--whist-surface);
    padding: 0 4px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.arrangement-group.valid .arrangement-group-label { color: var(--whist-success); }
.arrangement-group.invalid .arrangement-group-label { color: var(--whist-danger); }

.arrangement-group-points {
    position: absolute;
    bottom: -8px;
    right: 4px;
    font-size: 9px;
    font-weight: 700;
    background: var(--whist-surface);
    padding: 0 4px;
    border-radius: 3px;
    color: var(--whist-gold);
}

.arrangement-add-group {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 40px;
    border: 2px dashed var(--whist-border);
    border-radius: var(--whist-radius-xs);
    color: var(--whist-text-muted);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 20px;
}

.arrangement-add-group:hover {
    border-color: var(--whist-accent);
    color: var(--whist-accent);
    background: var(--whist-accent-glow);
}

.arrangement-divider {
    width: 3px;
    height: var(--tile-height-sm);
    background: var(--whist-accent);
    border-radius: 2px;
    margin: 0 4px;
    opacity: 0.5;
    align-self: center;
}


/* ── Player Area — PE masa verde ── */
.player-area {
    flex-shrink: 0;
    position: relative;
    background: rgba(0, 20, 8, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
    margin: 0;
    padding: 4px 0;
}

.player-info-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    margin: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.player-name-label {
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    font-size: 13px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.player-tiles-count {
    background: #c0392b;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ═══ SPECTATOR MODE — hide interactive UI (not their turn, not their hand) ═══
   Pastrez: pileAudit, discardHistory, timer (informationale, nu interactive-destructive)
   + ascund "Spectator" din mp-game-bar (apare deja ca badge la south seat) */
body.spectator-mode .sort-buttons,
body.spectator-mode #actionBar,
body.spectator-mode .action-bar,
body.spectator-mode .action-bar-v2,
body.spectator-mode .etalare-hint,
body.spectator-mode .player-hand-penalty,
body.spectator-mode .hand-scroll-arrow,
body.spectator-mode #mpGameBarInfo,
body.spectator-mode .mp-game-bar-info,
/* Spectator: ascund butoanele de actiune chiar si cand sunt fuzionate in bara de south
   (merged-actions) — spectator nu poate interactiona, deci nu are sens sa le afiseze.
   Fix overflow bar south (Trage/Etaleaza/Lipeste/Arunca/ATU ieseau in afara cadrului). */
body.spectator-mode .seat-south .player-info-bar.merged-actions .action-btn-game,
body.spectator-mode .seat-south .player-info-bar.merged-actions .btn-atu-inline,
body.spectator-mode .seat-south .player-info-bar.merged-actions .action-group,
body.spectator-mode .seat-south .player-info-bar.merged-actions .sort-buttons,
body.spectator-mode .seat-south .action-bar-v2,
body.spectator-mode .action-bar.action-bar-v2.action-bar-merged .action-btn-game {
    display: none !important;
}
/* Disable pointer-events pe hand-ul de jos (tilurile nu sunt ale lui) */
body.spectator-mode .seat-south .player-hand .tile {
    pointer-events: none;
    cursor: default !important;
}
body.spectator-mode .seat-south .player-hand .tile.selected {
    /* Deselecteaza vizual daca era selectat inainte */
    box-shadow: none !important;
    transform: none !important;
}
/* Badge SPECTATOR pe bara south — ROSU cu CONTRAST pe background wood/crem */
body.spectator-mode .player-info-bar::before {
    content: '👁 Spectator';
    font-size: 10px;
    font-weight: 800;
    color: #ffffff;                                   /* alb pt. contrast maxim pe rosu */
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);   /* rosu solid, nu transparent */
    border: 1px solid #7f1d1d;
    border-radius: 10px;
    padding: 3px 10px;
    letter-spacing: 0.5px;
    margin-right: 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: spectatorBadgePulse 2.4s ease-in-out infinite;
}
@keyframes spectatorBadgePulse {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
                    0 0 14px rgba(239, 68, 68, 0.7),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}
/* Badge responsive — pe mobile iconita doar */
@media (max-width: 480px) {
    body.spectator-mode .player-info-bar::before {
        content: '👁';
        font-size: 14px;
        padding: 2px 7px;
        margin-right: 4px;
    }
}

/* Sort buttons — triplet compact palette/sort/layers din info-bar */
/* 2026-04-21: Aliniat cu action-btn-game — aceeasi filosofie vizuala
   (gradient subtil, border auriu la hover, micro-scale la active) */
.sort-buttons {
    margin-left: auto;
    display: flex;
    gap: 3px;
}

.sort-btn {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(0, 0, 0, 0.15) 100%),
        rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 215, 0, 0.12);
    color: rgba(255, 235, 200, 0.72);
    padding: 3px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease, transform 0.12s ease, background 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.25);
}

.sort-btn:hover {
    border-color: rgba(255, 215, 0, 0.55);
    color: #ffd700;
    background:
        linear-gradient(180deg,
            rgba(255, 215, 0, 0.08) 0%,
            rgba(184, 134, 11, 0.04) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 5px rgba(255, 215, 0, 0.18);
    transform: translateY(-1px);
}

.sort-btn:active {
    transform: translateY(0) scale(0.96);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.3),
        0 1px 1px rgba(0, 0, 0, 0.15);
}

.sort-btn .material-symbols-rounded { font-size: 15px; line-height: 1; }

/* Player Hand — tiles on the green table */
.hand-scroll-wrapper .player-hand {
    flex: 1;
}

.player-hand {
    /* FREEFORM 2D — 2026-04-20: piesele sunt position:absolute (vezi renderHandFreeform).
       Container-ul trebuie position:relative ca pozitiile (x,y) calculate sa se ancoreze
       la .player-hand, nu la .player-area. Inaltime = 2 randuri tile + gap + padding.
       Cu box-sizing:border-box, height include padding-ul. */
    position: relative;
    display: block;
    gap: 3px;
    padding: 6px 30px;
    overflow: visible;
    /* 2 randuri × tile-h + 5px gap intre randuri + 24px buffer (pad top/bot + aer).
       Desktop: 2*60 + 29 = 149px. Mobile portrait: 2*46 + 29 = 121px. */
    min-height: calc(2 * var(--tile-height) + 29px);
    height: calc(2 * var(--tile-height) + 29px);
    flex-shrink: 0;
}

/* Tile entrance stagger animation in hand */
.player-hand .tile {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 767px) {
    .player-hand {
        -webkit-overflow-scrolling: touch;
    }
    /* DRAG IMEDIAT — touch-action:none pe piese ca degetul sa ia imediat piesa
       si s-o poata trage in ORICE directie (sus, jos, stanga, dreapta). Scroll
       peste piese NU mai functioneaza, dar user-ul are board-ul de deasupra
       pentru scroll. */
    .seat-south .player-hand .tile,
    .etalare-zone .tile,
    .table-meld-group .tile,
    .arrangement-zone .tile {
        touch-action: none !important;
    }
    /* Zona de etalare: permite scroll pan-y pentru board vertical */
    .etalare-zone {
        touch-action: pan-y !important;
    }
    /* 2026-04-21 FIX: meld-group permite ambele pan-x pan-y — pan-x ca user-ul
       sa poata face swipe ORIZONTAL cand meld-ul are mai multe piese decat latimea
       zonei (runs A-K = 13 tiles nu incap in 230px) + pan-y pentru scroll board. */
    .table-meld-group {
        touch-action: pan-x pan-y !important;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .seat-south .player-hand .tile,
    .etalare-zone .tile,
    .table-meld-group .tile,
    .arrangement-zone .tile {
        touch-action: none !important;
    }
    .etalare-zone {
        touch-action: pan-y !important;
    }
    /* Landscape: la fel ca portrait — pan-x pan-y pe meld-group pentru swipe horizontal */
    .table-meld-group {
        touch-action: pan-x pan-y !important;
    }
}

.player-hand::-webkit-scrollbar { height: 4px; }
.player-hand::-webkit-scrollbar-track { background: transparent; }
.player-hand::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}


/* ================================================================================================
   10. TILE STYLES
================================================================================================ */
/* ═══ PREMIUM TILE — sheen 3D + bevel + realistic shadow ═══ */
.tile {
    width: var(--tile-width);
    height: var(--tile-height);
    border-radius: var(--whist-radius-tile);
    border: 1px solid rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-tile, var(--font-display));
    font-weight: 700;
    letter-spacing: 0.3px;
    font-size: var(--tile-font);
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.15s;
    position: relative;
    flex-shrink: 0;
    /* Ivory warm — bevel crisp, fara border solid (interfera cu cifrele color) */
    background: linear-gradient(172deg, #ead7a8 0%, #dcc58a 55%, #c8ad6a 100%);
    border: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 210, .9),
        inset 1px 0 0 rgba(255, 240, 200, .5),
        inset 0 -1px 0 rgba(70, 45, 15, .65),
        inset -1px 0 0 rgba(100, 70, 30, .45),
        0 0 0 1px rgba(70, 45, 15, .7),
        0 1px 0 rgba(40, 22, 8, .6),
        0 2px 3px rgba(0, 0, 0, .5),
        0 4px 7px rgba(0, 0, 0, .28);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    /* BLOCHEAZA Chrome Android "Touch to Search" / context action bar ("Atinge
       pentru a vedea rezultate") care apare pe text selectabil la tap/long-press.
       Combinatia asta dezactiveaza complet: text selection, Tap-to-Search, context
       menu cu Save Image/Search Google. */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

/* Highlight convex difuz — plastic mat (același ca spatele) */
.tile::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 80% 55% at 38% 25%,
        rgba(255, 240, 200, .28) 0%,
        transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* Tile content sits ABOVE the sheen */
.tile > * { position: relative; z-index: 2; }

.tile:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow:
        0 3px 4px rgba(0, 0, 0, 0.15),
        0 6px 12px rgba(0, 0, 0, 0.2),
        0 12px 24px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(160, 130, 80, 0.18);
}

.tile.selected {
    /* PRO: lift mic (-6px) + scale subtil (1.04) + border gold 3px + glow pulsant.
       Balanta intre vizibilitate si pastrarea layout-ului (fara sa "sara" pieseie
       atat de sus incat sa incurce rearanjarea). */
    transform: translateY(-6px) scale(1.04);
    border: 3px solid #ffd700;
    box-shadow:
        0 0 0 2px rgba(255, 215, 0, 0.55),
        0 0 18px rgba(255, 215, 0, 0.85),
        0 8px 18px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -2px 4px rgba(255, 180, 40, 0.3);
    z-index: 8;
    position: relative;
    animation: tileSelectedPulseGlobal 1.4s ease-in-out infinite;
}
@keyframes tileSelectedPulseGlobal {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(255, 215, 0, 0.55),
            0 0 18px rgba(255, 215, 0, 0.85),
            0 8px 18px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 1),
            inset 0 -2px 4px rgba(255, 180, 40, 0.3);
    }
    50% {
        box-shadow:
            0 0 0 3px rgba(255, 230, 80, 0.8),
            0 0 26px rgba(255, 220, 40, 1),
            0 10px 22px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 1),
            inset 0 -2px 6px rgba(255, 200, 60, 0.55);
    }
}

.tile.playable {
    border-color: var(--whist-success);
    animation: tilePulse 1.5s ease-in-out infinite;
}

/* ═══ PROFESSIONAL DRAG & DROP — ghost follows finger ═══ */
/* Piesa ORIGINALĂ (rămasă pe loc) — dimmed, ca să indice clar de unde a pornit */
.tile.dragging {
    opacity: 0.22 !important;
    transform: scale(0.88) !important;
    transition: opacity 0.15s, transform 0.15s !important;
    filter: grayscale(0.5) blur(0.3px);
    pointer-events: none;
}

/* GHOST — clona piesei care urmărește degetul. Position fixed, pointer-events none.
   Toate transformările se fac pe inline-style din JS (translate + scale + rotate).
   CSS-ul doar adaugă shadow-ul și overridează tranziția ca urmărirea să fie 1:1. */
.tile.tile-drag-ghost {
    transition: none !important;
    animation: none !important;
    opacity: 0.97 !important;
    pointer-events: none !important;
    /* Shadow puternic — arată că piesa e "ridicată" deasupra board-ului */
    filter:
        drop-shadow(0 16px 28px rgba(0, 0, 0, 0.55))
        drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35))
        drop-shadow(0 0 12px rgba(255, 215, 0, 0.35));
    /* Bordură aurie subtilă ca să iasă în evidență */
    border-color: rgba(255, 215, 0, 0.6) !important;
    /* Elimină focus/hover/selection borders din clonă */
    outline: none !important;
}

/* SNAP bump — scurt scale bump când ghost-ul intră peste o zonă validă de drop
   (meld). Feedback vizual ca "lock-on" / "magnet" — user simte că piesa e gata
   să fie lipită. Inspirat din pragmatic-drag-and-drop + dnd-kit. */
.tile.tile-drag-ghost.ghost-snap {
    animation: ghostSnapBump 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes ghostSnapBump {
    0% { filter:
        drop-shadow(0 16px 28px rgba(0, 0, 0, 0.55))
        drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35))
        drop-shadow(0 0 12px rgba(255, 215, 0, 0.35)); }
    50% { filter:
        drop-shadow(0 20px 34px rgba(0, 0, 0, 0.6))
        drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4))
        drop-shadow(0 0 22px rgba(255, 215, 0, 0.75))
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)); }
    100% { filter:
        drop-shadow(0 16px 28px rgba(0, 0, 0, 0.55))
        drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35))
        drop-shadow(0 0 12px rgba(255, 215, 0, 0.35)); }
}

/* Meld highlighted când ghost-ul trece peste el — lipire gata să se facă */
.table-meld-group.drag-over {
    outline: 3px solid var(--whist-accent, #ffd700) !important;
    outline-offset: -3px;
    box-shadow:
        0 0 24px rgba(255, 215, 0, 0.55),
        inset 0 0 20px rgba(255, 215, 0, 0.18) !important;
    transition: outline 0.08s, box-shadow 0.1s;
}

.tile.drag-over {
    border-color: var(--whist-accent);
    box-shadow: 0 0 12px var(--whist-accent-glow);
}

.tile.drag-insert-marker {
    border-left: 3px solid #ffd700;
    margin-left: 4px;
    transition: margin 0.15s, border 0.15s;
}

/* ═══ LUPA — DROP INDICATOR (ghost slot outline) ═══
   Arata user-ului EXACT unde se va aseza piesa la drop, in timp real.
   Tip "Rummikub Live" — chenar galben dashed care luneca prin raft pe masura
   ce user-ul misca degetul. Cand slot-ul tinta e ocupat → chenar portocaliu
   (indica SWAP). Cand e gol → chenar verde (indica plasare libera). */
.hand-drop-indicator {
    position: absolute;
    pointer-events: none;
    border: 2px dashed #34d399;
    background: linear-gradient(135deg,
        rgba(52, 211, 153, 0.22) 0%,
        rgba(52, 211, 153, 0.12) 100%);
    border-radius: 7px;
    box-shadow:
        0 0 14px rgba(52, 211, 153, 0.55),
        inset 0 0 12px rgba(52, 211, 153, 0.2);
    z-index: 8;
    transition: left 0.08s cubic-bezier(0.4, 0, 0.2, 1),
                top 0.08s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.12s,
                background 0.12s,
                box-shadow 0.12s;
    animation: hand-drop-indicator-pulse 1.2s ease-in-out infinite;
}
.hand-drop-indicator.hand-drop-indicator-swap {
    /* Slot ocupat → SWAP (ocupantul va muta in slot-ul piesei trase) */
    border-color: #fbbf24;
    background: linear-gradient(135deg,
        rgba(251, 191, 36, 0.28) 0%,
        rgba(245, 158, 11, 0.16) 100%);
    box-shadow:
        0 0 16px rgba(251, 191, 36, 0.65),
        inset 0 0 14px rgba(251, 191, 36, 0.25);
}
@keyframes hand-drop-indicator-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.04); opacity: 0.85; }
}

/* ═══ LOCKED ACTION BUTTONS ═══
   Butoanele "TRAGE/ETALEAZA/LIPI/ARUNCA" NU sunt dezactivate prin attr `disabled`
   (asta blocheaza click-ul complet). In schimb primesc `aria-disabled="true"` +
   `.is-locked` → click-ul trece prin ele si handler-ul arata un toast cu motivul.
   User-ul intelege MEREU de ce butonul nu merge. */
.btn-action-bar.is-locked,
.action-in-infobar.is-locked,
.btn-primary-action.is-locked,
button.is-locked {
    opacity: 0.48;
    filter: grayscale(0.45) brightness(0.92);
    cursor: help !important;
    position: relative;
}
.btn-action-bar.is-locked:hover,
.action-in-infobar.is-locked:hover,
.btn-primary-action.is-locked:hover,
button.is-locked:hover {
    opacity: 0.72;
    filter: grayscale(0.25) brightness(1);
    /* hint vizual: border subtire portocaliu care spune "da, se poate apasa, dar iti va spune de ce nu merge" */
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.45), 0 0 10px rgba(251, 191, 36, 0.25);
}
button.is-locked::before {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
    box-shadow: 0 0 4px rgba(251, 191, 36, 0.7);
    pointer-events: none;
    opacity: 0.8;
}
/* Shake scurt cand user-ul apasa pe buton locked — confirma ca butonul a fost vazut */
.shake-hint {
    animation: btnShakeHint 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes btnShakeHint {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}

/* ═══ CONTEXTUAL HINT — sugereaza user-ului pasul urmator ═══
   Apare langa bar-ul de actiuni si se actualizeaza in functie de state. */
.game-context-hint {
    /* INTOTDEAUNA vizibil — rezerva spatiul ca sa nu se miscoreze/maseste layout-ul
       cand mesajul apare/dispare. Cand e gol, ramane spatiul cu opacity redus. */
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    margin: 6px 0 0 0;
    min-height: 30px;
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.12) 0%,
        rgba(255, 180, 40, 0.06) 100%);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 10px;
    color: rgba(60, 40, 15, 0.92);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    opacity: 0.4;
    transition: opacity 0.2s ease-out;
}
.game-context-hint.visible {
    opacity: 1;
    animation: ctxHintFadeIn 0.25s ease-out;
}
.game-context-hint:empty::before {
    content: '⏳';
    opacity: 0.5;
    font-size: 13px;
}
.game-context-hint .gch-icon {
    font-size: 15px;
    line-height: 1;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
}
.game-context-hint .gch-msg {
    flex: 1;
    letter-spacing: 0.1px;
}
@keyframes ctxHintFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Dark/immersive theme variant */
body.immersive-mode .game-context-hint,
body[data-theme="midnight"] .game-context-hint,
body[data-theme="onyx"] .game-context-hint,
body[data-theme="black-diamond"] .game-context-hint {
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.14) 0%,
        rgba(100, 70, 10, 0.35) 100%);
    color: rgba(255, 230, 160, 0.95);
    border-color: rgba(255, 215, 0, 0.45);
}

/* ═══ DISCARD PILE READY ═══
   Cand user-ul are o piesa selectata si poate arunca, zona de aruncat (pile, strip,
   buton ARUNCA) pulseaza auriu pentru a invita drop-ul. Disparea imediat ce nu mai
   sunt conditiile. */
.discard-pile.discard-ready,
#discardPile.discard-ready,
#discardHistoryStrip.discard-ready,
.discard-history-strip.discard-ready {
    animation: discardPileReady 1.1s ease-in-out infinite;
    position: relative;
}
.discard-pile.discard-ready::after,
#discardPile.discard-ready::after,
#discardHistoryStrip.discard-ready::after,
.discard-history-strip.discard-ready::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 10px;
    border: 2px dashed rgba(255, 215, 0, 0.85);
    pointer-events: none;
    animation: discardPileReadyOutline 1.1s ease-in-out infinite;
    z-index: 2;
}
/* Pe butonul ARUNCA (chip-btn/action-in-infobar) — doar box-shadow, fara ::after ca
   sa nu suprapuna peste label. */
#btnDiscard.discard-ready {
    animation: discardBtnReady 1.1s ease-in-out infinite;
    position: relative;
}
@keyframes discardPileReady {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(255, 215, 0, 0.35),
            0 0 14px rgba(255, 215, 0, 0.55);
    }
    50% {
        box-shadow:
            0 0 0 3px rgba(255, 215, 0, 0.7),
            0 0 22px rgba(255, 215, 0, 0.85);
    }
}
@keyframes discardPileReadyOutline {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}
@keyframes discardBtnReady {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(255, 100, 80, 0.5),
            0 0 12px rgba(255, 180, 100, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    50% {
        box-shadow:
            0 0 0 3px rgba(255, 180, 40, 0.85),
            0 0 20px rgba(255, 215, 0, 0.8),
            inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }
}

/* ═══ GRUP NOU — gap vizual inainte de piesa marcata cu dublu-click ═══
   Permite user-ului sa faca gramezi/grupuri distincte in mana, fara sa
   afecteze serverul (pur vizual). Dublu-click pe piesa activeaza/dezactiveaza. */
.tile.hand-group-start {
    margin-left: 28px !important;
    position: relative;
    transition: margin 0.2s ease;
}
.tile.hand-group-start::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 15%;
    bottom: 15%;
    width: 3px;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.85) 0%, rgba(204, 153, 0, 0.6) 100%);
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
    pointer-events: none;
}

/* Tile Colors — Whist clasic: rosu, galben, albastru, negru */
.tile.color-red   { color: #b91c1c; text-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 -1px 1px rgba(120, 20, 20, 0.15); }
.tile.color-blue  { color: #1e40af; text-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 -1px 1px rgba(20, 30, 120, 0.15); }
.tile.color-yellow{ color: #facc15; text-shadow: 0 0 1px #7c5e00, 0 1px 0 rgba(0,0,0,0.35), -1px 0 0 #7c5e00, 1px 0 0 #7c5e00, 0 -1px 0 #7c5e00; -webkit-text-stroke: 0.4px #7c5e00; }
.tile.color-black { color: #111111; text-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 -1px 1px rgba(0, 0, 0, 0.2); }

/* ═══ JOKER — holographic shimmer + golden border + art-deco pattern ═══ */
.tile.color-joker {
    background:
        /* Damask diamond pattern */
        repeating-linear-gradient(45deg,
            transparent 0, transparent 3px,
            rgba(184, 134, 11, 0.08) 3px, rgba(184, 134, 11, 0.08) 4px),
        repeating-linear-gradient(-45deg,
            transparent 0, transparent 3px,
            rgba(184, 134, 11, 0.08) 3px, rgba(184, 134, 11, 0.08) 4px),
        /* Gold gradient base */
        linear-gradient(135deg,
            #fff8dc 0%,
            #ffecb3 20%,
            #ffd700 50%,
            #ffb300 80%,
            #cc9900 100%);
    background-size: 8px 8px, 8px 8px, 100% 100%;
    color: #7b4f00;
    font-size: 16px;
    border: 1.5px solid #b8860b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 2px;
}

/* SVG jester face — ocupa top 70% din tile */
.tile.color-joker .joker-svg {
    width: 85%;
    height: auto;
    max-height: 72%;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
    pointer-events: none;
    position: relative;
    z-index: 1;
}

/* Pe tile-uri mici (≤360px portrait), simplifica joker-ul — ascunde labelul "JOKER", marește SVG */
@media (max-width: 360px) {
    .tile.color-joker .joker-svg { width: 92%; max-height: 85%; }
    .tile.color-joker .joker-label { display: none; }
}

/* Label JOKER mic aurit sub fata */
.tile.color-joker .joker-label {
    font-family: 'Oswald', var(--font-display), sans-serif;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #8b5a00;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    position: relative;
    z-index: 1;
    line-height: 1;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.25),
        0 4px 10px rgba(184, 134, 11, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(120, 80, 0, 0.3),
        inset 0 0 0 1px rgba(255, 215, 0, 0.6);
    animation: jokerShimmer 3s ease-in-out infinite;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7),
        0 0 8px rgba(255, 215, 0, 0.5);
}

/* Holographic shimmer sweep */
.tile.color-joker::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 255, 255, 0.5) 45%,
        rgba(255, 235, 150, 0.7) 50%,
        rgba(255, 255, 255, 0.5) 55%,
        transparent 70%);
    background-size: 250% 100%;
    background-position: -100% 0;
    animation: jokerSweep 2.8s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 2;
}

@keyframes jokerShimmer {
    0%, 100% {
        box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.25),
            0 4px 10px rgba(184, 134, 11, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.8),
            inset 0 -1px 0 rgba(120, 80, 0, 0.3),
            inset 0 0 0 1px rgba(255, 215, 0, 0.6);
    }
    50% {
        box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.25),
            0 4px 14px rgba(255, 193, 7, 0.55),
            0 0 18px rgba(255, 215, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            inset 0 -1px 0 rgba(120, 80, 0, 0.3),
            inset 0 0 0 1px rgba(255, 235, 150, 0.9);
    }
}

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

/* Joker selectat: efect intens */
.tile.color-joker.selected {
    animation: jokerShimmer 1.5s ease-in-out infinite;
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.3),
        0 0 28px rgba(255, 215, 0, 0.7),
        inset 0 0 0 2px #ffd700;
}

/* Tile Number */
.tile-number {
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.tile-suit-dot {
    width: calc(var(--tile-font) * 0.7);
    height: calc(var(--tile-font) * 0.7);
    border-radius: 50%;
    margin-top: 2px;
    border: 1px solid rgba(0, 0, 0, 0.28);
    box-shadow:
        inset 0 1px 1.5px rgba(255, 255, 255, 0.42),
        inset 0 -1px 1.5px rgba(0, 0, 0, 0.2),
        0 1px 1.5px rgba(0, 0, 0, 0.22);
}

/* Gradientul punctului are culoarea centrala IDENTICA cu culoarea numarului
   (vezi .tile.color-X color: ... mai sus) — consistenta piesa/punct. */
.tile.color-red .tile-suit-dot {
    background: radial-gradient(circle at 35% 30%, #ef4444 0%, #b91c1c 60%, #7f1d1d 100%);
    border-color: #7f1d1d;
}
.tile.color-blue .tile-suit-dot {
    background: radial-gradient(circle at 35% 30%, #3b82f6 0%, #1e40af 60%, #1e3a8a 100%);
    border-color: #1e3a8a;
}
.tile.color-yellow .tile-suit-dot {
    background: radial-gradient(circle at 35% 30%, #fef9c3 0%, #facc15 55%, #a16207 100%);
    border-color: #854d0e;
}
.tile.color-black .tile-suit-dot {
    background: radial-gradient(circle at 35% 30%, #4b5563 0%, #111111 60%, #000000 100%);
    border-color: #000000;
}

/* Tile set indicator */
.tile-set-mark {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 6px;
    opacity: 0.3;
}

/* Small tiles */
.tile-sm {
    width: var(--tile-width-sm);
    height: var(--tile-height-sm);
    font-size: var(--tile-font-sm);
}

.tile-sm .tile-suit-dot {
    width: calc(var(--tile-font-sm, 14px) * 0.7);
    height: calc(var(--tile-font-sm, 14px) * 0.7);
}

/* Mini tiles (lobby/stats) */
.tile-mini {
    width: 22px;
    height: 30px;
    font-size: 12px;
    border-width: 1px;
}

/* Face-down tile (attached to others' melds) */
.tile-attached {
    opacity: 0.5;
    background: linear-gradient(135deg, var(--whist-accent), #6b21a8) !important;
    color: transparent !important;
}

.tile-attached .tile-suit-dot { display: none; }
.tile-attached .tile-number { color: transparent; }

/* Tile back — cream/beige like real whist tile backs */
.tile-back {
    background: linear-gradient(145deg, #e8dcc8, #d4c4a8, #c8b898);
    color: transparent;
    border-color: rgba(0, 0, 0, 0.12);
}

.tile-back::after {
    content: '✦';
    color: rgba(120, 90, 50, 0.25);
    font-size: 20px;
}

/* Joker swap highlight */
.tile.joker-swappable {
    border-color: var(--whist-warning);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
    cursor: pointer;
}

.tile.joker-swappable:hover {
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.5);
}

/* Tooltip on tile hover */
.tile-tooltip {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 30, 10, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s;
}

.tile:hover .tile-tooltip { opacity: 1; }


/* ================================================================================================
   11. ACTION BAR
================================================================================================ */
/* ═══ ACTION BAR — butoane mici, premium casino, profesional ═══
   2026-04-21: Redesign fin — 34px inaltime (redus de la 44px), padding compact,
   font 12px, iconite 16px. Gradients mai subtile, ring auriu subtle la hover/active.
   Functionalitatea NU se schimba (aceleasi clase, aceleasi id-uri, aceleasi state-uri). */
.action-bar {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    justify-content: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    background: transparent;
    max-width: 680px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.action-btn-game {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 12px;
    /* Subtle dark gradient cu luciu fin pe muchia de sus */
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0) 35%,
            rgba(0, 0, 0, 0.12) 100%),
        linear-gradient(180deg, #4a321a 0%, #352312 100%);
    border: 1px solid rgba(255, 215, 0, 0.12);
    border-radius: 7px;
    color: #e8d5b8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease, transform 0.12s ease, background 0.18s ease;
    white-space: nowrap;
    font-family: inherit;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.35);
    flex: 1 1 0;
    min-width: 0;
    min-height: 34px;
    line-height: 1;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.action-btn-game .material-symbols-rounded {
    font-size: 16px;
    line-height: 1;
    opacity: 0.92;
}

.action-btn-game:hover:not(:disabled) {
    border-color: rgba(255, 215, 0, 0.55);
    color: #ffd700;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 215, 0, 0.18);
    transform: translateY(-1px);
}

.action-btn-game:active:not(:disabled) {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

.action-btn-game:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    filter: saturate(0.6);
}

/* Primary action — Etaleaza (distinct verde emerald) */
.action-btn-game.btn-primary-action {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0) 40%,
            rgba(0, 0, 0, 0.12) 100%),
        linear-gradient(180deg, #2d7d3a 0%, #1a5e28 100%);
    border-color: rgba(102, 255, 128, 0.35);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.action-btn-game.btn-primary-action:hover:not(:disabled) {
    border-color: rgba(180, 255, 200, 0.7);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 2px 8px rgba(46, 125, 50, 0.45),
        0 0 0 1px rgba(102, 255, 128, 0.25);
    transform: translateY(-1px);
}

.action-btn-game.btn-primary-action:disabled {
    opacity: 0.38;
}

.action-btn-game.active {
    border-color: rgba(255, 215, 0, 0.7);
    color: #ffd700;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 215, 0, 0.35),
        0 2px 6px rgba(255, 215, 0, 0.18);
}

@media (max-width: 480px) {
    .action-btn-game span:not(.material-symbols-rounded) { display: none; }
    .action-btn-game {
        padding: 6px 8px;
        min-height: 32px;
        gap: 0;
    }
    .action-btn-game .material-symbols-rounded { font-size: 18px; }
    .action-bar { gap: 4px; padding: 4px 6px; }
}


/* ================================================================================================
   12. TURN TIMER
================================================================================================ */
.turn-timer-display {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--whist-text);
    padding: 2px 8px;
    border-radius: var(--whist-radius-xs);
    background: var(--whist-surface-2);
    border: 1px solid var(--whist-border);
}

.turn-timer-display .material-symbols-rounded {
    font-size: 16px;
    color: var(--whist-accent);
}

.turn-timer-display.warning {
    color: var(--whist-warning);
    border-color: rgba(var(--whist-warning-rgb), 0.3);
    animation: turnTimerPulse 1s ease-in-out infinite;
}

.turn-timer-display.warning .material-symbols-rounded {
    color: var(--whist-warning);
}

.turn-timer-display.danger {
    color: var(--whist-danger);
    border-color: rgba(var(--whist-danger-rgb), 0.3);
    animation: turnTimerPulse 0.5s ease-in-out infinite;
}

.turn-timer-display.danger .material-symbols-rounded {
    color: var(--whist-danger);
}

.turn-timer-bar {
    height: 4px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.turn-timer-fill {
    height: 100%;
    background:
        linear-gradient(90deg,
            rgba(255, 215, 0, 0.9) 0%,
            rgba(255, 235, 150, 1) 50%,
            rgba(255, 215, 0, 0.9) 100%);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
    border-radius: 2px;
    transition: width 1s linear;
    position: relative;
    overflow: hidden;
}

/* Animated shine on timer bar */
.turn-timer-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%);
    animation: timerShine 2s linear infinite;
}

@keyframes timerShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.turn-timer-fill.warning {
    background: linear-gradient(90deg, #fb923c 0%, #f59e0b 50%, #fb923c 100%);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
}

.turn-timer-fill.danger {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 50%, #ef4444 100%);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
    animation: timerDangerPulse 0.5s ease-in-out infinite;
}

@keyframes timerDangerPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.8); }
    50% { box-shadow: 0 0 18px rgba(239, 68, 68, 1); }
}

/* ═══ ORBITING PARTICLES on active player area ═══
   NOTA: NU se aplica pe .seat-south — acolo ::after e deja folosit pentru
   BRACKET-UL DREAPTA cu rivets (linia ~4163). Cand jucatorul sud era in rand,
   particle overridea bracket-ul → rama dreapta disparea. Pastram particle DOAR
   pentru opponents; seat-south are deja glow pulsant prin seatSouthTurnGlow. */
.opponent-area.active-turn::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #ffd700 0%, transparent 70%);
    border-radius: 50%;
    top: -2px;
    left: 50%;
    animation: orbitParticle 3s linear infinite;
    pointer-events: none;
    box-shadow:
        0 0 8px rgba(255, 215, 0, 0.8),
        0 0 16px rgba(255, 215, 0, 0.4);
}

@keyframes orbitParticle {
    0% {
        transform: translate(-50%, 0) rotate(0deg) translateX(20px) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translate(-50%, 0) rotate(360deg) translateX(20px) rotate(-360deg);
        opacity: 0;
    }
}


/* ================================================================================================
   13. GAME END OVERLAY
================================================================================================ */
.game-end-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
/* Animatie strangere piese la game end */
.tile-collecting {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease 0.1s !important;
    pointer-events: none !important;
    position: relative;
    z-index: 500;
}
.tiles-collected .tile,
.tiles-collected .opponent-tile-back,
.tiles-collected .pile-tile,
.tiles-collected .table-meld-group,
.tiles-collected .discard-history-tile,
.tiles-collected .activity-log-entry,
.tiles-collected .tile-count-badge {
    visibility: hidden !important;
}
/* Fade-out paralel pentru punctele/scorurile de pe masă */
.points-fading-out {
    transition: opacity 0.5s ease, transform 0.5s ease !important;
    opacity: 0 !important;
    transform: scale(0.85) !important;
    pointer-events: none !important;
}

.game-end-overlay.active {
    opacity: 1;
    visibility: visible;
}

.game-end-card {
    background: var(--whist-surface);
    border: 1px solid var(--whist-border);
    border-radius: var(--whist-radius);
    padding: 32px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    text-align: center;
    animation: fadeInScale 0.4s ease;
}

.result-animation {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 42px;
}

.result-animation::before {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(var(--whist-accent-rgb), 0.25) 0%, transparent 70%);
    border-radius: 50%;
    animation: resultPulse 2.5s ease-in-out infinite;
}

.game-end-header { margin-bottom: 20px; }

.game-end-icon {
    font-size: 48px;
    color: var(--whist-gold);
    display: block;
    margin-bottom: 8px;
}

.game-end-header h2 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: var(--whist-text);
}

/* Result Ranking */
.result-ranking {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--whist-radius-xs);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

.ranking-item.winner {
    background: var(--whist-accent-glow);
    border-color: var(--whist-accent);
}

.ranking-position {
    font-weight: 800;
    font-size: 16px;
    min-width: 24px;
    color: var(--whist-text-dim);
}

.ranking-item.winner .ranking-position {
    color: var(--whist-gold);
}

.ranking-name {
    flex: 1;
    font-weight: 600;
    text-align: left;
}

.ranking-score {
    font-weight: 700;
    font-size: 16px;
    color: var(--whist-accent);
}

/* Scores */
.game-end-scores {
    margin-bottom: 24px;
    text-align: left;
}

.score-row {
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 6px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease;
}

.score-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.score-row.winner {
    background: rgba(var(--whist-accent-rgb), 0.12);
    border: 1px solid rgba(var(--whist-accent-rgb), 0.4);
    box-shadow: 0 0 20px rgba(var(--whist-accent-rgb), 0.1);
}

.score-row-main {
    display: flex;
    align-items: center;
    gap: 6px;
}

.score-row .score-rank {
    font-weight: 800;
    font-size: 14px;
    min-width: 22px;
    color: var(--whist-text-dim);
}

.score-row.winner .score-rank {
    color: var(--whist-accent);
}

.score-row .score-name {
    font-weight: 600;
    flex: 1;
    text-align: left;
}

.score-row .score-value-end {
    font-weight: 800;
    font-size: 18px;
    font-family: var(--font-display);
    color: var(--whist-accent);
    margin-left: auto;
}

.score-row .score-detail {
    font-size: 11px;
    color: var(--whist-text-dim);
    margin-left: 4px;
}

.score-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    color: var(--whist-text-dim);
}

.score-breakdown span {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}

/* 2026-04-20: Per-player balance progression — "balanta before → balanta after (+delta)"
   in fiecare rand de ranking (ca Septica/Table). */
.score-balance {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    color: var(--whist-text-dim);
}

.score-balance-label {
    font-weight: 600;
    color: var(--whist-text-dim);
    opacity: 0.85;
}

.score-balance-before {
    opacity: 0.55;
    text-decoration: line-through;
    font-size: 0.9em;
}

.score-balance-arrow {
    opacity: 0.6;
    font-size: 0.95em;
    margin: 0 2px;
}

.score-balance-after {
    font-weight: 700;
    font-size: 1em;
}

.score-balance-delta {
    font-weight: 600;
    font-size: 0.9em;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    margin-left: 4px;
}

.score-balance-delta.reward-positive {
    background: rgba(34, 197, 94, 0.14);
}

.score-balance-delta.reward-negative {
    background: rgba(239, 68, 68, 0.14);
}

/* Reward colors */
.reward-positive { color: #22c55e !important; }
.reward-negative { color: #ef4444 !important; }
.reward-neutral { color: var(--whist-text-dim) !important; }

/* Result Stats */
.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); }

.result-stat-value {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--whist-accent);
}

.result-stat-label {
    font-size: 12px;
    color: var(--whist-text-dim);
    font-weight: 500;
}

/* Result stats row (inline) */
.result-stat-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--whist-text-dim);
}

/* Result stats grid (2x2) */
.result-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px;
    width: 100%;
}
.result-stat-cell {
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.result-stat-cell-val {
    font-size: clamp(14px, 3vw, 16px);
    font-weight: 800;
    color: var(--whist-accent);
    font-family: var(--font-display);
}
.result-stat-cell-lbl {
    font-size: 10px;
    color: var(--whist-text-dim);
    margin-top: 2px;
}

/* Highlight stat row */
.result-stat-highlight {
    background: rgba(var(--whist-accent-rgb), 0.08) !important;
    border-left: 3px solid var(--whist-accent);
}

/* Auto-rematch */
.auto-rematch-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    font-size: 12px;
    color: var(--whist-text-dim);
}

.rematch-switch {
    width: 36px;
    height: 20px;
    background: var(--whist-surface-2);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
    display: inline-block;
}

.rematch-switch::after {
    content: '';
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}

.rematch-switch.active {
    background: var(--whist-accent);
}

.rematch-switch.active::after {
    transform: translateX(16px);
}

.auto-rematch-countdown {
    font-size: 12px;
    color: var(--whist-accent);
    font-weight: 600;
    text-align: center;
    padding: 4px;
}

/* End Actions */
.game-end-actions {
    display: flex;
    gap: 8px;
}

.game-end-btn {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--whist-border);
    border-radius: var(--whist-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    font-family: inherit;
}

.game-end-btn .material-symbols-rounded { font-size: 20px; }

.btn-play-again {
    background: linear-gradient(135deg, var(--whist-accent), var(--whist-accent-light));
    color: white;
    border-color: transparent;
}

.btn-play-again:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--whist-accent-glow);
}

.btn-back-menu {
    background: var(--whist-surface-2);
    color: var(--whist-text);
}

.btn-back-menu:hover {
    border-color: var(--whist-accent);
}

/* ═══ Panou oferta promovare spectator — INLINE in modal premiere ═══ */
.mp-offer-in-modal {
    margin: 14px 0 8px;
    padding: 12px 14px;
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.15) 0%,
        rgba(37, 99, 235, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: mpOfferSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mpOfferSlideIn {
    0% { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}
.mp-offer-in-modal .mp-offer-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.mp-offer-in-modal .mp-offer-badge .material-symbols-rounded {
    font-size: 22px;
    color: #60a5fa;
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.5));
}
.mp-offer-in-modal .mp-offer-title {
    font-size: 13px;
    font-weight: 800;
    color: #dbeafe;
    letter-spacing: 0.2px;
}
.mp-offer-in-modal .mp-offer-progress-bar {
    width: 100%;
    height: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
    margin: 6px 0;
}
.mp-offer-in-modal .mp-offer-progress-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 3px;
    transition: width 1s linear, background 0.3s ease;
}
.mp-offer-in-modal .mp-offer-progress-fill.is-urgent {
    background: linear-gradient(90deg, #dc2626, #ef4444);
    animation: mpOfferUrgentPulse 0.6s ease-in-out infinite;
}
@keyframes mpOfferUrgentPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.mp-offer-in-modal .mp-offer-countdown {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-top: 4px;
}
.mp-offer-in-modal .mp-offer-countdown strong {
    color: #93c5fd;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Result actions (for modal variant) — butoane compacte, elegante, single-line */
.result-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    width: 100%;
    justify-content: center;
}

.result-actions .btn,
.result-actions .btn-control {
    flex: 0 1 auto;              /* nu mai umple tot spatiul — ia cat trebuie */
    min-width: 0;
    padding: 8px 14px;           /* mai compact */
    font-size: 12px;             /* era 13px */
    font-weight: 700;
    letter-spacing: 0.3px;
    border-radius: 8px;          /* era 10px */
    text-transform: uppercase;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid transparent;
    min-height: 36px;            /* era 40px */
    white-space: nowrap;         /* text pe o singura linie */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.result-actions .btn-control .material-symbols-rounded {
    font-size: 16px;
}

/* PRIMARY — Joaca din nou (albastru whist) */
.result-actions .btn-primary,
.result-actions .btn-control.btn-primary {
    background: linear-gradient(135deg,
        rgba(var(--whist-accent-rgb), 0.85) 0%,
        rgba(var(--whist-accent-rgb), 0.7) 100%
    );
    border-color: rgba(var(--whist-accent-rgb), 0.6);
    color: #fff;
    box-shadow:
        0 3px 8px rgba(var(--whist-accent-rgb), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.result-actions .btn-primary:hover,
.result-actions .btn-control.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 5px 14px rgba(var(--whist-accent-rgb), 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* SUCCESS — Intra in joc (verde) */
.result-actions .btn-success,
.result-actions .btn-control.btn-success {
    background: linear-gradient(135deg,
        rgba(34, 197, 94, 0.85) 0%,
        rgba(22, 163, 74, 0.75) 100%
    );
    border-color: rgba(34, 197, 94, 0.55);
    color: #fff;
    box-shadow:
        0 3px 8px rgba(34, 197, 94, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.result-actions .btn-success:hover {
    transform: translateY(-1px);
    box-shadow:
        0 5px 14px rgba(34, 197, 94, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* SECONDARY — Inchide (rosu outline) */
.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.1) 100%
    );
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    box-shadow:
        0 2px 6px rgba(239, 68, 68, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.result-actions .btn-secondary:hover {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.25) 0%,
        rgba(220, 38, 38, 0.2) 100%);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fff;
    transform: translateY(-1px);
}

/* Mobile: daca nu incap pe o linie, stack vertical */
@media (max-width: 480px) {
    .result-actions {
        flex-direction: column;
        gap: 6px;
    }
    .result-actions .btn,
    .result-actions .btn-control {
        width: 100%;
        flex: 0 0 auto;
        padding: 10px 14px;
    }
}

.result-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg,
        var(--whist-accent) 0%,
        var(--whist-accent-light, #e8c55a) 50%,
        var(--whist-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;
}

/* Title win/lose animations */
@keyframes resultTitleWin {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes resultTitleLose {
    0% { transform: translateY(-10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.result-title-win {
    animation: resultTitleWin 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.result-title-lose {
    animation: resultTitleLose 0.5s ease !important;
}


/* ================================================================================================
   14. CONTEXT PANEL
================================================================================================ */
/* Context Panel — copied from Table (reference) and adapted for Whist */
.context-panel {
    flex: 0 0 320px !important;
    width: 320px !important;
    max-width: 320px !important;
    min-width: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100% - var(--sab, 0px)) !important;
    max-height: calc(100vh - var(--top-bar-height, 60px) - 108px - var(--sab, 0px)) !important;
    background: linear-gradient(180deg,
        rgba(var(--whist-primary-rgb, 36, 21, 66), 0.95) 0%,
        rgba(var(--whist-primary-rgb, 36, 21, 66), 0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(var(--whist-accent-rgb), 0.1);
    box-shadow: -4px 0 30px rgba(var(--whist-accent-rgb), 0.06);
    position: relative;
    z-index: var(--z-dropdown, 100);
    transition: transform var(--transition-base, 0.3s ease);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    overflow: hidden;
}

.context-panel.active {
    transform: translateX(0);
}

.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 !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
}

.panel-header {
    flex-shrink: 0;
    padding: 4px 10px;
    border-bottom: 1px solid rgba(var(--whist-accent-rgb), 0.08);
    box-shadow: 0 2px 10px rgba(var(--whist-accent-rgb), 0.04);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-title {
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: var(--whist-accent);
    text-shadow: 0 0 10px rgba(var(--whist-accent-rgb), 0.3);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.panel-title .panel-title-icon {
    font-size: 16px !important;
    line-height: 1;
    opacity: 0.85;
}

.panel-back {
    width: 28px;
    height: 28px;
    background: var(--glass-bg, rgba(255,255,255,0.06));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    border-radius: 6px;
    color: var(--whist-text-dim);
    cursor: pointer;
    transition: all var(--transition-base, 0.3s ease);
    flex-shrink: 0;
}
.panel-back:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--whist-accent);
    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: 16px;
    transition: transform var(--transition-base, 0.3s ease);
}
.panel-back:hover .material-symbols-rounded { transform: translateX(1px); }

.panel-close {
    width: 28px;
    height: 28px;
    background: var(--glass-bg, rgba(255,255,255,0.06));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    border-radius: 6px;
    color: var(--whist-text-dim);
    cursor: pointer;
    transition: all var(--transition-base, 0.3s ease);
    flex-shrink: 0;
}
.panel-close .material-symbols-rounded { font-size: 16px; }
.panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--whist-text);
}

.panel-loading-bar {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2.5px;
    background: linear-gradient(90deg,
        rgba(var(--whist-accent-rgb), 0.6),
        rgba(var(--whist-accent-rgb), 1),
        rgba(var(--whist-accent-rgb), 0.6));
    border-radius: 0 2px 2px 0;
    box-shadow:
        0 0 8px rgba(var(--whist-accent-rgb), 0.4),
        0 0 20px rgba(var(--whist-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;
}

.panel-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: scroll !important;
    overflow-x: hidden;
    padding: clamp(8px, 2vw, 14px);
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    contain: layout style;
}

.panel-content::-webkit-scrollbar { width: 10px; display: block !important; }
.panel-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.panel-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--whist-accent-rgb), 0.6) 0%, rgba(var(--whist-accent-rgb), 0.5) 100%);
    border-radius: 9999px;
    border: 2px solid rgba(var(--whist-accent-rgb), 0.3);
    box-shadow: 0 0 6px rgba(var(--whist-accent-rgb), 0.4);
}
.panel-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(var(--whist-accent-rgb), 0.8) 0%, rgba(var(--whist-accent-rgb), 0.7) 100%);
    box-shadow: 0 0 8px rgba(var(--whist-accent-rgb), 0.6);
}
.panel-content::-webkit-scrollbar-thumb:active { background: var(--whist-accent); }

/* ═══ STATS PANEL — premium casino cards ═══ */
.stats-panel-container {
    padding: 8px 4px;
}
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.stats-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    background: linear-gradient(135deg,
        rgba(20, 45, 25, 0.55) 0%,
        rgba(10, 30, 15, 0.7) 100%);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.25);
}
.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.35), transparent);
}
.stats-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 18px rgba(0, 0, 0, 0.35),
        0 0 14px rgba(255, 215, 0, 0.15);
}
.stats-card-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.2),
        rgba(184, 134, 11, 0.12));
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.stats-card-icon .material-symbols-rounded {
    font-size: 22px;
    color: #ffd700;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4));
}
.stats-card-body {
    flex: 1;
    min-width: 0;
}
.stats-card-value {
    font-family: var(--font-tile, 'Oswald', sans-serif);
    font-size: 24px;
    font-weight: 800;
    color: #ffd700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
    letter-spacing: -0.5px;
}
.stats-card-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 235, 180, 0.6);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Specific card accent colors */
.stats-card-wins .stats-card-icon {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(22, 163, 74, 0.15));
    border-color: rgba(34, 197, 94, 0.4);
}
.stats-card-wins .stats-card-icon .material-symbols-rounded {
    color: #86efac;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.45));
}
.stats-card-wins .stats-card-value {
    color: #86efac;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

.stats-card-winrate .stats-card-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.15));
    border-color: rgba(59, 130, 246, 0.4);
}
.stats-card-winrate .stats-card-icon .material-symbols-rounded {
    color: #93c5fd;
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.45));
}
.stats-card-winrate .stats-card-value {
    color: #93c5fd;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

/* Stats Card: games (default gold) + points (default gold) — verificare explicita */
.stats-card-games .stats-card-icon,
.stats-card-points .stats-card-icon {
    /* Foloseste default-ul auriu din .stats-card-icon */
}
.stats-card-games .stats-card-value {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.stats-card-points .stats-card-value {
    color: #fde047;
    text-shadow: 0 0 10px rgba(253, 224, 71, 0.35);
}

/* Light theme */
[data-theme="light"] .stats-card {
    background: linear-gradient(135deg, rgba(255, 253, 245, 0.95) 0%, rgba(245, 238, 220, 0.9) 100%);
    border-color: rgba(184, 134, 11, 0.3);
}
[data-theme="light"] .stats-card:hover {
    border-color: rgba(184, 134, 11, 0.55);
}
[data-theme="light"] .stats-card-icon {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.35), rgba(184, 134, 11, 0.25));
    border-color: rgba(184, 134, 11, 0.45);
}
[data-theme="light"] .stats-card-value {
    color: #8b6914;
    text-shadow: 0 0 8px rgba(184, 134, 11, 0.2);
}
[data-theme="light"] .stats-card-label {
    color: rgba(139, 105, 20, 0.75);
}

/* Mobile stats — single column + tighter */
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; gap: 8px; }
    .stats-card { padding: 12px 10px; }
    .stats-card-value { font-size: 22px; }
    .stats-card-icon { width: 36px; height: 36px; }
    .stats-card-icon .material-symbols-rounded { font-size: 19px; }
}

/* Mobile online users — compact meta row */
@media (max-width: 480px) {
    .online-users-header { gap: 6px; padding: 6px 2px 10px; }
    .online-stat-pill { padding: 4px 8px; font-size: 10px; }
    .online-stat-pill strong { font-size: 11px; }
    .online-user-row { padding: 6px 8px; gap: 8px; }
    .online-user-avatar { width: 32px; height: 32px; }
    .online-user-avatar-fallback { font-size: 20px !important; }
    .online-user-name { font-size: 12px; }
    .online-user-meta { font-size: 9px; gap: 6px; }
    .online-user-meta .material-symbols-rounded { display: none; } /* Mai curat pe mobil */
    .online-user-level, .online-user-badge-you { font-size: 8px; padding: 1px 5px; }
    .online-user-rank { font-size: 8px; padding: 1px 4px; }
}

/* Micro phones (≤360) — ascund puncte/wins numbers, arata doar name + level + status */
@media (max-width: 360px) {
    .online-user-points, .online-user-wins { display: none; }
    .online-user-rank { display: none; }
}

/* ═══ PANEL EMPTY STATE (shared across all panels) ═══ */
.panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
}
.panel-empty-icon {
    font-size: 42px !important;
    opacity: 0.35;
    color: rgba(255, 215, 0, 0.45) !important;
}
.panel-empty p { margin: 0; }

/* ═══ ONLINE USERS LIST — premium casino card layout ═══ */
.online-users-header {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 4px 12px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.12);
    margin-bottom: 10px;
}
.online-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.06) 0%,
        rgba(0, 0, 0, 0.3) 100%);
    border: 1px solid rgba(255, 215, 0, 0.2);
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 235, 180, 0.85);
}
.online-stat-pill strong {
    font-size: 13px;
    color: #ffd700;
    font-weight: 800;
}
.online-pill-label {
    font-size: 10px;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.online-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
    animation: onlineDotPulse 2s ease-in-out infinite;
}
@keyframes onlineDotPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.7); }
    50% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.9); }
}
.online-stat-playing .online-pill-dot {
    background: #3b82f6;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.7);
}
.online-stat-hidden {
    opacity: 0.75;
    cursor: help;
}
.online-stat-hidden .material-symbols-rounded {
    color: rgba(255, 215, 0, 0.6);
}

/* Pill REAL users — evidentiat, verde natural */
.online-stat-real {
    background: linear-gradient(135deg,
        rgba(34, 197, 94, 0.18) 0%,
        rgba(22, 163, 74, 0.1) 100%) !important;
    border-color: rgba(34, 197, 94, 0.45) !important;
    color: rgba(220, 252, 220, 0.95) !important;
}
.online-stat-real strong {
    color: #86efac !important;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

/* Pill BOTS — stil discret, nuanta gri/albastru, nu distrage */
.online-stat-bots {
    background: linear-gradient(135deg,
        rgba(148, 163, 184, 0.12) 0%,
        rgba(71, 85, 105, 0.18) 100%) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: rgba(203, 213, 225, 0.75) !important;
    opacity: 0.85;
}
.online-stat-bots strong {
    color: #cbd5e1 !important;
}
.online-stat-bots .material-symbols-rounded {
    color: rgba(148, 163, 184, 0.8);
}

.online-users-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 2px;
}

.online-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: linear-gradient(135deg,
        rgba(20, 45, 25, 0.35) 0%,
        rgba(10, 30, 15, 0.45) 100%);
    border: 1px solid rgba(255, 215, 0, 0.08);
    border-radius: 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.online-user-row:hover {
    background: linear-gradient(135deg,
        rgba(30, 60, 35, 0.5) 0%,
        rgba(20, 45, 25, 0.6) 100%);
    border-color: rgba(255, 215, 0, 0.25);
    transform: translateX(2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.online-user-row.is-current {
    border-color: rgba(255, 215, 0, 0.5);
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.12) 0%,
        rgba(184, 134, 11, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Avatar */
.online-user-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 215, 0, 0.35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.15) 0%,
        rgba(184, 134, 11, 0.1) 100%);
}
.online-user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.online-user-avatar-fallback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px !important;
    color: rgba(255, 215, 0, 0.7);
}
.online-user-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid rgba(8, 22, 14, 0.98);
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}
.online-user-status-dot.online-status-online {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}
.online-user-status-dot.online-status-playing,
.online-user-status-dot.online-status-in_game {
    background: #3b82f6;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.6);
    animation: onlinePlayingPulse 1.6s ease-in-out infinite;
}
.online-user-status-dot.online-status-idle,
.online-user-status-dot.online-status-away {
    background: #f59e0b;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
}
@keyframes onlinePlayingPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Info column */
.online-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.online-user-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.online-user-name {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 245, 200, 0.95);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
}
.online-user-level {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.15));
    border: 1px solid rgba(59, 130, 246, 0.4);
    font-size: 9px;
    font-weight: 800;
    color: #93c5fd;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.online-user-badge-you {
    padding: 1px 7px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(184, 134, 11, 0.2));
    border: 1px solid rgba(255, 215, 0, 0.5);
    font-size: 9px;
    font-weight: 800;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.online-user-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    color: rgba(255, 245, 200, 0.55);
    flex-wrap: wrap;
}
.online-user-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.online-user-meta .material-symbols-rounded {
    opacity: 0.7;
}
.online-user-status-text {
    color: rgba(120, 200, 120, 0.75);
}
.online-user-rank {
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 235, 180, 0.7);
}
.online-user-points {
    color: #ffd700;
    font-weight: 700;
}
.online-user-wins {
    color: #fca5a5;
    font-weight: 600;
}

/* Light theme overrides */
[data-theme="light"] .online-user-row {
    background: linear-gradient(135deg, rgba(255, 253, 245, 0.9) 0%, rgba(245, 238, 220, 0.85) 100%);
    border-color: rgba(184, 134, 11, 0.2);
}
[data-theme="light"] .online-user-row:hover {
    background: linear-gradient(135deg, rgba(255, 235, 150, 0.3) 0%, rgba(255, 215, 0, 0.15) 100%);
    border-color: rgba(184, 134, 11, 0.45);
}
[data-theme="light"] .online-user-name { color: #1a1a1a; }
[data-theme="light"] .online-user-meta { color: rgba(0, 0, 0, 0.55); }
[data-theme="light"] .online-stat-pill { color: #6b5617; }

/* Panel content styling */
.panel-section {
    margin-bottom: 16px;
}

.panel-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--whist-accent);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.panel-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: var(--whist-radius-xs);
    background: var(--glass-bg);
    transition: background 0.2s;
    cursor: pointer;
}

.panel-list-item:hover {
    background: var(--glass-bg-strong);
}

/* Panel tabs (pill style) */
.panel-tabs {
    display: flex;
    gap: 4px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--whist-border);
    margin-bottom: 12px;
}

.panel-tab {
    padding: 6px 12px;
    border-radius: var(--whist-radius-full);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--whist-text-dim);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.panel-tab:hover {
    background: rgba(var(--whist-accent-rgb), 0.08);
}

.panel-tab.active {
    background: rgba(var(--whist-accent-rgb), 0.15);
    border-color: rgba(var(--whist-accent-rgb), 0.3);
    color: var(--whist-accent);
}

/* ── Lobby Panel Buttons (ported from Table .mp-create-btn) ── */
.panel-btn {
    min-height: clamp(30px, 5.5vw, 34px);
    padding: clamp(5px, 1vw, 7px) clamp(8px, 1.5vw, 12px);
    width: 100%;
    background: linear-gradient(135deg, var(--whist-accent) 0%, rgba(var(--whist-accent-rgb), 0.75) 100%);
    border: none;
    border-radius: clamp(6px, 1.2vw, 8px);
    color: #fff;
    font-weight: 700;
    font-size: clamp(11px, 2.2vw, 13px);
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.25s ease;
    white-space: nowrap;
    touch-action: manipulation;
    box-shadow: 0 2px 8px rgba(var(--whist-accent-rgb), 0.25);
    -webkit-tap-highlight-color: transparent;
}

.panel-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--whist-accent-rgb), 0.4);
}

.panel-btn:active {
    transform: translateY(0);
}

.panel-btn[disabled] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
    cursor: default;
    opacity: 0.85;
}

.panel-btn .material-symbols-rounded {
    font-size: clamp(14px, 2.5vw, 16px);
}

/* ── Lobby Room List & Cards (ported from Table .mpc-card) ── */
.panel-room-list {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.5vw, 10px);
}

.panel-room-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(--whist-primary-rgb), 0.22);
    border: 1px solid rgba(var(--whist-accent-rgb), 0.1);
    border-radius: clamp(6px, 1.2vw, 10px);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.panel-room-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0 3px 3px 0;
    transition: background 0.25s ease;
}

.panel-room-card[data-status="waiting"]::before { background: #22c55e; }
.panel-room-card[data-status="playing"]::before { background: #f59e0b; }
.panel-room-card[data-status="full"]::before    { background: #6b7280; }

.panel-room-card:hover {
    background: rgba(var(--whist-primary-rgb), 0.32);
    border-color: rgba(var(--whist-accent-rgb), 0.22);
    transform: translateY(-1px);
}

.panel-room-card:active {
    transform: translateY(0);
}

.panel-room-card .room-name {
    font-size: clamp(11px, 2.3vw, 13px);
    font-weight: 700;
    color: var(--whist-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-room-card .room-meta {
    font-size: clamp(10px, 2vw, 11px);
    color: var(--whist-text-dim);
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 2px;
}

.panel-room-card .room-action {
    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 ease;
    touch-action: manipulation;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--whist-accent) 0%, rgba(var(--whist-accent-rgb), 0.75) 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(var(--whist-accent-rgb), 0.25);
}

.panel-room-card .room-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(var(--whist-accent-rgb), 0.4);
}

.panel-room-card .room-action.spectate {
    background: rgba(var(--whist-primary-rgb), 0.18);
    color: var(--whist-text-dim);
    border: 1px solid rgba(var(--whist-primary-rgb), 0.28);
    box-shadow: none;
}

.panel-room-card .room-action.spectate:hover {
    background: rgba(var(--whist-primary-rgb), 0.28);
    color: var(--whist-text);
}

/* Lobby status info bar (connection + counts) */
.panel-lobby-status {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: clamp(10px, 2vw, 12px);
    color: var(--whist-text-dim);
    padding: 6px 8px;
    background: rgba(var(--whist-primary-rgb), 0.1);
    border: 1px solid rgba(var(--whist-accent-rgb), 0.06);
    border-radius: 8px;
    margin-bottom: 8px;
}

.panel-lobby-status strong {
    color: var(--whist-accent);
    font-weight: 700;
}

/* Empty room list state */
.panel-room-empty {
    text-align: center;
    padding: clamp(24px, 5vw, 36px) clamp(12px, 2vw, 16px);
    color: var(--whist-text-dim);
    font-size: clamp(11px, 2.2vw, 13px);
    background: rgba(var(--whist-primary-rgb), 0.08);
    border: 1px dashed rgba(var(--whist-accent-rgb), 0.15);
    border-radius: 10px;
}

.panel-room-empty .material-symbols-rounded {
    font-size: clamp(32px, 6vw, 44px);
    display: block;
    margin-bottom: 8px;
    opacity: 0.3;
}

/* ── Leaderboard Panel (ported from Table .lb-*) ── */
.lb-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lb-sort-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: rgba(var(--whist-primary-rgb), 0.12);
    border: 1px solid rgba(var(--whist-accent-rgb), 0.08);
    border-radius: 10px;
}

.lb-sort-btn {
    flex: 1 1 auto;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--whist-text-dim);
    font-size: clamp(10px, 2vw, 11px);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.lb-sort-btn:hover {
    background: rgba(var(--whist-accent-rgb), 0.08);
    color: var(--whist-text);
}

.lb-sort-btn.active {
    background: rgba(var(--whist-accent-rgb), 0.18);
    border-color: rgba(var(--whist-accent-rgb), 0.35);
    color: var(--whist-accent);
    box-shadow: 0 2px 8px rgba(var(--whist-accent-rgb), 0.2);
}

.lb-sort-icon {
    font-size: clamp(14px, 3vw, 16px);
    line-height: 1;
}

.lb-sort-label {
    font-size: clamp(9px, 1.8vw, 10px);
    letter-spacing: 0.02em;
}

.lb-loading {
    text-align: center;
    padding: clamp(32px, 6vw, 48px) 20px;
}

.lb-loading-icon {
    font-size: clamp(36px, 7vw, 48px);
    animation: lb-pulse 1.5s ease-in-out infinite;
}

.lb-loading-text {
    color: var(--whist-text-dim);
    font-size: clamp(11px, 2.2vw, 13px);
    margin: 12px 0 0;
}

@keyframes lb-pulse {
    0%, 100% { transform: scale(1); opacity: 0.9; filter: drop-shadow(0 0 8px rgba(var(--whist-accent-rgb), 0.4)); }
    50% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 16px rgba(var(--whist-accent-rgb), 0.7)); }
}

.lb-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(var(--whist-primary-rgb), 0.10);
    border: 1px solid rgba(var(--whist-accent-rgb), 0.05);
    border-radius: 8px;
    transition: background 0.2s ease;
}

.lb-row:hover {
    background: rgba(var(--whist-primary-rgb), 0.18);
}

.lb-row.lb-top {
    background: rgba(var(--whist-accent-rgb), 0.08);
    border-color: rgba(var(--whist-accent-rgb), 0.18);
}

.lb-row.lb-top[data-rank="1"] {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.12) 0%, rgba(var(--whist-accent-rgb), 0.05) 100%);
    border-color: rgba(255, 215, 0, 0.25);
}

.lb-rank {
    width: 32px;
    text-align: center;
    font-size: clamp(14px, 2.8vw, 18px);
    font-weight: 700;
    color: var(--whist-text-dim);
    flex-shrink: 0;
}

.lb-top .lb-rank {
    font-size: clamp(18px, 3.5vw, 22px);
}

.lb-name {
    flex: 1;
    font-size: clamp(12px, 2.5vw, 13px);
    font-weight: 600;
    color: var(--whist-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-value {
    font-size: clamp(12px, 2.5vw, 13px);
    font-weight: 700;
    color: var(--whist-accent);
    flex-shrink: 0;
}

.lb-empty,
.lb-error {
    text-align: center;
    padding: clamp(24px, 5vw, 40px) 20px;
    color: var(--whist-text-dim);
    font-size: clamp(11px, 2.2vw, 13px);
}

.lb-empty .material-symbols-rounded {
    font-size: clamp(36px, 7vw, 52px);
    display: block;
    margin-bottom: 10px;
    opacity: 0.3;
}

.lb-error {
    color: #ef4444;
}

/* ── Rules Panel (polished layout) ── */
.panel-rules {
    padding: clamp(6px, 1.5vw, 10px);
    font-size: clamp(12px, 2.4vw, 13px);
    line-height: 1.6;
    color: var(--whist-text-dim);
}

.panel-rules .rules-title {
    color: var(--whist-accent);
    font-size: clamp(15px, 3vw, 17px);
    font-weight: 800;
    margin: 0 0 10px;
    text-shadow: 0 0 12px rgba(var(--whist-accent-rgb), 0.3);
}

.panel-rules .rules-intro {
    padding: 10px 12px;
    background: rgba(var(--whist-accent-rgb), 0.08);
    border-left: 3px solid var(--whist-accent);
    border-radius: 0 8px 8px 0;
    margin: 0 0 16px;
    color: var(--whist-text);
    font-size: clamp(12px, 2.4vw, 13px);
}

.panel-rules .rules-intro strong {
    color: var(--whist-accent);
}

.panel-rules .rules-heading {
    color: var(--whist-text);
    font-size: clamp(13px, 2.6vw, 14px);
    font-weight: 700;
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(var(--whist-accent-rgb), 0.12);
    letter-spacing: 0.02em;
}

.panel-rules .rules-list {
    margin: 0 0 4px;
    padding-left: 20px;
    list-style: disc;
}

.panel-rules .rules-list li {
    margin-bottom: 5px;
    color: var(--whist-text-dim);
}

.panel-rules .rules-list li strong {
    color: var(--whist-text);
    font-weight: 700;
}

/* Text body pentru fiecare regula (numerotate automat: 1. / 2. / 3. in paragrafe) */
.panel-rules .rules-text {
    color: var(--whist-text-dim);
    font-size: 12.5px;
    line-height: 1.65;
    margin: 4px 0 14px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid rgba(var(--whist-accent-rgb), 0.2);
    border-radius: 0 6px 6px 0;
}
.panel-rules .rules-text p {
    margin: 0 0 6px;
}
.panel-rules .rules-text p:last-child {
    margin-bottom: 0;
}
.panel-rules .rules-text strong {
    color: var(--whist-text);
    font-weight: 700;
}

/* Mobile context panel */
@media (max-width: 767px) {
    .context-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        max-height: 100dvh !important;
        height: 100dvh !important;
        z-index: 500;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .context-panel.hidden {
        transform: translateX(100%);
        width: 0 !important;
        max-width: 0 !important;
        flex-basis: 0 !important;
    }
    /* Chat: let panel-content scroll naturally; input bar uses sticky bottom */
    .context-panel.panel-type-chat .panel-content {
        padding: 6px !important;
    }
    .whist-chat-wrapper #chatGlobalUsers,
    .whist-chat-wrapper #chatRoomUsers {
        max-height: 100px !important;
    }
    .whist-chat-wrapper .cmsg-container {
        max-height: 50vh !important;
    }
    .whist-chat-wrapper #chatInput {
        flex: 1 1 auto;
        min-width: 0;
    }
    .context-panel input[type="text"],
    .context-panel textarea,
    .whist-chat-wrapper #chatInput {
        font-size: 16px !important; /* iOS: prevent zoom on focus */
    }
}

/* Landscape phones — shrink header and keep chat input reachable */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .context-panel {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        z-index: 500;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .context-panel .panel-header {
        padding: 6px 10px !important;
        min-height: 40px !important;
    }
    .whist-chat-wrapper #chatGlobalUsers,
    .whist-chat-wrapper #chatRoomUsers {
        max-height: 60px !important;
    }
    .whist-chat-wrapper .chat-tabs-bar .ct-label {
        display: none;
    }
}


/* ================================================================================================
   15. MODALS
================================================================================================ */
.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: 3000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    position: relative;
    background: linear-gradient(145deg,
        rgba(36, 21, 66, 0.98) 0%,
        rgba(26, 10, 46, 0.97) 50%,
        rgba(36, 21, 66, 0.98) 100%
    );
    border: 1px solid var(--whist-border);
    border-radius: var(--whist-radius-lg);
    width: 92%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 0 0 1px rgba(var(--whist-accent-rgb), 0.06),
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 24px 80px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transform: scale(0.9) translateY(30px);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.active .modal-container {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.modal-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--whist-accent-rgb), 0.6) 50%,
        transparent 100%
    );
    pointer-events: none;
}

.modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--whist-border);
    position: relative;
    background: linear-gradient(135deg,
        rgba(var(--whist-accent-rgb), 0.04) 0%,
        transparent 100%
    );
}

.modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--whist-accent-rgb), 0.3) 50%,
        transparent 100%
    );
}

.modal-header h2 {
    font-family: var(--font-display);
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--whist-accent);
    margin: 0;
}

.modal-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--whist-radius-sm);
    background: rgba(var(--whist-accent-rgb), 0.1);
    border: 1px solid rgba(var(--whist-accent-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.modal-icon .material-symbols-rounded {
    font-size: 22px;
    color: var(--whist-accent);
}

.modal-title {
    font-family: var(--font-display);
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 700;
    color: var(--whist-accent);
}

.modal-subtitle {
    font-size: 12px;
    color: var(--whist-text-dim);
}

.modal-close,
.modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--whist-radius-xs);
    color: var(--whist-text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close:hover,
.modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.modal-close .material-symbols-rounded,
.modal-close-btn .material-symbols-rounded {
    font-size: 18px;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--whist-accent-rgb), 0.2) transparent;
}

.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb {
    background: rgba(var(--whist-accent-rgb), 0.2);
    border-radius: 2px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--whist-border);
    background: linear-gradient(135deg, rgba(var(--whist-accent-rgb), 0.03) 0%, transparent 100%);
}

/* ── Rules Modal ── */
.rules-modal {
    max-width: 600px;
}

.rules-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--whist-border);
}

.rules-section:last-child {
    border-bottom: none;
}

.rules-section h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--whist-accent);
    margin: 0 0 8px;
}

.rules-section p,
.rules-section ul {
    font-size: 13px;
    color: var(--whist-text-dim);
    line-height: 1.6;
    margin: 0;
}

.rules-section ul {
    padding-left: 20px;
}

.rules-section li {
    margin-bottom: 4px;
}

/* ── Settings Modal ── */
.settings-modal {
    max-width: 480px;
}

.settings-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--whist-border);
    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.04) 50%, transparent 100%);
    transition: all 0.5s ease;
}

.settings-section:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(var(--color-accent-rgb), 0.02) 100%
    );
    border-color: rgba(var(--color-accent-rgb), 0.2);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(var(--color-accent-rgb), 0.15);
}

.settings-section:hover::before { left: 100%; }

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

.settings-section h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--whist-text);
}

.setting-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    gap: 12px;
}

.setting-item label {
    flex: 1;
    font-size: 13px;
    color: var(--whist-text);
    cursor: pointer;
}

.setting-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--whist-text-dim);
}

/* Custom checkbox */
.setting-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 22px;
    background: var(--whist-surface-2);
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}

.setting-item input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--whist-text-dim);
    top: 2px;
    left: 2px;
    transition: transform 0.3s, background 0.3s;
}

.setting-item input[type="checkbox"]:checked {
    background: var(--whist-accent);
}

.setting-item input[type="checkbox"]:checked::before {
    background: white;
    transform: translateX(18px);
}

/* Custom range slider */
.setting-item input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    width: 120px;
    height: 4px;
    background: var(--whist-surface-2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.setting-item input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--whist-accent);
    border: 2px solid white;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.setting-item input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--whist-accent);
    border: 2px solid white;
    cursor: pointer;
}

/* Theme Selector */
.theme-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

@media (max-width: 480px) {
    .theme-selector {
        grid-template-columns: repeat(2, 1fr);
    }
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: var(--glass-bg);
    border: 2px solid transparent;
    border-radius: var(--whist-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.theme-option:hover {
    border-color: rgba(var(--whist-accent-rgb), 0.3);
    background: var(--glass-bg-strong);
}

.theme-option.active {
    border-color: var(--whist-accent);
    background: var(--whist-accent-glow);
}

.theme-preview {
    display: flex;
    gap: 4px;
    width: 100%;
}

.theme-color {
    flex: 1;
    height: 24px;
    border-radius: 4px;
}

.theme-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--whist-text-dim);
    text-align: center;
}

.theme-check {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 12px;
    color: var(--whist-accent);
    font-weight: 700;
}

.theme-option.active .theme-check {
    display: block;
}

/* Settings Buttons */
.settings-buttons {
    display: flex;
    gap: 8px;
}

.settings-buttons .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: var(--whist-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--whist-border);
    font-family: inherit;
}

.settings-buttons .btn .material-symbols-rounded { font-size: 18px; }

.settings-buttons .btn-primary {
    background: linear-gradient(135deg, var(--whist-accent), var(--whist-accent-light));
    color: white;
    border-color: transparent;
}

.settings-buttons .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--whist-accent-glow);
}

.settings-buttons .btn-secondary {
    background: var(--whist-surface-2);
    color: var(--whist-text-dim);
}

.settings-buttons .btn-secondary:hover {
    border-color: var(--whist-accent);
    color: var(--whist-text);
}

/* ── Game Setup Modal ── */
.game-setup-modal {
    max-width: 520px;
}

.game-setup-modal .btn-close {
    position: absolute;
    top: 16px;
    right: 16px;
}

.difficulty-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
}

.difficulty-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: var(--glass-bg);
    border: 2px solid transparent;
    border-radius: var(--whist-radius-sm);
    color: var(--whist-text-dim);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.difficulty-btn:hover {
    border-color: rgba(var(--whist-accent-rgb), 0.3);
    background: var(--glass-bg-strong);
}

.difficulty-btn.active {
    border-color: var(--whist-accent);
    background: var(--whist-accent-glow);
    color: var(--whist-accent);
}

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

.diff-name {
    font-size: 12px;
    font-weight: 700;
}

.diff-desc {
    font-size: 10px;
    color: var(--whist-text-muted);
}

.diff-stars {
    font-size: 12px;
    color: var(--whist-gold);
}

.setup-info {
    padding: 12px;
    background: var(--glass-bg);
    border-radius: var(--whist-radius-sm);
    border: 1px solid var(--glass-border);
    margin-top: 12px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--whist-text-dim);
}

.info-item .material-symbols-rounded {
    font-size: 16px;
    color: var(--whist-accent);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Button controls (modal footer) */
.btn-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--whist-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--whist-border);
    font-family: inherit;
}

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

.btn-control.btn-primary {
    background: linear-gradient(135deg, var(--whist-accent), var(--whist-accent-light));
    color: white;
    border-color: transparent;
}

.btn-control.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--whist-accent-glow);
}

.btn-control.btn-secondary {
    background: var(--whist-surface-2);
    color: var(--whist-text-dim);
}

.btn-control.btn-secondary:hover {
    border-color: var(--whist-accent);
    color: var(--whist-text);
}

/* ── Game End Modal ── */
.game-end-modal {
    max-width: 380px !important;
    width: 92% !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.game-end-modal > .modal-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 20px 18px 16px !important;
    text-align: center !important;
    gap: 0 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ── Room Detail Modal ── */
.room-detail-modal {
    max-width: 380px;
    width: 92%;
    padding: clamp(14px, 2.5vw, 18px);
}
.rdm-header {
    text-align: center;
    padding-bottom: clamp(8px, 1.5vw, 12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: clamp(8px, 1.5vw, 12px);
}
.rdm-room-name {
    font-size: clamp(14px, 3vw, 17px);
    font-weight: 800;
    color: var(--whist-text);
    margin-bottom: 2px;
}
.rdm-host {
    font-size: clamp(10px, 2vw, 11px);
    color: var(--whist-text-dim);
}
.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: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.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(--whist-text);
    flex: 1;
}
.rdm-player-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(var(--whist-accent-rgb), 0.15);
    color: var(--whist-accent);
}
.rdm-empty-slot {
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    text-align: center;
    font-size: 10px;
    color: var(--whist-text-dim);
}
.rdm-settings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: clamp(10px, 2vw, 14px);
}
.rdm-setting {
    padding: 6px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    text-align: center;
}
.rdm-setting-value {
    font-size: clamp(14px, 2.5vw, 16px);
    font-weight: 800;
    color: var(--whist-accent);
}
.rdm-setting-label {
    font-size: 9px;
    color: var(--whist-text-dim);
    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(--whist-accent), var(--whist-accent-dark, #b8860b));
    color: var(--whist-bg);
    box-shadow: 0 4px 16px rgba(var(--whist-accent-rgb), 0.3);
}
.rdm-action-btn.rdm-join:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(var(--whist-accent-rgb), 0.4);
}
.rdm-action-btn.rdm-spectate {
    background: rgba(0, 0, 0, 0.3);
    color: var(--whist-text);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.rdm-action-btn.rdm-spectate:hover { background: rgba(0, 0, 0, 0.4); }


/* ================================================================================================
   16. ROOM WAITING VIEW — container pentru .mw-room-takeover (stil Table)
================================================================================================ */
.room-waiting-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
}
/* .mw-room-takeover este copilul direct — îl lăsăm să umple tot containerul */
.room-waiting-view > .mw-room-takeover {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Body.room-waiting — forțează ascunderea elementelor de joc și conține overflow (ca Table) */
body.room-waiting #lobbyView,
body.room-waiting #gameSetupView,
body.room-waiting #gamePlayView,
body.room-waiting #actionBar,
body.room-waiting #lobbyAdLeft,
body.room-waiting #lobbyAdRight,
body.room-waiting .mp-game-bar,
body.room-waiting #mpGameBar {
    display: none !important;
}
body.room-waiting .game-canvas { overflow: hidden !important; }
body.room-waiting .game-area {
    overflow: hidden !important;
    min-height: 0 !important;
}
body.room-waiting #roomWaitingView {
    display: flex !important;
}
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;
}

.room-waiting-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--whist-accent);
}

.room-waiting-players {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.room-player-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--whist-radius-sm);
    min-width: 80px;
}

.room-player-slot.occupied {
    border-color: var(--whist-accent);
}

.room-player-slot.empty {
    border-style: dashed;
    opacity: 0.5;
}

.room-player-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--whist-accent-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--whist-accent);
}

.room-player-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--whist-text);
}

.room-waiting-actions {
    display: flex;
    gap: 8px;
}

.room-waiting-info {
    font-size: 13px;
    color: var(--whist-text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ================================================================================================
   17. DISCONNECT OVERLAY
================================================================================================ */
.disconnect-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 5000;
    animation: fadeIn 0.3s;
}

.disconnect-icon {
    font-size: 48px;
    color: var(--whist-warning);
    animation: disconnectPulse 2s ease-in-out infinite;
}

.disconnect-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--whist-text);
}

.disconnect-message {
    font-size: 14px;
    color: var(--whist-text-dim);
    text-align: center;
    max-width: 300px;
}

.disconnect-actions {
    display: flex;
    gap: 8px;
}


/* ================================================================================================
   18. TOAST NOTIFICATIONS
================================================================================================ */
.toast-container {
    position: fixed;
    top: 60px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast-msg {
    padding: 10px 16px;
    border-radius: var(--whist-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: white;
    pointer-events: auto;
    animation: toastIn 0.3s ease;
    max-width: 340px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.toast-msg.success { background: #16a34a; }
.toast-msg.error { background: #dc2626; }
.toast-msg.warning { background: #d97706; }
.toast-msg.info { background: var(--whist-accent); }
.toast-msg.removing { animation: toastOut 0.3s ease forwards; }


/* ================================================================================================
   19. PARTICLE CONTAINER
================================================================================================ */
.particle-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
}


/* ================================================================================================
   20. DOUBLE GAME BANNER
================================================================================================ */
.double-game-banner {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1e293b;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    z-index: 50;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.4);
    animation: doublePulse 2s ease-in-out infinite;
}


/* ================================================================================================
   21. GAME LOADER
================================================================================================ */
/* ═══════════ WHIST LOADER — Professional Wood & Gold ═══════════ */
.game-loader {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(212, 165, 68, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(139, 69, 19, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, #2a1b0e 0%, #1a0f06 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    transition: opacity 0.6s ease, transform 0.6s ease;
    overflow: hidden;
}
.game-loader.hidden,
.game-loader.fade-out {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.02);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Ascunde INSTANT continutul (piese Fan Deal + Joker) cand loader-ul incepe
   sa dispara — doar fundalul face fade scurt (250ms), continutul e oprit
   imediat ca sa nu se mai vada animatia in timp ce lobby-ul apare. */
.game-loader.hidden .loader-content,
.game-loader.fade-out .loader-content {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}

/* Subtle wood grain texture */
.game-loader::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(139,69,19,0.03) 0 2px,
            transparent 2px 6px),
        radial-gradient(circle at 1px 1px, rgba(212,165,68,0.04) 1px, transparent 0);
    background-size: auto, 4px 4px;
    pointer-events: none;
    z-index: 0;
}

/* Floating Whist tiles in background */
.loader-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(212, 165, 68, 0.15), transparent 70%);
}
.loader-ambient::before,
.loader-ambient::after {
    content: '';
    position: absolute;
    width: 220px; height: 220px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    animation: loaderOrb 8s ease-in-out infinite;
}
.loader-ambient::before {
    background: radial-gradient(circle, #d4a544, transparent 70%);
    top: -40px; left: -40px;
}
.loader-ambient::after {
    background: radial-gradient(circle, #c53030, transparent 70%);
    bottom: -40px; right: -40px;
    animation-delay: -4s;
}
@keyframes loaderOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(30px, -20px) scale(1.15); }
}

/* Floating tiles decorative */
.loader-content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 380px;
    max-width: 92vw;
    background:
        linear-gradient(145deg,
            rgba(58, 35, 16, 0.85) 0%,
            rgba(42, 27, 14, 0.7) 100%);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(212, 165, 68, 0.35);
    border-radius: 20px;
    padding: 34px 28px 26px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(212, 165, 68, 0.08),
        inset 0 1px 0 rgba(255, 220, 140, 0.12),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

/* Gold corner ornaments */
.loader-content::before,
.loader-content::after {
    content: '';
    position: absolute;
    width: 40px; height: 40px;
    border: 2px solid #d4a544;
    opacity: 0.5;
}
.loader-content::before {
    top: 12px; left: 12px;
    border-right: none; border-bottom: none;
    border-radius: 8px 0 0 0;
}
.loader-content::after {
    bottom: 12px; right: 12px;
    border-left: none; border-top: none;
    border-radius: 0 0 8px 0;
}

/* Logo area with floating tiles */
.loader-logo {
    position: relative;
    margin-bottom: 28px;
    padding-top: 8px;
}
.loader-logo::before {
    content: '';
    position: absolute;
    top: -8px; left: 50%;
    width: 100px; height: 3px;
    background: linear-gradient(90deg, transparent, #d4a544, transparent);
    transform: translateX(-50%);
    opacity: 0.6;
}

.logo-text {
    font-family: 'Georgia', 'Playfair Display', serif;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 6px;
    background: linear-gradient(180deg, #f0c66a 0%, #d4a544 50%, #a8822a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 40px rgba(212, 165, 68, 0.5);
    position: relative;
    display: inline-block;
    animation: logoShine 3s ease-in-out infinite;
}
.logo-text::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent);
    background-clip: text;
    -webkit-background-clip: text;
    animation: logoShimmer 2.8s linear infinite;
}
@keyframes logoShine {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 8px rgba(212,165,68,0.3)); }
    50%      { filter: brightness(1.15) drop-shadow(0 0 16px rgba(212,165,68,0.6)); }
}
@keyframes logoShimmer {
    0%   { transform: translateX(0); }
    100% { transform: translateX(200%); }
}

/* ═══════════════ CINEMATIC FAN DEAL ANIMATION ═══════════════ */
.loader-fan-deal {
    position: relative;
    width: 100%;
    height: 150px;
    margin-bottom: 12px;
    perspective: 1000px;
    overflow: visible;
}
/* Spotlight beam cinematic */
.loader-fan-deal::after {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 260px; height: 100%;
    pointer-events: none;
    background: radial-gradient(ellipse 45% 55% at 50% 40%, rgba(255,220,150,0.22), transparent 65%);
    mix-blend-mode: screen;
    z-index: 0;
}

.lfd-tile {
    position: absolute;
    width: 36px; height: 52px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', 'Bebas Neue', sans-serif;
    font-weight: 700;
    font-size: 18px;
    background: linear-gradient(145deg, #ffffff 0%, #fefdf6 30%, #f9f3e3 65%, #efe6d0 100%);
    box-shadow:
        0 1px 0 rgba(180,150,100,0.9),
        0 2px 0 rgba(160,130,85,0.85),
        0 3px 0 rgba(140,110,70,0.8),
        0 4px 0 rgba(120,90,55,0.75),
        0 5px 0 rgba(100,75,45,0.7),
        inset 0 2px 1px rgba(255,255,255,1),
        inset 0 -2px 3px rgba(160,120,70,0.35),
        inset 2px 0 1px rgba(255,255,255,0.5),
        inset -2px 0 2px rgba(140,100,60,0.25);
    overflow: hidden;
    top: 0;
    left: 50%;
    margin-left: -18px;
    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,0.4))
        drop-shadow(0 8px 10px rgba(0,0,0,0.3));
    animation: lfdDeal 2.8s infinite cubic-bezier(.22,1.2,.36,1);
}
.lfd-tile::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 22%, transparent 45%);
    z-index: 1;
    mix-blend-mode: screen;
}
/* Rim light auriu pe marginea de sus — reflexie spotlight */
.lfd-tile::after {
    content: '';
    position: absolute;
    top: 0; left: 2px; right: 2px;
    height: 35%;
    border-radius: 5px 5px 20px 20px;
    background: linear-gradient(180deg, rgba(255,240,200,0.55) 0%, rgba(255,220,150,0.15) 60%, transparent 100%);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
}
.lfd-num {
    position: relative; z-index: 3;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.lfd-dot {
    position: relative; z-index: 3;
    width: 12px; height: 12px;
    border-radius: 50%;
    margin-top: 3px;
    border: 1px solid rgba(0,0,0,0.28);
    box-shadow:
        inset 0 1px 1.5px rgba(255,255,255,0.42),
        inset 0 -1px 1.5px rgba(0,0,0,0.2),
        0 1px 1.5px rgba(0,0,0,0.22);
}
.lfd-red   .lfd-num { color: #b91c1c; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.lfd-red   .lfd-dot { background: radial-gradient(circle at 35% 30%, #ef4444 0%, #b91c1c 60%, #7f1d1d 100%); border-color: #7f1d1d; }
.lfd-blue  .lfd-num { color: #1e40af; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.lfd-blue  .lfd-dot { background: radial-gradient(circle at 35% 30%, #3b82f6 0%, #1e40af 60%, #1e3a8a 100%); border-color: #1e3a8a; }
.lfd-yellow .lfd-num { color: #facc15; -webkit-text-stroke: 0.4px #7c5e00; text-shadow: 0 0 1px #7c5e00, 0 1px 0 rgba(0,0,0,0.35); }
.lfd-yellow .lfd-dot { background: radial-gradient(circle at 35% 30%, #fef9c3 0%, #facc15 55%, #a16207 100%); border-color: #854d0e; }
.lfd-black .lfd-num { color: #111; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.lfd-black .lfd-dot { background: radial-gradient(circle at 35% 30%, #4b5563 0%, #111 60%, #000 100%); border-color: #000; }

.lfd-joker {
    background:
        repeating-linear-gradient(45deg, transparent 0, transparent 3px, rgba(184,134,11,0.1) 3px, rgba(184,134,11,0.1) 4px),
        repeating-linear-gradient(-45deg, transparent 0, transparent 3px, rgba(184,134,11,0.1) 3px, rgba(184,134,11,0.1) 4px),
        linear-gradient(135deg, #fff8dc 0%, #ffecb3 20%, #ffd700 50%, #ffb300 80%, #cc9900 100%);
    background-size: 8px 8px, 8px 8px, 100% 100%;
    border: 1.5px solid #b8860b;
    padding: 3px 2px;
    /* Glow + umbre identice cu .tile.color-joker din joc (jokerShimmer) */
    box-shadow:
        0 1px 0 rgba(180,150,100,0.9),
        0 2px 0 rgba(160,130,85,0.85),
        0 3px 0 rgba(140,110,70,0.8),
        0 4px 0 rgba(120,90,55,0.75),
        0 5px 0 rgba(100,75,45,0.7),
        0 6px 14px rgba(255,193,7,0.55),
        0 0 18px rgba(255,215,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(120,80,0,0.3),
        inset 0 0 0 1px rgba(255,235,150,0.9);
    animation: lfdJokerShimmer 2.2s ease-in-out infinite;
}
@keyframes lfdJokerShimmer {
    0%, 100% {
        box-shadow:
            0 1px 0 rgba(180,150,100,0.9),
            0 2px 0 rgba(160,130,85,0.85),
            0 3px 0 rgba(140,110,70,0.8),
            0 4px 0 rgba(120,90,55,0.75),
            0 5px 0 rgba(100,75,45,0.7),
            0 4px 10px rgba(184,134,11,0.3),
            0 0 10px rgba(255,215,0,0.25),
            inset 0 1px 0 rgba(255,255,255,0.8),
            inset 0 -1px 0 rgba(120,80,0,0.3),
            inset 0 0 0 1px rgba(255,215,0,0.6);
    }
    50% {
        box-shadow:
            0 1px 0 rgba(180,150,100,0.9),
            0 2px 0 rgba(160,130,85,0.85),
            0 3px 0 rgba(140,110,70,0.8),
            0 4px 0 rgba(120,90,55,0.75),
            0 5px 0 rgba(100,75,45,0.7),
            0 6px 18px rgba(255,193,7,0.7),
            0 0 26px rgba(255,215,0,0.55),
            0 0 50px rgba(255,215,0,0.25),
            inset 0 1px 0 rgba(255,255,255,1),
            inset 0 -1px 0 rgba(120,80,0,0.3),
            inset 0 0 0 1.5px rgba(255,235,150,1);
    }
}
.lfd-jface {
    position: relative; z-index: 2;
    width: 88%; max-height: 72%;
    filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.35));
}
.lfd-jlbl {
    position: relative; z-index: 2;
    font-size: 5.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #8b5a00;
    margin-top: 1px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    font-family: 'Oswald', sans-serif;
}
.lfd-joker::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: overlay;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.5) 45%, rgba(255,235,150,0.7) 50%, rgba(255,255,255,0.5) 55%, transparent 70%);
    background-size: 250% 100%;
    animation: lfdJokerSweep 2.8s ease-in-out infinite;
}
@keyframes lfdJokerSweep {
    0%   { background-position: -100% 0; }
    50%,100% { background-position: 200% 0; }
}

/* Fan positions — tiles fan out at bottom of 150px container */
.lfd-t1 { animation-delay: 0s;    --r: -32deg; --x: -80px; --y: 78px; }
.lfd-t2 { animation-delay: 0.08s; --r: -20deg; --x: -48px; --y: 88px; }
.lfd-t3 { animation-delay: 0.16s; --r:  -8deg; --x: -16px; --y: 94px; }
.lfd-t4 { animation-delay: 0.24s; --r:   5deg; --x:  16px; --y: 94px; }
.lfd-t5 { animation-delay: 0.32s; --r:  18deg; --x:  48px; --y: 88px; }
.lfd-t6 { animation-delay: 0.40s; --r:  30deg; --x:  80px; --y: 78px; }

/* Joker hero center — apare DUPA ce toate piesele fan sunt asezate */
.lfd-t7 {
    animation: lfdHero 2.8s infinite cubic-bezier(.22,1.2,.36,1);
    animation-delay: 0.55s;
    animation-fill-mode: backwards;
    z-index: 10;
    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,0.5))
        drop-shadow(0 10px 14px rgba(0,0,0,0.4))
        drop-shadow(0 0 20px rgba(255,215,0,0.7))
        drop-shadow(0 0 35px rgba(255,215,0,0.4));
}

@keyframes lfdDeal {
    0%, 5%    { transform: translate(0, -30px) rotate(-200deg) scale(0.6); opacity: 0; }
    12%       { opacity: 1; }
    28%, 75%  { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); opacity: 1; }
    90%, 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); opacity: 0; }
}
@keyframes lfdHero {
    0%, 22%   { transform: translate(0, -50px) rotateY(-180deg) scale(0.4); opacity: 0; }
    32%       { opacity: 1; transform: translate(0, 45px) rotateY(0) scale(1.05); }
    38%, 78%  { transform: translate(0, 45px) rotateY(0) scale(0.95); opacity: 1; }
    92%, 100% { transform: translate(0, 45px) rotateY(0) scale(0.95); opacity: 0; }
}

/* Checklist */
.loader-checklist {
    margin-bottom: 22px;
    text-align: left;
}
.loader-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: rgba(244, 236, 216, 0.65);
    border-radius: 8px;
    margin-bottom: 4px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(212, 165, 68, 0.08);
    transition: all 0.3s ease;
}
.loader-check-item.active {
    background: rgba(212, 165, 68, 0.08);
    border-color: rgba(212, 165, 68, 0.25);
    color: #f4ecd8;
}
.loader-check-item.done {
    background: rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.2);
    color: #a8d9a7;
}

.check-icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(212, 165, 68, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    position: relative;
}
.check-icon::after { content: ''; }
.loader-check-item.active .check-icon {
    border-color: #d4a544;
    box-shadow: 0 0 10px rgba(212, 165, 68, 0.4);
    animation: checkSpin 1s linear infinite;
}
.loader-check-item.active .check-icon::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: #d4a544;
    animation: checkSpin 0.8s linear infinite;
}
.loader-check-item.done .check-icon {
    border-color: #7ac17c;
    background: #4caf50;
    color: #fff;
}
.loader-check-item.done .check-icon::after { content: '✓'; }
@keyframes checkSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.check-label { flex: 1; }
.check-detail {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.7;
    font-family: 'Courier New', monospace;
    color: #d4a544;
}

/* Progress bar — gold with shimmer */
.loader-progress-container { margin-bottom: 18px; }
.progress-bar-bg {
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(212, 165, 68, 0.15);
    position: relative;
}
.progress-bar-fill {
    height: 100%;
    width: 0;
    background:
        linear-gradient(90deg, #a8822a 0%, #d4a544 30%, #f0c66a 50%, #d4a544 70%, #a8822a 100%);
    background-size: 200% 100%;
    border-radius: 999px;
    transition: width 0.35s ease;
    box-shadow:
        0 0 12px rgba(212, 165, 68, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: progressShimmer 2s linear infinite;
    position: relative;
}
.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6));
    border-radius: 0 999px 999px 0;
}
@keyframes progressShimmer {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: rgba(244, 236, 216, 0.7);
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}
.percent-text {
    color: #d4a544;
    font-weight: 700;
}

.loader-tip {
    font-size: 12px;
    color: rgba(244, 236, 216, 0.55);
    font-style: italic;
    padding: 10px 0 0;
    margin-top: 4px;
    border-top: 1px solid rgba(212, 165, 68, 0.15);
    line-height: 1.5;
}
.loader-tip::before {
    content: '💡 ';
    opacity: 0.8;
}


/* ================================================================================================
   22. ORIENTATION WARNING
================================================================================================ */
.orientation-warning {
    display: none !important;   /* portrait mobil SUPORTAT — joc responsiv, nu mai forteaza landscape */
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--whist-bg, #1c2333);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px;
    text-align: center;
}
.orientation-content {
    max-width: 300px;
}
.orientation-content h2 {
    font-size: 22px;
    color: var(--whist-text);
    margin: 16px 0 8px;
}
.orientation-content p {
    font-size: 14px;
    color: var(--whist-text-dim);
    line-height: 1.5;
}
.phone-icon {
    font-size: 64px;
    animation: tiltPhone 2s ease-in-out infinite;
}
.rotate-arrow {
    font-size: 40px;
    color: var(--whist-accent);
    animation: spin 2s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Portrait mobile NU mai forteaza warning — joc responsiv inline (vezi @media sub 767px) */


/* ================================================================================================
   23. SCROLLBAR STYLES
================================================================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background: var(--whist-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover { background: var(--whist-accent); }


/* ================================================================================================
   23a. CHAT TABS BAR (5 icon tabs)
================================================================================================ */
.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(--whist-text-dim);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-width: 0;
}
.ct-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--whist-text);
}
.ct-tab.ct-active {
    background: rgba(var(--whist-accent-rgb), 0.15);
    color: var(--whist-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(--whist-accent-rgb), 0.15); color: var(--whist-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; }

/* ================================================================================================
   23b. CHAT MESSAGES
================================================================================================ */
.cmsg-container {
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    background: rgba(0,0,0,0.12);
    border-radius: 8px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--whist-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(--whist-accent-rgb), 0.2); border-radius: 4px; }

.cmsg-bubble {
    padding: 7px 11px;
    font-size: 13px;
    color: var(--whist-text);
    word-break: break-word;
    line-height: 1.4;
    border-radius: 12px;
    background: rgba(255,255,255, 0.06);
    border: 1px solid rgba(255,255,255, 0.06);
    margin-bottom: 4px;
}
.cmsg-bubble.cmsg-me {
    border-radius: 12px 12px 3px 12px;
    background: linear-gradient(135deg,
        rgba(var(--whist-accent-rgb), 0.25) 0%,
        rgba(var(--whist-accent-rgb), 0.15) 100%);
    border: 1px solid rgba(var(--whist-accent-rgb), 0.12);
}
.cmsg-bubble.cmsg-system {
    text-align: center;
    font-style: italic;
    color: var(--whist-text-dim);
    background: transparent;
    border: none;
    font-size: 11px;
}
.cmsg-name {
    font-size: 10px;
    font-weight: 600;
    margin-right: 6px;
}
.cmsg-time {
    font-size: 9px;
    color: var(--whist-text-dim);
    margin-left: 6px;
    opacity: 0.6;
}
.cmsg-empty {
    text-align: center;
    color: var(--whist-text-dim);
    padding: 20px;
    font-size: 12px;
}
.cmsg-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255,255,255, 0.06);
    border: 1px solid rgba(255,255,255, 0.1);
    border-radius: 10px;
    color: var(--whist-text);
    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(--whist-accent-rgb), 0.4);
    background: rgba(255,255,255, 0.1);
}

/* ── Chat Row Layout (Table-compatible) ── */
.cmsg-row {
    display: flex;
    gap: 8px;
    padding: 4px 0;
    align-items: flex-start;
}
.cmsg-row.cmsg-me {
    flex-direction: row-reverse;
}
.cmsg-row.cmsg-other {
    flex-direction: row;
}
.cmsg-row.cmsg-me .cmsg-bubble {
    border-radius: 12px 12px 3px 12px;
    background: linear-gradient(135deg,
        rgba(var(--whist-accent-rgb), 0.25) 0%,
        rgba(var(--whist-accent-rgb), 0.15) 100%);
    border: 1px solid rgba(var(--whist-accent-rgb), 0.12);
}
.cmsg-row.cmsg-me .cmsg-time {
    text-align: right;
}
.cmsg-row .cmsg-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 80%;
    min-width: 0;
}
.cmsg-me .cmsg-content { align-items: flex-end; }
.cmsg-other .cmsg-content { align-items: flex-start; }
.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(--whist-accent-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--whist-accent);
    flex-shrink: 0;
}
.cmsg-row .cmsg-name {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}
.cmsg-me .cmsg-name { color: var(--whist-accent); }
.cmsg-other .cmsg-name { color: var(--whist-text-dim); }
.cmsg-row .cmsg-time {
    font-size: 9px;
    color: var(--whist-text-dim);
    padding: 0 3px;
}
.cmsg-del-btn {
    background: none;
    border: none;
    color: var(--whist-text-dim);
    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;
}
.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;
}
.cmsg-enter {
    animation: cmsgSlideIn 0.25s ease-out;
}
@keyframes cmsgSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Chat User Popup (copied from Table) ── */
.chat-user-popup,
.cmsg-user-popup {
    position: fixed;
    z-index: 10001;
    width: 170px;
    background: var(--whist-surface-2, #1e1240);
    border: 1px solid rgba(var(--whist-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,
.cmsg-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(--whist-accent-rgb), 0.1);
    background: rgba(var(--whist-accent-rgb), 0.04);
}
.chat-popup-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--whist-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(--whist-text-dim);
    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(--whist-accent-rgb), 0.08);
    color: var(--whist-text);
}
.chat-popup-btn .material-symbols-rounded {
    font-size: 16px;
    color: var(--whist-accent);
}
.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;
}
.chat-popup-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(var(--whist-accent-rgb), 0.15);
    color: var(--whist-accent);
    margin-left: 6px;
}

/* Chat user lists scrollable */
#chatGlobalUsers,
#chatRoomUsers {
    max-height: 155px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--whist-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(--whist-accent-rgb), 0.2); border-radius: 4px; }

/* Chat nav 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);
}
@keyframes chatBadgeIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

/* ================================================================================================
   23c. EMOJI PICKER
================================================================================================ */
.prv-emoji-picker {
    display: none;
    flex-direction: column;
    background: linear-gradient(135deg, var(--whist-bg, rgba(20, 16, 32, 0.98)), rgba(var(--whist-primary-rgb, 36, 21, 66), 0.98));
    border: 1px solid rgba(var(--whist-accent-rgb), 0.15);
    border-radius: 14px;
    padding: 8px;
    gap: 4px;
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.2);
    max-height: 280px;
    margin-bottom: 4px;
}
.prv-emoji-close {
    position: absolute;
    top: 4px;
    right: 8px;
    background: none;
    border: none;
    color: var(--whist-text-dim);
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
}
.prv-emoji-tabs {
    display: flex;
    gap: 2px;
    padding: 0 2px 6px;
    overflow-x: auto;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    scrollbar-width: none;
}
.prv-emoji-tabs::-webkit-scrollbar { display: none; }
.prv-emoji-tab {
    flex: 0 0 auto;
    min-width: 32px;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    transition: background 0.15s, opacity 0.15s;
    opacity: 0.5;
    line-height: 1;
    text-align: center;
}
.prv-emoji-tab:hover { background: rgba(255, 255, 255, 0.08); opacity: 0.8; }
.prv-emoji-tab.active {
    background: rgba(var(--whist-accent-rgb), 0.15);
    opacity: 1;
}
.prv-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
    gap: 3px;
    max-height: 180px;
    overflow-y: auto;
    padding: 4px 2px;
}
.prv-emoji-grid::-webkit-scrollbar { width: 4px; }
.prv-emoji-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.prv-emoji-btn {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.12s, background 0.15s;
    padding: 2px;
    line-height: 1;
}
.prv-emoji-btn:hover {
    background: rgba(var(--whist-accent-rgb), 0.15);
    border-color: rgba(var(--whist-accent-rgb), 0.3);
    transform: scale(1.15);
}

/* ================================================================================================
   23d. MULTIPLAYER CREATE ROOM MODAL
================================================================================================ */
.mp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: mp-modal-fadein 0.3s ease-out;
}
@keyframes mp-modal-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
.mp-modal-card {
    background: linear-gradient(145deg,
        var(--whist-surface-2, #1e1040) 0%,
        var(--whist-bg, #0f0820) 50%,
        var(--whist-surface-2, #1e1040) 100%
    );
    border: 1px solid rgba(var(--whist-accent-rgb), 0.2);
    border-radius: 20px;
    padding: 28px;
    width: 90%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(var(--whist-accent-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: mp-modal-slidein 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--whist-accent-rgb), 0.4) transparent;
}
.mp-modal-card::-webkit-scrollbar { width: 6px; }
.mp-modal-card::-webkit-scrollbar-track { background: rgba(var(--whist-accent-rgb), 0.05); border-radius: 3px; }
.mp-modal-card::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--whist-accent-rgb), 0.5) 0%, rgba(var(--whist-accent-rgb), 0.25) 100%);
    border-radius: 3px;
}
@keyframes mp-modal-slidein {
    from { transform: translateY(20px) scale(0.92); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.mp-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.mp-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(var(--whist-accent-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mp-modal-icon .material-symbols-rounded {
    font-size: 24px;
    color: var(--whist-accent);
}
.mp-modal-title {
    color: var(--whist-accent);
    font-size: 1.3rem;
    margin: 0;
    font-weight: 700;
}
.mp-modal-subtitle {
    color: var(--whist-text-dim);
    font-size: 0.8rem;
    margin: 2px 0 0;
}
.mp-modal-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--whist-text-dim);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s;
}
.mp-modal-close:hover { background: rgba(255,255,255,0.08); }
.mp-modal-field { margin-bottom: 16px; }
.mp-modal-label {
    display: block;
    color: var(--whist-text-dim);
    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(var(--whist-accent-rgb), 0.06);
    border: 1px solid rgba(var(--whist-accent-rgb), 0.1);
    border-radius: 10px;
    color: var(--whist-text);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
}
.mp-modal-input:focus {
    border-color: var(--whist-accent);
    box-shadow: 0 0 12px rgba(var(--whist-accent-rgb), 0.15);
}
.mp-modal-input::placeholder { color: var(--whist-text-dim); opacity: 0.5; }
.mp-modal-hint {
    font-size: 0.75rem;
    color: var(--whist-text-dim);
    margin-top: 6px;
    padding-left: 2px;
}
.mp-opt-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.mp-opt-btn {
    flex: 1;
    min-width: 60px;
    padding: 8px 12px;
    background: rgba(var(--whist-accent-rgb), 0.06);
    border: 1px solid rgba(var(--whist-accent-rgb), 0.08);
    border-radius: 10px;
    color: var(--whist-text-dim);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.mp-opt-btn:hover {
    background: rgba(var(--whist-accent-rgb), 0.1);
    border-color: rgba(var(--whist-accent-rgb), 0.25);
}
.mp-opt-btn.selected {
    background: rgba(var(--whist-accent-rgb), 0.18);
    border-color: var(--whist-accent);
    color: var(--whist-accent);
    box-shadow:
        0 4px 12px rgba(var(--whist-accent-rgb), 0.2),
        0 0 16px rgba(var(--whist-accent-rgb), 0.1);
}
.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.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.mp-modal-btn-create {
    background: linear-gradient(135deg, var(--whist-accent) 0%, var(--whist-accent-dark) 100%);
    color: white;
    box-shadow:
        0 4px 16px rgba(var(--whist-accent-rgb), 0.3),
        0 0 20px rgba(var(--whist-accent-rgb), 0.15);
}
.mp-modal-btn-create:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(var(--whist-accent-rgb), 0.4),
        0 0 32px rgba(var(--whist-accent-rgb), 0.25);
}
.mp-modal-btn-cancel {
    background: rgba(var(--whist-accent-rgb), 0.06);
    color: var(--whist-text-dim);
    border: 1px solid rgba(var(--whist-accent-rgb), 0.08);
}
.mp-modal-btn-cancel:hover {
    background: rgba(var(--whist-accent-rgb), 0.12);
    border-color: rgba(var(--whist-accent-rgb), 0.15);
}

/* ================================================================================================
   24. LIGHT THEME OVERRIDES
================================================================================================ */

/* Light theme: Chat */
[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(--whist-accent-rgb), 0.1); color: var(--whist-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; }
[data-theme="light"] .cmsg-container { background: rgba(0,0,0,0.04); }
[data-theme="light"] .cmsg-bubble { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .cmsg-bubble.cmsg-me {
    background: linear-gradient(135deg, rgba(var(--whist-accent-rgb), 0.15) 0%, rgba(var(--whist-accent-rgb), 0.08) 100%);
    border-color: rgba(var(--whist-accent-rgb), 0.15);
}
[data-theme="light"] .cmsg-input { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .cmsg-input:focus { background: rgba(0,0,0,0.06); border-color: rgba(var(--whist-accent-rgb), 0.3); }
[data-theme="light"] .cmsg-avatar-initial { background: rgba(var(--whist-accent-rgb), 0.1); }
[data-theme="light"] .cmsg-me .cmsg-bubble { background: linear-gradient(135deg, rgba(var(--whist-accent-rgb), 0.12) 0%, rgba(var(--whist-accent-rgb), 0.06) 100%); border-color: rgba(var(--whist-accent-rgb), 0.12); }
[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-me .cmsg-name { color: var(--whist-accent); }
[data-theme="light"] .cmsg-other .cmsg-name { color: #64748b; }
[data-theme="light"] .chat-username-link:hover { filter: brightness(0.8); }
[data-theme="light"] .cmsg-user-popup,
[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(--whist-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(--whist-accent-rgb), 0.06);
    color: #222;
}
[data-theme="light"] .chat-popup-btn.chat-popup-danger { color: #dc2626; }
[data-theme="light"] .chat-popup-btn.chat-popup-danger:hover {
    background: rgba(239, 68, 68, 0.06);
    color: #b91c1c;
}
[data-theme="light"] .prv-emoji-picker {
    background: linear-gradient(135deg, rgba(248, 249, 250, 0.98) 0%, rgba(240, 242, 244, 0.98) 100%);
    border-color: rgba(var(--whist-accent-rgb), 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .prv-emoji-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .prv-emoji-btn:hover {
    background: rgba(var(--whist-accent-rgb), 0.1);
}

/* Light theme: Create Room Modal */
[data-theme="light"] .mp-modal-card {
    background: linear-gradient(145deg, #f8f9fa 0%, #fff 50%, #f8f9fa 100%);
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .mp-modal-input { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: var(--whist-text); }
[data-theme="light"] .mp-opt-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); color: var(--whist-text-dim); }
[data-theme="light"] .mp-opt-btn.selected { background: rgba(var(--whist-accent-rgb), 0.12); color: var(--whist-accent); }
[data-theme="light"] .prv-emoji-picker {
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,249,250,0.98));
    border-color: rgba(0,0,0,0.1);
}

/* 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-category-label {
    color: rgba(30, 27, 75, 0.4);
}

[data-theme="light"] .drawer-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
    color: rgba(30, 27, 75, 0.6);
}

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

/* Light theme: Top Bar — cream ivory with gold accents (matches light theme tile aesthetic) */
[data-theme="light"] .top-bar {
    background:
        repeating-linear-gradient(45deg,
            transparent 0, transparent 10px,
            rgba(184, 134, 11, 0.02) 10px, rgba(184, 134, 11, 0.02) 11px),
        repeating-linear-gradient(-45deg,
            transparent 0, transparent 10px,
            rgba(184, 134, 11, 0.02) 10px, rgba(184, 134, 11, 0.02) 11px),
        radial-gradient(ellipse 60% 100% at 50% 0%,
            rgba(255, 215, 0, 0.12) 0%,
            transparent 70%),
        linear-gradient(180deg, rgba(255,253,245,0.98) 0%, rgba(248,243,230,0.95) 100%);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg,
        transparent 0%,
        rgba(184, 134, 11, 0.35) 20%,
        rgba(184, 134, 11, 0.55) 50%,
        rgba(184, 134, 11, 0.35) 80%,
        transparent 100%) 1;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .top-bar::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(184, 134, 11, 0.08) 40%,
        rgba(255, 215, 0, 0.14) 50%,
        rgba(184, 134, 11, 0.08) 60%,
        transparent 100%);
}
[data-theme="light"] .top-bar::after {
    background: linear-gradient(90deg,
        transparent,
        rgba(184, 134, 11, 0.7) 30%,
        rgba(255, 215, 0, 0.95) 50%,
        rgba(184, 134, 11, 0.7) 70%,
        transparent);
}
[data-theme="light"] .brand-title {
    background: linear-gradient(135deg,
        #8b6914 0%,
        #b8860b 25%,
        #d4a040 50%,
        #b8860b 75%,
        #8b6914 100%);
    background-size: 300% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.6));
}
[data-theme="light"] .brand-section .brand-title::after {
    color: rgba(139, 105, 20, 0.75);
    -webkit-text-fill-color: rgba(139, 105, 20, 0.75);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .brand-section::after {
    background: linear-gradient(180deg,
        transparent,
        rgba(184, 134, 11, 0.4) 30%,
        rgba(184, 134, 11, 0.6) 50%,
        rgba(184, 134, 11, 0.4) 70%,
        transparent);
}

/* Light theme: Nav Rail */
[data-theme="light"] .nav-rail {
    box-shadow:
        0 -2px 16px rgba(0, 0, 0, 0.08),
        0 -1px 0 rgba(var(--whist-accent-rgb), 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    background:
        linear-gradient(0deg,
            rgba(250, 249, 247, 0.98) 0%,
            rgba(245, 243, 238, 0.95) 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .nav-bar-btn {
    color: var(--color-text-secondary, rgba(30, 27, 75, 0.5));
    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, #1e1b4b);
    background: rgba(var(--whist-accent-rgb), 0.15);
    border-color: rgba(var(--whist-accent-rgb), 0.3);
}
[data-theme="light"] .nav-bar-btn.active {
    color: var(--color-text-primary, #1e1b4b);
    background: linear-gradient(135deg,
        rgba(var(--whist-accent-rgb), 0.2) 0%,
        rgba(var(--whist-accent-rgb), 0.15) 100%
    );
    border-color: var(--whist-accent);
}
[data-theme="light"] .nav-bar-btn .material-symbols-rounded {
    color: var(--color-text-secondary, rgba(30, 27, 75, 0.5));
}
[data-theme="light"] .nav-bar-btn:hover .material-symbols-rounded,
[data-theme="light"] .nav-bar-btn.active .material-symbols-rounded {
    color: var(--whist-accent);
}
[data-theme="light"] .nav-bar-fab {
    color: #fff;
    box-shadow: 0 4px 16px rgba(var(--whist-accent-rgb), 0.3);
}
[data-theme="light"] .nav-bar-fab.nav-fab-profile {
    background: transparent;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .nav-bar-fab.nav-fab-profile:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
[data-theme="light"] .action-btn {
    background:
        linear-gradient(145deg,
            rgba(255, 253, 245, 0.85) 0%,
            rgba(245, 238, 220, 0.7) 100%);
    border-color: rgba(184, 134, 11, 0.25);
    color: rgba(139, 105, 20, 0.75);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(184, 134, 11, 0.1),
        0 2px 6px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .action-btn:hover {
    background:
        linear-gradient(145deg,
            rgba(255, 235, 150, 0.4) 0%,
            rgba(255, 215, 0, 0.22) 100%);
    color: #8b6914;
    border-color: rgba(184, 134, 11, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(184, 134, 11, 0.15),
        0 0 0 1px rgba(184, 134, 11, 0.25),
        0 4px 12px rgba(184, 134, 11, 0.2);
}
[data-theme="light"] .brand-icon {
    background: linear-gradient(145deg, #ffffff 0%, #f9f3e0 50%, #ebdfbd 100%);
    border-color: #8b6914;
}
[data-theme="light"] .brand-icon::after {
    color: #a01717;
}

/* Light theme: Status bar items */
[data-theme="light"] .status-item { color: rgba(30, 27, 75, 0.6); }
[data-theme="light"] .status-item .material-symbols-rounded { color: var(--whist-accent); }
[data-theme="light"] .score-value { color: var(--whist-accent); }
[data-theme="light"] .score-label { color: rgba(30, 27, 75, 0.4); }
[data-theme="light"] .status-btn {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.08);
    color: rgba(30, 27, 75, 0.5);
}
[data-theme="light"] .status-btn:hover {
    background: rgba(var(--whist-accent-rgb), 0.08);
    color: var(--whist-accent);
}
[data-theme="light"] .balance-badge {
    background: rgba(var(--whist-accent-rgb), 0.06);
    border-color: rgba(var(--whist-accent-rgb), 0.12);
}
[data-theme="light"] .xp-bar-container {
    background: rgba(var(--whist-accent-rgb), 0.04);
    border-color: rgba(var(--whist-accent-rgb), 0.08);
}
[data-theme="light"] .xp-progress-track { background: rgba(0,0,0,0.06); }

/* Light theme: Immersive Toggle */
[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(--whist-accent-dark);
}
[data-theme="light"] .immersive-toggle-float:hover {
    border-color: rgba(var(--whist-accent-rgb), 0.4);
    box-shadow: 0 0 18px rgba(var(--whist-accent-rgb), 0.2), 0 4px 16px rgba(0,0,0,0.08);
}
[data-theme="light"] .immersive-glow {
    background: radial-gradient(circle, rgba(var(--whist-accent-rgb), 0.08) 0%, transparent 70%);
}

/* Light theme: Context Panel */
[data-theme="light"] .context-panel {
    background: linear-gradient(180deg,
        rgba(248, 249, 250, 0.98) 0%,
        rgba(255, 255, 255, 0.98) 100%);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.06);
    border-left-color: rgba(0, 0, 0, 0.08);
}

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

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

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

[data-theme="light"] .panel-close {
    color: rgba(30, 27, 75, 0.5);
}

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

/* Light theme: Modal */
[data-theme="light"] .modal-overlay {
    background: rgba(0, 0, 0, 0.45);
}

[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%);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 24px 80px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .modal-container::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--whist-accent-rgb), 0.5) 50%,
        transparent 100%);
}

[data-theme="light"] .modal-header {
    background: linear-gradient(135deg,
        rgba(var(--whist-accent-rgb), 0.04) 0%,
        transparent 100%);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

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

[data-theme="light"] .modal-close,
[data-theme="light"] .modal-close-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: #999;
}

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

[data-theme="light"] .modal-subtitle { color: #888; }

[data-theme="light"] .modal-footer {
    border-top-color: rgba(0, 0, 0, 0.06);
    background: linear-gradient(135deg, rgba(var(--whist-accent-rgb), 0.03) 0%, transparent 100%);
}

[data-theme="light"] .modal-footer .btn-secondary {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #666;
}

[data-theme="light"] .modal-body {
    scrollbar-color: rgba(var(--whist-accent-rgb), 0.25) rgba(0, 0, 0, 0.03);
}

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

[data-theme="light"] .modal-body::-webkit-scrollbar-thumb {
    background: rgba(var(--whist-accent-rgb), 0.2);
}

/* Light theme: Setup */
[data-theme="light"] .difficulty-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(30, 27, 75, 0.6);
}

[data-theme="light"] .difficulty-btn:hover {
    border-color: rgba(var(--whist-accent-rgb), 0.3);
    background: rgba(var(--whist-accent-rgb), 0.06);
}

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

[data-theme="light"] .count-btn,
[data-theme="light"] .diff-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(30, 27, 75, 0.6);
}

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

[data-theme="light"] .count-btn.active,
[data-theme="light"] .diff-btn.active {
    border-color: var(--whist-accent);
    background: rgba(var(--whist-accent-rgb), 0.1);
    color: var(--whist-accent);
}

/* Light theme: Checkbox & Range */
[data-theme="light"] .setting-item input[type="checkbox"] {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .setting-item input[type="checkbox"]::before {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .setting-item input[type="checkbox"]:checked {
    background: var(--whist-accent);
}

[data-theme="light"] .setting-item input[type="checkbox"]:checked::before {
    background: white;
}

[data-theme="light"] .setting-item input[type="range"] {
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .setting-item input[type="range"]::-webkit-slider-thumb {
    background: var(--whist-accent);
    border-color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Light theme: Tiles */
[data-theme="light"] .tile {
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .tile:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .tile.selected {
    box-shadow: 0 8px 24px rgba(var(--whist-accent-rgb), 0.2);
}

[data-theme="light"] .tile-back {
    background: linear-gradient(135deg, var(--whist-accent), var(--whist-accent-dark));
}

[data-theme="light"] .opponent-tile-back {
    background: linear-gradient(172deg, #ead7a8 0%, #dcc58a 55%, #c8ad6a 100%);
}

[data-theme="light"] .pile-tile {
    background: linear-gradient(135deg, var(--whist-accent), var(--whist-accent-dark));
}

/* Light theme: Game areas */
[data-theme="light"] .opponent-area {
    background: white;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .table-melds-area {
    background: rgba(var(--whist-accent-rgb), 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .table-zone-label {
    color: var(--whist-accent);
}

[data-theme="light"] .pile-label {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .activity-log {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .activity-log-header {
    color: var(--whist-accent);
    background: rgba(0, 0, 0, 0.03);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .activity-log-header .material-symbols-rounded {
    color: var(--whist-accent);
}

[data-theme="light"] .activity-log-entry {
    color: rgba(0, 0, 0, 0.78);
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .activity-log-entry:nth-child(odd) {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .activity-log-entry:hover {
    background: rgba(var(--whist-accent-rgb), 0.10);
    border-color: rgba(var(--whist-accent-rgb), 0.25);
}

[data-theme="light"] .activity-log-entry:last-child {
    background: linear-gradient(180deg, rgba(var(--whist-accent-rgb),0.10), rgba(var(--whist-accent-rgb),0.04));
    border-color: rgba(var(--whist-accent-rgb), 0.28);
    box-shadow: 0 0 0 1px rgba(var(--whist-accent-rgb), 0.08) inset;
}

[data-theme="light"] .activity-log-entry .log-player-name {
    color: var(--whist-accent);
}

[data-theme="light"] .activity-log-entry .log-action-type {
    color: #0284c7;      /* cyan-700 pentru contrast pe fundal deschis */
}

[data-theme="light"] .activity-log-entry .log-details {
    color: rgba(0, 0, 0, 0.60);
}

[data-theme="light"] .hand-scroll-arrow {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--whist-accent);
}

[data-theme="light"] .table-meld-group {
    background: white;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .arrangement-zone {
    background: white;
    border-color: var(--whist-accent);
}

[data-theme="light"] .game-end-card {
    background: white;
    border-color: rgba(0, 0, 0, 0.08);
}

/* Light theme: Lobby */
[data-theme="light"] .lobby-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .lobby-card.lc-clickable:hover {
    background: rgba(var(--whist-accent-rgb), 0.06);
    border-color: rgba(var(--whist-accent-rgb), 0.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .lobby-stats-bar,
[data-theme="light"] .lobby-ai-card,
[data-theme="light"] .lobby-leaderboard {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .lobby-chip {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(30, 27, 75, 0.6);
}

[data-theme="light"] .lobby-chip.active {
    background: rgba(var(--whist-accent-rgb), 0.1);
    border-color: rgba(var(--whist-accent-rgb), 0.3);
    color: var(--whist-accent);
}

[data-theme="light"] .lobby-search-toggle,
[data-theme="light"] .lobby-sort-select {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(30, 27, 75, 0.5);
}

[data-theme="light"] .lobby-search-wrap {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .lobby-search-input {
    color: var(--whist-text);
}

[data-theme="light"] .lobby-guest-overlay {
    background: rgba(240, 240, 245, 0.9);
}

/* Light theme: Chat */
[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);
}

[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: transparent;
}

[data-theme="light"] .chat-messages::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(var(--color-accent-rgb), 0.2) 0%,
        rgba(var(--color-accent-rgb), 0.12) 100%
    );
}

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

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

[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);
}

/* Light theme: Action bar */
[data-theme="light"] .action-btn-game {
    background: white;
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--whist-text);
}

[data-theme="light"] .action-btn-game:hover:not(:disabled) {
    background: rgba(var(--whist-accent-rgb), 0.08);
    border-color: rgba(var(--whist-accent-rgb), 0.3);
    color: var(--whist-accent);
}

/* Light theme: Setup card */
[data-theme="light"] .setup-card {
    background: white;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

/* Light theme: Loader */
[data-theme="light"] .game-loader {
    background: var(--whist-bg);
}

[data-theme="light"] .progress-bar-bg {
    background: rgba(0, 0, 0, 0.08);
}

/* Light theme: Toast */
[data-theme="light"] .toast-msg {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Light theme: Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(var(--whist-accent-rgb), 0.15);
}

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

/* Light theme: Status bar */
[data-theme="light"] .status-item {
    color: rgba(30, 27, 75, 0.5);
}

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

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

/* Light theme: Theme selector */
[data-theme="light"] .theme-option {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .theme-option:hover {
    background: rgba(var(--whist-accent-rgb), 0.06);
}

[data-theme="light"] .theme-option.active {
    background: rgba(var(--whist-accent-rgb), 0.1);
}

/* Light theme: Surface */
[data-theme="light"] .game-canvas {
    background: transparent;
}

[data-theme="light"] body {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(var(--whist-accent-rgb), 0.02) 0%, transparent 50%),
        linear-gradient(135deg, #f0f0f5 0%, #e8e0f8 50%, #f0f0f5 100%);
}

/* ================================================================================================
   LIGHT THEME — Additional Overrides (copied from Whist reference)
================================================================================================ */

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

/* Modal icon */
[data-theme="light"] .modal-icon {
    background: rgba(var(--color-accent-rgb), 0.08);
    border-color: rgba(var(--color-accent-rgb), 0.15);
}

/* Modal footer secondary button hover */
[data-theme="light"] .modal-footer .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* Modal body scrollbar thumb hover */
[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.3) 100%
    );
}

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

/* Settings Section */
[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);
}

/* Theme name & check */
[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;
}

/* Buttons */
[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);
}

/* Stats */
[data-theme="light"] .stat-item {
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(245, 245, 245, 0.5) 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-top-color: rgba(255, 255, 255, 0.8);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 3px rgba(0, 0, 0, 0.05);
}

[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);
}

/* Profile Avatar */
[data-theme="light"] .profile-avatar-img {
    border-color: rgba(var(--color-accent-rgb), 0.35);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 0 0 3px rgba(var(--color-accent-rgb), 0.08),
        0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Unified Profile Modal */
[data-theme="light"] .unified-modal {
    background: #f8f6f1;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15), 0 0 40px rgba(var(--color-accent-rgb), 0.08);
}
[data-theme="light"] .unified-modal::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--color-accent-rgb), 0.1) 0%, transparent 60%);
}
[data-theme="light"] .unified-tabs {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .unified-tab { color: rgba(0,0,0,0.5); }
[data-theme="light"] .unified-tab:hover { color: rgba(0,0,0,0.8); }
[data-theme="light"] .unified-tab.active { color: #fff; }
[data-theme="light"] .unified-modal .btn-close {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .unified-modal .btn-close::before,
[data-theme="light"] .unified-modal .btn-close::after { background: rgba(0,0,0,0.7); }
[data-theme="light"] .profile-info-item,
[data-theme="light"] .activity-stat-card,
[data-theme="light"] .pm-game-card,
[data-theme="light"] .settings-section,
[data-theme="light"] .pm-social-counts,
[data-theme="light"] .pm-badge-stats,
[data-theme="light"] .profile-bio,
[data-theme="light"] .profile-social,
[data-theme="light"] .profile-badges {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .profile-info-item:hover,
[data-theme="light"] .activity-stat-card:hover,
[data-theme="light"] .settings-section:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .unified-form .form-control,
[data-theme="light"] .unified-form select {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--color-text-primary);
}
[data-theme="light"] .unified-form .form-control:focus,
[data-theme="light"] .unified-form select:focus {
    background: #fff;
    border-color: rgba(var(--color-accent-rgb), 0.5);
}
[data-theme="light"] .message-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .message-item:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .activity-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .tab-content-wrapper {
    scrollbar-color: rgba(var(--color-accent-rgb), 0.25) transparent;
}
[data-theme="light"] .tab-content-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .danger-zone {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.2);
}
[data-theme="light"] .skeleton-line,
[data-theme="light"] .skeleton-circle,
[data-theme="light"] .skeleton-avatar,
[data-theme="light"] .skeleton-badge {
    background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.05) 75%);
    background-size: 400px 100%;
}
[data-theme="light"] .pm-badge.earned {
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.2);
}
[data-theme="light"] .pm-badge.locked {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .badge-item {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .pm-user-item {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.06);
}

/* Game End 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"] .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);
}

[data-theme="light"] .ranking-table thead th {
    color: #64748b;
    border-bottom-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .ranking-table tbody td {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .ranking-table .rank-1st {
    background: rgba(var(--color-accent-rgb), 0.12);
}
[data-theme="light"] .result-stat-highlight {
    background: rgba(var(--color-accent-rgb), 0.1) !important;
}

[data-theme="light"] .score-row {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .score-row:hover {
    background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .score-row.winner {
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: rgba(var(--color-accent-rgb), 0.3);
}
[data-theme="light"] .score-breakdown {
    border-top-color: rgba(0, 0, 0, 0.06);
    color: var(--color-text-secondary);
}
[data-theme="light"] .score-breakdown span {
    background: rgba(0, 0, 0, 0.04);
}

/* Rules section */
[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);
}

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

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

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

/* Headings */
[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);
}

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

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

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

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

/* Player Timer — ROSU (per CERUT USER) */
/* Turn timer — inline with player info bar */
.player-timer {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;          /* mai compact */
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 10px;
    font-size: 10px;           /* font mai mic ca sa incap in opponent-info */
    font-weight: 700;
    color: #fca5a5;            /* rosu deschis pt. lizibilitate */
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    margin-left: 3px;
    position: relative;
    overflow: hidden;
    visibility: hidden;
    flex-shrink: 0;            /* NU se shrink ca sa nu ascunda numarul */
    min-width: 34px;           /* asigura loc pt icon + numar 2 cifre */
}

.player-timer .material-symbols-rounded {
    font-size: 12px;
    color: #f87171;
}

/* Timer progress bar (draining) — ROSU */
.player-timer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: var(--timer-progress, 100%);
    background: linear-gradient(90deg, #ef4444, #dc2626);
    transition: width 1s linear;
    border-radius: 0 0 12px 12px;
}

.player-timer.timer-active {
    visibility: visible;
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.55);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

/* Timer SOUTH (pe bg wood/crem) — contrast marit: rosu SOLID cu text alb */
.seat-south .player-info-bar .player-timer,
#timerPlayer {
    background: rgba(0, 0, 0, 0.55) !important;         /* fond mai intunecat */
    border-color: #dc2626 !important;
    color: #fff !important;
}
.seat-south .player-info-bar .player-timer .material-symbols-rounded,
#timerPlayer .material-symbols-rounded {
    color: #fca5a5 !important;
}
.seat-south .player-info-bar .player-timer.timer-active,
#timerPlayer.timer-active {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
    border-color: #7f1d1d !important;
    color: #fff !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(239, 68, 68, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.seat-south .player-info-bar .player-timer.timer-active .material-symbols-rounded,
#timerPlayer.timer-active .material-symbols-rounded {
    color: #fff !important;
}

.player-timer.timer-active.turn-timer-warning {
    animation: timerWarningPulse 0.6s ease-in-out infinite;
    background: rgba(255, 60, 60, 0.25);
    color: #ff5555;
    border-color: #ff5555;
    box-shadow: 0 0 12px rgba(255, 60, 60, 0.5);
}

.player-timer.timer-active.turn-timer-warning::after {
    background: linear-gradient(90deg, #ff5555, #ff3333);
}

@keyframes timerWarningPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 100, 100, 0.4); }
    50% { box-shadow: 0 0 16px rgba(255, 100, 100, 0.7); }
}

[data-theme="light"] .player-timer {
    background: rgba(var(--color-accent-rgb), 0.05);
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .player-timer.timer-active {
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
    box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.3);
}

[data-theme="light"] .player-timer.timer-active.turn-timer-warning {
    background: rgba(255, 100, 100, 0.15);
    color: #d32f2f;
    box-shadow: 0 0 8px rgba(255, 100, 100, 0.4);
}

/* Lobby detail */
[data-theme="light"] .lobby-stat { color: #666; }
[data-theme="light"] .lobby-stat strong { color: #333; }
[data-theme="light"] .lobby-ai-text strong { color: #333; }
[data-theme="light"] .lobby-ai-stats strong { color: #333; }
[data-theme="light"] .lc-chip {
    background: rgba(0, 0, 0, 0.05);
}
[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); }

/* Room Detail Modal */
[data-theme="light"] .room-detail-modal { background: rgba(255, 255, 255, 0.95); }
[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"] .lobby-lb-item { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.06); }

/* Settings buttons */
[data-theme="light"] .settings-buttons .btn-secondary {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: #888;
}

[data-theme="light"] .settings-buttons .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #666;
}

/* Notification items */
[data-theme="light"] .notif-item:hover { background: rgba(0, 0, 0, 0.04); }
[data-theme="light"] .notif-unread { background: rgba(var(--color-accent-rgb), 0.06); }


/* ================================================================================================
   25. RESPONSIVE BREAKPOINTS
================================================================================================ */

/* Mobile Small (≤ 360px) */
@media (max-width: 360px) {
    :root {
        --tile-width: 32px;
        --tile-height: 44px;
        --tile-font: 16px;
        --tile-width-sm: 26px;
        --tile-height-sm: 36px;
        --tile-font-sm: 13px;
    }

    .setup-card { padding: 16px; }
    .setup-header h2 { font-size: 22px; }
    /* 2026-04-21: min-width eliminat — overrides dedicate pt. portrait (flex:1 1 0) si
       landscape (width:170px) gestioneaza dimensiunea. Pastrez doar padding compact. */
    .opponent-area { padding: 3px 6px; }
    .action-bar { gap: 4px; }
    .game-end-card { padding: 20px; }
    .game-end-header h2 { font-size: 20px; }
}

/* Small mobile (≤ 576px) — compact lobby */
@media (max-width: 576px) {
    .lobby-view { padding: 8px 6px; gap: 8px; }
    .lobby-header { padding: 8px; gap: 6px; }
    .lobby-header-left { gap: 6px; }
    .lobby-header-right { gap: 4px; }
    .lobby-btn { padding: 6px 10px; font-size: 11px; }
    .lobby-stats-row { gap: 8px; }
    .lobby-stats-bar { padding: 6px 8px; gap: 8px; }
    .lobby-stat { font-size: 11px; }
    .lobby-ai-card { padding: 8px; }
    .lobby-filter-bar { padding: 4px 8px; gap: 4px; }
    .lobby-chip { padding: 4px 8px; font-size: 11px; }
    .lobby-grid { gap: 8px; grid-template-columns: 1fr; }
    .lobby-card { padding: 10px; }
    .lobby-pagination { padding: 8px 0; }
    .lobby-leaderboard { padding: 6px 8px; }
    .lobby-sort-select { font-size: 11px; padding: 3px 6px; }
    .lobby-search-input { font-size: 13px; }

    /* Room Detail Modal — full-width on mobile */
    .room-detail-modal {
        width: 96%;
        max-width: none;
        padding: 14px;
    }
    .rdm-room-name { font-size: 16px; }
    .rdm-player-avatar { width: 28px; height: 28px; font-size: 11px; }
    .rdm-player-name { font-size: 12px; }
    .rdm-setting-value { font-size: 15px; }
    .rdm-setting-label { font-size: 9px; }
    .rdm-action-btn { padding: 10px; font-size: 13px; }
}

/* Extra small mobile (≤ 400px) */
@media (max-width: 400px) {
    .room-detail-modal { padding: 10px; }
    .rdm-settings { gap: 4px; }
    .rdm-setting { padding: 6px; }
}

/* Mobile (≤ 480px) */
@media (max-width: 480px) {
    :root {
        --tile-width: 36px;
        --tile-height: 50px;
        --tile-font: 18px;
        --tile-width-sm: 30px;
        --tile-height-sm: 42px;
        --tile-font-sm: 15px;
    }

    .setup-card { padding: 20px; }
    /* 2026-04-21: min-width eliminat, overrides portrait/landscape dedicate */
    .pile-area { gap: 10px; padding: 6px; }
    .game-end-card { padding: 24px; }

    .lobby-header { flex-direction: column; align-items: stretch; }
    .lobby-header-right { justify-content: flex-start; }

    .modal-container { width: 95%; max-height: 90vh; }
    .modal-header { padding: 16px 20px 12px; }
    .modal-body { padding: 16px 20px; }
    .modal-footer { padding: 12px 20px; }

    .context-panel { width: 100%; }
}

/* Chat landscape compact */
@media (orientation: landscape) and (max-height: 500px) {
    .chat-tabs-bar { padding: 2px !important; gap: 2px !important; }
    .ct-tab { padding: 3px 4px !important; gap: 0 !important; min-width: 0 !important; }
    .ct-icon { font-size: 14px !important; }
    .ct-label { display: none !important; }
    .cmsg-container { min-height: 40px !important; padding: 4px !important; }
    .cmsg-avatar-img, .cmsg-avatar-initial { width: 18px !important; height: 18px !important; font-size: 8px !important; }
    .cmsg-name { font-size: 9px !important; }
    .cmsg-bubble { padding: 3px 6px !important; font-size: 11px !important; }
    .cmsg-time { font-size: 8px !important; }
    .cmsg-input { max-height: 26px !important; padding: 4px 8px !important; font-size: 11px !important; }
    .prv-emoji-picker { max-height: 240px !important; }

    /* Game-end modal — fundal uniform brun (nu mai apare mov de sub) in landscape */
    .modal-container.game-end-modal,
    #gameEndModal .modal-container {
        background: linear-gradient(145deg,
            rgba(58, 35, 16, 0.98) 0%,
            rgba(42, 27, 14, 0.97) 50%,
            rgba(58, 35, 16, 0.98) 100%
        ) !important;
        border: 1px solid rgba(212, 165, 68, 0.35) !important;
    }
    .modal-container.game-end-modal > .modal-body,
    #gameEndModal .modal-body {
        flex: 1 1 auto !important;
        max-height: none !important;
        height: 100% !important;
        padding: 12px 14px !important;
        background: transparent !important;
    }

    /* User list (Global/Masa/Privat) — limitat la 60px cu scroll, sa lase loc mesajelor */
    #chatGlobalUsers,
    #chatRoomUsers {
        max-height: 60px !important;
        overflow-y: auto !important;
        padding: 3px 4px !important;
        margin-bottom: 3px !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--whist-accent-rgb), 0.35) transparent;
    }
    #chatGlobalUsers::-webkit-scrollbar,
    #chatRoomUsers::-webkit-scrollbar { width: 4px; }
    #chatGlobalUsers::-webkit-scrollbar-thumb,
    #chatRoomUsers::-webkit-scrollbar-thumb {
        background: rgba(var(--whist-accent-rgb), 0.35);
        border-radius: 4px;
    }
    /* Avatare userlist mai mici */
    #chatGlobalUsers > div > div,
    #chatRoomUsers > div > div {
        padding: 2px 4px !important;
        gap: 4px !important;
    }
    #chatGlobalUsers img,
    #chatRoomUsers img {
        width: 16px !important;
        height: 16px !important;
    }
    #chatGlobalUsers span,
    #chatRoomUsers span {
        font-size: 10px !important;
    }
    /* Containere private/friends/notifs — max-height redus ca sa fie usabile */
    #chatMessagesPrivate,
    #chatFriendsContent,
    #chatNotifsContent {
        max-height: calc(100dvh - 140px) !important;
        min-height: 60px !important;
    }
}

/* Tiny mobile (≤ 420px) */
@media (max-width: 420px) {
    .lobby-header-right .lobby-btn span:not(.material-symbols-rounded) { display: none; }
    /* Keep text visible on Create Masa button so users know how to create a table */
    .lobby-header-right .lobby-btn-create span:not(.material-symbols-rounded) { display: inline !important; }
    .lobby-btn { padding: 6px 8px; min-width: 36px; }
    .lobby-btn-create { padding: 6px 10px; }
    .lobby-stats-bar { flex-wrap: wrap; }
    .lobby-ai-card { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIL (≤ 767px) — viewport-fit, tot responsive
   Calcul: 100dvh - top-bar (44px) - nav-rail (76px) = spatiu util
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    :root {
        --nav-rail-h: 76px;
    }
    /* Main content: inaltime exacta viewport minus header+footer */
    .main-content {
        height: calc(100dvh - var(--top-bar-h) - var(--nav-rail-h)) !important;
        max-height: calc(100dvh - var(--top-bar-h) - var(--nav-rail-h)) !important;
        padding-bottom: 0 !important;
        overflow: hidden;
    }
    .game-canvas {
        padding: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }
    .game-area {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }
    /* Game play view: grid care fitteaza exact spatiul disponibil */
    .game-play-view {
        /* Padding 8px UNIFORM (cerință utilizator: multipli de 8px) */
        padding: 8px !important;
        gap: 8px !important;
        /* Cadru lemn redus pe mobil */
        border-width: 4px;
        border-radius: 8px;
        box-shadow:
            inset 0 0 16px rgba(0,0,0,0.22),
            inset 0 0 3px rgba(0,0,0,0.1),
            0 0 0 1px #2a1808,
            0 0 0 2px #B09060,
            0 2px 8px rgba(0,0,0,0.4);
        grid-template-areas:
            "hand-top   hand-top"
            "zone1      zone2"
            "zone3      zone4"
            "sidebar    sidebar"
            "hand-bot   hand-bot";
        grid-template-columns: 1fr 1fr;
        /* Max-width container centrat (cerință: max-width 1200px centrat) */
        max-width: 1200px;
        margin: 0 auto;
    }
    /* Mobile layouts per player count */
    .game-play-view[data-players="2"] {
        grid-template-areas:
            "hand-top   hand-top"
            "zone1      zone1"
            "zone2      zone2"
            "sidebar    sidebar"
            "hand-bot   hand-bot";
    }
    .game-play-view[data-players="3"] {
        grid-template-areas:
            "hand-top   hand-top"
            "zone1      zone2"
            "zone3      zone3"
            "sidebar    sidebar"
            "hand-bot   hand-bot";
    }
    .game-play-view[data-players="4"] {
        grid-template-areas:
            "hand-top   hand-top"
            "zone1      zone2"
            "zone3      zone4"
            "sidebar    sidebar"
            "hand-bot   hand-bot";
        /* grid-template-rows: setat in regulile portrait/landscape (5 randuri portrait / 4 landscape) */
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }
    /* Watermark "R" mic pe mobil */
    .game-play-view::before {
        font-size: clamp(70px, 25vw, 120px);
    }
    /* ── SIDEBAR orizontal ── */
    .whist-sidebar {
        flex-direction: row;
        align-items: stretch;
        height: 56px;
        padding: 2px 4px;
        gap: 3px;
    }
    .whist-sidebar .pile-area {
        gap: 2px;
        padding: 1px;
        flex: 0 0 auto;
    }
    .whist-sidebar .draw-pile,
    .whist-sidebar .discard-pile {
        transform: scale(0.55);
        margin: -12px -6px;
    }
    .whist-sidebar .atu-display {
        transform: scale(0.65);
        margin: -8px -3px;
    }
    /* MOBILE/LANDSCAPE FIX: ATU inline + min-width rezervat ca sa nu fie comprimat */
    .whist-sidebar .atu-display.atu-beside-pile {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        flex: 0 0 auto;
        min-width: 50px;          /* rezerva spatiu — nu se striveste */
        padding: 2px 5px 3px;
        gap: 1px;
        animation: none;
        align-self: center;
    }
    .whist-sidebar .atu-display.atu-beside-pile .atu-tile-display {
        transform: scale(0.6);
        margin: -7px -3px;
    }
    .whist-sidebar .atu-display.atu-beside-pile .atu-label-small {
        font-size: 8px;
        letter-spacing: .5px;
    }
    .whist-sidebar .pile-label { font-size: 6px; }
    /* LANDSCAPE: activity log = scroll orizontal cu entries inline + lizibil */
    .whist-sidebar .activity-log-body {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        align-items: center;
        padding: 0 4px;
        max-height: 100%;
    }
    .whist-sidebar .activity-log-body::-webkit-scrollbar { height: 3px; }
    .whist-sidebar .activity-log-body::-webkit-scrollbar-thumb {
        background: rgba(255, 215, 0, .5);
        border-radius: 2px;
    }
    .whist-sidebar .activity-log-entry {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 9px;
        padding: 2px 6px;
        border-radius: 8px;
        border: 1px solid rgba(255, 215, 0, .15);
        background: rgba(0, 0, 0, .3);
    }
    /* Discard strip (single row, scroll horizontal) */
    .whist-sidebar .sidebar-section-discard {
        flex: 1 1 auto;
        min-height: 56px;
        max-height: 56px;
        min-width: 0;
    }
    .whist-sidebar .discard-history-strip {
        /* 2026-04-21: MOBILE landscape — OVERRIDE grid-ul desktop, single-row horizontal */
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        grid-template-columns: none !important;
        grid-auto-rows: initial !important;
        max-height: 42px;
        min-height: 42px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 14px 6px 6px;
        align-items: center;
    }
    .whist-sidebar .discard-history-tile {
        width: 18px;
        height: 26px;
        font-size: 11px;
        flex-shrink: 0;
    }
    .whist-sidebar .activity-log {
        min-width: 0;
        flex: 1 1 auto;
        max-height: 100%;
    }
    .whist-sidebar .activity-log-header { padding: 3px 6px; font-size: 9px; letter-spacing: .5px; }
    .whist-sidebar .activity-log-entry { font-size: 10px; padding: 2px 5px; line-height: 1.3; }
    /* ── ETALARE ZONES ── */
    .etalare-zone {
        padding: 11px 3px 3px;
        min-height: 0;
        /* 2026-04-21: scroll e pe .etalare-scroll (interior), zone ramane hidden */
        overflow: hidden;
    }
    .etalare-zone::before { font-size: 7px !important; padding: 0 4px !important; line-height: 10px !important; font-weight: 500 !important; text-transform: none !important; }
    .etalare-scroll { gap: 4px; padding: 1px; }
    /* ── OPPONENT AREAS ── */
    /* 2026-04-21: MOBILE — restore horizontal row layout override-uind .seat-north
       base de pe desktop (care e flex-direction: column pt. stacking vertical). */
    .seat-north {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 3px;
        padding: 2px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        /* Hint vizual de scroll — gradient fade la margini cand exista continut ascuns */
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12px, #000 calc(100% - 12px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 12px, #000 calc(100% - 12px), transparent 100%);
        scroll-snap-type: x proximity;
    }
    .seat-north > .opponent-area { scroll-snap-align: start; }
    /* 2026-04-21: Landscape mobile — latime FIXA 170px + scroll pe .seat-north
       (seatul de sus scrolleaza orizontal cand sunt 3-4 opponenti) */
    .opponent-area {
        padding: 3px 6px 4px;
        width: 170px;
        min-width: 170px;
        max-width: 170px;
        flex: 0 0 170px;
        border-radius: 8px;
    }
    .opponent-tile-back {
        width: 10px;
        height: 14px;
        font-size: 0;
        /* La 10×14 border 1px ocupa 20% — folosim outline subpixel ca sa pastram aspectul */
        border-width: 0 !important;
        box-shadow:
            inset 0 .5px 0 rgba(255, 245, 210, .7),
            inset 0 -.5px 0 rgba(70, 45, 15, .55),
            0 0 0 1px rgba(70, 45, 15, .8),
            0 1px 2px rgba(0, 0, 0, .45);
        border-radius: 1.5px;
    }
    /* Landscape mobile: tiles 10x14 sunt prea mici pt. logo vizibil — il ascundem */
    .opponent-tile-back::after { display: none; }
    .opponent-tile-row { gap: 1px; flex-wrap: nowrap; }
    .opponent-name { font-size: 10px; max-width: 40px; }
    .opponent-meta { font-size: 8px; gap: 3px; }
    .opponent-avatar { width: 22px !important; height: 22px !important; }
    /* Ascunde status + timer cand e stramt (pastreaza avatar+nume+tiles-count+points) */
    .opponent-info .opponent-status,
    .opponent-info .player-timer { display: none; }
    /* ── PLAYER HAND ── */
    .seat-south .player-hand {
        padding: 4px 8px 6px;
        gap: 2px;
    }
    .seat-south .player-info-bar {
        padding: 2px 6px;
        font-size: 10px;
    }
}

/* ═══ PORTRAIT specific fine-tuning ═══ */
@media (max-width: 767px) and (orientation: portrait) {
    :root {
        /* Piese mai mici in portrait — incap mai multe in mana */
        --tile-width: 32px;
        --tile-height: 46px;
        --tile-font: 16px;
        --tile-width-sm: 26px;
        --tile-height-sm: 36px;
        --tile-font-sm: 13px;
    }
    /* ═══════════════════════════════════════════════════════════════
       CALCUL SPATIU PROFESIONAL pentru portrait 412×915 (Pixel 6/7):
         Viewport:           915px
         − top-bar-h:         34px  (--top-bar-h override portrait)
         − nav-rail-h:        60px  (--nav-rail-h override portrait)
         − game border:        8px  (4 top + 4 bottom)
         − game padding:      16px  (8 top + 8 bottom)
         − main gaps × 4:     32px  (8×4 intre randuri)
         = Inner content:    765px

       Alocare randuri (toate paddings/gaps multipli de 8):
         hand-top:             64px  (3 coloane egale, 8×8)
         zone row 1:          minmax(120, 1fr) → ~218px
         zone row 2:          minmax(120, 1fr) → ~218px
         sidebar:             120px  (8×15)
         hand-bot (auto):     ~145px (info-bar wrap + mana 96)
       Totalul: 64 + 218 + 218 + 120 + 145 = 765 ✓
       ═══════════════════════════════════════════════════════════════ */

    /* ── HEADER (HAND-TOP) — 3 COLOANE EGALE, space-evenly ── */
    .seat-north {
        display: flex !important;
        justify-content: space-evenly !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 0 !important;
        min-height: 64px;
        max-height: 64px;
        margin-bottom: -4px;       /* continuitate vizuala cu sidebar (fara gap) */
        /* Nu mai e scroll orizontal — fit 3-4 jucatori uniform */
        overflow: visible !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    .seat-north > .opponent-area {
        /* 2026-04-21: Portrait — equal-share TOATE boxurile au aceeasi latime
           (N opponenti impart egal latimea randului). Override fixed width din base. */
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 4px !important;   /* compact, face loc la 3-4 oponenti */
        min-height: 56px;
        max-height: 64px;
        gap: 4px !important;
        overflow: hidden;
        /* 2026-04-21 BUGFIX: NU mai setez display:flex !important — asta suprascria
           inline display:none setat de JS in renderOpponents() pt. seats neactive
           (ex. vest in jocuri 3P). Baza .opponent-area { display: flex } e suficienta
           pentru a arata flex container; JS poate ascunde via style.display = 'none'. */
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
    }
    /* Opponent-info pe UN SINGUR RAND (avatar + nume + pct + count) */
    .seat-north .opponent-area .opponent-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .seat-north .opponent-area .opponent-avatar,
    .seat-north .opponent-area .seat-avatar {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        flex-shrink: 0 !important;
    }
    .seat-north .opponent-area .opponent-name {
        flex: 1 1 0 !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    .seat-north .opponent-area .opponent-points,
    .seat-north .opponent-area .opponent-tiles-count {
        font-size: 9px !important;
        padding: 1px 4px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    /* Ascunde timer + status pe portrait — prea multa info */
    .seat-north .opponent-area .player-timer,
    .seat-north .opponent-area .opponent-status { display: none !important; }
    /* Opponent hand (tiles face-down) — scroll orizontal pe un singur rand
       2026-04-21: overflow-x auto + flex-wrap nowrap => cand tilurile depasesc
       latimea, userul scrolleaza orizontal in loc sa se taie sau wrap pe 2 rânduri. */
    .seat-north .opponent-area .opponent-hand {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-shrink: 0 !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .seat-north .opponent-area .opponent-hand::-webkit-scrollbar { display: none; }
    .opponent-tiles-container {
        max-width: 100%;
        overflow: hidden;
    }

    /* ── GRID PRINCIPAL (8px multipli, centrat) ── */
    .game-play-view {
        grid-template-columns: 1fr 1fr;   /* 2 coloane egale — explicit, nu inherit */
        grid-template-rows:
            64px                 /* hand-top: fixed 64px (8×8) pentru aliniere clara */
            minmax(120px, 1fr)   /* zone row 1 (120 = 8×15) */
            minmax(120px, 1fr)   /* zone row 2 (120 = 8×15) */
            120px                /* sidebar fixed 120px (8×15) */
            auto;                /* hand-bot: auto (info-bar wrap + mana 96) — sticky jos */
    }
    /* GARANTIE 5 randuri pt. toate variantele (2/3/4 jucatori) — asigura ca areas cu 5 randuri
       (hand-top, zone-row1, zone-row2, sidebar, hand-bot) gasesc track-uri reale, nu implicit auto. */
    .game-play-view[data-players="2"],
    .game-play-view[data-players="3"],
    .game-play-view[data-players="4"] {
        grid-template-rows:
            64px
            minmax(120px, 1fr)
            minmax(120px, 1fr)
            120px
            auto;
    }

    /* ── MIDDLE (etalare zones) — centrate, egale ── */
    .etalare-zone {
        padding: 12px 8px 6px !important;  /* 2026-04-21: top 12px pt. label subtil 8px */
        min-height: 0;
    }

    /* ── SIDEBAR — 2 randuri grid (multipli de 8px) ──
       Math:    sidebar 120px (border-box)
              − border 2px (1 top + 1 bot)
              = content 118px
              tracks: minmax(80px,1fr) + 8px gap + 24px = 112px min → 1fr fills la 86px
              ✓ 8-aligned: gap 8px, padding 0 */
    .whist-sidebar {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: minmax(80px, 1fr) 24px;
        grid-template-areas:
            "piles  discard"
            "log    log";
        height: 120px;
        padding: 0 !important;
        gap: 8px !important;
    }

    /* ── HAND-BOT sticky la capat via grid position (ultimul row) ── */
    .seat-south {
        grid-area: hand-bot;
        position: relative;
        z-index: 2;
    }
    .whist-sidebar .sidebar-section-piles {
        grid-area: piles;
        /* Layout intern: draw-pile STANGA + ATU DREAPTA, in-flow (NU absolute)
           — asa rezervam spatiu real pentru ATU pe grid coloana auto */
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 0 2px;
    }
    .whist-sidebar .sidebar-section-discard {
        grid-area: discard;
        min-height: 80px;
        max-height: 80px;
    }
    .whist-sidebar .sidebar-section-log {
        grid-area: log;
        min-height: 0;
        min-width: 0;
    }
    .whist-sidebar .pile-area {
        gap: 4px;
        padding: 2px;
        flex-shrink: 0;
    }
    /* ATU pe portrait: in-flow langa draw-pile, NU absolute */
    .whist-sidebar .atu-display.atu-beside-pile {
        position: static;
        flex-shrink: 0;
        top: auto;
        right: auto;
        padding: 2px 4px 3px;
    }
    /* Draw pile BINE VIZIBIL — scale 0.80 → ~25×36 cu spatiu generos */
    .whist-sidebar .draw-pile,
    .whist-sidebar .discard-pile {
        transform: scale(0.80);
        margin: -5px -3px;
    }
    .whist-sidebar .atu-display {
        transform: none;
        margin: 0;
    }
    /* ATU marit ca piesele din etalare — scale 0.92 → ~29×40 match tile mobile 32×44 */
    .whist-sidebar .atu-display.atu-beside-pile .atu-tile-display {
        transform: scale(0.92);
        margin: -2px 0 -3px;
    }
    .whist-sidebar .atu-display.atu-beside-pile .atu-label-small {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.2px;
        color: #ffd700;
    }
    .whist-sidebar .pile-label {
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.5px;
    }
    /* Pile count badge ("33") mai prominent */
    .whist-sidebar .pile-count {
        font-size: 11px;
        font-weight: 800;
        padding: 1px 5px;
    }
    /* Secțiunea ARUNCATE — header + strip mai înalte */
    .whist-sidebar .sidebar-section-header {
        font-size: 10px;
        padding: 2px 5px;
    }
    .whist-sidebar .sidebar-section-header .material-symbols-rounded {
        font-size: 13px;
    }
    .whist-sidebar .discard-count-badge {
        font-size: 10px;
        min-width: 20px;
    }
    /* Strip-ul discardurilor — tiles 24×33 (font 13px) in strip 56px;
       header ~24px deasupra, deci sectiunea discard totala = 80px ✓
       2026-04-21: OVERRIDE grid-ul desktop, portrait ramane single-row horizontal */
    .whist-sidebar .discard-history-strip {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        grid-template-columns: none !important;
        grid-auto-rows: initial !important;
        max-height: 56px;
        min-height: 56px;
        gap: 4px;
        padding: 6px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        align-items: center;
    }
    .whist-sidebar .discard-history-tile {
        width: 24px;
        height: 33px;
        font-size: 13px;
        font-weight: 700;
    }
    /* Activity log — TICKER orizontal pe rand 2 (full-width, 24px, aliniat 8px) */
    .whist-sidebar .activity-log {
        display: flex !important;
        flex-direction: row;
        align-items: stretch;
        gap: 4px;
        height: 24px;
        min-height: 24px;
        max-height: 24px;
        padding: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.50), rgba(0,0,0,0.35));
        border: 1px solid rgba(255,215,0,0.18);
        border-radius: 4px;
        overflow: hidden;
    }
    .whist-sidebar .activity-log-header {
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 0 4px;
        font-size: 0;
        color: rgba(255,255,255,0.65);
        background: rgba(0,0,0,0.25);
        border-right: 1px solid rgba(255,255,255,0.08);
        flex-shrink: 0;
    }
    .whist-sidebar .activity-log-header .material-symbols-rounded {
        font-size: 12px;
    }
    .whist-sidebar .activity-log-header span:not(.material-symbols-rounded) {
        display: none;  /* ascunde textul "Activitate Masa" — iconul e destul */
    }
    .whist-sidebar .activity-log-body {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: 4px;
        padding: 2px 4px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        align-items: center;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    .whist-sidebar .activity-log-body::-webkit-scrollbar { display: none; }
    .whist-sidebar .activity-log-empty {
        font-size: 9px;
        color: rgba(255,255,255,0.45);
        font-style: italic;
    }
    .whist-sidebar .activity-log-entry {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        flex-shrink: 0;
        padding: 2px 6px;
        font-size: 10px;  /* Mai lizibil (era 9px) */
        line-height: 1.1;
        white-space: nowrap;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 4px;
        color: rgba(255,255,255,0.95);
    }
    .whist-sidebar .activity-log-entry .log-player-name {
        font-weight: 700;
        color: #FFD94A;
    }
    .whist-sidebar .activity-log-entry .log-action-type {
        color: #8FE0F5;
        font-weight: 600;
    }
    .whist-sidebar .activity-log-entry .log-details {
        opacity: 0.78;
    }
    /* highlight intrarea cea mai noua (primul copil vizual cu row-reverse = ultimul DOM) */
    .whist-sidebar .activity-log-body .activity-log-entry:last-child {
        background: rgba(255,217,74,0.14);
        border-color: rgba(255,217,74,0.35);
        box-shadow: 0 0 0 1px rgba(255,217,74,0.18) inset;
    }
}

/* ═══ LANDSCAPE mobil (≤767px, orizontal) — pastreaza layout 3 coloane ═══ */
/* ════════════════════════════════════════════════════════════════════════
   LANDSCAPE EXACT — calculat profesional pentru Galaxy S20 Ultra 915×412
   ════════════════════════════════════════════════════════════════════════
   Buget vertical 412px:
     top-bar       28px
     nav-rail      56px  (status-bar 24 + nav-primary 32)
     ───────────
     main-content 328px
       gpv padding   4px (2 top + 2 bot)
       gpv gap × 3   6px (2 each between rows)
       ──────────
       grid usable 318px
         hand-top   42px  (opponents)
         zone-r1    98px  (1fr)
         zone-r2    98px  (1fr)
         hand-bot   80px  (south player)
         ──────────
                  318px ✓

   Buget orizontal 915px:
     gpv padding    4px (2 left + 2 right)
     gpv gap × 2    4px (between cols)
     ───────────
     grid usable  907px
       col 1     ~399px (1fr)
       col 2     ~399px (1fr)
       sidebar    110px

   Sidebar 318×110 → usable 304×102 (după padding 4 top/bot, 4 left/right):
     pile-area      60px (draw-pile + count)
     ATU display    56px
     discard sec    60px (ARUNCATE strip)
     activity log  128px (header + 4-5 entries)
     gap × 3 = 0 (sections gap-less, separator visual)
     ════════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --nav-rail-h: 56px;
        --top-bar-h: 28px;
        --tile-width: 22px;
        --tile-height: 30px;
        --tile-font: 12px;
    }
    /* Chain de heights forțat */
    body.game-active .main-content,
    body.mp-game-active .main-content {
        height: calc(100dvh - var(--top-bar-h) - var(--nav-rail-h)) !important;
        max-height: calc(100dvh - var(--top-bar-h) - var(--nav-rail-h)) !important;
        min-height: calc(100dvh - var(--top-bar-h) - var(--nav-rail-h)) !important;
        padding-bottom: 0 !important;
    }
    body.game-active .game-canvas,
    body.mp-game-active .game-canvas,
    body.game-active .game-area,
    body.mp-game-active .game-area {
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        padding-bottom: 0 !important;
    }
    /* Grid landscape — bate body.mp-game-active.immersive-mode (0,4,1) cu (0,5,1) */
    body.game-active.immersive-mode .game-play-view,
    body.mp-game-active.immersive-mode .game-play-view,
    body.game-active.immersive-mode .game-play-view[data-players="2"],
    body.mp-game-active.immersive-mode .game-play-view[data-players="2"],
    body.game-active.immersive-mode .game-play-view[data-players="3"],
    body.mp-game-active.immersive-mode .game-play-view[data-players="3"],
    body.game-active.immersive-mode .game-play-view[data-players="4"],
    body.mp-game-active.immersive-mode .game-play-view[data-players="4"],
    body.game-active .game-play-view,
    body.mp-game-active .game-play-view,
    body.game-active .game-play-view[data-players="2"],
    body.mp-game-active .game-play-view[data-players="2"],
    body.game-active .game-play-view[data-players="3"],
    body.mp-game-active .game-play-view[data-players="3"],
    body.game-active .game-play-view[data-players="4"],
    body.mp-game-active .game-play-view[data-players="4"] {
        /* 3 rânduri (NO hand-top): zone1+2 / zone3+4 / hand-bot. Sidebar la dreapta.
           seat-north este POSITION ABSOLUTE peste sidebar sus. */
        position: relative !important;
        grid-template-areas:
            "zone1      zone2      sidebar"
            "zone3      zone4      sidebar"
            "hand-bot   hand-bot   sidebar" !important;
        grid-template-columns: 1fr 1fr 140px !important;
        grid-template-rows: 1fr 1fr 130px !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        gap: 2px !important;
        padding: 2px !important;
        overflow: hidden !important;
    }
    /* SEAT-NORTH absolute peste sidebar sus — overlay 110px wide × 162px tall */
    body.game-active.immersive-mode .seat-north,
    body.mp-game-active.immersive-mode .seat-north,
    body.game-active .seat-north,
    body.mp-game-active .seat-north {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 2px !important;
        right: 2px !important;
        width: 140px !important;
        /* 3 carduri × 60 + 4 gap + 4 padding = 188 */
        height: 188px !important;
        max-height: 188px !important;
        min-height: 188px !important;
        gap: 2px !important;
        padding: 2px !important;
        margin: 0 !important;
        overflow: hidden !important;
        z-index: 10 !important;
        background: linear-gradient(180deg, rgba(8,30,15,.92) 0%, rgba(3,18,8,.96) 100%) !important;
        border: 1px solid rgba(255,215,0,.2) !important;
        border-radius: 6px !important;
        box-shadow: inset 0 1px 0 rgba(255,215,0,.12), 0 2px 6px rgba(0,0,0,.4) !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        grid-area: unset !important;
    }
    /* Opponent card — 50px × 100% width (3 stacked = 150px + 12px gap/padding = 162px) */
    body.game-active.immersive-mode .opponent-area[data-seat],
    body.mp-game-active.immersive-mode .opponent-area[data-seat],
    body.game-active .opponent-area[data-seat],
    body.mp-game-active .opponent-area[data-seat],
    body.game-active .game-play-view .opponent-area,
    body.mp-game-active .game-play-view .opponent-area,
    .seat-north .opponent-area {
        flex: 0 0 60px !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 3px 4px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        align-items: stretch !important;
        background: rgba(255,255,255,.04) !important;
        border: 1px solid rgba(255,215,0,.15) !important;
        border-radius: 4px !important;
        grid-area: unset !important;
        overflow: hidden !important;
    }
    /* 2026-05-02 FIX: piesa de inchidere "INCHIS" — vizibilitate in landscape compact.
       In landscape etalare zone are ~140px inaltime cu meld groups stacked vertical.
       Forteaza wrap-ul cu z-index si position relative + scroll-margin pentru scrollIntoView. */
    .mw-closing-tile-wrap {
        position: relative !important;
        z-index: 50 !important;
        scroll-margin: 8px !important;
        margin-top: 4px !important;
        /* Highlight prominent in landscape — border auriu mai gros + glow */
        border-width: 2px !important;
        box-shadow:
            0 0 14px rgba(255, 215, 100, 0.9),
            0 3px 10px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(255, 215, 100, 0.35) !important;
    }
    /* Tile-ul mai mare in landscape pentru vizibilitate (default 32px → 38px) */
    .tile.mw-closing-tile {
        min-width: 36px !important;
        min-height: 50px !important;
    }
    /* Ribbon mai mare si mai vizibil */
    .mw-closing-ribbon {
        font-size: 9px !important;
        padding: 3px 9px !important;
    }
    /* Etalare-scroll: snap-to-end astfel incat wrap-ul nou apare instant vizibil */
    .etalare-scroll {
        scroll-behavior: smooth !important;
    }

    /* 2026-05-02 FIX BUG: ascunde opponentEast/West cand mesa nu are atatia jucatori.
       data-players este setat pe .game-play-view de applyPlayerLayout(pc) — JS linia 1233.
       Aceasta regula trebuie sa apara DUPA cea de mai sus pentru a invinge display:flex !important.
       Pentru 2P MP: nu apar East+West. Pentru 3P MP: nu apare West. */
    .game-play-view[data-players="2"] .opponent-area[data-seat="east"],
    .game-play-view[data-players="2"] .opponent-area[data-seat="west"],
    .game-play-view[data-players="3"] .opponent-area[data-seat="west"] {
        display: none !important;
    }
    /* Info row 22px: avatar + nume + scor + tiles */
    body.game-active .opponent-area .opponent-info,
    body.mp-game-active .opponent-area .opponent-info,
    .opponent-area .opponent-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 2px !important;
        height: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        padding: 0 !important;
        font-size: 8px !important;
    }
    .opponent-area .seat-avatar {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        flex-shrink: 0 !important;
    }
    .opponent-area .opponent-name {
        font-size: 8px !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .opponent-area .player-timer,
    .opponent-area .opponent-points,
    .opponent-area .opponent-tiles-count,
    .opponent-area .opponent-atu-badge {
        font-size: 7px !important;
        padding: 0 3px !important;
        line-height: 1.2 !important;
        flex-shrink: 0 !important;
        height: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 1px !important;
    }
    .opponent-area .player-timer .material-symbols-rounded,
    .opponent-area .opponent-points .material-symbols-rounded {
        font-size: 9px !important;
    }
    /* opponent-points FORCE visible (timer + status hidden in this layout — vezi mai jos) */
    body.game-active .opponent-info .opponent-points,
    body.mp-game-active .opponent-info .opponent-points,
    .opponent-info .opponent-points {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Active turn highlight — opponent activ pulseaza auriu */
    .opponent-area.active-turn,
    .opponent-area.is-current-player {
        border-color: rgba(255,215,0,.7) !important;
        background: linear-gradient(180deg, rgba(255,215,0,.15) 0%, rgba(255,215,0,.05) 100%) !important;
        box-shadow: 0 0 8px rgba(255,215,0,.35), inset 0 0 4px rgba(255,215,0,.15) !important;
    }
    /* ATU badge cu styling auriu */
    .opponent-area .opponent-atu-badge {
        background: linear-gradient(135deg, #ffd700, #b8860b) !important;
        color: #1a0f00 !important;
        font-weight: 800 !important;
        border-radius: 3px !important;
    }
    /* Online status dot */
    .opponent-area .opponent-status,
    .opponent-area .seat-avatar::after {
        width: 6px !important;
        height: 6px !important;
    }
    /* Tile-back row 22px — visible like desktop */
    body.game-active .opponent-area .opponent-hand,
    body.mp-game-active .opponent-area .opponent-hand {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 1px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        align-items: center !important;
    }
    /* Tile-back compact: 14 piese × 8px + 13 gaps = 125 → fits in 132 card width */
    .opponent-tile-back {
        width: 8px !important;
        height: 18px !important;
        min-width: 8px !important;
    }
    .opponent-tile-back {
        width: 7px !important;
        height: 18px !important;
        min-width: 7px !important;
        flex-shrink: 0 !important;
    }
    /* Whist-sidebar grid-area: sidebar — pushed DOWN ca sa lase loc seat-north overlay */
    body.game-active.immersive-mode .whist-sidebar,
    body.mp-game-active.immersive-mode .whist-sidebar,
    body.game-active .whist-sidebar,
    body.mp-game-active .whist-sidebar {
        margin-top: 192px !important;        /* 188 seat-north + 4 gap */
        height: calc(100% - 192px) !important;
        max-height: calc(100% - 192px) !important;
    }
    /* Sidebar sections — calcul exact pe 318px height */
    .whist-sidebar {
        padding: 4px !important;
        gap: 0 !important;
    }
    .whist-sidebar .sidebar-section-piles {
        flex: 0 0 auto !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }
    .whist-sidebar .pile-area {
        min-height: 60px !important;
        max-height: 60px !important;
        padding: 2px !important;
    }
    .whist-sidebar .atu-display.atu-beside-pile {
        min-height: 56px !important;
        max-height: 56px !important;
    }
    .whist-sidebar .sidebar-section-discard {
        flex: 0 0 auto !important;
        min-height: 60px !important;
        max-height: 60px !important;
        padding: 2px !important;
    }
    .whist-sidebar .discard-history-strip {
        max-height: 36px !important;
        min-height: 36px !important;
    }
    .whist-sidebar .sidebar-section-log {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: 130px !important;          /* cap clar — nu mai umple tot sidebar */
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .whist-sidebar .sidebar-section-log .activity-log {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .whist-sidebar .sidebar-section-log .activity-log-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    /* Hand-bot 130px = info-bar 36 + hand 86 (2 RÂNDURI × 38 + 4 row-gap + padding 6) + 4 padding seat */
    .seat-south {
        min-height: 130px !important;
        max-height: 130px !important;
    }
    /* INFO-BAR landscape — UN SINGUR RÂND 36px (28 conținut + 8 padding).
       Specificitate 0,5,1 (body + 3 clase + .merged-actions + atribut) bate desktop 0,4,1. */
    html body.game-active.immersive-mode .seat-south .player-info-bar,
    html body.mp-game-active.immersive-mode .seat-south .player-info-bar,
    html body.game-active.immersive-mode .seat-south .player-info-bar.merged-actions,
    html body.mp-game-active.immersive-mode .seat-south .player-info-bar.merged-actions,
    html body.game-active .seat-south .player-info-bar,
    html body.mp-game-active .seat-south .player-info-bar,
    html body.game-active .seat-south .player-info-bar.merged-actions,
    html body.mp-game-active .seat-south .player-info-bar.merged-actions {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        padding: 2px 4px !important;
        gap: 3px !important;
        font-size: 9px !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }
    /* Toate elementele compact 28px tall, fără shrink */
    body.game-active .seat-south .player-info-bar > *,
    body.mp-game-active .seat-south .player-info-bar > * {
        flex-shrink: 1 !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }
    /* Identity — avatar 30 + nume 50 + gap = 86px (avatar prominent) */
    body.game-active .seat-south .player-info-bar .player-module-identity,
    body.mp-game-active .seat-south .player-info-bar .player-module-identity {
        flex: 0 0 86px !important;
        gap: 4px !important;
        padding: 0 2px !important;
    }
    /* AVATAR PROMINENT 30×30 — important vizual, rotund, identic ca timer ca size */
    html body.game-active .seat-south .player-info-bar .seat-avatar,
    html body.mp-game-active .seat-south .player-info-bar .seat-avatar,
    html body.game-active .seat-south .player-info-bar .player-avatar,
    html body.mp-game-active .seat-south .player-info-bar .player-avatar,
    html body.game-active .seat-south .player-info-bar .identity-avatar-wrap,
    html body.mp-game-active .seat-south .player-info-bar .identity-avatar-wrap,
    html body.game-active .seat-south .player-info-bar .identity-avatar-wrap .seat-avatar,
    html body.mp-game-active .seat-south .player-info-bar .identity-avatar-wrap .seat-avatar,
    html body.game-active .seat-south .identity-avatar-wrap,
    html body.mp-game-active .seat-south .identity-avatar-wrap {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
        aspect-ratio: 1/1 !important;
        border: 2px solid rgba(255, 215, 0, .55) !important;
        box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.4) !important;
    }
    /* ASCUNDE STATUS LABEL "online" — redundant cu dot-ul verde de langa avatar */
    body.game-active .seat-south .player-info-bar .identity-status-label,
    body.mp-game-active .seat-south .player-info-bar .identity-status-label {
        display: none !important;
    }
    /* TIMER DONUT — pastram doar valoarea numerica centrală, NU eticheta "SEC" */
    body.game-active .seat-south .player-info-bar .timer-donut-label,
    body.mp-game-active .seat-south .player-info-bar .timer-donut-label {
        display: none !important;
    }
    /* identity-text wrap intr-un singur rand */
    body.game-active .seat-south .player-info-bar .identity-text,
    body.mp-game-active .seat-south .player-info-bar .identity-text {
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        line-height: 1 !important;
    }
    /* TIMER ROTUND — pill complet rotunjit (border-radius full) */
    body.game-active .seat-south .player-info-bar .player-module-timer,
    body.mp-game-active .seat-south .player-info-bar .player-module-timer,
    body.game-active .seat-south .player-timer,
    body.mp-game-active .seat-south .player-timer,
    .seat-south .player-info-bar .player-module-timer,
    .seat-south .player-timer {
        border-radius: 999px !important;
        overflow: hidden !important;
        background: linear-gradient(180deg, rgba(40,90,40,.85), rgba(20,60,20,.95)) !important;
        border: 1px solid rgba(80,200,80,.6) !important;
    }
    /* NUME mic + scroll marquee — text 7px ca avatarul să fie prominent */
    @keyframes nameScrollLR {
        0%, 10% { text-indent: 0; }
        90%, 100% { text-indent: -60px; }
    }
    body.game-active .seat-south .player-info-bar .player-name-label,
    body.mp-game-active .seat-south .player-info-bar .player-name-label,
    .seat-south .player-info-bar .player-name-label {
        font-size: 7px !important;
        width: 50px !important;
        max-width: 50px !important;
        min-width: 50px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        display: inline-block !important;
        line-height: 12px !important;
        text-overflow: clip !important;
        animation: nameScrollLR 6s ease-in-out infinite alternate !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
    }
    .seat-south .player-info-bar .player-name-label {
        font-size: 9px !important;
        max-width: 60px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    /* Timer DONUT — circular animation 30×30, ring vizibil */
    body.game-active .seat-south .player-info-bar .player-module-timer,
    body.mp-game-active .seat-south .player-info-bar .player-module-timer {
        flex: 0 0 32px !important;
        padding: 0 !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
    }
    /* Timer donut IDENTIC ca desktop, scalat la 30×30 (vs 39 pe desktop) */
    body.game-active .seat-south .player-info-bar .player-timer.timer-donut,
    body.mp-game-active .seat-south .player-info-bar .player-timer.timer-donut,
    body.game-active .seat-south .player-info-bar .player-timer,
    body.mp-game-active .seat-south .player-info-bar .player-timer {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        max-width: 30px !important;
        border-radius: 50% !important;
        position: relative !important;
        overflow: visible !important;
        /* Background radial dark identic cu desktop */
        background: radial-gradient(circle, rgba(10,20,8,.95) 0%, rgba(20,40,16,.95) 100%) !important;
        border: 1.5px solid rgba(0,0,0,.35) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Ring conic-gradient — MASK scalat pentru 30×30 (vs desktop 54).
       Banda 11..14px radius (3px wide) shows green countdown drain. */
    body.game-active .seat-south .player-info-bar .timer-donut-ring,
    body.mp-game-active .seat-south .player-info-bar .timer-donut-ring,
    .seat-south .player-module-timer .timer-donut-ring {
        width: 30px !important;
        height: 30px !important;
        position: absolute !important;
        inset: -1.5px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        border-radius: 50% !important;
        -webkit-mask: radial-gradient(circle at 50% 50%,
            transparent 0,
            transparent 11px,
            #000 11px,
            #000 14.5px,
            transparent 14.5px) !important;
        mask: radial-gradient(circle at 50% 50%,
            transparent 0,
            transparent 11px,
            #000 11px,
            #000 14.5px,
            transparent 14.5px) !important;
    }
    /* Center text "45 SEC" identic ca desktop */
    body.game-active .seat-south .player-info-bar .timer-donut-center,
    body.mp-game-active .seat-south .player-info-bar .timer-donut-center {
        font-size: 8px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        color: #fff !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        text-align: center !important;
    }
    body.game-active .seat-south .player-info-bar .timer-donut-value,
    body.mp-game-active .seat-south .player-info-bar .timer-donut-value {
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        color: #fff !important;
    }
    /* Stats (PUNCTE + PIESE + penalty) compact */
    body.game-active .seat-south .player-info-bar .player-module-stats,
    body.mp-game-active .seat-south .player-info-bar .player-module-stats {
        flex: 0 0 110px !important;
        gap: 2px !important;
        padding: 0 2px !important;
    }
    .seat-south .player-info-bar .player-module-stats .player-points,
    .seat-south .player-info-bar .player-module-stats .player-tiles-count,
    .seat-south .player-info-bar .player-module-stats .player-hand-penalty {
        font-size: 9px !important;
        padding: 1px 3px !important;
        line-height: 1.2 !important;
    }
    /* Hints + Sort — icon-uri compacte (vizibile DOAR la player, ascunse la spectator) */
    body.game-active .seat-south .player-info-bar .player-module-hints,
    body.mp-game-active .seat-south .player-info-bar .player-module-hints {
        flex: 0 0 28px !important;
        padding: 0 !important;
        height: 28px !important;
        min-height: 28px !important;
    }
    /* ASCUNDE textul "0 pct" din hints — pastram doar icon 💡 */
    body.game-active .seat-south .player-info-bar .player-module-hints .hint-cost,
    body.mp-game-active .seat-south .player-info-bar .player-module-hints .hint-cost,
    body.game-active .seat-south .player-info-bar .player-module-hints .hint-price,
    body.mp-game-active .seat-south .player-info-bar .player-module-hints .hint-price,
    body.game-active .seat-south .player-info-bar .player-module-hints span:not(.material-symbols-rounded),
    body.mp-game-active .seat-south .player-info-bar .player-module-hints span:not(.material-symbols-rounded) {
        display: none !important;
    }
    body.game-active .seat-south .player-info-bar .player-module-sort,
    body.mp-game-active .seat-south .player-info-bar .player-module-sort {
        flex: 0 0 76px !important;
        gap: 1px !important;
        padding: 0 !important;
        height: 28px !important;
        min-height: 28px !important;
    }
    /* Spectator: ascunde hints + sort + action — info-bar arata curat doar cu identity+timer+stats */
    body.spectator-mode .seat-south .player-info-bar .player-module-hints,
    body.spectator-mode .seat-south .player-info-bar .player-module-sort {
        display: none !important;
    }
    .seat-south .player-info-bar .player-module-sort .sort-btn,
    .seat-south .player-info-bar .player-module-hints .hint-btn {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        padding: 0 !important;
    }
    .seat-south .player-info-bar .sort-btn .material-symbols-rounded,
    .seat-south .player-info-bar .hint-btn .material-symbols-rounded {
        font-size: 13px !important;
    }
    /* 5 ACTION BUTTONS — flex 1 1 0 EGALE, font 8px, icon 11px, padding minim */
    body.game-active .seat-south .player-info-bar .action-btn-game,
    body.mp-game-active .seat-south .player-info-bar .action-btn-game {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 28px !important;
        padding: 1px 3px !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        gap: 1px !important;
        letter-spacing: 0 !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* ASCUNDE ICON pe butoane TRAGE/ETALEAZA/LIPESTE/ARUNCA — texul e suficient,
       eliberam spatiu sa incapa toate 5 + ATU. */
    body.game-active .seat-south .player-info-bar .action-btn-game .material-symbols-rounded,
    body.mp-game-active .seat-south .player-info-bar .action-btn-game .material-symbols-rounded {
        display: none !important;
    }
    /* ATU pastreaza icon (steluta) — text scurt, icon e simbolic */
    body.game-active .seat-south .player-info-bar .action-btn-game.btn-atu .material-symbols-rounded,
    body.mp-game-active .seat-south .player-info-bar .action-btn-game.btn-atu .material-symbols-rounded {
        display: inline-block !important;
        font-size: 12px !important;
    }
    .seat-south .player-info-bar .seat-avatar,
    .seat-south .player-info-bar .player-avatar,
    .seat-south .seat-avatar {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        flex-shrink: 0 !important;
    }
    .seat-south .player-info-bar .player-timer,
    .seat-south .player-timer {
        font-size: 11px !important;
        padding: 2px 6px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        line-height: 1.1 !important;
        flex-shrink: 0 !important;
        font-weight: 700 !important;
    }
    .seat-south .player-info-bar .player-timer .material-symbols-rounded,
    .seat-south .player-timer .material-symbols-rounded {
        font-size: 14px !important;
    }
    .seat-south .player-info-bar .player-name-label,
    .seat-south .player-info-bar .player-points,
    .seat-south .player-info-bar .player-tiles-count,
    .seat-south .player-info-bar .player-hand-penalty {
        font-size: 10px !important;
        padding: 2px 5px !important;
        line-height: 1.2 !important;
    }
    /* HAND 2 RÂNDURI — separație vizibilă între rânduri (row 2 împins jos) */
    body.game-active.immersive-mode .seat-south .player-hand,
    body.mp-game-active.immersive-mode .seat-south .player-hand,
    body.game-active .seat-south .player-hand,
    body.mp-game-active .seat-south .player-hand,
    .seat-south .player-hand {
        min-height: 86px !important;
        max-height: 86px !important;
        height: 86px !important;
        padding: 2px 8px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-content: space-between !important;   /* Row 1 SUS, Row 2 JOS */
        align-items: flex-start !important;
        justify-content: flex-start !important;
        row-gap: 12px !important;                  /* spațiu mai mare între rânduri */
        column-gap: 2px !important;
        overflow: hidden !important;
    }
    /* Tiles 24×36 — vizibile, cursor grab pentru drag/drop reorder */
    body.game-active .seat-south .player-hand .tile,
    body.mp-game-active .seat-south .player-hand .tile,
    .seat-south .player-hand .tile {
        width: 24px !important;
        height: 36px !important;
        min-width: 24px !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
        cursor: grab !important;
    }
    .seat-south .player-hand .tile:active,
    .seat-south .player-hand .tile.dragging,
    .seat-south .player-hand .tile.drag-active {
        cursor: grabbing !important;
        z-index: 100 !important;
    }

    /* LOBBY landscape — compact: header + stats + filters + grid totul vizibil */
    .lobby-view {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        padding: 6px 8px !important;
    }
    .lobby-header {
        max-height: 44px !important;
        min-height: 44px !important;
        padding: 4px 8px !important;
        gap: 6px !important;
        overflow: hidden !important;
        flex-wrap: nowrap !important;
    }
    .lobby-header .lobby-title {
        font-size: 14px !important;
        line-height: 1.1 !important;
    }
    .lobby-header .lobby-subtitle {
        font-size: 10px !important;
        display: none !important;
    }
    /* Ascunde mascota logo pe landscape compact — economie spatiu orizontal */
    .lobby-tile-mascot {
        display: none !important;
    }
    .lobby-header-right .lobby-btn {
        padding: 5px 9px !important;
        font-size: 11px !important;
        min-height: 30px !important;
    }
    .lobby-header-right .lobby-btn span:not(.material-symbols-rounded) {
        display: none !important;
    }
    .lobby-stats-row {
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }
    .lobby-stats-bar {
        max-height: 30px !important;
        min-height: 30px !important;
        padding: 2px 8px !important;
        gap: 8px !important;
        font-size: 10px !important;
    }
    .lobby-stats-bar > * {
        font-size: 10px !important;
    }
    /* Hide AI promo + leaderboard pe landscape — economie spațiu pentru grid mese */
    .lobby-ai-card,
    .lobby-leaderboard {
        display: none !important;
    }
    .lobby-filters,
    .lobby-filter-bar {
        max-height: 32px !important;
        min-height: 32px !important;
        padding: 2px 6px !important;
        gap: 4px !important;
    }
    .lobby-filters .filter-btn,
    .lobby-filter-bar button {
        padding: 4px 8px !important;
        font-size: 10px !important;
        min-height: 26px !important;
    }
    /* Grid mese — 3-4 coloane pe landscape, carduri compacte */
    .lobby-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
        gap: 6px !important;
        padding: 6px 0 !important;
    }
    .lobby-card {
        padding: 6px 8px !important;
        min-height: 60px !important;
        max-height: 64px !important;
        font-size: 10px !important;
    }
    .lobby-card .lobby-card-title,
    .lobby-card h3,
    .lobby-card h4 {
        font-size: 11px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
    .lobby-card .lobby-card-meta,
    .lobby-card .lobby-card-info {
        font-size: 9px !important;
        gap: 4px !important;
    }
    .lobby-card button,
    .lobby-card .btn-spectate,
    .lobby-card .btn-join {
        padding: 4px 8px !important;
        font-size: 9px !important;
        min-height: 24px !important;
    }

    /* NAV-BAR FAB landscape — micsorat ca sa nu suprapuna butoanele tab */
    .nav-bar-fab {
        width: 38px !important;
        height: 38px !important;
        top: -6px !important;
        font-size: 8px !important;
    }
    .nav-bar-fab .material-symbols-rounded {
        font-size: 18px !important;
    }

    /* LOADER landscape compact — layout orizontal, incape in 412px inaltime */
    .game-loader {
        align-items: center !important;
        justify-content: center !important;
    }
    .loader-content {
        width: 92vw !important;
        max-width: 700px !important;
        max-height: 92dvh !important;
        padding: 16px 20px !important;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 20px !important;
        overflow: hidden !important;
    }
    .loader-logo {
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 140px !important;
    }
    .loader-logo::before {
        display: none !important;
    }
    .loader-fan-deal {
        height: 90px !important;
        margin-bottom: 0 !important;
    }
    .logo-text {
        font-size: 20px !important;
        letter-spacing: 3px !important;
    }
    .loader-checklist {
        flex: 1 !important;
        gap: 5px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .loader-check-item {
        padding: 5px 10px !important;
        font-size: 11px !important;
        min-height: 28px !important;
    }
    .loader-progress-container {
        margin-bottom: 6px !important;
    }
    .loader-progress-label {
        font-size: 10px !important;
    }
    .loader-tip {
        font-size: 10px !important;
        padding: 6px 10px !important;
        margin-top: 6px !important;
    }

    /* MODAL-uri — FULL landscape (95vw × 95dvh) — bate orice max-width hardcodat */
    .modal-overlay,
    .mp-modal-overlay,
    .discard-history-modal,
    .tile-audit-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
    }
    .modal-container,
    .modal-container.game-setup-modal,
    .mp-modal-card,
    .discard-history-modal-card,
    .tile-audit-modal-card,
    .mw-modal-card {
        width: 95vw !important;
        max-width: 95vw !important;
        height: 95dvh !important;
        max-height: 95dvh !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    /* Game-setup-modal — TOATE secțiunile vizibile cu scroll vertical pe body */
    .modal-container.game-setup-modal .modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 6px 10px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* Setup grid cu 2 coloane — body interior fluid (nu fix col widths) */
    .modal-container.game-setup-modal .setup-grid,
    .modal-container.game-setup-modal .setup-columns,
    .modal-container.game-setup-modal .modal-body > div {
        overflow: visible !important;
        max-height: none !important;
    }
    /* Coloane cu scroll independent (cea dreapta are mai multe sectiuni) */
    .modal-container.game-setup-modal .setup-col-left,
    .modal-container.game-setup-modal .setup-col-right,
    .modal-container.game-setup-modal .setup-column {
        overflow: visible !important;
        max-height: none !important;
        flex: 1 1 50% !important;
        min-width: 0 !important;
    }
    /* Preset cards row — compact in landscape, nu ocupa prea mult vertical */
    .modal-container.game-setup-modal .preset-cards,
    .modal-container.game-setup-modal .difficulty-options[data-section="presets"] {
        gap: 4px !important;
        margin-bottom: 8px !important;
    }
    .modal-container.game-setup-modal .preset-card {
        padding: 6px 8px !important;
        min-height: 48px !important;
    }
    .modal-container.game-setup-modal .preset-card .preset-name {
        font-size: 11px !important;
    }
    .modal-container.game-setup-modal .preset-card .preset-meta {
        font-size: 9px !important;
    }
    /* Toggle Da/Nu, slider, butoane reguli — compact */
    .modal-container.game-setup-modal .toggle-yn,
    .modal-container.game-setup-modal .toggle-button,
    .modal-container.game-setup-modal .yn-btn {
        padding: 4px 10px !important;
        font-size: 10px !important;
        min-height: 28px !important;
    }
    .modal-container.game-setup-modal .rule-chip,
    .modal-container.game-setup-modal .rule-toggle {
        padding: 4px 8px !important;
        font-size: 10px !important;
        min-height: 28px !important;
    }
    .modal-container.game-setup-modal .min-rating-slider,
    .modal-container.game-setup-modal input[type="range"] {
        height: 6px !important;
    }
    .modal-container.game-setup-modal .modal-header {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }
    .modal-container.game-setup-modal .modal-title {
        font-size: 14px !important;
    }
    .modal-container.game-setup-modal .modal-subtitle {
        font-size: 10px !important;
    }
    .modal-container.game-setup-modal .setup-section {
        margin-bottom: 8px !important;
        padding: 8px !important;
    }
    .modal-container.game-setup-modal .setup-label {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }
    .modal-container.game-setup-modal .difficulty-btn,
    .modal-container.game-setup-modal .modal-count-btn {
        padding: 6px 8px !important;
        font-size: 10px !important;
        min-height: 36px !important;
    }
    .modal-container.game-setup-modal .difficulty-options {
        gap: 4px !important;
    }
    .modal-container.game-setup-modal .modal-footer,
    .modal-container.game-setup-modal .modal-actions {
        padding: 6px 12px !important;
        flex: 0 0 auto !important;
    }
    .modal-container.game-setup-modal .btn-create-game,
    .modal-container.game-setup-modal .btn-primary {
        padding: 8px 16px !important;
        font-size: 12px !important;
        min-height: 36px !important;
    }
    .modal-header,
    .mp-modal-header,
    .discard-history-modal-header,
    .tile-audit-modal-header {
        flex: 0 0 auto !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    .modal-body,
    .mp-modal-body,
    .mp-modal-body-v2,
    .discard-history-modal-body,
    .tile-audit-modal-body,
    .mp-modal-card-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 8px 12px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* mp-modal v2 footer compact (94px e prea mult) */
    .mp-modal-footer-v2 {
        padding: 6px 12px !important;
        gap: 6px !important;
    }
    .mp-modal-footer-v2 .mp-modal-btn-create,
    .mp-modal-footer-v2 .mp-modal-btn-cancel {
        padding: 8px 16px !important;
        font-size: 12px !important;
        min-height: 36px !important;
    }
    .mp-modal-header {
        padding: 6px 12px !important;
    }
    .mp-preset-strip {
        padding: 4px 8px !important;
        gap: 4px !important;
    }
    .mp-preset-strip .mp-preset-card {
        padding: 6px !important;
        min-height: 50px !important;
    }
    .modal-footer,
    .mp-modal-footer,
    .tile-audit-modal-footer {
        flex: 0 0 auto !important;
        padding: 6px 12px !important;
    }
    /* Sterse rule-uri duplicat 2026-04-30: forțau seat-north + opponent-area la
       42px care contrazicea noul layout cu seat-north 140px + carduri 56px. */
    /* CRITIC pt 3P/4P landscape: opponents au pe desktop grid-area: opp1/opp2/opp3
       (linia 4814-4824). In landscape grid-ul nostru NU are opp1/opp2/opp3, doar
       hand-top. Resetam grid-area si lasam auto-placement in hand-top spread. */
    body.game-active.immersive-mode .opponent-area[data-seat="north"],
    body.mp-game-active.immersive-mode .opponent-area[data-seat="north"],
    body.game-active.immersive-mode .opponent-area[data-seat="east"],
    body.mp-game-active.immersive-mode .opponent-area[data-seat="east"],
    body.game-active.immersive-mode .opponent-area[data-seat="west"],
    body.mp-game-active.immersive-mode .opponent-area[data-seat="west"],
    body.game-active .opponent-area[data-seat="north"],
    body.mp-game-active .opponent-area[data-seat="north"],
    body.game-active .opponent-area[data-seat="east"],
    body.mp-game-active .opponent-area[data-seat="east"],
    body.game-active .opponent-area[data-seat="west"],
    body.mp-game-active .opponent-area[data-seat="west"] {
        grid-area: hand-top !important;
    }
    /* sters duplicat 2026-04-30 — bata regula corecta de mai sus cu position:absolute */
    .seat-south {
        min-height: 70px !important;
        max-height: 70px !important;
    }
    .seat-south .player-info-bar {
        padding: 1px 6px !important;
        font-size: 10px !important;
    }
    .seat-south .player-hand {
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 1px 4px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
    .etalare-zone {
        padding: 4px 2px 1px !important;
        min-height: 0 !important;
    }
    /* OPPONENT — layout complet vizibil pentru 2/3/4 jucatori in hand-top 42px:
       - opponent-info bar 18px (avatar 16 + nume + timer + scor + tiles badge)
       - opponent-hand 22px (tile-backs 12x18)
       Total = 18 + 22 + 2 padding = 42px ✓ */
    body.game-active.immersive-mode .opponent-area .opponent-name,
    body.mp-game-active.immersive-mode .opponent-area .opponent-name,
    body.game-active .opponent-area .opponent-name,
    body.mp-game-active .opponent-area .opponent-name,
    .opponent-area .opponent-name {
        font-size: 9px !important;
        max-width: none !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    body.game-active .opponent-area .opponent-info,
    body.mp-game-active .opponent-area .opponent-info,
    /* Info row 32px = 2 sub-rânduri × 16px each via flex-wrap.
       Row 1: avatar + name + status. Row 2: timer + score + tiles. */
    .opponent-area .opponent-info {
        font-size: 8px !important;
        gap: 3px !important;
        row-gap: 0 !important;
        flex-wrap: wrap !important;
        max-height: 32px !important;
        min-height: 32px !important;
        height: 32px !important;
        overflow: hidden !important;
        align-items: center !important;
        align-content: flex-start !important;
        padding: 1px 3px !important;
        display: flex !important;
        flex-direction: row !important;
    }
    /* Avatar + Name + Status — Row 1 (top, 16px). Empuie restul pe Row 2. */
    .opponent-area .seat-avatar { order: 1 !important; }
    .opponent-area .opponent-name { order: 2 !important; }
    .opponent-area .opponent-status { order: 3 !important; }
    /* Forteaza wrap dupa Row 1 — un spacer 100% width */
    .opponent-area .opponent-info::after {
        content: '' !important;
        flex-basis: 100% !important;
        height: 0 !important;
        order: 4 !important;
    }
    .opponent-area .player-timer { order: 5 !important; }
    .opponent-area .opponent-points { order: 6 !important; }
    .opponent-area .opponent-tiles-count { order: 7 !important; }
    /* Avatar 16×16 — sidebar 140px lat, mai mult spatiu */
    body.game-active.immersive-mode .game-play-view .opponent-area .seat-avatar,
    body.mp-game-active.immersive-mode .game-play-view .opponent-area .seat-avatar,
    body.game-active .game-play-view .opponent-area .seat-avatar,
    body.mp-game-active .game-play-view .opponent-area .seat-avatar,
    body.game-active .opponent-area .seat-avatar,
    body.mp-game-active .opponent-area .seat-avatar,
    .opponent-area .seat-avatar,
    .opponent-area .opponent-avatar {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        max-width: 16px !important;
        flex-shrink: 0 !important;
    }
    /* Name max 60px, font 8px — confortabil */
    body.game-active.immersive-mode .opponent-area .opponent-name,
    body.mp-game-active.immersive-mode .opponent-area .opponent-name,
    body.game-active .game-play-view .opponent-area .opponent-name,
    body.mp-game-active .game-play-view .opponent-area .opponent-name,
    .opponent-area .opponent-name {
        font-size: 8px !important;
        max-width: 60px !important;
        min-width: 0 !important;
        flex: 0 1 60px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 14px !important;
        letter-spacing: 0 !important;
    }
    /* Timer + Score + Tiles count — font 7px, 14px tall */
    body.game-active.immersive-mode .opponent-area .player-timer,
    body.mp-game-active.immersive-mode .opponent-area .player-timer,
    body.game-active.immersive-mode .opponent-area .opponent-points,
    body.mp-game-active.immersive-mode .opponent-area .opponent-points,
    body.game-active.immersive-mode .opponent-area .opponent-tiles-count,
    body.mp-game-active.immersive-mode .opponent-area .opponent-tiles-count,
    body.game-active .game-play-view .opponent-area .player-timer,
    body.mp-game-active .game-play-view .opponent-area .player-timer,
    body.game-active .game-play-view .opponent-area .opponent-points,
    body.mp-game-active .game-play-view .opponent-area .opponent-points,
    body.game-active .game-play-view .opponent-area .opponent-tiles-count,
    body.mp-game-active .game-play-view .opponent-area .opponent-tiles-count,
    .opponent-area .player-timer,
    .opponent-area .opponent-points,
    .opponent-area .opponent-tiles-count {
        font-size: 7px !important;
        padding: 0 3px !important;
        line-height: 14px !important;
        flex-shrink: 0 !important;
        height: 14px !important;
        display: inline-flex !important;
        visibility: visible !important;
        align-items: center !important;
        gap: 1px !important;
    }
    /* Material icons in badges — 9px */
    .opponent-area .player-timer .material-symbols-rounded,
    .opponent-area .opponent-points .material-symbols-rounded {
        font-size: 9px !important;
    }
    /* Status dot — 6px round indicator (online + ATU) */
    body.game-active.immersive-mode .opponent-area .opponent-status,
    body.mp-game-active.immersive-mode .opponent-area .opponent-status,
    body.game-active .opponent-area .opponent-status,
    body.mp-game-active .opponent-area .opponent-status,
    .opponent-area .opponent-status {
        display: inline-block !important;
        width: 6px !important;
        height: 6px !important;
        font-size: 0 !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important;
        background: #4caf50 !important;
    }
    body.game-active .opponent-area .seat-avatar,
    body.mp-game-active .opponent-area .seat-avatar,
    body.game-active .opponent-area .opponent-avatar,
    body.mp-game-active .opponent-area .opponent-avatar,
    .opponent-area .seat-avatar,
    .opponent-area .opponent-avatar {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
        flex-shrink: 0 !important;
    }
    .opponent-area .opponent-name {
        font-size: 7px !important;
        max-width: 70px !important;
    }
    .opponent-area .opponent-hand {
        max-height: 24px !important;
        min-height: 22px !important;
        gap: 1px !important;
    }
    body.game-active .opponent-tile-back,
    body.mp-game-active .opponent-tile-back,
    .opponent-tile-back {
        width: 10px !important;
        height: 16px !important;
    }
    /* Badges info: timer, points, tiles-count, ATU — micro 14px row */
    body.game-active .opponent-area .player-timer,
    body.mp-game-active .opponent-area .player-timer,
    body.game-active .opponent-area .opponent-points,
    body.mp-game-active .opponent-area .opponent-points,
    body.game-active .opponent-area .opponent-tiles-count,
    body.mp-game-active .opponent-area .opponent-tiles-count,
    .opponent-area .player-timer,
    .opponent-area .opponent-points,
    .opponent-area .opponent-tiles-count,
    .opponent-area .opponent-atu-badge {
        font-size: 7px !important;
        padding: 0 3px !important;
        line-height: 1.2 !important;
        flex-shrink: 0 !important;
        min-height: 12px !important;
        max-height: 12px !important;
    }
    .opponent-area .player-timer .material-symbols-rounded,
    .opponent-area .opponent-points .material-symbols-rounded {
        font-size: 9px !important;
    }

    /* SIDEBAR overflow fix — expand-btn iesea 18px in dreapta; discard strip
       scroll-snap la latest entry; sidebar in sine clip overflow. */
    .whist-sidebar {
        overflow-x: hidden !important;
    }
    .whist-sidebar .section-expand-btn {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        width: 16px !important;
        height: 16px !important;
        font-size: 10px !important;
    }
    .whist-sidebar .section-expand-btn .material-symbols-rounded {
        font-size: 12px !important;
    }
    .whist-sidebar .sidebar-section-discard {
        position: relative !important;
    }
    /* Discard strip — scroll-snap-end ca ultima piesa sa fie mereu vizibila */
    .whist-sidebar .discard-history-strip {
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
    }
    .whist-sidebar .discard-history-tile {
        scroll-snap-align: end !important;
    }

    /* ACTIVITY LOG — design profesional pe coloana 96px:
       - background subtil cu gradient
       - separator linie aurie intre entries
       - nume jucator BOLD auriu, actiune normal
       - hover highlight, animation slide-in
       - O singura linie per entry cu ellipsis */
    .whist-sidebar .sidebar-section-log {
        padding: 4px !important;
    }
    .whist-sidebar .activity-log-header {
        font-size: 8px !important;
        padding: 3px 4px !important;
        white-space: nowrap !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
        letter-spacing: 0 !important;
        background: linear-gradient(90deg, rgba(255,215,0,.12), transparent) !important;
        border-radius: 3px !important;
        border-bottom: 1px solid rgba(255,215,0,.25) !important;
        margin-bottom: 3px !important;
        color: rgba(255,215,0,.95) !important;
        font-weight: 700 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
    }
    .whist-sidebar .activity-log-header > * {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .whist-sidebar .activity-log-header .material-symbols-rounded {
        font-size: 11px !important;
    }
    .whist-sidebar .activity-log-header span:not(.material-symbols-rounded) {
        font-size: 8px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .whist-sidebar .activity-log-entry,
    body.game-active .activity-log-entry,
    body.mp-game-active .activity-log-entry {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 7px !important;
        padding: 2px 4px !important;
        line-height: 1.25 !important;
        max-width: 100% !important;
        display: block !important;
        border-bottom: 1px solid rgba(255,215,0,.08) !important;
        background: linear-gradient(90deg, rgba(0,0,0,.18), transparent) !important;
        transition: background .15s ease !important;
        margin-bottom: 1px !important;
        border-radius: 2px !important;
        letter-spacing: .1px !important;
    }
    .whist-sidebar .activity-log-entry:nth-child(odd) {
        background: linear-gradient(90deg, rgba(255,215,0,.04), transparent) !important;
    }
    .whist-sidebar .activity-log-entry:hover {
        background: rgba(255,215,0,.12) !important;
    }
    /* TOATE elementele din entry pe acelasi rand cu username — display inline,
       acelasi font 7px, NIMIC pe linie noua. Specificitate (0,3,1) bate baza (0,2,0). */
    .whist-sidebar .activity-log-entry > *,
    body.game-active .whist-sidebar .activity-log-entry .log-player-name,
    body.mp-game-active .whist-sidebar .activity-log-entry .log-player-name,
    body.game-active .whist-sidebar .activity-log-entry .log-action-type,
    body.mp-game-active .whist-sidebar .activity-log-entry .log-action-type,
    body.game-active .whist-sidebar .activity-log-entry .log-details,
    body.mp-game-active .whist-sidebar .activity-log-entry .log-details,
    .whist-sidebar .activity-log-entry .log-player-name,
    .whist-sidebar .activity-log-entry .log-action-type,
    .whist-sidebar .activity-log-entry .log-details {
        display: inline !important;
        font-size: 7px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .whist-sidebar .activity-log-entry .log-player-name {
        color: #FFD94A !important;
        font-weight: 700 !important;
    }
    .whist-sidebar .activity-log-entry .log-action-type {
        color: #8FE0F5 !important;
        font-weight: 600 !important;
    }
    .whist-sidebar .activity-log-entry .log-details {
        color: rgba(255,255,255,.78) !important;
        font-weight: 400 !important;
    }
    /* Spatiu intre username si actiune (1 caracter) */
    .whist-sidebar .activity-log-entry .log-player-name::after {
        content: ' ' !important;
        display: inline !important;
    }
    .whist-sidebar .activity-log-empty {
        font-size: 9px !important;
        color: rgba(255,255,255,.45) !important;
        padding: 8px !important;
        text-align: center !important;
        font-style: italic !important;
    }

    /* TABLE MELD GROUPS — piesele sa se aseze corect pe etalare zones */
    .etalare-zone .table-meld-group,
    .etalare-zone .meld-group,
    .etalare-zone .etalare-meld {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 1px !important;
        padding: 2px 3px !important;
        margin: 2px 1px !important;
    }
    .etalare-zone .etalare-melds-container,
    .etalare-zone .etalare-scroll {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: 100% !important;
    }
    .etalare-zone .tile {
        width: 22px !important;
        height: 30px !important;
        min-width: 22px !important;
        min-height: 30px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }

    /* CONTEXT PANEL (chat/menu drawer) — overlay fixed, slide-in din dreapta.
       Default position relative iese din viewport in landscape ingust. */
    .context-panel {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        width: 280px !important;
        max-width: 80vw !important;
        min-width: 0 !important;
        flex: none !important;
        z-index: 1000 !important;
        transform: translateX(100%);
        transition: transform .25s ease !important;
    }
    .context-panel.active {
        transform: translateX(0) !important;
    }
    .context-panel.hidden {
        transform: translateX(100%) !important;
        width: 280px !important;
    }
    /* Landscape layouts per player count */
    .game-play-view[data-players="2"] {
        grid-template-areas:
            "hand-top   hand-top   sidebar"
            "zone1      zone1      sidebar"
            "zone2      zone2      sidebar"
            "hand-bot   hand-bot   sidebar";
    }
    .game-play-view[data-players="3"] {
        grid-template-areas:
            "hand-top   hand-top   sidebar"
            "zone1      zone2      sidebar"
            "zone3      zone3      sidebar"
            "hand-bot   hand-bot   sidebar";
    }
    .game-play-view[data-players="4"] {
        grid-template-areas:
            "hand-top   hand-top   sidebar"
            "zone1      zone2      sidebar"
            "zone3      zone4      sidebar"
            "hand-bot   hand-bot   sidebar";
    }
    .whist-sidebar {
        flex-direction: column;
        height: auto;
        max-height: 100%;
    }
    .whist-sidebar .discard-history-strip {
        flex-wrap: wrap;
        overflow-x: hidden;
    }
}

/* Desktop (≥ 768px) */
@media (min-width: 768px) {
    /* Container max-width 1200px centrat (cerinta: max-width 1200 centrat) */
    .app-container { max-width: 1200px; margin: 0 auto; }
    /* 2026-04-21 v8 DESKTOP FIX: Nav-rail e position:fixed bottom + z-index 200 →
       acopera partea de jos a game-play-view (butoane seat-south clipped).
       Fix: padding-bottom pe .main-content = nav-rail-h REAL (status-bar ~35px +
       nav-bar-primary ~60px + paduri = ~110-120px) + margin de siguranta 16px.
       Folosesc 140px fix pe desktop (nav-rail-h fiind variable peste tot).
       Default .main-content din linia 1484 e 110px — insuficient. */
    .main-content {
        padding-bottom: 140px !important;
    }
    .game-play-view {
        padding: 8px;    /* 8px multiplu */
        gap: 8px;         /* 8px multiplu */
        max-width: 1200px;
        margin: 0 auto;
    }
    .whist-sidebar { max-width: 200px; }
    /* 2026-04-21 DESKTOP v2: SIDEBAR UNIT — seat-north (opponents top) + whist-sidebar
       (piles+atu+discard+log) LOOK ca un singur bloc vertical continuu pe coloana dreapta.
       Acelasi fundal gradient, fara border intre ele, rotunjit doar sus/jos. */
    .seat-north {
        /* Fundal identic cu .whist-sidebar (vezi linia 4732) pentru continuitate vizuala */
        background:
            repeating-linear-gradient(120deg,
                transparent 0, transparent 3px,
                rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 4px),
            linear-gradient(135deg,
                rgba(8, 30, 15, 0.75) 0%,
                rgba(3, 18, 8, 0.85) 100%);
        border: 1px solid rgba(255, 215, 0, 0.12);
        border-bottom: none;          /* fara border jos — seamless cu sidebar */
        border-radius: 10px 10px 0 0; /* rotunjit doar sus */
        padding: 6px 5px;
        gap: 6px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            inset 0 0 20px rgba(0, 0, 0, 0.2);
        position: relative;
        /* Elimina gap-ul dintre seat-north si whist-sidebar (grid gap 8px pe desktop)
           — margin negativ ca sa para atipit de sidebar */
        margin-bottom: -8px;
        z-index: 1;
    }
    /* Gold accent line la varful seat-north (ca la varful original al whist-sidebar) */
    .seat-north::before {
        content: '';
        position: absolute;
        top: 0; left: 10%; right: 10%;
        height: 1px;
        background: linear-gradient(90deg,
            transparent,
            rgba(255, 215, 0, 0.4) 50%,
            transparent);
        z-index: 2;
    }
    /* Sidebar fara border sus, rotunjit doar jos — continuitate cu seat-north */
    .whist-sidebar {
        border-top: none;
        border-radius: 0 0 10px 10px;
    }
    /* Gold accent jos pentru sidebar (era sus in base, mutam-o) */
    .whist-sidebar::before {
        top: auto;
        bottom: 0;
    }
    /* 2026-04-21 DESKTOP: oponentii stivuiti vertical in coloana 180px — umple latimea
       (base .opponent-area deja are width:100% + flex:1 1 0; aici override-uim regulile
       vechi care forteaza 240/260px fix pe orizontal).
       2026-04-21 v3 FIX overlap: flex: 0 0 auto + min-height FIX 86px ca oponentii sa
       NU mai poata shrink-ui sub continut (info wrap 2 randuri ~35px + hand 24-28px +
       padding 11px = ~76px minim real). Daca nu incap toti, .seat-north scrolleaza
       (are overflow-y: auto din baza) — mai bine decat overlap vizual. */
    .seat-north > .opponent-area,
    .opponent-area {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex: 0 0 auto;            /* NU grow, NU shrink — dimensiune fixa controlata */
        min-height: 86px;          /* minim content real (info 2 randuri + hand + padding) */
        /* Incadrare fix: padding mic, gap mic (continutul se auto-constrange via
           overflow-x pe .opponent-hand si ellipsis pe .opponent-name). Adaug
           overflow:hidden dar cu margin negativ pe ::before ca sa nu taiem gold accent. */
        padding: 5px 7px 6px;
        gap: 4px;
        overflow: hidden;          /* clip spill — previne overlap vizual cand content = tall */
    }
    /* 2026-04-21 DESKTOP: opponent-info WRAP pe 2 randuri ca sa incapa tot in coloana 180px
       (avatar+nume+puncte pe rand 1, timer+count+status pe rand 2). */
    .opponent-area .opponent-info {
        flex-wrap: wrap;
        row-gap: 3px;
        column-gap: 4px;
        font-size: 10px;
        align-items: center;
        width: 100%;
        min-width: 0;
    }
    /* Avatar compact pe desktop — 22px in loc de 26px, face loc la nume mai lung */
    .opponent-area .opponent-avatar,
    .opponent-area .seat-avatar {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px;
        flex-shrink: 0;
        font-size: 10px;
    }
    /* Nume oponent — ocupa spatiul ramas pe primul rand, ellipsis la overflow */
    .opponent-area .opponent-name {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 90px;
        font-size: 10px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Hover expandeaza pe desktop ca sa vezi numele complet, daca e cazul */
    .opponent-area .opponent-name:hover {
        max-width: 140px;
    }
    /* Timer, points, tiles-count — compact pe rand 2 cu font mic */
    .opponent-area .player-timer {
        font-size: 9px;
        padding: 1px 4px;
        gap: 2px;
        flex-shrink: 0;
    }
    .opponent-area .player-timer .material-symbols-rounded {
        font-size: 12px;
    }
    .opponent-area .opponent-points {
        font-size: 9px;
        padding: 1px 5px;
        flex-shrink: 0;
    }
    .opponent-area .opponent-tiles-count {
        font-size: 9px;
        padding: 1px 5px;
        min-width: 20px;
        flex-shrink: 0;
    }
    .opponent-area .opponent-status {
        font-size: 9px;
        flex-shrink: 0;
    }
    /* Status gol — nu ocupa spatiu */
    .opponent-area .opponent-status:empty { display: none; }
    /* Hand oponent — 1 rand de tiluri 16×22, scroll orizontal profesional cand depasesc
       2026-04-21 v10: scrollbar vizibil inline, gold thin stil casino (match cu activity log).
       Reservam 34px inaltime (22 tile + 4 margin + 4 scrollbar + 4 buffer) ca scrollbar-ul
       sa fie mereu vizibil fara sa deformeze layout-ul tilurilor. */
    .opponent-area .opponent-hand {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 2px;
        width: 100%;
        max-width: 100%;
        min-height: 32px;
        max-height: 34px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-shrink: 0;
        padding-bottom: 4px;           /* buffer intre tile-uri si scrollbar */
        /* Firefox — thin gold scrollbar */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 215, 0, 0.45) rgba(0, 0, 0, 0.25);
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    /* ═══ WEBKIT SCROLLBAR — orizontal gold inline (Chrome/Edge/Safari) ═══
       Stil identic cu activity-log pt. coerenta vizuala premium. */
    .opponent-area .opponent-hand::-webkit-scrollbar {
        display: block;
        height: 5px;                   /* orizontal: height in loc de width */
    }
    .opponent-area .opponent-hand::-webkit-scrollbar-track {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.2) 100%);
        border-radius: 3px;
        margin: 0 2px;
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    }
    .opponent-area .opponent-hand::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg,
            rgba(255, 215, 0, 0.55) 0%,
            rgba(184, 134, 11, 0.65) 100%);
        border-radius: 3px;
        border: 1px solid rgba(255, 215, 0, 0.2);
        box-shadow:
            inset 0 1px 0 rgba(255, 245, 200, 0.3),
            0 0 4px rgba(255, 215, 0, 0.2);
        transition: background 180ms ease;
    }
    .opponent-area .opponent-hand::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(90deg,
            rgba(255, 235, 150, 0.85) 0%,
            rgba(255, 215, 0, 0.9) 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 220, 0.5),
            0 0 8px rgba(255, 215, 0, 0.45);
    }
    .opponent-area .opponent-hand::-webkit-scrollbar-thumb:active {
        background: linear-gradient(90deg,
            rgba(255, 245, 180, 0.95) 0%,
            rgba(255, 215, 0, 1) 100%);
    }
    .opponent-area .opponent-hand::-webkit-scrollbar-corner {
        background: transparent;
    }
    /* Piese oponent pe desktop — 20×28 (marit fata de 16×22 ca sa se vada complet) */
    .opponent-area .opponent-tile-back {
        width: 20px;
        height: 28px;
        flex-shrink: 0;
    }
    /* 2026-04-21 v3 DESKTOP: ARUNCATE = single row horizontal (FIX 72px), ACTIVITATE = restul
       sidebar-ului (flex:1, vizibila jos). Schimbare fata de v2 (multi-row discard) ca sa
       se vada activity log complet, nu doar 3-4 pastile taiate jos. */
    .whist-sidebar .sidebar-section-discard {
        flex: 0 0 auto;           /* FIX, nu grow — cedam spatiul la log */
        min-height: 72px;
        max-height: 72px;
    }
    /* Override grid multi-row (base .discard-history-strip) → single row horizontal */
    .whist-sidebar .discard-history-strip {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        grid-template-columns: none !important;
        grid-auto-rows: initial !important;
        max-height: 50px;
        min-height: 50px;
        gap: 3px;
        padding: 4px 6px;
        overflow-x: auto;
        overflow-y: hidden;
        align-items: center;
    }
    .whist-sidebar .discard-history-tile {
        width: 20px;
        height: 28px;
        font-size: 11px;
        flex-shrink: 0;
    }
    /* 2026-04-30 DESKTOP: Activity log GROW — umple sidebarul pana jos.
       flex:1 cu min-height 0 ca sa NU iasa din parent + max sa nu se umfle peste. */
    .whist-sidebar .sidebar-section-log {
        flex: 1 1 0;                /* grow + shrink, fara baza fixa */
        min-height: 0;              /* CRITIC: permite shrink in parent flex */
        max-height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .whist-sidebar .sidebar-section-log .activity-log {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .whist-sidebar .sidebar-section-log .activity-log-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;           /* fara plafon — body se intinde cu sectiunea */
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 215, 0, 0.45) rgba(0, 0, 0, 0.2);
        scroll-behavior: auto;
        overscroll-behavior: contain;
        padding-right: 6px;
    }
    .whist-sidebar .sidebar-section-log .activity-log-body::-webkit-scrollbar {
        width: 6px;
    }
    .whist-sidebar .sidebar-section-log .activity-log-body::-webkit-scrollbar-track {
        background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.2) 100%);
        border-radius: 3px;
        margin: 2px 0;
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.4);
    }
    .whist-sidebar .sidebar-section-log .activity-log-body::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg,
            rgba(255, 215, 0, 0.6) 0%,
            rgba(184, 134, 11, 0.7) 100%);
        border-radius: 3px;
        border: 1px solid rgba(255, 215, 0, 0.2);
        box-shadow:
            inset 0 1px 0 rgba(255, 245, 200, 0.3),
            0 0 4px rgba(255, 215, 0, 0.2);
        transition: background 180ms ease;
    }
    .whist-sidebar .sidebar-section-log .activity-log-body::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg,
            rgba(255, 235, 150, 0.85) 0%,
            rgba(255, 215, 0, 0.9) 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 220, 0.5),
            0 0 8px rgba(255, 215, 0, 0.45);
    }
    .whist-sidebar .sidebar-section-log .activity-log-body::-webkit-scrollbar-thumb:active {
        background: linear-gradient(180deg,
            rgba(255, 245, 180, 0.95) 0%,
            rgba(255, 215, 0, 1) 100%);
    }
    .whist-sidebar .sidebar-section-log .activity-log-body::-webkit-scrollbar-corner {
        background: transparent;
    }
    .whist-sidebar .pile-area {
        min-height: 48px;
        padding: 4px 2px;
    }
    /* 2026-04-21 v3 DESKTOP: 4 zone etalare VERTICALE → coloane inguste (~200-245px).
       Meld group = INLINE (horizontal, tiles pe un rand) — nu wrap, nu shrink.
       Daca grupul e prea lat (>zona), scroll orizontal e activat in baza (.etalare-zone
       .table-meld-group linia ~4700) cu scrollbar VIZIBIL subtle auriu + fade mask la
       margine dreapta. Aici doar boost la dimensiune pe desktop (4px vs 3px mobile).
       NOTA v5: overflow-y: visible — tiles cu box-shadow vertical nu sunt taiate. */
    .etalare-zone .table-meld-group::-webkit-scrollbar {
        height: 4px;
    }
    /* 2026-04-21 v5 DESKTOP FIX: REVERTAT max-height + align-self: start — cauzau piese
       invizibile (align-self: start inhiba stretch la grid cell → .etalare-scroll cu
       flex:1 1 0 nu mai primea inaltime determinata → overflow:hidden pe zona taia continut).
       Zone raman la stretch default (umple celula grid), scroll intern functional. */
    /* ═══ SCROLLBAR PROFESIONAL pe .etalare-scroll (fiecare zona) ═══
       Acelasi stil ca activity-log — gradient auriu multi-state, track subtle. */
    .etalare-scroll {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 215, 0, 0.45) rgba(0, 0, 0, 0.2);
        padding-right: 6px;        /* textul nu se lipeste de scrollbar */
    }
    .etalare-scroll::-webkit-scrollbar {
        width: 6px;
    }
    .etalare-scroll::-webkit-scrollbar-track {
        background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.2) 100%);
        border-radius: 3px;
        margin: 2px 0;
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.4);
    }
    .etalare-scroll::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg,
            rgba(255, 215, 0, 0.6) 0%,
            rgba(184, 134, 11, 0.7) 100%);
        border-radius: 3px;
        border: 1px solid rgba(255, 215, 0, 0.2);
        box-shadow:
            inset 0 1px 0 rgba(255, 245, 200, 0.3),
            0 0 4px rgba(255, 215, 0, 0.2);
        transition: background 180ms ease;
    }
    .etalare-scroll::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg,
            rgba(255, 235, 150, 0.85) 0%,
            rgba(255, 215, 0, 0.9) 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 220, 0.5),
            0 0 8px rgba(255, 215, 0, 0.45);
    }
    .etalare-scroll::-webkit-scrollbar-thumb:active {
        background: linear-gradient(180deg,
            rgba(255, 245, 180, 0.95) 0%,
            rgba(255, 215, 0, 1) 100%);
    }
    .etalare-scroll::-webkit-scrollbar-corner {
        background: transparent;
    }
    /* 2026-04-21 DESKTOP: seat-south MAI COMPACT pe desktop — reducem tile-height de la
       60px la 48px (cascada prin --tile-height local pe .seat-south), plus padding mai mic.
       Efect cumulat pe inaltimea stativului:
         - .player-hand height = calc(2 * 48 + 29) = 125px (era 2*60+29 = 149px, saved 24px)
         - player-hand padding: 10/12 → 6/8 (saved 8px)
         - info-bar padding: 4px → 2px (saved 4px)
       2026-04-21 v9 FIX RAMA: seat-south primeste padding 6px 4px (era 0) ca rama lemn
       (.player-area border 1px + border-radius 6px + box-shadow 0 6px 16px 0.5 alpha)
       sa aibă unde sa se deseneze. Fara padding, box-shadow-ul si colturile rotunjite
       sunt clipped de grid boundary. */
    .seat-south {
        padding: 6px 4px;
        /* Override CSS vars local — cascada la .seat-south .player-hand .tile si la
           calc-ul height din .player-hand (2 * var(--tile-height) + 29). Celelalte
           locuri (etalare, sidebar, aruncate) primesc tile-height din :root neschimbat. */
        --tile-width: 38px;
        --tile-height: 48px;
        --tile-font: 19px;
    }
    .seat-south .player-hand {
        padding: 6px 30px 8px;
    }
    .seat-south .player-info-bar {
        padding: 2px 8px;
    }

    /* 2026-04-21 v7 DESKTOP: ANIMATIA TURN — border auriu SOLID 3px (outline, NU ocupa
       layout) + inset glow puternic + outer glow pulsant. Imposibil de ratat.
       Folosesc `outline` (nu `border`) pentru granita vizibila pt ca border-ul ar
       afecta dimensiunile si ar impinge continutul — outline-ul pluteste deasupra. */
    .etalare-zone.zone-active {
        z-index: 3;
        position: relative;
        border-color: rgba(255, 215, 0, 0.85) !important;
        outline: 3px solid rgba(255, 215, 0, 0.9);
        outline-offset: -2px;
        background:
            radial-gradient(ellipse 80% 60% at 50% 0%,
                rgba(255, 215, 0, 0.1) 0%,
                transparent 60%),
            linear-gradient(165deg,
                rgba(18, 70, 32, 0.65) 0%,
                rgba(8, 50, 22, 0.75) 100%) !important;
        animation: zoneActivePulseDesktop 2.2s ease-in-out infinite !important;
    }
    .etalare-zone.zone-active::before,
    .etalare-zone.zone-active::after {
        border-color: rgba(255, 235, 130, 1) !important;
        box-shadow: 0 0 16px rgba(255, 215, 0, 0.85) !important;
    }
    /* Label chip pe zona activa — background auriu puternic, nume negru lizibil */
    .etalare-zone.zone-active[data-label]:not(:has(.etalare-label))::before {
        background: linear-gradient(135deg,
            rgba(255, 235, 130, 0.95),
            rgba(255, 195, 50, 0.85)) !important;
        color: #1a1208 !important;
        border-color: rgba(255, 245, 180, 1) !important;
        font-weight: 700 !important;
        box-shadow:
            0 0 12px rgba(255, 215, 0, 0.7),
            0 1px 2px rgba(0, 0, 0, 0.3) !important;
    }
    /* Keyframes desktop — pulse DRAMATIC: outer glow 45px 0.65 alpha la peak,
       inset glow schimba intensitatea pt senzatie de "respiratie" pe masa. */
    @keyframes zoneActivePulseDesktop {
        0%, 100% {
            box-shadow:
                inset 0 0 28px rgba(255, 215, 0, 0.25),
                inset 0 1px 3px rgba(0, 0, 0, 0.3),
                0 0 28px 3px rgba(255, 215, 0, 0.45);
        }
        50% {
            box-shadow:
                inset 0 0 44px rgba(255, 215, 0, 0.4),
                inset 0 1px 3px rgba(0, 0, 0, 0.3),
                0 0 48px 6px rgba(255, 215, 0, 0.7);
        }
    }

    /* Seat-south wooden rack glow — pe desktop stativul e mai compact (125px inaltime),
       padding:0 deci outer glow risca sa fie clipped de grid boundary.
       Fix: z-index + glow mai pronuntat (35px la peak) + position relative ca glow-ul
       sa iasa deasupra zone etalare adiacente. Animation override cu keyframes desktop. */
    .seat-south {
        position: relative;
        z-index: 2;
    }
    .seat-south .player-area.active-turn {
        animation: seatSouthTurnGlowDesktop 1.8s ease-in-out infinite !important;
    }
    @keyframes seatSouthTurnGlowDesktop {
        0%, 100% {
            box-shadow:
                0 4px 10px rgba(0, 0, 0, 0.35),
                0 1px 3px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 245, 220, 0.7),
                inset 0 -2px 3px rgba(110, 70, 35, 0.25),
                inset 0 0 0 1px rgba(180, 130, 60, 0.45),
                0 0 14px 2px rgba(255, 200, 80, 0.4);
        }
        50% {
            box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.45),
                0 1px 3px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 250, 230, 0.85),
                inset 0 -2px 3px rgba(110, 70, 35, 0.25),
                inset 0 0 0 1px rgba(230, 180, 90, 0.75),
                0 0 34px 4px rgba(255, 200, 80, 0.75);
        }
    }

    /* ═══════════════════════════════════════════════════════════════════════
       2026-04-21 DESKTOP v10 — PREMIUM SIDEBAR CASINO STYLE
       Look profesional pentru coloana dreapta (seat-north + whist-sidebar).
       Target: 180-200px latime, arata ca un panel ornat de casino cu:
        - Double-border (exterior lemn intunecat + interior hairline auriu)
        - Felt emerald texture (matcheaza masa, dar mai intunecat/elegant)
        - Section headers cu label auriu, uppercase, letter-spaced + underline subtile
        - Separator decorativ intre sectiuni (diamant central + linii aurii)
        - Inset highlight top (reflection glossy) + ambient drop-shadow
        - Pile/atu/discard/log polish: spacing crescut, borders mai precise
       ═══════════════════════════════════════════════════════════════════════ */

    /* ── Wrapper sidebar — emerald premium felt cu bronze/gold double-border ── */
    .whist-sidebar {
        background:
            /* Highlight top — subtile gloss reflection */
            linear-gradient(180deg,
                rgba(255, 235, 150, 0.05) 0%,
                transparent 6%,
                transparent 100%),
            /* Micro-noise felt texture */
            repeating-linear-gradient(115deg,
                transparent 0, transparent 2px,
                rgba(255, 255, 255, 0.012) 2px, rgba(255, 255, 255, 0.012) 3px),
            repeating-linear-gradient(25deg,
                transparent 0, transparent 2px,
                rgba(0, 0, 0, 0.025) 2px, rgba(0, 0, 0, 0.025) 3px),
            /* Vignette soft — center highlight, dark edges */
            radial-gradient(ellipse 120% 80% at 50% 0%,
                rgba(20, 55, 30, 0.5) 0%,
                rgba(8, 28, 14, 0.85) 55%,
                rgba(3, 14, 6, 0.95) 100%);
        /* Dark wood border outer + gold hairline inset (via box-shadow) */
        border: 1px solid rgba(62, 38, 14, 0.9) !important;
        border-top: none !important;         /* seamless cu seat-north deasupra */
        border-radius: 0 0 12px 12px;
        padding: 8px 6px !important;
        box-shadow:
            /* Gold hairline inset — the real premium accent */
            inset 0 0 0 1px rgba(255, 215, 0, 0.22),
            /* Top gloss */
            inset 0 1px 0 rgba(255, 245, 200, 0.1),
            /* Inner depth vignette */
            inset 0 0 24px rgba(0, 0, 0, 0.45),
            inset 0 -1px 0 rgba(0, 0, 0, 0.5),
            /* Outer drop shadow — floats on the felt */
            0 4px 14px rgba(0, 0, 0, 0.5),
            0 1px 3px rgba(0, 0, 0, 0.4);
        gap: 6px;
        position: relative;
    }

    /* Unitate vizuala cu seat-north (deja seamless via margin-bottom:-8px) */
    .seat-north {
        /* Enhance seat-north cu aceleasi multi-layer gradient ca sidebar-ul */
        background:
            linear-gradient(180deg,
                rgba(255, 235, 150, 0.06) 0%,
                transparent 6%,
                transparent 100%),
            repeating-linear-gradient(115deg,
                transparent 0, transparent 2px,
                rgba(255, 255, 255, 0.012) 2px, rgba(255, 255, 255, 0.012) 3px),
            repeating-linear-gradient(25deg,
                transparent 0, transparent 2px,
                rgba(0, 0, 0, 0.025) 2px, rgba(0, 0, 0, 0.025) 3px),
            radial-gradient(ellipse 120% 80% at 50% 100%,
                rgba(20, 55, 30, 0.5) 0%,
                rgba(8, 28, 14, 0.85) 55%,
                rgba(3, 14, 6, 0.95) 100%) !important;
        border: 1px solid rgba(62, 38, 14, 0.9) !important;
        border-bottom: none !important;
        border-radius: 12px 12px 0 0 !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 215, 0, 0.22),
            inset 0 1px 0 rgba(255, 245, 200, 0.15),
            inset 0 0 24px rgba(0, 0, 0, 0.45),
            0 2px 6px rgba(0, 0, 0, 0.35) !important;
    }

    /* Bronze decorative corner ornaments in the sidebar 4 corners */
    .whist-sidebar::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 3px;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(184, 134, 11, 0.55) 15%,
            rgba(255, 215, 0, 0.65) 50%,
            rgba(184, 134, 11, 0.55) 85%,
            transparent 100%);
        border-radius: 0 0 12px 12px;
        opacity: 0.7;
        pointer-events: none;
    }

    /* Override ::before din baza — lasa just seamless cu seat-north */
    .whist-sidebar::before {
        display: none;
    }

    /* ── Section wrapper — subtle card look ── */
    .whist-sidebar .sidebar-section-piles,
    .whist-sidebar .sidebar-section-discard,
    .whist-sidebar .sidebar-section-log {
        background:
            linear-gradient(180deg,
                rgba(255, 255, 255, 0.015) 0%,
                transparent 100%);
        border-radius: 6px;
        position: relative;
    }

    /* Separator intre sectiuni — linie aurie cu diamant central */
    .whist-sidebar .sidebar-section-piles::after,
    .whist-sidebar .sidebar-section-discard::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 8%;
        right: 8%;
        height: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(184, 134, 11, 0.3) 20%,
            rgba(255, 215, 0, 0.55) 50%,
            rgba(184, 134, 11, 0.3) 80%,
            transparent 100%);
        pointer-events: none;
    }
    /* Mic diamant auriu in centrul separator-ului */
    .whist-sidebar .sidebar-section-piles > .separator-diamond,
    .whist-sidebar .sidebar-section-discard > .separator-diamond {
        display: none; /* placeholder — folosim ::before pe urmatoarea sectiune */
    }

    /* ═══ SECTION HEADERS — Premium gold bar ═══ */
    .whist-sidebar .sidebar-section-header {
        background:
            linear-gradient(180deg,
                rgba(255, 215, 0, 0.12) 0%,
                rgba(184, 134, 11, 0.08) 50%,
                rgba(0, 0, 0, 0.25) 100%) !important;
        border-bottom: 1px solid transparent;
        border-image: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 215, 0, 0.4) 20%,
            rgba(255, 235, 150, 0.6) 50%,
            rgba(255, 215, 0, 0.4) 80%,
            transparent 100%) 1;
        padding: 4px 8px !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        color: rgba(255, 235, 150, 0.95) !important;
        text-shadow:
            0 1px 0 rgba(0, 0, 0, 0.6),
            0 0 8px rgba(255, 215, 0, 0.3);
        box-shadow:
            inset 0 1px 0 rgba(255, 245, 200, 0.08),
            inset 0 -1px 0 rgba(0, 0, 0, 0.3);
        position: relative;
    }
    .whist-sidebar .sidebar-section-header .material-symbols-rounded {
        font-size: 14px !important;
        color: rgba(255, 215, 0, 0.85) !important;
        text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
    }
    .whist-sidebar .sidebar-section-header .section-title {
        flex: 1;
    }
    /* Count badge refined — gold pill glossy */
    .whist-sidebar .sidebar-section-header .discard-count-badge {
        background:
            linear-gradient(180deg,
                rgba(255, 235, 150, 0.35) 0%,
                rgba(184, 134, 11, 0.25) 100%);
        border: 1px solid rgba(255, 215, 0, 0.55);
        color: rgba(255, 250, 215, 1) !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        padding: 1px 7px !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 1px 2px rgba(0, 0, 0, 0.3);
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    }

    /* ═══ PILE AREA — draw + atu ═══ */
    .whist-sidebar .pile-area {
        padding: 8px 4px !important;
        min-height: 64px !important;
        background:
            radial-gradient(ellipse 80% 60% at 50% 50%,
                rgba(255, 215, 0, 0.04) 0%,
                transparent 70%);
        border-radius: 6px;
    }

    /* ═══ DISCARD STRIP — Aruncate premium ═══ */
    .whist-sidebar .discard-history-strip {
        background:
            linear-gradient(180deg,
                rgba(0, 0, 0, 0.25) 0%,
                rgba(0, 0, 0, 0.1) 100%);
        border-radius: 4px;
        border: 1px solid rgba(255, 215, 0, 0.08);
        box-shadow:
            inset 0 1px 2px rgba(0, 0, 0, 0.4),
            inset 0 0 8px rgba(0, 0, 0, 0.2);
        padding: 5px 6px !important;
        margin: 0 2px;
    }
    .whist-sidebar .discard-history-tile {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .whist-sidebar .discard-history-tile:hover {
        transform: translateY(-2px);
        box-shadow:
            0 3px 6px rgba(0, 0, 0, 0.5),
            0 0 8px rgba(255, 215, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    /* ═══ ACTIVITY LOG — container premium ═══ */
    .whist-sidebar .sidebar-section-log .activity-log-body {
        background:
            linear-gradient(180deg,
                rgba(0, 0, 0, 0.3) 0%,
                rgba(0, 0, 0, 0.15) 100%);
        border-radius: 4px;
        border: 1px solid rgba(255, 215, 0, 0.08);
        box-shadow:
            inset 0 1px 2px rgba(0, 0, 0, 0.4),
            inset 0 0 8px rgba(0, 0, 0, 0.2);
        padding: 6px 8px 6px 8px !important;
        margin: 2px;
    }
    /* Activity entries — compact premium */
    .whist-sidebar .activity-log-body .activity-entry,
    .whist-sidebar .activity-log-body .log-entry {
        font-size: 10px;
        padding: 3px 6px;
        border-radius: 3px;
        margin-bottom: 2px;
        background: rgba(255, 255, 255, 0.02);
        border-left: 2px solid rgba(255, 215, 0, 0.25);
        transition: background 0.2s ease, border-color 0.2s ease;
    }
    .whist-sidebar .activity-log-body .activity-entry:hover,
    .whist-sidebar .activity-log-body .log-entry:hover {
        background: rgba(255, 215, 0, 0.05);
        border-left-color: rgba(255, 215, 0, 0.6);
    }

    /* ═══ ATU DISPLAY — ornate badge ═══ */
    .whist-sidebar .atu-display {
        position: relative;
    }
    .whist-sidebar .atu-display::after {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        background: radial-gradient(circle,
            rgba(255, 215, 0, 0.15) 0%,
            transparent 70%);
        pointer-events: none;
        z-index: -1;
    }

    /* ═══ DRAW PILE — subtle glow ═══ */
    .whist-sidebar .draw-pile {
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
        transition: filter 0.25s ease, transform 0.25s ease;
    }
    .whist-sidebar .draw-pile:hover {
        filter: drop-shadow(0 3px 8px rgba(255, 215, 0, 0.4));
        transform: translateY(-1px);
    }

    /* ═══ LABEL "DRAW" / "ATU" — gold premium ═══ */
    .whist-sidebar .pile-label {
        font-size: 8px !important;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: rgba(255, 215, 0, 0.75);
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
        margin-top: 4px !important;
    }

    /* Keep context-panel fixed (override .col-auto) */
    .context-panel:not(.hidden) {
        flex: 0 0 320px !important;
        width: 320px !important;
        max-width: 320px !important;
        min-width: 320px !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       2026-04-21 DESKTOP v11 — PREMIUM MASA CASINO STYLE
       Look profesional pentru intreaga masa (.game-play-view). Match sidebar.
       - Multi-layer premium gradient (gloss top + ambient gold + felt + noise + vignette)
       - Double-inset ring: dark contrast + gold hairline (matched to sidebar)
       - Enhanced wood frame cu reinforced bronze gold trim
       - Top + bottom gold hairline strips (seal auriu sus si jos)
       - Ambient corner gold auras + richer watermark depth
       - Corner ornaments decorative (gold diamonds in 4 colturi)
       ═══════════════════════════════════════════════════════════════════════ */

    .game-play-view {
        /* Enhanced multi-layer premium background */
        background:
            /* Top gloss highlight — subtle reflection */
            linear-gradient(180deg,
                rgba(255, 235, 150, 0.045) 0%,
                transparent 6%,
                transparent 100%),
            /* Ambient gold aura — corners */
            radial-gradient(ellipse 60% 30% at 15% 12%,
                rgba(255, 215, 0, 0.035) 0%,
                transparent 55%),
            radial-gradient(ellipse 60% 30% at 85% 12%,
                rgba(255, 215, 0, 0.035) 0%,
                transparent 55%),
            radial-gradient(ellipse 60% 30% at 15% 88%,
                rgba(184, 134, 11, 0.03) 0%,
                transparent 55%),
            radial-gradient(ellipse 60% 30% at 85% 88%,
                rgba(184, 134, 11, 0.03) 0%,
                transparent 55%),
            /* Spot light — soft center highlight */
            radial-gradient(ellipse 80% 50% at 50% 20%,
                rgba(255, 255, 240, 0.11) 0%, transparent 55%),
            /* Deep vignette — darker corners for focus */
            radial-gradient(ellipse at 50% 50%,
                transparent 40%, rgba(0, 0, 0, 0.35) 100%),
            /* Cross-hatched felt fibers — microscopic texture */
            repeating-linear-gradient(27deg,
                transparent 0, transparent 1.5px,
                rgba(0, 0, 0, 0.028) 1.5px, rgba(0, 0, 0, 0.028) 2px),
            repeating-linear-gradient(117deg,
                transparent 0, transparent 1.5px,
                rgba(0, 0, 0, 0.022) 1.5px, rgba(0, 0, 0, 0.022) 2px),
            /* Noise */
            repeating-linear-gradient(45deg,
                transparent 0, transparent 3px,
                rgba(255, 255, 255, 0.012) 3px, rgba(255, 255, 255, 0.012) 4px),
            /* Richer deeper emerald felt gradient */
            linear-gradient(175deg,
                #218843 0%,
                #1e803b 18%,
                #1b7533 38%,
                #176a2c 58%,
                #135121 78%,
                #0e421a 100%) !important;
        /* Double-inset ring + wood frame reinforced + ambient drop */
        box-shadow:
            /* Gold hairline inset — the real premium accent (matches sidebar) */
            inset 0 0 0 1px rgba(255, 215, 0, 0.28),
            /* Dark contrast ring — deepens the gold */
            inset 0 0 0 3px rgba(0, 0, 0, 0.45),
            /* Top gloss reflection */
            inset 0 2px 0 rgba(255, 245, 200, 0.08),
            /* Deep inner vignette */
            inset 0 0 55px rgba(0, 0, 0, 0.4),
            inset 0 0 14px rgba(0, 0, 0, 0.18),
            /* Wood frame reinforced bronze gold trim */
            0 0 0 1px #2a1808,
            0 0 0 3px #C09970,
            0 0 0 4px #3d2510,
            /* Ambient drop shadow — floats */
            0 8px 32px rgba(0, 0, 0, 0.58),
            0 2px 6px rgba(0, 0, 0, 0.42) !important;
    }

    /* ── Decorative top + bottom hairline seals + corner diamonds ── */
    .game-play-view::after {
        content: '';
        position: absolute;
        top: 4px; right: 4px; bottom: 4px; left: 4px;
        pointer-events: none;
        z-index: 3;
        border-radius: 8px;
        background:
            /* TOP gold hairline strip */
            linear-gradient(90deg,
                transparent 0%,
                rgba(184, 134, 11, 0) 10%,
                rgba(255, 215, 0, 0.38) 50%,
                rgba(184, 134, 11, 0) 90%,
                transparent 100%) top / 100% 1px no-repeat,
            /* BOTTOM gold hairline strip */
            linear-gradient(90deg,
                transparent 0%,
                rgba(184, 134, 11, 0) 10%,
                rgba(255, 215, 0, 0.32) 50%,
                rgba(184, 134, 11, 0) 90%,
                transparent 100%) bottom / 100% 1px no-repeat,
            /* Corner diamonds — subtle gold dots in 4 colturi */
            radial-gradient(circle 3px at 10px 10px,
                rgba(255, 215, 0, 0.55) 0%,
                rgba(184, 134, 11, 0.35) 45%,
                transparent 70%) top left / 20px 20px no-repeat,
            radial-gradient(circle 3px at 10px 10px,
                rgba(255, 215, 0, 0.55) 0%,
                rgba(184, 134, 11, 0.35) 45%,
                transparent 70%) top right / 20px 20px no-repeat,
            radial-gradient(circle 3px at 10px 10px,
                rgba(255, 215, 0, 0.4) 0%,
                rgba(184, 134, 11, 0.25) 45%,
                transparent 70%) bottom left / 20px 20px no-repeat,
            radial-gradient(circle 3px at 10px 10px,
                rgba(255, 215, 0, 0.4) 0%,
                rgba(184, 134, 11, 0.25) 45%,
                transparent 70%) bottom right / 20px 20px no-repeat;
    }

    /* ── Enhanced "R" watermark — more depth, richer glow ── */
    .game-play-view::before {
        color: rgba(255, 215, 0, 0.05) !important;
        font-size: clamp(160px, 24vw, 300px) !important;
        text-shadow:
            0 3px 0 rgba(0, 0, 0, 0.06),
            0 0 40px rgba(255, 215, 0, 0.03),
            0 0 80px rgba(255, 215, 0, 0.018),
            2px 2px 0 rgba(255, 245, 200, 0.025) !important;
    }

    /* ── Etalare zones — premium emerald card cu gold inset hairline ── */
    .etalare-zone {
        background:
            /* Top gloss */
            linear-gradient(180deg,
                rgba(255, 235, 150, 0.03) 0%,
                transparent 8%,
                transparent 100%),
            /* Subtle noise */
            repeating-linear-gradient(115deg,
                transparent 0, transparent 2px,
                rgba(255, 255, 255, 0.01) 2px, rgba(255, 255, 255, 0.01) 3px),
            repeating-linear-gradient(25deg,
                transparent 0, transparent 2px,
                rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 3px),
            /* Darker inset felt gradient */
            radial-gradient(ellipse 110% 80% at 50% 0%,
                rgba(22, 58, 32, 0.55) 0%,
                rgba(10, 32, 16, 0.75) 55%,
                rgba(5, 18, 8, 0.88) 100%) !important;
        border: 1px solid rgba(62, 38, 14, 0.75) !important;
        border-radius: 8px !important;
        box-shadow:
            /* Gold hairline inset */
            inset 0 0 0 1px rgba(255, 215, 0, 0.18),
            /* Top gloss */
            inset 0 1px 0 rgba(255, 245, 200, 0.08),
            /* Inner depth */
            inset 0 0 18px rgba(0, 0, 0, 0.4),
            inset 0 -1px 0 rgba(0, 0, 0, 0.45),
            /* Drop shadow */
            0 2px 8px rgba(0, 0, 0, 0.35),
            0 1px 2px rgba(0, 0, 0, 0.3) !important;
        position: relative;
    }

    /* Boost subtil pe corner brackets-urile existente — mai aurii pe masa premium */
    .etalare-zone::before,
    .etalare-zone::after {
        border-color: rgba(255, 215, 0, 0.42) !important;
    }
    /* Enhance player label chip — gold premium pe masa premium */
    .etalare-zone[data-label]:not(:has(.etalare-label))::before {
        background: linear-gradient(135deg,
            rgba(255, 215, 0, 0.18),
            rgba(184, 134, 11, 0.1)) !important;
        border-color: rgba(255, 215, 0, 0.32) !important;
        color: rgba(255, 235, 150, 0.92) !important;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6) !important;
    }
}

/* Large Desktop (≥ 992px) */
@media (min-width: 992px) {
    /* 2026-04-21 DESKTOP: la fel ca la 768px — opponents umplu latimea coloanei 180px
       (inlocuim regula veche care forta 260px fix pentru layout orizontal).
       2026-04-21 v3 FIX overlap: flex 0 0 auto + min-height 86px (identic cu 768px),
       nu mai folosim flex: 1 1 0 care lasa content-ul sa overflow. */
    .seat-north > .opponent-area,
    .opponent-area {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex: 0 0 auto;
        min-height: 86px;
        overflow: hidden;
    }
    /* Padding/gap 8px — aceleasi multipli ca pe mobile, consistent */
    .game-play-view { padding: 8px; gap: 8px; }
    .whist-sidebar { max-width: 200px; }

    .lobby-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Extra Large Desktop (≥ 1200px) */
@media (min-width: 1200px) {
    .lobby-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Small tablets (≥ 576px) */
@media (min-width: 576px) {
    .lobby-grid { grid-template-columns: repeat(2, 1fr); }
    .lobby-stats-bar { gap: 12px; }
}

/* Large desktop (≥ 1366px) */
@media (min-width: 1366px) {
    .lobby-grid { grid-template-columns: repeat(4, 1fr); }
    .game-play-view { padding: 16px; }
    /* Keep context-panel fixed at 360px on big desktop (override .col-auto) */
    .context-panel:not(.hidden) {
        flex: 0 0 360px !important;
        width: 360px !important;
        max-width: 360px !important;
        min-width: 360px !important;
    }
    .player-hand { gap: 4px; }
}

/* Very small phones (≤ 375px) */
@media (max-width: 375px) {
    .top-bar { padding: 4px 10px; }
    .brand-title { font-size: 13px; letter-spacing: 0.6px; }
    .brand-section .brand-title::after { display: none; } /* Hide tagline on very small */
    .brand-icon { width: 26px; height: 34px; }
    .brand-icon::after { font-size: 18px; }
    .nav-bar-btn { min-width: 40px; }
    .nav-bar-label { display: none; }
    .lobby-btn span:not(.material-symbols-rounded) { display: none; }
    /* Keep Create Masa button text visible even on very small phones */
    .lobby-btn-create span:not(.material-symbols-rounded) { display: inline !important; }
}

/* Short landscape with game active */
@media (orientation: landscape) and (max-height: 400px) {
    /* Tiny landscape: viewport <400px h — lasa scroll vertical ca fallback dacă layout
       depăşeşte (mai bine scroll decât conținut tăiat). */
    body.mp-game-active .main-content,
    body.game-active .main-content { overflow-y: auto !important; }
    .game-play-view { overflow-y: auto !important; }
    .top-bar { height: 36px; min-height: 36px; padding: 2px 10px; }
    .top-bar::after { display: none; }
    .brand-title { font-size: 12px; }
    .brand-section .brand-title::after { display: none; }
    .brand-icon { width: 24px; height: 30px; }
    .brand-icon::after { font-size: 16px; }
    .action-btn { width: 30px; height: 30px; }
    .action-btn .material-symbols-rounded { font-size: 17px; }
    .nav-rail { height: 36px; }
    .nav-bar-btn { height: 32px; }
    .nav-bar-label { display: none; }
    body.game-active .top-bar { display: none; }
    body.game-active .nav-rail { height: 32px; }
}

/* Mobile — hide tagline where space is tight */
@media (max-width: 640px) {
    .brand-section .brand-title::after {
        font-size: 7px;
        letter-spacing: 1.5px;
        margin-top: 1px;
    }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    .nav-bar-btn { min-height: 44px; }
    .lobby-btn { min-height: 44px; }
    .drawer-item { min-height: 44px; }
    .mp-opt-btn { min-height: 44px; }
    .ct-tab { min-height: 40px; }
}


/* ================================================================================================
   26. GAME ACTIVE — full-screen game mode (all viewports)
================================================================================================ */
body.game-active .app-container { padding: 0 !important; }
/* Keep header and footer visible during game */

/* ================================================================================================
   26a. MOBILE PORTRAIT GAME — maximize board space
================================================================================================ */
@media (max-width: 480px) and (orientation: portrait) {
    :root {
        /* Nav-rail compact pe telefon mic: status-bar 28px + butoane compacte 38px + pad 6px = 72px */
        --nav-rail-h: 72px;
    }
    /* Nav-rail compact — asigura vizibilitatea */
    .nav-rail {
        height: var(--nav-rail-h) !important;
        min-height: var(--nav-rail-h) !important;
        max-height: var(--nav-rail-h) !important;
        padding-top: 4px !important;
        padding-bottom: calc(var(--sab, 0px) + 4px) !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        z-index: 500 !important;
    }
    .nav-bar-primary { gap: 0; }
    .nav-bar-btn {
        padding: 4px 8px !important;
        min-height: 0 !important;
        position: relative;
    }
    /* Expand touch target to 44px without changing visual size */
    .nav-bar-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 44px;
        transform: translate(-50%, -50%);
    }
    .nav-bar-btn .material-symbols-rounded { font-size: 18px !important; }
    .nav-bar-label { font-size: 9px !important; }

    /* Full-screen game — remove all padding */
    body.game-active .app-container { padding: 0 !important; }
}

/* Telefon foarte mic (≤360px) — piese si mai mici */
@media (max-width: 360px) and (orientation: portrait) {
    :root {
        --tile-width: 28px;
        --tile-height: 40px;
        --tile-font: 14px;
    }
    /* 2026-04-21: dimensiunea e gestionata de overrides portrait (flex 1 1 0) — doar padding compact */
    .opponent-area { padding: 2px 4px 3px; }
    .opponent-name { font-size: 9px; max-width: 38px; }
    .opponent-avatar { width: 18px !important; height: 18px !important; }
    /* Pe mobil mic: ascunde elementele care nu incap (avatar+nume+tiles-count raman) */
    .opponent-info .opponent-status,
    .opponent-info .opponent-points,
    .opponent-info .player-timer { display: none; }
    .opponent-info .seat-avatar { width: 16px; height: 16px; }
    /* ═══ SMALL PHONES (≤360px) — 8px-aligned pt. 360×640 ═══
       Viewport:  640px − 34 top − 60 nav = 546px, − 16 border/padding = 530px inner
       hand-top:  56px (8×7)
       zone1/2:   minmax(96, 1fr)   (96 = 8×12)
       sidebar:   104px (8×13)
       hand-bot:  auto ~120px
       Total min: 56 + 192 + 104 + 120 = 472px ✓ fits 530px */
    .opponent-area { padding: 2px 4px 3px !important; }
    .seat-north { min-height: 56px; max-height: 56px; }
    .game-play-view {
        grid-template-rows:
            56px
            minmax(96px, 1fr)
            minmax(96px, 1fr)
            104px
            auto;
    }
    /* 360px: override pentru [data-players="N"] (altfel rula 767px-portrait cu 120px ar domina) */
    .game-play-view[data-players="2"],
    .game-play-view[data-players="3"],
    .game-play-view[data-players="4"] {
        grid-template-rows:
            56px
            minmax(96px, 1fr)
            minmax(96px, 1fr)
            104px
            auto;
    }
    .whist-sidebar {
        height: 104px;
        padding: 0 !important;
        gap: 8px !important;
        grid-template-rows: minmax(64px, 1fr) 24px;
    }
    .whist-sidebar .draw-pile,
    .whist-sidebar .discard-pile { transform: scale(0.72); margin: -5px -3px; }
    .whist-sidebar .atu-display { transform: none; margin: 0; }
    .whist-sidebar .atu-display.atu-beside-pile .atu-tile-display {
        transform: scale(0.80); margin: -3px 0 -4px;
    }
    .whist-sidebar .atu-display.atu-beside-pile .atu-label-small { font-size: 9px; }
    .whist-sidebar .sidebar-section-discard { min-height: 72px; max-height: 72px; }
    .whist-sidebar .discard-history-strip {
        min-height: 52px;
        max-height: 52px;
        padding: 4px 6px 4px 4px;
        overflow-y: hidden;
    }
    .whist-sidebar .discard-history-tile {
        width: 22px;
        height: 30px;
        font-size: 12px;
        font-weight: 700;
    }
    /* Activity log ecrane f. mici */
    .whist-sidebar .activity-log { height: 24px; min-height: 24px; max-height: 24px; }
    .whist-sidebar .activity-log-entry { font-size: 9px; padding: 1px 5px; }
    .whist-sidebar .activity-log-header .material-symbols-rounded { font-size: 11px; }
}

/* ================================================================================================
   26b. PRINT MEDIA
================================================================================================ */
@media print {
    .nav-rail,
    .drawer-overlay,
    .drawer-panel,
    .context-panel,
    .orientation-warning,
    .immersive-toggle-float,
    .top-bar .actions-section,
    .game-loader,
    .toast-container,
    #fab,
    .mp-modal-overlay { display: none !important; }

    body { background: white !important; color: black !important; }
    .app-container { overflow: visible !important; }
}

/* ================================================================================================
   26c. FULLSCREEN DISPLAY MODE
================================================================================================ */
@media (display-mode: fullscreen) {
    .nav-rail { display: none !important; }
}

/* ================================================================================================
   26d. STANDALONE PWA DISPLAY MODE
================================================================================================ */
@media (display-mode: standalone) {
    .top-bar { padding-top: max(4px, env(safe-area-inset-top)); }
    .nav-rail { padding-bottom: max(4px, env(safe-area-inset-bottom)); }
}

/* ================================================================================================
   27. REDUCED MOTION PREFERENCES
================================================================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .lobby-status-dot,
    .lobby-card,
    .lobby-card.lc-waiting,
    .lc-status-badge,
    .lobby-stats-bar .stat-item,
    .lobby-ai-play-btn::after,
    .lobby-btn-quick::after,
    .lobby-btn-create,
    .lc-chip .material-symbols-rounded,
    .lobby-grid::before,
    .balance-badge.balance-updated,
    .double-game-banner {
        animation: none !important;
    }
}


/* ================================================================================================
   27. UTILITIES
================================================================================================ */

/* Hide/Show — Bootstrap handles d-none, d-flex, d-block; DO NOT override here
   as it breaks responsive utilities (d-sm-inline, d-md-none, etc.) */

.hidden { display: none !important; }
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* Flex */
.flex-1 { flex: 1 !important; }
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-fill { flex: 1 1 auto !important; }

/* Alignment */
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }

/* Text */
.text-center { text-align: center !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Spacing */
.m-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mt-2 { margin-top: 8px !important; }
.p-0 { padding: 0 !important; }

.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 16px !important; }

/* Position */
.position-relative { position: relative !important; }
.position-fixed { position: fixed !important; }

/* Sizing */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

/* Overflow */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }

/* Bootstrap compatibility */
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.row { display: flex; flex-wrap: wrap; }

.start-0 { left: 0 !important; }
.top-0 { top: 0 !important; }


/* ================================================================================================
   28. CHAT PANEL STYLES (context panel - chat)
================================================================================================ */
.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 8px;
}

.chat-message {
    display: flex;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--whist-radius-xs);
    font-size: 13px;
    transition: background 0.2s;
}

.chat-message:hover {
    background: var(--glass-bg);
}

.chat-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 10px;
    color: white;
}

.chat-body { flex: 1; min-width: 0; }

.chat-username {
    font-weight: 700;
    font-size: 12px;
    color: var(--whist-accent);
}

.chat-text {
    color: var(--whist-text);
    word-break: break-word;
}

.chat-time {
    font-size: 10px;
    color: var(--whist-text-muted);
}

.chat-input-wrap {
    display: flex;
    gap: 6px;
    padding: 8px 0 0;
    border-top: 1px solid var(--whist-border);
    margin-top: 8px;
}

.chat-input {
    flex: 1;
    padding: 8px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--whist-radius-sm);
    color: var(--whist-text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    resize: none;
}

.chat-input:focus {
    border-color: rgba(var(--whist-accent-rgb), 0.3);
}

.chat-send-btn {
    width: 36px;
    height: 36px;
    background: var(--whist-accent);
    border: none;
    border-radius: var(--whist-radius-sm);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-send-btn:hover {
    background: var(--whist-accent-light);
}

.chat-send-btn .material-symbols-rounded {
    font-size: 18px;
}

/* Reaction buttons */
.reaction-bar {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.reaction-btn {
    padding: 4px 8px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--whist-radius-full);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.reaction-btn:hover {
    background: var(--glass-bg-strong);
    transform: scale(1.1);
}


/* ================================================================================================
   29. ONLINE USERS PANEL
================================================================================================ */
.user-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: var(--whist-radius-xs);
    transition: background 0.2s;
    cursor: pointer;
}

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

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    color: white;
    flex-shrink: 0;
}

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

.user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--whist-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-status {
    font-size: 11px;
    color: var(--whist-text-dim);
}

.user-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--whist-success);
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(var(--whist-success-rgb), 0.5);
}


/* ================================================================================================
   30. LEADERBOARD PANEL
================================================================================================ */
.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--whist-radius-xs);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    transition: all 0.2s;
}

.leaderboard-item.top-3 {
    background: rgba(var(--whist-gold-rgb), 0.05);
    border-color: rgba(var(--whist-gold-rgb), 0.15);
}

.leaderboard-rank {
    font-weight: 800;
    font-size: 14px;
    min-width: 24px;
    text-align: center;
    color: var(--whist-text-dim);
}

.leaderboard-item.top-3:nth-child(1) .leaderboard-rank { color: #ffd700; }
.leaderboard-item.top-3:nth-child(2) .leaderboard-rank { color: #c0c0c0; }
.leaderboard-item.top-3:nth-child(3) .leaderboard-rank { color: #cd7f32; }

.leaderboard-name {
    flex: 1;
    font-weight: 600;
    font-size: 13px;
    color: var(--whist-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-score {
    font-weight: 700;
    font-size: 14px;
    color: var(--whist-accent);
    font-variant-numeric: tabular-nums;
}


/* ================================================================================================
   31. STATS / GAME LOG PANEL
================================================================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--whist-radius-sm);
}

.stat-card-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--whist-accent);
    font-variant-numeric: tabular-nums;
}

.stat-card-label {
    font-size: 11px;
    color: var(--whist-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Game Log */
.game-log {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.log-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--whist-radius-xs);
    font-size: 12px;
    color: var(--whist-text-dim);
    border-left: 3px solid var(--whist-border);
}

.log-entry.action-draw { border-left-color: var(--whist-info); }
.log-entry.action-discard { border-left-color: var(--whist-warning); }
.log-entry.action-etalare { border-left-color: var(--whist-success); }
.log-entry.action-lipire { border-left-color: var(--whist-accent); }

.log-time {
    font-size: 10px;
    color: var(--whist-text-muted);
    flex-shrink: 0;
}

.log-player {
    font-weight: 600;
    color: var(--whist-text);
}


/* ================================================================================================
   32. TUTORIAL PANEL
================================================================================================ */
.tutorial-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tutorial-step {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--whist-radius-sm);
}

.tutorial-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--whist-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.tutorial-step-content {
    flex: 1;
}

.tutorial-step-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--whist-text);
    margin-bottom: 4px;
}

.tutorial-step-text {
    font-size: 12px;
    color: var(--whist-text-dim);
    line-height: 1.5;
}


/* ================================================================================================
   33. REPORT MODAL
================================================================================================ */
.report-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.report-reason-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.report-reason {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--whist-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    color: var(--whist-text);
}

.report-reason:hover {
    background: var(--glass-bg-strong);
    border-color: rgba(var(--whist-accent-rgb), 0.2);
}

.report-reason.selected {
    border-color: var(--whist-accent);
    background: var(--whist-accent-glow);
}

.report-reason input[type="radio"] {
    accent-color: var(--whist-accent);
}

.report-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--whist-radius-sm);
    color: var(--whist-text);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    outline: none;
}

.report-textarea:focus {
    border-color: rgba(var(--whist-accent-rgb), 0.3);
}


/* ================================================================================================
   34. NOTIFICATIONS
================================================================================================ */
.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: var(--whist-danger);
    color: white;
    font-size: 9px;
    font-weight: 700;
    border-radius: var(--whist-radius-full);
    box-shadow: 0 2px 6px rgba(var(--whist-danger-rgb), 0.4);
}


/* ================================================================================================
   MULTIPLAYER PANEL CARDS (.mpc-*) — copied from Table
================================================================================================ */
.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-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; }
/* Whist-specific: badge "2P/3P/4P" accentuat cu culoarea Whist (purple) */
.mpc-chip-players {
    background: rgba(var(--whist-accent-rgb), 0.18);
    color: var(--whist-accent-light, var(--whist-accent));
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid rgba(var(--whist-accent-rgb), 0.35);
    letter-spacing: 0.3px;
}
.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.18); color: var(--color-text-primary); transform: translateY(-1px); }
.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); }

/* Card enter/leave animations for smooth lobby patching */
.mpc-card.lc-entering { animation: lobbyCardIn 0.25s ease both; }
.mpc-card.lc-leaving { opacity: 0; transform: scale(0.95); pointer-events: none; }

.mpc-other-header {
    font-size: clamp(11px, 2.2vw, 12px);
    font-weight: 700;
    color: var(--color-text-secondary);
    padding: 6px 2px;
    margin-top: 10px;
    border-top: 1px dashed rgba(var(--color-accent-rgb), 0.12);
}

/* ================================================================================================
   MULTIPLAYER LOBBY UI (.mp-*) — stats, tabs, toolbar, filters, search — copied from Table
================================================================================================ */

/* Stats Bar — compact inline */
.mp-stats-bar {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 14px);
    padding: clamp(4px, 0.8vw, 6px) clamp(10px, 2vw, 14px);
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.08), rgba(var(--color-accent-rgb), 0.03));
    border-radius: clamp(6px, 1.2vw, 8px);
    border: 1px solid rgba(var(--color-accent-rgb), 0.12);
}
.mp-stat {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: clamp(10px, 2vw, 11px);
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.mp-stat strong { color: var(--color-text-primary); }
.mp-stat-icon {
    font-size: clamp(13px, 2.5vw, 15px) !important;
    line-height: 1;
}
.mp-stat-pts { margin-left: auto; font-weight: 700; color: var(--color-accent); }
.mp-stat-pts strong { color: var(--color-accent); }

/* Tabs Bar — compact pill switcher */
.mp-tabs-bar {
    display: flex;
    background: rgba(255, 255, 255, 0.04);
    border-radius: clamp(6px, 1.2vw, 8px);
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.mp-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: clamp(5px, 1vw, 7px);
    border: none;
    border-radius: clamp(5px, 1vw, 7px);
    font-size: clamp(11px, 2.2vw, 12px);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    touch-action: manipulation;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
}
.mp-tab-icon {
    font-size: clamp(14px, 2.8vw, 16px) !important;
    line-height: 1;
}
.mp-tab-active { box-shadow: 0 1px 6px rgba(var(--color-accent-rgb), 0.15); }
#tablesTabLive.mp-tab-active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(var(--color-accent-rgb), 0.1));
    color: var(--color-info, #3b82f6);
}
#tablesTabAI.mp-tab-active {
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.15), rgba(var(--color-accent-rgb), 0.08));
    color: var(--color-accent);
}
.mp-tab-badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-error, #ef4444);
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    color: white;
    line-height: 16px;
    text-align: center;
}

/* Lobby Header */
.mp-lobby-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* Create Room Button */
.mp-create-btn {
    min-height: clamp(30px, 5.5vw, 34px);
    padding: clamp(4px, 0.8vw, 6px) 0;
    width: 100%;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark, #b8860b) 100%);
    border: none;
    border-radius: clamp(6px, 1.2vw, 8px);
    color: var(--color-bg-primary, #0a0a0a);
    font-weight: 700;
    font-size: clamp(11px, 2.2vw, 13px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.25s ease;
    white-space: nowrap;
    touch-action: manipulation;
    box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.2);
    animation: mp-btn-flash 2s ease-in-out 3;
    font-family: inherit;
}
@keyframes mp-btn-flash {
    0%, 100% { box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.2); }
    50% { box-shadow: 0 0 18px 4px rgba(var(--color-accent-rgb), 0.55), 0 2px 8px rgba(var(--color-accent-rgb), 0.3); }
}
.mp-create-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), 0.35);
}
.mp-create-btn.mp-create-offline {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
    cursor: default;
    opacity: 0.85;
    animation: none;
}
.mp-create-btn.mp-create-offline:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

/* Status Dot */
.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; }
}

/* Toolbar: filters + search toggle in one bar */
.mp-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: rgba(var(--color-primary-rgb), 0.06);
    border: 1px solid rgba(var(--color-primary-rgb), 0.1);
    border-radius: clamp(8px, 1.5vw, 10px);
    margin-top: 6px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.mp-toolbar-filters {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-accent-rgb), 0.3) transparent;
}
.mp-toolbar-filters::-webkit-scrollbar { height: 3px; }
.mp-toolbar-filters::-webkit-scrollbar-track { background: transparent; }
.mp-toolbar-filters::-webkit-scrollbar-thumb { background: rgba(var(--color-accent-rgb), 0.25); border-radius: 3px; }
.mp-toolbar-filters::-webkit-scrollbar-thumb:hover { background: rgba(var(--color-accent-rgb), 0.45); }
.mp-toolbar-sep {
    width: 1px;
    height: 14px;
    background: rgba(var(--color-primary-rgb), 0.15);
    flex-shrink: 0;
    margin: 0 1px;
}
.mp-filter-chip {
    padding: clamp(4px, 0.8vw, 5px) clamp(6px, 1.2vw, 9px);
    border: none;
    border-radius: clamp(4px, 0.8vw, 6px);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: clamp(10px, 1.8vw, 11px);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    touch-action: manipulation;
    line-height: 1.2;
    flex-shrink: 0;
}
.mp-filter-chip:hover { background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-text-primary); }
.mp-filter-chip.selected { background: rgba(var(--color-accent-rgb), 0.15); color: var(--color-accent); }
.mp-toolbar-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: clamp(5px, 1vw, 7px);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    touch-action: manipulation;
}
.mp-toolbar-search-toggle .material-symbols-rounded { font-size: 18px; }
.mp-toolbar-search-toggle:hover { background: rgba(var(--color-primary-rgb), 0.12); color: var(--color-text-primary); }
.mp-toolbar-search-toggle.active { background: rgba(var(--color-accent-rgb), 0.15); color: var(--color-accent); }

/* Sort select in mp-toolbar — aceeasi paleta ca .lobby-sort-select (unificare vizuala) */
.mp-sort-select {
    height: clamp(28px, 5.5vw, 32px);
    padding: 0 clamp(6px, 1.2vw, 8px);
    border: 1px solid rgba(var(--color-primary-rgb), 0.15);
    border-radius: clamp(5px, 1vw, 7px);
    background: rgba(var(--color-primary-rgb), 0.06);
    color: var(--color-text-secondary);
    font-size: clamp(10px, 1.8vw, 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;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 22px;
    transition: border-color 0.2s, background-color 0.2s;
}
.mp-sort-select:hover { background-color: rgba(var(--color-primary-rgb), 0.1); color: var(--color-text-primary); }
.mp-sort-select:focus { border-color: rgba(var(--color-accent-rgb), 0.35); }
.mp-sort-select option {
    background: var(--color-surface, #1a1a2e);
    color: var(--color-text-primary);
}
[data-theme="light"] .mp-sort-select {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(30, 27, 75, 0.6);
}
[data-theme="light"] .mp-sort-select option {
    background: #ffffff;
    color: rgba(30, 27, 75, 0.9);
}

/* Search row (hidden by default) */
.mp-search-row { margin-top: 4px; }
.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) 32px clamp(7px, 1.5vw, 9px) 34px;
    background: rgba(var(--color-primary-rgb), 0.06);
    border: 1px solid rgba(var(--color-primary-rgb), 0.12);
    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.1);
}
.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); }

/* Room List Container */
.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);
}
.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; }
/* Buton "Resetează filtre" în empty state */
.mp-empty-reset {
    margin-top: 14px;
    padding: 8px 18px;
    background: linear-gradient(135deg, var(--whist-accent) 0%, var(--whist-accent-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: clamp(11px, 2.2vw, 13px);
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(var(--whist-accent-rgb), 0.35);
    touch-action: manipulation;
}
.mp-empty-reset:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--whist-accent-rgb), 0.5); }
.mp-empty-reset:active { transform: translateY(0); }

/* Pagination */
.mp-room-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: clamp(4px, 1vw, 6px) 0;
    flex-wrap: wrap;
}
.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); padding: 0 4px; font-weight: 700; }
.mpp-info { margin-left: 6px; font-size: clamp(10px, 2vw, 11px); color: var(--color-text-secondary); font-weight: 600; }

/* Light theme overrides for lobby UI */
[data-theme="light"] .mp-stats-bar {
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.06), rgba(var(--color-accent-rgb), 0.02));
    border-color: rgba(var(--color-accent-rgb), 0.1);
}
[data-theme="light"] .mp-stat { color: #666; }
[data-theme="light"] .mp-stat strong { color: #333; }
[data-theme="light"] .mp-tabs-bar { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .mp-tab { color: #999; }
[data-theme="light"] #tablesTabLive.mp-tab-active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(var(--color-accent-rgb), 0.06));
    color: #2563eb;
}
[data-theme="light"] #tablesTabAI.mp-tab-active {
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.1), rgba(var(--color-accent-rgb), 0.05));
    color: var(--color-accent);
}
[data-theme="light"] .mpc-card { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .mpc-card.clickable:hover { background: rgba(0, 0, 0, 0.06); border-color: rgba(var(--color-accent-rgb), 0.15); }
[data-theme="light"] .mpc-name { color: #333; }
[data-theme="light"] .mpc-chip { color: #888; }
[data-theme="light"] .mp-toolbar { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .mp-toolbar-sep { background: rgba(0, 0, 0, 0.1); }
[data-theme="light"] .mp-filter-chip { color: #666; }
[data-theme="light"] .mp-filter-chip:hover { background: rgba(0, 0, 0, 0.06); color: #333; }
[data-theme="light"] .mp-filter-chip.selected { background: rgba(var(--color-accent-rgb), 0.12); color: var(--color-accent); }
[data-theme="light"] .mp-toolbar-search-toggle { color: #666; }
[data-theme="light"] .mp-toolbar-search-toggle:hover { background: rgba(0, 0, 0, 0.06); color: #333; }
[data-theme="light"] .mp-toolbar-search-toggle.active { background: rgba(var(--color-accent-rgb), 0.12); color: var(--color-accent); }
[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"] .mpc-other-header { color: #666; border-top-color: rgba(0, 0, 0, 0.1); }

/* ================================================================================================
   RANKING TABLE & REWARDS — copied from Table
================================================================================================ */
.ranking-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 13px; }
.ranking-table thead th { padding: 6px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary, #94a3b8); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ranking-table tbody td { padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.ranking-table tbody tr:last-child td { border-bottom: none; }
.ranking-table .rank-medal { text-align: center; font-size: 16px; }
.ranking-table .rank-score { text-align: right; font-weight: 700; color: var(--color-accent, #d4a040); }
.ranking-table .rank-reward { text-align: right; font-weight: 700; }
.ranking-table .rank-balance { text-align: right; font-size: 12px; }
.ranking-table .rank-1st { background: rgba(var(--color-accent-rgb), 0.08); }
.ranking-table .rank-human { font-weight: 600; }
.ranking-table .rank-human td:nth-child(2) { color: var(--color-accent, #d4a040); }

.reward-positive { color: #22c55e !important; }
.reward-negative { color: #ef4444 !important; }
.reward-neutral { color: var(--color-text-secondary, #94a3b8) !important; }

.result-stat-highlight {
    background: rgba(var(--color-accent-rgb), 0.08) !important;
    border-left: 3px solid var(--color-accent, #d4a040);
}

/* ================================================================================================
   ROOM DETAIL MODAL (.rdm-*) — copied from Table
================================================================================================ */
.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-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-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 .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); }

/* ================================================================================================
   TURN TIMER BADGE — copied from Table
================================================================================================ */
.turn-timer-badge {
    position: absolute; top: 8px; right: 8px; z-index: 20;
    display: flex; align-items: center; gap: 3px;
    padding: 4px 8px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px;
    color: #e2e8f0; font-size: 12px; font-weight: 700;
    transition: all 0.3s ease; pointer-events: none;
}
.turn-timer-badge .material-symbols-rounded { font-size: 14px; color: #94a3b8; }
.turn-timer-badge.turn-timer-warning {
    background: rgba(245, 158, 11, 0.25); border-color: rgba(245, 158, 11, 0.6);
    color: #f59e0b; animation: pulse-timer 0.8s ease-in-out infinite;
}
.turn-timer-badge.turn-timer-warning .material-symbols-rounded { color: #f59e0b; }
@keyframes pulse-timer {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.8; }
}

/* ================================================================================================
   MP LEAVE TABLE BUTTON — copied from Table
================================================================================================ */
.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; }

/* ================================================================================================
   ROOM WAITING (.mw-*) — copied from Table
================================================================================================ */
.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, 212, 160, 64), 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); } }

.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, 212, 160, 64), 0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(var(--color-accent-rgb, 212, 160, 64), 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; }
.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.85; } }

.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, 212, 160, 64), 0.15); color: var(--color-accent, #d4a040); }
.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-title-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.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(var(--color-accent-rgb), 0.2), rgba(var(--color-accent-rgb), 0.15)); color: var(--color-accent, #d4a040); border: 1px solid rgba(var(--color-accent-rgb), 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 2.4s ease-in-out infinite; }
@keyframes mwPulse { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

.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, 212, 160, 64), 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, 212, 160, 64), 0.06); color: var(--color-text-primary, #fff); }
.mw-tab.active { background: linear-gradient(135deg, rgba(var(--color-accent-rgb, 212, 160, 64), 0.12) 0%, rgba(var(--color-accent-rgb, 212, 160, 64), 0.06) 100%); color: var(--color-accent, #d4a040); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }
.mw-tab.active .material-symbols-rounded { color: var(--color-accent, #d4a040); }
.mw-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 20%; right: 20%; height: 2px; background: var(--color-accent, #d4a040); 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); } }

.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, 212, 160, 64), 0.2) transparent; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease; will-change: transform, opacity; }
.mw-tab-panel.active { display: flex; flex-direction: column; overflow-y: auto; overflow-x: 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, 212, 160, 64), 0.2); border-radius: 4px; }

.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; 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); } }
.mw-player-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgba(var(--color-accent-rgb, 212, 160, 64), 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, 212, 160, 64), 0.08) 0%, rgba(var(--color-accent-rgb, 212, 160, 64), 0.03) 100%); border-color: rgba(var(--color-accent-rgb, 212, 160, 64), 0.15); }
.mw-player-card.mw-card-me::before { background: var(--color-accent, #d4a040); }
.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; }

.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 2.4s ease-in-out infinite; }
.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; }
.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; }
.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); }

.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, 212, 160, 64), 0.08); color: var(--color-accent, #d4a040); border-color: rgba(var(--color-accent-rgb, 212, 160, 64), 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; }
.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; }

.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)); }

.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 3s 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); } }

.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-countdown-card.warning { background: rgba(255, 152, 0, 0.15); border-color: rgba(255, 152, 0, 0.35); color: #ff9800; }
.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; }
@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); } }

.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); }

.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; } }

.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); } }

/* .mw-* Responsive */
/* Mobile portrait standard (480px) */
@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; }
}
/* Mobile portrait small (iPhone SE, 375px) */
@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; }
}
/* Tablet portrait (481-768px) */
@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; }
}
/* Landscape standard (max-height 500px) */
@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; overflow-y: auto; max-height: calc(100vh - 80px); }
    .mw-player-card { padding: 6px 8px; }
    .mw-card-avatar { width: 28px; height: 28px; }
    .mw-card-name { font-size: 0.75rem; }
    .mw-ready-btn { padding: 6px 14px; font-size: 0.75rem; min-height: 32px; }
    .mp-btn-leave-table { padding: 5px 10px; font-size: 0.72rem; }
    .mw-player-cards { overflow-y: auto; max-height: calc(100vh - 120px); }
}
/* Landscape very short (max-height 380px) */
@media (max-height: 380px) and (orientation: landscape) {
    .mp-btn-leave-table { padding: 4px 8px; font-size: 0.68rem; }
}
/* Desktop (min-width 1024px) — 2-column player grid */
@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 devices (tap target min sizes) */
@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; }
    .mp-btn-leave-table { min-height: 38px; }
}
/* Touch devices in landscape (compact tap targets) */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
    .mw-tab { min-height: 28px; }
    .mw-ready-btn { min-height: 32px; }
    .mw-leave-btn { min-height: 32px; }
    .mp-btn-leave-table { min-height: 28px; }
}
@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 { transition-duration: 0.01ms !important; }
}

@keyframes banOverlayFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================================================
   MP TABLE OVERLAY (masa expirat / mesaje finale in waiting room)
   Folosit in showRoomExpiredOverlay() — apare cand timerul mesei s-a terminat fara adversar.
================================================================================================ */
.mp-table-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 260px;
    padding: 40px 24px;
    text-align: center;
    gap: 14px;
    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, 212, 160, 64), 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);
    animation: mwFadeIn 0.3s ease-out;
}
.mp-overlay-icon {
    font-size: 64px;
    line-height: 1;
    filter: drop-shadow(0 4px 16px rgba(255, 152, 0, 0.4));
    animation: mpOverlayIconBounce 1.8s ease-in-out infinite;
}
@keyframes mpOverlayIconBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.08) rotate(-6deg); }
    75% { transform: scale(1.08) rotate(6deg); }
}
.mp-overlay-title {
    font-family: var(--font-display, inherit);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--color-accent, #d4a040);
    text-shadow: 0 2px 8px rgba(var(--color-accent-rgb, 212, 160, 64), 0.25);
    margin: 0;
}
.mp-overlay-subtitle {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-secondary, #94a3b8);
    line-height: 1.5;
    max-width: 440px;
    margin: 0;
}
.mp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 28px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-accent, #d4a040), #b8862d);
    color: #1a1208;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(var(--color-accent-rgb, 212, 160, 64), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
}
.mp-btn-primary .material-symbols-rounded {
    font-size: 22px;
}
.mp-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--color-accent-rgb, 212, 160, 64), 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    filter: brightness(1.08);
}
.mp-btn-primary:active {
    transform: translateY(0);
    filter: brightness(0.95);
}
/* Mobile compact */
@media (max-width: 480px) {
    .mp-table-overlay { padding: 28px 16px; min-height: 220px; }
    .mp-overlay-icon { font-size: 52px; }
    .mp-overlay-title { font-size: 1.3rem; }
    .mp-overlay-subtitle { font-size: 0.85rem; }
    .mp-btn-primary { padding: 10px 20px; font-size: 0.85rem; }
}

/* ================================================================================================
   ANIMATIONS & KEYFRAMES (shared — copied from Table reference)
================================================================================================ */

@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 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);
    }
}

@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; }
}

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

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

@keyframes modalShimmer {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes topGlowScan {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@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); }
}

@keyframes iconGlow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

@keyframes resultPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 0.9; }
}

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

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

@keyframes scoreCount {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

@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); }
}

@keyframes balancePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}

@keyframes pulse-countdown {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@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; }
}

@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); }
}

@keyframes panelLoadingSlide {
    0% { width: 0; }
    15% { width: 30%; }
    50% { width: 70%; }
    85% { width: 92%; }
    100% { width: 100%; }
}

@keyframes seatBubbleIn {
    0%   { opacity: 0; scale: 0.3; }
    60%  { opacity: 1; scale: 1.09; }
    100% { opacity: 1; scale: 1; }
}

@keyframes seatBubbleOut {
    0%   { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 0.5; }
}

@keyframes chatBadgePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes pulse-gold {
    0%, 100% {
        box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.3),
                    0 0 16px rgba(var(--color-accent-rgb), 0.15);
    }
    50% {
        box-shadow: 0 0 16px rgba(var(--color-accent-rgb), 0.5),
                    0 0 32px rgba(var(--color-accent-rgb), 0.25);
    }
}

@keyframes search-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(90deg); }
}

/* ================================================================================================
   CHAT CONTAINER SYSTEM (shared — copied from Table reference)
================================================================================================ */

/* 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;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
}

.chat-hidden { display: none !important; }

.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 */
.chat-login-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: min(200px, 40vh);
    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 Empty State */
.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: min(200px, 40vh);
    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 */
.chat-header {
    position: relative;
    padding: 20px;
    background: linear-gradient(135deg,
        rgba(74, 44, 26, 0.4) 0%,
        rgba(160, 120, 40, 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);
}

/* 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 */
.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-search-toggle-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

/* 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;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-accent-rgb), 0.2) transparent;
}

.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.chat-messages::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.25) 0%, rgba(var(--color-accent-rgb), 0.15) 100%);
    border-radius: 10px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.5) 0%, rgba(var(--color-accent-rgb), 0.35) 100%);
}

/* Chat user lists */
#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;
}

/* ================================================================================================
   SHARED RESPONSIVE — Tablet & Mobile Bottom Sheet (copied from Table)
================================================================================================ */

/* Tablet Landscape (1366px) */
@media (max-width: 1366px) {
    :root {
        --top-bar-height: 65px;
        --context-panel-width: 280px;
    }
    .stats-layer { padding: 0 var(--space-md); }
    .stat-item { padding: var(--space-sm) var(--space-md); }
}

/* Tablet Portrait / Landscape (1024px) */
@media (max-width: 1024px) and (orientation: landscape) {
    :root {
        --nav-rail-width: 56px;
        --top-bar-height: 32px;
    }
    .context-panel {
        position: absolute;
        right: 0; top: 0; height: 100%;
        display: flex !important;
        flex-direction: column !important;
    }
    .context-panel.hidden { transform: translateX(100%); }
}

/* Mobile Portrait — context panel bottom sheet (doar cand panel activ) */
@media (max-width: 768px) and (orientation: portrait) {
    /* main-content ramane overflow:hidden (nu overflow:visible) — era cauza overflow iese peste tot */
    body.game-active .app-container,
    body.game-active .game-canvas,
    body.game-active .context-panel { will-change: transform, opacity; }

    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;
    }
    body.game-active:has(.context-panel.active) .game-canvas {
        height: 50vh !important; min-height: 50vh !important; max-height: 50vh !important;
        overflow: hidden !important; padding-bottom: 0 !important; flex: none !important;
    }
}

/* Mobile Bottom Sheet for Modals */
@media (max-width: 768px) {
    .modal-overlay {
        background: rgba(0, 0, 0, 0.6);
        align-items: flex-end;
        justify-content: center;
    }
    .modal-container {
        width: 100%; max-width: 100%; max-height: 70vh;
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
        margin-bottom: 0; position: relative;
    }
    .modal-overlay.active .modal-container { transform: translateY(0); }
    .modal-header { padding: 12px 14px; padding-right: 40px; gap: 10px; }
    .modal-header h2 { font-size: 15px; }
    .modal-icon { width: 34px; height: 34px; font-size: 20px; }
    .modal-body { padding: 12px 14px; }
    .modal-footer { padding: 10px 14px; }
}

/* Mobile context panel full-screen */
@media (max-width: 767px) {
    .context-panel {
        position: fixed;
        top: var(--top-bar-height, 60px);
        right: 0; bottom: 0;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        max-height: calc(100vh - var(--top-bar-height, 60px) - var(--nav-height, 56px));
        z-index: 1000;
    }
    .modal-container {
        position: fixed; bottom: 0; left: 0; right: 0;
        width: 100%; max-width: 100%; max-height: 85vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%); margin: 0;
    }
    .modal-overlay.active .modal-container { transform: translateY(0); }
}

/* Safe area insets (iOS) */
@supports (padding: env(safe-area-inset-bottom)) {
    .nav-rail { padding-bottom: env(safe-area-inset-bottom); height: auto; }
    .chat-input-area { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    .modal-container { padding-bottom: env(safe-area-inset-bottom); }
}

/* Touch device min targets */
@media (hover: none) and (pointer: coarse) {
    .panel-back, .panel-close { min-width: 32px; min-height: 32px; }
    .status-btn { min-width: 36px; min-height: 36px; }
}

/* Keep nav-rail visible during game on mobile */

/* ================================================================================================
   PROFESSIONAL TILE ANIMATIONS & VISUAL POLISH
================================================================================================ */

/* ── Flying tile (reusable for draw/discard/bot actions) ── */
.flying-tile {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    will-change: transform, opacity;
    transition: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.25);
    filter: brightness(1.1);
}

.flying-tile.animate {
    transition: transform var(--fly-duration, 400ms) cubic-bezier(0.23, 1, 0.32, 1),
                opacity var(--fly-duration, 400ms) ease;
}

.flying-tile.fly-shrink {
    transition: transform var(--fly-duration, 350ms) cubic-bezier(0.23, 1, 0.32, 1),
                opacity var(--fly-duration, 350ms) ease,
                width var(--fly-duration, 350ms) ease,
                height var(--fly-duration, 350ms) ease;
}

/* ── Draw pile glow when awaiting player draw ── */
@keyframes pileGlow {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 215, 0, 0.15);
    }
    50% {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.25);
    }
}

.draw-pile.awaiting-draw {
    animation: pileGlow 1.5s ease-in-out infinite;
    cursor: pointer;
}

.draw-pile.awaiting-draw .pile-tile:last-child {
    border-color: rgba(255, 215, 0, 0.5);
}

/* ── Enhanced tile landing (etalare) ── */
@keyframes tileLandPro {
    0% { transform: scale(0.3) translateY(-50px); opacity: 0; }
    55% { transform: scale(1.1) translateY(2px); opacity: 1; }
    75% { transform: scale(0.96); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.tile-animate-land {
    animation: tileLandPro 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Staggered meld appearance ── */
.meld-group-animate-pro .tile {
    opacity: 0;
    animation: tileLandPro 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.meld-group-animate-pro .tile:nth-child(1) { animation-delay: 0s; }
.meld-group-animate-pro .tile:nth-child(2) { animation-delay: 0.07s; }
.meld-group-animate-pro .tile:nth-child(3) { animation-delay: 0.14s; }
.meld-group-animate-pro .tile:nth-child(4) { animation-delay: 0.21s; }
.meld-group-animate-pro .tile:nth-child(5) { animation-delay: 0.28s; }
.meld-group-animate-pro .tile:nth-child(6) { animation-delay: 0.35s; }
.meld-group-animate-pro .tile:nth-child(7) { animation-delay: 0.42s; }
.meld-group-animate-pro .tile:nth-child(8) { animation-delay: 0.49s; }

/* Nota: .tile, .tile:hover, .tile.selected — sunt definite in sectiunea PREMIUM TILE (linia ~4861) */

/* ── 3D pile stack effect ── */
.pile-stack {
    perspective: 300px;
}
/* Nota: .pile-tile + :nth-child + :hover sunt definite mai sus (linia ~4498) */

/* ── Bot action indicator bubble ── */
@keyframes botActionPop {
    0% { transform: scale(0) translateY(10px); opacity: 0; }
    50% { transform: scale(1.1) translateY(-2px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes botActionFade {
    0% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-8px); }
}

/* 2026-04-21 v11: ACTION INDICATOR PREMIUM — glassy gold casino badge, pill cu icon.
   Apare in zona de etalare a jucatorului care face actiunea (etalare/lipire/rupere/etc).
   Fiecare action-type are accent color distinct + emoji icon distinctiv. */
/* 2026-04-21 v12: Aliniat cu label-ul jucatorului — SAME TOP ROW, dreapta lui.
   Label-ul (data-label ::before) e la top:3px left:6px → badge la top:3px right:6px.
   Ambele vizibile in randul superior al zonei = cine (stanga) + ce face (dreapta). */
.bot-action-indicator {
    position: absolute;
    top: 3px;
    right: 6px;
    left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background:
        linear-gradient(135deg,
            rgba(255, 215, 0, 0.18) 0%,
            rgba(184, 134, 11, 0.22) 50%,
            rgba(255, 215, 0, 0.18) 100%),
        linear-gradient(135deg,
            rgba(12, 22, 12, 0.88) 0%,
            rgba(8, 16, 8, 0.92) 100%);
    color: #fff4c2;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 2px 8px 2px 4px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    height: 16px;             /* aliniat cu line-height:12 al labelului (+padding 2*2) */
    box-sizing: border-box;
    max-width: 55%;           /* nu acopera labelul de stanga */
    animation: zoneActionPopIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    backdrop-filter: blur(6px) saturate(1.15);
    -webkit-backdrop-filter: blur(6px) saturate(1.15);
    border: 1px solid rgba(255, 215, 0, 0.42);
    border-top-color: rgba(255, 235, 170, 0.6);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(255, 215, 0, 0.18),
        inset 0 1px 0 rgba(255, 245, 200, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Icon circulat aurit — compact pentru corner badge */
.bot-action-indicator .zone-act-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff3a8 0%, #ffd700 45%, #b8860b 100%);
    color: #3a2500;
    font-size: 8px;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 0 6px rgba(255, 215, 0, 0.45);
    text-shadow: none;
}

/* Text actiune */
.bot-action-indicator .zone-act-text {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}
/* Nume jucator in badge — ASCUNS pentru corner badge (label-ul zonei arata deja numele) */
.bot-action-indicator .zone-act-name {
    display: none;
}
.bot-action-indicator .zone-act-action {
    color: #fff4c2;
    font-weight: 800;
    font-size: 9.5px;
    letter-spacing: 0.4px;
    line-height: 1;
}

/* Shimmer gloss sweep deasupra badge-ului */
.bot-action-indicator::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 70%);
    pointer-events: none;
    animation: zoneActionShimmer 1.4s ease-out 0.2s both;
}

/* Variante dupa tip de actiune — accent color + glow */
.bot-action-indicator.action-etalare {
    border-color: rgba(120, 255, 140, 0.55);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.55),
        0 0 20px rgba(80, 200, 100, 0.35),
        inset 0 1px 0 rgba(200, 255, 210, 0.28);
}
.bot-action-indicator.action-etalare .zone-act-icon {
    background: linear-gradient(135deg, #d5ffd8 0%, #4ade80 45%, #166534 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 8px rgba(74, 222, 128, 0.55);
}

.bot-action-indicator.action-lipire {
    border-color: rgba(100, 200, 255, 0.55);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.55),
        0 0 20px rgba(60, 160, 255, 0.35),
        inset 0 1px 0 rgba(200, 235, 255, 0.28);
}
.bot-action-indicator.action-lipire .zone-act-icon {
    background: linear-gradient(135deg, #d0e8ff 0%, #60a5fa 45%, #1e3a8a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 8px rgba(96, 165, 250, 0.55);
}

.bot-action-indicator.action-rupere {
    border-color: rgba(255, 140, 90, 0.55);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.55),
        0 0 20px rgba(255, 100, 60, 0.35),
        inset 0 1px 0 rgba(255, 220, 200, 0.28);
}
.bot-action-indicator.action-rupere .zone-act-icon {
    background: linear-gradient(135deg, #ffe0cc 0%, #fb923c 45%, #7c2d12 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 8px rgba(251, 146, 60, 0.55);
}

.bot-action-indicator.action-tragere {
    border-color: rgba(200, 180, 255, 0.55);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.55),
        0 0 20px rgba(160, 140, 255, 0.35),
        inset 0 1px 0 rgba(230, 220, 255, 0.28);
}
.bot-action-indicator.action-tragere .zone-act-icon {
    background: linear-gradient(135deg, #e5d5ff 0%, #a78bfa 45%, #4c1d95 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 8px rgba(167, 139, 250, 0.55);
}

.bot-action-indicator.action-aruncare {
    border-color: rgba(255, 180, 180, 0.5);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.55),
        0 0 20px rgba(220, 100, 100, 0.3),
        inset 0 1px 0 rgba(255, 210, 210, 0.28);
}
.bot-action-indicator.action-aruncare .zone-act-icon {
    background: linear-gradient(135deg, #ffd5d5 0%, #f87171 45%, #7f1d1d 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 8px rgba(248, 113, 113, 0.55);
}

.bot-action-indicator.action-atu {
    border-color: rgba(255, 215, 0, 0.75);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(255, 215, 0, 0.55),
        inset 0 1px 0 rgba(255, 245, 200, 0.4);
    animation: zoneActionPopIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               zoneActionAtuPulse 1.6s ease-in-out 0.5s 2;
}

/* Animatii — fara translateX (pozitionare prin right:6px, nu centrare) */
@keyframes zoneActionPopIn {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.7);
    }
    60% {
        opacity: 1;
        transform: translateY(1px) scale(1.08);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes zoneActionShimmer {
    0% { transform: translateX(-120%); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}
@keyframes zoneActionAtuPulse {
    0%, 100% { box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(255, 215, 0, 0.45),
        inset 0 1px 0 rgba(255, 245, 200, 0.4); }
    50% { box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.65),
        0 0 32px rgba(255, 215, 0, 0.85),
        inset 0 1px 0 rgba(255, 245, 200, 0.55); }
}

.bot-action-indicator.fade-out {
    animation: zoneActionFadeOut 0.5s ease-in forwards;
}
@keyframes zoneActionFadeOut {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-10px) scale(0.92); }
}

/* Mobile — badge corner top-right, aliniat cu labelul numelui pe zonele mici */
@media (max-width: 767px) {
    .bot-action-indicator {
        top: 3px;
        right: 4px;
        font-size: 8.5px;
        padding: 1px 6px 1px 3px;
        gap: 3px;
        border-radius: 7px;
        height: 14px;
        max-width: 50%;
    }
    .bot-action-indicator .zone-act-icon {
        width: 10px;
        height: 10px;
        font-size: 7px;
    }
    .bot-action-indicator .zone-act-action {
        font-size: 8.5px;
        letter-spacing: 0.3px;
    }
}

/* ── Smooth transitions on interactive elements ── */
.draw-pile,
.discard-pile,
.pile-area,
.opponent-area,
.meld-group,
.arrangement-zone {
    transition: all 0.25s ease;
}

.opponent-area.active-turn .opponent-tile-back {
    transition: transform 0.2s ease;
}

/* ── Discard pile last tile highlight ── */
.discard-top .tile {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}

/* 2026-04-24: Piesele din ARUNCATE (zona discard) identic cu cele din etalare —
   dimensiune redusa 26x36, aceleasi border-radius + font-size + GROSIME 3D. */
.discard-top .tile,
.discard-pile .tile {
    width: 26px !important;
    height: 36px !important;
    min-width: 26px !important;
    min-height: 36px !important;
    font-size: 13px !important;
    border-radius: 3px;
}
.discard-top .tile .joker-svg,
.discard-pile .tile .joker-svg {
    width: 18px !important;
    height: auto !important;
}
/* Grosime 3D explicita pentru piesele din aruncate (non-joker) — scalata pe 26x36 */
.discard-top .tile:not(.color-joker),
.discard-pile .tile:not(.color-joker) {
    box-shadow:
        /* Top highlight (muchia de sus primeste lumina) */
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 2px 1px rgba(255, 250, 230, 0.55),
        /* Bottom edge adanc — iluzia grosimii */
        inset 0 -2px 0 rgba(140, 105, 60, 0.38),
        inset 0 -3px 3px rgba(120, 85, 45, 0.22),
        /* Side bevels */
        inset 1px 0 0 rgba(255, 252, 240, 0.5),
        inset -1px 0 0 rgba(130, 95, 55, 0.25),
        /* Drop shadows layered pentru profunzime */
        0 1px 1px rgba(0, 0, 0, 0.18),
        0 2px 3px rgba(0, 0, 0, 0.25),
        0 4px 7px rgba(0, 0, 0, 0.28),
        0 8px 14px rgba(0, 0, 0, 0.2) !important;
}

/* ================================================================================================
   MOBILE PORTRAIT REFINEMENTS — 2026-04-19
   --------------------------------------------------------------------------------
   Scope: toate regulile de aici sunt scoped la mobile portrait (max-width <= 767px)
   sau la touch devices. Desktop + landscape NU sunt atinse.

   Strategie ADITIVĂ: nu modifică reguli existente, doar adaugă peste ele pentru
   viewport-urile mobile. Revert = șterge această secțiune.

   Cuprinde:
     1. Touch targets min 44x44px (WCAG 2.1 AA)
     2. Action bar wrap + alignment pe portrait mic
     3. Status bar: font/avatar/spacing pe <=480px și <=375px
     4. Icon sizing: clamp pentru tot (material-symbols, fa)
     5. Card/tile aspect-ratio lock (prevent deformare pe breakpoint-uri)
     6. Opponent seats readability (2/3/4 jucători)
     7. Player hand: tile scroll-snap + overflow control
     8. Discard history strip + modal pe portrait
     9. Meld zones (etalare) pe portrait
    10. Modals: viewport fit + safe area iOS
    11. Avatar no-overlap (<375px)
    12. Touch device hover cleanup (evită "stuck hover")
    13. Landscape mic (iPhone SE-ish, max-height <= 500px)
    14. Safe area bottom pe game container (home-bar iOS)
================================================================================================ */

/* ──────── 1. TOUCH TARGETS — min 44x44px pe toate butoanele interactive ──────── */
@media (hover: none) and (pointer: coarse) {
    .action-btn-game,
    .status-btn,
    .status-actions button,
    .discard-history-modal-close,
    .mw-ready-btn,
    .btn-primary-action {
        min-height: 44px;
        min-width: 44px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .action-btn-game {
        padding: clamp(8px, 2vw, 12px) clamp(10px, 3vw, 14px);
    }
    /* Elimină "stuck hover" după tap */
    .action-btn-game:hover:not(:disabled),
    .action-btn-game.btn-primary-action:hover:not(:disabled),
    .status-btn:hover,
    .discard-history-tile:hover {
        transform: none;
    }
}

/* ──────── 2. ACTION BAR — wrap elegant pe portrait mic ──────── */
@media (max-width: 480px) and (orientation: portrait) {
    .action-btn-game {
        flex: 0 0 auto;
        font-size: clamp(11px, 3vw, 13px);
    }
    .action-btn-game .material-symbols-rounded {
        font-size: clamp(18px, 5vw, 22px);
    }
}

/* ──────── 3. STATUS BAR — readability pe portrait ──────── */
@media (max-width: 480px) and (orientation: portrait) {
    .status-bar {
        gap: clamp(3px, 1vw, 6px);
        padding: clamp(4px, 1.5vw, 8px);
        font-size: clamp(10px, 2.5vw, 12px);
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .status-avatar {
        width: clamp(22px, 5.5vw, 30px) !important;
        height: clamp(22px, 5.5vw, 30px) !important;
        min-width: 22px;
        flex-shrink: 0;
    }
    .status-item {
        flex-shrink: 0;
        white-space: nowrap;
    }
    .status-item .material-symbols-rounded {
        font-size: clamp(14px, 4vw, 18px);
    }
    .status-bar .score-group .score-value {
        font-size: clamp(11px, 3vw, 14px);
    }
    .score-label {
        font-size: clamp(9px, 2.3vw, 11px);
    }
    .status-item-timer #gameTimer,
    .status-item-timer #gameTimerShort {
        font-size: clamp(11px, 3vw, 13px);
    }
}

@media (max-width: 375px) and (orientation: portrait) {
    .status-bar {
        gap: 3px;
        padding: 3px;
    }
    .status-avatar {
        width: 22px !important;
        height: 22px !important;
    }
}

/* ──────── 4. ICON SIZING — clamp pe toate (nu prea mici, nu prea mari) ──────── */
@media (max-width: 767px) and (orientation: portrait) {
    .material-symbols-rounded {
        font-size: clamp(14px, 4vw, 22px);
    }
    button .material-symbols-rounded,
    .btn .material-symbols-rounded,
    .action-btn-game .material-symbols-rounded {
        font-size: clamp(16px, 4.5vw, 22px);
    }
    .status-btn .material-symbols-rounded {
        font-size: clamp(16px, 4.2vw, 20px);
    }
    .discard-history-modal-close .material-symbols-rounded {
        font-size: clamp(16px, 4vw, 20px);
    }
}

/* ──────── 5. CARD/TILE — aspect ratio lock (prevent deformare) ──────── */
@media (max-width: 767px) and (orientation: portrait) {
    .tile,
    .discard-history-tile,
    .opponent-tile-back {
        aspect-ratio: 11 / 15;
        object-fit: contain;
        flex-shrink: 0;
    }
    .tile img,
    .discard-history-tile img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        pointer-events: none;
    }
}

/* ──────── 6. OPPONENT SEATS — readability pe 2/3/4 jucători portrait ──────── */
@media (max-width: 480px) and (orientation: portrait) {
    /* 2026-04-21: portrait = equal-share via .seat-north > .opponent-area overrides,
       aici lasam DOAR padding-ul; width/min/max gestionate de flex: 1 1 0 */
    .opponent-area {
        padding: clamp(4px, 1.2vw, 8px);
    }
    .opponent-name {
        font-size: clamp(11px, 3vw, 13px);
        font-weight: 600;
        max-width: 100%;
    }
    .opponent-tiles-count,
    .opponent-area .tile-count-badge {
        font-size: clamp(10px, 2.8vw, 12px);
    }
    .opponent-points,
    .player-points {
        font-size: clamp(10px, 2.6vw, 12px);
    }
    .opponent-avatar,
    .opponent-info .opponent-avatar,
    .opponent-area .opponent-avatar {
        width: clamp(28px, 7vw, 40px) !important;
        height: clamp(28px, 7vw, 40px) !important;
        min-width: 28px;
        flex-shrink: 0;
    }
    .opponent-hand {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
}

/* ──────── 7. PLAYER HAND — scroll-snap + touch friendly ──────── */
@media (max-width: 767px) and (orientation: portrait) {
    .player-hand {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding: clamp(4px, 1.5vw, 8px);
        gap: clamp(3px, 1vw, 6px);
    }
    .player-hand .tile {
        scroll-snap-align: center;
        flex-shrink: 0;
    }
    .hand-scroll-wrapper {
        max-width: 100vw;
        overflow: hidden;
    }
    .hand-scroll-arrow {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ──────── 8. DISCARD STRIP — scroll-snap + touch ──────── */
@media (max-width: 767px) and (orientation: portrait) {
    .discard-history-strip {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        padding: clamp(3px, 1vw, 6px);
        gap: clamp(2px, 0.8vw, 4px);
    }
    .discard-history-strip .discard-history-tile {
        scroll-snap-align: end;
        flex-shrink: 0;
    }
}

/* ──────── 9. MELD ZONES (etalare) — portrait layout ──────── */
@media (max-width: 480px) and (orientation: portrait) {
    .etalare-zone {
        min-height: clamp(50px, 13vh, 90px);
        /* 2026-04-21: padding top usor marit pt. label (10px min), rest compact */
        padding: 10px clamp(3px, 1vw, 6px) clamp(3px, 1vw, 6px);
        /* Scroll e pe .etalare-scroll (interior); zone ramane hidden */
        overflow: hidden !important;
    }
    .etalare-scroll { gap: 4px; padding: 1px; }
    .etalare-zone .meld-owner-tag,
    .etalare-zone .meld-type-label {
        font-size: clamp(9px, 2.4vw, 11px);
    }
    .table-melds-area {
        max-height: clamp(100px, 25vh, 180px);
    }
    .table-melds-scroll {
        /* 2026-04-20: masa fixa → no scroll pe portrait mobile */
        overflow: hidden;
    }
}

/* ──────── 10. MODALS — viewport fit + safe area iOS ──────── */
@media (max-width: 767px) and (orientation: portrait) {
    .discard-history-modal-card {
        max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);
        max-width: calc(100vw - 16px);
        margin: auto;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .discard-history-modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        min-height: 0;
    }
    .discard-history-modal-close {
        min-width: 44px;
        min-height: 44px;
    }
    .discard-history-modal-header {
        flex-shrink: 0;
        padding: clamp(8px, 2.5vw, 14px);
    }
    .discard-history-modal-header h3 {
        font-size: clamp(14px, 4vw, 18px);
    }
}

/* ──────── 11. AVATAR NO-OVERLAP (<=375px) ──────── */
@media (max-width: 375px) {
    img.status-avatar,
    img.opponent-avatar,
    .status-avatar,
    .opponent-avatar {
        flex-shrink: 0;
        min-width: 22px;
    }
    .score-group,
    .status-item,
    .opponent-info {
        align-items: center;
        min-width: 0;
    }
    .opponent-name,
    .score-label,
    .status-item span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
}

/* ──────── 12. TOUCH DEVICE — curăță hover effects ──────── */
@media (hover: none) and (pointer: coarse) {
    .tile:hover,
    .discard-history-tile:hover,
    .discard-history-tile.is-breakable:hover,
    .opponent-area:hover,
    .status-btn:hover,
    .action-btn-game:hover:not(:disabled) {
        transform: none;
        filter: none;
    }
    /* Păstrează active state pentru feedback tactil */
    .action-btn-game:active:not(:disabled) {
        transform: scale(0.97);
        transition: transform 0.08s;
    }
    .tile:active {
        transform: scale(1.05);
    }
}

/* ──────── 13. LANDSCAPE MIC (≤500px height, ORICE lățime — cover 915×412 gap) ──────── */
/* FIX CRITICAL: viewport 915×412 cade între regulile mobile landscape (max-width:767px)
   și desktop. Player hand (seat-south + tava de piese) era cut-off. Aici aplicăm:
   1. nav-rail vizibil + height auto (nu mai capped)
   2. game-play-view grid cu hand-bot explicit
   3. status-bar + nav-bar compactate */
@media (max-height: 500px) and (orientation: landscape) {
    /* NAV-RAIL — height auto, 2 rânduri compacte */
    .nav-rail {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 56px !important;
        max-height: none !important;
        padding-top: 2px !important;
        padding-bottom: calc(2px + env(safe-area-inset-bottom)) !important;
        gap: 2px !important;
    }
    .nav-rail .status-bar {
        min-height: 22px !important;
        padding: 2px 6px !important;
        font-size: clamp(9px, 2vh, 11px) !important;
    }
    .nav-rail .nav-bar-primary {
        min-height: 30px !important;
        padding: 0 !important;
        gap: 2px !important;
    }
    .nav-rail .nav-bar-btn,
    .nav-rail .nav-bar-fab {
        padding: 3px 6px !important;
        min-height: 30px !important;
        font-size: clamp(9px, 2vh, 11px) !important;
    }
    .nav-rail .material-symbols-rounded {
        font-size: clamp(16px, 4vh, 20px) !important;
    }
    .nav-rail .nav-fab-avatar {
        width: 26px !important;
        height: 26px !important;
    }
    .status-avatar {
        width: clamp(20px, 5vh, 26px) !important;
        height: clamp(20px, 5vh, 26px) !important;
    }

    /* GAME PLAY VIEW — forțăm layout cu hand-bot (player hand VIZIBIL) */
    .game-play-view {
        padding: 2px !important;
        grid-template-areas:
            "hand-top   hand-top   sidebar"
            "zone1      zone2      sidebar"
            "zone3      zone4      sidebar"
            "hand-bot   hand-bot   sidebar" !important;
        grid-template-columns: 1fr 1fr clamp(90px, 14vw, 140px) !important;
        grid-template-rows: auto minmax(40px, 1fr) minmax(40px, 1fr) auto !important;
    }
    .game-play-view[data-players="2"] {
        grid-template-areas:
            "hand-top   hand-top   sidebar"
            "zone1      zone1      sidebar"
            "zone2      zone2      sidebar"
            "hand-bot   hand-bot   sidebar" !important;
    }
    .game-play-view[data-players="3"] {
        grid-template-areas:
            "hand-top   hand-top   sidebar"
            "zone1      zone2      sidebar"
            "zone3      zone3      sidebar"
            "hand-bot   hand-bot   sidebar" !important;
    }
    .game-play-view[data-players="4"] {
        grid-template-areas:
            "hand-top   hand-top   sidebar"
            "zone1      zone2      sidebar"
            "zone3      zone4      sidebar"
            "hand-bot   hand-bot   sidebar" !important;
    }

    /* SEAT-SOUTH (player hand bot) — asigurăm minimul vizibil */
    /* CSS vars --top-bar-h/--nav-rail-h sync cu dimensiunile reale in landscape mic */
    .game-play-view {
        max-height: calc(100dvh - var(--top-bar-h, 28px) - var(--nav-rail-h, 48px)) !important;
        overflow: hidden !important;
    }
    .seat-south {
        grid-area: hand-bot !important;
        min-height: 48px !important;
        max-height: 70px !important;
        overflow: hidden !important;
    }
    .seat-south .player-hand {
        min-height: 34px !important;
        max-height: 46px !important;
    }
    .player-hand .tile {
        width: clamp(22px, 5vh, 30px);
        height: clamp(30px, 6.8vh, 42px);
    }
    /* Info bar "Tu 0 pct 15 140 pct" — compact pe landscape mic */
    .seat-south .player-info-bar,
    .seat-south .player-meta {
        min-height: 18px !important;
        padding: 2px 6px !important;
        font-size: clamp(9px, 2vh, 11px) !important;
    }
    .seat-south .action-btn-game,
    .seat-south .player-info-bar button {
        padding: 2px 6px !important;
        min-height: 22px !important;
        font-size: 10px !important;
    }

    /* SIDEBAR dreapta — compact */
    .whist-sidebar {
        grid-area: sidebar !important;
        flex-direction: column !important;
        max-height: 100% !important;
        overflow-y: auto !important;
    }
    /* FIX #11/#12: "ARUN..." trunchiat, activitate masă cut → font compact */
    .whist-sidebar .section-title,
    .whist-sidebar [class*="title"] {
        font-size: clamp(8px, 1.6vh, 10px) !important;
        letter-spacing: 0.2px !important;
        padding: 3px 4px !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
    .whist-sidebar .activity-item,
    .whist-sidebar [class*="activity"],
    .whist-sidebar .activity-log * {
        font-size: 9.5px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Action bar compact */
    .action-btn-game {
        padding: 6px 10px;
        font-size: 11px;
        min-height: 36px;
    }
}

/* ──────── 14. SAFE AREA BOTTOM — home-bar iOS nu blochează UI ──────── */
@media (max-width: 767px) and (orientation: portrait) {
    .game-play-view {
        padding-bottom: calc(4px + env(safe-area-inset-bottom));
        padding-top: calc(2px + env(safe-area-inset-top));
    }
}

/* ──────── 15. OPPONENT CHIPS (seat-north) — DEPRECATED, inlocuit de layout 3-col ──────── */
/* Layout gestionat acum in regula @media (max-width: 767px) and (orientation: portrait)
   cu flex space-evenly + opponent-info nowrap (avatar + nume + pct + count intr-un rand).
   Vechea regula flex-wrap e conflictuala si ar strica layout-ul curat. */

/* ──────── 16. SPECTATOR MODE — collapse tava de piese goală ──────── */
/* Când user e spectator (`body.spectator-mode`), tava de south e goală (fără mâna proprie).
   Pe mobile reducem înălțimea ca să dăm spațiu suplimentar seat-urilor cu meld-uri. */
@media (max-width: 767px) and (orientation: portrait) {
    body.spectator-mode .seat-south {
        flex: 0 0 auto;
    }
    body.spectator-mode .seat-south .player-hand {
        min-height: 0;
        max-height: 54px;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    body.spectator-mode .seat-south .player-hand .tile {
        max-height: 44px;
        max-width: 30px;
    }
    /* Bara player-info rămâne vizibilă (are badge-ul SPECTATOR) — doar compactăm */
    body.spectator-mode .seat-south .player-info-bar {
        padding-top: 2px;
        padding-bottom: 2px;
    }
}
@media (max-height: 500px) and (orientation: landscape) {
    body.spectator-mode .seat-south {
        max-height: 14vh;
        flex: 0 0 auto;
    }
    body.spectator-mode .seat-south .player-hand {
        min-height: 0;
        max-height: 38px;
        padding: 2px 6px;
    }
    body.spectator-mode .seat-south .player-hand .tile {
        max-height: 32px;
        max-width: 22px;
    }
    body.spectator-mode .seat-south .player-info-bar {
        padding-top: 1px;
        padding-bottom: 1px;
        font-size: clamp(9px, 2vh, 11px);
    }
}

/* ──────── 17. ETALARE ZONE LABELS — nume jucător pe badge-ul din colțul zonei ──────── */
/* Problema: label-ul "SBOT_MADALINA94" (14 chars, uppercase, bold) ocupă ~40%
   din lățimea zonei pe portrait mobile. Reducem font + max-width + ellipsis. */
@media (max-width: 480px) and (orientation: portrait) {
    .etalare-zone[data-label]:not(:has(.etalare-label))::before {
        font-size: clamp(6.5px, 1.8vw, 8px) !important;
        padding: 1px 4px !important;
        max-width: calc(100% - 14px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        letter-spacing: 0.2px;
        top: 3px;
        left: 5px;
        border-radius: 8px;
    }
}
/* Portrait foarte îngust (<=400px) — font și mai mic */
@media (max-width: 400px) and (orientation: portrait) {
    .etalare-zone[data-label]:not(:has(.etalare-label))::before {
        font-size: 7px !important;
        padding: 1px 3px !important;
        letter-spacing: 0.1px;
    }
}
/* Landscape mic — același tratament + reducere și mai agresivă */
@media (max-height: 500px) and (orientation: landscape) {
    .etalare-zone[data-label]:not(:has(.etalare-label))::before {
        font-size: 7px !important;
        padding: 1px 4px !important;
        max-width: calc(100% - 12px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        letter-spacing: 0.15px;
        top: 2px;
        left: 4px;
        border-radius: 6px;
    }
}

/* ──────── 18. PANELURI (CHAT + MESE) + LANDSCAPE CHIP NAMES ──────── */

/* 18a. MESE filter chips — scroll orizontal pe portrait îngust */
/* 10 chip-uri într-un rând pe 412px → strâmt. Permitem scroll orizontal
   cu snap + fără scrollbar vizibil (clean touch UX). */
@media (max-width: 480px) and (orientation: portrait) {
    .mp-filter-chip-container,
    .mw-filters,
    .lobby-filter-bar,
    .lobby-filters-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .mp-filter-chip-container::-webkit-scrollbar,
    .mw-filters::-webkit-scrollbar,
    .lobby-filters-scroll::-webkit-scrollbar {
        display: none;
    }
    .mp-filter-chip {
        scroll-snap-align: start;
        flex-shrink: 0;
        min-height: 32px;
        font-size: clamp(10px, 2.5vw, 12px);
        padding: 5px 10px;
    }
}

/* 18b. CHAT tabs — păstrează lizibil pe portrait foarte îngust (<=400px) */
@media (max-width: 400px) and (orientation: portrait) {
    .chat-tab {
        padding: 8px 6px;
        font-size: 11px;
        gap: 3px;
    }
    .chat-tab .material-symbols-rounded {
        font-size: 15px;
    }
    .chat-tab-badge {
        min-width: 14px;
        height: 14px;
        font-size: 8px;
        top: 2px;
        right: 4px;
    }
}

/* 18c. Opponent chip nume complet ȘI în landscape (nu doar portrait) */
/* Zona 15 acoperea doar portrait — extindem la landscape <=500px height */
@media (max-height: 500px) and (orientation: landscape) {
    .seat-north .opponent-info {
        min-width: 0;
        align-items: center;
        column-gap: 4px;
    }
    .seat-north .opponent-area .opponent-info .opponent-name,
    .seat-north .opponent-name {
        flex: 1 1 auto !important;
        max-width: clamp(70px, 12vw, 140px) !important;
        font-size: clamp(9px, 2vh, 11px) !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .seat-north .opponent-points,
    .seat-north .opponent-tiles-count {
        font-size: clamp(8px, 1.8vh, 10px);
        flex-shrink: 0;
    }
}

/* 18d. Panel content — scroll touch + safe area bottom iOS */
@media (max-width: 767px) {
    .panel-content {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .panel-header {
        padding-top: calc(4px + env(safe-area-inset-top));
    }
}

/* === END MOBILE PORTRAIT REFINEMENTS 2026-04-19 === */


/* ================================================================================================
   MOBILE FIXES 2026-04-19 v2 — după verificare Chrome browser la 412×915 + 915×412
   Adresează: context-panel landscape height, chat tabs landscape labels, MESE filters scroll,
   lobby card truncation landscape, fullscreen icon overlap, etalare empty-state compact,
   status bar portrait tight, lobby Top Jucători landscape, action-bar visibility landscape
================================================================================================ */

/* ──────── 19. CONTEXT PANEL LANDSCAPE — fill full height + full width ──────── */
/* FIX #14/#15: Panel context (CHAT/MESE) era 320×269 în landscape 912×409 —
   lăsa 140px empty vertical și taia mesajele/meta rooms. Îl facem full height
   + lățime adaptivă (400-460px) ca să încapă tabs cu label + conținut util. */
@media (max-height: 500px) and (orientation: landscape) {
    .context-panel.active {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: clamp(380px, 48vw, 480px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        z-index: 1050 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .context-panel.active .panel-header {
        flex: 0 0 auto !important;
        padding: 4px 8px !important;
        min-height: 36px !important;
    }
    .context-panel.active .panel-content,
    .context-panel.active .panel-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        min-height: 0 !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    }
    /* FIX #13: Chat tabs păstrează label-urile în landscape — icon + text */
    .context-panel.active .chat-tabs,
    .context-panel.active [class*="chat-tab-bar"] {
        gap: 2px !important;
        padding: 4px 2px !important;
    }
    .context-panel.active .chat-tab {
        padding: 4px 2px !important;
        font-size: 9px !important;
        gap: 2px !important;
        flex-direction: column !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
    }
    .context-panel.active .chat-tab .material-symbols-rounded,
    .context-panel.active .chat-tab svg,
    .context-panel.active .chat-tab i {
        font-size: 14px !important;
        width: 14px !important;
        height: 14px !important;
    }
    .context-panel.active .chat-tab .chat-tab-label,
    .context-panel.active .chat-tab span:not(.chat-tab-badge) {
        display: inline-block !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    /* MESE header stats row compact */
    .context-panel.active [class*="stats"] {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    /* MESE Live/AI tabs compact */
    .context-panel.active [class*="live-ai"],
    .context-panel.active [class*="mw-tabs"] {
        padding: 2px 4px !important;
        gap: 4px !important;
    }
}

/* ──────── 20. MESE FILTER CHIPS — scroll orizontal și în landscape panel ──────── */
/* FIX #17: filter chips "Toate|Libere|Joc|Juc.|2P|3P|4P|🔍" nu încăpea în panel
   320px landscape → 3P/4P ascunse. Activăm scroll snap identic cu portrait. */
@media (max-width: 767px), (max-height: 500px) and (orientation: landscape) {
    .context-panel .mp-filter-chip-container,
    .context-panel .mw-filters,
    .context-panel .lobby-filter-bar,
    .context-panel .lobby-filters-scroll {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity !important;
    }
    .context-panel .mp-filter-chip-container::-webkit-scrollbar,
    .context-panel .mw-filters::-webkit-scrollbar,
    .context-panel .lobby-filters-scroll::-webkit-scrollbar {
        display: none !important;
    }
    .context-panel .mp-filter-chip,
    .context-panel .lobby-chip {
        scroll-snap-align: start !important;
        flex-shrink: 0 !important;
    }
}

/* ──────── 21. LOBBY LANDSCAPE — card name + room name truncation ──────── */
/* FIX #3/#4: În landscape lobby la grid 2-coloane, .lobby-card-name = 114px →
   "sbot_octavian99 ▶ În joc" taie numele la "sbot_octavian99 ▶ i...".
   Soluție: badge-ul "În joc" devine doar iconița ▶ + font chip adaptiv */
@media (max-height: 500px) and (orientation: landscape),
       (min-width: 481px) and (max-width: 767px) {
    .lobby-card {
        padding: 6px 8px !important;
    }
    .lobby-card-name {
        font-size: clamp(10px, 1.8vw, 12px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
    .lobby-card-room {
        font-size: clamp(9px, 1.6vw, 11px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .lc-badge,
    .lc-badge-playing,
    .lc-badge-waiting {
        font-size: 8px !important;
        padding: 1px 4px !important;
        flex-shrink: 0 !important;
        max-width: 50px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .lobby-card-action {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
}

/* ──────── 22. LOBBY LANDSCAPE — Top Jucători cu nume vizibile + whitespace redus ──────── */
/* FIX #5/#6: În landscape, "Top Jucători" secțiune e comprimată — doar avatar+scor
   fără nume. Și există whitespace gol pe stânga unde drawer-panel stă ascuns. */
@media (max-height: 500px) and (orientation: landscape) {
    .top-players-section,
    [class*="top-players"],
    .ranking-section {
        padding: 4px 6px !important;
    }
    .top-player-card,
    [class*="top-player"] {
        min-width: 0 !important;
        padding: 3px 5px !important;
    }
    .top-player-name,
    [class*="top-player"] [class*="name"] {
        display: inline-block !important;
        font-size: 10px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 90px !important;
    }
    .top-player-score,
    [class*="top-player"] [class*="score"],
    [class*="top-player"] [class*="pts"] {
        font-size: 9px !important;
    }
    /* Lobby: reduce margin/padding stânga-dreapta pe landscape ca să folosim tot spațiul */
    .lobby-view {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .lobby-rooms,
    .lobby-rooms-grid,
    [class*="rooms-grid"] {
        gap: 4px !important;
    }
}

/* ──────── 23. ETALARE ZONES — compact când sunt goale pe portrait ──────── */
/* FIX #7: Zone etalare 397×224 fiecare = 448px spațiu verde gol în portrait
   cu 0 meld-uri puse. Aceasta lasă doar 112px pentru player-hand + info.
   Soluție: zone-urile goale au min-height compact, cresc când au conținut. */
@media (max-width: 480px) and (orientation: portrait) {
    /* Zone goale — comprimate */
    .etalare-zone:empty,
    .etalare-zone:not(:has(.tile)):not(:has(.etalare-tile)):not(:has([class*="group"])) {
        min-height: 60px !important;
        max-height: 100px !important;
    }
    /* Zone cu meld-uri — se extind natural */
    .etalare-zone:has(.tile),
    .etalare-zone:has(.etalare-tile),
    .etalare-zone:has([class*="group"]) {
        min-height: 80px !important;
    }
}

/* ──────── 24. FOCUS BUTTON (⛶ immersive-toggle) — ascuns DOAR în portrait când panel deschis ──────── */
/* FIX #20: butonul FOCUS #immersiveFloatBtn (class .immersive-toggle-float, arrows-box
   ⛶ pe stânga mijloc, toggle pentru mărire masa) stă peste "Masa lui Aurelia D." etc
   ÎN PORTRAIT unde panel acoperă tot ecranul (position:fixed, width:100%). În LANDSCAPE
   panelul e coloană pe dreapta (320px), butonul e pe stânga → NU se suprapun → rămâne
   VIZIBIL. Scop: ascundere doar pe portrait când panel active. */
@media (orientation: portrait) {
    body:has(.context-panel.active) .immersive-toggle-float,
    body:has(.context-panel.active) #immersiveFloatBtn,
    body:has(.context-panel.active) .fullscreen-btn,
    body:has(.context-panel.active) [class*="fullscreen-btn"],
    body:has(.context-panel.active) .btn-fullscreen {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    /* Fallback pentru browsere vechi fără :has() — clasa panel-open pe body */
    body.panel-open .immersive-toggle-float,
    body.panel-open #immersiveFloatBtn {
        display: none !important;
        visibility: hidden !important;
    }
}
/* LANDSCAPE: buton Focus rămâne vizibil mereu (chiar cu panel deschis) — nu se suprapune */
@media (orientation: landscape) {
    body:has(.context-panel.active) .immersive-toggle-float,
    body:has(.context-panel.active) #immersiveFloatBtn {
        display: flex !important;
        visibility: visible !important;
        opacity: 0.9 !important;
        pointer-events: auto !important;
    }
    body:has(.context-panel.active) .immersive-toggle-float:hover,
    body:has(.context-panel.active) #immersiveFloatBtn:hover {
        opacity: 1 !important;
    }
}

/* ──────── 25. STATUS BAR PORTRAIT — compact ──────── */
/* FIX #2: "13415 pts | ⏰ 0:00 | Lv.1 0/200 XP" cramped pe portrait 412px.
   Reducem font + gap ca să nu se înghesuie. */
@media (max-width: 480px) and (orientation: portrait) {
    .nav-rail .status-bar {
        gap: 4px !important;
        padding: 3px 6px !important;
        font-size: 10px !important;
    }
    .nav-rail .status-bar .status-pts,
    .nav-rail .status-bar .status-xp,
    .nav-rail .status-bar [class*="status-"] {
        font-size: 10px !important;
        padding: 1px 4px !important;
    }
    .nav-rail .status-bar .status-avatar,
    .nav-rail .status-avatar {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ──────── 26. SIDEBAR LANDSCAPE — activity text wrap în loc de trunchiat ──────── */
/* FIX #11/#12 reinforced: garantăm text wrap (nu ellipsis) în sidebar activitate */
@media (max-height: 500px) and (orientation: landscape) {
    .whist-sidebar .activity-log,
    .whist-sidebar [class*="activity-log"] {
        max-height: 100% !important;
        overflow-y: auto !important;
        padding: 2px 4px !important;
    }
    .whist-sidebar .activity-log > *,
    .whist-sidebar [class*="activity-log"] > * {
        margin-bottom: 2px !important;
    }
    /* Aruncate preview card compact */
    .whist-sidebar .aruncate-preview,
    .whist-sidebar [class*="aruncate"] {
        font-size: 9px !important;
        padding: 4px !important;
    }
    /* Deck info compact */
    .whist-sidebar .deck-count,
    .whist-sidebar [class*="atu"],
    .whist-sidebar [class*="deck"] {
        font-size: 9px !important;
    }
}

/* ──────── 27. LOBBY CARD PORTRAIT — badge "În joc" text visible ──────── */
/* Portrait mai larg: badge text complet dar compact */
@media (max-width: 480px) and (orientation: portrait) {
    .lobby-card-name {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: calc(100% - 4px) !important;
    }
    .lc-badge-playing,
    .lc-badge-waiting {
        font-size: 9px !important;
        padding: 1px 5px !important;
    }
}

/* === END MOBILE FIXES 2026-04-19 v2 === */


/* ================================================================================================
   MOBILE FIXES 2026-04-19 v3 — HEADER + NAV-RAIL MULT MAI MICI
   User feedback: "header mobil vred ca trebuie mult mai mic si footer la fel sa lasam
   loc calumea mesei de joc". Actual: header 48px + nav-rail 81px = 129px consumați.
   Target: header 34-28px + nav-rail 56-44px → +35-45px câștigați pentru masa de joc.
================================================================================================ */

/* ──────── 28. HEADER + NAV-RAIL COMPACT — PORTRAIT MOBILE (≤767px) ──────── */
@media (max-width: 767px) and (orientation: portrait) {
    /* Sincronizez CSS vars cu dimensiunile reale (calc-urile din .game-play-view / .main-content
       folosesc aceste vars — daca nu le sincronizez, ram ane gap mort sau overflow pe nav-rail) */
    :root {
        --top-bar-h: 34px;
        --nav-rail-h: 60px;
    }
    /* HEADER TOP-BAR: 48px → 34px */
    .top-bar {
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 10px !important;
    }
    .top-bar .brand-title {
        font-size: 13px !important;
        letter-spacing: 0.5px !important;
        line-height: 1.1 !important;
    }
    .top-bar .brand-section .brand-title::after {
        font-size: 7px !important;
        letter-spacing: 1px !important;
        margin-top: 0 !important;
    }
    .top-bar .brand-icon {
        width: 24px !important;
        height: 28px !important;
    }
    .top-bar .brand-icon::after {
        font-size: 15px !important;
    }
    .top-bar .action-btn {
        width: 28px !important;
        height: 28px !important;
    }
    .top-bar .action-btn .material-symbols-rounded {
        font-size: 17px !important;
    }

    /* NAV-RAIL TOTAL FIXED 60px (status-bar 18 + nav-bar 34 + padding 2+2 + gap 4)
       Fixed (nu min/max) ca sa poate sincroniza cu --nav-rail-h: 60px din :root. */
    .nav-rail {
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        padding-top: 2px !important;
        padding-bottom: calc(2px + env(safe-area-inset-bottom)) !important;
        gap: 4px !important;
    }
    .nav-rail .status-bar {
        min-height: 18px !important;
        height: 18px !important;
        padding: 1px 8px !important;
        font-size: 10px !important;
        gap: 4px !important;
    }
    .nav-rail .status-avatar,
    .nav-rail .status-bar .status-avatar {
        width: 16px !important;
        height: 16px !important;
    }
    .nav-rail .nav-bar-primary {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 4px !important;
        gap: 2px !important;
    }
    .nav-rail .nav-bar-btn,
    .nav-rail .nav-bar-fab {
        min-height: 34px !important;
        height: 34px !important;
        padding: 2px 4px !important;
        font-size: 9px !important;
        gap: 0 !important;
    }
    .nav-rail .nav-bar-btn .material-symbols-rounded,
    .nav-rail .nav-bar-fab .material-symbols-rounded {
        font-size: 16px !important;
    }
    .nav-rail .nav-bar-label {
        font-size: 8px !important;
        line-height: 1 !important;
        letter-spacing: 0.2px !important;
    }
    .nav-rail .nav-fab-avatar {
        width: 24px !important;
        height: 24px !important;
    }
}

/* ──────── 29. HEADER + NAV-RAIL COMPACT — LANDSCAPE MIC (≤500h) ──────── */
@media (max-height: 500px) and (orientation: landscape) {
    /* Sincronizez CSS vars cu dimensiunile reale (pt. calc-urile 100dvh - var) */
    :root {
        --top-bar-h: 28px;
        --nav-rail-h: 48px;
    }
    /* HEADER TOP-BAR: 48px → 28px (and in game mode, ascund complet) */
    .top-bar {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 8px !important;
    }
    .top-bar .brand-title {
        font-size: 11px !important;
        letter-spacing: 0.4px !important;
    }
    .top-bar .brand-section .brand-title::after {
        display: none !important;
    }
    .top-bar .brand-icon {
        width: 22px !important;
        height: 26px !important;
    }
    .top-bar .brand-icon::after {
        font-size: 14px !important;
    }
    .top-bar .action-btn {
        width: 26px !important;
        height: 26px !important;
    }
    .top-bar .action-btn .material-symbols-rounded {
        font-size: 16px !important;
    }

    /* NAV-RAIL TOTAL FIXED 48px — status-bar 16 + nav-bar 28 + padding 2 + gap 2
       Fixed ca sa sync cu --nav-rail-h: 48px si calc(100dvh - var(--nav-rail-h)) */
    .nav-rail {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding-top: 1px !important;
        padding-bottom: calc(1px + env(safe-area-inset-bottom)) !important;
        gap: 2px !important;
    }
    .nav-rail .status-bar {
        min-height: 16px !important;
        height: 16px !important;
        padding: 0 8px !important;
        font-size: 9px !important;
        gap: 4px !important;
    }
    .nav-rail .status-bar .status-avatar,
    .nav-rail .status-avatar {
        width: 14px !important;
        height: 14px !important;
    }
    .nav-rail .nav-bar-primary {
        min-height: 28px !important;
        height: 28px !important;
        padding: 0 4px !important;
        gap: 2px !important;
    }
    .nav-rail .nav-bar-btn,
    .nav-rail .nav-bar-fab {
        min-height: 28px !important;
        height: 28px !important;
        padding: 1px 4px !important;
        font-size: 8px !important;
        flex-direction: row !important;
        gap: 3px !important;
    }
    .nav-rail .nav-bar-btn .material-symbols-rounded,
    .nav-rail .nav-bar-fab .material-symbols-rounded {
        font-size: 14px !important;
    }
    .nav-rail .nav-bar-label {
        font-size: 8px !important;
        letter-spacing: 0.2px !important;
        line-height: 1 !important;
    }
    .nav-rail .nav-fab-avatar {
        width: 20px !important;
        height: 20px !important;
    }

    /* HEADER RĂMÂNE VIZIBIL ÎN GAME (user request: doar focus ascunde header+footer).
       Top-bar și nav-rail rămân afișate în lobby + game. Doar .immersive-mode le ascunde. */
}

/* ──────── 30. GAME VIEW HEIGHT — landscape (header + nav-rail mereu vizibile) ──────── */
/* Folosesc CSS vars (--top-bar-h: 28, --nav-rail-h: 48 in regula landscape) — sync automat. */
@media (max-height: 500px) and (orientation: landscape) {
    .game-play-view {
        max-height: calc(100dvh - var(--top-bar-h, 28px) - var(--nav-rail-h, 48px)) !important;
        min-height: calc(100dvh - var(--top-bar-h, 28px) - var(--nav-rail-h, 48px)) !important;
    }
    body.immersive-mode .game-play-view {
        max-height: 100dvh !important;
        min-height: 100dvh !important;
    }
}

/* ──────── 31. GAME VIEW PORTRAIT — header + nav-rail mereu vizibile ──────── */
@media (max-width: 767px) and (orientation: portrait) {
    .game-play-view {
        /* Folosim CSS vars ca sa ramana sincronizat cu override-ul 480px (nav-rail-h: 72px) */
        max-height: calc(100dvh - var(--top-bar-h, 44px) - var(--nav-rail-h, 76px)) !important;
        min-height: calc(100dvh - var(--top-bar-h, 44px) - var(--nav-rail-h, 76px)) !important;
    }
    body.immersive-mode .game-play-view {
        max-height: 100dvh !important;
        min-height: 100dvh !important;
    }
}

/* ──────── 32. MAIN-CONTENT FIT EXACT — elimină overflow + spațiu mort ──────── */
/* Nav-rail e position:fixed (overlay la bottom). main-content flex:1 ar consuma
   tot viewportul → overlap cu nav-rail în landscape, gap mort în portrait.
   Soluție: constrâng main-content la exact viewport − header − navRail.
   CRITIC: padding-bottom:0 — default `.main-content { padding-bottom: 110px }` (linia 1484)
   e pentru mobile portrait cu nav-rail fix; în landscape width > 767 NU se aplică
   @media (max-width:767px) care îl anulează → ocupă 110px din înălțimea utilă,
   game-canvas moștenește înălțime content-box (h − padding) → 110px lipsă. */

@media (max-width: 767px) and (orientation: portrait) {
    .main-content {
        height: calc(100dvh - var(--top-bar-h, 44px) - var(--nav-rail-h, 76px)) !important;
        max-height: calc(100dvh - var(--top-bar-h, 44px) - var(--nav-rail-h, 76px)) !important;
        min-height: calc(100dvh - var(--top-bar-h, 44px) - var(--nav-rail-h, 76px)) !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }
    body.immersive-mode .main-content {
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 100dvh !important;
        padding-bottom: 0 !important;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .main-content {
        height: calc(100dvh - var(--top-bar-h, 28px) - var(--nav-rail-h, 48px)) !important;
        max-height: calc(100dvh - var(--top-bar-h, 28px) - var(--nav-rail-h, 48px)) !important;
        min-height: calc(100dvh - var(--top-bar-h, 28px) - var(--nav-rail-h, 48px)) !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }
    body.immersive-mode .main-content {
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 100dvh !important;
        padding-bottom: 0 !important;
    }
}

/* ──────── 33. MODALURI MOBILE — fit corect în viewport, nimic ascuns ──────── */
/* Modaluri trebuie să încapă complet, cu scroll INTERN (în .modal-body) dacă e nevoie.
   Header și footer modal mereu vizibile (titlu + butoane de acțiune). */

/* Portrait mobile — modal centrat, conținut scrollabil intern */
@media (max-width: 767px) and (orientation: portrait) {
    .modal-overlay {
        padding: 16px 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .modal-container {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 94% !important;
        max-width: 420px !important;
        max-height: calc(100dvh - 32px) !important;
        border-radius: 18px !important;
        transform: scale(0.9) translateY(20px) !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .modal-overlay.active .modal-container {
        transform: scale(1) translateY(0) !important;
    }
    .modal-header {
        flex-shrink: 0 !important;
        padding: 12px 16px !important;
    }
    .modal-footer {
        flex-shrink: 0 !important;
        padding: 10px 16px !important;
    }
    .modal-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
    }
}

/* Landscape mobile — modal lat, scroll intern, header/footer compact */
@media (max-height: 500px) and (orientation: landscape) {
    .modal-overlay {
        padding: 8px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .modal-container {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 82% !important;
        max-width: 620px !important;
        max-height: calc(100dvh - 16px) !important;
        border-radius: 14px !important;
        transform: scale(0.92) !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .modal-overlay.active .modal-container {
        transform: scale(1) !important;
    }
    .modal-header {
        flex-shrink: 0 !important;
        padding: 8px 14px !important;
    }
    .modal-header h2 {
        font-size: 14px !important;
    }
    .modal-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 16px !important;
    }
    .modal-footer {
        flex-shrink: 0 !important;
        padding: 8px 14px !important;
    }
    .modal-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
        padding: 10px 14px !important;
    }
    .modal-close {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ──────── 34. GAME WRAPPERS — constrâng la main-content, action-bar mereu vizibil ──────── */
/* PROBLEMĂ: Bootstrap `.row` pe main-content = `flex-wrap: wrap` → copiii nu se întind
   pe înălțimea părintelui → .game-canvas rămâne la înălțimea conținutului → action-bar
   ajunge sub nav-rail → INACCESIBIL.
   PRIORITATE VIZUALĂ în joc:
     1. Cărțile mele (hand-bot) + butoanele de acțiune — MEREU vizibile, tappable
     2. Zonele de etalare (meld zones) — vizibile, scroll dacă e nevoie
     3. Cărțile oponentului (hand-top) — minimale
   FIX: main-content → nowrap + align-items stretch; lanțul game-* → flex col, height 100%. */

/* Portrait */
@media (max-width: 767px) and (orientation: portrait) {
    .main-content {
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    .game-canvas,
    .game-area,
    .game-table-wrapper {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .game-play-view {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    .action-bar {
        flex-shrink: 0 !important;
        min-height: 48px !important;
        max-height: 56px !important;
    }
}

/* Landscape — critic: fiecare px contează */
@media (max-height: 500px) and (orientation: landscape) {
    .main-content {
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    .game-canvas,
    .game-area,
    .game-table-wrapper {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .game-play-view {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    .action-bar {
        flex-shrink: 0 !important;
        min-height: 44px !important;
        max-height: 48px !important;
        padding: 2px 4px !important;
    }
    .action-bar .action-btn-game {
        min-height: 40px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
}

/* ──────── 35. SEAT-SOUTH PRIORITATE #1 — mărit vizual pe mobil ──────── */
/* Regula UX: jucătorul meu (sud) = prioritate #1 vizual. Piesele din mână,
   bara info (nume + pct + contor), butoanele de acțiune — toate MAI MARI
   decât default-ul mobil, ca să se vadă clar și să se atingă ușor.
   Compromis: dacă spațiul e limitat, reducem oponenții/sidebar-ul,
   NU sud-ul. */

/* Portrait mobil — sud dominant (≥ ⅓ din înălțimea jocului) */
@media (max-width: 767px) and (orientation: portrait) {
    /* NOTA: dimensiunile tile-urilor pentru mana south sunt stabilite mai jos
       in sectiunea "MOBILE SOUTH HAND — 2 RANDURI + PIESE MICI" (la sfarsitul
       fisierului) — 22x30 (cum sunt cele aruncate, flex-wrap wrap pe 2 randuri).
       Vechile reguli 48x68 au fost sterse pentru a evita conflict. */
    /* Player info bar compact mobil portrait — 8-aligned math:
       content-row ≈ 20px (avatar 20 / font 11) + padding 4+4 = 28px min-height */
    .seat-south .player-info-bar {
        min-height: 28px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
        gap: 6px !important;
        margin: 2px 6px !important;
    }
    .seat-south .player-info-bar .player-name,
    .seat-south .player-info-bar .player-name-label {
        font-size: 12px !important;
        font-weight: 700 !important;
    }
    .seat-south .player-info-bar .player-tiles-count {
        min-width: 22px !important;
        height: 22px !important;
        font-size: 11px !important;
        padding: 1px 5px !important;
    }
    .seat-south .player-info-bar .seat-avatar {
        width: 22px !important;
        height: 22px !important;
    }
    .seat-south .player-info-bar .sort-btn {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        padding: 0 !important;
    }
    .seat-south .player-info-bar .sort-btn .material-symbols-rounded {
        font-size: 15px !important;
    }
    /* Action bar (fallback când JS nu a merged — 8-align padding/gap) */
    .action-bar {
        gap: 8px !important;
        padding: 8px !important;
        min-height: 56px !important;
        max-height: 64px !important;
    }
    .action-bar .action-btn-game {
        min-height: 48px !important;     /* ≥ Apple HIG 44px tap target */
        padding: 8px 16px !important;    /* 8 multipli */
        font-size: 14px !important;
        font-weight: 600 !important;
        flex: 1 1 auto !important;
        border-radius: 8px !important;
    }
    /* Punctajul / info text pe shelf (dacă apare) */
    .seat-south .player-hand-penalty {
        font-size: 12px !important;
        padding: 3px 8px !important;
    }
}

/* Landscape mobil — sud compactat dar NUMAI ce trebuie, rest mai mare */
@media (max-height: 500px) and (orientation: landscape) {
    /* NOTA: dimensiunile tile-urilor pentru mana south landscape sunt stabilite
       mai jos in sectiunea "MOBILE SOUTH HAND" (la sfarsitul fisierului) —
       22x30 (cum sunt cele aruncate). Vechile reguli 44x62 au fost sterse. */
    .seat-south .player-info-bar {
        min-height: 28px !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
        gap: 8px !important;
    }
    .seat-south .player-info-bar .player-name {
        font-size: 13px !important;
        font-weight: 700 !important;
    }
    .seat-south .player-info-bar .player-tiles-count {
        min-width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
    }
    /* Action bar landscape — compact dar tap target ≥44px (Apple HIG) */
    .action-bar {
        gap: 4px !important;
        padding: 4px 8px !important;
        min-height: 50px !important;
        max-height: 54px !important;
    }
    .action-bar .action-btn-game {
        min-height: 44px !important;
        padding: 6px 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        flex: 1 1 auto !important;
    }
    .seat-south .player-hand-penalty {
        font-size: 11px !important;
        padding: 2px 6px !important;
    }
}

/* === END MOBILE FIXES 2026-04-19 v6 — seat-south priority === */


/* ──────── 36. MERGED ACTION BUTTONS — Trage/Etaleaza/Lipeste/Arunca în player-info-bar ──────── */
/* CÂȘTIGĂM SPAȚIU vertical: în loc de 2 rânduri (info-bar subțire + action-bar 48-56px),
   comasăm totul într-un singur rând puternic. JS-ul (_whistActionMerge) mută buton-urile
   din #actionBar → .player-info-bar și adaugă clasele:
     .player-info-bar.merged-actions   (pe info-bar)
     .action-bar.action-bar-merged     (pe action-bar → display:none pe mobil)
     .action-in-infobar                (pe fiecare buton mutat)
   Pe desktop JS-ul reașează butoanele în action-bar original → aceste reguli nu se aplică. */

@media (max-width: 767px) and (orientation: portrait) {
    /* Action-bar se ascunde DOAR dacă JS-ul a marcat mergeul efectuat. */
    .action-bar.action-bar-merged {
        display: none !important;
    }

    /* Info-bar cu butoane — wrap permis, 8px multipli consistent.
       Math: content-row 24px (avatar 24 / buton 32) + padding 2+2 = 32px min-height */
    .seat-south .player-info-bar.merged-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        padding: 2px 6px !important;
        min-height: 32px !important;
        height: auto !important;
        font-size: 10px !important;
        margin: 2px 4px !important;
    }

    /* Elementele info-bar — scaled la avatar 24 (din 28) */
    .seat-south .player-info-bar.merged-actions .seat-avatar {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        flex: 0 0 auto !important;
    }
    .seat-south .player-info-bar.merged-actions .player-name-label {
        font-size: 10px !important;
        max-width: 64px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
    .seat-south .player-info-bar.merged-actions .player-timer {
        flex: 0 0 auto !important;
        font-size: 9px !important;
        padding: 1px 4px !important;
    }
    .seat-south .player-info-bar.merged-actions .player-points {
        font-size: 10px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    .seat-south .player-info-bar.merged-actions .player-tiles-count {
        min-width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
        padding: 1px 4px !important;
        flex: 0 0 auto !important;
    }
    .seat-south .player-info-bar.merged-actions .player-hand-penalty {
        font-size: 9px !important;
        padding: 1px 4px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    .seat-south .player-info-bar.merged-actions .etalare-hint {
        font-size: 12px !important;
        flex: 0 0 auto !important;
    }

    /* Sort-buttons — 26×26 tap target (reducere de la 32 → win 6px per buton) */
    .seat-south .player-info-bar.merged-actions .sort-buttons {
        display: inline-flex !important;
        gap: 3px !important;
        flex: 0 0 auto !important;
    }
    .seat-south .player-info-bar.merged-actions .sort-buttons .sort-btn {
        width: 26px !important;
        min-width: 26px !important;
        height: 26px !important;
        padding: 0 !important;
        font-size: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 5px !important;
    }
    .seat-south .player-info-bar.merged-actions .sort-buttons .sort-btn .material-symbols-rounded {
        font-size: 15px !important;
    }

    /* Butoane actiune — 32px height (compact dar tap target acceptabil), padding 3×6 */
    .seat-south .player-info-bar.merged-actions .action-in-infobar {
        min-height: 32px !important;
        height: 32px !important;
        padding: 3px 6px !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        flex: 1 1 0 !important;
        min-width: 48px !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        border-radius: 6px !important;
    }
    .seat-south .player-info-bar.merged-actions .action-in-infobar .material-symbols-rounded {
        font-size: 14px !important;
    }
    /* Etaleaza primary: doar puțin mai lat, nu mai înalt */
    .seat-south .player-info-bar.merged-actions .action-in-infobar.btn-primary-action {
        flex: 1.2 1 0 !important;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .action-bar.action-bar-merged {
        display: none !important;
    }

    .seat-south .player-info-bar.merged-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        padding: 2px 4px !important;
        min-height: 30px !important;
        height: auto !important;
        font-size: 9px !important;
    }

    /* TOATE elementele rămân VIZIBILE pe landscape — compactate aggressive */
    .seat-south .player-info-bar.merged-actions .seat-avatar {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        flex: 0 0 auto !important;
    }
    .seat-south .player-info-bar.merged-actions .player-name-label {
        font-size: 9px !important;
        max-width: 50px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
    .seat-south .player-info-bar.merged-actions .player-timer {
        flex: 0 0 auto !important;
        font-size: 9px !important;
        padding: 1px 3px !important;
    }
    .seat-south .player-info-bar.merged-actions .player-points {
        font-size: 9px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    .seat-south .player-info-bar.merged-actions .player-tiles-count {
        min-width: 18px !important;
        height: 18px !important;
        font-size: 9px !important;
        padding: 1px 4px !important;
        flex: 0 0 auto !important;
    }
    .seat-south .player-info-bar.merged-actions .player-hand-penalty {
        font-size: 9px !important;
        padding: 1px 3px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    .seat-south .player-info-bar.merged-actions .etalare-hint {
        font-size: 11px !important;
        flex: 0 0 auto !important;
    }

    /* Sort-buttons compacte landscape */
    .seat-south .player-info-bar.merged-actions .sort-buttons {
        display: inline-flex !important;
        gap: 2px !important;
        flex: 0 0 auto !important;
    }
    .seat-south .player-info-bar.merged-actions .sort-buttons .sort-btn {
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
        font-size: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
    }
    .seat-south .player-info-bar.merged-actions .sort-buttons .sort-btn .material-symbols-rounded {
        font-size: 14px !important;
    }

    /* Butoane și mai MICI pe landscape — height 26px */
    .seat-south .player-info-bar.merged-actions .action-in-infobar {
        min-height: 26px !important;
        height: 26px !important;
        padding: 2px 4px !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        flex: 1 1 0 !important;
        min-width: 38px !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
        border-radius: 5px !important;
    }
    .seat-south .player-info-bar.merged-actions .action-in-infobar .material-symbols-rounded {
        font-size: 11px !important;
    }
    .seat-south .player-info-bar.merged-actions .action-in-infobar.btn-primary-action {
        flex: 1.2 1 0 !important;
    }
}

/* === END MERGED ACTIONS 2026-04-19 v7 === */


/* ──────── 36b. MERGED ACTIONS pe DESKTOP (2026-04-20) ────────
   v20.2 (2026-04-21) SCOPE FIX: Toate regulile aici sunt acum prefixate cu
   body:not(.game-active):not(.mp-game-active) — se activeaza DOAR in off-game
   (setup, lobby, waiting room). Cand jocul e pornit, layout-ul e controlat 100%
   de Block A (linii 4603-4970, v18-v20). Asta elimina conflictele care blocau
   focus/hover/active pe butoane. */
@media (min-width: 768px) {
    /* Action-bar original ascuns — butoanele sunt in info-bar */
    body:not(.game-active):not(.mp-game-active) .action-bar.action-bar-merged {
        display: none !important;
    }

    /* Info-bar cu butoane — flex row, wrap permis */
    body:not(.game-active):not(.mp-game-active) .seat-south .player-info-bar.merged-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 8px 14px !important;
        min-height: 56px !important;
        height: auto !important;
        font-size: 13px !important;
    }

    /* Elementele info-bar — dimensiuni desktop (off-game) */
    body:not(.game-active):not(.mp-game-active) .seat-south .player-info-bar.merged-actions .seat-avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex: 0 0 auto !important;
    }
    body:not(.game-active):not(.mp-game-active) .seat-south .player-info-bar.merged-actions .player-name-label,
    body:not(.game-active):not(.mp-game-active) .seat-south .player-info-bar.merged-actions .player-name {
        font-size: 13px !important;
        font-weight: 700 !important;
        max-width: 140px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
    body:not(.game-active):not(.mp-game-active) .seat-south .player-info-bar.merged-actions .player-timer {
        flex: 0 0 auto !important;
        font-size: 12px !important;
        padding: 3px 8px !important;
    }
    body:not(.game-active):not(.mp-game-active) .seat-south .player-info-bar.merged-actions .player-points {
        font-size: 13px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    body:not(.game-active):not(.mp-game-active) .seat-south .player-info-bar.merged-actions .player-tiles-count {
        min-width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
        padding: 2px 8px !important;
        flex: 0 0 auto !important;
    }
    body:not(.game-active):not(.mp-game-active) .seat-south .player-info-bar.merged-actions .player-hand-penalty {
        font-size: 12px !important;
        padding: 3px 8px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    body:not(.game-active):not(.mp-game-active) .seat-south .player-info-bar.merged-actions .etalare-hint {
        font-size: 18px !important;
        flex: 0 0 auto !important;
    }

    /* Sort-buttons desktop (off-game) */
    body:not(.game-active):not(.mp-game-active) .seat-south .player-info-bar.merged-actions .sort-buttons {
        display: inline-flex !important;
        gap: 4px !important;
        flex: 0 0 auto !important;
    }
    body:not(.game-active):not(.mp-game-active) .seat-south .player-info-bar.merged-actions .sort-buttons .sort-btn {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        font-size: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 7px !important;
    }
    body:not(.game-active):not(.mp-game-active) .seat-south .player-info-bar.merged-actions .sort-buttons .sort-btn .material-symbols-rounded {
        font-size: 20px !important;
    }

    /* Butoane actiune — height 44px (tap target + vizibilitate desktop, off-game) */
    body:not(.game-active):not(.mp-game-active) .seat-south .player-info-bar.merged-actions .action-in-infobar {
        min-height: 44px !important;
        height: 44px !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        flex: 1 1 0 !important;
        min-width: 90px !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border-radius: 9px !important;
    }
    body:not(.game-active):not(.mp-game-active) .seat-south .player-info-bar.merged-actions .action-in-infobar .material-symbols-rounded {
        font-size: 18px !important;
    }
    /* Etaleaza primary — putin mai lat (accent vizual pe actiunea principala, off-game) */
    body:not(.game-active):not(.mp-game-active) .seat-south .player-info-bar.merged-actions .action-in-infobar.btn-primary-action {
        flex: 1.3 1 0 !important;
    }
}
/* === END DESKTOP MERGED ACTIONS 2026-04-20 (v20.2 scoped to non-game state) === */


/* ──────── MOBILE SOUTH HAND — 2 RANDURI + PIESE MICI ────────
   User-ul a cerut: "fa piesele mai mici mobil in mana locul sus / sud / si doua
   randuri unde pot pune piesele".
   Interpretare: in mana south (player-ul local, jos pe ecran) pe mobil
   - piesele sa fie mai mici (pentru a face loc pentru board/melds deasupra)
   - mana sa aiba 2 randuri (flex-wrap) — user-ul isi poate aranja piesele
     pe 2 linii fara a trebui sa scroll-eze lateral
   Override-ul asta lasa tile-urile din melds/etalare/arrangement/oponenti
   NESCHIMBATE — modifica DOAR .seat-south .player-hand .tile. */
@media (max-width: 767px) and (orientation: portrait) {
    /* 2 randuri + dimensiuni IDENTICE cu .discard-history-tile (22x30, font 13px)
       Gap mai MARE (5px) pentru fingertip-friendly — user-ul nu prinde piesa
       gresita cu degetul. */
    .seat-south .player-hand {
        /* GRID 2-RAND: piesele sunt position:absolute pe grid curat (reorder
           prin drag). Container-ul e position:relative (reference frame pt.
           copiii absolute). Height 96px (8×12): padding 8+8 = 16 + 2 rows 38 = 76
           + 4 gap = 96 ✓ 8-aligned pe padding. */
        position: relative !important;
        display: block !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        padding: 8px !important;
        height: 96px !important;
        min-height: 96px !important;
        max-height: 96px !important;
    }
    /* Piesele din mana south — putin mai mari (28x38, font 15px) */
    .seat-south .player-hand .tile {
        width: 28px !important;
        height: 38px !important;
        min-width: 28px !important;
        font-size: 15px !important;
        border-radius: 4px !important;
        padding: 0 !important;
    }
    .seat-south .player-hand .tile .joker-svg {
        width: 22px !important;
        height: auto !important;
    }
    /* FARA lift la hover/selected — incurca rearanjarea pe mobil (touch hover
       ramane blocat dupa tap). Piesele stau in loc, feedback vizual = glow. */
    .seat-south .player-hand .tile:hover,
    .seat-south .player-hand .tile.selected,
    .tile:hover,
    .tile.selected {
        transform: none !important;
    }
}

/* Ecrane foarte mici (≤360px) — piese usor mai mici ca sa incapa 7 pe rand */
@media (max-width: 360px) and (orientation: portrait) {
    .seat-south .player-hand {
        /* 88px (8×11): padding 8+8 = 16 + 2 rows 34 = 68 + 4 gap = 88 ✓ */
        position: relative !important;
        display: block !important;
        height: 88px !important;
        min-height: 88px !important;
        max-height: 88px !important;
        padding: 8px !important;
    }
    .seat-south .player-hand .tile {
        width: 26px !important;
        height: 34px !important;
        min-width: 26px !important;
        font-size: 14px !important;
    }
}

/* Landscape — 1 rand, dimensiuni discard */
@media (max-height: 500px) and (orientation: landscape) {
    .seat-south .player-hand {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        min-height: 34px !important;
        height: 34px !important;
        padding: 2px 6px !important;
    }
    .seat-south .player-hand .tile {
        width: 22px !important;
        height: 30px !important;
        min-width: 22px !important;
        font-size: 13px !important;
        border-radius: 3px !important;
    }
    .seat-south .player-hand .tile .joker-svg {
        width: 18px !important;
        height: auto !important;
    }
    /* FARA lift la hover/selected pe landscape */
    .seat-south .player-hand .tile:hover,
    .seat-south .player-hand .tile.selected,
    .tile:hover,
    .tile.selected {
        transform: none !important;
    }
}
/* === END MOBILE SOUTH HAND 2026-04-19 === */


/* ──────── HOLD-TO-DRAG — TILE LOCK CAND DRAG E ACTIV ────────
   Cand JS-ul activeaza drag-mode (dupa 180ms hold), adauga clasa .drag-active
   pe tile. CSS-ul de mai jos suprima orice pan/scroll pe tile → pointer-ul
   ajunge integral la handler-ul nostru, deci poate trage in ORICE directie
   (sus, jos, stanga, dreapta). Fara asta, touch-action:pan-y fura verticala. */
.tile.drag-active {
    touch-action: none !important;
}


/* ──────── CHROME ANDROID "TOUCH TO SEARCH" KILLSWITCH ────────
   Chrome pe Android afiseaza bara "Atinge pentru a vedea rezultate" cand user-ul
   atinge/scroll-uie text selectabil pe pagina. Asta e feature-ul "Contextual
   Search" care ofera cautare Google pentru cuvantul atins. In app de joc e
   nedorit si intrusiv.

   Fix: blocam selectia de text pe toata zona de joc (nu doar .tile — ca sa
   acopere si numerele din meld-uri, labels Suita/Terta, info-bar, action-bar
   etc.). Doar input-urile si textarea raman selectabile (pentru chat). */
.game-play-view,
.game-play-view *,
.player-hand,
.player-hand *,
.table-melds,
.table-melds *,
.arrangement-zone,
.arrangement-zone *,
.etalare-zone,
.etalare-zone *,
.player-info-bar,
.player-info-bar *,
.action-bar,
.action-bar *,
.tile,
.tile *,
.table-meld-group,
.table-meld-group * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}
/* Input-urile de chat/name raman selectabile — user trebuie sa poata edita text */
.game-play-view input,
.game-play-view textarea,
.game-play-view [contenteditable="true"] {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}


/* ================================================================================================
   PLAYER STATION PREMIUM v2 — Profesional spatial console UI/UX
   2026-04-21 — Dashboard casino pentru user sud (seat-south).
   ══════════════════════════════════════════════════════════════════════════════════════════════
   Module organizate in info-bar:
     A. Identity  — avatar + frame gold + status dot + nume display serif
     B. Timer HUD — donut conic-gradient tricolor (verde/galben/rosu) + valoare center
     C. Stats     — glass cards puncte + piese
     D. Hints     — etalare hint + penalty counter
     E. Sort dock — 3 iconite grupate
   Plus:
     F. Action bar v2 — casino chip buttons premium (blue/gold/teal/red + ATU special)
     G. Turn indicator — halo gold pulsatoriu pe intreaga statie cand e randul user-ului
   Constraint: stativul lemn .hand-scroll-wrapper + tiles RAMAN neatinse (autentic).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ═══ 0. Wrapper seat-south — Premium Console Frame (ambient) ═══ */
.seat-south {
    position: relative;
}

/* ═══ 1. Info-bar v2 — Flex layout 5 module cu separatoare aurii ═══ */
.seat-south .player-info-bar.player-station-v2 {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 10px 14px !important;
    background:
        /* Gloss top subtle */
        linear-gradient(180deg,
            rgba(255, 245, 220, 0.55) 0%,
            rgba(235, 200, 145, 0.4) 50%,
            rgba(210, 170, 110, 0.3) 100%) !important;
    border-top: 1px solid rgba(255, 215, 0, 0.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 240, 0.55),
        inset 0 -1px 0 rgba(100, 60, 25, 0.18),
        0 -2px 6px rgba(0, 0, 0, 0.12) !important;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Separatoare verticale gold hairline intre module */
.seat-south .player-info-bar.player-station-v2 .player-module + .player-module {
    position: relative;
}
.seat-south .player-info-bar.player-station-v2 .player-module + .player-module::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(184, 134, 11, 0.35) 25%,
        rgba(255, 215, 0, 0.5) 50%,
        rgba(184, 134, 11, 0.35) 75%,
        transparent 100%);
    pointer-events: none;
}

/* Fiecare modul — flex row, breathing padding */
.seat-south .player-info-bar.player-station-v2 .player-module {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
}

/* ═══ A. Module Identity — avatar + status dot + nume serif ═══ */
.seat-south .player-module-identity {
    gap: 10px !important;
}
.seat-south .identity-avatar-wrap {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}
.seat-south .identity-avatar-wrap .seat-avatar,
.seat-south .identity-avatar-wrap #avatarSouth {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid transparent !important;
    background:
        linear-gradient(#2a1f10, #2a1f10) padding-box,
        linear-gradient(135deg,
            rgba(255, 235, 150, 1) 0%,
            rgba(255, 215, 0, 1) 30%,
            rgba(184, 134, 11, 1) 65%,
            rgba(120, 85, 20, 1) 100%) border-box !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.45),
        0 0 12px rgba(255, 215, 0, 0.22) !important;
    flex-shrink: 0;
}
/* Avatar fallback cand nu are src */
.seat-south .identity-avatar-wrap .seat-avatar[hidden],
.seat-south .identity-avatar-wrap #avatarSouth[hidden] {
    display: block !important;
    background:
        radial-gradient(circle at 50% 40%, #d89248 0%, #8b5220 100%) padding-box,
        linear-gradient(135deg,
            rgba(255, 235, 150, 1) 0%,
            rgba(184, 134, 11, 1) 65%) border-box !important;
}
.seat-south .identity-avatar-wrap .seat-avatar[hidden]::after {
    content: '♠';
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: rgba(255, 215, 0, 0.7);
    height: 100%;
}
.seat-south .identity-status-dot {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        #6ee779 0%,
        #22c55e 60%,
        #15803d 100%);
    border: 2px solid #2a1f10;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
    animation: identityStatusPulse 2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes identityStatusPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.7); }
    50%      { box-shadow: 0 0 12px rgba(34, 197, 94, 1), 0 0 18px rgba(34, 197, 94, 0.4); }
}

.seat-south .identity-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}
.seat-south .identity-text .player-name-label {
    font-family: 'Cinzel', 'Playfair Display', 'Georgia', serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase;
    color: #2d1a08 !important;
    text-shadow:
        0 1px 0 rgba(255, 245, 220, 0.7),
        0 -1px 0 rgba(80, 45, 15, 0.3) !important;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}
.seat-south .identity-status-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(34, 100, 50, 0.85);
    font-style: italic;
    line-height: 1;
}

/* ═══ B. Module Timer — Donut Radial HUD cu tricolor ═══ */
.seat-south .player-module-timer {
    justify-content: center;
}
.seat-south .player-module-timer .player-timer.timer-donut,
.seat-south .player-module-timer #timerPlayer {
    --timer-progress: 100%;
    --timer-progress-deg: 360deg;
    --timer-color: #22c55e;
    --timer-color-glow: rgba(34, 197, 94, 0.45);
    visibility: visible !important;  /* donut vizibil mereu (override base hidden) */
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 50% 50%,
        rgba(10, 20, 8, 0.95) 0%,
        rgba(20, 40, 16, 0.9) 55%,
        rgba(30, 60, 22, 0.85) 100%) !important;
    border: 2px solid rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 0, 0.15),
        inset 0 2px 6px rgba(0, 0, 0, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 0 14px var(--timer-color-glow) !important;
    transition: box-shadow 0.4s ease;
}
/* Ring progresiv — conic-gradient folosind --timer-progress */
.seat-south .player-module-timer .timer-donut-ring {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        var(--timer-color) 0deg,
        var(--timer-color) var(--timer-progress-deg, 360deg),
        rgba(0, 0, 0, 0.4) var(--timer-progress-deg, 360deg),
        rgba(0, 0, 0, 0.4) 360deg);
    -webkit-mask:
        radial-gradient(circle at 50% 50%,
            transparent 0,
            transparent 20px,
            #000 20px,
            #000 27px,
            transparent 27px);
    mask:
        radial-gradient(circle at 50% 50%,
            transparent 0,
            transparent 20px,
            #000 20px,
            #000 27px,
            transparent 27px);
    pointer-events: none;
    transition: --timer-progress-deg 0.9s linear;
}
.seat-south .player-module-timer .timer-donut-center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}
.seat-south .player-module-timer .timer-donut-value,
.seat-south .player-module-timer #timerPlayerValue {
    font-family: 'Courier New', 'Roboto Mono', monospace !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 6px var(--timer-color-glow) !important;
    letter-spacing: -0.5px;
    line-height: 1;
}
.seat-south .player-module-timer .timer-donut-label {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: rgba(255, 215, 0, 0.75);
    text-transform: uppercase;
    margin-top: 1px;
}
/* Timer icon legacy — ascuns in donut mode */
.seat-south .player-module-timer .timer-legacy-icon {
    display: none !important;
}
/* Tricolor states — JS adauga turn-timer-warning sub 10s */
.seat-south .player-module-timer .player-timer.timer-warn,
.seat-south .player-module-timer .player-timer[data-timer-state="warn"] {
    --timer-color: #f59e0b;
    --timer-color-glow: rgba(245, 158, 11, 0.55);
}
.seat-south .player-module-timer .player-timer.turn-timer-warning,
.seat-south .player-module-timer .player-timer.timer-critical {
    --timer-color: #ef4444;
    --timer-color-glow: rgba(239, 68, 68, 0.7);
    animation: timerCriticalPulse 1s ease-in-out infinite;
}
@keyframes timerCriticalPulse {
    0%, 100% { transform: scale(1); box-shadow:
        inset 0 0 0 1px rgba(239, 68, 68, 0.35),
        inset 0 2px 6px rgba(0, 0, 0, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 0 14px rgba(239, 68, 68, 0.5); }
    50%      { transform: scale(1.05); box-shadow:
        inset 0 0 0 1px rgba(239, 68, 68, 0.6),
        inset 0 2px 6px rgba(0, 0, 0, 0.55),
        0 4px 12px rgba(0, 0, 0, 0.55),
        0 0 22px rgba(239, 68, 68, 0.85); }
}

/* Override old timer ::after progress bar (we use donut ring now) */
.seat-south .player-module-timer .player-timer::after {
    display: none !important;
}

/* ═══ C. Module Stats — Glass Cards puncte + piese ═══ */
.seat-south .player-module-stats {
    gap: 6px !important;
}
.seat-south .stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 50px;
    padding: 4px 10px;
    border-radius: 8px;
    background:
        linear-gradient(180deg,
            rgba(10, 20, 10, 0.55) 0%,
            rgba(10, 20, 10, 0.75) 100%);
    border: 1px solid rgba(255, 215, 0, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 200, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.seat-south .stat-card .stat-label {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 215, 0, 0.8);
    line-height: 1;
}
/* Override old player-points + player-tiles-count inside stat cards */
.seat-south .stat-card .player-points,
.seat-south .stat-card #pointsSouth {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-family: 'Courier New', 'Roboto Mono', monospace !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #fff4c2 !important;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.7),
        0 0 8px rgba(255, 215, 0, 0.4) !important;
    line-height: 1;
}
.seat-south .stat-card .player-tiles-count,
.seat-south .stat-card #playerTilesCount {
    min-width: unset !important;
    height: unset !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-family: 'Courier New', 'Roboto Mono', monospace !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #fff4c2 !important;
    box-shadow: none !important;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.7),
        0 0 8px rgba(255, 215, 0, 0.4) !important;
    line-height: 1;
}

/* ═══ D. Module Hints — etalare + penalty stack ═══ */
.seat-south .player-module-hints {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    justify-content: center;
}
.seat-south .player-module-hints .etalare-hint {
    font-size: 20px !important;
    filter: drop-shadow(0 0 6px rgba(255, 220, 80, 0.85)) !important;
    line-height: 1;
}
.seat-south .player-module-hints .player-hand-penalty {
    padding: 2px 8px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* ═══ E. Module Sort — Dock compact aurit ═══ */
.seat-south .player-module-sort {
    align-self: center;
}
.seat-south .player-module-sort .sort-buttons {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background:
        linear-gradient(180deg,
            rgba(10, 20, 10, 0.5) 0%,
            rgba(10, 20, 10, 0.7) 100%);
    border: 1px solid rgba(255, 215, 0, 0.25);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 200, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.3);
}
.seat-south .player-module-sort .sort-btn {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: rgba(255, 215, 0, 0.7) !important;
    transition: all 0.18s ease;
    cursor: pointer;
}
.seat-south .player-module-sort .sort-btn .material-symbols-rounded {
    font-size: 17px !important;
    line-height: 1;
}
.seat-south .player-module-sort .sort-btn:hover {
    background: linear-gradient(180deg,
        rgba(255, 215, 0, 0.2) 0%,
        rgba(184, 134, 11, 0.15) 100%) !important;
    border-color: rgba(255, 215, 0, 0.5) !important;
    color: #fff4c2 !important;
    transform: scale(1.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 200, 0.2),
        0 2px 6px rgba(255, 215, 0, 0.3);
}
.seat-south .player-module-sort .sort-btn.active {
    background: linear-gradient(180deg,
        rgba(255, 215, 0, 0.35) 0%,
        rgba(184, 134, 11, 0.25) 100%) !important;
    border-color: rgba(255, 215, 0, 0.7) !important;
    color: #fff !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 245, 200, 0.25) !important;
}

/* ═══ F. Action Bar v2 — Casino Chip Buttons Premium ═══ */
.action-bar.action-bar-v2 {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Base chip button — 3D casino chip */
.action-btn-game.chip-btn {
    position: relative;
    display: inline-flex !important;
    flex-direction: row;
    align-items: center !important;
    justify-content: center;
    gap: 8px !important;
    min-width: 118px;
    padding: 10px 18px 10px 14px !important;
    border: 2px solid rgba(0, 0, 0, 0.5) !important;
    border-radius: 28px !important;
    font-family: 'Inter', 'Segoe UI', -apple-system, sans-serif;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.25s ease;
    overflow: hidden;
    background-clip: padding-box;
}
.action-btn-game.chip-btn .material-symbols-rounded {
    font-size: 18px !important;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.action-btn-game.chip-btn .chip-label {
    letter-spacing: 1.2px;
}
.action-btn-game.chip-btn .chip-shortcut {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.85);
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
.action-btn-game.chip-btn:hover:not(:disabled) .chip-shortcut {
    opacity: 1;
}
/* Chip bevel — top gloss + bottom shadow */
.action-btn-game.chip-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(255, 255, 255, 0.1) 20%,
            transparent 45%,
            rgba(0, 0, 0, 0.15) 80%,
            rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
    border-radius: inherit;
}
/* Chip inner hairline */
.action-btn-game.chip-btn::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

/* Chip colors: blue */
.action-btn-game.chip-btn.chip-blue {
    background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 3px 8px rgba(30, 64, 175, 0.45),
        0 1px 3px rgba(0, 0, 0, 0.45) !important;
}
.action-btn-game.chip-btn.chip-blue:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    filter: brightness(1.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 6px 16px rgba(30, 64, 175, 0.6),
        0 0 18px rgba(59, 130, 246, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(147, 197, 253, 0.55) !important;
}

/* Chip colors: gold (ETALEAZA — MAIN ACTION) */
.action-btn-game.chip-btn.chip-gold {
    background: linear-gradient(180deg, #fde047 0%, #ca8a04 100%) !important;
    color: #1a0b03 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 220, 0.5) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 220, 0.55),
        inset 0 -2px 4px rgba(120, 80, 10, 0.45),
        0 3px 10px rgba(234, 179, 8, 0.5),
        0 0 16px rgba(255, 215, 0, 0.35),
        0 1px 3px rgba(0, 0, 0, 0.4) !important;
}
.action-btn-game.chip-btn.chip-gold .material-symbols-rounded {
    filter: drop-shadow(0 1px 1px rgba(255, 255, 220, 0.6)) !important;
}
.action-btn-game.chip-btn.chip-gold:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    filter: brightness(1.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 240, 0.7),
        inset 0 -2px 4px rgba(120, 80, 10, 0.5),
        0 6px 20px rgba(234, 179, 8, 0.7),
        0 0 28px rgba(255, 215, 0, 0.65),
        0 2px 4px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 180, 0.7) !important;
}
/* Gold is main action — subtle idle pulse when enabled */
.action-btn-game.chip-btn.chip-gold:not(:disabled) {
    animation: chipGoldIdlePulse 2.5s ease-in-out infinite;
}
@keyframes chipGoldIdlePulse {
    0%, 100% { box-shadow:
        inset 0 1px 0 rgba(255, 255, 220, 0.55),
        inset 0 -2px 4px rgba(120, 80, 10, 0.45),
        0 3px 10px rgba(234, 179, 8, 0.5),
        0 0 16px rgba(255, 215, 0, 0.35),
        0 1px 3px rgba(0, 0, 0, 0.4); }
    50%      { box-shadow:
        inset 0 1px 0 rgba(255, 255, 240, 0.6),
        inset 0 -2px 4px rgba(120, 80, 10, 0.45),
        0 3px 14px rgba(234, 179, 8, 0.6),
        0 0 24px rgba(255, 215, 0, 0.55),
        0 1px 3px rgba(0, 0, 0, 0.4); }
}

/* Chip colors: teal */
.action-btn-game.chip-btn.chip-teal {
    background: linear-gradient(180deg, #14b8a6 0%, #0f766e 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 3px 8px rgba(15, 118, 110, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.45) !important;
}
.action-btn-game.chip-btn.chip-teal:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    filter: brightness(1.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 6px 16px rgba(15, 118, 110, 0.6),
        0 0 18px rgba(45, 212, 191, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(153, 246, 228, 0.55) !important;
}

/* Chip colors: red */
.action-btn-game.chip-btn.chip-red {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 3px 8px rgba(185, 28, 28, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.45) !important;
}
.action-btn-game.chip-btn.chip-red:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    filter: brightness(1.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 6px 16px rgba(185, 28, 28, 0.6),
        0 0 18px rgba(248, 113, 113, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(252, 165, 165, 0.55) !important;
}

/* Chip colors: ATU special — gold pulsatoriu dramatic */
.action-btn-game.chip-btn.chip-atu {
    background:
        linear-gradient(135deg,
            #fde047 0%,
            #fbbf24 30%,
            #f59e0b 70%,
            #d97706 100%) !important;
    color: #1a0b03 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 220, 0.6) !important;
    border-color: rgba(120, 60, 0, 0.8) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 220, 0.6),
        inset 0 -2px 4px rgba(120, 80, 10, 0.45),
        0 3px 12px rgba(245, 158, 11, 0.6),
        0 0 24px rgba(255, 215, 0, 0.55),
        0 1px 3px rgba(0, 0, 0, 0.5) !important;
    animation: chipAtuPulse 1.2s ease-in-out infinite;
}
.action-btn-game.chip-btn.chip-atu:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.05) !important;
    filter: brightness(1.15);
}
@keyframes chipAtuPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); filter: brightness(1.1); }
}

/* Active pressed state — all chips */
.action-btn-game.chip-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.97) !important;
    filter: brightness(0.95);
}

/* Disabled — desaturated + flat */
.action-btn-game.chip-btn:disabled {
    opacity: 0.42 !important;
    filter: saturate(0.35) !important;
    cursor: not-allowed;
    animation: none !important;
}
.action-btn-game.chip-btn:disabled::before {
    opacity: 0.5;
}

/* ═══ G. Turn indicator — halo gold pe intreaga statie cand e randul user-ului ═══ */
.seat-south .player-area.active-turn ~ .action-bar.action-bar-v2,
body.my-turn .action-bar.action-bar-v2 {
    position: relative;
}
.seat-south .player-area.active-turn .player-info-bar.player-station-v2 {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 240, 0.65),
        inset 0 -1px 0 rgba(100, 60, 25, 0.18),
        0 -2px 10px rgba(255, 215, 0, 0.35) !important;
    animation: stationActiveTurnGlow 2s ease-in-out infinite;
}
@keyframes stationActiveTurnGlow {
    0%, 100% {
        background:
            linear-gradient(180deg,
                rgba(255, 245, 220, 0.55) 0%,
                rgba(235, 200, 145, 0.4) 50%,
                rgba(210, 170, 110, 0.3) 100%) !important;
    }
    50% {
        background:
            linear-gradient(180deg,
                rgba(255, 250, 210, 0.7) 0%,
                rgba(250, 215, 150, 0.5) 50%,
                rgba(230, 185, 115, 0.4) 100%) !important;
    }
}

/* ═══ H. Responsive — breakpoints pe toate module ═══ */
@media (max-width: 767px) {
    .seat-south .player-info-bar.player-station-v2 {
        gap: 6px;
        padding: 6px 8px !important;
    }
    .seat-south .player-info-bar.player-station-v2 .player-module + .player-module::before {
        display: none; /* gold hairlines disabled pe mobile (prea aglomerat) */
    }
    .seat-south .identity-avatar-wrap,
    .seat-south .identity-avatar-wrap .seat-avatar,
    .seat-south .identity-avatar-wrap #avatarSouth {
        width: 32px !important;
        height: 32px !important;
    }
    .seat-south .identity-text .player-name-label {
        font-size: 12px !important;
        max-width: 90px;
        letter-spacing: 0.6px !important;
    }
    .seat-south .identity-status-label {
        display: none;
    }
    .seat-south .player-module-timer .player-timer.timer-donut,
    .seat-south .player-module-timer #timerPlayer {
        width: 42px !important;
        height: 42px !important;
    }
    .seat-south .player-module-timer .timer-donut-value,
    .seat-south .player-module-timer #timerPlayerValue {
        font-size: 12px !important;
    }
    .seat-south .player-module-timer .timer-donut-label {
        font-size: 6px;
    }
    .seat-south .stat-card {
        padding: 3px 7px;
        min-width: 38px;
    }
    .seat-south .stat-card .stat-label {
        font-size: 7px;
    }
    .seat-south .stat-card .player-points,
    .seat-south .stat-card #pointsSouth,
    .seat-south .stat-card .player-tiles-count,
    .seat-south .stat-card #playerTilesCount {
        font-size: 13px !important;
    }
    .seat-south .player-module-sort .sort-btn {
        width: 26px !important;
        height: 26px !important;
    }
    .seat-south .player-module-sort .sort-btn .material-symbols-rounded {
        font-size: 15px !important;
    }
    .seat-south .player-module-hints .etalare-hint {
        font-size: 16px !important;
    }
    .seat-south .player-module-hints .player-hand-penalty {
        font-size: 9px !important;
        padding: 1px 6px !important;
    }

    /* Action bar v2 — mobile compact */
    .action-bar.action-bar-v2 {
        gap: 5px;
        padding: 6px 8px;
    }
    .action-btn-game.chip-btn {
        min-width: 0 !important;
        padding: 8px 10px !important;
        font-size: 10px !important;
        gap: 5px !important;
    }
    .action-btn-game.chip-btn .chip-shortcut {
        display: none !important;
    }
    .action-btn-game.chip-btn .material-symbols-rounded {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    /* Very narrow — chip labels hidden, only icons */
    .action-btn-game.chip-btn .chip-label {
        display: none !important;
    }
    .action-btn-game.chip-btn {
        min-width: 40px !important;
        padding: 8px 10px !important;
        border-radius: 50% !important;
        width: 44px;
        height: 44px;
    }
    .seat-south .player-module-hints .player-hand-penalty {
        display: none; /* prea compact — penalty ascuns sub 480px */
    }
}

/* ═══ LARGE DESKTOP ≥ 1200px — spatial luxury ═══ */
@media (min-width: 1200px) {
    .seat-south .player-info-bar.player-station-v2 {
        gap: 14px;
        padding: 12px 18px !important;
    }
    .seat-south .identity-text .player-name-label {
        font-size: 16px !important;
        letter-spacing: 1.5px !important;
        max-width: 160px;
    }
    .action-btn-game.chip-btn {
        min-width: 128px;
        padding: 12px 22px 12px 18px !important;
        font-size: 13px !important;
    }
    .action-btn-game.chip-btn .material-symbols-rounded {
        font-size: 20px !important;
    }
}


/* ================================================================================================
   2026-04-24: DESKTOP SOUTH BAR — POLISH PASS (10 fixes)
   Scope: desktop only (>=1024px). Target .player-station-v2 + .action-bar-v2.
   Fixes: name truncation, timer scale, icon-only buttons styling, action hierarchy,
          ATU star clipping, Spectator badge palette, spacing rhythm, "pct" label,
          stat-card unification, group separators.
================================================================================================ */
@media (min-width: 1024px) {

    /* (1) Numele player-ului — fara trunchiere, lasa loc pentru 16+ caractere */
    body.game-active .seat-south .player-info-bar.player-station-v2 .identity-text .player-name-label,
    body.mp-game-active .seat-south .player-info-bar.player-station-v2 .identity-text .player-name-label {
        max-width: 180px !important;
        font-size: 13px !important;
        letter-spacing: 0.3px !important;
        text-overflow: clip !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    /* (2) Timer donut — 54px intrinsec (mask raze 20/27), dar il scalez vizual
       cu transform:scale ca mask-ul se pastreaza proportional. Bara ramane mica. */
    body.game-active .seat-south .player-module-timer .player-timer.timer-donut,
    body.mp-game-active .seat-south .player-module-timer .player-timer.timer-donut {
        transform: scale(0.72) !important;
        transform-origin: center center !important;
        margin: -8px -10px !important;  /* compenseaza spatiul ocupat de scala */
    }

    /* (3) Sort-btn icon group — background + border consistent cu restul barei */
    body.game-active .seat-south .player-info-bar .sort-buttons,
    body.mp-game-active .seat-south .player-info-bar .sort-buttons {
        background: linear-gradient(180deg, rgba(30, 20, 10, 0.65), rgba(20, 14, 8, 0.8)) !important;
        border: 1px solid rgba(212, 175, 55, 0.35) !important;
        border-radius: 10px !important;
        padding: 2px !important;
        box-shadow: inset 0 1px 0 rgba(255, 215, 100, 0.08), 0 2px 4px rgba(0, 0, 0, 0.35) !important;
    }
    body.game-active .seat-south .player-info-bar .sort-buttons .sort-btn,
    body.mp-game-active .seat-south .player-info-bar .sort-buttons .sort-btn {
        background: transparent !important;
        border: none !important;
        color: rgba(232, 200, 130, 0.85) !important;
        padding: 5px 9px !important;
        transition: background 0.18s ease, color 0.18s ease !important;
    }
    body.game-active .seat-south .player-info-bar .sort-buttons .sort-btn:hover,
    body.mp-game-active .seat-south .player-info-bar .sort-buttons .sort-btn:hover {
        background: rgba(212, 175, 55, 0.18) !important;
        color: #fde68a !important;
    }
    body.game-active .seat-south .player-info-bar .sort-buttons .sort-btn.active,
    body.mp-game-active .seat-south .player-info-bar .sort-buttons .sort-btn.active {
        background: linear-gradient(180deg, #d4af37, #a8831e) !important;
        color: #1a0f06 !important;
        box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.5) !important;
    }

    /* (4) Butoane actiune — ierarhie clara: disabled sters, activ aprins auriu */
    .action-bar.action-bar-v2 .action-btn-game.chip-btn:disabled,
    .action-bar.action-bar-v2 .action-btn-game.chip-btn[disabled] {
        opacity: 0.38 !important;
        filter: grayscale(0.55) saturate(0.6) !important;
        transform: none !important;
    }
    .action-bar.action-bar-v2 .action-btn-game.chip-btn:not(:disabled) {
        opacity: 1 !important;
        filter: none !important;
    }
    .action-bar.action-bar-v2 .action-btn-game.chip-btn:not(:disabled).chip-gold,
    .action-bar.action-bar-v2 .action-btn-game.chip-btn:not(:disabled).btn-primary-action {
        box-shadow:
            0 0 0 2px rgba(255, 215, 100, 0.35),
            0 0 18px rgba(255, 200, 80, 0.55),
            0 4px 10px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 240, 180, 0.35) !important;
        animation: southActiveGlow 2.2s ease-in-out infinite !important;
    }
    @keyframes southActiveGlow {
        0%, 100% { box-shadow: 0 0 0 2px rgba(255, 215, 100, 0.35), 0 0 14px rgba(255, 200, 80, 0.45), 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 240, 180, 0.35); }
        50%      { box-shadow: 0 0 0 2px rgba(255, 215, 100, 0.55), 0 0 22px rgba(255, 200, 80, 0.7),  0 4px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 240, 180, 0.5); }
    }

    /* (5) ATU star + ultimele butoane — nu clipa la marginea dreapta.
       Bara merged are `overflow:hidden` + height 40px la 4968. Anuland clip-ul
       si lasand butoanele sa respire. Target explicit merged-actions mode. */
    .action-bar.action-bar-v2 {
        overflow: visible !important;
        padding-right: 14px !important;
    }
    .action-bar.action-bar-v2 .chip-btn.chip-atu {
        margin-right: 4px !important;
    }
    body.game-active .seat-south .player-info-bar,
    body.mp-game-active .seat-south .player-info-bar,
    body.game-active .seat-south .player-info-bar.merged-actions,
    body.mp-game-active .seat-south .player-info-bar.merged-actions {
        overflow: visible !important;
        padding-right: 14px !important;
    }
    /* Parent area — nu taia nimic din bara. */
    body.game-active .seat-south .player-area,
    body.mp-game-active .seat-south .player-area,
    body.game-active .seat-south,
    body.mp-game-active .seat-south {
        overflow: visible !important;
    }
    /* Action-in-infobar (butoanele clonate in bara merged) — primeste aceeasi
       ierarhie vizuala ca chip-btn: disabled stins, primar auriu pulsant. */
    body.game-active .seat-south .player-info-bar.merged-actions .action-in-infobar:disabled,
    body.mp-game-active .seat-south .player-info-bar.merged-actions .action-in-infobar:disabled,
    body.game-active .seat-south .player-info-bar.merged-actions .action-in-infobar[disabled],
    body.mp-game-active .seat-south .player-info-bar.merged-actions .action-in-infobar[disabled] {
        opacity: 0.4 !important;
        filter: grayscale(0.55) saturate(0.6) !important;
    }
    body.game-active .seat-south .player-info-bar.merged-actions .action-in-infobar.btn-primary-action:not(:disabled),
    body.mp-game-active .seat-south .player-info-bar.merged-actions .action-in-infobar.btn-primary-action:not(:disabled) {
        box-shadow:
            0 0 0 2px rgba(255, 215, 100, 0.4),
            0 0 16px rgba(255, 200, 80, 0.6),
            inset 0 1px 0 rgba(255, 240, 180, 0.4) !important;
        animation: southActiveGlow 2.2s ease-in-out infinite !important;
    }

    /* (6) Spectator badge — roșu burgundy desaturat, aliniat cu paleta aurie/lemn */
    body.spectator-mode .player-info-bar::before {
        background: linear-gradient(135deg, #8b2635 0%, #5c1a22 100%) !important;
        border: 1px solid rgba(212, 175, 55, 0.4) !important;
        color: #fde8c7 !important;
        letter-spacing: 0.6px !important;
        font-size: 10px !important;
        padding: 4px 11px !important;
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(255, 215, 100, 0.18) !important;
    }

    /* (7) Spacing rhythm + INALTIME bara — taia jos (screenshot user).
       Rule-ul de la ~4968 clampeaza la 40px. Desktop are loc — crestem la 54px. */
    body.game-active .seat-south .player-info-bar,
    body.mp-game-active .seat-south .player-info-bar,
    body.game-active .seat-south .player-info-bar.merged-actions,
    body.mp-game-active .seat-south .player-info-bar.merged-actions {
        height: 44px !important;
        max-height: 44px !important;
        min-height: 44px !important;
        gap: 6px !important;
        padding: 2px 12px 2px 8px !important;
        align-items: center !important;
    }
    body.game-active .seat-south .player-info-bar .player-module,
    body.mp-game-active .seat-south .player-info-bar .player-module {
        max-height: 40px !important;
        gap: 4px !important;
        overflow: visible !important;
    }
    .seat-south .player-info-bar.player-station-v2 {
        gap: 10px !important;
    }
    .seat-south .player-info-bar.player-station-v2 .player-module {
        gap: 6px !important;
    }

    /* (8) "0 pct" penalty label — stil uniform cu PUNCTE/PIESE (uppercase, tracking) */
    .seat-south .player-module-hints .player-hand-penalty {
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.8px !important;
        text-transform: uppercase !important;
        color: rgba(232, 200, 130, 0.85) !important;
        background: rgba(30, 20, 10, 0.55) !important;
        border: 1px solid rgba(212, 175, 55, 0.25) !important;
        border-radius: 6px !important;
        padding: 3px 7px !important;
    }

    /* (9) Stat cards (PUNCTE/PIESE) — label sus + valoare jos, compact, incap in 40px */
    .seat-south .player-module-stats .stat-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        padding: 2px 7px !important;
        background: linear-gradient(180deg, rgba(40, 28, 14, 0.7), rgba(25, 17, 9, 0.85)) !important;
        border: 1px solid rgba(212, 175, 55, 0.35) !important;
        border-radius: 6px !important;
        box-shadow: inset 0 1px 0 rgba(255, 215, 100, 0.1), 0 1px 3px rgba(0, 0, 0, 0.35) !important;
        min-width: 46px !important;
        line-height: 1 !important;
    }
    .seat-south .player-module-stats .stat-card .stat-label {
        font-size: 8px !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        color: rgba(232, 200, 130, 0.75) !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }
    .seat-south .player-module-stats .stat-card .player-points,
    .seat-south .player-module-stats .stat-card .player-tiles-count {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #fde68a !important;
        line-height: 1.1 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    }

    /* (10) Separator vertical — pastreaza position:absolute mostenit (linia ~20454),
       doar inaltime mai mica pt. bara 44px. */
    .seat-south .player-info-bar.player-station-v2 .player-module + .player-module::before {
        top: 15% !important;
        bottom: 15% !important;
        background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.45) 50%, transparent) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   2026-04-24: WAITING ROOM — LUXURY POLISH (port din waiting-room-demo.html v3)
   Override vizual CSS-only peste `.mw-*` existente. ZERO modificari pe JS/DOM, ZERO event handler
   rupt. Pastreaza kick/ban/ready/leave/tabs/copy-invite functionale. Responsive neatins (regulile
   @media existente de la linia ~17253 raman active).
════════════════════════════════════════════════════════════════════════════════════════════════ */
.mw-room-takeover {
    /* Double-layer background + gold hairline */
    background:
        linear-gradient(180deg, rgba(44, 30, 16, 0.85) 0%, rgba(28, 20, 12, 0.72) 100%) !important;
    border: 1px solid rgba(212, 160, 64, 0.22) !important;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 220, 150, 0.09),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5) !important;
    position: relative;
}
.mw-room-takeover::before {
    content: '';
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(90deg, transparent, #d4a040 50%, transparent);
    opacity: 0.6;
}

/* ─── Title bar: elegant, cu sigiliu auriu ─── */
.mw-title-bar {
    padding: 12px 16px !important;
    background:
        linear-gradient(180deg, rgba(212, 160, 64, 0.06) 0%, transparent 90%) !important;
    border-bottom: 1px solid rgba(212, 160, 64, 0.12) !important;
}
.mw-title-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: radial-gradient(circle at 30% 25%, #fde8b8 0%, #e8c070 35%, #b8863a 75%, #5a4320 100%);
    color: #2a1a08;
    font-size: 18px !important;
    flex-shrink: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 200, 0.55),
        inset 0 -1px 2px rgba(0, 0, 0, 0.25),
        0 3px 8px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.35);
    position: relative;
}
.mw-title-icon::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 50%);
    pointer-events: none;
}
.mw-title-text {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #f7eacf !important;
    letter-spacing: 0.3px !important;
}

.mw-title-timer {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
    font-variant-numeric: tabular-nums;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(212, 160, 64, 0.22) !important;
    color: #d4bd8f !important;
    letter-spacing: 0.4px;
    padding: 4px 10px !important;
    font-size: 0.74rem !important;
}

.mw-title-action-btn {
    width: 34px !important;
    height: 34px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(212, 160, 64, 0.14) !important;
    color: #a08868 !important;
    border-radius: 9px !important;
    transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.mw-title-action-btn:hover {
    background: rgba(212, 160, 64, 0.1) !important;
    color: #e8c070 !important;
    border-color: rgba(212, 160, 64, 0.35) !important;
    transform: translateY(-1px);
}
.mw-title-action-btn.mw-title-leave:hover {
    background: rgba(196, 100, 100, 0.1) !important;
    color: #c46464 !important;
    border-color: rgba(196, 100, 100, 0.35) !important;
}

/* ─── Tabs: aurii, subtile ─── */
.mw-tab-bar {
    padding: 6px 8px !important;
    background: rgba(0, 0, 0, 0.28) !important;
    border-bottom: 1px solid rgba(212, 160, 64, 0.1) !important;
}
.mw-tab {
    color: #a08868 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.3px;
    font-weight: 700 !important;
    padding: 9px 6px !important;
}
.mw-tab:hover {
    background: rgba(212, 160, 64, 0.07) !important;
    color: #d4bd8f !important;
}
.mw-tab.active {
    background: linear-gradient(180deg, rgba(212, 160, 64, 0.14) 0%, rgba(212, 160, 64, 0.04) 100%) !important;
    color: #e8c070 !important;
}
.mw-tab.active .material-symbols-rounded { color: #e8c070 !important; }
.mw-tab.active::after {
    background: linear-gradient(90deg, transparent, #d4a040, transparent) !important;
    height: 2px !important;
    left: 15% !important; right: 15% !important;
}

.mw-tab-panel { padding: 14px !important; }

/* ─── Player cards: ierarhie, hairline gold, typography ─── */
.mw-player-cards { gap: 8px !important; }
.mw-player-card {
    padding: 12px 14px !important;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.35) 100%) !important;
    border: 1px solid rgba(212, 160, 64, 0.1) !important;
    border-radius: 10px !important;
    gap: 12px !important;
    transition: border-color 0.22s ease, transform 0.22s ease, background 0.22s ease !important;
    /* opreste animation-delay cascading cand intra un jucator nou — subtil */
}
.mw-player-card:not(.mw-card-empty):hover {
    border-color: rgba(212, 160, 64, 0.18) !important;
    transform: translateX(2px);
}
.mw-player-card::before {
    width: 3px !important;
    border-radius: 0 3px 3px 0 !important;
    background: rgba(212, 160, 64, 0.22) !important;
    top: 10px !important; bottom: 10px !important;
}
.mw-player-card.mw-card-me {
    background:
        linear-gradient(90deg, rgba(212, 160, 64, 0.1) 0%, rgba(212, 160, 64, 0.02) 60%, transparent 100%) !important;
    border-color: rgba(212, 160, 64, 0.28) !important;
}
.mw-player-card.mw-card-me::before {
    background: linear-gradient(180deg, #e8c070, #b8863a) !important;
    box-shadow: 0 0 10px rgba(212, 160, 64, 0.5);
}
.mw-player-card.mw-card-ready {
    border-color: rgba(127, 181, 116, 0.28) !important;
}
.mw-player-card.mw-card-ready::before { background: #7fb574 !important; }
.mw-player-card.mw-card-empty {
    border-style: dashed !important;
    border-color: rgba(212, 160, 64, 0.14) !important;
    background: transparent !important;
    opacity: 0.7 !important;
}

.mw-card-avatar {
    width: 44px !important;
    height: 44px !important;
    background: linear-gradient(135deg, #8a6428, #5a4320) !important;
    border: 1.5px solid rgba(212, 160, 64, 0.35) !important;
    color: #fde8b8 !important;
    font-weight: 700 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 150, 0.2),
        0 2px 5px rgba(0, 0, 0, 0.4) !important;
}
.mw-card-avatar.empty {
    background: transparent !important;
    border: 1.5px dashed rgba(212, 160, 64, 0.22) !important;
}
.mw-card-avatar.empty .material-symbols-rounded { color: #6d5a42 !important; }
.mw-card-status-dot {
    border: 2px solid #16100a !important;
    width: 11px !important; height: 11px !important;
}
.mw-card-status-dot.ready {
    background: #7fb574 !important;
    box-shadow: 0 0 6px rgba(127, 181, 116, 0.5) !important;
}
.mw-card-status-dot.waiting {
    background: #e4a94a !important;
}

.mw-card-name {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #f7eacf !important;
    letter-spacing: 0.1px;
}
.mw-card-name.empty {
    color: #6d5a42 !important;
    font-weight: 500 !important;
}
.mw-card-rating {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem !important;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 160, 64, 0.12);
    width: fit-content;
}
.mw-rating-good { color: #7fb574 !important; }
.mw-rating-warn { color: #e4a94a !important; }
.mw-rating-bad  { color: #c46464 !important; }

.mw-card-ready-badge {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
}
.mw-card-ready-badge.ready {
    background: rgba(127, 181, 116, 0.15) !important;
    color: #7fb574 !important;
    border: 1px solid rgba(127, 181, 116, 0.3);
}
.mw-card-ready-badge.waiting {
    background: rgba(228, 169, 74, 0.12) !important;
    color: #e4a94a !important;
    border: 1px solid rgba(228, 169, 74, 0.3);
}

.mw-host-btn {
    background: rgba(196, 100, 100, 0.12) !important;
    color: #c46464 !important;
    border: 1px solid rgba(196, 100, 100, 0.25) !important;
    border-radius: 7px !important;
    width: 28px !important; height: 28px !important;
    transition: all 0.18s ease !important;
}
.mw-host-btn:hover {
    background: rgba(196, 100, 100, 0.22) !important;
    border-color: rgba(196, 100, 100, 0.45) !important;
    transform: scale(1.08) !important;
}
.mw-host-btn.ban {
    background: rgba(156, 39, 176, 0.12) !important;
    color: #ba68c8 !important;
    border-color: rgba(156, 39, 176, 0.25) !important;
}

/* ─── Ready button: gold primary ─── */
.mw-ready-btn {
    font-family: inherit !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.5px !important;
    border-radius: 10px !important;
    min-height: 46px !important;
    font-weight: 700 !important;
    position: relative;
    overflow: hidden;
}
.mw-ready-btn.not-ready {
    background: linear-gradient(180deg, #f3d184 0%, #d4a040 55%, #b8863a 100%) !important;
    color: #2e2210 !important;
    border: 1px solid #b8863a !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 210, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(212, 160, 64, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
.mw-ready-btn.not-ready::after {
    content: '';
    position: absolute;
    inset: 1px 1px auto 1px;
    height: 45%;
    border-radius: 9px 9px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
    pointer-events: none;
}
.mw-ready-btn.not-ready:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 210, 0.65),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 6px 18px rgba(212, 160, 64, 0.45),
        0 1px 3px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-1px);
}
.mw-ready-btn.is-ready {
    background: transparent !important;
    border: 1px solid rgba(196, 100, 100, 0.3) !important;
    color: #c46464 !important;
}
.mw-ready-btn.is-ready:hover {
    background: rgba(196, 100, 100, 0.08) !important;
    border-color: rgba(196, 100, 100, 0.5) !important;
}

/* ─── Info card: key-value cu hairline dashed ─── */
.mw-info-card {
    background: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(212, 160, 64, 0.12) !important;
    border-radius: 10px !important;
    padding: 14px !important;
}
.mw-info-row {
    padding: 9px 2px !important;
    border-bottom: 1px dashed rgba(212, 160, 64, 0.1) !important;
}
.mw-info-label {
    font-size: 0.68rem !important;
    color: #a08868 !important;
    letter-spacing: 1.2px !important;
    font-weight: 700 !important;
}
.mw-info-value {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem !important;
    color: #f7eacf !important;
    letter-spacing: 0.2px !important;
}

/* ─── Countdown / alerts ─── */
.mw-countdown-card {
    background: rgba(228, 169, 74, 0.08) !important;
    border: 1px solid rgba(228, 169, 74, 0.2) !important;
    color: #e4a94a !important;
    border-radius: 10px !important;
    font-size: 0.78rem !important;
    padding: 11px 14px !important;
}
.mw-countdown-card strong {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    color: #f3d184 !important;
    font-weight: 600 !important;
    margin-left: 3px;
}

/* ─── Starting pulse: calm, fara rotate agresiv ─── */
.mw-starting-pulse {
    background: linear-gradient(135deg, rgba(127, 181, 116, 0.14), rgba(127, 181, 116, 0.06)) !important;
    border: 1px solid rgba(127, 181, 116, 0.22) !important;
    color: #7fb574 !important;
    border-radius: 10px !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.3px;
}

/* ─── Spectators ─── */
.mw-spec-label {
    font-size: 0.7rem !important;
    color: #a08868 !important;
    letter-spacing: 0.6px;
    font-weight: 700 !important;
    text-transform: uppercase;
}
.mw-spec-tag {
    background: rgba(0, 0, 0, 0.25) !important;
    color: #a08868 !important;
    border: 1px solid rgba(212, 160, 64, 0.1) !important;
    padding: 3px 9px !important;
    font-size: 0.7rem !important;
    border-radius: 999px !important;
}
.mw-spec-tag.me {
    background: rgba(212, 160, 64, 0.1) !important;
    color: #e8c070 !important;
    border-color: rgba(212, 160, 64, 0.25) !important;
}
.mw-spectator-notice {
    background: rgba(127, 165, 196, 0.08) !important;
    border: 1px solid rgba(127, 165, 196, 0.18) !important;
    color: #7fa5c4 !important;
}

/* ─── Alert cards ─── */
.mw-alert-card.warn {
    background: rgba(228, 169, 74, 0.1) !important;
    border: 1px solid rgba(228, 169, 74, 0.2) !important;
    color: #e4a94a !important;
}
.mw-alert-card.success {
    background: rgba(127, 181, 116, 0.1) !important;
    border: 1px solid rgba(127, 181, 116, 0.2) !important;
    color: #7fb574 !important;
}

/* ─── Ambient dice: reduce la practic invizibil (user s-a plans de oboseala) ─── */
.mw-float-card {
    opacity: 0.02 !important;
    animation-duration: 45s !important;
}

/* ─── Scrollbar panel ─── */
.mw-tab-panel::-webkit-scrollbar-thumb {
    background: rgba(212, 160, 64, 0.22) !important;
    border-radius: 3px !important;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
    .mw-float-card,
    .mw-waiting-pulse,
    .mw-card-status-dot.waiting,
    .mw-starting-pulse,
    .mw-starting-pulse .material-symbols-rounded,
    .mw-title-timer.danger,
    .mw-countdown-card.danger {
        animation: none !important;
    }
}

/* ─── Responsive override: pe mobile (≤480px) pastram compact dar aspect premium ─── */
@media (max-width: 480px) {
    .mw-title-icon {
        width: 28px !important; height: 28px !important;
        font-size: 15px !important;
    }
    .mw-title-text { font-size: 0.82rem !important; }
    .mw-title-action-btn {
        width: 30px !important; height: 30px !important;
    }
    .mw-player-card {
        padding: 10px 12px !important;
        gap: 10px !important;
    }
    .mw-card-avatar {
        width: 38px !important; height: 38px !important;
    }
    .mw-card-name { font-size: 0.85rem !important; }
    .mw-ready-btn { min-height: 42px !important; font-size: 0.82rem !important; }
    .mw-info-card { padding: 10px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   END WAITING ROOM LUXURY POLISH
════════════════════════════════════════════════════════════════════════════════════════════════ */


/* ================================================================================================
   END OF WHIST PRO CSS
================================================================================================ */

/* ================================================================================================
   WAITING ROOM — LUXURY v3 PORT (.mw-lx-*)
================================================================================================ */
/* Fonturile sunt deja incarcate local via /assets/vendor/google-fonts/ (Inter) + /assets/vendor/material-symbols/ */
/* Full Material Symbols pt waiting room luxury (subset-ul whist nu are toate icon-urile noi) */
@font-face {
    font-family: 'Material Symbols Rounded Full';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('/assets/vendor/material-symbols/material-symbols-rounded.woff2') format('woff2');
}
.mw-lx-shell .material-symbols-rounded,
.mw-lx-root .material-symbols-rounded,
.mp-modal-v2 .material-symbols-rounded {
    font-family: 'Material Symbols Rounded Full', 'Material Symbols Rounded' !important;
}

/* Stage — paint the whole waiting view like the demo body */
body.room-waiting #roomWaitingView:has(.mw-lx-root),
body.room-waiting .room-waiting-view:has(.mw-lx-root),
body.room-waiting .game-area:has(.mw-lx-root) {
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(212,160,64,0.1), transparent 70%),
        radial-gradient(ellipse 60% 40% at 15% 100%, rgba(139,90,43,0.08), transparent 65%),
        radial-gradient(ellipse 60% 40% at 85% 100%, rgba(100,60,30,0.06), transparent 65%),
        linear-gradient(180deg, #0a0705 0%, #0d0806 40%, #060403 100%) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.mw-lx-root {
    --lx-g50:#fff6db; --lx-g100:#fde8b8; --lx-g200:#f3d184; --lx-g300:#e8c070;
    --lx-g400:#d4a040; --lx-g500:#b8863a; --lx-g600:#8a6428; --lx-g700:#5a4320; --lx-g800:#2e2210;
    --lx-t1:#f7eacf; --lx-t2:#d4bd8f; --lx-t3:#a08868; --lx-t4:#6d5a42; --lx-t5:#453626;
    --lx-ok:#7fb574; --lx-ok-bg:rgba(127,181,116,0.12);
    --lx-warn:#e4a94a; --lx-warn-bg:rgba(228,169,74,0.12);
    --lx-bad:#c46464;
    --lx-h1:rgba(212,160,64,0.08); --lx-h2:rgba(212,160,64,0.16);
    --lx-h3:rgba(212,160,64,0.28); --lx-h4:rgba(212,160,64,0.44);
    --lx-surface:rgba(28,20,12,0.72); --lx-surface-hi:rgba(44,30,16,0.85);
    --lx-ease:cubic-bezier(0.16,1,0.3,1);
    --lx-f-serif: Georgia, 'Times New Roman', serif;
    --lx-f-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    width:100%; max-width:1040px; margin:0 auto; padding:24px 16px;
    color:var(--lx-t1); font-size:14px; line-height:1.55;
    animation: mwLxEnter 0.6s var(--lx-ease) both;
}
@keyframes mwLxEnter { from{opacity:0;transform:translateY(12px) scale(0.99);} to{opacity:1;transform:none;} }
.mw-lx-root * { box-sizing:border-box; }

.mw-lx-room {
    display:grid;
    grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
    background: linear-gradient(180deg, var(--lx-surface-hi) 0%, var(--lx-surface) 100%);
    backdrop-filter: blur(24px) saturate(1.15);
    -webkit-backdrop-filter: blur(24px) saturate(1.15);
    border:1px solid var(--lx-h2); border-radius:24px;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7), 0 8px 20px rgba(0,0,0,0.5),
                inset 0 1px 0 rgba(255,220,150,0.08), inset 0 -1px 0 rgba(0,0,0,0.6);
    overflow:hidden; position:relative; isolation:isolate;
}
.mw-lx-room::before, .mw-lx-room::after {
    content:''; position:absolute; left:15%; right:15%; height:1px; pointer-events:none; z-index:2;
}
.mw-lx-room::before { top:0; background:linear-gradient(90deg, transparent, var(--lx-g400) 50%, transparent); opacity:0.7; }
.mw-lx-room::after  { bottom:0; background:linear-gradient(90deg, transparent, var(--lx-g500) 50%, transparent); opacity:0.3; }

.mw-lx-main  { display:flex; flex-direction:column; border-right:1px solid var(--lx-h1); min-width:0; }
.mw-lx-aside { display:flex; flex-direction:column; background:linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.28)); min-width:0; }

.mw-lx-header { position:relative; padding:26px 30px 22px; border-bottom:1px solid var(--lx-h1);
    background:linear-gradient(180deg, rgba(212,160,64,0.05), transparent 80%); }
.mw-lx-head-top { display:flex; align-items:flex-start; gap:18px; }
.mw-lx-seal {
    width:60px; height:60px; flex-shrink:0; border-radius:14px; position:relative;
    background: radial-gradient(circle at 30% 25%, var(--lx-g100) 0%, var(--lx-g300) 35%, var(--lx-g500) 75%, var(--lx-g700) 100%);
    display:flex; align-items:center; justify-content:center; color:#2a1a08;
    box-shadow: inset 0 1px 0 rgba(255,240,200,0.6), inset 0 -2px 3px rgba(0,0,0,0.25),
        0 6px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.5), 0 0 0 3px rgba(212,160,64,0.15);
}
.mw-lx-seal::before { content:''; position:absolute; inset:3px; border-radius:11px; border:1px solid rgba(255,240,200,0.22); }
.mw-lx-seal::after  { content:''; position:absolute; top:4px; left:4px; right:4px; height:45%; border-radius:10px 10px 50% 50%;
    background:linear-gradient(180deg, rgba(255,255,255,0.28), transparent); }
.mw-lx-seal .material-symbols-rounded { font-size:30px; font-weight:500; position:relative; z-index:1; }

.mw-lx-title-block { flex:1; min-width:0; }
.mw-lx-name {
    font-family: var(--lx-f-serif); font-size:28px; font-weight:600; color:var(--lx-g100);
    letter-spacing:0.3px; line-height:1.1; display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0;
}
.mw-lx-vis {
    display:inline-flex; align-items:center; gap:4px; font-family:inherit; font-size:10px;
    font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--lx-t3);
    padding:3px 8px; background:rgba(0,0,0,0.3); border:1px solid var(--lx-h2); border-radius:999px;
}
.mw-lx-vis .material-symbols-rounded { font-size:12px; }
.mw-lx-sub { margin-top:6px; font-size:12.5px; color:var(--lx-t3);
    display:flex; align-items:center; gap:12px; flex-wrap:wrap; letter-spacing:0.2px; }
.mw-lx-sub-chunk { display:inline-flex; align-items:center; gap:5px; }
.mw-lx-sub-chunk .material-symbols-rounded { font-size:13px; color:var(--lx-g500); opacity:0.8; }
.mw-lx-sub-chunk b { color:var(--lx-t2); font-weight:600; }
.mw-lx-dot-sep { width:3px; height:3px; border-radius:50%; background:var(--lx-t5); }
.mw-lx-room-id {
    font-family: var(--lx-f-mono); font-variant-numeric:tabular-nums; color:var(--lx-g300);
    font-weight:500; letter-spacing:0.6px; font-size:11.5px; padding:2px 8px;
    background:rgba(212,160,64,0.08); border:1px solid var(--lx-h2); border-radius:4px;
}
.mw-lx-actions { display:flex; gap:6px; flex-shrink:0; }
.mw-lx-ibtn {
    width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.02); border:1px solid var(--lx-h1); border-radius:10px;
    color:var(--lx-t3); cursor:pointer; transition:all 0.2s ease; font-family:inherit;
}
.mw-lx-ibtn:hover { background:rgba(212,160,64,0.1); color:var(--lx-g200); border-color:var(--lx-h3);
    transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,0.3); }
.mw-lx-ibtn.danger:hover { background:rgba(196,100,100,0.1); color:var(--lx-bad); border-color:rgba(196,100,100,0.35); }
.mw-lx-ibtn .material-symbols-rounded { font-size:19px; }

.mw-lx-ornament { display:flex; align-items:center; gap:12px; margin:20px 0 4px; opacity:0.7; }
.mw-lx-ornament .line { flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--lx-h3), transparent); }
.mw-lx-ornament .mark { color:var(--lx-g400); font-size:10px; letter-spacing:3px; }

.mw-lx-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--lx-h1); border-top:1px solid var(--lx-h1); border-bottom:1px solid var(--lx-h1); }
.mw-lx-stat { padding:14px 18px; background:linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.35));
    display:flex; flex-direction:column; gap:4px; min-width:0; }
.mw-lx-st-label { font-size:9.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
    color:var(--lx-t4); display:flex; align-items:center; gap:5px; }
.mw-lx-st-label .material-symbols-rounded { font-size:12px; color:var(--lx-g500); opacity:0.9; }
.mw-lx-st-value { font-family:var(--lx-f-mono); font-variant-numeric:tabular-nums; font-size:17px;
    font-weight:600; color:var(--lx-g100); letter-spacing:0.3px; display:flex; align-items:baseline; gap:3px; }
.mw-lx-st-value.accent { color:var(--lx-g200); }
.mw-lx-st-value .unit { font-size:10px; color:var(--lx-t3); font-weight:500; letter-spacing:0.5px; text-transform:uppercase; }

.mw-lx-status { padding:20px 30px 16px; display:flex; align-items:center; gap:14px; }
.mw-lx-status-icon { width:32px; height:32px; border-radius:50%; flex-shrink:0;
    background:radial-gradient(circle at 35% 30%, var(--lx-warn) 0%, #a06a18 70%, #4d3008 100%);
    display:flex; align-items:center; justify-content:center; color:#1a0f03;
    box-shadow: inset 0 1px 0 rgba(255,230,170,0.4), 0 0 0 4px rgba(228,169,74,0.1), 0 2px 6px rgba(0,0,0,0.4); }
.mw-lx-status-icon .material-symbols-rounded { font-size:17px; font-weight:700; }
.mw-lx-status-body { flex:1; min-width:0; }
.mw-lx-status-primary { font-size:14px; font-weight:600; color:var(--lx-t1); letter-spacing:0.1px; }
.mw-lx-status-primary em { color:var(--lx-g200); font-style:normal; font-weight:700; }
.mw-lx-status-secondary { font-size:11.5px; color:var(--lx-t3); margin-top:2px; font-feature-settings:'tnum'; }
.mw-lx-status-secondary .mono { font-family:var(--lx-f-mono); font-size:10.5px; color:var(--lx-t2);
    padding:1px 5px; background:rgba(212,160,64,0.07); border-radius:3px; margin:0 1px; }
.mw-lx-countdown { display:flex; flex-direction:column; align-items:flex-end;
    font-variant-numeric:tabular-nums; flex-shrink:0; }
.mw-lx-cd-label { font-size:9px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--lx-t4); }
.mw-lx-cd-time { font-family:var(--lx-f-mono); font-size:22px; font-weight:500; color:var(--lx-g200);
    letter-spacing:1px; line-height:1.1; }

.mw-lx-rail { height:2px; margin:0 30px; background:rgba(0,0,0,0.5); border-radius:1px; position:relative; overflow:hidden; }
.mw-lx-rail-fill { position:absolute; inset:0 auto 0 0; width:50%;
    background:linear-gradient(90deg, var(--lx-g500), var(--lx-g300) 80%, var(--lx-g100));
    border-radius:1px; box-shadow:0 0 10px rgba(212,160,64,0.6); transition:width 0.7s var(--lx-ease); }
.mw-lx-rail-fill::after { content:''; position:absolute; right:-2px; top:-3px; width:7px; height:7px;
    border-radius:50%; background:var(--lx-g100); box-shadow:0 0 10px var(--lx-g200); }

.mw-lx-alerts { padding:10px 24px 0; display:flex; flex-direction:column; gap:8px; }

.mw-lx-seats { padding:16px 18px 22px; display:flex; flex-direction:column; gap:6px; }
.mw-lx-seat { position:relative; display:grid;
    grid-template-columns:32px 48px 1fr auto auto; align-items:center; gap:14px; padding:12px 14px;
    background:linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.34));
    border:1px solid var(--lx-h1); border-radius:10px; transition:all 0.22s ease; min-height:70px; }
.mw-lx-seat:not(.mw-card-empty):hover { border-color:var(--lx-h2); transform:translateX(2px); }
.mw-lx-seat.mw-card-me {
    background:linear-gradient(90deg, rgba(212,160,64,0.12) 0%, rgba(212,160,64,0.02) 50%, transparent 100%);
    border-color:var(--lx-h3);
}
.mw-lx-seat.mw-card-me::before { content:''; position:absolute; left:-1px; top:10px; bottom:10px; width:3px;
    border-radius:0 3px 3px 0; background:linear-gradient(180deg, var(--lx-g200), var(--lx-g500));
    box-shadow:0 0 10px rgba(212,160,64,0.5); }
.mw-lx-seat.mw-card-empty { border-style:dashed; border-color:var(--lx-h1); background:transparent;
    min-height:58px; grid-template-columns:32px 48px 1fr auto; }

.mw-lx-idx { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.mw-lx-idx .num { font-family:var(--lx-f-mono); font-size:11px; font-weight:700; color:var(--lx-t3); letter-spacing:0.5px; line-height:1; }
.mw-lx-idx .suit { font-size:11px; color:var(--lx-g500); line-height:1; opacity:0.6; }

.mw-lx-avatar { position:relative; width:44px; height:44px; border-radius:50%; flex-shrink:0; }
.mw-lx-av-inner { width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--lx-g500), var(--lx-g700));
    color:var(--lx-g50); font-size:16px; font-weight:700; letter-spacing:0.5px;
    border:1.5px solid rgba(212,160,64,0.4);
    box-shadow:inset 0 1px 0 rgba(255,220,150,0.25), 0 2px 5px rgba(0,0,0,0.4); position:relative; }
.mw-lx-av-inner::after { content:''; position:absolute; inset:2px; border-radius:50%;
    background:linear-gradient(180deg, rgba(255,255,255,0.15), transparent 50%); pointer-events:none; }
.mw-lx-av-inner img {
    width: 100% !important; height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block;
    border: none !important;
}
.mw-lx-avatar.host::before { content:''; position:absolute; inset:-3px; border-radius:50%;
    background:conic-gradient(from 90deg, var(--lx-g300), var(--lx-g500), var(--lx-g200), var(--lx-g400), var(--lx-g300));
    z-index:-1; opacity:0.6; }
.mw-lx-seat.mw-card-empty .mw-lx-av-inner { background:transparent; border-style:dashed;
    border-color:var(--lx-h2); color:var(--lx-t5); }
.mw-lx-seat.mw-card-empty .mw-lx-av-inner .material-symbols-rounded { font-size:20px; }
.mw-lx-av-status { position:absolute; bottom:0; right:0; width:11px; height:11px; border-radius:50%;
    border:2px solid #16100a; background:var(--lx-warn); }
.mw-lx-av-status.on { background:var(--lx-ok); box-shadow:0 0 6px rgba(127,181,116,0.5); }

.mw-lx-body { min-width:0; display:flex; flex-direction:column; gap:3px; }
.mw-lx-head { display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap; }
.mw-lx-uname { font-size:14px; font-weight:700; color:var(--lx-t1); letter-spacing:0.1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mw-lx-uname.empty { color:var(--lx-t4); font-weight:500; font-style:italic; }
.mw-lx-tag { display:inline-flex; align-items:center; font-size:9px; font-weight:800;
    letter-spacing:0.8px; text-transform:uppercase; padding:2px 6px; border-radius:3px; flex-shrink:0; gap:3px; }
.mw-lx-tag.you { background:linear-gradient(180deg, var(--lx-g200), var(--lx-g500)); color:var(--lx-g800); }
.mw-lx-tag.host { background:rgba(212,160,64,0.15); color:var(--lx-g200); border:1px solid var(--lx-h3); }
.mw-lx-tag.admin { background:rgba(196,100,100,0.15); color:#e89898; border:1px solid rgba(196,100,100,0.35); }
.mw-lx-tag .material-symbols-rounded { font-size:11px; }
.mw-lx-meta { display:flex; align-items:center; gap:9px; font-size:11px; color:var(--lx-t3);
    font-feature-settings:'tnum'; flex-wrap:wrap; }
.mw-lx-meta.empty { color:var(--lx-t5); font-size:10.5px; font-style:italic; }
.mw-lx-mitem { display:inline-flex; align-items:center; gap:4px; }
.mw-lx-mitem .material-symbols-rounded { font-size:12px; color:var(--lx-g500); opacity:0.85; }
.mw-lx-mitem b { color:var(--lx-t2); font-weight:600; font-family:var(--lx-f-mono); font-size:10.5px; }
.mw-lx-mitem b.good { color:var(--lx-ok); }
.mw-lx-mitem b.bad  { color:var(--lx-bad); }
.mw-lx-unit { font-size: 9px; color: var(--lx-t4); text-transform: uppercase; letter-spacing: 0.5px; margin-left: 1px; font-weight: 500; }
.mw-lx-mitem[data-stat="points"] b { color: var(--lx-g200); }

.mw-lx-host-actions { display:flex; gap:4px; align-items:center; }
.mw-lx-ready { font-size:10px; font-weight:700; padding:5px 10px; border-radius:5px;
    letter-spacing:0.8px; text-transform:uppercase; white-space:nowrap;
    display:inline-flex; align-items:center; gap:4px; }
.mw-lx-ready.ok   { color:var(--lx-ok);   background:var(--lx-ok-bg);   border:1px solid rgba(127,181,116,0.28); }
.mw-lx-ready.wait { color:var(--lx-warn); background:var(--lx-warn-bg); border:1px solid rgba(228,169,74,0.28); }
.mw-lx-ready .material-symbols-rounded { font-size:12px; }

.mw-lx-invite { font-size:10px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase;
    padding:5px 10px; color:var(--lx-t3); background:transparent;
    border:1px dashed var(--lx-h2); border-radius:5px; cursor:pointer; transition:all 0.2s ease;
    font-family:inherit; display:inline-flex; align-items:center; gap:4px; }
.mw-lx-invite:hover { color:var(--lx-g200); border-color:var(--lx-h3); border-style:solid;
    background:rgba(212,160,64,0.05); }
.mw-lx-invite .material-symbols-rounded { font-size:12px; }

.mw-lx-aside-section { padding:20px 24px; border-bottom:1px solid var(--lx-h1); }
.mw-lx-aside-section:last-child { border-bottom:none; flex:1; display:flex; flex-direction:column; }
.mw-lx-sect-title { font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--lx-t3); margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.mw-lx-sect-title .left { display:flex; align-items:center; gap:7px; }
.mw-lx-sect-title .material-symbols-rounded { font-size:14px; color:var(--lx-g400); }
.mw-lx-sect-count { font-size:9px; background:rgba(212,160,64,0.12); color:var(--lx-g200);
    padding:2px 7px; border-radius:999px; border:1px solid var(--lx-h2); letter-spacing:0.5px; }

.mw-lx-kv { display:flex; justify-content:space-between; align-items:center;
    padding:7px 0; border-bottom:1px dashed var(--lx-h1); }
.mw-lx-kv:last-child { border-bottom:none; }
.mw-lx-kv .k { font-size:11.5px; color:var(--lx-t3); display:flex; align-items:center; gap:6px; }
.mw-lx-kv .k .material-symbols-rounded { font-size:13px; color:var(--lx-g500); opacity:0.85; }
.mw-lx-kv .v { font-family:var(--lx-f-mono); font-size:11.5px; color:var(--lx-t1);
    font-weight:500; font-feature-settings:'tnum'; letter-spacing:0.3px; }
.mw-lx-kv .v.accent { color:var(--lx-g200); }

.mw-lx-share { display:flex; align-items:center; gap:10px; padding:12px 14px;
    background:linear-gradient(135deg, rgba(212,160,64,0.09), rgba(212,160,64,0.02));
    border:1px solid var(--lx-h2); border-radius:10px; margin-top:4px; }
.mw-lx-share-url { flex:1; min-width:0; font-family:var(--lx-f-mono); font-size:12px;
    color:var(--lx-g200); letter-spacing:0.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mw-lx-share-copy { flex-shrink:0; padding:6px 10px; font-size:10.5px; font-weight:700;
    letter-spacing:0.5px; color:var(--lx-g100); background:rgba(212,160,64,0.15);
    border:1px solid var(--lx-h3); border-radius:6px; cursor:pointer; transition:all 0.2s ease;
    display:inline-flex; align-items:center; gap:4px; font-family:inherit; }
.mw-lx-share-copy:hover { background:rgba(212,160,64,0.3); }
.mw-lx-share-copy .material-symbols-rounded { font-size:13px; }

.mw-lx-spectators { display:flex; align-items:center; gap:6px; padding:10px 12px;
    background:rgba(0,0,0,0.25); border:1px solid var(--lx-h1); border-radius:6px;
    margin-top:4px; flex-wrap:wrap; }
.mw-lx-spec-tag { display:inline-flex; align-items:center; gap:4px; font-size:11px;
    color:var(--lx-t2); padding:4px 8px; background:rgba(212,160,64,0.06);
    border:1px solid var(--lx-h1); border-radius:999px; }
.mw-lx-spec-tag.me { color:var(--lx-g200); border-color:var(--lx-h3); background:rgba(212,160,64,0.12); }

.mw-lx-footer { grid-column:1 / -1; padding:18px 30px; display:flex; align-items:center; gap:14px;
    background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55)); border-top:1px solid var(--lx-h1);
    flex-wrap:wrap; }
.mw-lx-hint { flex:1; min-width:200px; font-size:11.5px; color:var(--lx-t3);
    display:flex; align-items:center; gap:8px; letter-spacing:0.2px; }
.mw-lx-hint .material-symbols-rounded { font-size:15px; color:var(--lx-g400); }
.mw-lx-hint b { color:var(--lx-t2); font-weight:700; }

.mw-lx-btn { padding:11px 18px; font-family:inherit; font-size:13px; font-weight:700;
    letter-spacing:0.5px; border-radius:10px; cursor:pointer; border:1px solid transparent;
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    transition:all 0.2s ease; white-space:nowrap; position:relative; }
.mw-lx-btn:active { transform:translateY(1px); }
.mw-lx-btn .material-symbols-rounded { font-size:17px; }
.mw-lx-btn.ghost { background:transparent; color:var(--lx-t2); border-color:var(--lx-h2); }
.mw-lx-btn.ghost:hover { color:var(--lx-t1); background:rgba(255,255,255,0.03); border-color:var(--lx-h3); }
.mw-lx-btn.primary {
    background:linear-gradient(180deg, var(--lx-g200) 0%, var(--lx-g400) 55%, var(--lx-g500) 100%);
    color:var(--lx-g800); border-color:var(--lx-g500);
    box-shadow:inset 0 1px 0 rgba(255,245,210,0.55), inset 0 -1px 0 rgba(0,0,0,0.2),
        0 4px 12px rgba(212,160,64,0.28), 0 1px 3px rgba(0,0,0,0.3);
    min-width:150px;
}
.mw-lx-btn.primary:hover { filter:brightness(1.06); }
.mw-lx-btn.is-disabled,
.mw-lx-btn:disabled,
.mw-lx-btn[disabled] {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.4);
    pointer-events: none;
    box-shadow: none !important;
}
.mw-lx-btn.primary.is-ready {
    background:linear-gradient(180deg, rgba(127,181,116,0.9), rgba(80,140,70,0.95));
    border-color:rgba(80,140,70,0.8); color:#0d1f09;
    box-shadow:inset 0 1px 0 rgba(200,240,180,0.45), 0 4px 12px rgba(127,181,116,0.28);
}

@media (max-width: 860px) {
    .mw-lx-root { padding:12px 8px; }
    .mw-lx-room { grid-template-columns:1fr; border-radius:16px; }
    .mw-lx-main { border-right:none; border-bottom:1px solid var(--lx-h1); }
    .mw-lx-header { padding:18px 18px 14px; }
    .mw-lx-name { font-size:22px; }
    .mw-lx-stats { grid-template-columns:repeat(2,1fr); }
    .mw-lx-status { padding:14px 18px 10px; }
    .mw-lx-rail { margin:0 18px; }
    .mw-lx-seats { padding:12px 12px 16px; }
    .mw-lx-seat { grid-template-columns:28px 40px 1fr auto; gap:10px; padding:10px; }
    .mw-lx-seat.mw-card-empty { grid-template-columns:28px 40px 1fr auto; }
    .mw-lx-avatar { width:40px; height:40px; }
    .mw-lx-aside-section { padding:14px 16px; }
    .mw-lx-footer { padding:14px 16px; }
    .mw-lx-btn.primary { min-width:auto; flex:1; }
}

/* Override the old .mw-room-takeover styles when it is the luxury root */
.room-waiting-view > .mw-room-takeover.mw-lx-root,
body.room-waiting .mw-room-takeover.mw-lx-root,
.mw-room-takeover.mw-lx-root {
    display: block !important;
    flex: initial !important;
    width: 100% !important;
    max-width: 1040px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 24px 16px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    animation: mwLxEnter 0.6s var(--lx-ease) both !important;
}
.room-waiting-view:has(> .mw-lx-root),
body.room-waiting #roomWaitingView:has(.mw-lx-root) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    align-items: flex-start !important;
}
.mw-lx-root .mw-lx-room { animation: none !important; }
/* Neutralize old mw-* inner rules that might leak in */
.mw-lx-root .mw-player-card { all: unset; display: revert; }
.mw-lx-root .mw-player-card.mw-lx-seat {
    /* re-apply seat styles */
    position: relative; display: grid;
    grid-template-columns: 32px 48px 1fr auto auto; align-items: center;
    gap: 14px; padding: 12px 14px;
    background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.34));
    border: 1px solid var(--lx-h1); border-radius: 10px;
    transition: all 0.22s ease; min-height: 70px;
    animation: none;
}
.mw-lx-root .mw-player-card.mw-lx-seat::before { content: none; }
.mw-lx-root .mw-player-card.mw-lx-seat.mw-card-me {
    background: linear-gradient(90deg, rgba(212,160,64,0.12) 0%, rgba(212,160,64,0.02) 50%, transparent 100%);
    border-color: var(--lx-h3);
}
.mw-lx-root .mw-player-card.mw-lx-seat.mw-card-me::before {
    content:''; position:absolute; left:-1px; top:10px; bottom:10px; width:3px;
    border-radius:0 3px 3px 0;
    background:linear-gradient(180deg, var(--lx-g200), var(--lx-g500));
    box-shadow:0 0 10px rgba(212,160,64,0.5);
    display: block;
}
.mw-lx-root .mw-player-card.mw-lx-seat.mw-card-empty {
    border-style: dashed; border-color: var(--lx-h1);
    background: transparent; min-height: 58px;
    grid-template-columns: 32px 48px 1fr auto;
    opacity: 1;
}
.mw-lx-root .mw-ready-btn { margin-top: 0 !important; min-height: 0 !important; width: auto !important; }


/* ================================================================================================
   WAITING ROOM — LUXURY v3 EXTRAS (breadcrumbs, meta, conn, chat)
================================================================================================ */
.mw-lx-shell {
    width: 100%; max-width: 1040px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 14px;
    padding: 24px 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body.room-waiting .game-area:has(.mw-lx-shell) {
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(212,160,64,0.1), transparent 70%),
        radial-gradient(ellipse 60% 40% at 15% 100%, rgba(139,90,43,0.08), transparent 65%),
        radial-gradient(ellipse 60% 40% at 85% 100%, rgba(100,60,30,0.06), transparent 65%),
        linear-gradient(180deg, #0a0705 0%, #0d0806 40%, #060403 100%) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
}
body.room-waiting #roomWaitingView:has(.mw-lx-shell),
body.room-waiting .room-waiting-view:has(.mw-lx-shell) {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex: initial !important;
    background: transparent !important;
}
/* Parent chain — constrain flex parents so .game-area poate scrolla in interior (nu expanda peste viewport) */
body.room-waiting:has(.mw-lx-shell) { overflow: hidden !important; }
body.room-waiting:has(.mw-lx-shell) main.main-content,
body.room-waiting:has(.mw-lx-shell) .main-container,
body.room-waiting:has(.mw-lx-shell) .content-wrapper {
    overflow: hidden !important;
    min-height: 0 !important;
}
body.room-waiting:has(.mw-lx-shell) .game-canvas {
    min-height: 0 !important;
    flex: 1 1 0% !important;
    overflow: hidden !important;
    height: 100% !important;
    max-height: 100% !important;
}
body.room-waiting:has(.mw-lx-shell) .game-area {
    min-height: 0 !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
body.room-waiting:has(.mw-lx-shell) #roomWaitingView {
    height: auto !important;
    min-height: 0 !important;
    flex: initial !important;
    overflow: visible !important;
}
.mw-lx-shell .mw-lx-root { padding: 0 !important; max-width: none !important; }

/* Breadcrumbs */
.mw-lx-crumbs {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: #a08868;
    letter-spacing: 0.4px; padding-left: 4px;
}
.mw-lx-crumbs a {
    color: #a08868; text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex; align-items: center; gap: 4px;
}
.mw-lx-crumbs a:hover { color: #e8c070; }
.mw-lx-crumbs .material-symbols-rounded { font-size: 14px; opacity: 0.7; }
.mw-lx-crumbs .sep { color: #453626; font-size: 10px; }
.mw-lx-crumbs .current { color: #f3d184; font-weight: 600; }

/* Meta extras: flag, separator, form dots */
.mw-lx-flag { font-size: 13px; flex-shrink: 0; opacity: 0.9; }
.mw-lx-msep { width: 1px; height: 9px; background: rgba(212,160,64,0.08); display: inline-block; }
.mw-lx-form-dots { display: inline-flex; gap: 2px; align-items: center; }
.mw-lx-form-dots span {
    width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.mw-lx-form-dots .w { background: #7fb574; }
.mw-lx-form-dots .l { background: rgba(196,100,100,0.5); }
.mw-lx-form-dots .d { background: #453626; }

/* Connection bars */
.mw-lx-conn {
    display: inline-flex; align-items: flex-end; gap: 2px; height: 12px;
    flex-shrink: 0;
}
.mw-lx-conn span {
    width: 2.5px; background: #7fb574; border-radius: 1px; opacity: 0.9;
    display: block;
}
.mw-lx-conn span:nth-child(1) { height: 35%; }
.mw-lx-conn span:nth-child(2) { height: 55%; }
.mw-lx-conn span:nth-child(3) { height: 78%; }
.mw-lx-conn span:nth-child(4) { height: 100%; }
.mw-lx-conn.mid span:nth-child(4) { background: #453626; }
.mw-lx-conn.low span:nth-child(3), .mw-lx-conn.low span:nth-child(4) { background: #453626; }

/* Reflow seat grid to include conn bars */
.mw-lx-seat {
    grid-template-columns: 32px 48px 1fr auto auto auto !important;
}
.mw-lx-seat.mw-card-empty {
    grid-template-columns: 32px 48px 1fr auto !important;
}
.mw-lx-root .mw-player-card.mw-lx-seat {
    grid-template-columns: 32px 48px 1fr auto auto auto !important;
}
.mw-lx-root .mw-player-card.mw-lx-seat.mw-card-empty {
    grid-template-columns: 32px 48px 1fr auto !important;
}
/* ════════ Desktop — fit in viewport, NO scroll anywhere ════════ */
@media (min-width: 861px) {
    body.room-waiting:has(.mw-lx-shell) .game-area { overflow-y: auto !important; overflow-x: hidden !important; }
    body.room-waiting:has(.mw-lx-shell) .game-area::-webkit-scrollbar { width: 4px; }
    body.room-waiting:has(.mw-lx-shell) .game-area::-webkit-scrollbar-thumb { background: rgba(212,160,64,0.18); border-radius: 2px; }
    body.room-waiting:has(.mw-lx-shell) .game-area .mw-lx-shell {
        padding: 8px 12px !important; gap: 6px !important;
        height: 100% !important; max-height: 100% !important; min-height: 0 !important;
        display: flex !important; flex-direction: column !important;
    }
    .mw-lx-crumbs { flex-shrink: 0; font-size: 10.5px !important; padding: 0 2px !important; }
    .mw-lx-room { flex: 1 1 auto !important; min-height: 0 !important;
        grid-template-rows: 1fr auto !important;
        grid-template-areas: "main aside" "footer footer" !important;
        overflow: hidden !important;
    }
    .mw-lx-main   { grid-area: main;   min-height: 0; overflow: hidden; }
    .mw-lx-aside  { grid-area: aside;  min-height: 0; overflow: hidden; }
    .mw-lx-footer { grid-area: footer; }

    /* Aside scrolls internally daca continutul depaseste spatiul alocat */
    .mw-lx-aside { display: flex !important; flex-direction: column !important; overflow-y: auto !important; }
    .mw-lx-aside::-webkit-scrollbar { width: 4px; }
    .mw-lx-aside::-webkit-scrollbar-thumb { background: rgba(212,160,64,0.18); border-radius: 2px; }

    /* Chat-section bounded — NU se lungeste in jos, log scrolleaza intern */
    .mw-lx-chat-section {
        display: flex !important; flex-direction: column !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: 220px !important;
        overflow: hidden !important;
    }
    .mw-lx-chat-log {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        padding: 2px 0 4px !important;
    }
    .mw-lx-chat-input-row { padding-top: 6px !important; flex-shrink: 0 !important; }
    .mw-lx-chat-input { padding: 6px 10px !important; font-size: 12px !important; }
    .mw-lx-chat-send { width: 34px !important; flex-shrink: 0 !important; }
    .mw-lx-chat-send .material-symbols-rounded { font-size: 16px !important; }

    /* Room-ul ramane bounded, aside-ul scrolleaza interior daca e nevoie */
    .mw-lx-room { overflow: hidden !important; }
    .mw-lx-aside { max-height: 100% !important; }
    /* Main scrolleaza interior daca depaseste (fallback pentru 5-6 seats) */
    .mw-lx-main { overflow-y: auto !important; }
    .mw-lx-main::-webkit-scrollbar { width: 4px; }
    .mw-lx-main::-webkit-scrollbar-thumb { background: rgba(212,160,64,0.18); border-radius: 2px; }

    /* Compact paddings + sizes on desktop */
    .mw-lx-header { padding: 12px 18px 8px !important; }
    .mw-lx-head-top { gap: 12px !important; }
    .mw-lx-seal { width: 42px !important; height: 42px !important; border-radius: 10px !important; }
    .mw-lx-seal .material-symbols-rounded { font-size: 22px !important; }
    .mw-lx-name { font-size: 19px !important; line-height: 1.15 !important; }
    .mw-lx-sub { margin-top: 3px !important; font-size: 11.5px !important; }
    .mw-lx-ibtn { width: 32px !important; height: 32px !important; }
    .mw-lx-ornament { display: none !important; }
    .mw-lx-crumbs { margin-bottom: -4px !important; }

    .mw-lx-stat { padding: 8px 12px !important; }
    .mw-lx-st-label { font-size: 9px !important; }
    .mw-lx-st-value { font-size: 14px !important; }

    .mw-lx-status { padding: 10px 18px 8px !important; }
    .mw-lx-status-icon { width: 28px !important; height: 28px !important; }
    .mw-lx-status-icon .material-symbols-rounded { font-size: 15px !important; }
    .mw-lx-status-primary { font-size: 13px !important; }
    .mw-lx-status-secondary { font-size: 10.5px !important; }
    .mw-lx-cd-time { font-size: 18px !important; }
    .mw-lx-rail { margin: 0 18px !important; }

    .mw-lx-seats { padding: 6px 12px 8px !important; gap: 3px !important; }
    .mw-lx-header { padding: 10px 18px 6px !important; }
    .mw-lx-status { padding: 8px 18px 6px !important; }
    .mw-lx-footer { padding: 8px 18px !important; }
    .mw-lx-seat,
    .mw-lx-root .mw-player-card.mw-lx-seat { min-height: 0 !important; padding: 7px 10px !important; }
    .mw-lx-avatar { width: 38px !important; height: 38px !important; }
    .mw-lx-av-inner { font-size: 14px !important; }
    .mw-lx-uname { font-size: 13px !important; }
    .mw-lx-meta { font-size: 10px !important; gap: 6px !important; }
    .mw-lx-ready { padding: 4px 8px !important; font-size: 9px !important; }

    .mw-lx-aside-section { padding: 10px 14px !important; }
    .mw-lx-sect-title { margin-bottom: 6px !important; font-size: 9.5px !important; }
    .mw-lx-kv { padding: 4px 0 !important; font-size: 11px !important; }
    .mw-lx-kv .k, .mw-lx-kv .v { font-size: 11px !important; }
    .mw-lx-share { padding: 8px 10px !important; margin-top: 2px !important; }
    .mw-lx-share-url { font-size: 11px !important; }

    .mw-lx-footer { padding: 10px 18px !important; }
    .mw-lx-hint { font-size: 11px !important; }
    .mw-lx-btn { padding: 8px 14px !important; font-size: 12px !important; }
    .mw-lx-btn.primary { min-width: 130px !important; }
}

/* ════════ Responsive ════════ */
@media (max-width: 1024px) {
    .mw-lx-shell { padding: 16px 12px; max-width: 100%; }
    .mw-lx-crumbs { font-size: 10.5px; }
}
@media (max-width: 860px) {
    .mw-lx-shell { padding: 12px 8px; gap: 10px; }
    .mw-lx-crumbs { padding-left: 2px; }
    .mw-lx-crumbs a span:not(.material-symbols-rounded) { display: none; }
    .mw-lx-crumbs .current { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .mw-lx-room { grid-template-columns: 1fr !important; border-radius: 14px !important; }
    .mw-lx-main { border-right: none !important; border-bottom: 1px solid rgba(212,160,64,0.08) !important; }

    .mw-lx-header { padding: 16px 14px 12px !important; }
    .mw-lx-head-top { gap: 12px; }
    .mw-lx-seal { width: 46px; height: 46px; border-radius: 10px; }
    .mw-lx-seal .material-symbols-rounded { font-size: 22px; }
    .mw-lx-name { font-size: 20px; gap: 8px; }
    .mw-lx-vis { font-size: 9px; padding: 2px 6px; }
    .mw-lx-sub { font-size: 11px; gap: 8px; }
    .mw-lx-actions { flex-wrap: wrap; }
    .mw-lx-ibtn { width: 34px; height: 34px; }
    .mw-lx-ornament { margin: 12px 0 2px; }

    .mw-lx-stats { grid-template-columns: repeat(2, 1fr) !important; }
    .mw-lx-stat { padding: 10px 12px; }
    .mw-lx-st-value { font-size: 15px; }

    .mw-lx-status { padding: 14px 14px 10px; gap: 10px; flex-wrap: wrap; }
    .mw-lx-status-primary { font-size: 13px; }
    .mw-lx-status-secondary { font-size: 10.5px; }
    .mw-lx-cd-time { font-size: 18px; }
    .mw-lx-rail { margin: 0 14px !important; }

    .mw-lx-seats { padding: 10px 10px 16px; gap: 5px; }
    .mw-lx-seat,
    .mw-lx-root .mw-player-card.mw-lx-seat {
        grid-template-columns: 26px 38px 1fr auto !important;
        gap: 8px !important; padding: 9px 10px !important; min-height: 0 !important;
    }
    .mw-lx-seat.mw-card-empty,
    .mw-lx-root .mw-player-card.mw-lx-seat.mw-card-empty {
        grid-template-columns: 26px 38px 1fr auto !important;
    }
    .mw-lx-idx { gap: 1px; }
    .mw-lx-idx .num { font-size: 10px; }
    .mw-lx-idx .suit { font-size: 9px; }
    .mw-lx-avatar { width: 38px; height: 38px; }
    .mw-lx-av-inner { font-size: 14px; }
    .mw-lx-uname { font-size: 13px; }
    .mw-lx-meta { gap: 6px; font-size: 10px; flex-wrap: wrap; }
    .mw-lx-conn { display: none !important; }
    .mw-lx-host-actions { grid-row: 2; grid-column: 3 / -1; justify-content: flex-end; }
    .mw-lx-ready { font-size: 9px; padding: 4px 7px; }
    .mw-lx-ready .material-symbols-rounded { font-size: 10px; }
    .mw-lx-tag { font-size: 8.5px; padding: 1px 5px; }

    .mw-lx-aside-section { padding: 14px 14px !important; }
    .mw-lx-kv { padding: 5px 0; font-size: 11px; }
    .mw-lx-kv .k, .mw-lx-kv .v { font-size: 11px; }
    .mw-lx-share { padding: 10px 12px; gap: 8px; }
    .mw-lx-share-url { font-size: 11px; }
    .mw-lx-share-copy { padding: 5px 8px; font-size: 9.5px; }

    .mw-lx-chat-log { max-height: 180px; min-height: 80px; }
    .mw-lx-chat-input { padding: 8px 12px; font-size: 12px; }
    .mw-lx-chat-send { width: 38px; }

    .mw-lx-footer { padding: 12px 14px !important; gap: 8px; flex-wrap: wrap !important; }
    .mw-lx-hint { font-size: 11px; min-width: 0 !important; order: -1; flex-basis: 100%; }
    .mw-lx-btn { padding: 9px 14px; font-size: 12px; flex: 1; min-width: 0 !important; }
    .mw-lx-btn.primary { min-width: 0 !important; }
}
@media (max-width: 560px) {
    .mw-lx-shell { padding: 8px 6px; gap: 8px; }
    .mw-lx-room { border-radius: 10px !important; }
    .mw-lx-header { padding: 12px 10px 10px !important; position: relative; }
    .mw-lx-head-top { gap: 10px; }
    .mw-lx-seal { width: 40px; height: 40px; }
    .mw-lx-seal .material-symbols-rounded { font-size: 19px; }
    .mw-lx-name { font-size: 17px; }
    .mw-lx-actions { position: absolute; top: 10px; right: 10px; }
    .mw-lx-ornament { display: none; }

    .mw-lx-stat { padding: 8px 10px; gap: 2px; }
    .mw-lx-st-label { font-size: 8.5px; letter-spacing: 1px; }
    .mw-lx-st-value { font-size: 13px; }
    .mw-lx-st-value .unit { font-size: 9px; }

    .mw-lx-status { padding: 10px 10px 8px; }
    .mw-lx-status-icon { width: 26px; height: 26px; }
    .mw-lx-status-icon .material-symbols-rounded { font-size: 14px; }
    .mw-lx-countdown { align-items: flex-start; }
    .mw-lx-rail { margin: 0 10px !important; }

    .mw-lx-seats { padding: 8px 8px 12px; }
    .mw-lx-seat,
    .mw-lx-root .mw-player-card.mw-lx-seat {
        grid-template-columns: 22px 34px 1fr auto !important;
        gap: 6px !important; padding: 7px 8px !important;
    }
    .mw-lx-seat.mw-card-empty,
    .mw-lx-root .mw-player-card.mw-lx-seat.mw-card-empty {
        grid-template-columns: 22px 34px 1fr auto !important;
    }
    .mw-lx-avatar { width: 34px; height: 34px; }
    .mw-lx-av-inner { font-size: 12px; }
    .mw-lx-flag { font-size: 11px; }
    .mw-lx-msep, .mw-lx-form-dots { display: none !important; }

    .mw-lx-aside-section { padding: 10px 12px !important; }
    .mw-lx-sect-title { font-size: 9.5px; margin-bottom: 8px; }
    .mw-lx-chat-log { max-height: 140px; }

    .mw-lx-footer { padding: 10px 10px !important; }
    .mw-lx-btn .material-symbols-rounded { font-size: 15px; }
}
@media (max-width: 380px) {
    .mw-lx-seal { display: none; }
    .mw-lx-idx { display: none; }
    .mw-lx-seat,
    .mw-lx-root .mw-player-card.mw-lx-seat,
    .mw-lx-seat.mw-card-empty,
    .mw-lx-root .mw-player-card.mw-lx-seat.mw-card-empty {
        grid-template-columns: 34px 1fr auto !important;
    }
    .mw-lx-name { font-size: 15px; }
}

/* Chat panel */
.mw-lx-chat-section { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mw-lx-chat-log {
    flex: 1; overflow-y: auto;
    padding: 4px 0 10px;
    display: flex; flex-direction: column; gap: 8px;
    min-height: 120px; max-height: 240px;
}
.mw-lx-chat-log::-webkit-scrollbar { width: 5px; }
.mw-lx-chat-log::-webkit-scrollbar-track { background: transparent; }
.mw-lx-chat-log::-webkit-scrollbar-thumb { background: rgba(212,160,64,0.16); border-radius: 3px; }
.mw-lx-chat-log::-webkit-scrollbar-thumb:hover { background: rgba(212,160,64,0.28); }

.mw-lx-chat-empty {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: #6d5a42; font-size: 11.5px; font-style: italic;
    padding: 20px 10px; text-align: center;
}
.mw-lx-chat-empty .material-symbols-rounded { font-size: 16px; color: #b8863a; opacity: 0.6; }

.mw-lx-msg { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; }
.mw-lx-msg-av {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, #b8863a, #5a4320);
    color: #fde8b8; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
    border: 1px solid rgba(212,160,64,0.16);
    overflow: hidden;
}
.mw-lx-msg-av img {
    width: 100% !important; height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block;
    border: none !important;
}
.mw-lx-msg-body { flex: 1; min-width: 0; }
.mw-lx-msg-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.mw-lx-msg-who { font-size: 11px; font-weight: 700; color: #e8c070; letter-spacing: 0.2px; }
.mw-lx-msg.me .mw-lx-msg-who { color: #fde8b8; }
.mw-lx-msg-time { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 9.5px; color: #453626; }
.mw-lx-msg-text { color: #f7eacf; word-wrap: break-word; overflow-wrap: break-word; }

.mw-lx-msg.system {
    display: flex; gap: 6px; color: #6d5a42; font-size: 11px;
    font-style: italic; padding: 4px 2px; align-items: center;
}
.mw-lx-msg.system .material-symbols-rounded { font-size: 13px; color: #b8863a; }

.mw-lx-chat-input-row {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(212,160,64,0.15);
    align-items: stretch;
}
.mw-lx-chat-input {
    flex: 1;
    padding: 11px 16px;
    background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.4));
    border: 1.5px solid rgba(212,160,64,0.25);
    border-radius: 10px;
    /* TEXT VIZIBIL — explicit color + webkit fill (override chrome autofill) */
    color: #fff8e0 !important;
    -webkit-text-fill-color: #fff8e0 !important;
    caret-color: #ffd866;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
    min-width: 0;
}
.mw-lx-chat-input::placeholder {
    color: rgba(255, 235, 180, 0.4);
    font-style: italic;
    font-weight: 400;
}
.mw-lx-chat-input:hover {
    border-color: rgba(212, 160, 64, 0.4);
    background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.45));
}
.mw-lx-chat-input:focus {
    border-color: rgba(255, 215, 100, 0.7);
    background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.5));
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.5),
        0 0 0 3px rgba(255, 215, 100, 0.12),
        0 0 16px rgba(255, 215, 100, 0.18);
}
/* Override Chrome autofill — pastreaza textul vizibil */
.mw-lx-chat-input:-webkit-autofill,
.mw-lx-chat-input:-webkit-autofill:hover,
.mw-lx-chat-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff8e0 !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0.55) inset !important;
    caret-color: #ffd866 !important;
}

/* Buton SEND — IDENTIC cu .mw-lx-btn.primary (auriu frumos folosit in toata aplicatia) */
.mw-lx-chat-send {
    width: 46px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: all 0.2s ease;
    /* === Auriu frumos identic .mw-lx-btn.primary === */
    background: linear-gradient(180deg, var(--lx-g200) 0%, var(--lx-g400) 55%, var(--lx-g500) 100%);
    color: var(--lx-g800);
    border: 1px solid var(--lx-g500);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 210, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(212, 160, 64, 0.28),
        0 1px 3px rgba(0, 0, 0, 0.3);
}
.mw-lx-chat-send:hover { filter: brightness(1.06); }
.mw-lx-chat-send:active { transform: translateY(1px); }
.mw-lx-chat-send .material-symbols-rounded { font-size: 20px; }

/* ================================================================================================
   TILE 3D — piese mai groase si realiste (simulare bakelita/ivoriu)
   Override peste .tile existent cu multi-layer box-shadow pentru a simula adancime 5-7px
   NU se aplica pe .color-joker — jokerul isi pastreaza efectul shimmer/sweep original
================================================================================================ */
.tile:not(.color-joker) {
    /* Gradient mai bogat, cu tonalitati calde (ivoriu vintage) */
    background:
        linear-gradient(160deg,
            #ffffff 0%,
            #fdf9ec 22%,
            #f6ecd0 55%,
            #ead8ae 88%,
            #d9c394 100%) !important;
    border: 1px solid rgba(90, 60, 30, 0.38) !important;
    /* Stack complex:
       - Inset top highlight (muchia de sus primeste lumina)
       - Inset bottom dark (muchia de jos in umbra - creeaza iluzia grosimii)
       - Inset side bevels (stanga luminoasa, dreapta umbra)
       - 3 drop shadows layered pt. profunzime 3D */
    box-shadow:
        /* Top highlight pe muchie */
        inset 0 2px 0 rgba(255, 255, 255, 0.95),
        inset 0 3px 1px rgba(255, 250, 230, 0.6),
        /* Bottom edge adanc - simuleaza grosimea piesei */
        inset 0 -3px 0 rgba(140, 105, 60, 0.35),
        inset 0 -5px 6px rgba(120, 85, 45, 0.22),
        /* Side bevels */
        inset 2px 0 0 rgba(255, 252, 240, 0.55),
        inset -2px 0 0 rgba(130, 95, 55, 0.22),
        inset 3px 0 4px rgba(255, 255, 255, 0.25),
        inset -3px 0 4px rgba(110, 80, 45, 0.18),
        /* Drop shadow layers (lumina de sus-stanga) */
        0 1px 0 rgba(0, 0, 0, 0.15),
        0 2px 2px rgba(0, 0, 0, 0.22),
        0 4px 6px rgba(0, 0, 0, 0.28),
        0 8px 14px rgba(0, 0, 0, 0.32),
        0 14px 24px rgba(0, 0, 0, 0.18) !important;
    transform: translateZ(0);
    will-change: transform;
}

/* Sheen/reflexie mai realista — un highlight diagonal difuzat */
.tile:not(.color-joker)::before {
    background: linear-gradient(138deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.25) 18%,
        rgba(255, 250, 240, 0.08) 38%,
        transparent 55%,
        rgba(0, 0, 0, 0.04) 80%,
        rgba(70, 45, 20, 0.12) 100%) !important;
    mix-blend-mode: normal !important;
    opacity: 0.95;
}

/* Adaug un al doilea layer (::after) pentru "muchia de jos" vizuala —
   fasie subtire intunecata care da efect de grosime.
   IMPORTANT: exclus pe .color-joker pentru ca jokerul foloseste ::after pt shimmer sweep. */
.tile:not(.color-joker)::after {
    content: '';
    position: absolute;
    left: 4%; right: 4%; bottom: 2px;
    height: 18%;
    border-radius: 0 0 calc(var(--whist-radius-tile, 8px) - 2px) calc(var(--whist-radius-tile, 8px) - 2px);
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(140, 100, 55, 0.08) 40%,
        rgba(120, 85, 45, 0.22) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Hover — se ridica clar din tablou (NU pe joker, ca sa-si pastreze shimmer) */
.tile:not(.color-joker):hover {
    transform: translateY(-6px) scale(1.05) !important;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.95),
        inset 0 3px 1px rgba(255, 250, 230, 0.65),
        inset 0 -3px 0 rgba(140, 105, 60, 0.35),
        inset 0 -5px 6px rgba(120, 85, 45, 0.22),
        inset 2px 0 0 rgba(255, 252, 240, 0.55),
        inset -2px 0 0 rgba(130, 95, 55, 0.22),
        /* Drop shadows mai mari la hover */
        0 2px 2px rgba(0, 0, 0, 0.18),
        0 6px 8px rgba(0, 0, 0, 0.26),
        0 10px 16px rgba(0, 0, 0, 0.32),
        0 18px 32px rgba(0, 0, 0, 0.36),
        0 28px 44px rgba(0, 0, 0, 0.18) !important;
}

.tile:not(.color-joker):active {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.9),
        inset 0 -2px 0 rgba(140, 105, 60, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.22),
        0 4px 8px rgba(0, 0, 0, 0.28) !important;
    transition: all 0.08s ease-out !important;
}

/* Selected tile — glow + elevated (NU pe joker, ca sa nu calcam peste jokerShimmer) */
.tile:not(.color-joker).selected, .tile:not(.color-joker).tile-selected {
    transform: translateY(-8px) scale(1.06) !important;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.95),
        inset 0 -3px 0 rgba(140, 105, 60, 0.4),
        0 0 0 2px rgba(212, 160, 64, 0.55),
        0 0 18px rgba(212, 160, 64, 0.35),
        0 4px 6px rgba(0, 0, 0, 0.2),
        0 10px 18px rgba(0, 0, 0, 0.3),
        0 20px 36px rgba(0, 0, 0, 0.32) !important;
}

/* Tema light: pastreaza contrastul muchiilor (NU pe joker) */
[data-theme="light"] .tile:not(.color-joker) {
    background:
        linear-gradient(160deg,
            #ffffff 0%,
            #faf5e8 22%,
            #efe3c4 55%,
            #ddc89e 88%,
            #c7ae7a 100%) !important;
    border-color: rgba(110, 75, 30, 0.45) !important;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.95),
        inset 0 -3px 0 rgba(140, 100, 55, 0.38),
        inset 2px 0 0 rgba(255, 252, 240, 0.6),
        inset -2px 0 0 rgba(125, 90, 50, 0.26),
        0 1px 0 rgba(0, 0, 0, 0.12),
        0 3px 5px rgba(0, 0, 0, 0.18),
        0 6px 10px rgba(0, 0, 0, 0.2),
        0 12px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Teme dark (midnight, onyx, crimson etc.) — ajusteaza drop shadow pt contrast */
[data-theme="midnight"] .tile:not(.color-joker),
[data-theme="onyx"] .tile:not(.color-joker),
[data-theme="crimson"] .tile:not(.color-joker),
[data-theme="diamond"] .tile:not(.color-joker),
[data-theme="platinum"] .tile:not(.color-joker),
[data-theme="emerald"] .tile:not(.color-joker) {
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.92),
        inset 0 3px 1px rgba(255, 250, 230, 0.55),
        inset 0 -3px 0 rgba(110, 75, 35, 0.4),
        inset 0 -5px 6px rgba(90, 60, 25, 0.28),
        inset 2px 0 0 rgba(255, 252, 240, 0.55),
        inset -2px 0 0 rgba(100, 70, 35, 0.28),
        0 2px 3px rgba(0, 0, 0, 0.5),
        0 5px 8px rgba(0, 0, 0, 0.55),
        0 10px 18px rgba(0, 0, 0, 0.6),
        0 18px 30px rgba(0, 0, 0, 0.4) !important;
}

/* ================================================================================================
   CREATE ROOM MODAL V2 — compact, fara scroll, preset-uri + 2-col desktop / tabs mobile
================================================================================================ */
.mp-modal-card.mp-modal-v2 {
    width: 780px;
    max-width: 96vw;
    max-height: 96vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(145deg,
        rgba(var(--color-primary-rgb, 36, 45, 63), 0.98) 0%,
        rgba(var(--color-primary-rgb, 36, 45, 63), 0.96) 50%,
        rgba(var(--color-primary-rgb, 36, 45, 63), 0.98) 100%);
    border: 1px solid rgba(var(--color-accent-rgb, 91, 141, 239), 0.25);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--color-accent-rgb), 0.1) inset;
}
.mp-modal-v2 .mp-modal-header {
    padding: 10px 18px 8px;
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.12);
    flex-shrink: 0;
}
.mp-modal-v2 .mp-modal-title { font-size: 18px; color: var(--color-text-primary, #fff); }
.mp-modal-v2 .mp-modal-subtitle { font-size: 11px; color: var(--whist-text-dim, rgba(255,255,255,0.6)); }

/* ═══ PRESET STRIP ═══ */
.mp-preset-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px 14px 10px;
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.08);
    flex-shrink: 0;
}
.mp-preset-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 7px 5px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(var(--color-accent-rgb), 0.12);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
    color: inherit;
    min-height: 50px;
}
.mp-preset-card:hover {
    background: rgba(var(--color-accent-rgb), 0.08);
    border-color: rgba(var(--color-accent-rgb), 0.28);
    transform: translateY(-1px);
}
.mp-preset-card.active {
    background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.18), rgba(var(--color-accent-rgb), 0.06));
    border-color: rgba(var(--color-accent-rgb), 0.55);
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.2);
}
.mp-preset-icon { font-size: 20px; line-height: 1; }
.mp-preset-label { font-size: 12px; font-weight: 700; color: var(--color-text-primary, #fff); letter-spacing: 0.3px; }
.mp-preset-tag { font-size: 9.5px; color: var(--whist-text-dim, rgba(255,255,255,0.55)); letter-spacing: 0.2px; }

/* ═══ TABS BAR (MOBILE ONLY) ═══ */
.mp-tabs-bar {
    display: none;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.08);
    flex-shrink: 0;
}
.mp-tab {
    flex: 1;
    padding: 8px 6px;
    background: transparent;
    border: 1px solid rgba(var(--color-accent-rgb), 0.12);
    border-radius: 8px;
    color: var(--whist-text-dim, rgba(255,255,255,0.6));
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.mp-tab.active {
    background: rgba(var(--color-accent-rgb), 0.15);
    color: var(--color-text-primary, #fff);
    border-color: rgba(var(--color-accent-rgb), 0.45);
}

/* ═══ BODY: 2-COL DESKTOP ═══ */
.mp-modal-body-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.mp-col {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow: visible;
}
.mp-col-basic { border-right: 1px solid rgba(var(--color-accent-rgb), 0.08); }
.mp-col-advanced { display: flex; flex-direction: column; gap: 7px; }
.mp-col-access {
    padding: 8px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    grid-column: 2;
    border-top: 1px solid rgba(var(--color-accent-rgb), 0.08);
    margin-top: 0;
}

/* Sub-scrollbar */
.mp-col::-webkit-scrollbar { width: 4px; }
.mp-col::-webkit-scrollbar-thumb { background: rgba(var(--color-accent-rgb), 0.2); border-radius: 2px; }

/* ═══ FIELDS ═══ */
.mp-field-v2 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mp-field-v2.mp-field-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mp-lbl-v2 {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-primary, #fff);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.mp-lbl-v2 .material-symbols-rounded { font-size: 14px; color: var(--color-accent); opacity: 0.9; }
.mp-lbl-v2.mp-lbl-sub {
    font-size: 10px; letter-spacing: 0.3px;
    text-transform: none; color: var(--whist-text-dim, rgba(255,255,255,0.55)); font-weight: 500;
}
.mp-lbl-aux { margin-left: auto; font-size: 10px; color: var(--whist-text-dim, rgba(255,255,255,0.55)); text-transform: none; letter-spacing: 0.2px; font-weight: 500; }
.mp-lbl-aux b { color: var(--color-text-primary, #fff); font-weight: 700; }

.mp-input-v2 {
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(var(--color-accent-rgb), 0.15);
    border-radius: 8px;
    color: var(--color-text-primary, #fff);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}
.mp-input-v2:focus { border-color: rgba(var(--color-accent-rgb), 0.55); background: rgba(0, 0, 0, 0.45); }

.mp-pwd-row {
    display: flex;
    gap: 6px;
}
.mp-pwd-row .mp-input-v2 { flex: 1; }
.mp-pwd-gen {
    flex-shrink: 0;
    width: 34px;
    padding: 0;
    background: rgba(var(--color-accent-rgb), 0.1);
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    border-radius: 8px;
    color: var(--color-accent);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.mp-pwd-gen:hover { background: rgba(var(--color-accent-rgb), 0.22); }
.mp-pwd-gen .material-symbols-rounded { font-size: 16px; }

/* ═══ SEGMENTED CONTROLS ═══ */
.mp-opt-group.mp-seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    background: rgba(0, 0, 0, 0.3);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.1);
}
.mp-opt-group.mp-seg-sm {
    display: inline-flex;
    gap: 2px;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px;
    border-radius: 6px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.1);
}
.mp-seg .mp-opt-btn, .mp-seg-sm .mp-opt-btn {
    padding: 6px 8px;
    font-size: 11.5px;
    font-weight: 600;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--whist-text-dim, rgba(255,255,255,0.55));
    cursor: pointer;
    transition: all 0.16s ease;
    font-family: inherit;
    white-space: nowrap;
}
.mp-seg-sm .mp-opt-btn { padding: 4px 10px; font-size: 10.5px; }
.mp-seg .mp-opt-btn:hover, .mp-seg-sm .mp-opt-btn:hover { color: var(--color-text-primary, #fff); background: rgba(var(--color-accent-rgb), 0.05); }
.mp-seg .mp-opt-btn.selected, .mp-seg-sm .mp-opt-btn.selected {
    background: linear-gradient(180deg,
        var(--whist-accent-light, var(--color-accent)) 0%,
        var(--color-accent) 55%,
        var(--whist-accent-dark, var(--color-accent)) 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* ═══ SLIDER ═══ */
.mp-range-v2 {
    width: 100%;
    height: 5px;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    outline: none;
    margin: 6px 0 2px;
}
.mp-range-v2::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: linear-gradient(180deg,
        var(--whist-accent-light, var(--color-accent)) 0%,
        var(--color-accent) 55%,
        var(--whist-accent-dark, var(--color-accent)) 100%);
    border: 1px solid rgba(0, 0, 0, 0.4);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.mp-range-v2::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: linear-gradient(180deg,
        var(--whist-accent-light, var(--color-accent)) 0%,
        var(--color-accent) 55%,
        var(--whist-accent-dark, var(--color-accent)) 100%);
    border: 1px solid rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

/* ═══ RULE PILLS ═══ */
.mp-rule-pills {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.mp-rule-pill {
    padding: 4px 8px;
    font-size: 10.5px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    border-radius: 6px;
    color: var(--whist-text, rgba(255,255,255,0.85));
    cursor: pointer;
    transition: all 0.16s ease;
    font-family: inherit;
    opacity: 1;
}
.mp-rule-pill:hover { border-color: rgba(var(--color-accent-rgb), 0.4); color: var(--color-text-primary, #fff); }
.mp-rule-pill.active {
    background: rgba(var(--color-accent-rgb), 0.18);
    border-color: rgba(var(--color-accent-rgb), 0.5);
    color: var(--color-text-primary, #fff);
    opacity: 1;
}
/* Locked pills — reguli active permanent (jocurionline.eu), nu se schimba */
.mp-rule-pill.mp-rule-locked {
    cursor: default;
    background: linear-gradient(135deg, rgba(255,215,100,0.18), rgba(184,136,11,0.08));
    border-color: rgba(255,215,100,0.5);
    color: #ffd866;
    box-shadow: inset 0 1px 0 rgba(255,215,100,0.15);
}
.mp-rule-pill.mp-rule-locked:hover {
    border-color: rgba(255,215,100,0.5);
    color: #ffd866;
}
.mp-rule-pill.mp-rule-locked::before {
    content: '🔒';
    margin-right: 3px;
    font-size: 9px;
    opacity: 0.7;
}

/* ═══ FOOTER ═══ */
.mp-modal-footer-v2 {
    padding: 8px 18px 10px;
    border-top: 1px solid rgba(var(--color-accent-rgb), 0.12);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.2);
}
.mp-preview-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--whist-text, rgba(255,255,255,0.75));
    padding: 6px 10px;
    background: rgba(var(--color-accent-rgb), 0.06);
    border: 1px solid rgba(var(--color-accent-rgb), 0.15);
    border-radius: 8px;
    font-style: italic;
    min-height: 24px;
}
.mp-preview-line .material-symbols-rounded { font-size: 14px; color: var(--color-accent); font-style: normal; }
.mp-preview-line #mpPreviewText { font-style: normal; font-weight: 500; }

.mp-footer-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.mp-modal-v2 .mp-modal-btn-cancel {
    padding: 9px 18px;
    font-size: 13px;
}
.mp-modal-v2 .mp-modal-btn-create {
    padding: 9px 18px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mp-modal-v2 .mp-modal-btn-create .material-symbols-rounded { font-size: 17px; }
.mp-cost-badge {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    padding: 2px 7px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 5px;
    margin-left: 4px;
    font-weight: 700;
}
.mp-btn-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.5);
    pointer-events: none;
}

/* ═══ RESPONSIVE: MOBILE & TABLET ═══ */
@media (max-width: 860px) {
    .mp-modal-card.mp-modal-v2 { width: 96vw; max-width: 420px; }
    .mp-preset-strip { grid-template-columns: repeat(4, 1fr); padding: 8px 10px; }
    .mp-preset-card { min-height: 56px; padding: 6px 4px; }
    .mp-preset-icon { font-size: 17px; }
    .mp-preset-label { font-size: 11px; }
    .mp-preset-tag { font-size: 8.5px; }

    .mp-tabs-bar { display: flex; }

    /* Mobile: 1 coloana, un singur panel activ odata */
    .mp-modal-body-v2 {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
    .mp-col { display: none; border-right: none !important; grid-column: 1 !important; }
    .mp-col.mp-panel-active { display: flex; }

    .mp-preview-line { font-size: 10.5px; }
    .mp-cost-badge { font-size: 10px; padding: 1px 6px; }
}

/* Desktop: ACCES e mutat in col-advanced (nu afisam separat) */
@media (min-width: 861px) {
    .mp-col-access {
        grid-column: 2;
        grid-row: 2;
        padding-top: 4px;
        border-top: 1px dashed rgba(var(--color-accent-rgb), 0.12);
        display: flex !important;
    }
    .mp-modal-body-v2 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .mp-col-basic {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    .mp-col-advanced {
        grid-column: 2;
        grid-row: 1;
    }
    /* Pe desktop, panel-active class nu afecteaza — toate vizibile */
    .mp-col { display: flex !important; }
}

/* ================================================================================================
   WINNER HIGHLIGHT — animatie cinematica pe meldurile castigatorului
   Activeaza pe `body.game-ended-highlighting`. Dim intreaga masa except meldurile cu
   `.meld-winner-glow`. Banner central cu numele + metoda de inchidere.
   Durata totala: ~2.8s (controlata din JS: playWinnerHighlight).
================================================================================================ */

/* Dim overlay pe elementele NON-castigatoare — transition smooth */
body.game-ended-highlighting .game-canvas,
body.game-ended-highlighting .player-hand,
body.game-ended-highlighting .seat-south,
body.game-ended-highlighting .seat-north,
body.game-ended-highlighting .seat-east,
body.game-ended-highlighting .seat-west,
body.game-ended-highlighting .whist-sidebar,
body.game-ended-highlighting .discard-top,
body.game-ended-highlighting .discard-history-strip,
body.game-ended-highlighting .atu-display {
    transition: filter 0.6s ease, opacity 0.6s ease;
}
body.game-ended-highlighting .player-hand,
body.game-ended-highlighting .whist-sidebar,
body.game-ended-highlighting .discard-history-strip,
body.game-ended-highlighting .seat-north,
body.game-ended-highlighting .seat-east,
body.game-ended-highlighting .seat-west {
    filter: brightness(0.35) blur(1px);
    opacity: 0.7;
    pointer-events: none;
}

/* Meldurile castigatorului: AU prioritate — scapa de dim, primesc glow + pulse */
body.game-ended-highlighting .table-meld-group.meld-winner-glow {
    filter: none !important;
    opacity: 1 !important;
    position: relative;
    z-index: 50;
    animation: mwWinnerMeldGlow 0.9s ease-in-out infinite alternate;
    transform-origin: center center;
}

/* Glow pulse keyframe — box-shadow + scale subtle + border auriu */
@keyframes mwWinnerMeldGlow {
    0% {
        box-shadow:
            0 0 0 3px rgba(255, 215, 100, 0.45),
            0 0 18px 8px rgba(255, 200, 80, 0.35),
            0 0 48px 16px rgba(255, 180, 60, 0.25),
            inset 0 0 8px rgba(255, 240, 200, 0.3);
        transform: scale(1.015);
    }
    100% {
        box-shadow:
            0 0 0 5px rgba(255, 235, 150, 0.85),
            0 0 32px 14px rgba(255, 215, 100, 0.7),
            0 0 72px 24px rgba(255, 190, 80, 0.45),
            inset 0 0 14px rgba(255, 250, 220, 0.5);
        transform: scale(1.045);
    }
}

/* Shimmer sweep peste meld-ul castigator — gradient diagonal care curge */
body.game-ended-highlighting .table-meld-group.meld-winner-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 255, 255, 0.55) 45%,
        rgba(255, 235, 150, 0.8) 50%,
        rgba(255, 255, 255, 0.55) 55%,
        transparent 70%);
    background-size: 250% 100%;
    background-position: -100% 0;
    animation: mwWinnerSweep 1.8s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 2;
}
@keyframes mwWinnerSweep {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* Piesele din meldul castigator ies usor in evidenta cu highlight individual */
body.game-ended-highlighting .table-meld-group.meld-winner-glow .tile {
    animation: mwWinnerTileLift 0.9s ease-in-out infinite alternate;
    position: relative;
    z-index: 3;
}
@keyframes mwWinnerTileLift {
    0%   { transform: translateY(0); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
    100% { transform: translateY(-3px); filter: drop-shadow(0 6px 12px rgba(255, 200, 80, 0.55)); }
}

/* ───────────────────────────── SPARKLE PARTICLES ─────────────────────────────
   Particule aurii care urca din meldul castigator — spawnate din JS. */
.mw-winner-sparkle {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, #fff9e6 0%, #ffe099 40%, #ffbf66 70%, transparent 100%);
    box-shadow:
        0 0 6px rgba(255, 220, 130, 0.9),
        0 0 14px rgba(255, 190, 80, 0.55);
    opacity: 0;
    animation: mwWinnerSparkle 1.2s cubic-bezier(0.2, 0.9, 0.5, 1) forwards;
}
@keyframes mwWinnerSparkle {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.3); }
    15%  { opacity: 1; transform: translate(calc(var(--mw-dx) * 0.2), calc(var(--mw-dy) * 0.2)) scale(1.1); }
    70%  { opacity: 0.9; transform: translate(calc(var(--mw-dx) * 0.75), calc(var(--mw-dy) * 0.75)) scale(0.9); }
    100% { opacity: 0; transform: translate(var(--mw-dx), var(--mw-dy)) scale(0.3); }
}


/* ================================================================================================
   CHAT PANEL — fix scroll: messaje nu mai trec sub bara de input
   Problema initiala: .whist-chat-wrapper era display:block + chatInputBar position:sticky.
   Sticky cere ancestor cu overflow:auto si inaltime constransa — nu era cazul.
   Fix: wrapper devine flex-column constrained, cmsg-container flex:1 cu scroll intern,
   input bar e sibling normal cu flex-shrink:0.
================================================================================================ */
.whist-chat-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    position: relative;
}

.whist-chat-wrapper .chat-tabs-bar { flex-shrink: 0; }
.whist-chat-wrapper #chatGlobalUsers,
.whist-chat-wrapper #chatRoomUsers,
.whist-chat-wrapper #chatGlobalBanList { flex-shrink: 0; }

/* Container-ul de mesaje umple spatiul ramas si scrolleaza intern */
.whist-chat-wrapper .cmsg-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Chat input bar e ancorat in flex (nu mai e nevoie sticky) — ramane jos vizibil */
.whist-chat-wrapper #chatInputBar {
    flex-shrink: 0 !important;
    position: relative !important;
    bottom: auto !important;
    z-index: auto !important;
    /* keep backdrop blur for visual */
}

/* Private/friends/notifs panels la fel — sa scrolleze intern, sa nu impinga input-ul */
.whist-chat-wrapper #chatMessagesPrivate,
.whist-chat-wrapper #chatPrivateConv,
.whist-chat-wrapper #chatFriendsList,
.whist-chat-wrapper #chatNotifsList {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}


/* ================================================================================================
   TILE ACTION ANIMATIONS — Draw (D, Trail Particles) + Discard (E, Color Flash)
================================================================================================ */

/* ─── DRAW: ghost-ul zboara cu arc bezier (D — trail particles) ─── */
.mw-draw-ghost {
    box-sizing: border-box;
    border-radius: 5px;
    animation: mwDrawArc 0.85s cubic-bezier(0.3, 0.7, 0.3, 1) forwards;
    will-change: transform;
}
@keyframes mwDrawArc {
    0%   { transform: translate(0, 0) rotateY(0deg); }
    50%  { transform: translate(calc(var(--mw-draw-end-x) * 0.5), calc(var(--mw-draw-end-y) * 0.5 - 60px)) rotateY(90deg); }
    100% { transform: translate(var(--mw-draw-end-x), var(--mw-draw-end-y)) rotateY(180deg); }
}

/* OPPONENT DRAW — ghost mai mare, vizibil, rotire face-down (ambele fete=back) */
.mw-draw-ghost.mw-opponent-ghost {
    animation: mwDrawArcOpp 0.85s cubic-bezier(0.3, 0.7, 0.3, 1) forwards;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 14px rgba(255, 220, 130, 0.55);
    z-index: 99999;
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 600px;
}
.mw-draw-ghost.mw-opponent-ghost::after {
    /* Spate identic — apare cand fata trece in spate (180° → 360°) ca sa nu se vada continut */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}
@keyframes mwDrawArcOpp {
    0%   { transform: translate(0, 0) rotate(0deg) rotateY(0deg) scale(1); }
    50%  { transform: translate(calc(var(--mw-draw-end-x) * 0.5), calc(var(--mw-draw-end-y) * 0.5)) rotate(360deg) rotateY(180deg) scale(1); }
    100% { transform: translate(var(--mw-draw-end-x), var(--mw-draw-end-y)) rotate(720deg) rotateY(360deg) scale(1); }
}

/* Particule aurii pe traseu */
.mw-draw-particle {
    position: fixed;
    width: 8px; height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    background: radial-gradient(circle, #fff9e6 0%, #ffe099 50%, transparent 100%);
    box-shadow: 0 0 6px rgba(255, 220, 130, 0.9), 0 0 14px rgba(255, 190, 80, 0.55);
    opacity: 0;
    animation: mwDrawParticleFade 0.6s cubic-bezier(0.2, 0.9, 0.5, 1) forwards;
}
@keyframes mwDrawParticleFade {
    0%   { opacity: 0; transform: scale(0.4); }
    20%  { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(0.2); }
}

/* Shockwave radial la aterizare */
.mw-draw-shockwave {
    position: fixed;
    width: 8px; height: 8px;
    border: 2px solid rgba(255, 215, 100, 0.9);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99997;
    animation: mwDrawShockwave 0.6s ease-out forwards;
}
@keyframes mwDrawShockwave {
    0%   { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(255, 215, 100, 0.5); }
    100% { transform: scale(8); opacity: 0; box-shadow: 0 0 0 4px rgba(255, 215, 100, 0); }
}

/* Glow auriu pe piesa-tinta dupa aterizare */
.tile.mw-draw-glow {
    animation: mwDrawGlowPulse 0.6s ease-out !important;
    z-index: 5;
}
@keyframes mwDrawGlowPulse {
    0%   { box-shadow: 0 0 0 4px rgba(255, 215, 100, 0.95),
                       0 0 28px rgba(255, 200, 80, 0.75),
                       inset 0 1px 0 rgba(255, 255, 255, 0.95); }
    100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95),
                       inset 0 -2px 0 rgba(140, 105, 60, 0.35),
                       0 2px 4px rgba(0, 0, 0, 0.28); }
}

/* ─── DISCARD: arc toss spre discard pile (E — color flash) ─── */
.mw-discard-ghost {
    box-sizing: border-box;
    border-radius: 5px;
    animation: mwDiscardArc 0.6s cubic-bezier(0.5, 0, 0.5, 1) forwards;
    will-change: transform;
}
@keyframes mwDiscardArc {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate(calc(var(--mw-disc-end-x) * 0.55), calc(var(--mw-disc-end-y) * 0.4 - 50px)) rotate(180deg) scale(1.05); }
    100% { transform: translate(var(--mw-disc-end-x), var(--mw-disc-end-y)) rotate(360deg) scale(1); }
}

/* Mâna pulseaza cu CULOAREA piesei aruncate */
.player-hand.mw-discard-flash {
    animation: mwDiscardFlash 0.5s ease-out;
    --mw-flash-color: #b91c1c;
}
@keyframes mwDiscardFlash {
    0%   { box-shadow: inset 0 0 0 0 transparent; }
    30%  { box-shadow: inset 0 0 0 2px var(--mw-flash-color),
                       0 0 24px var(--mw-flash-color),
                       0 0 0 1px var(--mw-flash-color); }
    100% { box-shadow: inset 0 0 0 0 transparent; }
}

/* Glow pe discard pile dupa aterizare (border auriu pulsa) */
#discardTop.mw-discard-glow,
.discard-top.mw-discard-glow,
.mw-discard-glow .tile {
    animation: mwDiscardGlowPulse 0.6s ease-out !important;
}
@keyframes mwDiscardGlowPulse {
    0%   { box-shadow: 0 0 0 4px rgba(255, 176, 80, 0.9),
                       0 0 28px rgba(255, 140, 50, 0.7); }
    100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85),
                       0 4px 12px rgba(0, 0, 0, 0.4); }
}

/* Reduce-motion: respecta preferintele de accessibility */
@media (prefers-reduced-motion: reduce) {
    .mw-draw-ghost, .mw-draw-particle, .mw-draw-shockwave,
    .mw-discard-ghost, .player-hand.mw-discard-flash,
    .tile.mw-draw-glow, .mw-discard-glow {
        animation-duration: 0.1s !important;
        animation-timing-function: linear !important;
    }
    .mw-draw-particle, .mw-draw-shockwave { display: none; }
}


/* ================================================================================================
   LIPIRE ANIMATION — piesa zboara din mana actorului in meld-ul tinta cu glow auriu la aterizare
================================================================================================ */
.mw-lipire-ghost {
    box-sizing: border-box;
    border-radius: 5px;
    animation: mwLipireArc 0.55s cubic-bezier(0.25, 0.8, 0.35, 1) forwards;
    will-change: transform;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 10px rgba(255,215,100,0.45);
}
@keyframes mwLipireArc {
    0%   { transform: translate(0, 0) scale(0.96); opacity: 0.9; }
    60%  { transform: translate(calc(var(--mw-lip-end-x) * 0.6), calc(var(--mw-lip-end-y) * 0.6 - 22px)) scale(1.02); opacity: 1; }
    100% { transform: translate(var(--mw-lip-end-x), var(--mw-lip-end-y)) scale(1); opacity: 1; }
}

/* Glow pe meld-ul care a primit piesa (pulse auriu 800ms) */
.table-meld-group.mw-lipire-glow {
    animation: mwLipireGlow 0.8s ease-out !important;
    z-index: 5;
}
@keyframes mwLipireGlow {
    0%   { box-shadow: 0 0 0 3px rgba(255, 215, 100, 0.85),
                       0 0 22px rgba(255, 200, 80, 0.6),
                       inset 0 0 6px rgba(255, 240, 200, 0.25); }
    50%  { box-shadow: 0 0 0 5px rgba(255, 235, 150, 0.95),
                       0 0 32px rgba(255, 215, 100, 0.75),
                       inset 0 0 10px rgba(255, 250, 220, 0.4); }
    100% { box-shadow: none; }
}

/* Reduce-motion */
@media (prefers-reduced-motion: reduce) {
    .mw-lipire-ghost, .table-meld-group.mw-lipire-glow {
        animation-duration: 0.1s !important;
        animation-timing-function: linear !important;
    }
}

/* Flip 3D pe piesa reala din meld dupa ce ghost-ul de lipire a aterizat */
.tile.mw-lipire-flip {
    animation: mwLipireFlip 0.6s cubic-bezier(0.3, 0.7, 0.3, 1) both;
    transform-style: preserve-3d;
    backface-visibility: visible;
    z-index: 6;
    position: relative;
}
@keyframes mwLipireFlip {
    0%   { transform: rotateY(0deg) scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(255,215,100,0); }
    35%  { transform: rotateY(90deg) scale(1.1); filter: brightness(1.6); box-shadow: 0 0 18px rgba(255,215,100,0.85); }
    65%  { transform: rotateY(270deg) scale(1.1); filter: brightness(1.6); box-shadow: 0 0 18px rgba(255,215,100,0.85); }
    100% { transform: rotateY(360deg) scale(1); filter: brightness(1); box-shadow: 0 0 0 rgba(255,215,100,0); }
}
@media (prefers-reduced-motion: reduce) {
    .tile.mw-lipire-flip { animation-duration: 0.1s !important; }
}

/* Settle pop-in pentru piesa-back nou aparuta dupa ce ghost-ul a aterizat */
.opponent-tile-back.mw-tile-settle {
    animation: mwTileSettle 0.32s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes mwTileSettle {
    0%   { transform: scale(0.7); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .opponent-tile-back.mw-tile-settle { animation-duration: 0.1s !important; }
}

/* ================================================================================================
   ACTION BUTTONS — UX HIGHLIGHT (sugestie urmatorul pas, descriere, numere ordine)
   Helps user understand what each button does and which to press next.
   ================================================================================================ */

/* 1. SUGGESTED button — pulseaza puternic + scale + halo auriu animat
      Aplicat dinamic de JS (in functie de gameContextHint). */
.action-btn-game.btn-suggested {
    animation: btnSuggestedPulse 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    border-color: #ffd700 !important;
    color: #fff8e0 !important;
    z-index: 5;
    transform: translateY(-2px);
}
.action-btn-game.btn-suggested::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 9px;
    border: 2px solid #ffd700;
    box-shadow:
        0 0 12px rgba(255, 215, 0, 0.8),
        inset 0 0 8px rgba(255, 215, 0, 0.4);
    pointer-events: none;
    animation: btnSuggestedRing 1.4s ease-in-out infinite;
    z-index: 0;
}
.action-btn-game.btn-suggested::after {
    /* Sageata animata sus — "apasa aici!" */
    content: '▾';
    position: absolute;
    top: -22px; left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.95);
    animation: btnArrowBounce 0.9s ease-in-out infinite;
    pointer-events: none;
    z-index: 6;
}
@keyframes btnSuggestedPulse {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 8px rgba(255,215,0,0.4), 0 0 0 0 rgba(255,215,0,0.35); }
    50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 16px rgba(255,215,0,0.7), 0 0 0 6px rgba(255,215,0,0); }
}
@keyframes btnSuggestedRing {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.04); }
}
@keyframes btnArrowBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(4px); }
}

/* 2. NUMBER BADGE — ordine logica de joc (1=Trage, 2=Etaleaza/Lipeste, 3=Arunca) */
.action-btn-game[data-step]::before {
    content: attr(data-step);
    position: absolute;
    top: -7px; left: -7px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd700, #b8860b);
    color: #1a1208;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
    border: 1px solid rgba(0,0,0,0.3);
    pointer-events: none;
    z-index: 4;
    animation: badgeFadeIn 0.4s ease-out;
}
/* Badge dispare cand butonul e in starea "suggested" (ringul preia atentia) */
.action-btn-game.btn-suggested[data-step]::before {
    content: attr(data-step) !important;
    background: linear-gradient(135deg, #fff8e0, #ffd700);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.95), 0 2px 4px rgba(0,0,0,0.5);
}
@keyframes badgeFadeIn {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
}

/* 3. JUST-ENABLED FLASH — cand butonul se activeaza (disabled→enabled), face flash auriu o data */
.action-btn-game.btn-just-enabled {
    animation: btnJustEnabled 0.7s ease-out;
}
@keyframes btnJustEnabled {
    0%   { background-color: rgba(255, 215, 0, 0.5); transform: scale(1); }
    30%  { background-color: rgba(255, 215, 0, 0.85); transform: scale(1.06); }
    100% { background-color: transparent; transform: scale(1); }
}

/* 4. TOOLTIP HELP TEXT — apare pe hover sub buton cu descriere */
.action-btn-game[data-help]::before {
    /* Override::before pentru data-help (cand exista atat data-step cat si data-help, prioritar e step) */
}
.action-btn-game[data-help]:not([data-step]):hover::after,
.action-btn-game[data-help]:focus-visible::after {
    content: attr(data-help);
    position: absolute;
    top: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.92);
    color: #ffd700;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid rgba(255,215,0,0.4);
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 3px 8px rgba(0,0,0,0.6);
    animation: tooltipFadeIn 0.18s ease-out;
}
@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 5. ENABLED-STATE GLOW — buton activ are halou subtil pe culoare (matches data-chip) */
.action-btn-game[data-chip="blue"]:not(:disabled):not(.btn-suggested) { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.35), 0 0 8px rgba(80, 140, 220, 0.18); }
.action-btn-game[data-chip="gold"]:not(:disabled):not(.btn-suggested) { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.35), 0 0 8px rgba(255, 200, 60, 0.22); }
.action-btn-game[data-chip="teal"]:not(:disabled):not(.btn-suggested) { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.35), 0 0 8px rgba(60, 200, 180, 0.2); }
.action-btn-game[data-chip="red"]:not(:disabled):not(.btn-suggested)  { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.35), 0 0 8px rgba(220, 80, 60, 0.22); }
.action-btn-game[data-chip="atu"]:not(:disabled):not(.btn-suggested)  { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.35), 0 0 10px rgba(255, 215, 0, 0.3); }

/* SHAKE feedback cand user-ul da click pe buton disabled */
.action-btn-game.btn-shake {
    animation: btnShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}
@keyframes btnShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* Disabled buttons — pointer events activate ca sa primeasca click events
   (default disabled blocheaza pointer-events). Click-ul e capturat de hookul JS. */
.action-btn-game:disabled {
    pointer-events: auto !important;
}
.action-btn-game:disabled:hover {
    cursor: help !important;
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
    .action-btn-game.btn-suggested,
    .action-btn-game.btn-suggested::before,
    .action-btn-game.btn-suggested::after,
    .action-btn-game.btn-just-enabled,
    .action-btn-game.btn-shake {
        animation: none !important;
    }
}

/* ================================================================================================
   WINNER LAST TILE REVEAL — la inchidere cu 1 piesa, piesa care a ramas
   in mana invingatorului apare in centrul mesei cu sparkle si flip 3D.
   ================================================================================================ */
/* ═══ CLOSING TILE — apare in zona etalare a invingatorului, mic si elegant ═══ */
.mw-closing-tile-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    margin: 2px;
    background: linear-gradient(180deg, rgba(255,215,100,0.18), rgba(184,136,11,0.08));
    border: 1px solid rgba(255,215,100,0.5);
    border-radius: 6px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 215, 100, 0.25);
    animation: mwClosingWrapIn 0.5s cubic-bezier(0.3, 1.2, 0.5, 1) both,
               mwClosingWrapOut 0.5s ease-in 4.5s forwards;
    transform-origin: center bottom;
    position: relative;
}
@keyframes mwClosingWrapIn {
    0%   { opacity: 0; transform: translateY(8px) scale(0.7); }
    60%  { opacity: 1; transform: translateY(-2px) scale(1.05); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mwClosingWrapOut {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.85); }
}

.mw-closing-ribbon {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #1a1208;
    background: linear-gradient(135deg, #ffd700, #b8860b);
    padding: 2px 7px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
    white-space: nowrap;
    animation: mwRibbonShine 2.5s ease-in-out infinite;
}
@keyframes mwRibbonShine {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.18); }
}

.tile.mw-closing-tile {
    border: 1.5px solid #ffd700 !important;
    box-shadow:
        0 0 10px rgba(255, 215, 100, 0.8),
        0 2px 5px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    animation: mwClosingTilePulse 1.6s ease-in-out infinite;
    transform-origin: center center;
}
@keyframes mwClosingTilePulse {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(255, 215, 100, 0.55),
            0 2px 5px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 16px rgba(255, 215, 100, 0.95),
            0 0 28px rgba(255, 200, 60, 0.55),
            0 2px 5px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.7);
        transform: scale(1.04);
    }
}

/* Variant ATU close — mai puternic vizual */
.mw-closing-tile-wrap.mw-closing-atu {
    background: linear-gradient(180deg, rgba(255,215,0,0.28), rgba(184,136,11,0.12));
    border-color: rgba(255,215,0,0.7);
    box-shadow:
        0 3px 12px rgba(255, 215, 0, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 215, 100, 0.4);
}
.mw-closing-tile-wrap.mw-closing-atu .tile.mw-closing-tile {
    border-color: #ffd700 !important;
    border-width: 2px !important;
}
.mw-closing-tile-wrap.mw-closing-atu .mw-closing-ribbon {
    font-size: 9px;
    padding: 2px 8px;
}

/* Sparkles fine, mai mici, mai discrete */
.mw-winner-sparkle {
    position: fixed;
    width: 7px; height: 7px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    background: radial-gradient(circle,
        #fff9e6 0%,
        #ffe099 45%,
        rgba(255, 215, 0, 0.7) 75%,
        transparent 100%);
    box-shadow:
        0 0 6px rgba(255, 220, 130, 0.85),
        0 0 12px rgba(255, 200, 60, 0.5);
    animation: mwWinnerSparkle 1.2s cubic-bezier(0.3, 0.9, 0.5, 1) forwards;
}
@keyframes mwWinnerSparkle {
    0%   { opacity: 0; transform: scale(0.3); }
    25%  { opacity: 1; transform: scale(1.1); }
    65%  { opacity: 0.7; transform: scale(0.85); }
    100% { opacity: 0; transform: scale(0.4); }
}

/* Reduce-motion */
@media (prefers-reduced-motion: reduce) {
    .tile.mw-winner-tile-reveal,
    .mw-winner-sparkle {
        animation-duration: 0.3s !important;
    }
}

/* Tile care pleaca din mana invingatorului spre zona etalat (lift + fade) */
.mw-closing-tile-leaving {
    animation: mwClosingTileLeaving 0.38s cubic-bezier(0.4, 0, 0.6, 1) forwards !important;
    pointer-events: none !important;
}
@keyframes mwClosingTileLeaving {
    0%   { transform: translateY(0) scale(1); opacity: 1; filter: brightness(1); }
    40%  { transform: translateY(-12px) scale(1.05); opacity: 1; filter: brightness(1.4); }
    100% { transform: translateY(-30px) scale(0.6); opacity: 0; filter: brightness(1.6); }
}

@media (prefers-reduced-motion: reduce) {
    .mw-closing-tile-wrap,
    .tile.mw-closing-tile,
    .mw-closing-ribbon,
    .mw-closing-tile-leaving {
        animation: none !important;
    }
    .mw-closing-tile-leaving { opacity: 0 !important; }
}

/* End-game modal — bara MICA cu ATU + ultima piesa (sub scoreboard, discreta) */
.game-end-summary-tiles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 10px auto 6px;
    flex-wrap: wrap;
    padding: 0 8px;
}
.game-end-summary-tiles .ges-slot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: rgba(255, 215, 100, 0.06);
    border: 1px solid rgba(255, 215, 100, 0.22);
    border-radius: 7px;
}
.game-end-summary-tiles .ges-text {
    color: #d4bd8f;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}
.game-end-summary-tiles .ges-bonus {
    display: inline-block;
    margin-left: 3px;
    color: #1a1208;
    background: linear-gradient(135deg, #ffd700, #b8860b);
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.game-end-summary-tiles .ges-mini-tile {
    width: 22px !important;
    height: 30px !important;
    font-size: 10px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    flex-shrink: 0;
}
.game-end-summary-tiles .ges-mini-tile .tile-suit-dot {
    width: 6px !important;
    height: 6px !important;
    margin-top: 1px !important;
}

/* ATU slot — accent verde subtil */
.game-end-summary-tiles .ges-slot-atu {
    background: rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.3);
}
.game-end-summary-tiles .ges-slot-atu .ges-text { color: #81c784; }

/* Inchidere — accent auriu */
.game-end-summary-tiles .ges-slot-closing {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.32);
}
.game-end-summary-tiles .ges-slot-closing .ges-text { color: #ffd866; }
.game-end-summary-tiles .ges-slot-closing .ges-mini-tile {
    border-color: rgba(255, 215, 0, 0.6) !important;
    box-shadow:
        0 0 5px rgba(255, 215, 0, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* Combo "inchis cu ATU" — accent special discret */
.game-end-summary-tiles .ges-atu-combo {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.14), rgba(76, 175, 80, 0.08));
    border-color: rgba(255, 215, 0, 0.55);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.25);
}
.game-end-summary-tiles .ges-atu-combo .ges-mini-tile {
    border-color: #ffd700 !important;
    box-shadow:
        0 0 8px rgba(255, 215, 0, 0.7),
        0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* ================================================================================================
   ZONE ETALARE — DIMENSIUNI FIXE pentru 4 jucatori cu scroll intern (FARA SPATII GOALE)

   CALCUL DESKTOP (viewport 1920×1080, frame 12px lemn):
     Latime utila game-play-view:    1920 − 24 (frame) = 1896px
     − sidebar col 5:                            -180px → 1716px
     − gap × 4 (intre 5 col):  4×2px (redus la 2px) = -8px → 1708px
     Per zona = 1708 / 4 = 427px (latime fixa, NU se modifica de continut)

     Inaltime utila:               1080 − 24 (frame) = 1056px
     − hand-bot row:                              -215px → 841px
     − gap × 4 (intre 5 row):  4×2px           = -8px → 833px
     Per zona row = 833 / 4 = 208.25px (inaltime fixa)

   Total zona unica = 427 × 208 = 88.7k px² fix, scroll intern cand e plin.
   ================================================================================================ */
.game-play-view {
    /* Reducem gap-urile la 2px (era 4px) ca sa nu raman spatii goale intre zone */
    gap: 2px !important;
}
.game-play-view .etalare-zone {
    /* Lock dimensiuni: containerul NU isi modifica latimea/inaltimea pe baza continutului */
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    /* contain: previne ca melduri lungi sa "imping" layout-ul parent */
    contain: layout size;
    /* Padding compact (era 18px sus, 6px restul) — castigam loc pentru continut */
    padding: 14px 4px 4px !important;
    box-sizing: border-box;
}
.game-play-view .etalare-zone > .etalare-scroll {
    /* Wrapper-ul de scroll umple TOT spatiul zonei (fara goluri) */
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    gap: 2px !important;
}
/* Meld groups in interior: scroll orizontal individual daca un meld e prea lung,
   ca sa nu impinga latimea zonei. Stack vertical compact. */
.game-play-view .etalare-zone .table-meld-group {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    margin: 0;
}
.game-play-view .etalare-zone .table-meld-group::-webkit-scrollbar { height: 3px; }
.game-play-view .etalare-zone .table-meld-group::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.35); border-radius: 2px;
}

/* ================================================================================================
   MOBILE PORTRAIT — extindere zona piese seat-south (mai mult loc pentru manevrare)
   + scoatere 2 buline aurii decorative din colturi hand-scroll-wrapper

   CALCUL SPATIU PORTRAIT (Pixel 6/7 — viewport 412px):
     Viewport:                       412px
     − wood frame border (.game-play-view 2×12px):  -24px → 388px
     − brackets ::before/::after (2×34px default):  -68px → 320px (DEFAULT)
     − hand-scroll-arrow zone (≈4px buffer):         -4px → 316px
     − player-hand padding (2×30px default):        -60px → 256px (FOARTE STRAMT)

   OPTIMIZARE: in portrait scoatem brackets-urile metalice (cu nituri) si
   reducem padding la 2px → câștigăm ~124px, total disponibil 384px pentru piese.
   Cu --tile-width: 32px + 2px gap, intra 7 piese pe rand × 2 rafturi = 14 tile total.
   7 × 32 + 6 × 2 = 236px → ramane 148px breathing room pentru drag/manevra.
   ================================================================================================ */
@media (max-width: 767px) and (orientation: portrait) {
    /* 1. Scoate cele 2 buline aurii decorative (10×10px) din capetele wrapper-ului */
    .seat-south .player-area > .hand-scroll-wrapper::before,
    .seat-south .player-area > .hand-scroll-wrapper::after {
        display: none !important;
    }
    /* 2. Scoate complet brackets metalice cu nituri (34px stanga + 34px dreapta = 68px castigati) */
    .seat-south .player-area::before,
    .seat-south .player-area::after {
        display: none !important;
    }
    /* 3. Padding lateral pe player-hand redus la minim (30px → 2px = 56px castigati) */
    .seat-south .player-hand {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    /* 4. Hand-wrapper full-width fara margins/borders laterale */
    .seat-south .hand-scroll-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* 5. Player-area in sine fara padding lateral (daca ar avea de la default) */
    .seat-south .player-area {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* 6. Hand-scroll-arrow ramane functional (overlay 28px) dar tras spre margine
          ca sa nu acopere piese */
    .seat-south .hand-scroll-arrow.scroll-left  { left: 0 !important; }
    .seat-south .hand-scroll-arrow.scroll-right { right: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WAITING ROOM — ACTIUNI INLINE PE SEAT (Sunt gata + Paraseste)
   Vizibile direct pe cardul user-ului, nu mai trebuie scroll la footer.
   ═══════════════════════════════════════════════════════════════════════ */
.mw-lx-seat .mw-lx-seat-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    grid-column: 1 / -1;
    align-items: stretch;
}
.mw-lx-seat .mw-seat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 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-lx-seat .mw-seat-btn .material-symbols-rounded { font-size: 22px; }

/* SUNT GATA / ANULEAZA — buton primar, ia 2/3 din spatiul disponibil */
.mw-lx-seat .mw-seat-ready { flex: 2 1 0; }

/* PARASESTE — IDENTIC cu .mw-lx-btn.ghost (la fel ca cel din footer) */
.mw-lx-seat .mw-seat-leave {
    background: transparent;
    color: var(--lx-t2);
    border: 1px solid var(--lx-h2);
    flex: 1 1 0;
}
.mw-lx-seat .mw-seat-leave:hover {
    color: var(--lx-t1);
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--lx-h3);
}
.mw-lx-seat .mw-seat-leave:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

/* SUNT GATA — IDENTIC cu .mw-lx-btn.primary (auriu frumos) + pulse atractor */
.mw-lx-seat .mw-seat-ready.not-ready {
    background: linear-gradient(180deg, var(--lx-g200) 0%, var(--lx-g400) 55%, var(--lx-g500) 100%);
    color: var(--lx-g800);
    border: 1px solid var(--lx-g500);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 210, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(212, 160, 64, 0.28),
        0 1px 3px rgba(0, 0, 0, 0.3);
    animation: seatReadyAttract 1.6s ease-in-out infinite;
}
.mw-lx-seat .mw-seat-ready.not-ready:hover { filter: brightness(1.06); }
@keyframes seatReadyAttract {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 245, 210, 0.55),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2),
            0 4px 12px rgba(212, 160, 64, 0.28),
            0 1px 3px rgba(0, 0, 0, 0.3),
            0 0 0 0 rgba(212, 160, 64, 0.5);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 245, 210, 0.55),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2),
            0 4px 14px rgba(212, 160, 64, 0.4),
            0 1px 3px rgba(0, 0, 0, 0.3),
            0 0 0 6px rgba(212, 160, 64, 0);
    }
}

/* ANULEAZA (is-ready) — IDENTIC cu .mw-lx-btn.primary.is-ready (verde) */
.mw-lx-seat .mw-seat-ready.is-ready {
    background: linear-gradient(180deg, rgba(127,181,116,0.9), rgba(80,140,70,0.95));
    border: 1px solid rgba(80,140,70,0.8);
    color: #0d1f09;
    box-shadow:
        inset 0 1px 0 rgba(200,240,180,0.45),
        0 4px 12px rgba(127,181,116,0.28);
}
.mw-lx-seat .mw-seat-ready.is-ready:hover { filter: brightness(1.06); }

/* Disabled (host trebuie sa astepte jucatorii) */
.mw-lx-seat .mw-seat-ready.is-disabled,
.mw-lx-seat .mw-seat-ready:disabled {
    background: linear-gradient(135deg, #9ca3af, #6b7280) !important;
    cursor: not-allowed !important;
    opacity: 0.65;
    animation: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Card user-ului iese in evidenta cu border auriu cand are actiuni inline */
.mw-lx-seat.mw-card-me {
    border-color: rgba(255, 215, 0, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

@media (prefers-reduced-motion: reduce) {
    .mw-lx-seat .mw-seat-ready.not-ready { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   ATU CLOSE CELEBRATION — banner profesional cu raze + confetti
   Trigger: window.showClosingTile(...) când closedWithAtu = true
   ════════════════════════════════════════════════════════════════ */
.atu-celebration-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, .5) 0%,
        rgba(0, 0, 0, .15) 60%,
        transparent 100%);
    animation: atuOverlayIn .35s ease-out;
}
.atu-celebration-overlay.atu-celebration-leaving {
    animation: atuOverlayOut .45s ease-in forwards;
}
@keyframes atuOverlayIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes atuOverlayOut { from { opacity: 1; } to { opacity: 0; } }

.atu-celebration-banner {
    position: relative;
    padding: 38px 56px 32px;
    border-radius: 18px;
    background:
        radial-gradient(ellipse at 50% 0%,
            rgba(255, 235, 150, .25) 0%,
            transparent 65%),
        linear-gradient(160deg,
            #1a0e04 0%,
            #2a1808 45%,
            #1a0e04 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, .6),
        0 0 30px rgba(255, 215, 0, .35),
        0 24px 60px rgba(0, 0, 0, .7),
        inset 0 1px 0 rgba(255, 230, 160, .25),
        inset 0 -1px 0 rgba(0, 0, 0, .6);
    text-align: center;
    overflow: hidden;
    transform: scale(.7) rotateX(-15deg);
    animation: atuBannerPop .7s cubic-bezier(.34, 1.56, .64, 1) forwards;
    min-width: 320px;
    max-width: 92vw;
}
@keyframes atuBannerPop {
    0%   { transform: scale(.7) rotateX(-15deg); opacity: 0; }
    60%  { transform: scale(1.04) rotateX(2deg); opacity: 1; }
    100% { transform: scale(1) rotateX(0); opacity: 1; }
}

/* Raze radiale animate în spate */
.atu-celebration-rays {
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, .12) 8deg,
        transparent 18deg,
        rgba(255, 215, 0, .12) 28deg,
        transparent 38deg,
        rgba(255, 215, 0, .15) 50deg,
        transparent 60deg,
        rgba(255, 215, 0, .1) 75deg,
        transparent 90deg);
    background-size: 100% 100%;
    animation: atuRaysRotate 8s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes atuRaysRotate { to { transform: rotate(360deg); } }

.atu-celebration-crown {
    position: relative;
    z-index: 2;
    font-size: 44px;
    line-height: 1;
    color: #ffd700;
    text-shadow:
        0 0 20px rgba(255, 215, 0, .9),
        0 0 40px rgba(255, 215, 0, .5),
        0 2px 4px rgba(0, 0, 0, .8);
    margin-bottom: 8px;
    animation: atuCrownFloat 2.4s ease-in-out infinite;
}
@keyframes atuCrownFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-4px) rotate(3deg); }
}

.atu-celebration-title {
    position: relative;
    z-index: 2;
    font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 4px;
    background: linear-gradient(180deg,
        #fff8d4 0%,
        #ffd700 45%,
        #b8860b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, .4));
    margin-bottom: 4px;
}

.atu-celebration-sub {
    position: relative;
    z-index: 2;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 215, 0, .75);
    font-weight: 600;
    margin-bottom: 18px;
}

.atu-celebration-points {
    position: relative;
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 28px;
    border-radius: 12px;
    background: linear-gradient(180deg,
        rgba(255, 215, 0, .18) 0%,
        rgba(184, 134, 11, .25) 100%);
    border: 1px solid rgba(255, 215, 0, .45);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 160, .3),
        0 4px 12px rgba(0, 0, 0, .5);
    margin-bottom: 14px;
}
.atu-pts-num {
    font-family: 'Bebas Neue', 'Oswald', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: #ffd700;
    text-shadow:
        0 0 15px rgba(255, 215, 0, .7),
        0 2px 4px rgba(0, 0, 0, .8);
    letter-spacing: 1px;
}
.atu-pts-label {
    font-size: 10px;
    letter-spacing: 3px;
    color: rgba(255, 235, 160, .8);
    margin-top: 2px;
    font-weight: 600;
}

.atu-celebration-breakdown {
    position: relative;
    z-index: 2;
    font-size: 11px;
    color: rgba(255, 235, 160, .85);
    letter-spacing: 1px;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.atu-celebration-breakdown b { color: #ffd700; font-weight: 700; }
.atu-sep { color: rgba(255, 215, 0, .35); }

/* Confetti — particule aurii care cad */
.atu-confetti-host {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.atu-confetti {
    position: absolute;
    top: -20px;
    width: 8px;
    height: 12px;
    border-radius: 1px;
    box-shadow: 0 0 4px rgba(255, 215, 0, .6);
    animation: atuConfettiFall linear forwards;
}
@keyframes atuConfettiFall {
    0%   { transform: translateY(0) rotate(0deg);   opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: .6; }
}

@media (max-width: 480px) {
    .atu-celebration-banner { padding: 28px 32px 22px; min-width: 260px; }
    .atu-celebration-title { font-size: 24px; letter-spacing: 3px; }
    .atu-celebration-crown { font-size: 36px; }
    .atu-pts-num { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .atu-celebration-rays,
    .atu-celebration-crown,
    .atu-confetti { animation: none !important; }
    .atu-celebration-banner { animation: atuBannerPop .2s ease-out forwards; }
}