/* Video Poker - Joker Wild | Faithful Flash Recreation */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
    /* Core colors — "Poker Wild" default theme */
    --vp-bg: #000;
    --vp-red: #cc0000;
    --vp-red-dark: #990000;
    --vp-red-light: #ff4444;
    --vp-gold: #ffd700;
    --vp-yellow: #ffff00;
    --vp-white: #fff;
    --vp-gray: #999;
    --vp-green: #00cc00;
    /* Surfaces */
    --vp-surface: #111;
    --vp-surface-tint: #0a0000;
    --vp-surface-tint2: #1a0000;
    --vp-modal-bg: #1a1a2e;
    --vp-modal-bg-dark: #0a0a1a;
    --vp-modal-border: #446;
    /* Borders */
    --vp-border: #336;
    --vp-border-accent: rgba(255, 215, 0, 0.12);
    /* Bars (bonus meter) */
    --vp-bar-bg: #993300;
    --vp-bar-bg-dark: #661a00;
    --vp-bar-border: rgba(200, 100, 0, 0.4);
    --vp-bar-fill: #ffdd00;
    --vp-bar-fill-dark: #ccaa00;
    /* Buttons */
    --vp-btn-bg: #444;
    --vp-btn-bg-dark: #222;
    --vp-btn-border: #666;
    /* Text */
    --vp-text-dim: #666;
    --vp-text-muted: #ccc;
    /* Card sizing: native images 72×97px — cap at 96×134 (Flash original, sharp) */
    --vp-card-w: clamp(60px, 11vw, 96px);
    --vp-card-h: clamp(84px, 15.4vw, 134px);
    /* Safe area insets (iOS notch/home indicator) */
    --sab: env(safe-area-inset-bottom, 0px);
    --sat: env(safe-area-inset-top, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

/* ══════════════════════════════════════════════
   THEME VARIATIONS (mirroring Septica themes)
   ══════════════════════════════════════════════ */

/* === CLASSIC THEMES === */

[data-theme="midnight"] {
    --vp-bg: #0a0e1a; --vp-red: #2d5a8f; --vp-red-dark: #1e3a5f; --vp-red-light: #4a7ab8;
    --vp-gold: #c8d4ff; --vp-yellow: #e0e7ff; --vp-gray: #8899aa; --vp-green: #4ade80;
    --vp-surface: #141a27; --vp-surface-tint: #0a0e1a; --vp-surface-tint2: #141a2a;
    --vp-modal-bg: #1e2640; --vp-modal-bg-dark: #0a0e1a; --vp-modal-border: #3a5a8a;
    --vp-border: #2a4060; --vp-border-accent: rgba(200, 212, 255, 0.12);
    --vp-bar-bg: #1a3055; --vp-bar-bg-dark: #0f2035; --vp-bar-border: rgba(45, 90, 143, 0.4);
    --vp-bar-fill: #c8d4ff; --vp-bar-fill-dark: #9aaad0;
    --vp-btn-bg: #2a3550; --vp-btn-bg-dark: #1a2538; --vp-btn-border: #4a6080;
    --vp-text-dim: #556680; --vp-text-muted: #aabbcc;
}

[data-theme="ruby"] {
    --vp-bg: #0e0808; --vp-red: #8b2e2e; --vp-red-dark: #5a1e1e; --vp-red-light: #b05050;
    --vp-gold: #ffd700; --vp-yellow: #ffe44d; --vp-gray: #998888; --vp-green: #4ade80;
    --vp-surface: #1a1010; --vp-surface-tint: #0e0808; --vp-surface-tint2: #1a1010;
    --vp-modal-bg: #2a1a1a; --vp-modal-bg-dark: #0e0808; --vp-modal-border: #5a3030;
    --vp-border: #4a2020; --vp-border-accent: rgba(255, 215, 0, 0.12);
    --vp-bar-bg: #5a2020; --vp-bar-bg-dark: #3a1010; --vp-bar-border: rgba(139, 46, 46, 0.5);
    --vp-bar-fill: #ffd700; --vp-bar-fill-dark: #ccaa00;
    --vp-btn-bg: #3a2525; --vp-btn-bg-dark: #1a1010; --vp-btn-border: #5a4040;
    --vp-text-dim: #776060; --vp-text-muted: #ccbbbb;
}

[data-theme="purple"] {
    --vp-bg: #0e0a18; --vp-red: #6a3d9a; --vp-red-dark: #4a2a70; --vp-red-light: #8a5dc0;
    --vp-gold: #d4af37; --vp-yellow: #f0d060; --vp-gray: #9988aa; --vp-green: #4ade80;
    --vp-surface: #1a1425; --vp-surface-tint: #0e0a18; --vp-surface-tint2: #1a1428;
    --vp-modal-bg: #2a2040; --vp-modal-bg-dark: #0e0a18; --vp-modal-border: #5a3a8a;
    --vp-border: #3a2a60; --vp-border-accent: rgba(212, 175, 55, 0.12);
    --vp-bar-bg: #3a2060; --vp-bar-bg-dark: #2a1040; --vp-bar-border: rgba(106, 61, 154, 0.5);
    --vp-bar-fill: #d4af37; --vp-bar-fill-dark: #a08928;
    --vp-btn-bg: #302540; --vp-btn-bg-dark: #1a1028; --vp-btn-border: #5a4070;
    --vp-text-dim: #665580; --vp-text-muted: #ccbbdd;
}

[data-theme="ocean"] {
    --vp-bg: #081414; --vp-red: #2e8080; --vp-red-dark: #1e5a5a; --vp-red-light: #50a8a8;
    --vp-gold: #ff6b6b; --vp-yellow: #ff9090; --vp-gray: #889999; --vp-green: #4ade80;
    --vp-surface: #102020; --vp-surface-tint: #081414; --vp-surface-tint2: #102020;
    --vp-modal-bg: #1a3030; --vp-modal-bg-dark: #081414; --vp-modal-border: #3a6060;
    --vp-border: #2a5050; --vp-border-accent: rgba(255, 107, 107, 0.12);
    --vp-bar-bg: #1a4545; --vp-bar-bg-dark: #0f3030; --vp-bar-border: rgba(46, 128, 128, 0.5);
    --vp-bar-fill: #ff6b6b; --vp-bar-fill-dark: #cc5555;
    --vp-btn-bg: #253535; --vp-btn-bg-dark: #102020; --vp-btn-border: #4a6868;
    --vp-text-dim: #558080; --vp-text-muted: #aacccc;
}

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

[data-theme="texas"] {
    --vp-bg: #0d0a00; --vp-red: #8b6508; --vp-red-dark: #5a4200; --vp-red-light: #b8860b;
    --vp-gold: #ffb700; --vp-yellow: #ffd700; --vp-gray: #998866; --vp-green: #4ade80;
    --vp-surface: #1a1400; --vp-surface-tint: #0d0a00; --vp-surface-tint2: #1a1400;
    --vp-modal-bg: #2a2000; --vp-modal-bg-dark: #0d0a00; --vp-modal-border: #5a4a00;
    --vp-border: #3a3000; --vp-border-accent: rgba(255, 183, 0, 0.15);
    --vp-bar-bg: #5a4500; --vp-bar-bg-dark: #3a2d00; --vp-bar-border: rgba(139, 101, 8, 0.5);
    --vp-bar-fill: #ffb700; --vp-bar-fill-dark: #cc9200;
    --vp-btn-bg: #3a3000; --vp-btn-bg-dark: #1a1400; --vp-btn-border: #5a4a00;
    --vp-text-dim: #776600; --vp-text-muted: #ccaa66;
}

[data-theme="vegas"] {
    --vp-bg: #0e000e; --vp-red: #9b30ff; --vp-red-dark: #6a1eb0; --vp-red-light: #bb60ff;
    --vp-gold: #ff00ff; --vp-yellow: #ff69ff; --vp-gray: #996699; --vp-green: #00ff88;
    --vp-surface: #1a0a1a; --vp-surface-tint: #0e000e; --vp-surface-tint2: #1a0a1a;
    --vp-modal-bg: #2a1a2a; --vp-modal-bg-dark: #0e000e; --vp-modal-border: #6a3a6a;
    --vp-border: #4a2a4a; --vp-border-accent: rgba(255, 0, 255, 0.15);
    --vp-bar-bg: #4a1a4a; --vp-bar-bg-dark: #2a0a2a; --vp-bar-border: rgba(155, 48, 255, 0.5);
    --vp-bar-fill: #ff00ff; --vp-bar-fill-dark: #cc00cc;
    --vp-btn-bg: #3a2a3a; --vp-btn-bg-dark: #1a0a1a; --vp-btn-border: #6a4a6a;
    --vp-text-dim: #774477; --vp-text-muted: #cc88cc;
}

[data-theme="monaco"] {
    --vp-bg: #080808; --vp-red: #5a5a5a; --vp-red-dark: #3a3a3a; --vp-red-light: #808080;
    --vp-gold: #e0e0e0; --vp-yellow: #ffffff; --vp-gray: #888888; --vp-green: #4ade80;
    --vp-surface: #141414; --vp-surface-tint: #080808; --vp-surface-tint2: #141414;
    --vp-modal-bg: #1e1e1e; --vp-modal-bg-dark: #080808; --vp-modal-border: #4a4a4a;
    --vp-border: #333333; --vp-border-accent: rgba(224, 224, 224, 0.1);
    --vp-bar-bg: #3a3a3a; --vp-bar-bg-dark: #2a2a2a; --vp-bar-border: rgba(90, 90, 90, 0.4);
    --vp-bar-fill: #e0e0e0; --vp-bar-fill-dark: #b0b0b0;
    --vp-btn-bg: #3a3a3a; --vp-btn-bg-dark: #1a1a1a; --vp-btn-border: #5a5a5a;
    --vp-text-dim: #666666; --vp-text-muted: #bbbbbb;
}

[data-theme="macau"] {
    --vp-bg: #120000; --vp-red: #b22222; --vp-red-dark: #8b0000; --vp-red-light: #dc3030;
    --vp-gold: #ffd700; --vp-yellow: #ffe44d; --vp-gray: #998888; --vp-green: #4ade80;
    --vp-surface: #1a0a0a; --vp-surface-tint: #120000; --vp-surface-tint2: #1e0808;
    --vp-modal-bg: #2a1414; --vp-modal-bg-dark: #120000; --vp-modal-border: #6a2020;
    --vp-border: #4a1515; --vp-border-accent: rgba(255, 215, 0, 0.15);
    --vp-bar-bg: #6a1515; --vp-bar-bg-dark: #4a0808; --vp-bar-border: rgba(178, 34, 34, 0.5);
    --vp-bar-fill: #ffd700; --vp-bar-fill-dark: #ccaa00;
    --vp-btn-bg: #3a2020; --vp-btn-bg-dark: #1a0808; --vp-btn-border: #5a3535;
    --vp-text-dim: #775555; --vp-text-muted: #ccaaaa;
}

[data-theme="atlantic"] {
    --vp-bg: #081420; --vp-red: #2e7aaa; --vp-red-dark: #1e5a7a; --vp-red-light: #50a0d0;
    --vp-gold: #ff8c42; --vp-yellow: #ffaa69; --vp-gray: #8899aa; --vp-green: #4ade80;
    --vp-surface: #10202a; --vp-surface-tint: #081420; --vp-surface-tint2: #10202a;
    --vp-modal-bg: #1a3040; --vp-modal-bg-dark: #081420; --vp-modal-border: #3a6080;
    --vp-border: #2a4a60; --vp-border-accent: rgba(255, 140, 66, 0.12);
    --vp-bar-bg: #1a4060; --vp-bar-bg-dark: #0f2a40; --vp-bar-border: rgba(46, 122, 170, 0.5);
    --vp-bar-fill: #ff8c42; --vp-bar-fill-dark: #cc6e35;
    --vp-btn-bg: #253545; --vp-btn-bg-dark: #10202a; --vp-btn-border: #4a6878;
    --vp-text-dim: #557088; --vp-text-muted: #aac0d0;
}

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

[data-theme="diamond"] {
    --vp-bg: #000005; --vp-red: #006699; --vp-red-dark: #004466; --vp-red-light: #0088cc;
    --vp-gold: #00d4ff; --vp-yellow: #5ae4ff; --vp-gray: #667788; --vp-green: #00ff88;
    --vp-surface: #0a0a15; --vp-surface-tint: #000005; --vp-surface-tint2: #0a0a15;
    --vp-modal-bg: #141425; --vp-modal-bg-dark: #000005; --vp-modal-border: #2a2a55;
    --vp-border: #1a1a40; --vp-border-accent: rgba(0, 212, 255, 0.12);
    --vp-bar-bg: #0a2030; --vp-bar-bg-dark: #051520; --vp-bar-border: rgba(0, 102, 153, 0.5);
    --vp-bar-fill: #00d4ff; --vp-bar-fill-dark: #0099cc;
    --vp-btn-bg: #1a2030; --vp-btn-bg-dark: #0a1020; --vp-btn-border: #3a4a5a;
    --vp-text-dim: #445566; --vp-text-muted: #99aabb;
}

[data-theme="onyx"] {
    --vp-bg: #000000; --vp-red: #5a4a20; --vp-red-dark: #3a3010; --vp-red-light: #8b7530;
    --vp-gold: #c9a961; --vp-yellow: #e0c589; --vp-gray: #777766; --vp-green: #4ade80;
    --vp-surface: #0f0f0a; --vp-surface-tint: #050500; --vp-surface-tint2: #0f0f0a;
    --vp-modal-bg: #1a1a10; --vp-modal-bg-dark: #050500; --vp-modal-border: #3a3a20;
    --vp-border: #2a2a15; --vp-border-accent: rgba(201, 169, 97, 0.12);
    --vp-bar-bg: #3a3010; --vp-bar-bg-dark: #2a2008; --vp-bar-border: rgba(90, 74, 32, 0.5);
    --vp-bar-fill: #c9a961; --vp-bar-fill-dark: #a08948;
    --vp-btn-bg: #2a2a1a; --vp-btn-bg-dark: #0f0f0a; --vp-btn-border: #4a4a30;
    --vp-text-dim: #555540; --vp-text-muted: #aaa990;
}

[data-theme="crimson"] {
    --vp-bg: #000000; --vp-red: #800020; --vp-red-dark: #500010; --vp-red-light: #b01030;
    --vp-gold: #dc143c; --vp-yellow: #ff1744; --vp-gray: #776666; --vp-green: #4ade80;
    --vp-surface: #0f0505; --vp-surface-tint: #050000; --vp-surface-tint2: #0f0505;
    --vp-modal-bg: #1a0a0a; --vp-modal-bg-dark: #050000; --vp-modal-border: #4a1a1a;
    --vp-border: #3a1010; --vp-border-accent: rgba(220, 20, 60, 0.12);
    --vp-bar-bg: #400018; --vp-bar-bg-dark: #280010; --vp-bar-border: rgba(128, 0, 32, 0.5);
    --vp-bar-fill: #dc143c; --vp-bar-fill-dark: #a00020;
    --vp-btn-bg: #2a1515; --vp-btn-bg-dark: #0f0505; --vp-btn-border: #4a2525;
    --vp-text-dim: #664444; --vp-text-muted: #bb9999;
}

[data-theme="emerald"] {
    --vp-bg: #000000; --vp-red: #1e8050; --vp-red-dark: #105030; --vp-red-light: #30a870;
    --vp-gold: #50c878; --vp-yellow: #7ce39d; --vp-gray: #668877; --vp-green: #50c878;
    --vp-surface: #051a0f; --vp-surface-tint: #000a05; --vp-surface-tint2: #051a0f;
    --vp-modal-bg: #0a2a18; --vp-modal-bg-dark: #000a05; --vp-modal-border: #1a4a30;
    --vp-border: #103820; --vp-border-accent: rgba(80, 200, 120, 0.12);
    --vp-bar-bg: #0a3020; --vp-bar-bg-dark: #052010; --vp-bar-border: rgba(30, 128, 80, 0.5);
    --vp-bar-fill: #50c878; --vp-bar-fill-dark: #3a9b5c;
    --vp-btn-bg: #152a20; --vp-btn-bg-dark: #051a0f; --vp-btn-border: #2a4a38;
    --vp-text-dim: #447755; --vp-text-muted: #99ccaa;
}

[data-theme="platinum"] {
    --vp-bg: #000000; --vp-red: #606060; --vp-red-dark: #404040; --vp-red-light: #888888;
    --vp-gold: #e5e4e2; --vp-yellow: #ffffff; --vp-gray: #777777; --vp-green: #4ade80;
    --vp-surface: #0f0f0f; --vp-surface-tint: #050505; --vp-surface-tint2: #0f0f0f;
    --vp-modal-bg: #1a1a1a; --vp-modal-bg-dark: #050505; --vp-modal-border: #3a3a3a;
    --vp-border: #2a2a2a; --vp-border-accent: rgba(229, 228, 226, 0.1);
    --vp-bar-bg: #303030; --vp-bar-bg-dark: #1a1a1a; --vp-bar-border: rgba(96, 96, 96, 0.4);
    --vp-bar-fill: #e5e4e2; --vp-bar-fill-dark: #b8b7b5;
    --vp-btn-bg: #333333; --vp-btn-bg-dark: #1a1a1a; --vp-btn-border: #555555;
    --vp-text-dim: #666666; --vp-text-muted: #bbbbbb;
}

/* === MODERN THEMES === */

[data-theme="haze"] {
    --vp-bg: #080c18; --vp-red: #4a5cc0; --vp-red-dark: #3a4a98; --vp-red-light: #667eea;
    --vp-gold: #a78bfa; --vp-yellow: #c4b5fd; --vp-gray: #7788aa; --vp-green: #4ade80;
    --vp-surface: #101525; --vp-surface-tint: #080c18; --vp-surface-tint2: #101525;
    --vp-modal-bg: #1a2040; --vp-modal-bg-dark: #080c18; --vp-modal-border: #3a4a80;
    --vp-border: #2a3560; --vp-border-accent: rgba(167, 139, 250, 0.12);
    --vp-bar-bg: #2a3060; --vp-bar-bg-dark: #1a2040; --vp-bar-border: rgba(74, 92, 192, 0.5);
    --vp-bar-fill: #a78bfa; --vp-bar-fill-dark: #8065d0;
    --vp-btn-bg: #252b45; --vp-btn-bg-dark: #101525; --vp-btn-border: #4a5578;
    --vp-text-dim: #556088; --vp-text-muted: #aab0cc;
}

[data-theme="forest"] {
    --vp-bg: #081410; --vp-red: #059669; --vp-red-dark: #047857; --vp-red-light: #10b981;
    --vp-gold: #10b981; --vp-yellow: #34d399; --vp-gray: #668877; --vp-green: #10b981;
    --vp-surface: #0f1915; --vp-surface-tint: #081410; --vp-surface-tint2: #0f1915;
    --vp-modal-bg: #142a20; --vp-modal-bg-dark: #081410; --vp-modal-border: #2a4a38;
    --vp-border: #1a3828; --vp-border-accent: rgba(16, 185, 129, 0.12);
    --vp-bar-bg: #0a3020; --vp-bar-bg-dark: #052010; --vp-bar-border: rgba(5, 150, 105, 0.5);
    --vp-bar-fill: #10b981; --vp-bar-fill-dark: #059669;
    --vp-btn-bg: #1a2f25; --vp-btn-bg-dark: #0f1915; --vp-btn-border: #2a4a38;
    --vp-text-dim: #447755; --vp-text-muted: #99ccaa;
}

/* Light theme VP variable overrides */
[data-theme="light"] {
    --vp-bg: #f0f2f4; --vp-red: #2563eb; --vp-red-dark: #1d4ed8; --vp-red-light: #3b82f6;
    --vp-gold: #b8860b; --vp-yellow: #d97706; --vp-gray: #6b7280; --vp-green: #16a34a;
    --vp-surface: #ffffff; --vp-surface-tint: #f0f2f4; --vp-surface-tint2: #e6e8eb;
    --vp-modal-bg: #ffffff; --vp-modal-bg-dark: #f0f2f4; --vp-modal-border: #d1d5db;
    --vp-border: #d1d5db; --vp-border-accent: rgba(37, 99, 235, 0.15);
    --vp-bar-bg: #dcdfe5; --vp-bar-bg-dark: #c8ccd5; --vp-bar-border: rgba(37, 99, 235, 0.2);
    --vp-bar-fill: #3b82f6; --vp-bar-fill-dark: #2563eb;
    --vp-btn-bg: #e5e7eb; --vp-btn-bg-dark: #d1d5db; --vp-btn-border: #9ca3af;
    --vp-text-dim: #9ca3af; --vp-text-muted: #4b5563;
}

html {
    height: 100%;
    height: 100dvh;
    -webkit-font-smoothing: antialiased;
}

html, body {
    background: var(--vp-bg);
    color: var(--vp-white);
    font-family: Arial, Verdana, 'Inter', sans-serif;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
}

@supports (-webkit-touch-callout: none) {
    body { height: -webkit-fill-available; }
}

/* ══════════════════════════════════════════════
   TOP BAR (identical to Septica — position: relative)
   ══════════════════════════════════════════════ */
.top-bar {
    position: relative;
    width: 100%;
    min-height: 40px;
    height: auto;
    z-index: 200;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--vp-border-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-section { position: relative; z-index: 2; }

.brand-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--vp-gold) 0%, var(--vp-yellow) 100%);
    border-radius: 10px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--vp-gold) 50%, transparent), inset 0 -2px 8px rgba(0, 0, 0, 0.2), inset 0 2px 8px rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-icon .material-symbols-rounded {
    font-size: 22px;
    color: #000;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.brand-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px color-mix(in srgb, var(--vp-gold) 60%, transparent), inset 0 -2px 8px rgba(0, 0, 0, 0.2), inset 0 2px 8px rgba(255, 255, 255, 0.3);
}

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

.brand-title {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--vp-gold) 0%, var(--vp-yellow) 50%, var(--vp-gold) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
    text-shadow: none;
}

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

.actions-section { position: relative; z-index: 2; }

.action-btn {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid color-mix(in srgb, var(--vp-gold) 15%, transparent);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0;
}

.action-btn:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--vp-gold) 20%, transparent) 0%, color-mix(in srgb, var(--vp-gold) 10%, transparent) 100%);
    border-color: color-mix(in srgb, var(--vp-gold) 40%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--vp-gold) 30%, transparent);
}

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

.action-btn:hover .material-symbols-rounded {
    color: var(--vp-gold);
}

.profile-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--vp-gold) 30%, transparent);
}

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

[data-theme="light"] .action-btn {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #475569;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .action-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.06) 100%);
    border-color: rgba(59, 130, 246, 0.35);
    color: #0f172a;
}

[data-theme="light"] .brand-title {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #1e40af 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .brand-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .brand-icon .material-symbols-rounded {
    color: #2563eb;
}

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

/* Light theme — game area overrides */
[data-theme="light"] .vp-bonus-area {
    background: linear-gradient(180deg, rgba(230, 232, 235, 0.7), rgba(230, 232, 235, 0.75)), url('assets/img/blue-fire.jpg') center/cover no-repeat;
    border-color: rgba(37, 99, 235, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .vp-hand-name { color: #333 !important; text-shadow: none; }
[data-theme="light"] .vp-pay { color: var(--vp-gold); text-shadow: none; }
[data-theme="light"] .vp-mini-bonus {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.06));
    border-color: rgba(37, 99, 235, 0.25);
}
[data-theme="light"] .vp-mini-bonus-label { color: var(--vp-gold); }
[data-theme="light"] .vp-mini-bonus-value { color: #333; }
[data-theme="light"] .vp-paytable-row.active {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.12));
}
[data-theme="light"] .vp-paytable-row.active .vp-hand-name { color: var(--vp-gold) !important; }
[data-theme="light"] .vp-cards { background: #e8eaed; }
[data-theme="light"] .vp-card { background: #fff; border-color: #d1d5db; }
[data-theme="light"] .vp-hold-label { color: var(--vp-gold); text-shadow: none; }
[data-theme="light"] .vp-message { color: var(--vp-gold); text-shadow: none; }
[data-theme="light"] .vp-stap { background: #e8eaed; border-color: #d1d5db; color: #6b7280; }
[data-theme="light"] .vp-stap.won { background: var(--vp-red); color: #fff; border-color: var(--vp-red); }
[data-theme="light"] .vp-stap.current { background: #dbeafe; color: var(--vp-red); border-color: var(--vp-red); }
[data-theme="light"] .vp-bonus-splash { background: rgba(255, 255, 255, 0.9); }
[data-theme="light"] .vp-bonus-splash-text { color: var(--vp-gold); text-shadow: none; }
[data-theme="light"] .vp-start-screen { background: linear-gradient(160deg, #f0f2f4 0%, #e6e8eb 40%, #f0f2f4 100%); }
[data-theme="light"] .vp-loader-content { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .vp-loader-bar-bg { background: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .vp-loader-status { color: rgba(0, 0, 0, 0.5); }
[data-theme="light"] .vp-loader-tip { color: rgba(0, 0, 0, 0.35); }
[data-theme="light"] .vp-loader-card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
[data-theme="light"] .vp-loader-card:nth-child(1),
[data-theme="light"] .vp-loader-card:nth-child(4) { color: #9ca3af; }
[data-theme="light"] .vp-btn-loader-solo,
[data-theme="light"] .vp-btn-loader-multi { text-shadow: none; }
[data-theme="light"] .vp-help-box,
[data-theme="light"] .vp-kb-box,
[data-theme="light"] .vp-gamehelp-box { background: linear-gradient(180deg, #fff, #f8f9fa); border-color: #d1d5db; color: #333; }
[data-theme="light"] .vp-help-box h3,
[data-theme="light"] .vp-kb-box h3,
[data-theme="light"] .vp-gamehelp-box h3 { color: var(--vp-gold); }
[data-theme="light"] .vp-kb-key { background: #e5e7eb; border-color: #d1d5db; color: var(--vp-gold); }
[data-theme="light"] .vp-kb-desc { color: #4b5563; }
[data-theme="light"] .vp-help-overlay,
[data-theme="light"] .vp-kb-overlay,
[data-theme="light"] .vp-gamehelp-overlay,
[data-theme="light"] .vp-nocredit-overlay { background: rgba(255, 255, 255, 0.85); }

/* ══════════════════════════════════════════════
   GAME CONTAINER
   ══════════════════════════════════════════════ */
.vp-game {
    width: 100%;
    max-width: min(760px, 95vw);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    user-select: none;
    position: relative;
    overflow: hidden;
    /* Space for fixed nav-rail at bottom */
    padding-bottom: calc(64px + var(--sab, 0px));
}

/* ══════════════════════════════════════════════
   BONUS AREA (top - blue fire, red border like Flash)
   ══════════════════════════════════════════════ */
.vp-bonus-area {
    background:
        linear-gradient(180deg, rgba(6, 4, 18, 0.5), rgba(6, 4, 18, 0.55)),
        url('assets/img/blue-fire.jpg') center/cover no-repeat;
    display: flex;
    align-items: stretch;
    padding: clamp(2px, 0.5vw, 8px) clamp(4px, 1vw, 12px);
    height: clamp(130px, 24vh, 240px);
    gap: clamp(4px, 1vw, 12px);
    border: 1px solid var(--vp-border-accent);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* Animated ambient glow — pulsing like loader vpAmbientPulse */
.vp-bonus-area::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 140%; height: 250%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, color-mix(in srgb, var(--vp-red) 12%, transparent) 0%, color-mix(in srgb, var(--vp-gold) 4%, transparent) 35%, transparent 60%);
    animation: vpBonusAmbient 5s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes vpBonusAmbient {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.3; }
}

/* Bonus content wrapper (hidden during double game) */
.vp-bonus-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.vp-bonus-left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* Single card in bonus-left (card-back during idle, swapped for double cards) */
.vp-bonus-minicards {
    display: flex;
}

.vp-bonus-minicard {
    width: clamp(50px, 8vw, 90px);
    height: clamp(70px, 11.2vw, 126px);
    border-radius: 6px;
    border: none;
    overflow: hidden;
    background: transparent;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.vp-bonus-minicard img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Flash bonusinfo.play() — card flashing animation (brightness pulse) */
.vp-bonus-minicard.flashing img {
    animation: bonusCardFlash 0.3s ease-in-out 4;
}

@keyframes bonusCardFlash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.8); }
}

.vp-bonus-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: clamp(3px, 0.5vh, 6px);
    min-width: clamp(100px, 16vw, 170px);
}

/* Amount box: red(unfilled) → yellow(filled/winning) */
.vp-bonus-amount-box {
    background: linear-gradient(180deg, var(--vp-bar-bg), var(--vp-bar-bg-dark));
    border: 2px solid var(--vp-bar-border);
    border-radius: 4px;
    padding: 2px 10px;
    text-align: center;
    order: -1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    transition: background 0.5s, border-color 0.5s, box-shadow 0.5s;
}

.vp-bonus-amount {
    font-size: clamp(18px, 3vw, 34px);
    font-weight: 900;
    color: var(--vp-white);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0,0,0,0.8);
    line-height: 1.2;
}

/* Amount box filled (MAX WIN) — yellow celebration animation */
.vp-bonus-amount-box.winning {
    background: linear-gradient(180deg, var(--vp-bar-fill), var(--vp-bar-fill-dark));
    border-color: rgba(255,220,0,0.6);
    box-shadow: inset 0 1px 0 rgba(255,255,200,0.5), 0 0 8px rgba(255,200,0,0.4);
    animation: amountBoxWin 0.5s ease-in-out infinite alternate;
}
.vp-bonus-amount-box.winning .vp-bonus-amount {
    animation: amountTextWin 0.3s ease-in-out infinite alternate;
}

@keyframes amountBoxWin {
    0% {
        transform: scale(1);
        background: linear-gradient(180deg, #ffdd00, #ccaa00);
        box-shadow: inset 0 1px 0 rgba(255,255,200,0.5), 0 0 8px rgba(255,200,0,0.4);
    }
    100% {
        transform: scale(1.08);
        background: linear-gradient(180deg, #ffff44, #ffdd00);
        box-shadow: inset 0 1px 0 rgba(255,255,200,0.8), 0 0 20px rgba(255,255,0,0.8), 0 0 40px rgba(255,200,0,0.3);
    }
}

@keyframes amountTextWin {
    0% { color: #000; text-shadow: 0 1px 0 rgba(255,255,200,0.5); }
    100% { color: #fff; text-shadow: 0 0 10px rgba(255,255,0,1), 0 0 20px rgba(255,200,0,0.6); }
}

/* Bonus bars: fill bottom→top with gold gradient */
.vp-bonus-bars {
    display: flex;
    flex-direction: column-reverse;
    gap: 3px;
    flex: 1;
}

.vp-bar {
    height: 8px;
    background: linear-gradient(180deg, var(--vp-bar-bg), var(--vp-bar-bg-dark));
    border-radius: 2px;
    border: 1px solid var(--vp-bar-border);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.vp-bar::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(180deg, var(--vp-bar-fill), var(--vp-bar-fill-dark));
    border-radius: 1px;
    transition: width 0.5s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,200,0.5);
}

.vp-bar.filled::after { width: 100%; }
.vp-bar.partial::after { width: 50%; }

/* Flash staps blink — bar flashes rapidly when newly filled during double game */
.vp-bar.just-filled::after {
    width: 100%;
    animation: barFillBlink 0.06s linear 12;
}

@keyframes barFillBlink {
    0%, 49% { opacity: 1; background: linear-gradient(180deg, #ffff44, #ffdd00); }
    50%, 100% { opacity: 0; }
}

/* Flash: staps.gotoAndPlay("win") — bars flash during MAX WIN celebration */
.vp-bonus-bars.celebrating .vp-bar {
    animation: barCelebrate 0.4s ease-in-out infinite alternate;
}
.vp-bonus-bars.celebrating .vp-bar::after {
    width: 100%;
    animation: barCelebrateGlow 0.3s ease-in-out infinite alternate;
}

@keyframes barCelebrate {
    0% { border-color: rgba(255,200,0,0.6); box-shadow: 0 0 4px rgba(255,255,0,0.3); }
    100% { border-color: rgba(255,255,0,1); box-shadow: 0 0 10px rgba(255,255,0,0.6); }
}

@keyframes barCelebrateGlow {
    0% { background: linear-gradient(180deg, #ffdd00, #ccaa00); }
    100% { background: linear-gradient(180deg, #ffff44, #ffdd00); }
}

/* ══════════════════════════════════════════════
   BONUS SPLASH — contained within .vp-bonus-area
   ══════════════════════════════════════════════ */
.vp-bonus-splash {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 6px;
    animation: bonusSplashFade 0.35s ease;
}

.vp-bonus-splash-img {
    height: 80%;
    max-height: 140px;
    width: auto;
    border-radius: 10px;
    animation: bonusSplashIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    object-fit: contain;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.vp-bonus-splash-text {
    font-size: clamp(14px, 3vw, 22px);
    font-weight: 900;
    color: var(--vp-yellow);
    text-shadow: 0 0 16px rgba(255,255,0,0.8), 2px 2px 4px rgba(0,0,0,0.8);
    text-align: center;
    line-height: 1.2;
    animation: bonusTextPulse 0.5s ease infinite alternate;
}

@keyframes bonusSplashFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes bonusSplashIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes bonusTextPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); text-shadow: 0 0 24px rgba(255,255,0,1); }
}

/* ══════════════════════════════════════════════
   PAYTABLE
   ══════════════════════════════════════════════ */
.vp-paytable {
    flex: 1;
    min-width: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.vp-paytable-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    border-radius: 8px;
    transition: background 0.2s, box-shadow 0.2s;
    margin: 0 2px;
    line-height: 1;
}

/* Single value column: bet × multiplier (updated by JS on bet change) */

.vp-mini-bonus {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--vp-gold) 35%, transparent), color-mix(in srgb, var(--vp-gold) 25%, transparent));
    border: 1px solid color-mix(in srgb, var(--vp-gold) 40%, transparent);
    border-radius: 8px;
    padding: 0 8px;
    margin: 0 2px;
    line-height: 1;
    transition: box-shadow 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Mini bonus loading animation — glow pulse when bonus meter increases */
.vp-mini-bonus.loading {
    animation: miniBonusLoad 0.35s ease-in-out 3;
}

@keyframes miniBonusLoad {
    0% { background: linear-gradient(180deg, color-mix(in srgb, var(--vp-gold) 35%, transparent), color-mix(in srgb, var(--vp-gold) 25%, transparent)); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
    50% { background: linear-gradient(180deg, color-mix(in srgb, var(--vp-gold) 50%, transparent), color-mix(in srgb, var(--vp-gold) 35%, transparent)); box-shadow: 0 0 16px color-mix(in srgb, var(--vp-gold) 50%, transparent), 0 2px 8px rgba(0, 0, 0, 0.3); }
    100% { background: linear-gradient(180deg, color-mix(in srgb, var(--vp-gold) 35%, transparent), color-mix(in srgb, var(--vp-gold) 25%, transparent)); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
}
.vp-mini-bonus-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--vp-yellow);
}
.vp-mini-bonus-value {
    font-size: 11px;
    font-weight: 900;
    color: var(--vp-white);
}

/* Winning row highlight — refined glow */
.vp-paytable-row.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--vp-red) 65%, transparent), color-mix(in srgb, var(--vp-red-dark) 55%, transparent));
    color: var(--vp-yellow);
    border-radius: 8px;
    box-shadow: 0 0 12px color-mix(in srgb, var(--vp-red-light) 30%, transparent), inset 0 1px 0 rgba(255,255,255,0.12);
    animation: paytableBacklight 0.6s ease-in-out infinite alternate;
}

@keyframes paytableBacklight {
    0% { box-shadow: 0 0 8px color-mix(in srgb, var(--vp-red-light) 30%, transparent), inset 0 1px 0 rgba(255,255,255,0.12); }
    100% { box-shadow: 0 0 18px color-mix(in srgb, var(--vp-red-light) 50%, transparent), inset 0 1px 0 rgba(255,255,255,0.12); }
}

.vp-paytable-row .vp-hand-name {
    text-align: left;
    color: var(--vp-white);
    font-size: clamp(10px, 1.6vw, 15px);
    white-space: nowrap;
    font-weight: 900;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.3px;
}

.vp-paytable-row.active .vp-hand-name {
    color: var(--vp-yellow);
}

.vp-pay {
    text-align: right;
    color: var(--vp-gold);
    font-size: clamp(11px, 1.7vw, 15px);
    font-weight: 900;
    min-width: 30px;
    text-shadow: 0 0 8px color-mix(in srgb, var(--vp-gold) 20%, transparent);
}

/* All values in winning row get highlight */
.vp-paytable-row.active .vp-pay {
    color: var(--vp-yellow);
}

/* ══════════════════════════════════════════════
   CARDS AREA
   ══════════════════════════════════════════════ */
.vp-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(3px, 0.8vw, 10px);
    padding: clamp(4px, 1vh, 14px) 0 clamp(2px, 0.5vh, 6px);
    min-height: 0;
    align-items: flex-start;
    background: var(--vp-bg);
}

.vp-card-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.vp-card {
    width: var(--vp-card-w);
    height: var(--vp-card-h);
    border-radius: 6px;
    border: 2px solid var(--vp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    background: var(--vp-surface);
}

.vp-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

@media (hover: hover) {
    .vp-card-slot:hover .vp-card {
        transform: translateY(-3px);
        box-shadow: 0 3px 10px rgba(100,150,255,0.3);
    }
}

.vp-card.held {
    border-color: var(--vp-yellow) !important;
    box-shadow: 0 0 12px rgba(255,255,0,0.5);
    transform: translateY(-8px);
}

/* Hold Label */
.vp-hold-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--vp-yellow);
    height: 16px;
    visibility: hidden;
    text-shadow: 0 0 6px rgba(255,255,0,0.6);
    letter-spacing: 1px;
}

.vp-hold-label.visible {
    visibility: visible;
    animation: holdPulse 0.25s ease;
}

/* WIN labels blink on winning cards (Flash backLight blink) */
.vp-hold-label.win-blink {
    visibility: visible;
    animation: winLabelBlink 0.3s ease-in-out 4;
    color: var(--vp-white);
    text-shadow: 0 0 8px rgba(255,255,0,0.8), 0 0 16px rgba(255,100,0,0.5);
}

@keyframes holdPulse {
    0% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes winLabelBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* ══════════════════════════════════════════════
   DOUBLE MINI-CARDS (inside bonus area)
   ══════════════════════════════════════════════ */
.vp-dbl-cards {
    display: flex;
    align-items: center;
    padding-left: 4px;
}

.vp-dbl-minicard {
    width: 62px;
    height: 86px;
    border-radius: 4px;
    border: 2px solid transparent;
    overflow: hidden;
    background: transparent;
    flex-shrink: 0;
    animation: dblCardDealIn 0.3s ease forwards;
    margin-left: -38px;
    position: relative;
}

.vp-dbl-minicard:first-child {
    margin-left: 0;
}

.vp-dbl-minicard img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}

/* Flash sheet.play() — strong brightness pulse on face-down double cards (not revealed) */
.vp-dbl-minicard:not(.win):not(.lose):not(.flipping) img {
    animation: dblCardFlash 0.4s ease-in-out 0.3s infinite alternate;
}

@keyframes dblCardFlash {
    0% { filter: brightness(1); }
    100% { filter: brightness(2.2) saturate(1.5); }
}

@keyframes dblCardDealIn {
    0% { transform: translateY(-20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Revealed card: win = yellow glow */
.vp-dbl-minicard.win {
    box-shadow: 0 0 10px rgba(255,255,0,0.5);
}
.vp-dbl-minicard.win img {
    border: 2px solid var(--vp-yellow);
}

/* Revealed card: lose = dimmed red */
.vp-dbl-minicard.lose {
    opacity: 0.6;
}
.vp-dbl-minicard.lose img {
    border: 2px solid #900;
}

/* Card flip animation for double game reveal */
.vp-dbl-minicard.flipping {
    perspective: 400px;
}

.vp-dbl-minicard.flipping .vp-card-img {
    animation: vpCardFlip 0.4s ease-in-out;
}

@keyframes vpCardFlip {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}

/* --- Double staps (horizontal inside bonus area) --- */
.vp-double-staps {
    display: flex;
    align-items: center;
    align-content: center;
    gap: 3px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.vp-stap {
    background: var(--vp-surface-tint);
    border: 1px solid var(--vp-btn-border);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--vp-text-dim);
    text-align: center;
    white-space: nowrap;
    transition: all 0.3s;
}

/* Won step — red biscuit like active paytable row */
.vp-stap.won {
    background: var(--vp-red);
    color: var(--vp-yellow);
    border-color: var(--vp-red);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.25);
}

/* Current target step — pulsing yellow border */
.vp-stap.current {
    background: var(--vp-surface-tint2);
    color: var(--vp-yellow);
    border-color: var(--vp-yellow);
    box-shadow: 0 0 6px rgba(255,255,0,0.3);
    animation: stapPulse 1.2s ease-in-out infinite;
}

/* TOP step — green text */
.vp-stap.top { color: #0f0; border-color: #060; }
.vp-stap.top.won { color: #0f0; background: #060; border-color: #0a0; }
.vp-stap.top.current { color: #0f0; border-color: #0f0; background: #0a1a00; box-shadow: 0 0 6px rgba(0,255,0,0.3); }

@keyframes stapPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(255,255,0,0.2); }
    50% { box-shadow: 0 0 10px rgba(255,255,0,0.5); }
}

/* ══════════════════════════════════════════════
   MESSAGE BAR
   ══════════════════════════════════════════════ */
.vp-message {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--vp-yellow);
    min-height: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    text-shadow: 0 0 6px rgba(255,255,0,0.3);
    background: var(--vp-surface-tint);
}

/* ══════════════════════════════════════════════
   STATUS BAR — WIN | BET | CREDIT (standalone, in body)
   ══════════════════════════════════════════════ */
.vp-controls-status {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--vp-bg);
    padding: 4px 6px;
    flex: 0 0 100%;
}

.vp-double-btns {
    display: none;
    gap: 6px;
    flex: 0 0 100%;
    padding: 4px 6px 0;
    background: var(--vp-bg);
}
.vp-double-btns.active {
    display: flex;
}

/* ══════════════════════════════════════════════
   BOTTOM CONTROLS — buttons footer
   ══════════════════════════════════════════════ */
.vp-controls {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--vp-surface-tint2), var(--vp-surface-tint));
    padding: 5px 6px 6px;
    border-top: 2px solid var(--vp-red-dark);
}

/* DEAL/COLLECT */
.vp-controls-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.vp-status-box {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 2px solid var(--vp-red-light);
    border-radius: 4px;
    padding: 3px 10px;
    flex: 1 1 0;
    min-width: 0;
    justify-content: space-between;
    background: var(--vp-red);
}

.vp-label {
    font-size: clamp(10px, 1.5vw, 14px);
    font-weight: 800;
    color: var(--vp-white);
}

.vp-value {
    font-size: clamp(14px, 2.2vw, 22px);
    font-weight: 900;
    color: var(--vp-yellow);
    min-width: clamp(30px, 5vw, 50px);
    /*text-align: right;*/
}

.vp-win-box .vp-value { color: var(--vp-white); }
.vp-win-box.has-win { animation: winFlash 0.5s ease infinite alternate; }
@keyframes winFlash {
    from { background: var(--vp-red); }
    to { background: var(--vp-red-light); box-shadow: 0 0 10px color-mix(in srgb, var(--vp-yellow) 40%, transparent); }
}

.vp-credit-box .vp-value { color: var(--vp-white); }

.vp-win-msg {
    font-size: 10px;
    font-weight: 800;
    color: var(--vp-white);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex: 1;
    text-align: center;
}

/* Bet arrows inside bet box */
.vp-bet-arrow {
    background: none;
    border: none;
    color: var(--vp-yellow);
    font-size: 10px;
    cursor: pointer;
    padding: 0 1px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
}
@media (hover: hover) { .vp-bet-arrow:hover { opacity: 1; } }
.vp-bet-arrow:disabled { opacity: 0.2; cursor: not-allowed; }

.vp-btn {
    background: linear-gradient(180deg, var(--vp-btn-bg), var(--vp-btn-bg-dark));
    color: var(--vp-white);
    border: 2px solid var(--vp-btn-border);
    border-radius: 4px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.12s;
    text-transform: uppercase;
    min-width: 64px;
    letter-spacing: 0.5px;
}

@media (hover: hover) { .vp-btn:hover { background: linear-gradient(180deg, var(--vp-btn-border), var(--vp-btn-bg)); border-color: var(--vp-yellow); } }
.vp-btn:active { transform: scale(0.95); }
.vp-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.vp-btn-deal {
    background: linear-gradient(180deg, var(--vp-red), var(--vp-red-dark));
    border-color: var(--vp-red);
    color: #fff;
    font-size: 16px;
    padding: 10px 30px;
    min-width: 100px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    flex: 1;
}

@media (hover: hover) { .vp-btn-deal:hover { background: linear-gradient(180deg, var(--vp-red-light), var(--vp-red)); } }

.vp-btn-red {
    background: linear-gradient(180deg, #dd0000, #990000);
    border-color: #bb0000;
    color: #fff;
    font-size: 14px;
    padding: 10px 16px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    flex: 1;
}

@media (hover: hover) { .vp-btn-red:hover { background: linear-gradient(180deg, #ff2222, #bb0000); } }

.vp-btn-black {
    background: linear-gradient(180deg, #444, #111);
    border-color: #666;
    color: #fff;
    font-size: 14px;
    padding: 10px 16px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    flex: 1;
}

@media (hover: hover) { .vp-btn-black:hover { background: linear-gradient(180deg, #555, #222); } }

.vp-btn-collect {
    background: linear-gradient(180deg, #00cc00, #009900);
    border-color: #00aa00;
    color: #fff;
    font-size: 14px;
    padding: 10px 16px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    flex: 1;
}

@media (hover: hover) { .vp-btn-collect:hover { background: linear-gradient(180deg, #00ee00, #00bb00); } }

/* ══════════════════════════════════════════════
   CARD ANIMATIONS
   ══════════════════════════════════════════════ */
@keyframes dealCard {
    from { transform: translateY(-30px) scale(0.8); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.vp-card.dealing {
    animation: dealCard 0.25s ease forwards;
}

@keyframes winGlow {
    0%, 100% { box-shadow: 0 0 6px rgba(255,255,0,0.3); border-color: #996600; }
    50% { box-shadow: 0 0 18px rgba(255,255,0,0.8); border-color: var(--vp-yellow); }
}

.vp-card.winner {
    animation: winGlow 0.5s ease infinite;
}

/* ══════════════════════════════════════════════
   HELP MODAL
   ══════════════════════════════════════════════ */
.vp-help-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: overlayFadeIn 0.3s ease;
}

.vp-help-box {
    background: linear-gradient(180deg, var(--vp-modal-bg), var(--vp-modal-bg-dark));
    border: 2px solid var(--vp-modal-border);
    border-radius: 8px;
    padding: 16px 20px;
    max-width: 380px;
    width: 90%;
    color: #ddd;
    max-height: 85vh;
    overflow-y: auto;
}

.vp-help-box h3 {
    color: var(--vp-yellow);
    font-size: 14px;
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-align: center;
}

.vp-help-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: 12px;
}

.vp-help-grid kbd {
    background: #333;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 1px 5px;
    font-family: monospace;
    font-size: 11px;
    color: var(--vp-yellow);
}

.vp-help-hands {
    font-size: 12px;
    line-height: 1.7;
}

.vp-help-hands small {
    color: var(--vp-gray);
}

/* ══════════════════════════════════════════════
   NO CREDITS OVERLAY
   ══════════════════════════════════════════════ */
.vp-nocredit-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: overlayFadeIn 0.3s ease;
}
.vp-nocredit-box {
    background: linear-gradient(180deg, var(--vp-modal-bg), var(--vp-modal-bg-dark));
    border: 2px solid var(--vp-red);
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 40px rgba(200, 50, 50, 0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}
.vp-nocredit-icon { font-size: 48px; margin-bottom: 8px; }
.vp-nocredit-title {
    color: var(--vp-yellow);
    font-size: 20px;
    letter-spacing: 2px;
    margin: 0 0 8px;
    text-shadow: 0 0 10px rgba(255, 200, 50, 0.5);
}
.vp-nocredit-text {
    color: #e0e0e0;
    font-size: 14px;
    margin: 0 0 4px;
}
.vp-nocredit-sub {
    color: var(--vp-gray);
    font-size: 12px;
    margin: 0 0 16px;
    line-height: 1.5;
}
.vp-nocredit-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.vp-btn-nocredit-shop,
.vp-btn-nocredit-new {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.vp-btn-nocredit-shop {
    background: linear-gradient(180deg, #f5a623, #d4850a);
    color: #1a1a2e;
    box-shadow: 0 2px 8px rgba(245, 166, 35, 0.4);
}
.vp-btn-nocredit-shop:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 166, 35, 0.5); }
.vp-btn-nocredit-new {
    background: linear-gradient(180deg, #4a90d9, #2a6ab8);
    color: #fff;
    box-shadow: 0 2px 8px rgba(74, 144, 217, 0.3);
}
.vp-btn-nocredit-new:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(74, 144, 217, 0.4); }

/* Light theme */
[data-theme="light"] .vp-nocredit-overlay { background: rgba(255,255,255,0.9); }
[data-theme="light"] .vp-nocredit-box { background: #fff; border-color: #c0392b; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
[data-theme="light"] .vp-nocredit-title { color: #c0392b; text-shadow: none; }
[data-theme="light"] .vp-nocredit-text { color: #333; }
[data-theme="light"] .vp-nocredit-sub { color: #666; }

/* ══════════════════════════════════════════════
   LOADER SCREEN
   ══════════════════════════════════════════════ */
.vp-start-screen {
    position: absolute;
    inset: 0;
    z-index: 100;
    background: linear-gradient(160deg, var(--vp-surface-tint) 0%, var(--vp-surface-tint2) 40%, var(--vp-surface-tint) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.vp-start-screen.vp-start-fade {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.vp-loader-ambient {
    position: absolute;
    top: 50%; left: 50%;
    width: 500px; height: 500px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--vp-red) 15%, transparent) 0%, color-mix(in srgb, var(--vp-gold) 5%, transparent) 40%, transparent 65%);
    animation: vpAmbientPulse 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes vpAmbientPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.4; }
}

.vp-loader-content {
    position: relative;
    z-index: 2;
    max-width: 380px;
    width: 88%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 32px 28px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--vp-border-accent);
    border-radius: 20px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: vpLoaderFadeIn 0.6s ease;
}
@keyframes vpLoaderFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.vp-loader-title { text-align: center; }
.vp-loader-subtitle {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--vp-gold);
    text-transform: uppercase;
    opacity: 0.8;
}
.vp-loader-name {
    font-size: clamp(22px, 5vw, 32px);
    font-weight: 900;
    background: linear-gradient(135deg, var(--vp-gold) 0%, #fff 50%, var(--vp-gold) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
    line-height: 1.1;
    margin: 4px 0 0;
}

.vp-loader-hero {
    display: flex;
    justify-content: center;
}
.vp-loader-img {
    max-height: 200px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
    animation: vpHeroFloat 3s ease-in-out infinite;
}
@keyframes vpHeroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.vp-loader-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 52px;
    position: relative;
}
.vp-loader-card {
    width: 36px; height: 50px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--vp-red) 15%, transparent) 0%, color-mix(in srgb, var(--vp-red) 5%, transparent) 100%);
    border: 1.5px solid color-mix(in srgb, var(--vp-gold) 25%, transparent);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    position: absolute;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: vpCardShuffle 2.4s ease-in-out infinite;
    transform-origin: center bottom;
}
.vp-loader-card:nth-child(1) { color: var(--vp-text-dim); animation-delay: 0s; }
.vp-loader-card:nth-child(2) { color: var(--vp-red); animation-delay: 0.15s; }
.vp-loader-card:nth-child(3) { color: var(--vp-red); animation-delay: 0.3s; }
.vp-loader-card:nth-child(4) { color: var(--vp-text-dim); animation-delay: 0.45s; }
@keyframes vpCardShuffle {
    0%   { transform: translateX(0) rotate(0deg); opacity: 1; }
    15%  { transform: translateX(-36px) rotate(-8deg) translateY(-4px); }
    30%  { transform: translateX(0) rotate(0deg); opacity: 1; }
    45%  { transform: translateX(36px) rotate(8deg) translateY(-4px); }
    60%  { transform: translateX(0) rotate(0deg); opacity: 1; }
    100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}

.vp-loader-progress { width: 100%; }
.vp-loader-bar-bg {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.vp-loader-bar-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--vp-red) 0%, var(--vp-gold) 50%, var(--vp-red) 100%);
    background-size: 200% 100%;
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px color-mix(in srgb, var(--vp-red) 40%, transparent);
    animation: vpBarShimmer 1.8s ease-in-out infinite;
}
@keyframes vpBarShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.vp-loader-info {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}
.vp-loader-status {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Inter', sans-serif;
}
.vp-loader-percent {
    font-size: 11px;
    font-weight: 700;
    color: var(--vp-gold);
    font-family: 'Inter', sans-serif;
}

.vp-loader-btns {
    display: flex;
    gap: 10px;
    width: 100%;
}

.vp-btn-loader-solo,
.vp-btn-loader-multi {
    flex: 1;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    padding: 12px 8px;
    border-radius: 12px;
    cursor: pointer;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    animation: vpBtnPulse 2s ease-in-out infinite;
}

.vp-btn-loader-solo {
    background: linear-gradient(135deg, var(--vp-red) 0%, var(--vp-red-light) 100%);
    border: 1px solid color-mix(in srgb, var(--vp-red-light) 50%, transparent);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--vp-red) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.vp-btn-loader-solo:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px color-mix(in srgb, var(--vp-red) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.vp-btn-loader-multi {
    background: linear-gradient(135deg, #1a6b8a 0%, #2196a8 100%);
    border: 1px solid rgba(33, 150, 168, 0.5);
    box-shadow: 0 4px 20px rgba(33, 150, 168, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation-delay: 0.3s;
}
.vp-btn-loader-multi:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(33, 150, 168, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

@keyframes vpBtnPulse {
    0%, 100% { box-shadow: 0 4px 20px color-mix(in srgb, var(--vp-red) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
    50% { box-shadow: 0 4px 30px color-mix(in srgb, var(--vp-red) 60%, transparent), 0 0 20px color-mix(in srgb, var(--vp-gold) 15%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
}

.vp-loader-tip {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    font-style: italic;
    min-height: 16px;
    transition: opacity 0.3s ease;
}

/* ══════════════════════════════════════════════
   KEYBOARD SHORTCUTS POPUP
   ══════════════════════════════════════════════ */
.vp-kb-overlay,
.vp-gamehelp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: overlayFadeIn 0.3s ease;
}

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

.vp-kb-box,
.vp-gamehelp-box {
    background: linear-gradient(180deg, var(--vp-modal-bg), var(--vp-modal-bg-dark));
    border: 2px solid var(--vp-modal-border);
    border-radius: 8px;
    padding: 16px 20px;
    max-width: 380px;
    width: 90%;
    color: #ddd;
    max-height: 85vh;
    overflow-y: auto;
}

.vp-kb-box h3,
.vp-gamehelp-box h3 {
    color: var(--vp-yellow);
    font-size: 14px;
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-align: center;
}

.vp-kb-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    font-size: 13px;
    align-items: center;
}

.vp-kb-key {
    background: var(--vp-btn-bg-dark);
    border: 1px solid var(--vp-btn-border);
    border-radius: 4px;
    padding: 3px 10px;
    font-family: monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--vp-yellow);
    text-align: center;
    min-width: 36px;
}

.vp-kb-desc {
    color: var(--vp-text-muted);
    font-weight: 600;
}

/* Game Help content */
.vp-gamehelp-content {
    font-size: 13px;
    line-height: 1.6;
    color: #ccc;
}

.vp-gamehelp-content p {
    margin-bottom: 8px;
}

.vp-gamehelp-content ul {
    margin: 4px 0 8px 18px;
}

.vp-gamehelp-content li {
    margin-bottom: 3px;
}

.vp-gamehelp-content strong {
    color: var(--vp-yellow);
}

/* ══════════════════════════════════════════════
   VOLUME CONTROL (inside actions row)
   ══════════════════════════════════════════════ */
/* Volume button in header (action-btn wrapper) */
.vp-volume.action-btn { cursor: pointer; }
.vp-vol-icon {
    width: 20px;
    height: 20px;
    opacity: 0.8;
    transition: opacity 0.2s;
    filter: brightness(1.2);
}
@media (hover: hover) { .vp-vol-icon:hover { opacity: 1; } }
.vp-volume.muted .vp-vol-icon {
    opacity: 0.3;
    filter: grayscale(1);
}

/* ══════════════════════════════════════════════
   TOUCH DEVICE OPTIMIZATIONS
   ══════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    .vp-btn {
        min-height: 44px;
    }
    .vp-btn-deal {
        min-height: 48px;
    }
    .vp-bet-arrow {
        min-width: 32px;
        min-height: 32px;
        font-size: 14px;
    }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — DESKTOP BREAKPOINTS (like Septica)
   ══════════════════════════════════════════════ */

/* ── Tablet (≥768px) ── */
@media (min-width: 768px) {
    .vp-game {
        max-width: min(720px, 92vw);
        padding-left: 12px;
        padding-right: 12px;
    }
    .vp-bonus-area {
        height: clamp(140px, 22vh, 220px);
        padding: 4px 10px;
        gap: 8px;
    }
    .vp-bonus-minicard { width: 70px; height: 98px; }
    .vp-bonus-amount { font-size: 26px; }
    .vp-bonus-right { min-width: 130px; }
    .vp-hand-name { font-size: 12px; }
    .vp-pay { font-size: 13px; }
    .vp-cards { gap: 6px; padding: 8px 0 4px; }
    .vp-hold-label { font-size: 13px; }
    .vp-controls-status { padding: 4px 8px; }
    .vp-status-box { padding: 4px 10px; }
    .vp-label { font-size: 12px; }
    .vp-value { font-size: 18px; min-width: 40px; }
    .vp-controls {
        padding: 6px 10px;
    }
    .vp-btn-deal { font-size: 18px; padding: 12px 32px; }
    .vp-btn-collect { font-size: 15px; padding: 10px 18px; }
    .vp-btn-red, .vp-btn-black { font-size: 20px; padding: 12px 16px; font-weight: 900; flex: 1; min-height: 48px; letter-spacing: 1px; }
    .vp-message { font-size: 15px; }
}

/* ── Desktop (≥992px) ── */
@media (min-width: 992px) {
    .vp-game {
        max-width: min(820px, 88vw);
        padding-left: 16px;
        padding-right: 16px;
    }
    .vp-bonus-area {
        height: clamp(150px, 24vh, 240px);
        padding: 6px 12px;
        gap: 10px;
    }
    .vp-bonus-minicard { width: 80px; height: 112px; }
    .vp-bonus-amount { font-size: 30px; }
    .vp-bonus-right { min-width: 150px; }
    .vp-hand-name { font-size: 13px; }
    .vp-pay { font-size: 14px; }
    .vp-cards { gap: 8px; padding: 10px 0 5px; }
    .vp-controls-status { padding: 5px 10px; }
    .vp-label { font-size: 13px; }
    .vp-value { font-size: 20px; min-width: 44px; }
    .vp-controls { padding: 8px 12px; }
    .vp-btn-deal { font-size: 20px; padding: 14px 36px; }
    .vp-btn-collect { font-size: 16px; padding: 12px 20px; }
    .vp-btn-red, .vp-btn-black { font-size: 22px; padding: 14px 20px; font-weight: 900; flex: 1; min-height: 52px; letter-spacing: 1px; }
}

/* ── Large Desktop (≥1200px) ── */
@media (min-width: 1200px) {
    .vp-game {
        max-width: min(960px, 80vw);
        padding-left: 20px;
        padding-right: 20px;
    }
    .vp-bonus-area {
        height: clamp(160px, 25vh, 260px);
        padding: 8px 14px;
        gap: 12px;
    }
    .vp-bonus-minicard { width: 90px; height: 126px; }
    .vp-bonus-amount { font-size: 34px; }
    .vp-bonus-right { min-width: 170px; }
    .vp-hand-name { font-size: 14px; }
    .vp-pay { font-size: 15px; }
    .vp-cards { gap: 10px; padding: 12px 0 6px; }
    .vp-hold-label { font-size: 14px; }
    .vp-controls-status { padding: 6px 12px; }
    .vp-label { font-size: 14px; }
    .vp-value { font-size: 22px; min-width: 50px; }
    .vp-controls { padding: 8px 14px; }
    .vp-btn-deal { font-size: 22px; padding: 14px 40px; }
    .vp-btn-collect { font-size: 17px; padding: 12px 24px; }
    .vp-btn-red, .vp-btn-black { font-size: 24px; padding: 16px 24px; font-weight: 900; flex: 1; min-height: 56px; letter-spacing: 1px; }
}

/* ── Extra-Large Desktop (≥1400px) ── */
@media (min-width: 1400px) {
    .vp-game {
        max-width: min(1100px, 75vw);
        padding-left: 24px;
        padding-right: 24px;
    }
    .vp-bonus-area {
        height: clamp(170px, 26vh, 280px);
        padding: 10px 16px;
        gap: 14px;
    }
    .vp-bonus-minicard { width: 100px; height: 140px; }
    .vp-bonus-amount { font-size: 38px; }
    .vp-bonus-right { min-width: 190px; }
    .vp-hand-name { font-size: 15px; }
    .vp-pay { font-size: 16px; }
    .vp-cards { gap: 12px; padding: 14px 0 8px; }
    .vp-hold-label { font-size: 15px; }
    .vp-label { font-size: 14px; }
    .vp-value { font-size: 24px; min-width: 54px; }
    .vp-btn-deal { font-size: 24px; padding: 16px 48px; }
    .vp-btn-collect { font-size: 18px; padding: 14px 28px; }
    .vp-btn-red, .vp-btn-black { font-size: 26px; padding: 18px 28px; font-weight: 900; flex: 1; min-height: 60px; letter-spacing: 1px; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤520px)
   ══════════════════════════════════════════════ */
@media (max-width: 520px) {
    body { align-items: flex-start; }
    .vp-game { max-width: 100%; }
    /* Cards fill max width: edge-to-edge, tight 2px gaps */
    :root {
        --vp-card-w: calc((100vw - 8px) / 5);
        --vp-card-h: calc((100vw - 8px) / 5 * 1.4);
    }

    /* ── Bonus area: COMPACT, fixed size ── */
    .vp-bonus-area { flex: 0 0 auto; height: auto; min-height: 130px; padding: 4px 6px; gap: 6px; }
    .vp-bonus-minicard { width: 70px; height: 98px; }
    .vp-dbl-minicard { width: 70px; height: 98px; margin-left: -48px; }
    .vp-dbl-minicard:first-child { margin-left: 0; }
    .vp-bonus-amount { font-size: 24px; }
    .vp-bonus-right { min-width: 100px; }
    .vp-bar { height: 10px; }
    .vp-bonus-splash-text { font-size: clamp(12px, 2.5vw, 18px); }
    .vp-paytable { font-size: 12px; }
    .vp-paytable-row { padding: 0 4px; line-height: 1.2; }
    .vp-pay { font-size: 12px; }
    .vp-hand-name { font-size: 11px !important; }
    .vp-mini-bonus { padding: 0 6px; line-height: 1.2; }

    /* ── Cards area: auto-height, cards+status pushed to TOP (under bonus) ── */
    .vp-cards {
        gap: 2px; padding: 0;
        flex: 0 0 auto;
        align-content: flex-start;
        align-items: flex-start;
        justify-content: center;
        background: radial-gradient(ellipse at center, var(--vp-surface) 0%, var(--vp-bg) 70%);
    }
    .vp-controls-status { padding: 3px 6px; gap: 3px; }
    .vp-hold-label { font-size: 12px; }
    .vp-message { font-size: 14px; padding: 2px 0 0; }
    .vp-status-box { padding: 3px 6px; gap: 3px; }
    .vp-value { font-size: 16px; min-width: 34px; }
    .vp-label { font-size: 11px; }
    .vp-bet-arrow { min-width: 22px; min-height: 26px; font-size: 11px; }

    /* ── RED/BLACK in cards area — DOUBLED ── */
    .vp-double-btns { gap: 6px; padding: 4px 2px 0; }
    .vp-btn-red, .vp-btn-black { padding: 26px 12px; font-size: 30px; font-weight: 900; flex: 1; min-height: 90px; letter-spacing: 1px; }

    /* ── Footer: DEAL + COLLECT only, doubled sizes ── */
    .vp-controls { padding: 4px 6px calc(3px + var(--sab)); gap: 4px; }
    .vp-controls-actions { gap: 6px; }
    .vp-btn-deal { padding: 22px 24px; font-size: 28px; font-weight: 900; letter-spacing: 2px; flex: 1; min-height: 70px; }
    .vp-btn-collect { flex: 1; padding: 14px 12px; font-size: 18px; font-weight: 800; }
    .vp-stap { font-size: 9px; padding: 1px 5px; }

    /* ── Loader mobile ── */
    .vp-loader-content { padding: 24px 20px; gap: 16px; }
    .vp-loader-img { max-height: 160px; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤375px)
   ══════════════════════════════════════════════ */
@media (max-width: 375px) {
    /* Cards: calc from 520px flows through → ~73px at 375px */
    .vp-bonus-area { min-height: 110px; padding: 3px 4px; gap: 4px; }
    .vp-bonus-minicard { width: 56px; height: 78px; }
    .vp-dbl-minicard { width: 56px; height: 78px; margin-left: -38px; }
    .vp-dbl-minicard:first-child { margin-left: 0; }
    .vp-bonus-right { min-width: 90px; }
    .vp-bonus-amount { font-size: 20px; }
    .vp-paytable-row { padding: 0 2px; margin: 0 1px; }
    .vp-hand-name { font-size: 9px !important; }
    .vp-pay { font-size: 10px; }
    .vp-mini-bonus-label { font-size: 9px; }
    .vp-mini-bonus-value { font-size: 10px; }
    /* Status bar */
    .vp-controls-status { padding: 2px 4px; gap: 2px; }
    .vp-status-box { padding: 2px 5px; gap: 2px; }
    .vp-value { font-size: 14px; min-width: 28px; }
    .vp-label { font-size: 10px; }
    .vp-bet-arrow { min-width: 18px; min-height: 22px; font-size: 10px; }
    /* RED/BLACK in cards area */
    .vp-btn-red, .vp-btn-black { padding: 22px 10px; font-size: 26px; min-height: 76px; }
    /* Footer buttons — doubled */
    .vp-controls { gap: 3px; padding: 3px 4px calc(3px + var(--sab)); }
    .vp-btn-deal { padding: 18px 14px; font-size: 24px; min-height: 60px; }
    .vp-btn-collect { padding: 10px 10px; font-size: 15px; }
    .vp-loader-content { padding: 20px 16px; gap: 14px; }
    .vp-loader-img { max-height: 130px; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — TINY MOBILE (≤320px, iPhone SE gen1)
   ══════════════════════════════════════════════ */
@media (max-width: 320px) {
    /* Cards: calc from 520px flows through → ~62px at 320px */
    .vp-bonus-area { min-height: 90px; padding: 2px 3px; gap: 3px; }
    .vp-bonus-minicard { width: 46px; height: 64px; }
    .vp-dbl-minicard { width: 46px; height: 64px; margin-left: -30px; }
    .vp-dbl-minicard:first-child { margin-left: 0; }
    .vp-bonus-right { min-width: 70px; }
    .vp-bonus-amount { font-size: 18px; }
    .vp-bar { height: 7px; }
    .vp-hand-name { font-size: 8px !important; }
    .vp-pay { font-size: 9px; min-width: 24px; }
    /* Status bar */
    .vp-controls-status { padding: 2px 3px; gap: 2px; }
    .vp-status-box { padding: 2px 4px; gap: 2px; }
    .vp-value { font-size: 12px; min-width: 22px; }
    .vp-label { font-size: 9px; }
    .vp-bet-arrow { min-width: 16px; min-height: 18px; font-size: 9px; }
    /* RED/BLACK in cards area */
    .vp-btn-red, .vp-btn-black { padding: 18px 8px; font-size: 22px; min-height: 64px; }
    /* Footer buttons — doubled */
    .vp-controls { gap: 2px; padding: 2px 3px calc(3px + var(--sab)); }
    .vp-btn-deal { padding: 14px 10px; font-size: 20px; min-height: 52px; }
    .vp-btn-collect { padding: 8px 8px; font-size: 13px; }
    .vp-stap { font-size: 8px; padding: 1px 3px; }
    .vp-loader-img { max-height: 100px; }
    .vp-loader-card { width: 30px; height: 42px; font-size: 16px; }
}

/* ══════════════════════════════════════════════
   LANDSCAPE — PHONE (short viewport)
   ══════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
    .vp-game { flex: 1; min-height: 0; padding-bottom: calc(48px + var(--sab, 0px)); }
    .vp-bonus-area { height: auto; min-height: 80px; max-height: 35vh; flex: 1 1 auto; padding: 2px 6px; }
    .vp-bonus-minicard { width: 44px; height: 62px; }
    .vp-dbl-minicard { width: 44px; height: 62px; margin-left: -28px; }
    .vp-dbl-minicard:first-child { margin-left: 0; }
    .vp-bonus-amount { font-size: 16px; }
    .vp-bar { height: 6px; }
    .vp-bonus-amount-box { padding: 1px 8px; }
    .vp-cards { padding: 4px 0 2px; gap: 4px; min-height: auto; flex: 0 0 auto; }
    .vp-card { width: 64px; height: 90px; }
    .vp-hold-label { font-size: 10px; height: 14px; }
    .vp-message { font-size: 12px; padding: 3px 0; }
    /* Status bar: compact in landscape */
    .vp-controls-status { padding: 2px 6px; gap: 3px; }
    /* Controls: compact in landscape */
    .vp-controls { padding: 2px 6px calc(2px + var(--sab)); gap: 2px; }
    .vp-controls-actions { flex: 0 0 auto; gap: 3px; }
    .vp-status-box { padding: 2px 6px; }
    .vp-value { font-size: 13px; min-width: 28px; }
    .vp-label { font-size: 10px; }
    .vp-btn-deal { padding: 4px 12px; font-size: 12px; flex: 0; }
    .vp-btn-red, .vp-btn-black, .vp-btn-collect { padding: 4px 8px; font-size: 11px; flex: 0; }
    .vp-stap { font-size: 8px; padding: 1px 4px; }
    /* Loader landscape */
    .vp-loader-content { padding: 16px 20px; gap: 10px; flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 600px; }
    .vp-loader-hero { flex: 0 0 auto; }
    .vp-loader-img { max-height: 120px; }
    .vp-loader-progress { flex: 1; min-width: 200px; }
}

/* Ultra-short landscape (e.g. iPhone SE landscape 568x320) */
@media (orientation: landscape) and (max-height: 380px) {
    .vp-bonus-area { min-height: 60px; max-height: 30vh; padding: 2px 4px; }
    .vp-bonus-minicard { width: 36px; height: 50px; }
    .vp-dbl-minicard { width: 36px; height: 50px; margin-left: -22px; }
    .vp-bonus-amount { font-size: 14px; }
    .vp-hand-name { font-size: 8px !important; }
    .vp-pay { font-size: 8px; }
    .vp-card { width: 54px; height: 76px; }
    .vp-cards { padding: 2px 0 1px; gap: 3px; }
    .vp-hold-label { font-size: 9px; height: 12px; }
    .vp-controls-status { padding: 1px 4px; gap: 2px; }
    .vp-controls { padding: 1px 4px calc(1px + var(--sab)); gap: 1px; flex-direction: row; }
    .vp-controls-actions { gap: 2px; }
    .vp-status-box { padding: 1px 4px; }
    .vp-value { font-size: 11px; min-width: 24px; }
    .vp-label { font-size: 9px; }
    .vp-btn-deal { padding: 3px 8px; font-size: 10px; flex: 0; }
    .vp-btn-red, .vp-btn-black, .vp-btn-collect { padding: 3px 6px; font-size: 9px; flex: 0; }
}

/* ══════════════════════════════════════════════
   NAV RAIL (bottom navigation bar like Septica)
   ══════════════════════════════════════════════ */
.vp-nav-rail {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    min-height: 56px;
    background: linear-gradient(0deg,
        rgba(0, 0, 0, 0.98) 0%,
        rgba(0, 0, 0, 0.85) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--vp-border-accent);
    padding-bottom: calc(var(--sab, 0px) + 4px);
    padding-top: 4px;
    padding-left: 0;
    padding-right: 0;
    z-index: 1999; /* above all game canvas stacking contexts */
    display: flex;
    align-items: center;
    justify-content: space-around;
    max-width: 100%;
    gap: 2px;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.4), 0 -4px 30px color-mix(in srgb, var(--vp-gold) 6%, transparent);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

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

.vp-nav-item {
    position: relative;
    flex: 1;
    max-width: 80px;
    min-width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.02);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.5);
    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);
    -webkit-tap-highlight-color: transparent;
}

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

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

.vp-nav-item:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
    border-color: color-mix(in srgb, var(--vp-gold) 20%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 0 12px color-mix(in srgb, var(--vp-gold) 10%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.vp-nav-item.active {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--vp-gold) 18%, transparent) 0%,
        color-mix(in srgb, var(--vp-gold) 8%, transparent) 100%
    );
    color: var(--vp-gold);
    border: 2px solid color-mix(in srgb, var(--vp-gold) 40%, transparent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--vp-gold) 15%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    animation: vpNavGlow 3s ease-in-out infinite;
}

@keyframes vpNavGlow {
    0%, 100% { box-shadow: 0 0 20px color-mix(in srgb, var(--vp-gold) 15%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
    50% { box-shadow: 0 0 28px color-mix(in srgb, var(--vp-gold) 25%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
}

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

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

.vp-nav-item.active .material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 600;
    font-size: 24px;
    text-shadow: 0 2px 12px color-mix(in srgb, var(--vp-gold) 40%, transparent);
}

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

.vp-nav-item.active .vp-nav-label {
    text-shadow: 0 1px 8px color-mix(in srgb, var(--vp-gold) 30%, transparent);
}

.vp-nav-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--vp-red);
    color: white;
    font-size: 9px;
    font-weight: 700;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--vp-red) 50%, transparent);
    animation: vpBadgePulse 2s ease-in-out infinite;
}

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

/* ══════════════════════════════════════════════
   CONTEXT PANEL (slide-in sidebar like Septica)
   ══════════════════════════════════════════════ */
.vp-context-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    height: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg,
        rgba(10, 10, 10, 0.97) 0%,
        rgba(0, 0, 0, 0.98) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--vp-border-accent);
    box-shadow: -4px 0 30px color-mix(in srgb, var(--vp-gold) 6%, transparent);
    z-index: 2000; /* above all game canvas stacking contexts */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    transform: translateX(0);
    opacity: 1;
}

.vp-context-panel.hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.vp-context-panel.page-flip-in {
    animation: vpPageFlip 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes vpPageFlip {
    0% { transform: translateX(100%) rotateY(-15deg); opacity: 0; }
    50% { transform: translateX(10%) rotateY(-3deg); opacity: 0.8; }
    100% { transform: translateX(0) rotateY(0); opacity: 1; }
}

.vp-panel-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--vp-gold) 10%, transparent);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
}

.vp-panel-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--vp-gold) 60%, transparent),
        var(--vp-gold),
        color-mix(in srgb, var(--vp-gold) 60%, transparent)
    );
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px color-mix(in srgb, var(--vp-gold) 40%, transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.15s ease;
}

.vp-panel-header.loading::after {
    opacity: 1;
    animation: vpPanelLoadBar 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes vpPanelLoadBar {
    0% { width: 0; }
    15% { width: 30%; }
    50% { width: 70%; }
    85% { width: 92%; }
    100% { width: 100%; }
}

.vp-panel-title {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--vp-gold);
    text-shadow: 0 0 12px color-mix(in srgb, var(--vp-gold) 30%, transparent);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.vp-panel-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.vp-panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.vp-panel-close .material-symbols-rounded {
    font-size: 20px;
}

.vp-panel-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Panel content scrollbar */
.vp-panel-content::-webkit-scrollbar {
    width: 8px;
    display: block;
}
.vp-panel-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.vp-panel-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, color-mix(in srgb, var(--vp-gold) 50%, transparent) 0%, color-mix(in srgb, var(--vp-gold) 40%, transparent) 100%);
    border-radius: 99px;
    border: 2px solid color-mix(in srgb, var(--vp-gold) 20%, transparent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--vp-gold) 30%, transparent);
}
.vp-panel-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--vp-gold) 70%, transparent) 0%, color-mix(in srgb, var(--vp-gold) 60%, transparent) 100%);
}

/* Panel section blocks (reusable for stats, rules, settings content) */
.vp-panel-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}
.vp-panel-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--vp-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.vp-panel-section-title .material-symbols-rounded {
    font-size: 18px;
}
.vp-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}
.vp-panel-row:last-child { border-bottom: none; }
.vp-panel-row-value {
    font-weight: 700;
    color: white;
}
.vp-panel-row-gold {
    color: var(--vp-gold);
    font-weight: 700;
}

/* Panel toggle switch (for settings) */
.vp-panel-toggle {
    position: relative;
    width: 40px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 11px;
    cursor: pointer;
    transition: background 0.3s ease;
    border: none;
    padding: 0;
}
.vp-panel-toggle.active {
    background: color-mix(in srgb, var(--vp-gold) 40%, transparent);
}
.vp-panel-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.vp-panel-toggle.active::after {
    transform: translateX(18px);
    background: var(--vp-gold);
}

/* Panel text helpers (used in JS-generated content) */
.vp-panel-muted {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    text-align: center;
    padding: 12px 0;
}
.vp-panel-muted.lg { padding: 20px 0; }
.vp-panel-body {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}
.vp-panel-combo-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}
.vp-double-red { color: var(--vp-red); font-weight: 700; }
.vp-double-black { color: rgba(255, 255, 255, 0.9); font-weight: 700; }

/* Theme selector grid */
.vp-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.vp-theme-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: all 0.3s;
}
.vp-theme-btn.active {
    border-color: var(--vp-gold);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 12px color-mix(in srgb, var(--vp-gold) 25%, transparent);
}
.vp-theme-btn-preview {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
}
.vp-theme-btn-name {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
}
.vp-theme-btn.active .vp-theme-btn-name {
    color: var(--vp-gold);
}

/* ══════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ══════════════════════════════════════════════ */
.vp-toast-container {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.vp-toast {
    min-width: 280px;
    max-width: 90vw;
    padding: 14px 22px;
    background: linear-gradient(135deg,
        rgba(20, 20, 20, 0.98) 0%,
        rgba(10, 10, 10, 0.98) 100%
    );
    border: 2px solid color-mix(in srgb, var(--vp-gold) 30%, transparent);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px color-mix(in srgb, var(--vp-gold) 20%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
}

.vp-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.vp-toast.hide {
    opacity: 0;
    transform: translateY(-20px);
}

.vp-toast-success {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(34, 197, 94, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.vp-toast-info {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.vp-toast-warning {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.vp-toast-error {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ══════════════════════════════════════════════
   LIGHT THEME — NAV RAIL + CONTEXT PANEL + TOAST
   ══════════════════════════════════════════════ */
[data-theme="light"] .vp-nav-rail {
    background: linear-gradient(0deg,
        rgba(250, 249, 247, 0.98) 0%,
        rgba(245, 243, 238, 0.95) 100%
    );
    border-top-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .vp-nav-item {
    color: rgba(0, 0, 0, 0.45);
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .vp-nav-item:hover {
    color: rgba(0, 0, 0, 0.8);
    background: rgba(180, 140, 40, 0.12);
    border-color: rgba(180, 140, 40, 0.3);
}
[data-theme="light"] .vp-nav-item.active {
    color: #8b6914;
    background: linear-gradient(135deg, rgba(180, 140, 40, 0.18) 0%, rgba(180, 140, 40, 0.1) 100%);
    border-color: #b48c28;
    box-shadow: 0 0 12px rgba(180, 140, 40, 0.15);
}
[data-theme="light"] .vp-nav-label {
    color: inherit;
}

[data-theme="light"] .vp-context-panel {
    background: linear-gradient(180deg,
        rgba(248, 249, 250, 0.98) 0%,
        rgba(255, 255, 255, 0.98) 100%
    );
    border-left-color: rgba(0, 0, 0, 0.08);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .vp-panel-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .vp-panel-title {
    color: #8b6914;
    text-shadow: none;
}
[data-theme="light"] .vp-panel-close {
    color: rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .vp-panel-close:hover {
    color: rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .vp-panel-content {
    color: #333;
}
[data-theme="light"] .vp-panel-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .vp-panel-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(180, 140, 40, 0.4) 0%, rgba(180, 140, 40, 0.3) 100%);
    border-color: rgba(180, 140, 40, 0.2);
}
[data-theme="light"] .vp-panel-section {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .vp-panel-section-title {
    color: #8b6914;
}
[data-theme="light"] .vp-panel-row {
    color: rgba(0, 0, 0, 0.6);
    border-bottom-color: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .vp-panel-row-value {
    color: rgba(0, 0, 0, 0.85);
}
[data-theme="light"] .vp-panel-row-gold {
    color: #8b6914;
}
[data-theme="light"] .vp-panel-toggle {
    background: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .vp-panel-toggle.active {
    background: rgba(180, 140, 40, 0.4);
}
[data-theme="light"] .vp-panel-toggle::after {
    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .vp-panel-toggle.active::after {
    background: #b48c28;
}
[data-theme="light"] .vp-panel-muted {
    color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .vp-panel-body {
    color: rgba(0, 0, 0, 0.65);
}
[data-theme="light"] .vp-panel-combo-desc {
    color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .vp-double-red { color: #cc0000; }
[data-theme="light"] .vp-double-black { color: #1e293b; }
[data-theme="light"] .vp-theme-btn {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .vp-theme-btn.active {
    border-color: var(--vp-gold);
    background: rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 12px color-mix(in srgb, var(--vp-gold) 20%, transparent);
}
[data-theme="light"] .vp-theme-btn-preview {
    border-color: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .vp-theme-btn-name {
    color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .vp-theme-btn.active .vp-theme-btn-name {
    color: #8b6914;
}

[data-theme="light"] .vp-toast {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 250, 0.98) 100%);
    color: #1e293b;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
[data-theme="light"] .vp-toast-success { border-color: rgba(34, 197, 94, 0.5); }
[data-theme="light"] .vp-toast-info { border-color: rgba(59, 130, 246, 0.5); }
[data-theme="light"] .vp-toast-warning { border-color: rgba(245, 158, 11, 0.5); }
[data-theme="light"] .vp-toast-error { border-color: rgba(239, 68, 68, 0.5); }

/* ══════════════════════════════════════════════
   NAV RAIL + PANEL — RESPONSIVE
   ══════════════════════════════════════════════ */

/* Mobile: panel takes full width */
@media (max-width: 576px) {
    .vp-context-panel {
        width: 100%;
    }
}

/* Tablet landscape / small desktop */
@media (min-width: 577px) and (max-width: 991px) {
    .vp-context-panel {
        width: 300px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .vp-nav-rail {
        min-height: 64px;
        padding-bottom: calc(var(--sab, 0px) + 8px);
        padding-top: 6px;
    }
    .vp-nav-item {
        height: 52px;
        max-width: 100px;
    }
    .vp-nav-item .material-symbols-rounded { font-size: 24px; }
    .vp-nav-item.active .material-symbols-rounded { font-size: 26px; }
    .vp-nav-label { font-size: 11px; }
    .vp-context-panel { width: 340px; }
}

/* Landscape mobile — compact nav */
@media (orientation: landscape) and (max-height: 500px) {
    .vp-nav-rail {
        min-height: 44px;
        padding-top: 2px;
        padding-bottom: calc(var(--sab, 0px) + 2px);
    }
    .vp-nav-item {
        height: 38px;
        border-radius: 8px;
    }
    .vp-nav-item .material-symbols-rounded { font-size: 18px; }
    .vp-nav-item.active .material-symbols-rounded { font-size: 20px; }
    .vp-nav-label { font-size: 8px; }
    .vp-toast-container { bottom: 60px; }
    .vp-context-panel {
        width: 260px;
    }
    .vp-panel-header { padding: 8px 12px; }
    .vp-panel-title { font-size: 14px; }
    .vp-panel-content { padding: 10px; }
}

/* ══════════════════════════════════════════════
   ACCESSIBILITY — REDUCED MOTION
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ══════════════════════════════════════════════
   PWA STANDALONE / FULLSCREEN MODE
   ══════════════════════════════════════════════ */
/* ══════════════════════════════════════════════
   FRIENDS PANEL & PRIVATE CHAT
   ══════════════════════════════════════════════ */

/* ── Friends Panel in Context Panel ── */
.friends-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.friends-tabs {
    display: flex;
    gap: 4px;
    padding: 4px 0 8px;
    flex-wrap: wrap;
}

.friends-tab {
    flex: 1;
    padding: 5px 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: var(--vp-text-muted, rgba(255,255,255,0.5));
    font-size: 11px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    white-space: nowrap;
}

.friends-tab.active {
    background: rgba(var(--vp-accent-rgb, 100,200,150), 0.2);
    border-color: rgba(var(--vp-accent-rgb, 100,200,150), 0.4);
    color: var(--vp-gold, #f0c070);
}

.friends-tab-content { display: none; }
.friends-tab-content.active { display: block; }

/* ── Search Bar ── */
.friends-search-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 6px 10px;
    margin-bottom: 8px;
}

.friends-search-bar .material-symbols-rounded {
    font-size: 16px;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
}

.friends-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
}

.friends-search-input::placeholder { color: rgba(255,255,255,0.3); }

/* ── Friend Card ── */
.friend-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 10px;
    transition: background 0.15s;
}

.friend-card:hover {
    background: rgba(255,255,255,0.04);
}

/* ── Avatar ── */
.friend-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.friend-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.1);
}

.friend-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--vp-bg, #0a0e0d);
}

.friend-status-dot.online  { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.6); }
.friend-status-dot.away    { background: #facc15; }
.friend-status-dot.offline { background: rgba(255,255,255,0.2); }

/* ── Unread Badge ── */
.friend-unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    z-index: 2;
    animation: vpUnreadBadgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

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

/* ── Friend Info & Actions ── */
.friend-info {
    flex: 1;
    min-width: 0;
}

.friend-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-level, .friend-status-text {
    display: block;
    font-size: 10px;
    color: rgba(255,255,255,0.4);
}

.friend-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.friend-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.15s;
}

.friend-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.friend-btn .material-symbols-rounded { font-size: 16px; }

.friend-btn.accept { color: #4ade80; }
.friend-btn.accept:hover { background: rgba(74,222,128,0.1); }
.friend-btn.decline { color: #f87171; }
.friend-btn.decline:hover { background: rgba(248,113,113,0.1); }
.friend-btn.message:hover { background: rgba(99,179,237,0.1); color: #63b3ed; }
.friend-btn.add:hover     { background: rgba(167,243,208,0.1); color: #6ee7b7; }

/* ── Friends Section ── */
.friends-section { margin-bottom: 8px; }
.friends-section-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    padding: 4px 6px 6px;
}

.friends-empty {
    text-align: center;
    padding: 16px;
    font-size: 12px;
    color: rgba(255,255,255,0.35);
}

/* ── Chat View (inline in panel) ── */
.friend-chat-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 300px;
}

.friend-chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 8px;
}

.friend-chat-back {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    flex-shrink: 0;
}

.friend-chat-back .material-symbols-rounded { font-size: 18px; }

.friend-chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
    min-height: 160px;
    max-height: 280px;
}

/* ── Chat Bubbles ── */
.chat-bubble {
    max-width: 85%;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;
}

.chat-bubble.mine {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(var(--vp-accent-rgb,100,200,150),0.3), rgba(var(--vp-accent-rgb,100,200,150),0.15));
    border-bottom-right-radius: 4px;
    color: rgba(255,255,255,0.9);
    margin-left: auto;
}

.chat-bubble.theirs {
    align-self: flex-start;
    background: rgba(255,255,255,0.07);
    border-bottom-left-radius: 4px;
    color: rgba(255,255,255,0.85);
}

.chat-bubble.sending { opacity: 0.6; }
.chat-bubble.failed  { opacity: 0.7; border: 1px solid rgba(248,113,113,0.4); }

.chat-sender {
    display: block;
    font-size: 10px;
    font-weight: 600;
    opacity: 0.6;
    margin-bottom: 2px;
}

.chat-text { display: block; }

.chat-time {
    font-size: 9px;
    opacity: 0.5;
    text-align: right;
    margin-top: 2px;
}

.chat-error { font-size: 10px; color: #f87171; margin-top: 2px; }

/* ── Chat Input Bar ── */
.friend-chat-input-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.friend-chat-input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 7px 10px;
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    outline: none;
}

.friend-chat-input::placeholder { color: rgba(255,255,255,0.3); }

.friend-chat-send {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--vp-accent-rgb,100,200,150),0.8), var(--vp-accent, #4ade80));
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.friend-chat-send:hover { transform: scale(1.05); }
.friend-chat-send .material-symbols-rounded { font-size: 17px; }

.chat-empty-state {
    text-align: center;
    color: rgba(255,255,255,0.4);
    padding: 32px 16px;
    font-size: 13px;
    line-height: 1.6;
}

/* ── Private Chat List (in sidebar chat panel) ── */
.private-chat-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
}

.private-chat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.private-chat-item:hover { background: rgba(255,255,255,0.06); }

.private-chat-unread-pill {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    flex-shrink: 0;
}

@media (display-mode: fullscreen), (display-mode: standalone) {
    html, body {
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .vp-game {
        flex: 1;
        min-height: 0;
    }
}