:root {
    /* Color Palette - Art Deco Navy & Gold Theme (from logo) */
    --bg-gradient-start: #1a3a5c;
    --bg-gradient-end: #0d2a3d;
    --bg-light: #f5f0e1;

    --surface-primary: rgba(20, 50, 75, 0.95);
    --surface-secondary: rgba(30, 65, 100, 0.85);
    --surface-hover: rgba(50, 100, 150, 0.9);
    --surface-card: rgba(35, 70, 105, 0.7);

    --text-primary: #f5f0e1;
    --text-secondary: #b8c5d4;
    --text-muted: #7a8fa3;

    /* Gold accent (from logo) */
    --accent-primary: #c9a227;
    --accent-hover: #dab32e;
    --accent-secondary: #e8c547;
    --accent-danger: #c94a4a;
    --accent-warning: #e8a530;
    --accent-success: #22c55e;

    --border-color: rgba(201, 162, 39, 0.25);
    --border-hover: rgba(201, 162, 39, 0.45);

    /* Team colors - Gold vs Crimson */
    --team-1-color: #c9a227;
    --team-2-color: #c94a4a;

    /* Typography - Sophisticated, readable fonts */
    --font-heading: 'Cinzel', 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Oswald', 'Bebas Neue', sans-serif;

    /* Standardized text sizes for readability */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px - standard UI text */
    --text-base: 0.875rem; /* 14px - base size for consistency */
    --text-lg: 1rem;       /* 16px */
    --text-xl: 1.125rem;   /* 18px */
    --text-2xl: 1.25rem;   /* 20px */
    --text-3xl: 1.5rem;    /* 24px */
    --text-4xl: 1.875rem;  /* 30px */
    --text-5xl: 2.5rem;    /* 40px */

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Effects */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 20px rgba(201, 162, 39, 0.4);
    --shadow-glow-strong: 0 0 30px rgba(201, 162, 39, 0.6);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    --blur-sm: blur(4px);
    --blur-md: blur(8px);
    --blur-lg: blur(16px);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Noise texture for backgrounds (inline SVG) */
    --noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

    /* ============================================
       Responsive Scaling Variables
       Priority-based scaling for tablets/desktops
       ============================================ */

    /* PRIORITY 1: Canasta/meld areas scale first */
    --canasta-height-max: 240px;
    --canasta-height-min: 120px;
    --canasta-height: clamp(var(--canasta-height-min), 20vh, var(--canasta-height-max));

    /* PRIORITY 2: Video boxes scale after canastas hit minimum */
    --video-width-max: 194px;
    --video-width-min: 140px;
    --video-height-max: 133px;
    --video-height-min: 96px;
    --video-width: var(--video-width-max);
    --video-height: var(--video-height-max);

    /* PRIORITY 3: Hand cards scale */
    --hand-card-width-max: 69px;
    --hand-card-width-min: 50px;
    --hand-card-height-max: 104px;
    --hand-card-height-min: 75px;
    --hand-card-width: var(--hand-card-width-max);
    --hand-card-height: var(--hand-card-height-max);

    /* Meld/Canasta cards scale with hand cards */
    --meld-card-width-max: 66px;
    --meld-card-width-min: 48px;
    --meld-card-height-max: 95px;
    --meld-card-height-min: 72px;
    --meld-card-wrapper-height-max: 105px;
    --meld-card-wrapper-height-min: 80px;
    --meld-card-width: var(--meld-card-width-max);
    --meld-card-height: var(--meld-card-height-max);
    --meld-card-wrapper-height: var(--meld-card-wrapper-height-max);

    /* PRIORITY 1: Draw and discard piles scale FIRST - match hand card sizes */
    --draw-pile-width-max: 69px;
    --draw-pile-width-min: 50px;
    --draw-pile-height-max: 104px;
    --draw-pile-height-min: 75px;
    --draw-pile-width: var(--draw-pile-width-max);
    --draw-pile-height: var(--draw-pile-height-max);

    --discard-pile-width-max: 69px;
    --discard-pile-width-min: 50px;
    --discard-pile-height-max: 104px;
    --discard-pile-height-min: 75px;
    --discard-pile-width: var(--discard-pile-width-max);
    --discard-pile-height: var(--discard-pile-height-max);
}

/* Material Symbols configuration */
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}
/* CSS Reset and Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    width: 100%;
    overflow: auto;
}

body {
    font-family: var(--font-body);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Atmospheric background with gradient orbs and noise texture */
    background:
        /* Ambient gold orb - top left */
        radial-gradient(ellipse 80% 60% at 15% 20%,
            rgba(201, 162, 39, 0.12) 0%, transparent 50%),
        /* Ambient warm orb - bottom right */
        radial-gradient(ellipse 70% 50% at 85% 75%,
            rgba(139, 69, 19, 0.08) 0%, transparent 50%),
        /* Subtle blue accent - center */
        radial-gradient(ellipse 100% 80% at 50% 50%,
            rgba(30, 58, 95, 0.15) 0%, transparent 60%),
        /* Base gradient */
        linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    background-attachment: fixed;
}

/* Noise texture overlay for depth */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--noise-texture);
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: overlay;
}

/* Vignette effect for focus */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
    z-index: 9998;
}

/* Typography - Clean, consistent sans-serif throughout */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* Ensure body text is crisp and readable */
p, span, div, button, input, label {
    font-family: var(--font-body);
    letter-spacing: 0.01em;
}

/* Heading font for major titles and branding */
.brand-title, .game-title {
    font-family: var(--font-heading);
    letter-spacing: 0.05em;
}

/* Display font for scores and large numbers - dramatic impact */
.score-display, .counter-running-total, .counter-final-total,
.combined-value, .score-total-value, .count-value,
.game-over-team-score, .header-score .score-value {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Numbers should use tabular figures for alignment */
.score, .points, .count, [class*="score"], [class*="points"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Screen Management */
.screen {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: 1;
}

.screen.active {
    display: flex;
    flex-direction: column;
    opacity: 1;
    z-index: 10;
}

/* Auth Screen */
#auth-screen {
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%, rgba(201, 162, 39, 0.15) 0%, transparent 70%);
}

.auth-logo {
    width: 280px;
    max-width: 80vw;
    height: auto;
    margin-bottom: var(--space-6);
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
}

#auth-screen h1 {
    font-size: var(--text-4xl);
    background: linear-gradient(to right, var(--text-primary), var(--accent-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--space-2);
    letter-spacing: -0.02em;
}

#auth-screen h2 {
    font-size: var(--text-xl);
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: var(--space-8);
}

#auth-forms {
    width: 100%;
    max-width: 400px;
    padding: var(--space-8);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
    backdrop-filter: var(--blur-md);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
}

/* Gradient border effect for glassmorphism */
#auth-forms::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.05) 40%,
        rgba(201, 162, 39, 0.2) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Form Styles */
.form-group {
    margin-bottom: var(--space-4);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.6) 0%, rgba(10, 15, 30, 0.7) 100%);
    color: var(--text-primary);
    font-size: var(--text-base);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.form-group input:focus {
    outline: none;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 0 0 2px rgba(201, 162, 39, 0.4),
        inset 0 0 0 1px rgba(201, 162, 39, 0.3);
}

.form-group input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

/* Buttons */
button {
    padding: var(--space-3) var(--space-6);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

button:active {
    transform: scale(0.98);
}

.btn-primary {
    background: linear-gradient(145deg, #c9a227 0%, #a88a1d 100%);
    color: white;
    width: 100%;
    border: none;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        0 2px 4px rgba(201, 162, 39, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

/* Button ripple/glow effect on interaction */
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
        rgba(255, 255, 255, 0.3) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.btn-primary:active::after {
    opacity: 1;
}

.btn-primary:hover {
    background: linear-gradient(145deg, #d4ad2c 0%, #b89520 100%);
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(201, 162, 39, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-secondary {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.7) 100%);
    color: var(--text-secondary);
    border: none;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-secondary:hover {
    background: linear-gradient(145deg, rgba(40, 51, 69, 0.7) 0%, rgba(25, 33, 52, 0.8) 100%);
    transform: translateY(-2px);
    color: var(--text-primary);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.btn-accent {
    background: linear-gradient(145deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        0 2px 4px rgba(16, 185, 129, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-accent:hover {
    background: linear-gradient(145deg, #22c993 0%, #10b981 100%);
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(16, 185, 129, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-danger {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
    color: var(--accent-danger);
    border: none;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(239, 68, 68, 0.25);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-danger:hover {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.15) 100%);
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(239, 68, 68, 0.4);
}

/* Game card actions */
.game-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* Lobby Screen */
#lobby-screen header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-8);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.9) 0%, rgba(10, 15, 30, 0.95) 100%);
    backdrop-filter: var(--blur-md);
    border-bottom: none;
    z-index: 20;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.25),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.header-logo {
    height: 48px;
    width: auto;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

#lobby-screen h1 {
    font-size: var(--text-2xl);
    background: linear-gradient(to right, var(--text-primary), var(--accent-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#lobby-content {
    flex: 1;
    padding: var(--space-8);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lobby-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.welcome-section {
    text-align: center;
    margin-bottom: var(--space-8);
}

.welcome-section h2 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-2);
}

.subtitle {
    color: var(--text-secondary);
    font-size: var(--text-lg);
}

.action-buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.btn-large {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
    min-width: 200px;
}

.join-section {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.join-section input {
    width: 160px;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: var(--text-base);
    padding: var(--space-3);
}

.games-section {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.6) 100%);
    border-radius: var(--radius-xl);
    border: none;
    padding: var(--space-6);
    width: 100%;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    position: relative;
    backdrop-filter: var(--blur-sm);
}

/* Gradient border for games section */
.games-section::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(201, 162, 39, 0.15) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.games-section h3 {
    margin-bottom: var(--space-4);
    font-size: var(--text-xl);
    color: var(--text-secondary);
    padding-bottom: var(--space-2);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.games-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.game-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.6) 100%);
    border-radius: var(--radius-lg);
    border: none;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    position: relative;
}

/* Gradient border for game cards */
.game-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 50%,
        rgba(201, 162, 39, 0.1) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.game-card:hover {
    background: linear-gradient(145deg, rgba(40, 51, 69, 0.6) 0%, rgba(25, 33, 52, 0.7) 100%);
    transform: translateY(-4px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(201, 162, 39, 0.1);
}

.game-card:hover::before {
    opacity: 1;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(201, 162, 39, 0.1) 50%,
        rgba(201, 162, 39, 0.2) 100%
    );
}

.game-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.game-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-items: flex-start;
}

.player-breakdown {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

.creator-info {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    opacity: 0.85;
}

/* Highlight creator info on hover */
.game-card:hover .creator-info {
    color: var(--accent-secondary);
    opacity: 1;
}

.room-code {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 1px;
}

.status {
    font-size: var(--text-xs);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.status.waiting {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.15) 100%);
    color: var(--accent-secondary);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(16, 185, 129, 0.3);
}

.status.in_progress {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.15) 100%);
    color: var(--accent-warning);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(245, 158, 11, 0.3);
}

.status.finished {
    background: linear-gradient(145deg, rgba(148, 163, 184, 0.2) 0%, rgba(148, 163, 184, 0.1) 100%);
    color: var(--text-muted);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(148, 163, 184, 0.2);
}

.no-games {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-muted);
    font-style: italic;
}

/* Game Screen */
#game-screen {
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
}

#game-canvas {
    display: none;
}

#game-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============== NEW GAME LAYOUT ============== */

.game-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: visible;
    position: relative;
}

/* When no header, game-content takes full height */
.game-layout.no-header .game-content {
    height: 100vh;
}

/* Game Header - Top Bar */
.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4) var(--space-2);
    background: var(--surface-primary);
    backdrop-filter: var(--blur-md);
    flex-shrink: 0;
    z-index: 10;
}

.icon-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.6) 100%);
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.icon-btn:hover {
    background: linear-gradient(145deg, rgba(40, 51, 69, 0.6) 0%, rgba(25, 33, 52, 0.7) 100%);
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.header-scores {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.header-score {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.header-score .material-symbols-outlined {
    font-size: 1.25rem;
}

.header-score.team-1 .material-symbols-outlined {
    color: var(--team-1-color);
}

.header-score.team-2 .material-symbols-outlined {
    color: var(--team-2-color);
}

.header-score .score-value {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.score-divider {
    width: 1px;
    height: 16px;
    background: var(--border-color);
    margin: 0 var(--space-2);
}

/* Game Content - Main + Sidebar */
.game-content {
    display: flex;
    flex: 1;
    overflow: visible;
}

/* Main Game Area - NO SCROLLING */
.game-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 var(--space-4) var(--space-4) var(--space-4);
    gap: var(--space-2);
    overflow: visible;
    min-height: 0;
    max-height: calc(100vh - var(--header-height, 60px)); /* Prevent overflow beyond viewport */
}

/* Top Game Row - Opponents on left, Opponent Canastas on right */
.top-game-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-4);
    flex-shrink: 0;
    height: 133px;
    min-height: 133px;
}

/* ============================================
   Canasta Table - Premium Casino Felt Design
   ============================================
   Realistic felt with weave texture, dished
   lighting, leather rail, and gold accents.
   ============================================ */

/* Opponent Team Canastas Section */
.opponent-canastas-section {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: 15px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: var(--space-3) var(--space-5);
    padding-top: var(--space-3);

    /* Glassmorphism felt background */
    background:
        /* Subtle felt texture */
        repeating-linear-gradient(0deg,
            transparent,
            transparent 3px,
            rgba(0, 0, 0, 0.02) 3px,
            rgba(0, 0, 0, 0.02) 6px
        ),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 3px,
            rgba(0, 0, 0, 0.02) 3px,
            rgba(0, 0, 0, 0.02) 6px
        ),
        /* Soft inner glow */
        radial-gradient(ellipse 100% 60% at 50% 20%,
            rgba(80, 200, 120, 0.15) 0%,
            transparent 60%
        ),
        /* Semi-transparent green base */
        linear-gradient(180deg,
            rgba(30, 128, 80, 0.85) 0%,
            rgba(20, 100, 60, 0.9) 50%,
            rgba(10, 69, 40, 0.95) 100%
        );

    border-radius: 20px;

    /* Leather rail border - solid color with 3D shadow effect */
    border: 5px solid #8a6830;

    /* 3D beveled effect using shadows instead of border colors */
    box-shadow:
        /* Outer drop shadow */
        0 4px 16px rgba(0, 0, 0, 0.35),
        0 8px 32px rgba(0, 0, 0, 0.25),
        /* Top/left highlight on border */
        inset 2px 2px 3px rgba(255, 220, 150, 0.25),
        /* Bottom/right shadow on border */
        inset -2px -2px 3px rgba(0, 0, 0, 0.3),
        /* Recessed felt - strong shadow from top rail */
        inset 0 15px 20px -5px rgba(0, 0, 0, 0.5),
        inset 0 6px 8px -2px rgba(0, 0, 0, 0.35);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    height: var(--canasta-height);
    min-height: var(--canasta-height-min);
    max-height: var(--canasta-height-max);
    overflow: visible;
    transition: box-shadow 0.2s ease;
}

.opponent-canastas-section:hover {
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(201, 162, 39, 0.15),
        inset 2px 2px 4px rgba(255, 220, 150, 0.3),
        inset -2px -2px 4px rgba(0, 0, 0, 0.35),
        inset 0 15px 20px -5px rgba(0, 0, 0, 0.55),
        inset 0 6px 8px -2px rgba(0, 0, 0, 0.4);
}

/* Inner gold inlay line */
.opponent-canastas-section::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 14px;
    border: 1.5px solid rgba(201, 162, 39, 0.45);
    pointer-events: none;
}

/* No after pseudo-element needed */
.opponent-canastas-section::after {
    display: none;
}

.opponent-canastas-section.hidden {
    display: none;
}

.opponent-canastas-section .section-label,
.opponent-canastas-label {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: absolute;
    top: var(--space-3);
    left: var(--space-4);
    z-index: 2;
}

/* Team icons in section labels */
.section-label .team-icon {
    font-size: 16px;
    vertical-align: middle;
}

/* Opponent canastas - centered in box */
.canastas-row.opponent-canastas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex: 1;
    padding: var(--space-2);
    gap: 6px; /* Tight gap between canastas */
    width: 100%;
}

/* Opponent canastas are not clickable */
.opponent-canastas .canasta-meld-visual {
    cursor: default;
    flex-shrink: 1;
    min-width: 50px;
}

.opponent-canastas .canasta-meld-visual.rolled-up {
    min-width: calc(var(--meld-card-height, 95px) + 1px);
}

.opponent-canastas .canasta-meld-visual:hover {
    transform: none;
}

/* Adjust badge position for opponent canastas - move up to not overlap card */
.opponent-canastas .canasta-meld-visual.rolled-up::before {
    top: -2px;
    right: 4px;
}

.card-count-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--surface-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.card-count-badge .material-symbols-outlined {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.card-count-badge span:last-child {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
}

/* Foot Status Indicator */
.foot-status {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
}

.foot-status.has-foot {
    color: var(--accent-warning, #f59e0b);
}

.foot-status.picked-up {
    color: var(--accent-success, #22c55e);
}

.foot-status.picked-up .material-symbols-outlined {
    font-size: 0.875rem;
    font-variation-settings: 'FILL' 1;
}

/* Hand Indicator - Two progress circles with "Hand" label */
.hand-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.hand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    transition: all 0.3s ease;
}

.hand-dot.filled {
    background: var(--accent-success, #22c55e);
    border-color: var(--accent-success, #22c55e);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

/* Hand indicator label - more specific to avoid conflict with .hand-section .hand-label */
.hand-indicator .hand-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02em;
    margin-right: 2px;
    margin-top: 2px;
    /* Override the other .hand-label styles */
    position: static;
    transform: none;
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    text-transform: none;
    backdrop-filter: none;
    line-height: 1;
}

/* Table Center - Piles (centered between opponent and team canastas) */
.table-center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 0;
    margin-top: 0;
    flex-shrink: 0;
}

/* Video and Piles Container - all items equidistant */
.video-piles-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

/* Video seats - Clean design with depth */

.video-placeholder {
    width: var(--video-width);
    height: var(--video-height);
    aspect-ratio: 194 / 133; /* Maintain aspect ratio during scaling */
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: none;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: visible;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.video-placeholder:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 16px 48px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.video-placeholder.self {
    box-shadow:
        0 0 0 2px rgba(34, 197, 94, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.2);
}

.video-placeholder.active {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.video-placeholder.speaking {
    box-shadow:
        0 0 20px rgba(34, 197, 94, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Disconnected player state */
.video-placeholder.player-disconnected {
    opacity: 0.7;
}

/* Pause overlay for disconnected players */
.video-paused-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    z-index: 10;
}

.video-paused-overlay .material-symbols-outlined {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.8);
    animation: pausePulse 2s ease-in-out infinite;
}

.video-paused-overlay .paused-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin-top: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

/* Team Video Section - wraps videos */
.team-video-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Team Videos Container - simple flex container for video placeholders */
.team-videos {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* Team-colored video placeholder - subtle glow accents */
.video-placeholder.my-team {
    background: linear-gradient(145deg, rgba(30, 50, 45, 0.85) 0%, rgba(15, 30, 25, 0.9) 100%);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(201, 162, 39, 0.15);
}

/* Team shadow underline - Gold for Team A (matches scoreboard) */
.video-placeholder.team-a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 8px;
    right: 8px;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, var(--team-1-color, #c9a227) 20%, var(--team-1-color, #c9a227) 80%, transparent 100%);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(201, 162, 39, 0.4);
}

/* Team shadow underline - Crimson for Team B (matches scoreboard) */
.video-placeholder.team-b::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 8px;
    right: 8px;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, var(--team-2-color, #c94a4a) 20%, var(--team-2-color, #c94a4a) 80%, transparent 100%);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(201, 74, 74, 0.4);
}

.video-placeholder.opponent-team {
    background: linear-gradient(145deg, rgba(50, 30, 35, 0.85) 0%, rgba(30, 15, 20, 0.9) 100%);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(201, 74, 74, 0.15);
}

.video-placeholder.my-team.self {
    box-shadow:
        0 0 0 2px rgba(34, 197, 94, 0.4),
        0 0 20px rgba(34, 197, 94, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.3);
}

.video-placeholder.my-team.current-turn,
.video-placeholder.opponent-team.current-turn {
    box-shadow:
        0 0 25px rgba(201, 162, 39, 0.5),
        0 8px 24px rgba(0, 0, 0, 0.3);
}

.video-placeholder video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-lg) - 2px);
    z-index: 5;
    /* Ensure video appears above background content */
}

/* Local video - mirrored for natural selfie view */
.video-placeholder video.local-video {
    transform: scaleX(-1);
}

/* Remote video - not mirrored */
.video-placeholder video.remote-video {
    transform: none;
}

/* Manual play button - shown when autoplay is blocked */
.manual-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border: 2px solid white;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    z-index: 100;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
}

.manual-play-btn:hover {
    background: rgba(0, 0, 0, 0.95);
    transform: translate(-50%, -50%) scale(1.05);
}

.manual-play-btn:active {
    transform: translate(-50%, -50%) scale(0.98);
}

/* ============================================
   Video Controls - Camera/Mic Toggle Buttons
   ============================================ */

/* Container for video/audio toggle buttons - only on local player seat */
.video-controls {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 20;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

/* Show controls on hover or when video is active */
.video-placeholder:hover .video-controls,
.video-placeholder.video-active .video-controls {
    opacity: 1;
}

/* Individual control button */
.video-control-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    padding: 0;
    backdrop-filter: blur(4px);
}

.video-control-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    transform: scale(1.1);
}

.video-control-btn .material-symbols-outlined {
    font-size: 16px;
    font-variation-settings: 'FILL' 0, 'wght' 400;
}

/* Active state - green tint when video/audio is ON */
.video-control-btn.active {
    background: rgba(34, 197, 94, 0.7);
    color: white;
}

.video-control-btn.active:hover {
    background: rgba(34, 197, 94, 0.9);
}

/* When video is active, hide the video-off-icon */
.video-placeholder.video-active .video-off-icon {
    display: none;
}

/* Permission denied/error state */
.video-placeholder.video-error .video-off-icon {
    color: var(--accent-danger, #ef4444);
}

/* Video Box Notification Overlay */
.video-notification-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.video-notification-overlay.show {
    opacity: 1;
    transform: scale(1);
}

.video-notification-content {
    text-align: center;
    padding: var(--space-4);
}

.video-notification-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, #c9a227 0%, #f0d060 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Video Off Icon - Clean minimal style */
.video-off-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.2);
}

.video-off-icon .material-symbols-outlined {
    font-size: 36px;
    font-variation-settings: 'FILL' 0, 'wght' 300;
}

.video-placeholder:hover .video-off-icon {
    color: rgba(255, 255, 255, 0.35);
}

/* Current turn glow effect - gold accent */
.video-placeholder.current-turn {
    box-shadow:
        0 0 25px rgba(201, 162, 39, 0.5),
        0 8px 24px rgba(0, 0, 0, 0.3);
}

.video-placeholder.current-turn .video-off-icon {
    color: rgba(201, 162, 39, 0.5);
}

.video-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    letter-spacing: 0.03em;
}

/* Player avatar circle - clean floating design */
.video-player-avatar {
    position: absolute;
    top: -18px;
    left: -12px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.15);
    z-index: 10;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(40, 50, 60, 0.9) 0%, rgba(20, 30, 40, 0.95) 100%);
}

/* Bot avatar image */
.bot-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Current turn pulse animation on video avatar - gold accent */
.video-player-avatar.current-turn-pulse {
    animation: videoAvatarPulse 1.8s ease-in-out infinite;
    border-color: rgba(201, 162, 39, 0.8);
}

@keyframes videoAvatarPulse {
    0%, 100% {
        box-shadow:
            0 0 15px rgba(201, 162, 39, 0.5),
            0 4px 12px rgba(0, 0, 0, 0.4);
        border-color: rgba(201, 162, 39, 0.8);
    }
    50% {
        box-shadow:
            0 0 30px rgba(201, 162, 39, 0.7),
            0 4px 12px rgba(0, 0, 0, 0.4);
        border-color: rgba(201, 162, 39, 1);
    }
}

/* Clickable avatar for local player - edit profile */
.video-player-avatar.clickable {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.video-player-avatar.clickable:hover {
    transform: scale(1.1);
    box-shadow:
        0 0 0 3px rgba(201, 162, 39, 0.5),
        0 6px 16px rgba(0, 0, 0, 0.5);
}

.video-player-avatar.clickable::after {
    content: '✏️';
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background: var(--accent-primary, #c9a227);
    border-radius: 50%;
    border: 2px solid var(--bg-primary, #0f1729);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.video-player-avatar.clickable:hover::after {
    opacity: 1;
    transform: scale(1.15);
}

/* Current turn indicator on video placeholder - no border, use glow */
.video-placeholder.current-turn {
    box-shadow:
        0 0 25px rgba(201, 162, 39, 0.5),
        0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Partner indicator - subtle glow */
.video-placeholder.partner {
    box-shadow:
        0 0 0 2px rgba(59, 130, 246, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.3);
}

.video-placeholder.active .video-label,
.video-placeholder.self .video-label {
    color: rgba(255, 255, 255, 0.6);
}

/* Player name inside video box at top - clean minimal */
.video-player-name {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    background: transparent;
    padding: 0;
    z-index: 2;
    letter-spacing: 0.02em;
}

/* Player card info display below video box - clean badge style */
.video-player-info {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    padding: 3px 10px;
    z-index: 2;
    background: rgba(15, 23, 42, 0.85);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
}

.video-player-info .player-card-count {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.video-player-info .player-card-count .material-symbols-outlined {
    font-size: 12px;
    font-variation-settings: 'FILL' 0, 'wght' 400;
}

.video-player-info .foot-status {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding-left: 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.video-player-info .foot-status.picked-up {
    color: rgba(34, 197, 94, 0.9);
}

.video-player-info .foot-status.picked-up .material-symbols-outlined {
    font-size: 12px;
}

.video-player-info .foot-status.has-foot {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.6rem;
}

/* Hide video placeholders on smaller screens */
@media (max-width: 900px) {
    .video-feeds-left,
    .video-feeds-right {
        display: none;
    }
}

.piles-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
}

.pile-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -32px;  /* Shift up to align with video centers */
}

.pile-wrapper:first-child .pile-container {
    /* No extra margin needed - button is now to the side */
}

.pile-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    /* Clean design - no border boxes */
    border: none !important;
    background: transparent !important;
}


.pile-action {
    margin-top: 25px;
}

.pile-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.6;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Draw Pile - Clean design with depth - Scales at Priority 1 */
.draw-pile {
    position: relative;
    width: var(--draw-pile-width);
    height: var(--draw-pile-height);
    flex-shrink: 1; /* Allow scaling */
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.draw-pile:hover {
    transform: translateY(-6px) scale(1.02);
}

.draw-pile:hover .draw-pile-card {
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.35),
        0 20px 48px rgba(0, 0, 0, 0.2);
}

/* Stacked cards for depth - bottom cards */
.draw-pile-shadow {
    position: absolute;
    top: 6px;
    left: 4px;
    width: var(--draw-pile-width);
    height: var(--draw-pile-height);
    background: linear-gradient(145deg, #4a1c24 0%, #2d1118 100%);
    border-radius: var(--radius-lg);
    border: 1px solid #2d1118;
}

/* Middle stacked card */
.draw-pile::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 2px;
    width: var(--draw-pile-width);
    height: var(--draw-pile-height);
    background: linear-gradient(145deg, #5a242e 0%, #3a161c 100%);
    border-radius: var(--radius-lg);
    border: 1px solid #2d1118;
    z-index: 1;
}

/* Draw pile card - top card with unified design */
.draw-pile-card {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--draw-pile-width);
    height: var(--draw-pile-height);
    background: linear-gradient(145deg, #722f37 0%, #4a1c24 100%);
    border-radius: var(--radius-lg);
    border: 1.5px solid #3a161c;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 12px 40px rgba(0, 0, 0, 0.15);
    z-index: 2;
    transition: box-shadow 0.2s ease;
}

/* Draw pile card decorative border */
.draw-pile-card::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1.5px solid rgba(201, 162, 39, 0.35);
    border-radius: 4px;
}

/* Draw pile card pattern */
.draw-pile-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 76px;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(201, 162, 39, 0.12) 0px,
            rgba(201, 162, 39, 0.12) 1px,
            transparent 1px,
            transparent 8px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(201, 162, 39, 0.12) 0px,
            rgba(201, 162, 39, 0.12) 1px,
            transparent 1px,
            transparent 8px
        );
    border-radius: 2px;
}

/* Must Draw Highlight - Glow on card when it's time to draw */
.pile-container.must-draw .draw-pile-card {
    box-shadow:
        0 0 25px rgba(245, 158, 11, 0.7),
        0 8px 24px rgba(0, 0, 0, 0.25);
    animation: mustDrawGlow 1.2s ease-in-out infinite;
}

.pile-container.must-draw .pile-label {
    color: var(--accent-warning);
    font-weight: 600;
    opacity: 1;
}

@keyframes mustDrawGlow {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(245, 158, 11, 0.6),
            0 8px 24px rgba(0, 0, 0, 0.25);
    }
    50% {
        box-shadow:
            0 0 35px rgba(245, 158, 11, 0.8),
            0 12px 32px rgba(0, 0, 0, 0.3);
    }
}

/* Must discard indicator - glow on discard pile */
.pile-container.must-discard .discard-pile-card.top-card {
    box-shadow:
        0 0 25px rgba(245, 158, 11, 0.7),
        0 8px 24px rgba(0, 0, 0, 0.25);
    animation: mustDrawGlow 1.2s ease-in-out infinite;
}

.pile-container.must-discard .pile-label {
    color: var(--accent-warning);
    font-weight: 600;
    opacity: 1;
}

/* Stock pile empty state - clean minimal placeholder */
.pile-container.stock-empty .draw-pile-card {
    background: rgba(30, 58, 95, 0.15);
    border: none;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
}

.pile-container.stock-empty .draw-pile-card::before,
.pile-container.stock-empty .draw-pile-card::after {
    display: none;
}

.pile-container.stock-empty .draw-pile::before {
    display: none;
}

.pile-container.stock-empty .draw-pile-shadow {
    opacity: 0.1;
}

.pile-container.stock-empty .pile-label {
    color: rgba(255, 255, 255, 0.4);
}

.pile-container.stock-empty {
    pointer-events: none;
    opacity: 0.5;
}

/* Discard Pile - Clean design with depth - Scales at Priority 1 */
.discard-pile {
    width: var(--discard-pile-width);
    height: var(--discard-pile-height);
    flex-shrink: 1; /* Allow scaling */
    position: relative;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.discard-pile:hover {
    transform: translateY(-6px) scale(1.02);
}

.discard-pile:hover .discard-pile-card.top-card {
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.35),
        0 20px 48px rgba(0, 0, 0, 0.2);
}

/* Individual card in the pile */
.discard-pile-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--discard-pile-width);
    height: var(--discard-pile-height);
    margin-left: calc(var(--discard-pile-width) / -2);
    margin-top: calc(var(--discard-pile-height) / -2);
    background: white;
    border-radius: var(--radius-lg);
    border: 1.5px solid #2a2a2a;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

/* Top card gets enhanced shadow for depth */
.discard-pile-card.top-card {
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.25),
        0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Discard animation: JS handles hiding by not rendering the new top card
   when pendingDiscardAnimation flag is true. The animating-discard class
   is kept for potential future use but no longer hides via CSS. */

.discard-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-1);
    position: relative;
}

.discard-card.red {
    color: #dc2626;
}

.discard-card.black {
    color: #1e293b;
}

.discard-card-corner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.discard-card-corner.top-left {
    align-self: flex-start;
}

.discard-card-corner.bottom-right {
    align-self: flex-end;
    transform: rotate(180deg);
}

.discard-card-corner .rank {
    font-size: var(--text-lg);
    font-weight: 700;
}

.discard-card-corner .suit {
    font-size: var(--text-sm);
}

.discard-card-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
}

/* Joker card in discard pile */
.discard-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: var(--space-1);
}

.discard-card-content .card-text.joker {
    font-size: var(--text-lg);
    font-weight: 700;
    color: #7c3aed;
    text-transform: uppercase;
}

.discard-card-content .card-symbol.joker {
    font-size: 2rem;
}

.empty-discard {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--discard-pile-width);
    height: var(--discard-pile-height);
    margin-left: calc(var(--discard-pile-width) / -2);
    margin-top: calc(var(--discard-pile-height) / -2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.7rem;
    /* Clean placeholder - subtle shadow instead of dashed border */
    background: rgba(255, 255, 255, 0.03);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.5;
}

/* Clickable discard pile for picking up */
.pile-container.clickable {
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pile-container.clickable:hover {
    transform: translateY(-4px);
}

/* Can pickup indicator - glow on the cards, not a border box */
.pile-container.can-pickup {
    cursor: pointer;
}

.pile-container.can-pickup .discard-pile-card.top-card {
    box-shadow:
        0 0 20px rgba(201, 162, 39, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.25);
    animation: canPickupGlow 1.5s ease-in-out infinite;
}

@keyframes canPickupGlow {
    0%, 100% {
        box-shadow:
            0 0 15px rgba(201, 162, 39, 0.5),
            0 8px 24px rgba(0, 0, 0, 0.25);
    }
    50% {
        box-shadow:
            0 0 30px rgba(201, 162, 39, 0.7),
            0 12px 32px rgba(0, 0, 0, 0.3);
    }
}

.pile-container.can-pickup::after {
    content: 'Pick Up';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: var(--accent-primary);
    font-weight: 600;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.7);
    padding: 3px 10px;
    border-radius: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pile-container.can-pickup:hover .discard-pile-card.top-card {
    animation: none;
    box-shadow:
        0 0 35px rgba(201, 162, 39, 0.8),
        0 16px 40px rgba(0, 0, 0, 0.35);
}

/* Player Section - Avatar on left, Canastas on right */
.player-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-1) var(--space-4);
    flex-shrink: 0;
}

.player-section.hidden {
    display: none;
}

.player-name-label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-primary);
}

/* Points Tracker */
.points-tracker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--surface-secondary);
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    margin-top: var(--space-1);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.points-tracker .points-value {
    font-family: var(--font-body);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-size: var(--text-xs);
}

.points-tracker .points-label {
    color: var(--text-muted);
}

.points-tracker .points-requirement {
    color: var(--accent-warning);
    font-weight: 500;
}

/* Points tracker states */
.points-tracker.points-sufficient {
    background: rgba(20, 184, 166, 0.15);
    border-color: var(--accent-primary);
}

.points-tracker.points-sufficient .points-value {
    color: var(--accent-primary);
}

.points-tracker.points-insufficient {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.points-tracker.points-insufficient .points-value {
    color: var(--accent-danger);
}

/* My Canastas Section */
.my-canastas-section {
    padding: var(--space-2) 0;
    flex-shrink: 0;
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* When hovering a meld, ensure tooltip can overflow section */
.my-canastas-section:has(.canasta-meld-visual:hover) {
    overflow: visible;
    z-index: 100001;
}

.section-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
    padding-left: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.canastas-row {
    display: flex;
    justify-content: flex-start;
    align-items: center; /* Center vertically in box */
    align-content: center; /* Center wrapped rows */
    gap: 8px; /* Tighter gap between canastas */
    padding: 0 var(--space-1);
    overflow-x: auto;
    flex-wrap: wrap;
    max-width: 100%;
    flex: 1; /* Take remaining space to enable vertical centering */
    position: relative;
}

/* Allow tooltip to overflow when hovering meld */
.canastas-row:has(.canasta-meld-visual:hover) {
    overflow: visible;
}

.canasta-meld-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform var(--transition-fast);
    min-width: calc(var(--meld-card-width) + 1px);
    padding-bottom: 4px;
    padding-left: 0;
    padding-right: 0;
}

/* Responsive height container for card stack - scales with card size */
.canasta-meld-visual .meld-card-stack-wrapper {
    position: relative;
    height: var(--meld-card-wrapper-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

.canasta-meld-visual:hover {
    transform: translateY(-2px);
    z-index: 100000;
    position: relative;
}

.meld-card-stack {
    position: relative;
    width: var(--meld-card-width);
    height: var(--meld-card-height);
}

/* Stacked cards underneath - shows there are cards in the meld */
.stacked-card {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid #1a1a1a;
    /* Card shadow on felt - crisp and realistic */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Offset stacked cards vertically to show depth (like cards stacked in a pile) */
.stacked-card.offset-1 { top: 0; left: 0; }
.stacked-card.offset-2 { top: 3px; left: 0; }
.stacked-card.offset-3 { top: 6px; left: 0; }
.stacked-card.offset-4 { top: 9px; left: 0; }
.stacked-card.offset-5 {
    top: 12px;
    left: 0;
    /* Top card gets enhanced shadow for "sitting on table" effect */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.08);
}

/* Natural/Clean meld - white/light stacked cards */
.stacked-card.natural {
    background: #fafafa;
    border-color: #1a1a1a;
}

/* Dirty/Mixed meld - gray stacked cards */
.stacked-card.dirty {
    background: #e2e8f0;
    border-color: #1a1a1a;
}

/* Wild canasta visual - purple/magenta theme */
.wild-meld .stacked-card {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-color: #1a1a1a;
}

/* Completed Canasta (7+ cards) - Rotated 90° counter-clockwise */
.canasta-meld-visual.rolled-up {
    min-width: calc(var(--meld-card-height, 95px) + 1px);
}

.canasta-meld-visual.rolled-up .meld-card-stack-wrapper {
    height: calc(var(--meld-card-width, 66px) + 8px);
}

.canasta-meld-visual.rolled-up .meld-card-stack {
    /* Keep original card dimensions, rotate 90° counter-clockwise */
    width: var(--meld-card-width, 66px) !important;
    height: var(--meld-card-height, 95px) !important;
    transform: rotate(-90deg) !important;
}

/* Top card inherits from rotated parent */
.canasta-meld-visual.rolled-up .meld-top-card {
    width: 100%;
    height: 100%;
}

/* Hide stacked shadow cards for rolled-up canastas - just show the single horizontal card */
.canasta-meld-visual.rolled-up .stacked-card {
    display: none;
}

/* Custom tooltip for ALL melds - shows on hover */
.canasta-meld-visual {
    position: relative;
}

.canasta-meld-visual::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    /* Frosted glass effect */
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.75) 0%,
        rgba(15, 23, 42, 0.8) 100%
    );
    color: #f5f0e1;
    padding: 10px 18px;
    border-radius: 12px;
    /* Clean professional typography */
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-transform: none;
    /* Glass edge highlights */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.25);
    /* Soft glass shadow */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    /* Strong blur for glass effect */
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 99999;
    pointer-events: none;
}

.canasta-meld-visual:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Cursor on hover */
.canasta-meld-visual[data-tooltip]:hover {
    cursor: pointer;
}

.meld-top-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid #2a2a2a;
    /* Enhanced shadow for cards sitting on felt table */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px;
}

.meld-top-card.red { color: #dc2626; }
.meld-top-card.black { color: #1e293b; }
.meld-top-card.wild { color: #7c3aed; }  /* Purple for wild cards */

.meld-card-corner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.meld-card-corner.bottom-right {
    align-self: flex-end;
    transform: rotate(180deg);
}

.meld-card-corner .rank {
    font-size: var(--text-sm);
    font-weight: 700;
}

.meld-card-corner .suit {
    font-size: var(--text-xs);
}

.meld-card-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.2rem;
}

.meld-info {
    text-align: center;
    min-width: 40px;
    max-width: 60px;
    margin-top: 10px;
}

.meld-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.meld-count {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 0;
}

.meld-type-label {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: -2px;
}

.natural-meld .meld-type-label {
    color: var(--accent-danger);
}

.dirty-meld .meld-type-label {
    color: var(--accent-warning);
}

.meld-cards-list {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.2;
}

.meld-add-hint {
    font-size: var(--text-xs);
    color: var(--accent-primary);
    margin-top: 2px;
    opacity: 0.8;
}

/* Canasta holder label in Team Canastas section */
#meld-holder-label {
    font-size: var(--text-xs);
    font-weight: 400;
    margin-left: var(--space-1);
}

#meld-holder-label.meld-holder-you {
    color: var(--accent-primary);
}

#meld-holder-label.meld-holder-partner {
    color: var(--text-muted);
}

/* Clickable meld styling */
.clickable-meld {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-radius: var(--radius-md);
    padding: var(--space-2);
    margin: -var(--space-2);
}

.clickable-meld:hover {
    transform: translateY(-4px);
    background: rgba(59, 130, 246, 0.1);
}

.clickable-meld:hover .meld-add-hint {
    opacity: 1;
    color: var(--accent-primary);
    font-weight: 600;
}

.clickable-meld:active {
    transform: translateY(-2px);
}

.no-melds {
    font-family: 'Great Vibes', cursive;
    color: rgba(201, 162, 39, 0.5);
    font-size: 1.3rem;
    text-align: center;
    padding: var(--space-4);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.02em;
}

/* Hand Section - moved up for better visibility */
.hand-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    position: relative;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hand Label - shows selected cards and total points (only when cards selected) */
.hand-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    margin-top: -16px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(145deg, rgba(30, 58, 95, 0.95) 0%, rgba(20, 40, 70, 0.98) 100%);
    padding: 10px 20px;
    border-radius: var(--radius-lg);
    z-index: 10;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(201, 162, 39, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    backdrop-filter: blur(12px);
}

.hand-label.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-80%);
}

.hand-label .selected-points {
    color: var(--accent-primary);
    font-weight: 800;
    margin-left: 10px;
    font-size: 0.95rem;
}

/* Red color for penalty points (negative totals) */
.hand-label .selected-points.penalty {
    color: #ef4444;
}

/* Card symbols in hand label */
.hand-label span[style] {
    font-weight: 700;
    font-size: 1rem;
    margin: 0 3px;
}

/* Draw Prompt - appears over hand when it's time to draw */
.draw-prompt {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    font-size: var(--text-base);
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(20, 184, 166, 0.5);
    align-items: center;
    gap: var(--space-2);
    animation: pulseGlow 1.5s ease-in-out infinite;
    pointer-events: auto;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.draw-prompt:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 6px 25px rgba(20, 184, 166, 0.7);
}

.draw-prompt:active {
    transform: translate(-50%, -50%) scale(0.98);
}

.draw-prompt.visible {
    display: flex;
}

.draw-prompt .material-symbols-outlined {
    font-size: 1.25rem;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(20, 184, 166, 0.5);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        box-shadow: 0 4px 30px rgba(20, 184, 166, 0.8);
        transform: translate(-50%, -50%) scale(1.02);
    }
}

/* ============================================
   Canasta Requirements Row
   Single row with Go Out text, dots, and action buttons
   ============================================ */
.canasta-requirements-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 14px;
    margin: 0 var(--space-4);
    margin-top: -13px;
    background: transparent;
}

/* Left side: Go Out text + requirement dots */
.req-tracker-left {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 0;
    flex-shrink: 0;
}

.req-icon {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.4);
}

.req-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.canasta-requirements-row.complete .req-icon,
.canasta-requirements-row.complete .req-title {
    color: var(--accent-success);
}

.canasta-requirements-row.complete .req-icon {
    font-variation-settings: 'FILL' 1;
}

.req-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.req-dots {
    display: flex;
    gap: 4px;
}

.req-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid;
    transition: all 0.3s ease;
    position: relative;
}

/* Pulse animation when dot becomes filled */
.req-dot.filled {
    animation: req-dot-pulse 0.4s ease-out;
}

@keyframes req-dot-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Natural canasta dots - orange/gold */
.req-item.natural .req-dot {
    border-color: rgba(245, 158, 11, 0.4);
    background: transparent;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.req-item.natural .req-dot.filled {
    border-color: #f59e0b;
    background: linear-gradient(145deg, #f59e0b, #d97706);
    box-shadow:
        0 0 8px rgba(245, 158, 11, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Pending state - could be completed with hand cards */
.req-item.natural .req-dot.pending {
    border-color: #f59e0b;
    background: transparent;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
    animation: pending-pulse 1.5s ease-in-out infinite;
}

/* Mixed canasta container - needs relative for hidden tracker positioning */
.req-item.mixed {
    position: relative;
}

/* Mixed canasta dots - dark gray/black */
.req-item.mixed .req-dot {
    border-color: rgba(100, 116, 139, 0.4);
    background: transparent;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.req-item.mixed .req-dot.filled {
    /* Use a bright steel blue color for visibility against dark backgrounds */
    border-color: #60a5fa;
    background: linear-gradient(145deg, #3b82f6, #2563eb);
    box-shadow:
        0 0 12px rgba(59, 130, 246, 0.8),
        0 0 6px rgba(59, 130, 246, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Pending state - could be completed with hand cards */
.req-item.mixed .req-dot.pending {
    border-color: #60a5fa;
    background: transparent;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
    animation: pending-pulse 1.5s ease-in-out infinite;
}

/* Pulse animation for pending dots */
@keyframes pending-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Overall tracker potential state */
.canasta-requirements-row.potential .req-title {
    color: rgba(255, 215, 0, 0.8);
}

.req-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.req-item.natural .req-label {
    color: rgba(245, 158, 11, 0.7);
}

.req-item.mixed .req-label {
    color: rgba(148, 163, 184, 0.7);
}

/* When all requirements met, highlight text */
.canasta-requirements-row.complete .req-title {
    color: var(--accent-success);
}

/* Hidden Canasta Tracker - positioned absolutely under Dirty indicator */
.hidden-canasta-tracker {
    position: absolute;
    top: calc(100% + 10px);  /* 10px below parent */
    left: 0;                  /* Align with left edge (the "D") */
    z-index: 10;              /* Overlay on top of other elements */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 6px;
    cursor: pointer;          /* Show it's clickable */
    transition: all 0.2s ease;
    white-space: nowrap;      /* Prevent wrapping */
}

/* Hover state for clickable tracker */
.hidden-canasta-tracker:hover {
    background: rgba(124, 58, 237, 0.25);
    border-color: rgba(124, 58, 237, 0.5);
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

/* Focus state for accessibility */
.hidden-canasta-tracker:focus {
    outline: 2px solid #a78bfa;
    outline-offset: 2px;
}

/* Drag-over state for dropping wilds */
.hidden-canasta-tracker.drag-over {
    background: rgba(124, 58, 237, 0.4);
    border-color: #a78bfa;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.6);
    animation: pulse-glow 0.5s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
    from {
        box-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
    }
    to {
        box-shadow: 0 0 25px rgba(124, 58, 237, 0.8);
    }
}

.hidden-tracker-label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #a78bfa;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.hidden-tracker-label .material-symbols-outlined {
    font-size: 0.9rem;
}

.hidden-tracker-progress {
    display: flex;
    gap: 3px;
}

.hidden-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.3);
    border: 1px solid rgba(124, 58, 237, 0.5);
    transition: all 0.2s ease;
}

.hidden-dot.filled {
    background: #a78bfa;
    border-color: #c4b5fd;
    box-shadow: 0 0 4px rgba(167, 139, 250, 0.5);
}

.hidden-tracker-count {
    font-size: 0.6rem;
    font-weight: 700;
    color: #c4b5fd;
}

/* Selected Cards Display - shows selected cards with points above hand */
.selected-cards-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

.selected-cards-display span.red {
    color: #ef4444;
}

.selected-cards-display span.black {
    color: #e2e8f0;
}

.selected-cards-display .selected-points {
    color: #fbbf24;
    margin-left: 8px;
    font-size: 0.85rem;
}

.selected-cards-display .selected-points.penalty {
    color: #ef4444;
}

/* Multi-meld group highlighting - subtle colored glow for different meld groups */
.selected-cards-display span.meld-group-1 {
    text-shadow: 0 0 8px rgba(52, 211, 153, 0.7), 0 0 12px rgba(52, 211, 153, 0.4);
}

.selected-cards-display span.meld-group-2 {
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.7), 0 0 12px rgba(96, 165, 250, 0.4);
}

.selected-cards-display span.meld-group-3 {
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.7), 0 0 12px rgba(251, 191, 36, 0.4);
}

.selected-cards-display span.meld-group-4 {
    text-shadow: 0 0 8px rgba(244, 114, 182, 0.7), 0 0 12px rgba(244, 114, 182, 0.4);
}

/* Game Action Buttons Row - separate from canasta tracker */
.game-action-buttons-row {
    display: flex;
    justify-content: flex-end;
    padding: 0 var(--space-4);
    margin-top: -26px;
}

/* Game action buttons */
.game-action-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
    position: relative;
    z-index: 5;
    flex-shrink: 1;
    min-width: 0;
}

.hand-actions {
    display: flex;
    gap: var(--space-2);
    flex: 1; /* Take equal space as left side for centering */
    justify-content: flex-end; /* Keep buttons right-aligned */
}

.action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all var(--transition-fast);
}

.action-btn .material-symbols-outlined {
    font-size: 1rem;
}

.action-btn.secondary {
    background: var(--surface-secondary);
    color: var(--text-primary);
}

.action-btn.secondary:hover {
    background: var(--surface-hover);
}

.action-btn.primary {
    background: var(--accent-primary);
    color: var(--bg-gradient-start);
}

.action-btn.primary:hover:not(:disabled) {
    background: var(--accent-hover);
}

.action-btn.warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--accent-warning);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.action-btn.warning:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.3);
}

.action-btn.secondary {
    background: rgba(100, 116, 139, 0.2);
    color: var(--text-secondary);
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.action-btn.secondary:hover:not(:disabled) {
    background: rgba(100, 116, 139, 0.3);
    color: var(--text-primary);
}

.action-btn.danger {
    background: var(--accent-danger);
    color: white;
}

.action-btn.danger:hover:not(:disabled) {
    background: #dc2626;
}

.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Player Info Row - Avatar and Canastas side by side */
.player-info-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-4);
    flex-shrink: 0;
    height: 133px;
    min-height: 133px;
}

/* Hand Area - Container for foot display and hand */
.hand-area {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto; /* Push to bottom of game-main */
    flex-shrink: 0;
    height: auto; /* Allow flexible height for info bar below cards */
    min-height: 140px; /* Match player-hand height (124px) + some buffer */
    overflow: visible; /* Allow cards to pop up on hover */
    padding-bottom: var(--space-4); /* Increased from space-2 for more bottom clearance */
    margin-bottom: var(--space-2); /* Additional bottom margin to prevent cutoff */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Foot/Second Hand Display - Left of hand area */
.foot-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 24px; /* Match player-hand top padding to align with cards */
    position: relative;
}

.foot-display.hidden {
    display: none;
}

/* Help Button - positioned over foot display */
.help-btn {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    font-weight: 700;
    padding: 0;
}

/* Override [title] help cursor for clickable help button */
.help-btn[title] {
    cursor: pointer;
}

.help-btn:hover {
    transform: translateX(-50%) scale(1.1);
    background: rgba(96, 165, 250, 0.95);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.help-btn:active {
    transform: translateX(-50%) scale(0.95);
}

.foot-pile {
    position: relative;
    width: var(--hand-card-width);
    height: var(--hand-card-height);
}

/* Shadow layer for stacked card effect */
.foot-pile::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: var(--hand-card-width);
    height: var(--hand-card-height);
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
}

/* Foot card back - uses unified card back styling from cards.css */
.foot-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--hand-card-width);
    height: var(--hand-card-height);
    background: linear-gradient(145deg, #722f37 0%, #4a1c24 100%);
    border-radius: 8px;
    border: 1.5px solid #3a161c;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Foot card back decorative pattern */
.foot-card-back::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1.5px solid rgba(201, 162, 39, 0.4);
    border-radius: 4px;
}

.foot-card-back::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 78px;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(201, 162, 39, 0.15) 0px,
            rgba(201, 162, 39, 0.15) 1px,
            transparent 1px,
            transparent 8px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(201, 162, 39, 0.15) 0px,
            rgba(201, 162, 39, 0.15) 1px,
            transparent 1px,
            transparent 8px
        );
    border-radius: 2px;
}

.foot-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
}

/* Foot Picked Up State */
.foot-display.foot-picked-up .foot-pile::before {
    display: none;
}

.foot-picked-indicator {
    width: 80px;
    height: 112px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 8px;
    border: 2px solid #047857;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foot-picked-indicator .material-symbols-outlined {
    font-size: 32px;
    color: white;
    font-variation-settings: 'FILL' 1;
}

.picked-up-text {
    color: #10b981;
    font-weight: 600;
}

/* Pickup Foot Modal */
.pickup-foot-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.pickup-foot-modal.hidden {
    display: none;
}

.pickup-foot-content {
    background: var(--surface-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    max-width: 320px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-2xl);
    animation: modalSlideIn 0.3s ease-out;
}

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

.pickup-foot-content h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
    color: var(--accent-primary);
}

.pickup-foot-content p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.pickup-foot-btn {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
}

/* Team Canastas Side - Premium leather rail matching opponent table */
.team-canastas-side {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: 15px;
    margin-top: 8px;
    padding: var(--space-3) var(--space-5);
    padding-top: var(--space-3);

    /* Felt background with texture */
    background:
        /* Subtle felt texture */
        repeating-linear-gradient(0deg,
            transparent,
            transparent 3px,
            rgba(0, 0, 0, 0.02) 3px,
            rgba(0, 0, 0, 0.02) 6px
        ),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 3px,
            rgba(0, 0, 0, 0.02) 3px,
            rgba(0, 0, 0, 0.02) 6px
        ),
        /* Soft inner glow */
        radial-gradient(ellipse 100% 60% at 50% 20%,
            rgba(80, 200, 120, 0.15) 0%,
            transparent 60%
        ),
        /* Green base */
        linear-gradient(180deg,
            rgba(30, 128, 80, 0.95) 0%,
            rgba(20, 100, 60, 0.98) 50%,
            rgba(10, 69, 40, 1) 100%
        );

    border-radius: 20px;

    /* Leather rail border - solid color with 3D shadow effect */
    border: 5px solid #8a6830;

    /* 3D beveled effect using shadows instead of border colors */
    box-shadow:
        /* Outer drop shadow */
        0 4px 16px rgba(0, 0, 0, 0.35),
        0 8px 32px rgba(0, 0, 0, 0.25),
        /* Top/left highlight on border */
        inset 2px 2px 3px rgba(255, 220, 150, 0.25),
        /* Bottom/right shadow on border */
        inset -2px -2px 3px rgba(0, 0, 0, 0.3),
        /* Recessed felt - strong shadow from top rail */
        inset 0 15px 20px -5px rgba(0, 0, 0, 0.5),
        inset 0 6px 8px -2px rgba(0, 0, 0, 0.35);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    height: var(--canasta-height);
    min-height: var(--canasta-height-min);
    max-height: var(--canasta-height-max);
    overflow: visible;
    transition: box-shadow 0.2s ease;
}

.team-canastas-side:hover {
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(201, 162, 39, 0.15),
        inset 2px 2px 4px rgba(255, 220, 150, 0.3),
        inset -2px -2px 4px rgba(0, 0, 0, 0.35),
        inset 0 15px 20px -5px rgba(0, 0, 0, 0.55),
        inset 0 6px 8px -2px rgba(0, 0, 0, 0.4);
}

/* Inner gold inlay line */
.team-canastas-side::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 14px;
    border: 1.5px solid rgba(201, 162, 39, 0.45);
    pointer-events: none;
}

/* No after pseudo-element needed */
.team-canastas-side::after {
    display: none;
}

/* Always visible when game is playing - JS removes hidden class */
.team-canastas-side.hidden {
    /* Still show the container, just empty */
    display: flex;
}

.team-canastas-side .section-label {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: absolute;
    top: var(--space-3);
    left: var(--space-4);
    z-index: 2;
}

.team-canastas-side .no-melds-placeholder {
    font-family: 'Great Vibes', cursive;
    color: rgba(201, 162, 39, 0.5);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    text-align: center;
    z-index: 1;
    letter-spacing: 0.02em;
}

.team-canastas-side .canastas-row {
    display: flex;
    gap: 0px !important;
    overflow-x: visible;
    overflow-y: visible;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 12px 0 var(--space-1) 0; /* Extra top padding for badges */
    flex-wrap: nowrap;
}

/* Scale down canastas in team section when there are many */
.team-canastas-side .canasta-meld-visual {
    flex-shrink: 1;
    min-width: 50px;
    transform-origin: top left;
    margin: 0; /* Ensure no inherited margins affecting spacing */
}

.team-canastas-side .canasta-meld-visual.rolled-up {
    min-width: calc(var(--meld-card-height, 95px) + 1px);
}

/* Hidden Canasta Container */
.hidden-canasta-container {
    position: relative;
    padding: var(--space-2);
    background: linear-gradient(145deg, rgba(100, 60, 160, 0.4) 0%, rgba(60, 40, 120, 0.5) 100%);
    border: none;
    border-radius: var(--radius-lg);
    margin-left: auto; /* Right-justify in flex container */
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(168, 85, 247, 0.3),
        inset 0 0 0 1px rgba(168, 85, 247, 0.3);
    animation: hiddenPulse 2s ease-in-out infinite;
}

/* Clickable state for convert-to-wild */
.hidden-canasta-container.clickable {
    cursor: pointer;
}

.hidden-canasta-container.clickable:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(168, 85, 247, 0.5),
        inset 0 0 0 1px rgba(168, 85, 247, 0.4);
}

@keyframes hiddenPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 15px rgba(168, 85, 247, 0.3), inset 0 0 0 1px rgba(168, 85, 247, 0.3); }
    50% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 25px rgba(168, 85, 247, 0.5), inset 0 0 0 1px rgba(168, 85, 247, 0.4); }
}

.hidden-canasta-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Tagged badge (single "H" character) */
.hidden-canasta-badge.tagged {
    font-size: 0.75rem;
    font-weight: 800;
    font-family: var(--font-display, 'Oswald', sans-serif);
    padding: 3px 7px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(168, 85, 247, 0.4);
}

.hidden-canasta-visual {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.hidden-stack .stacked-card.hidden {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.meld-top-card.hidden-card {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    color: white;
    border: 2px solid #a855f7;
}

.hidden-canasta-points {
    font-size: var(--text-xs);
    font-weight: 700;
    color: #a855f7;
    margin: 0;
}

.play-hidden-btn {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: 4px;
}

.play-hidden-btn:hover {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    transform: scale(1.05);
}

/* ============================================
   Hidden Canasta Tracker - Compact Display
   Positioned below Dirty tracker with 10px gap
   ============================================ */

.hidden-canasta-tracker-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 14px 0 100px;
    margin: 30px var(--space-4) 0 var(--space-4);
    height: 0;
    overflow: visible;
    opacity: 0;
    animation: slideInFromTop 0.4s ease-out forwards;
}

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

.hidden-canasta-compact {
    position: relative;
    padding: var(--space-2);
    background: linear-gradient(145deg, rgba(100, 60, 160, 0.5), rgba(60, 40, 120, 0.6));
    border-radius: var(--radius-lg);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Triple-ring enhanced glow */
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 12px rgba(168, 85, 247, 0.4),
        0 0 20px rgba(168, 85, 247, 0.2),
        inset 0 0 0 1px rgba(168, 85, 247, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1);

    animation: floatingPulseGlow 3s ease-in-out infinite;
}

@keyframes floatingPulseGlow {
    0%, 100% {
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.4),
            0 0 10px rgba(168, 85, 247, 0.3),
            0 0 18px rgba(168, 85, 247, 0.2),
            0 0 28px rgba(168, 85, 247, 0.1),
            inset 0 0 0 1px rgba(168, 85, 247, 0.4),
            inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
        transform: translateY(0px);
    }
    50% {
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.5),
            0 0 16px rgba(168, 85, 247, 0.6),
            0 0 28px rgba(168, 85, 247, 0.4),
            0 0 40px rgba(168, 85, 247, 0.2),
            inset 0 0 0 1px rgba(168, 85, 247, 0.6),
            inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
        transform: translateY(-2px);
    }
}

.hidden-canasta-compact.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.hidden-canasta-compact.clickable:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(168, 85, 247, 0.7),
        0 0 35px rgba(168, 85, 247, 0.5),
        0 0 50px rgba(168, 85, 247, 0.3),
        inset 0 0 0 1px rgba(168, 85, 247, 0.6),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
}

/* Drag-and-drop visual feedback */
.hidden-canasta-compact.drag-over {
    transform: translateY(-6px) scale(1.05);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(138, 43, 226, 0.9),
        0 0 50px rgba(138, 43, 226, 0.7),
        0 0 70px rgba(138, 43, 226, 0.5),
        inset 0 0 0 2px rgba(138, 43, 226, 0.8),
        inset 0 2px 0 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg,
        rgba(138, 43, 226, 0.15),
        rgba(168, 85, 247, 0.1));
    border: 2px solid #8a2be2;
}

.hidden-canasta-badge-compact {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(168, 85, 247, 0.4);
    animation: badgeShimmer 2s ease-in-out infinite;
}

@keyframes badgeShimmer {
    0%, 100% { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(168, 85, 247, 0.4); }
    50% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 14px rgba(168, 85, 247, 0.7), 0 0 20px rgba(168, 85, 247, 0.4); }
}

.hidden-canasta-badge-compact.tagged {
    font-size: 0.65rem;
    font-weight: 800;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.hidden-canasta-visual-compact {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.hidden-card-stack-compact {
    position: relative;
    width: 40px;
    height: 60px;
    flex-shrink: 0;
}

.hidden-stacked-card {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    border-radius: var(--radius-md);
    border: 1.5px solid #a855f7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.hidden-stacked-card.offset-1 { top: 0; left: 0; }
.hidden-stacked-card.offset-2 { top: 2px; left: 0; }

.hidden-top-card {
    position: absolute;
    top: 4px;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    color: white;
    border: 2px solid #a855f7;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
}

.hidden-info-compact {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 50px;
}

.hidden-title-compact {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
}

.hidden-points-compact {
    font-size: 0.7rem;
    font-weight: 800;
    color: #a855f7;
    margin: 0;
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}

.hidden-hint-compact {
    font-size: 0.55rem;
    color: var(--accent-primary);
    margin: 0;
    opacity: 0.8;
    font-style: italic;
}

.play-hidden-compact-btn {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
    border: none;
    padding: 3px 6px;
    border-radius: var(--radius-full);
    font-size: 0.6rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.play-hidden-compact-btn:hover {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    transform: scale(1.05);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Wild Canasta Button (1000 pts - plays to table) */
.action-btn.wild-canasta-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.action-btn.wild-canasta-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #d97706, #b45309);
}

/* Hidden Canasta Button (1500 pts - stays in hand) */
.action-btn.accent {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
}

.action-btn.accent:hover:not(:disabled) {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
}

/* Draw Card Overlay - appears over hand when player needs to draw */
.draw-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 42, 61, 0.7);
    backdrop-filter: blur(4px);
    z-index: 100;
    border-radius: var(--radius-lg);
    cursor: pointer;
    animation: drawOverlayPulse 2s ease-in-out infinite;
}

@keyframes drawOverlayPulse {
    0%, 100% {
        box-shadow: inset 0 0 30px rgba(201, 162, 39, 0.2);
    }
    50% {
        box-shadow: inset 0 0 50px rgba(201, 162, 39, 0.4);
    }
}

.draw-overlay-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--accent-primary) 0%, #b8922a 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    color: #0d1f2d;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow:
        0 4px 20px rgba(201, 162, 39, 0.5),
        0 8px 40px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    animation: drawBtnBounce 1.5s ease-in-out infinite;
}

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

.draw-overlay-btn:hover {
    background: linear-gradient(135deg, #dab32e 0%, var(--accent-primary) 100%);
    box-shadow:
        0 6px 30px rgba(201, 162, 39, 0.6),
        0 12px 50px rgba(0, 0, 0, 0.4);
    transform: scale(1.08);
    animation: none;
}

.draw-overlay-btn .material-symbols-outlined {
    font-size: 1.75rem;
}

/* ============================================
   Meld Suggestions Panel
   Shows after picking up the discard pile
   ============================================ */

.meld-suggestions-panel {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    background: rgba(13, 42, 61, 0.95);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    padding: 8px 12px;
    z-index: 200;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(201, 162, 39, 0.2);
    backdrop-filter: blur(8px);
    animation: suggestionsSlideIn 0.3s ease-out;
    max-width: 90%;
}

@keyframes suggestionsSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.suggestions-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(201, 162, 39, 0.3);
}

.suggestions-header .material-symbols-outlined {
    font-size: 1rem;
    color: var(--accent-primary);
}

.suggestions-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 1;
}

.dismiss-suggestions-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.dismiss-suggestions-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.dismiss-suggestions-btn .material-symbols-outlined {
    font-size: 1rem;
}

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

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.suggestion-item:hover {
    background: rgba(201, 162, 39, 0.2);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}

.suggestion-item.can-canasta {
    border-color: var(--accent-success);
    background: rgba(34, 197, 94, 0.15);
}

.suggestion-item.can-canasta:hover {
    background: rgba(34, 197, 94, 0.25);
}

.suggestion-rank {
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 24px;
}

.suggestion-details {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.natural-count {
    color: var(--text-primary);
}

.wild-count {
    color: var(--accent-warning);
    font-weight: 600;
}

.suggestion-points {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.canasta-badge {
    background: var(--accent-success);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 4px;
    animation: canastaPulse 1.5s ease-in-out infinite;
}

@keyframes canastaPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Player Hand Scroll Container */
.hand-scroll-container {
    overflow: visible; /* Allow cards to extend outside in all directions */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.player-hand {
    display: flex;
    flex-wrap: nowrap;
    padding: 20px var(--space-4) 24px; /* Top padding for lift, increased bottom padding to prevent cutoff */
    height: auto;
    min-height: 130px;
    align-items: flex-end; /* Align cards at bottom so they lift up */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    margin-left: 5px; /* Shift hand right by 5px */
    overflow: visible; /* Allow cards to extend outside container */
}

/* Hand Cards - Large overlapping style (15% larger: 60->69, 90->104) */
.hand-card {
    flex-shrink: 0;
    width: var(--hand-card-width);
    height: var(--hand-card-height);
    aspect-ratio: 2 / 3; /* Maintain card aspect ratio during scaling */
    background: white;
    border-radius: var(--radius-md);
    border: 2px solid #1a1a1a;
    box-shadow: var(--shadow-md);
    margin-left: calc(var(--hand-card-width) * -0.507); /* 35/69 = 0.507 - maintain overlap ratio */
    cursor: pointer;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px;
}

.hand-card:first-child {
    margin-left: 0;
}

/* Z-index stacking - right cards stay on top */
.hand-card:nth-child(1) { z-index: 1; }
.hand-card:nth-child(2) { z-index: 2; }
.hand-card:nth-child(3) { z-index: 3; }
.hand-card:nth-child(4) { z-index: 4; }
.hand-card:nth-child(5) { z-index: 5; }
.hand-card:nth-child(6) { z-index: 6; }
.hand-card:nth-child(7) { z-index: 7; }
.hand-card:nth-child(8) { z-index: 8; }
.hand-card:nth-child(9) { z-index: 9; }
.hand-card:nth-child(10) { z-index: 10; }
.hand-card:nth-child(11) { z-index: 11; }
.hand-card:nth-child(12) { z-index: 12; }
.hand-card:nth-child(13) { z-index: 13; }
.hand-card:nth-child(14) { z-index: 14; }
.hand-card:nth-child(15) { z-index: 15; }
.hand-card:nth-child(n+16) { z-index: 16; }

/* Hover: slide up - keeps z-index from nth-child */
.hand-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-lg);
}

/* Selected: slide up more - no gold border, no z-index change */
.hand-card.selected {
    transform: translateY(-18px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

/* Selected + hover: same as selected */
.hand-card.selected:hover {
    transform: translateY(-18px);
}

/* Warning styling for selected dead cards (3s) */
.hand-card.selected.dead-card {
    border: 2px solid #ef4444;
    box-shadow: 0 8px 16px rgba(239, 68, 68, 0.4);
}

/* Hand card suit colors */
.hand-card.red { color: #dc2626 !important; }
.hand-card.black { color: #1e293b !important; }

/* Hand card child elements inherit color */
.hand-card.red .rank,
.hand-card.red .suit,
.hand-card.red .hand-card-center { color: #dc2626 !important; }

.hand-card.black .rank,
.hand-card.black .suit,
.hand-card.black .hand-card-center { color: #1e293b !important; }

/* Wild card grouped with naturals - visual indicator */
.hand-card.wild.grouped {
    margin-left: calc(var(--hand-card-width) * -0.652); /* 45/69 = 0.652 - more overlap to show grouping */
    border: 2px solid rgba(201, 162, 39, 0.5);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.15),
        0 0 8px rgba(201, 162, 39, 0.2);
    z-index: 50; /* Ensure grouped wilds appear above non-grouped cards */
}

.hand-card.wild.grouped.selected {
    border-color: var(--accent-primary);
    box-shadow:
        0 0 0 2px var(--accent-primary),
        0 8px 16px rgba(0, 0, 0, 0.25),
        0 0 12px rgba(201, 162, 39, 0.4);
}

/* Drag and drop visual feedback */
.hand-card.dragging {
    opacity: 0.6;
    transform: translateY(-20px) scale(1.05) !important;
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(201, 162, 39, 0.4);
    z-index: 100 !important;
    cursor: grabbing;
}

.hand-card[draggable="true"] {
    cursor: grab;
}

/* Meld drop target highlighting */
.clickable-meld.drag-over {
    transform: scale(1.08);
    box-shadow:
        0 0 0 3px var(--accent-primary),
        0 0 20px rgba(201, 162, 39, 0.5),
        0 8px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.clickable-meld.drag-over .meld-top-card {
    border-color: var(--accent-primary);
}

.hand-card-corner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.hand-card-corner.bottom-right {
    align-self: flex-end;
    transform: rotate(180deg);
    margin-bottom: -4px;
    margin-right: -2px;
}

.hand-card-corner .rank {
    font-size: var(--text-xl); /* Scaled up 15% */
    font-weight: 700;
}

.hand-card-corner .suit {
    font-size: var(--text-base); /* Scaled up 15% */
}

.hand-card-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.3rem; /* Scaled up 15% */
}

.hand-card.joker {
    background: linear-gradient(145deg, #fef9e7 0%, #fef3c7 100%);
    color: #7c3aed;
}

/* Joker card gold styling for hand cards */
.hand-card.joker .joker-rank {
    font-weight: 800;
    font-size: 1.2rem;
    color: #c9a227;
}

.hand-card.joker .joker-star {
    color: #c9a227;
    font-size: 0.9rem;
}

.hand-card.joker .joker-center {
    font-size: 2.8rem;
    color: #c9a227;
}

/* Legacy hand-card-content for backwards compatibility */
.hand-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-2);
}

.hand-card-content .card-text {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #1e293b;
}

.hand-card-content .card-emoji {
    font-size: 2.5rem;
}

.no-cards {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: var(--space-8);
}

/* ==========================================
   Sidebar - Scoreboard & Chat
   ========================================== */
.game-sidebar {
    width: 280px;
    background: transparent;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: visible;  /* Allow pull-tab to extend outside */
    padding: var(--space-2);
    gap: var(--space-1);
    position: relative; /* Required for pull-tab absolute positioning */
}

/* Sidebar Collapse Button */
.sidebar-collapse-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sidebar-collapse-btn:hover {
    color: var(--accent-primary);
    background: rgba(201, 162, 39, 0.1);
}

.sidebar-collapse-btn .material-symbols-outlined {
    font-size: 20px;
}

/* Desktop Sidebar Collapse Behavior */
@media (min-width: 1025px) {
    .game-sidebar {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .game-sidebar.collapsed {
        transform: translateX(100%);
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: 0;
        pointer-events: none;
    }

}

/* ============================================
   Pull Tab Handle - 3D Button Style
   Now positioned as sibling to sidebar for proper
   visibility when sidebar is collapsed
   ============================================ */
.sidebar-pull-tab {
    /* Button reset */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit;

    /* Fixed position flush against sidebar edge */
    position: fixed;
    right: 268px; /* Position so right edge touches sidebar */
    bottom: 20px; /* Bottom of button aligns with top of Game Activity arc */
    width: 22px;
    height: 64px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px 0 0 8px;
    overflow: visible;
    padding: 0;

    /* 3D raised button - Navy with gold accent to match game theme */
    background: linear-gradient(90deg,
        #2d3a4f 0%,
        #1e293b 35%,
        #0f172a 100%
    ) !important;

    /* Beveled edges - subtle gold highlight from left */
    border-left: 2px solid rgba(201, 162, 39, 0.4);
    border-top: 1px solid rgba(201, 162, 39, 0.25);
    border-bottom: 2px solid rgba(0, 0, 0, 0.5);
    border-right: none;

    /* 3D shadow with gold glow */
    box-shadow:
        -3px 0 10px rgba(0, 0, 0, 0.5),
        inset 2px 0 0 rgba(201, 162, 39, 0.15);

    transition: all 0.3s ease;
    z-index: 200;
}

/* Double chevron - gold to match theme */
.pull-tab-chevron {
    font-size: 16px;
    font-weight: 700;
    font-family: system-ui, -apple-system, sans-serif;
    letter-spacing: -3px;
    color: var(--accent-primary, #c9a227);
    line-height: 1;
    transition: all 0.12s ease;
    text-shadow: -1px 0 2px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover: brighten + extend with gold glow */
.sidebar-pull-tab:hover {
    right: 272px; /* Extend 4px more to the left */
    background: linear-gradient(90deg,
        #3d4a5f 0%,
        #2d3a4f 35%,
        #1e293b 100%
    );
    box-shadow:
        -4px 0 12px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(201, 162, 39, 0.3),
        inset 2px 0 0 rgba(201, 162, 39, 0.25);
}

.sidebar-pull-tab:hover .pull-tab-chevron {
    color: var(--accent-hover, #dab32e);
}

/* Active/pressed - push in */
.sidebar-pull-tab:active {
    right: 264px; /* Push in 4px */
    background: linear-gradient(90deg,
        #0f172a 0%,
        #1e293b 50%,
        #0f172a 100%
    );
    border-left: 2px solid rgba(0, 0, 0, 0.35);
    border-top: 1px solid rgba(0, 0, 0, 0.25);
    border-bottom: 2px solid rgba(201, 162, 39, 0.1);
    box-shadow:
        -1px 0 4px rgba(0, 0, 0, 0.35),
        inset 3px 0 6px rgba(0, 0, 0, 0.4);
}

.sidebar-pull-tab:active .pull-tab-chevron {
    color: rgba(201, 162, 39, 0.7);
    transform: translateX(2px);
}

/* When sidebar is collapsed, move pull-tab to right edge */
@media (min-width: 1025px) {
    .game-sidebar.collapsed ~ .sidebar-pull-tab {
        right: 0; /* Move to viewport right edge */
    }

    .game-sidebar.collapsed ~ .sidebar-pull-tab:hover {
        right: 4px; /* Slight extension on hover */
    }

    .game-sidebar.collapsed ~ .sidebar-pull-tab:active {
        right: -4px; /* Push in on active */
    }

    .game-sidebar.collapsed ~ .sidebar-pull-tab .pull-tab-chevron {
        transform: scaleX(-1); /* Flip chevrons to point left */
    }
}

/* Pull tab visible on all screen sizes where sidebar is shown */

/* Sidebar Header - contains title and action icons */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(145deg, rgba(40, 55, 75, 0.7) 0%, rgba(25, 40, 55, 0.8) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    position: relative;
    overflow: visible;  /* Allow pull-tab to extend outside */
    z-index: 100;
}

.sidebar-logo {
    height: 36px;
    width: auto;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.round-indicator {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-primary);
    background: linear-gradient(145deg, rgba(201, 162, 39, 0.15) 0%, rgba(201, 162, 39, 0.08) 100%);
    padding: var(--space-2) var(--space-3);
    border-radius: 8px;
    border: 1px solid rgba(201, 162, 39, 0.25);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sidebar-title {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sidebar-title .material-symbols-outlined {
    font-size: 20px;
    color: var(--accent-primary);
}

.sidebar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    overflow: visible;
    position: relative;
    z-index: 1000;
}

.sidebar-actions .icon-btn {
    width: 36px;
    height: 36px;
}

.sidebar-actions .icon-btn .material-symbols-outlined {
    font-size: 20px;
}

/* Score Cards - 3D raised panel style */
.score-card {
    background: linear-gradient(145deg, rgba(40, 55, 75, 0.7) 0%, rgba(25, 40, 55, 0.8) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    position: relative;
}

.score-card.team-1 {
    /* Gold team accent - subtle left border */
    border-left: 3px solid var(--team-1-color);
}

.score-card.team-2 {
    /* Crimson team accent - subtle left border */
    border-left: 3px solid var(--team-2-color);
}

.score-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1);
    flex-wrap: nowrap; /* Prevent wrapping */
    gap: 12px; /* Space between team name and score */
}

.team-label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap; /* Keep team name on one line */
    flex-shrink: 1; /* Allow shrinking if needed */
    min-width: 0; /* Allow flex shrinking below content size */
}

.team-label .material-symbols-outlined {
    font-size: 18px;
    opacity: 0.9;
}

.score-card.team-1 .team-label,
.team-label.team-1 {
    color: var(--team-1-color);
    text-shadow: 0 0 20px rgba(201, 162, 39, 0.3);
}

.score-card.team-2 .team-label,
.team-label.team-2 {
    color: var(--team-2-color);
    text-shadow: 0 0 20px rgba(201, 74, 74, 0.3);
}

/* Opening meld requirement indicator */
.opening-req {
    font-family: var(--font-body);
    font-size: 0.75rem; /* Increased from 0.7rem for better visibility */
    font-weight: 600; /* Increased from 500 for emphasis */
    color: var(--text-secondary); /* Brighter than tertiary */
    opacity: 1; /* Full opacity instead of 0.8 */
    margin-left: 4px; /* Increased from 2px */
    margin-right: 8px; /* Add right margin to prevent overlap with score */
    letter-spacing: 0;
    text-transform: none;
    padding: 2px 6px; /* Badge-like padding */
    background: rgba(255, 255, 255, 0.05); /* Subtle background */
    border-radius: 4px; /* Rounded corners */
    transition: all 0.2s ease; /* Smooth transitions */
    flex-shrink: 0; /* Don't shrink the badge */
}

.opening-req.opened {
    /* Show checkmark when opened - don't hide it */
    /* Previous behavior was for sidebar badges (now removed) */
    display: inline-block;
}

/* Team A (Gold) - Enhanced visibility */
.team-1 .opening-req {
    color: rgba(201, 162, 39, 1); /* Full opacity (was 0.7) */
    background: rgba(201, 162, 39, 0.12); /* Gold tinted background */
    border: 1px solid rgba(201, 162, 39, 0.25); /* Gold border */
}

/* Team B (Crimson) - Enhanced visibility */
.team-2 .opening-req {
    color: rgba(201, 74, 74, 1); /* Full opacity (was 0.7) */
    background: rgba(201, 74, 74, 0.12); /* Crimson tinted background */
    border: 1px solid rgba(201, 74, 74, 0.25); /* Crimson border */
}

/* Hover effect for better interactivity */
.opening-req:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.05);
}

.team-score,
.team-total {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.02em;
    flex-shrink: 0; /* Score should never shrink */
    white-space: nowrap;
}

.score-card-players {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

/* Player Score Badge - clean badge style like video info */
.player-score-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: rgba(15, 23, 42, 0.85);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
    flex-wrap: nowrap; /* Prevent wrapping */
    gap: 8px;
    min-width: 0; /* Allow flex children to shrink below content size */
}

.player-score-badge:hover {
    background: rgba(20, 30, 50, 0.9);
    transform: translateX(2px);
}

.player-badge-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;

    /* Prevent name wrapping */
    white-space: nowrap;
    overflow: hidden;
    flex: 1 1 auto; /* Allow shrinking and growing */
    min-width: 0; /* Critical: allows flex item to shrink below content size */
    max-width: 100px;
}

.player-badge-name .material-symbols-outlined {
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0; /* Icon should not shrink */
}

/* Make the name text itself handle ellipsis */
.player-badge-name > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* CRITICAL: Required for ellipsis to work */
    flex-shrink: 1;
    min-width: 0;
}

.player-badge-label {
    font-size: 0.6rem;
    color: var(--accent-primary);
    opacity: 0.8;
    margin-left: 2px;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-badge-score {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0; /* Score should never shrink or wrap */
    white-space: nowrap;
}

.player-badge-score .material-symbols-outlined {
    color: var(--accent-primary);
    opacity: 0.7;
}

.player-score-badge.current-turn {
    background: rgba(201, 162, 39, 0.15);
    border: 1px solid rgba(201, 162, 39, 0.4);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(201, 162, 39, 0.2);
}

.player-score-badge.current-turn .player-badge-name {
    color: rgba(255, 255, 255, 0.9);
}

.player-score-badge.current-turn .player-badge-name .material-symbols-outlined {
    color: var(--accent-primary);
}

/* Chat Section */
.chat-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(10, 15, 30, 0.4) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.chat-title {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.5) 100%);
    color: var(--text-secondary);
    margin: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 1px 3px rgba(0, 0, 0, 0.15);
}

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

.chat-header {
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.5) 100%);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 1px 3px rgba(0, 0, 0, 0.15);
}

.chat-header .material-symbols-outlined {
    font-size: 18px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.chat-message {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5) 0%, rgba(20, 30, 50, 0.6) 100%);
    border-radius: var(--radius-md);
    max-width: 90%;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.chat-message.own {
    align-self: flex-end;
    background: linear-gradient(145deg, rgba(20, 184, 166, 0.15) 0%, rgba(15, 150, 135, 0.2) 100%);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(20, 184, 166, 0.25);
}

.chat-message .sender {
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: 2px;
    font-size: var(--text-xs);
}

.chat-message .text {
    color: var(--text-primary);
}

.chat-message.system {
    background: transparent;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    max-width: 100%;
    box-shadow: none;
}

.chat-input-container,
.chat-input-row {
    padding: var(--space-3);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.5) 0%, rgba(10, 15, 30, 0.6) 100%);
    display: flex;
    gap: var(--space-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.chat-input {
    flex: 1;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.6) 0%, rgba(10, 15, 30, 0.7) 100%);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.chat-input:focus {
    outline: none;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 0 0 2px rgba(201, 162, 39, 0.3),
        inset 0 0 0 1px rgba(201, 162, 39, 0.25);
}

.chat-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.chat-send-btn {
    background: linear-gradient(145deg, #c9a227 0%, #a88a1d 100%);
    border: none;
    border-radius: var(--radius-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}

.chat-send-btn:hover {
    background: linear-gradient(145deg, #d4ad2c 0%, #b89520 100%);
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.chat-send-btn .material-symbols-outlined {
    font-size: 18px;
    color: white;
}

/* Game Activity Log - 3D raised panel style */
.activity-log-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    background: linear-gradient(145deg, rgba(40, 55, 75, 0.7) 0%, rgba(25, 40, 55, 0.8) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    position: relative;
}

.activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.6) 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: visible;
}

.activity-title {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    white-space: nowrap;
}

/* Room code button - clickable pill in activity header */
.room-code-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(145deg, rgba(201, 162, 39, 0.15) 0%, rgba(201, 162, 39, 0.08) 100%);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
}

.room-code-btn:hover {
    background: linear-gradient(145deg, rgba(201, 162, 39, 0.25) 0%, rgba(201, 162, 39, 0.15) 100%);
    border-color: rgba(201, 162, 39, 0.5);
    transform: translateY(-1px);
}

.room-code-btn.copied {
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.25) 0%, rgba(34, 197, 94, 0.15) 100%);
    border-color: rgba(34, 197, 94, 0.5);
}

.room-code-btn .room-code-label {
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.room-code-btn .room-code-value {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-primary);
}

.room-code-btn .room-code-copy-icon {
    font-size: 12px;
    color: var(--text-tertiary);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.room-code-btn:hover .room-code-copy-icon {
    opacity: 1;
    color: var(--accent-primary);
}

.activity-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.activity-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-1) var(--space-2);
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

.activity-entry {
    font-family: var(--font-body);
    font-size: 0.6875rem; /* 11px - smaller for more entries */
    padding: 2px var(--space-1);
    border-radius: var(--radius-sm);
    line-height: 1.3;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.activity-entry .player-name {
    font-weight: 600;
    color: #ef4444;
}

/* Seat-based player colors for activity log */
.activity-entry .player-name.seat-0 {
    color: #22c55e; /* Green - You (bottom) */
}

.activity-entry .player-name.seat-1 {
    color: #f97316; /* Orange - Left player */
}

.activity-entry .player-name.seat-2 {
    color: #3b82f6; /* Blue - Top player (partner in standard layout) */
}

.activity-entry .player-name.seat-3 {
    color: #a855f7; /* Purple - Right player */
}

/* Legacy classes - kept for backwards compatibility */
.activity-entry .player-name.is-me {
    color: #22c55e;
}

.activity-entry .player-name.is-partner {
    color: #3b82f6;
}

.activity-entry .action-text {
    color: var(--text-primary);
}

.activity-entry .card-info {
    color: var(--accent-primary);
    font-weight: 500;
}

.activity-entry.system-message {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    background: transparent;
}

.activity-entry.highlight {
    background: rgba(20, 184, 166, 0.1);
    border-left: 2px solid var(--accent-primary);
}

/* Canasta Requirements for Going Out */
.canasta-requirements {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(0, 0, 0, 0.2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    border-top: 1px solid var(--border-color);
}

.canasta-req-label {
    color: var(--text-muted);
    font-weight: 500;
}

.req-clean,
.req-dirty {
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.req-clean {
    background: rgba(220, 38, 38, 0.2);
    color: #ef4444;
}

.req-dirty {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.req-clean.requirement-met,
.req-dirty.requirement-met {
    background: rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.req-clean.requirement-met::after,
.req-dirty.requirement-met::after {
    content: ' ✓';
}

/* Mobile Sidebar Toggle */
.sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-primary);
    border: none;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    z-index: 100;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle .material-symbols-outlined {
    font-size: 24px;
    color: var(--bg-gradient-start);
}

/* Sidebar responsive behavior */
@media (max-width: 1024px) {
    .game-sidebar {
        position: fixed;
        top: 0;
        right: -300px;
        height: 100%;
        width: 300px;
        z-index: 200;
        transition: right var(--transition-base);
        box-shadow: var(--shadow-2xl);
    }

    .game-sidebar.open {
        right: 0;
    }

    .sidebar-toggle {
        display: flex;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 199;
    }

    .sidebar-overlay.open {
        display: block;
    }
}

/* Game action buttons in new layout */
.game-actions {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

.game-actions .btn {
    flex: 1;
    max-width: 160px;
}

/* Player Boxes - Legacy styles below */
/* Player Boxes */
.player-box {
    position: absolute;
    width: 280px;
    min-height: 180px;
    background: var(--surface-secondary);
    backdrop-filter: var(--blur-md);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    z-index: 5;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
}

.player-box.upper-left {
    top: 80px;
    left: 20px;
}

.player-box.upper-right {
    top: 80px;
    right: 20px;
}

.player-box.lower-left {
    bottom: 220px;
    left: 20px;
}

.player-box.lower-right {
    bottom: 220px;
    right: 20px;
}

.player-box.current-player-box {
    width: 340px;
    min-height: 240px;
    background: var(--surface-primary);
    border-color: rgba(201, 162, 39, 0.3);
}

.player-box.active-turn {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.player-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.player-name {
    font-weight: 600;
    font-size: var(--text-base);
}

.player-name.current-turn {
    color: var(--accent-secondary);
}

.player-team {
    font-size: var(--text-xs);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

.player-box.team-a .player-team {
    color: var(--accent-danger);
    background: rgba(239, 68, 68, 0.1);
}

.player-box.team-b .player-team {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

/* Melds Display */
.player-melds-section {
    margin-top: var(--space-3);
}

.melds-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
    display: block;
}

.melds-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.meld-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    min-width: 40px;
    position: relative;
    transition: all var(--transition-fast);
}

.meld-compact:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.meld-compact.canasta {
    border-color: var(--accent-warning);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), transparent);
}

.meld-compact.natural-canasta {
    border-color: var(--accent-danger);
}

.meld-compact.mixed-canasta {
    border-color: var(--text-muted);
}

.meld-compact.wild-canasta {
    border-color: #d946ef;
}

.canasta-badge {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    background: var(--accent-warning);
    color: #000;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
}

.natural-canasta .canasta-badge {
    background: var(--accent-danger);
    color: white;
}

.wild-canasta .canasta-badge {
    background: #d946ef;
    color: white;
}

/* Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

.modal-content {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    border: none;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.5),
        0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    max-width: 500px;
    width: 90%;
    transform: scale(0.95);
    animation: scaleIn 0.3s forwards;
}

.modal-content h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-6);
    text-align: center;
}

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

@keyframes scaleIn {
    to {
        transform: scale(1);
    }
}

/* Game Creation Modal */
.create-game-modal {
    max-width: 400px;
}

.game-mode-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.game-mode-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.6) 100%);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.game-mode-option:hover {
    background: linear-gradient(145deg, rgba(40, 51, 69, 0.6) 0%, rgba(25, 33, 52, 0.7) 100%);
    transform: translateY(-2px);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(201, 162, 39, 0.3);
}

.game-mode-option input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--accent-primary);
}

.game-mode-option input[type="radio"]:checked + .option-content {
    color: var(--text-primary);
}

.option-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.option-title {
    font-weight: 600;
    font-size: var(--text-base);
}

.option-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Team Customization */
.team-customization {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.form-label-small {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.team-name-input {
    margin-bottom: var(--space-4);
}

.team-name-input input {
    width: 100%;
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast);
}

.team-name-input input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.team-name-input input::placeholder {
    color: var(--text-muted);
}

.team-icon-selector {
    margin-top: var(--space-3);
    max-height: 140px;
    overflow-y: auto;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--space-2);
    padding-right: var(--space-2);
}

.icon-btn {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-primary);
    transform: scale(1.1);
}

.icon-btn.selected {
    background: rgba(201, 162, 39, 0.2);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.3);
}

.icon-btn .material-symbols-outlined {
    font-size: 1.5rem;
    color: var(--text-primary);
}

.icon-btn:hover .material-symbols-outlined,
.icon-btn.selected .material-symbols-outlined {
    color: var(--accent-primary);
}

/* Profile Picture Selector */
.profile-customization {
    margin-bottom: var(--space-4);
}

.profile-picture-selector {
    max-height: 180px;
    overflow-y: auto;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--space-2);
    padding-right: var(--space-2);
}

.profile-btn {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 2px;
    overflow: hidden;
}

.profile-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-md) - 2px);
}

.profile-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-primary);
    transform: scale(1.1);
}

.profile-btn.selected {
    background: rgba(201, 162, 39, 0.2);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.3);
}

/* Player Customization Modal */
.player-customization-modal {
    max-width: 420px;
}

.customization-section {
    margin-bottom: var(--space-5);
}

.customization-section label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.customization-section .input-field {
    width: 100%;
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast);
}

.customization-section .input-field:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.customization-section .input-field::placeholder {
    color: var(--text-muted);
}

.customization-section .input-hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-3);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
}

.avatar-option {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 4px;
    overflow: hidden;
}

.avatar-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-md) - 4px);
}

.avatar-option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-primary);
}

.avatar-option.selected {
    background: rgba(201, 162, 39, 0.2);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.3);
}

/* Profile avatar image in video placeholder */
.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.modal-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-6);
}

/* Waiting Room */
.waiting-room {
    max-width: 500px;
    margin: 0 auto;
}

.waiting-room-content {
    text-align: center;
}

.waiting-room-logo {
    width: 120px;
    height: auto;
    margin-bottom: var(--space-4);
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.2));
}

.room-code-share {
    margin-bottom: var(--space-6);
}

.room-code-share h2 {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
}

.room-code-large {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 6px;
    color: var(--accent-primary);
    background: rgba(201, 162, 39, 0.1);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
}

.clickable-room-code {
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.clickable-room-code:hover {
    background: rgba(201, 162, 39, 0.2);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(201, 162, 39, 0.3);
}

.clickable-room-code:active {
    transform: scale(0.98);
}

/* Bug to Butterfly Animation */
.running-bug {
    position: fixed;
    font-size: 32px;
    z-index: 10000;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.running-bug.butterfly {
    animation: flutter 0.5s ease-in-out infinite;
}

@keyframes flutter {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) rotate(-5deg);
    }
    75% {
        transform: translateY(-5px) rotate(5deg);
    }
}

.share-hint {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

.waiting-status {
    margin: var(--space-6) 0;
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
}

.waiting-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    margin: 0 auto var(--space-3);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.waiting-status p {
    margin: var(--space-2) 0;
}

.player-count {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--accent-primary);
}

.waiting-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-4);
}

/* Team Groups in Waiting Room */
.player-slots {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.team-group {
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.team-group h4.team-label {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
    text-align: center;
}

.team-group.team-a h4.team-label {
    color: var(--accent-danger);
}

.team-group.team-b h4.team-label {
    color: #3b82f6;
}

.team-players {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
}

.player-slot {
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    min-width: 140px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.player-slot.filled {
    border-left: 3px solid var(--border-color);
}

.player-slot.filled.team-a {
    border-left-color: var(--accent-danger);
}

.player-slot.filled.team-b {
    border-left-color: #3b82f6;
}

.player-slot.meld-holder {
    background: rgba(20, 184, 166, 0.1);
    border-color: var(--accent-primary);
}

.player-slot .seat {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.player-slot .name {
    font-weight: 600;
    color: var(--text-primary);
}

.player-slot.empty .name {
    color: var(--text-muted);
    font-style: italic;
}

.meld-holder-badge {
    font-size: var(--text-xs);
    color: var(--accent-primary);
    font-weight: 600;
    background: rgba(20, 184, 166, 0.2);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    margin-top: var(--space-1);
}

.set-meld-holder-btn {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
}

/* Host Controls (Move/Kick Buttons) */
.host-controls {
    display: flex;
    gap: var(--space-1);
    margin-top: var(--space-2);
    justify-content: center;
}

.host-controls .btn-small {
    padding: var(--space-1);
    min-width: auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.host-controls .material-symbols-outlined {
    font-size: 18px;
}

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

.host-controls .btn-danger:hover {
    background-color: #dc2626;
    border-color: #dc2626;
}

.seat-selection-modal .seat-btn.current-seat {
    background: rgba(20, 184, 166, 0.2);
    border-color: var(--accent-primary);
    opacity: 0.6;
    cursor: not-allowed;
}

.seat-selection-modal .seat-btn.bot-occupied {
    background: rgba(251, 191, 36, 0.1);
    border-color: #f59e0b;
}

/* Video Connection States */
.video-placeholder.connecting {
    border: 2px solid var(--accent-warning);
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.video-placeholder.connected {
    border: 2px solid var(--accent-success);
}

.video-placeholder.disconnected {
    border: 2px solid var(--text-tertiary);
    background: linear-gradient(145deg, rgba(71, 85, 105, 0.2) 0%, rgba(51, 65, 85, 0.3) 100%);
}

.video-placeholder .status-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(15, 23, 42, 0.9);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: center;
    pointer-events: none;
    z-index: 5;
}

.video-placeholder.connecting .status-label {
    color: var(--accent-warning);
    border: 1px solid var(--accent-warning);
}

.video-placeholder.disconnected .status-label {
    color: var(--text-secondary);
    border: 1px solid var(--text-tertiary);
}

/* Meld Builder Modal */
.meld-builder-modal .modal-content {
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 0; /* Remove bottom padding to make room for sticky buttons */
}

/* Make button area sticky at bottom of modal */
.meld-builder-modal .modal-actions {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: var(--space-6);
    padding: var(--space-4) var(--space-8) var(--space-8);
    background: linear-gradient(to top, rgba(15, 23, 42, 0.98) 80%, transparent);
    backdrop-filter: blur(8px);
    z-index: 10;
}

.meld-builder-content h3 {
    text-align: center;
    margin-bottom: var(--space-4);
}

.meld-builder-info {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.requirement-box {
    background: linear-gradient(145deg, rgba(50, 45, 35, 0.6) 0%, rgba(30, 25, 20, 0.7) 100%);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(201, 162, 39, 0.25);
}

.req-label {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.req-value {
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--accent-warning);
}

.req-note {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

/* Meld Groups Container */
.meld-groups-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.meld-group {
    flex: 1;
    min-width: 180px;
    max-width: 300px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.meld-group:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.meld-group.active {
    background: linear-gradient(145deg, rgba(50, 45, 35, 0.7) 0%, rgba(30, 25, 20, 0.8) 100%);
    box-shadow:
        0 0 0 2px rgba(201, 162, 39, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.3);
}

.meld-group.valid {
    box-shadow:
        0 0 0 2px rgba(34, 197, 94, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.3);
}

.meld-group.invalid {
    box-shadow:
        0 0 0 2px rgba(239, 68, 68, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.3);
}

.meld-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.meld-group-title {
    font-weight: 600;
    font-size: var(--text-sm);
}

.meld-group-points {
    font-size: var(--text-sm);
    color: var(--accent-secondary);
    font-weight: 600;
}

.btn-remove-group {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: var(--radius-full);
    background: rgba(239, 68, 68, 0.2);
    color: var(--accent-danger);
    font-size: 16px;
    line-height: 1;
    border: none;
}

.btn-remove-group:hover {
    background: rgba(239, 68, 68, 0.4);
}

.meld-group-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-height: 30px;
    margin-bottom: var(--space-2);
}

.meld-card-tag {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.meld-card-tag.wild {
    background: linear-gradient(145deg, rgba(201, 162, 39, 0.25) 0%, rgba(201, 162, 39, 0.15) 100%);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(201, 162, 39, 0.3);
}

.empty-group {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-style: italic;
}

.meld-error {
    color: var(--accent-danger);
    font-size: var(--text-xs);
    margin-top: var(--space-1);
}

.wild-meld-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
    cursor: pointer;
    margin-top: var(--space-2);
}

.wild-meld-toggle input {
    cursor: pointer;
}

/* Meld Builder Actions Top */
.meld-builder-actions-top {
    margin-bottom: var(--space-4);
}

.meld-builder-actions-top .btn-secondary {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

/* Meld Builder Cards */
.meld-builder-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.6) 0%, rgba(10, 15, 30, 0.7) 100%);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    max-height: 200px;
    overflow-y: auto;
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.meld-builder-card {
    width: 50px;
    height: 70px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: none;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.meld-builder-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.25),
        0 12px 24px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.meld-builder-card.assigned {
    background: linear-gradient(145deg, #fef9e7 0%, #fef3c7 100%);
    transform: translateY(-6px);
    box-shadow:
        0 0 0 2px rgba(201, 162, 39, 0.6),
        0 6px 16px rgba(0, 0, 0, 0.25);
}

.meld-builder-card.wild {
    background: linear-gradient(145deg, #fef3c7 0%, #fde68a 100%);
}

.meld-builder-card.dead {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.9);
    transform: none;
}

.meld-builder-card .card-rank {
    font-size: var(--text-lg);
    font-weight: 700;
}

.meld-builder-card .card-suit {
    font-size: var(--text-base);
}

.group-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(145deg, #c9a227 0%, #a88a1d 100%);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.selected-check {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(145deg, #c9a227 0%, #a88a1d 100%);
    color: white;
    font-size: 12px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.no-melds-message {
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-4);
    font-style: italic;
}

.meld-group-count {
    font-size: var(--text-xs);
    color: var(--text-muted);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Meld Builder Totals */
.meld-builder-totals {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.6) 100%);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-lg);
}

.totals-row .meets-requirement {
    color: var(--accent-secondary);
    font-weight: 700;
}

.totals-row .below-requirement {
    color: var(--accent-danger);
    font-weight: 700;
}

.requirement-warning {
    margin-top: var(--space-2);
    color: var(--accent-warning);
    font-size: var(--text-sm);
    text-align: center;
}

/* Meld Builder Actions */
.meld-builder-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.meld-builder-actions .btn-primary {
    min-width: 160px;
}

.btn-text {
    background: transparent;
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-4);
}

.btn-text:hover {
    color: var(--text-primary);
}

/* Inline Meld Builder (no modal) */
.inline-meld-builder {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(6, 182, 212, 0.1));
    border: 1px solid rgba(20, 184, 166, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

.meld-builder-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.meld-builder-title {
    font-weight: 600;
    color: var(--accent-primary);
    font-size: var(--text-sm);
}

.req-badge {
    font-size: var(--text-xs);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

.req-badge.met {
    background: rgba(16, 185, 129, 0.2);
    color: var(--accent-secondary);
}

.req-badge.unmet {
    background: rgba(245, 158, 11, 0.2);
    color: var(--accent-warning);
}

.total-pts {
    margin-left: auto;
    font-weight: 700;
    font-size: var(--text-lg);
}

.total-pts.sufficient {
    color: var(--accent-secondary);
}

.total-pts.insufficient {
    color: var(--accent-danger);
}

.meld-groups-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    min-height: 50px;
}

.meld-builder-hint {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-style: italic;
    padding: var(--space-2);
}

.inline-meld-group {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    min-width: 100px;
    transition: all var(--transition-fast);
}

.inline-meld-group.active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(20, 184, 166, 0.3);
}

.inline-meld-group.valid {
    border-color: var(--accent-secondary);
}

.inline-meld-group.invalid {
    border-color: var(--accent-danger);
    opacity: 0.8;
}

.inline-meld-group .group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1);
}

.inline-meld-group .group-rank {
    font-weight: 600;
    font-size: var(--text-sm);
}

.inline-meld-group .group-pts {
    font-size: var(--text-xs);
    color: var(--accent-secondary);
    font-weight: 600;
}

.inline-meld-group .group-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.inline-meld-group .mini-card {
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: var(--text-xs);
    font-weight: 600;
}

.inline-meld-group .mini-card.wild {
    background: rgba(218, 179, 46, 0.3);
    border: 1px solid rgba(218, 179, 46, 0.5);
}

.inline-meld-group .group-error {
    color: var(--accent-danger);
    font-size: 10px;
    margin-top: var(--space-1);
}

.inline-meld-builder .meld-builder-actions {
    justify-content: flex-start;
    gap: var(--space-2);
}

.btn-small {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
}

/* Lay Down Button - appears when valid melds ready */
.action-btn.lay-down-ready {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    animation: layDownPulse 1.5s ease-in-out infinite;
}

@keyframes layDownPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.4); }
    50% { box-shadow: 0 0 15px 5px rgba(20, 184, 166, 0.3); }
}

/* Game Header */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-6);
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: var(--blur-md);
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
}

.game-header .team-scores {
    display: flex;
    gap: var(--space-4);
}

.game-header .team-scores .score-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
}

.game-header .team-scores .score-label {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
}

.game-header .team-scores .score-value {
    font-size: var(--text-xl);
    font-weight: 700;
}

.turn-indicator {
    padding: var(--space-2) var(--space-6);
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.2), rgba(218, 179, 46, 0.2));
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: var(--radius-full);
    font-weight: 600;
    color: var(--text-primary);
}

.turn-indicator.my-turn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3));
    border-color: var(--accent-secondary);
    color: var(--accent-secondary);
    animation: pulse 2s infinite;
}

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

.btn-small {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

/* Game Table Layout */
.game-table {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 0;
    padding: var(--space-4);
}

.players-around-table {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}

/* Opponent Areas */
.opponent-area {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-2);
}

.opponent-area.top {
    order: 0;
}

.opponent-area.left,
.opponent-area.right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.opponent-area.left {
    left: 0;
}

.opponent-area.right {
    right: 0;
}

/* Opponent Box */
.opponent-box {
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    min-width: 140px;
    text-align: center;
    transition: all var(--transition-base);
}

.opponent-box.active-turn {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.opponent-box.team-a {
    border-left: 3px solid var(--accent-danger);
}

.opponent-box.team-b {
    border-left: 3px solid #3b82f6;
}

.opponent-name {
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
    color: var(--text-primary);
}

.opponent-team {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.opponent-cards {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: var(--space-2);
}

/* Small opponent card backs - unified styling */
.opponent-cards .card-back {
    width: 24px;
    height: 34px;
    background: linear-gradient(145deg, #1e3a5f 0%, #0f2942 100%);
    border: 1px solid #0a1929;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    position: relative;
}

.opponent-cards .card-back::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 2px;
}

.card-back.stacked {
    margin-left: -18px;
}

.card-back.stacked:first-child {
    margin-left: 0;
}

.card-count-badge {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Table Center Area */
.table-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: var(--space-4);
    padding: var(--space-4);
}

/* Team Melds Area */
.team-melds-area {
    display: flex;
    justify-content: space-around;
    width: 100%;
    gap: var(--space-4);
}

.team-melds {
    flex: 1;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.team-melds h4 {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.team-melds.team-a h4 {
    color: var(--accent-danger);
}

.team-melds.team-b h4 {
    color: #3b82f6;
}

.melds-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

.meld-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    min-width: 50px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.meld-stack:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.meld-stack.canasta {
    border-color: var(--accent-warning);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
}

.meld-stack.canasta.natural-canasta {
    border-color: #f97316;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0.05));
}

.meld-stack.canasta.mixed-canasta {
    border-color: var(--text-muted);
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.15), rgba(148, 163, 184, 0.05));
}

.meld-stack.canasta.wild-canasta {
    border-color: #d946ef;
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.2), rgba(217, 70, 239, 0.05));
}

/* ============================================
   Canasta Hover Popup - Premium Glassmorphism
   ============================================ */
.meld-stack.canasta::after {
    content: attr(data-canasta-info);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(10px) scale(0.9);

    /* Glassmorphism styling */
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    /* 3D border effect */
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-top-color: rgba(255, 255, 255, 0.4);
    border-left-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);

    border-radius: 12px;
    padding: 10px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 100;

    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Arrow pointer */
.meld-stack.canasta::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) rotate(45deg) scale(0);
    width: 10px;
    height: 10px;

    background: linear-gradient(135deg,
        transparent 50%,
        rgba(255, 255, 255, 0.1) 50%
    );
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    opacity: 0;
    z-index: 99;
    pointer-events: none;

    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.meld-stack.canasta:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.meld-stack.canasta:hover::before {
    opacity: 1;
    transform: translateX(-50%) rotate(45deg) scale(1);
}

/* Type-specific popup accent colors */
.meld-stack.canasta.natural-canasta::after {
    background: linear-gradient(135deg,
        rgba(249, 115, 22, 0.25) 0%,
        rgba(255, 255, 255, 0.1) 100%
    );
    border-color: rgba(249, 115, 22, 0.4);
}

.meld-stack.canasta.mixed-canasta::after {
    background: linear-gradient(135deg,
        rgba(100, 116, 139, 0.3) 0%,
        rgba(255, 255, 255, 0.1) 100%
    );
    border-color: rgba(148, 163, 184, 0.4);
}

.meld-stack.canasta.wild-canasta::after {
    background: linear-gradient(135deg,
        rgba(217, 70, 239, 0.3) 0%,
        rgba(255, 255, 255, 0.1) 100%
    );
    border-color: rgba(217, 70, 239, 0.5);
}

.meld-rank {
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--text-primary);
}

.meld-count {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.no-melds {
    font-family: 'Great Vibes', cursive;
    color: rgba(201, 162, 39, 0.5);
    font-size: 1.3rem;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.02em;
}

/* Piles Area */
.piles-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-8);
}

.pile-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.pile-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.stock-pile-area .pile-visual,
.discard-pile-area .pile-visual {
    width: var(--draw-pile-width);
    height: var(--draw-pile-height);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.stock-pile-area .pile-visual {
    background: linear-gradient(145deg, #722f37 0%, #4a1c24 100%);
    border: 1.5px solid #3a161c;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.stock-pile-area .pile-visual:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stock-pile-area .pile-visual .pile-count {
    font-size: var(--text-lg);
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.discard-pile-area .pile-visual {
    background: white;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.discard-pile-area .pile-visual:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.discard-pile-area .pile-visual.empty {
    background: rgba(255, 255, 255, 0.03);
    border: none;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

.discard-pile-area .pile-visual .card-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.discard-pile-area .pile-visual .card-rank {
    font-size: var(--text-2xl);
    font-weight: 700;
}

.discard-pile-area .pile-visual .card-suit {
    font-size: var(--text-xl);
}

.discard-pile-area .pile-visual .pile-count {
    position: absolute;
    bottom: -8px;
    right: -8px;
    background: var(--accent-primary);
    color: white;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-full);
}

/* Player Area */
.player-area {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: var(--blur-md);
    border-top: 1px solid var(--border-color);
    padding: var(--space-4) var(--space-6);
    overflow: visible; /* Allow cards to pop up on hover */
    position: relative;
}

/* Semi-circle arc behind cards - creates "held in hand" effect */
.player-area::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    max-width: 700px;
    height: 80px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(20, 50, 80, 0.6) 50%,
        rgba(25, 60, 95, 0.9) 100%
    );
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    pointer-events: none;
    z-index: 1;
    box-shadow:
        inset 0 -3px 15px rgba(201, 162, 39, 0.2),
        0 5px 25px rgba(0, 0, 0, 0.4);
    border-bottom: 2px solid rgba(201, 162, 39, 0.35);
}

.hand-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.hand-info h4 {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
}

.hand-stats {
    display: flex;
    gap: var(--space-4);
}

.stat {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.stat strong {
    color: var(--text-primary);
}

/* Player Hand */
.player-hand {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    padding: var(--space-3);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    min-height: 110px;
    margin-bottom: var(--space-4);
}

/* Playing Cards */
.card {
    width: 60px;
    height: 84px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: var(--suit-color, #1e293b);
}

.card.selectable:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.card.selected {
    transform: translateY(-12px);
    border-color: var(--accent-primary);
    box-shadow: 0 8px 20px rgba(201, 162, 39, 0.4);
}

.card.wild {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    border-color: #a78bfa;
}

.card.dead {
    opacity: 0.5;
    filter: grayscale(0.5);
}

.card .card-corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.card .card-corner.top-left {
    top: 4px;
    left: 4px;
}

.card .card-corner.bottom-right {
    bottom: 4px;
    right: 4px;
    transform: rotate(180deg);
}

.card .card-rank {
    font-size: var(--text-sm);
    font-weight: 700;
}

.card .card-suit-small {
    font-size: var(--text-xs);
}

.card .card-center {
    font-size: var(--text-2xl);
}

.card.hearts,
.card.diamonds {
    color: #dc2626;
}

.card.clubs,
.card.spades {
    color: #1e293b;
}

/* Card back design - inherits from cards.css, just add cursor */
.card.card-back {
    cursor: default;
}

.card.card-back.mini {
    width: 28px;
    height: 40px;
}

/* Joker styling */
.card .joker-center {
    font-size: var(--text-3xl);
    color: #d946ef;
}

/* Pile info and badges */
.pile-info {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
    margin-top: var(--space-1);
}

.pile-stack {
    width: 70px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.empty-pile {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.65rem;
    background: rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.5;
}

.pile-count-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: var(--accent-primary);
    color: white;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-full);
}

/* Opponent styles */
.opponent-info {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    align-items: center;
    margin-top: var(--space-2);
}

.team-badge {
    font-size: var(--text-xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.team-badge.team-a {
    background: rgba(239, 68, 68, 0.2);
    color: var(--accent-danger);
}

.team-badge.team-b {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.foot-indicator {
    font-size: var(--text-sm);
}

.more-cards {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-left: var(--space-1);
}

/* No cards message */
.no-cards {
    color: var(--text-muted);
    font-style: italic;
    padding: var(--space-4);
    text-align: center;
}

/* Team melds label */
.team-melds-label {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
    text-align: center;
}

.team-a-melds .team-melds-label {
    color: var(--accent-danger);
}

.team-b-melds .team-melds-label {
    color: #3b82f6;
}

/* Canasta indicator */
.canasta-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: var(--space-1);
}

.canasta-indicator.natural {
    background: var(--accent-danger);
}

.canasta-indicator.mixed {
    background: var(--text-muted);
}

.canasta-indicator.wild {
    background: #d946ef;
}

/* Warning button style */
.btn-warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--accent-warning);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.btn-warning:hover {
    background: rgba(245, 158, 11, 0.3);
}

.btn-warning:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Your turn indicator */
.turn-indicator.your-turn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3));
    border-color: var(--accent-secondary);
    color: var(--accent-secondary);
    animation: pulse 2s infinite;
}

/* Game Actions */
.player-area .game-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.player-area .game-actions button {
    min-width: 120px;
}

.player-area .game-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .player-box {
        width: 160px;
        min-height: 120px;
        padding: var(--space-2);
    }

    .player-box.upper-left {
        top: 60px;
        left: 10px;
    }

    .player-box.upper-right {
        top: 60px;
        right: 10px;
    }

    .player-box.lower-left {
        bottom: 180px;
        left: 10px;
    }

    .player-box.lower-right {
        bottom: 180px;
        right: 10px;
    }

    .player-box.current-player-box {
        width: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        min-height: 160px;
    }

    /* Mobile game header */
    .game-header {
        padding: var(--space-2) var(--space-3);
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .game-header .team-scores {
        gap: var(--space-2);
    }

    .game-header .team-scores .score-item {
        padding: var(--space-1) var(--space-2);
    }

    .game-header .team-scores .score-label {
        font-size: var(--text-xs);
    }

    .game-header .team-scores .score-value {
        font-size: var(--text-base);
    }

    .turn-indicator {
        padding: var(--space-1) var(--space-3);
        font-size: var(--text-sm);
    }

    /* Mobile game table */
    .game-table {
        padding: var(--space-2);
    }

    .opponent-area.left,
    .opponent-area.right {
        position: static;
        transform: none;
    }

    .players-around-table {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: var(--space-2);
    }

    .opponent-box {
        min-width: 100px;
        padding: var(--space-2);
    }

    .opponent-name {
        font-size: var(--text-xs);
    }

    .card-back {
        width: 18px;
        height: 26px;
    }

    .card-back.stacked {
        margin-left: -14px;
    }

    /* Mobile table center */
    .table-center {
        padding: var(--space-2);
        gap: var(--space-2);
    }

    .team-melds-area {
        flex-direction: column;
        align-items: center;
    }

    .team-melds {
        width: 100%;
        max-width: none;
        padding: var(--space-2);
    }

    .piles-area {
        gap: var(--space-4);
    }

    .stock-pile-area .pile-visual,
    .discard-pile-area .pile-visual {
        width: 50px;
        height: 70px;
    }

    /* Mobile player area */
    .player-area {
        padding: var(--space-2) var(--space-3);
    }

    .hand-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .hand-stats {
        gap: var(--space-2);
    }

    .stat {
        font-size: var(--text-xs);
    }

    .player-hand {
        gap: var(--space-1);
        padding: var(--space-2);
        min-height: 80px;
    }

    .card {
        width: 44px;
        height: 62px;
    }

    .card .card-rank {
        font-size: var(--text-xs);
    }

    .card .card-suit-small {
        font-size: 8px;
    }

    .card .card-center {
        font-size: var(--text-lg);
    }

    .player-area .game-actions {
        gap: var(--space-2);
    }

    .player-area .game-actions button {
        min-width: 90px;
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
    }
}

/* Round End Modal - Compact version */
.modal.round-end-container {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.round-end-modal {
    max-width: 320px;
    text-align: center;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.round-end-modal h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.round-end-modal .winner-text {
    font-size: var(--text-base);
    color: var(--accent-secondary);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.round-scores {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin: var(--space-3) 0;
}

.team-score-card {
    background: var(--surface-elevated);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    min-width: 100px;
}

.team-score-card h4 {
    margin-bottom: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

.team-score-card h4 .material-symbols-outlined {
    font-size: 16px;
}

.team-score-card .round-score {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.team-score-card .total-score {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
}

.round-end-modal .modal-actions {
    margin-top: var(--space-3);
    display: flex;
    gap: var(--space-2);
    justify-content: center;
}

.round-end-modal .modal-actions button {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

/* Connection Status Indicator */
.connection-indicator {
    position: fixed;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    z-index: 9999;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
}

.connection-indicator.disconnected {
    background: var(--accent-danger);
    color: white;
}

.connection-indicator.connected {
    background: var(--accent-secondary);
    color: white;
}

.connection-indicator .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.connection-indicator.disconnected .status-dot {
    animation: connectionPulse 1.5s ease-in-out infinite;
}

@keyframes connectionPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ==========================================
   Game Menu Dropdown (Legacy - Vue component has scoped styles)
   ========================================== */
/* NOTE: The Vue GameMenu component uses scoped styles and v-if for visibility.
   These global styles are for the legacy vanilla JS implementation only. */

.game-menu-dropdown .menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.game-menu-dropdown .menu-item:first-child {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.game-menu-dropdown .menu-item:last-child {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.game-menu-dropdown .menu-item:hover {
    background: var(--surface-hover);
}

.game-menu-dropdown .menu-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--text-secondary);
}

.game-menu-dropdown .menu-item:hover .material-symbols-outlined {
    color: var(--accent-primary);
}

/* Creator-only menu items */
.game-menu-dropdown .menu-item[data-creator-only="true"] {
    position: relative;
}

/* Visual indicator for non-creators */
.game-menu-dropdown .menu-item.creator-only {
    opacity: 0.7;
}

.game-menu-dropdown .menu-item.creator-only:hover {
    opacity: 1;
    background: var(--surface-hover);
    border-left: 3px solid var(--accent-warning, #f59e0b);
}

/* ==========================================
   Modal Overlay (for game menus)
   ========================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

.modal-overlay.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

.modal-overlay.fade-out .modal-content {
    animation: scaleOut 0.3s ease-out forwards;
}

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

.modal-overlay .modal-content {
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    animation: scaleIn 0.2s ease-out;
}

/* Opening Requirements Modal */
.opening-requirements-modal {
    padding: var(--space-5);
    max-width: 400px;
    width: 90vw;
}

/* Confirm Modal (for End Round, Restart, End Game, Exit) */
.confirm-modal {
    width: 280px;
    max-width: 90vw;
    padding: var(--space-4);
    text-align: center;
}

.confirm-modal .modal-header {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-color);
}

.confirm-modal .modal-header h2 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.confirm-modal .modal-body {
    margin-bottom: var(--space-4);
}

.confirm-modal .modal-body p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
    line-height: 1.4;
}

.confirm-modal .modal-body p:last-child {
    margin-bottom: 0;
}

.confirm-modal .modal-warning {
    color: var(--accent-warning) !important;
    font-size: var(--text-xs);
    margin-top: var(--space-2);
}

.confirm-modal .modal-info {
    color: var(--accent-info) !important;
    font-size: var(--text-xs);
    margin-top: var(--space-2);
}

.confirm-modal .modal-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
}

.confirm-modal .modal-actions button {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    min-width: 0;
}

/* How to Play Modal */
.how-to-play-modal {
    width: 320px;
    max-width: 90vw;
    max-height: 70vh;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.how-to-play-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-primary);
    flex-shrink: 0;
}

.how-to-play-modal .modal-header h2 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.modal-close-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.modal-close-btn .material-symbols-outlined {
    font-size: 18px;
}

.how-to-play-content {
    padding: var(--space-3) var(--space-4);
    overflow-y: auto;
    flex: 1;
    text-align: left;
}

.rules-section {
    margin-bottom: var(--space-4);
}

.rules-section:last-child {
    margin-bottom: 0;
}

.rules-section h3 {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rules-section p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: var(--space-1);
}

.rules-section ol,
.rules-section ul {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    padding-left: var(--space-4);
    line-height: 1.5;
    margin: 0;
}

.rules-section li {
    margin-bottom: var(--space-1);
}

.rules-section li:last-child {
    margin-bottom: 0;
}

.rules-section strong {
    color: var(--text-primary);
}

/* Card Values Grid */
.card-values-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1);
}

.card-value-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
}

.card-value-item .card-type {
    font-weight: 600;
    color: var(--text-primary);
}

.card-value-item .card-type.wild {
    color: var(--accent-warning);
}

.card-value-item .card-type.dead {
    color: var(--accent-danger);
}

/* Canasta Types */
.canasta-types {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.canasta-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
}

.canasta-type.natural {
    background: rgba(249, 115, 22, 0.15);
    border-left: 2px solid #f97316;
}

.canasta-type.mixed {
    background: rgba(30, 41, 59, 0.5);
    border-left: 2px solid #475569;
}

.canasta-type.wild {
    background: rgba(168, 85, 247, 0.15);
    border-left: 2px solid #a855f7;
}

.canasta-type.hidden-wild {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
    border-left: 2px solid #ec4899;
}

.canasta-type .canasta-icon {
    font-weight: 600;
    color: var(--text-primary);
}

.canasta-note {
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Rules Table */
.rules-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
}

.rules-table td {
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--border-color);
}

.rules-table tr:last-child td {
    border-bottom: none;
}

.rules-table td:first-child {
    color: var(--text-secondary);
}

.rules-table td:last-child {
    font-weight: 600;
    color: var(--accent-primary);
    text-align: right;
}

/* Tips Section */
.rules-section.tips {
    background: var(--surface-secondary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border-left: 2px solid var(--accent-secondary);
}

.rules-section.tips h3 {
    color: var(--accent-secondary);
    margin-bottom: var(--space-1);
}

.rules-section.tips ul {
    margin: 0;
}

/* Highlight Section - Team Info */
.rules-section.highlight-section {
    background: linear-gradient(145deg, rgba(201, 162, 39, 0.15), rgba(201, 162, 39, 0.08));
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 2px solid var(--accent-primary);
    margin-bottom: var(--space-5);
}

.rules-section.highlight-section h3 {
    font-size: var(--text-base);
    color: var(--accent-primary);
    margin-bottom: var(--space-2);
}

.rules-section.highlight-section p {
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.rules-section.highlight-section .team-goal {
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: var(--text-base);
    color: var(--accent-primary);
}

/* ============================================
   Quick Wins - Global Polish & Refinements
   ============================================ */

/* Consistent pointer cursors for all interactive elements */
button,
.btn-primary,
.btn-secondary,
.btn-accent,
.btn-danger,
.btn-large,
.game-card,
.video-placeholder,
.canasta-meld-visual,
.icon-btn,
[role="button"],
[tabindex="0"] {
    cursor: pointer;
}

/* Disabled state cursor */
button:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Help cursor for info elements */
[title],
.tooltip-trigger,
.help-icon {
    cursor: help;
}

/* Text cursor for inputs */
input,
textarea,
[contenteditable="true"] {
    cursor: text;
}

/* Grab cursor for draggable elements */
.draggable,
[draggable="true"] {
    cursor: grab;
}

.draggable:active,
[draggable="true"]:active {
    cursor: grabbing;
}

/* Ensure tabular numbers globally for anything numeric */
.score,
.points,
.count,
.card-count,
.pile-count,
.total,
.counter-running-total,
.score-value,
.score-total-value,
.count-value,
.combined-value,
[data-numeric],
.game-over-team-score {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Smooth scrolling for scroll containers */
.games-list,
.lobby-content,
.rules-content,
#lobby-content {
    scroll-behavior: smooth;
}

/* Selection styling - gold theme */
::selection {
    background: rgba(201, 162, 39, 0.4);
    color: var(--text-primary);
}

::-moz-selection {
    background: rgba(201, 162, 39, 0.4);
    color: var(--text-primary);
}

/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(201, 162, 39, 0.4);
    border-radius: 4px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 162, 39, 0.6);
}

/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 162, 39, 0.4) rgba(0, 0, 0, 0.1);
}

/* Prevent text selection on UI elements */
.card,
.video-placeholder,
.canasta-meld-visual,
.icon-btn,
button,
.pile-container {
    user-select: none;
    -webkit-user-select: none;
}

/* Hardware acceleration hints for animated elements */
.card,
.flying-card,
.video-placeholder,
.btn-primary,
.btn-secondary,
.game-card,
.canasta-meld-visual {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ============================================
   Round Start Toast - Compact notification
   ============================================ */

.round-start-toast {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.round-start-toast.visible {
    opacity: 1;
}

.round-start-toast.closing {
    opacity: 0;
}

.round-start-content {
    background: linear-gradient(145deg, rgba(30, 58, 95, 0.98), rgba(20, 40, 70, 0.98));
    border: 1px solid rgba(201, 162, 39, 0.4);
    border-radius: 16px;
    padding: 24px 32px;
    min-width: 280px;
    max-width: 340px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.round-start-toast.visible .round-start-content {
    transform: scale(1) translateY(0);
}

.round-start-toast.closing .round-start-content {
    transform: scale(0.95) translateY(-10px);
}

.round-start-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.round-badge {
    background: var(--accent-primary);
    color: #1a1a1a;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.round-start-title {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
}

.round-start-team {
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid rgba(201, 162, 39, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.team-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.team-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.team-name {
    color: var(--accent-primary);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.1rem;
}

.team-members {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.round-start-requirement {
    text-align: center;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 20px;
}

.requirement-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.requirement-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.requirement-points {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    line-height: 1;
}

.requirement-unit {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 500;
}

.requirement-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.round-start-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent-primary);
    color: #1a1a1a;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.round-start-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(201, 162, 39, 0.3);
}

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

.round-start-btn .material-symbols-outlined {
    font-size: 1.25rem;
}

/* ============================================
   Wild Canasta Choice Popup
   ============================================ */

.wild-canasta-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.wild-canasta-popup {
    background: linear-gradient(145deg,
        rgba(30, 35, 50, 0.98) 0%,
        rgba(20, 25, 40, 0.98) 100%
    );
    border: 2px solid rgba(201, 162, 39, 0.4);
    border-radius: 20px;
    padding: 2rem;
    min-width: 340px;
    max-width: 400px;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: popupSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.wild-canasta-popup .popup-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.wild-canasta-popup .popup-icon {
    font-size: 2.5rem;
    color: #d946ef;
    display: block;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(217, 70, 239, 0.5);
}

.wild-canasta-popup .popup-header h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    letter-spacing: 0.03em;
}

.wild-canasta-popup .popup-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.wild-canasta-popup .popup-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.wild-canasta-popup .popup-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    position: relative;
}

.wild-canasta-popup .popup-option:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(4px);
}

.wild-canasta-popup .popup-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wild-canasta-popup .popup-option .option-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wild-canasta-popup .popup-option.play-now .option-icon {
    background: linear-gradient(135deg, #d946ef 0%, #a855f7 100%);
    box-shadow: 0 4px 12px rgba(217, 70, 239, 0.4);
}

.wild-canasta-popup .popup-option.hold-hidden .option-icon {
    background: linear-gradient(135deg, var(--accent-primary) 0%, #a38520 100%);
    box-shadow: 0 4px 12px rgba(201, 162, 39, 0.4);
}

.wild-canasta-popup .popup-option .option-icon .material-symbols-outlined {
    font-size: 1.5rem;
    color: white;
}

.wild-canasta-popup .popup-option .option-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wild-canasta-popup .popup-option .option-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.wild-canasta-popup .popup-option .option-points {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.wild-canasta-popup .popup-option.play-now .option-points {
    color: #d946ef;
}

.wild-canasta-popup .popup-option.hold-hidden .option-points {
    color: var(--accent-primary);
}

.wild-canasta-popup .popup-option .option-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.wild-canasta-popup .popup-option .option-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.65rem;
    padding: 2px 8px;
    background: rgba(255, 100, 100, 0.2);
    color: #ff8888;
    border-radius: 4px;
    font-weight: 500;
}

.wild-canasta-popup .popup-cancel {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.75rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wild-canasta-popup .popup-cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.wild-canasta-popup .popup-cancel .material-symbols-outlined {
    font-size: 1.1rem;
}

/* ============================================
   "GO OUT!" Announcement - Casino Spectacular
   ============================================ */

.went-out-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10001;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Dramatic vignette/spotlight background */
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.85) 40%,
        rgba(0, 0, 0, 0.95) 100%
    );
}

.went-out-overlay.visible {
    opacity: 1;
}

.went-out-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

/* Main content container */
.went-out-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/* Giant "GO OUT!" title */
.went-out-title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 8rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #fff;
    opacity: 0;
    transform: scale(0);
    animation: goOutExplosion 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.1s;
    text-shadow:
        0 0 20px rgba(255, 255, 255, 0.5),
        0 0 40px rgba(255, 255, 255, 0.3),
        0 0 80px rgba(255, 255, 255, 0.2);
    position: relative;
}

/* Team color glow on title */
.went-out-content.team-a .went-out-title {
    text-shadow:
        0 0 20px var(--team-a),
        0 0 40px var(--team-a),
        0 0 80px var(--team-a),
        0 4px 0 rgba(0, 0, 0, 0.3);
    animation: goOutExplosion 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               goOutGlowA 2s ease-in-out infinite 0.8s;
}

.went-out-content.team-b .went-out-title {
    text-shadow:
        0 0 20px var(--team-b),
        0 0 40px var(--team-b),
        0 0 80px var(--team-b),
        0 4px 0 rgba(0, 0, 0, 0.3);
    animation: goOutExplosion 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               goOutGlowB 2s ease-in-out infinite 0.8s;
}

@keyframes goOutExplosion {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-5deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.15) rotate(2deg);
    }
    80% {
        transform: scale(0.95) rotate(-1deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes goOutGlowA {
    0%, 100% {
        text-shadow:
            0 0 20px var(--team-a),
            0 0 40px var(--team-a),
            0 0 80px var(--team-a);
    }
    50% {
        text-shadow:
            0 0 30px var(--team-a),
            0 0 60px var(--team-a),
            0 0 120px var(--team-a);
    }
}

@keyframes goOutGlowB {
    0%, 100% {
        text-shadow:
            0 0 20px var(--team-b),
            0 0 40px var(--team-b),
            0 0 80px var(--team-b);
    }
    50% {
        text-shadow:
            0 0 30px var(--team-b),
            0 0 60px var(--team-b),
            0 0 120px var(--team-b);
    }
}

/* Player name */
.went-out-player {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 5vw, 3rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(30px);
    animation: goOutSlideUp 0.5s ease-out forwards;
    animation-delay: 0.5s;
    position: relative;
    padding: 8px 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    backdrop-filter: blur(8px);
}

.went-out-content.team-a .went-out-player {
    color: var(--team-a);
    border-bottom: 3px solid var(--team-a);
}

.went-out-content.team-b .went-out-player {
    color: var(--team-b);
    border-bottom: 3px solid var(--team-b);
}

@keyframes goOutSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Clean/Dirty badge */
.went-out-badge {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 700;
    padding: 10px 28px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    transform: scale(0);
    animation: goOutBadgeBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.9s;
}

.went-out-badge.clean {
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    color: #fff;
    box-shadow:
        0 4px 20px rgba(76, 175, 80, 0.5),
        0 0 40px rgba(76, 175, 80, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.went-out-badge.dirty {
    background: linear-gradient(135deg, #FF9800, #E65100);
    color: #fff;
    box-shadow:
        0 4px 20px rgba(255, 152, 0, 0.5),
        0 0 40px rgba(255, 152, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@keyframes goOutBadgeBounce {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    60% {
        opacity: 1;
        transform: scale(1.2);
    }
    80% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Confetti container */
.went-out-confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

/* Individual confetti pieces */
.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
}

.confetti-piece.circle {
    border-radius: 50%;
}

.confetti-piece.square {
    border-radius: 2px;
}

.confetti-piece.rect {
    width: 6px;
    height: 14px;
    border-radius: 2px;
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(-20px) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg) scale(0.5);
    }
}

/* Spotlight effect */
.went-out-spotlight {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.03) 0%,
        transparent 50%
    );
    animation: spotlightPulse 2s ease-in-out infinite;
}

@keyframes spotlightPulse {
    0%, 100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* ==========================================
   Hand Showdown - Reveal remaining cards at round end
   ========================================== */
.showdown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 100;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.3s ease;
    padding: 8px;
}

.showdown-overlay.visible {
    opacity: 1;
    transform: scale(1);
}

.showdown-overlay.fade-out {
    opacity: 0;
    transform: scale(0.95);
}

/* Card fan display */
.showdown-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 45px;
}

.showdown-cards .card.showdown-card {
    --card-width: 32px;
    --card-height: 45px;
    --card-radius: 4px;
    font-size: 0.5rem;
    margin-left: -12px;
    transform: rotate(calc((var(--card-index) - 2.5) * 8deg));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

.showdown-cards .card.showdown-card:first-child {
    margin-left: 0;
}

/* "+X more" indicator */
.showdown-more {
    background: rgba(201, 162, 39, 0.9);
    color: var(--bg-primary);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

/* Penalty display */
.showdown-penalty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.showdown-penalty .penalty-value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: #ef4444;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    animation: penaltyPulse 0.5s ease-out;
}

@keyframes penaltyPulse {
    0% {
        transform: scale(1.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============== Debug Window for Bot Hands ============== */

.debug-window {
    position: fixed;
    top: 80px;
    left: 20px;
    width: 380px;
    max-height: 70vh;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.debug-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(201, 162, 39, 0.15);
    border-bottom: 1px solid rgba(201, 162, 39, 0.2);
    cursor: grab;
    user-select: none;
}

.debug-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gold-primary);
}

.debug-title .material-symbols-outlined {
    font-size: 1.2rem;
}

.debug-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.debug-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.debug-window-content {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
}

.debug-no-bots {
    color: var(--text-secondary);
    text-align: center;
    padding: 20px;
    font-style: italic;
}

.debug-bot-section {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.debug-bot-section:last-child {
    margin-bottom: 0;
}

.debug-bot-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.debug-bot-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.debug-bot-seat {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.debug-bot-team {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}

.debug-bot-team.team-a {
    background: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.debug-bot-team.team-b {
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.debug-foot-badge {
    font-size: 0.7rem;
    background: rgba(34, 197, 94, 0.3);
    color: #86efac;
    padding: 2px 6px;
    border-radius: 4px;
}

.debug-wilds-badge {
    font-size: 0.7rem;
    background: rgba(168, 85, 247, 0.4);
    color: #d8b4fe;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.debug-hand-section {
    margin-bottom: 8px;
}

.debug-hand-section:last-child {
    margin-bottom: 0;
}

.debug-hand-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.debug-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.debug-empty {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.85rem;
}

.debug-card-group {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
}

.debug-card-group.wild {
    background: rgba(168, 85, 247, 0.25);
    border: 1px solid rgba(168, 85, 247, 0.4);
}

.debug-card-group.dead {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    opacity: 0.7;
}

.debug-rank {
    font-weight: 700;
    color: var(--text-primary);
    min-width: 20px;
}

.debug-suits {
    display: flex;
    gap: 1px;
}

.debug-suit {
    font-size: 0.8rem;
}

.debug-suit.red {
    color: #ef4444;
}

.debug-suit.black {
    color: var(--text-primary);
}

.debug-count {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-left: 2px;
}

/* Menu divider */
.menu-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 4px 0;
}

/* ===================================
   Permission Help Modal
   Platform-specific help for camera/mic permissions
   =================================== */
.permission-help-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

.permission-help-modal.show {
    opacity: 1;
}

.permission-help-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    padding: 32px;
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(78, 205, 196, 0.1);
    animation: permissionModalSlideIn 0.3s ease;
}

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

.permission-help-content h2 {
    color: #ff6b6b;
    margin: 0 0 20px 0;
    font-size: 1.5rem;
    font-weight: 700;
    padding-right: 40px;
}

.permission-help-content h3 {
    color: #4ecdc4;
    margin: 20px 0 16px 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.permission-help-instructions {
    color: #e0e0e0;
    line-height: 1.7;
    font-size: 0.95rem;
}

.permission-help-instructions ol {
    padding-left: 24px;
    margin: 16px 0;
}

.permission-help-instructions li {
    margin: 12px 0;
    padding-left: 8px;
}

.permission-help-instructions strong {
    color: #fff;
    font-weight: 600;
}

.permission-help-instructions p {
    margin: 16px 0;
    padding: 12px 16px;
    background: rgba(78, 205, 196, 0.1);
    border-radius: 8px;
    border-left: 3px solid #4ecdc4;
}

.permission-help-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.permission-help-close:hover {
    color: #fff;
    background: rgba(255, 107, 107, 0.3);
}

.permission-help-ok {
    margin-top: 24px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
}

.permission-help-ok:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4);
}

.permission-help-ok:active {
    transform: translateY(0);
}

/* ==========================================
   Seat Selection Modal
   ========================================== */
.seat-selection-modal {
    padding: 2rem;
    min-width: 500px;
    max-width: 600px;
}

.seat-selection-modal h2 {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: 1.5rem;
}

.seat-selection-modal .room-code-label {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.seat-selection-modal .room-code-label strong {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.seat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.seat-btn {
    background: var(--surface-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.seat-btn.available {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, var(--surface-secondary), var(--surface-primary));
}

.seat-btn.available:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(78, 205, 196, 0.3);
    border-color: var(--accent-secondary);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}

.seat-btn.available:hover .seat-number,
.seat-btn.available:hover .team-name,
.seat-btn.available:hover .seat-status {
    color: white;
}

.seat-btn.occupied,
.seat-btn.bot-occupied {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--border-color);
}

.seat-btn .seat-number {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.seat-btn .team-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.seat-btn .team-icon {
    font-size: 1.5rem;
    color: var(--accent-primary);
}

.seat-btn .team-name {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.seat-btn .seat-status {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-style: italic;
}

.seat-help {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.85rem;
    margin-top: 1rem;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .seat-selection-modal {
        min-width: 90vw;
        padding: 1.5rem;
    }

    .seat-grid {
        grid-template-columns: 1fr;
    }
}

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

.spectator-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.spectator-banner .material-symbols-outlined {
    font-size: 1.5rem;
}

.spectator-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
    height: calc(100vh - 200px);
    overflow: auto;
}

.spectator-quadrant {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 250px;
}

.spectator-player-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.spectator-player-info.current-turn {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.2);
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
}

.spectator-player-info .player-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.spectator-player-info .player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spectator-player-info .player-initials {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #667eea;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: bold;
}

.spectator-player-info .player-name-team {
    flex: 1;
}

.spectator-player-info .player-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: white;
}

.spectator-player-info .player-team {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}

.spectator-player-info .player-cards-status {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

.spectator-player-info .in-foot {
    color: #FFC107;
    font-weight: 600;
}

.spectator-hand {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    overflow-y: auto;
    max-height: 300px;
}

.spectator-card {
    width: 50px;
    height: 75px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.spectator-card.red-suit {
    color: #e53935;
}

.spectator-card.black-suit {
    color: #212121;
}

.spectator-card .card-rank {
    font-size: 0.9rem;
    font-weight: bold;
}

.spectator-card .card-suit {
    font-size: 1.1rem;
    margin-top: 0.1rem;
}

.spectator-empty-seat {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.1rem;
    font-weight: 500;
}

.no-cards-message {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

/* Spectator List Modal */
.spectator-list-modal {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    min-width: 400px;
    max-width: 500px;
    color: #333;
}

.spectator-list-modal h2 {
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
    color: #667eea;
}

.spectator-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 1.5rem;
}

.spectator-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: #f5f5f5;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.spectator-row:hover {
    background: #e8e8e8;
    border-color: #667eea;
}

.spectator-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

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

.spectator-initials {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #667eea;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
}

.spectator-name {
    font-weight: 600;
    color: #333;
}

.no-spectators {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 2rem;
}

.admit-spectator-btn {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
}

/* Admit Spectator Modal */
.admit-spectator-modal {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    min-width: 500px;
    max-width: 600px;
    color: #333;
}

.admit-spectator-modal h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: #667eea;
}

.admit-spectator-modal p {
    margin: 0 0 1.5rem 0;
    color: #666;
}

.admit-spectator-modal .cancel-btn {
    margin-top: 1rem;
    width: 100%;
}

/* Mobile Spectator View */
@media (max-width: 768px) {
    .spectator-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }

    .spectator-quadrant {
        min-height: 200px;
    }

    .spectator-card {
        width: 40px;
        height: 60px;
        font-size: 0.75rem;
    }

    .spectator-list-modal,
    .admit-spectator-modal {
        min-width: 90vw;
        padding: 1.5rem;
    }
}
/* Join/Reconnection Approval Modals */
.join-request,
.reconnection-request {
    text-align: center;
    padding: 20px;
}

.join-request .profile-pic {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 20px auto;
    display: block;
}

.join-request .profile-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--surface-color);
    margin: 20px auto;
}

.join-request p,
.reconnection-request p {
    margin: 15px 0;
    font-size: 1.1rem;
}

.join-request .button-group,
.reconnection-request .button-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}

.approve-btn {
    background: var(--success-color, #10b981);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s;
}

.approve-btn:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

.deny-btn {
    background: var(--danger-color, #ef4444);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s;
}

.deny-btn:hover {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

/* Waiting for Approval Modal */
.waiting-approval {
    text-align: center;
    padding: 30px 20px;
}

.waiting-approval p {
    margin-top: 20px;
    font-size: 1.1rem;
    color: var(--text-secondary);
}

/* Replace with Bot Button */
.replace-bot-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 8px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.replace-bot-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.replace-bot-btn::before {
    content: '🤖';
    font-size: 16px;
}

/* ============================================
   Foot Pickup Animation (2nd Hand)
   SPECTACULAR VERSION - Dramatic Card Fan with Particles
   ============================================ */

/* Overlay with deep dramatic background */
.foot-pickup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: footOverlayIn 0.4s ease-out forwards;
    overflow: hidden;

    /* Deep cinematic background */
    background:
        radial-gradient(ellipse 100% 80% at 50% 40%, rgba(201, 162, 39, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(10, 10, 20, 0.98) 100%);
}

@keyframes footOverlayIn {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    100% {
        opacity: 1;
        backdrop-filter: blur(12px);
    }
}

.foot-pickup-overlay.fade-out {
    animation: footOverlayOut 0.4s ease-in forwards;
}

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

/* Glowing orb behind the cards */
.foot-glow-orb {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(201, 162, 39, 0.4) 0%,
        rgba(201, 162, 39, 0.2) 30%,
        rgba(201, 162, 39, 0.05) 60%,
        transparent 80%
    );
    filter: blur(40px);
    opacity: 0;
    transform: scale(0.3);
    pointer-events: none;
}

.foot-glow-orb.animate-in {
    animation: glowOrbPulse 2s ease-out forwards, glowOrbBreath 3s ease-in-out 2s infinite;
}

@keyframes glowOrbPulse {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.8;
        transform: scale(1);
    }
}

@keyframes glowOrbBreath {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 0.9; }
}

/* Spectacular Card Fan Container */
.foot-cards-container.spectacular {
    position: relative;
    width: 400px;
    height: 200px;
    margin-bottom: 1rem;
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* Individual fan card */
.foot-fan-card {
    position: absolute;
    width: 80px;
    height: 112px;
    left: 50%;
    top: 50%;
    transform-origin: center 250%;
    opacity: 0;
    transform: translate(-50%, -50%) rotateY(0deg) rotateZ(0deg) scale(0.3);
    transition: none;
    will-change: transform, opacity;
}

.foot-fan-card .foot-card-inner {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.15) 0%,
            transparent 40%,
            transparent 60%,
            rgba(255, 255, 255, 0.08) 100%),
        linear-gradient(145deg, #722f37 0%, #5a242c 50%, #4a1c24 100%);
    border: 1.5px solid #3a161c;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.foot-card-back-design {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.foot-card-back-border {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1.5px solid rgba(201, 162, 39, 0.5);
    border-radius: 4px;
}

.foot-card-back-pattern {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 3px,
            rgba(201, 162, 39, 0.1) 3px,
            rgba(201, 162, 39, 0.1) 6px
        );
    border-radius: 2px;
}

/* Card fan-out animation - dramatic cascade */
.foot-fan-card.fan-out {
    animation: cardFanOut 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes cardFanOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateY(90deg) rotateZ(0deg) scale(0.3) translateY(100px);
    }
    40% {
        opacity: 1;
        transform: translate(-50%, -50%) rotateY(-10deg) rotateZ(calc((var(--card-index) - 5) * 8deg)) scale(1.1) translateY(-20px);
    }
    70% {
        transform: translate(-50%, -50%) rotateY(5deg) rotateZ(calc((var(--card-index) - 5) * 7deg)) scale(1.02) translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotateY(0deg) rotateZ(calc((var(--card-index) - 5) * 6deg)) scale(1) translateY(0);
    }
}

/* Cards fly away on dismiss */
.foot-cards-container.fly-away .foot-fan-card {
    animation: cardFlyAway 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

@keyframes cardFlyAway {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%)
                   rotateZ(calc((var(--card-index) - 5) * 15deg + var(--card-index) * 20deg))
                   translateY(-400px)
                   translateX(calc((var(--card-index) - 5) * 80px))
                   scale(0.5);
    }
}

/* Particle explosion container */
.foot-particle-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
}

.foot-particle-container.animate-in {
    opacity: 1;
}

.foot-particle-container.fade-out {
    animation: particleFadeOut 0.3s ease-out forwards;
}

@keyframes particleFadeOut {
    to { opacity: 0; }
}

/* Individual sparkle particles */
.foot-particle {
    position: absolute;
    left: 50%;
    top: 45%;
    width: calc(8px * var(--random-size));
    height: calc(8px * var(--random-size));
    background: radial-gradient(circle,
        #ffd700 0%,
        rgba(201, 162, 39, 0.8) 40%,
        transparent 70%
    );
    border-radius: 50%;
    opacity: 0;
    box-shadow:
        0 0 calc(10px * var(--random-size)) rgba(201, 162, 39, 0.8),
        0 0 calc(20px * var(--random-size)) rgba(201, 162, 39, 0.4);
}

.foot-particle-container.animate-in .foot-particle {
    animation: particleExplode 1.5s ease-out forwards;
    animation-delay: calc(var(--random-delay) * 1s);
}

@keyframes particleExplode {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translate(
            calc(-50% + var(--random-x) * 300px),
            calc(-50% + var(--random-y) * 300px - 100px)
        ) scale(0.3);
    }
}

/* Spectacular Title with slam effect */
.foot-pickup-title.spectacular {
    font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    opacity: 0;
    transform: scale(3) translateY(-30px);
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.foot-pickup-title.spectacular .title-word {
    background: linear-gradient(135deg, #ffd700 0%, #fff 20%, #ffd700 40%, #c9a227 60%, #ffd700 80%, #fff 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(201, 162, 39, 0.6));
    display: inline-block;
}

.foot-pickup-title.spectacular.animate-in {
    animation: titleSlamIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.foot-pickup-title.spectacular.animate-in .title-word {
    animation: goldShimmer 2s linear 0.8s infinite;
}

@keyframes titleSlamIn {
    0% {
        opacity: 0;
        transform: scale(3) translateY(-30px);
        filter: blur(10px);
    }
    60% {
        opacity: 1;
        transform: scale(0.95) translateY(5px);
        filter: blur(0px);
    }
    80% {
        transform: scale(1.02) translateY(-2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes goldShimmer {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* Subtitle with count highlight */
.foot-pickup-subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    padding: 12px 28px;
    margin-bottom: 2rem;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.03) 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(20px) scale(0.9);
}

.foot-pickup-subtitle .count-highlight {
    color: #ffd700;
    font-weight: 700;
    font-size: 1.4em;
    text-shadow: 0 0 20px rgba(201, 162, 39, 0.6);
}

.foot-pickup-subtitle.animate-in {
    animation: subtitleSlideIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes subtitleSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Spectacular button with pulsing glow */
.foot-pickup-btn.spectacular {
    padding: 18px 56px;
    font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: white;
    cursor: pointer;
    opacity: 0;
    transform: translateY(40px) scale(0.8);
    position: relative;
    z-index: 1;
    overflow: hidden;

    background: linear-gradient(135deg,
        rgba(201, 162, 39, 0.35) 0%,
        rgba(201, 162, 39, 0.2) 50%,
        rgba(201, 162, 39, 0.3) 100%
    );
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border: 2px solid rgba(201, 162, 39, 0.6);
    border-radius: 60px;

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.4),
        0 6px 20px rgba(201, 162, 39, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.foot-pickup-btn.spectacular .btn-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
        rgba(201, 162, 39, 0.4) 0%,
        transparent 60%
    );
    opacity: 0;
    animation: none;
}

.foot-pickup-btn.spectacular .btn-text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foot-pickup-btn.spectacular.animate-in {
    animation: buttonRevealSpectacular 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.foot-pickup-btn.spectacular.animate-in .btn-glow {
    animation: buttonGlowPulse 2s ease-in-out 0.7s infinite;
}

@keyframes buttonRevealSpectacular {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.7);
    }
    60% {
        transform: translateY(-8px) scale(1.08);
    }
    80% {
        transform: translateY(3px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes buttonGlowPulse {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.foot-pickup-btn.spectacular:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.5),
        0 10px 30px rgba(201, 162, 39, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(201, 162, 39, 0.8);
    background: linear-gradient(135deg,
        rgba(201, 162, 39, 0.45) 0%,
        rgba(201, 162, 39, 0.25) 50%,
        rgba(201, 162, 39, 0.4) 100%
    );
}

.foot-pickup-btn.spectacular:hover .btn-glow {
    opacity: 0.8;
}

.foot-pickup-btn.spectacular:active {
    transform: translateY(0) scale(0.98);
    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.4),
        0 3px 10px rgba(201, 162, 39, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Foot Pickup Celebration - Video Box Party
   ============================================ */

/* Confetti particle container - positioned relative to video box */
.foot-celebration-confetti {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
}

/* Individual confetti pieces */
.foot-confetti-piece {
    position: absolute;
    width: 8px;
    height: 12px;
    background: var(--accent-primary, #c9a227);
    opacity: 0;
    transform-origin: center;
}

.foot-confetti-piece.animate {
    animation: footConfettiBurst 2s ease-out forwards;
}

@keyframes footConfettiBurst {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%)
                   translateX(var(--confetti-x))
                   translateY(var(--confetti-y))
                   scale(0.3)
                   rotate(720deg);
    }
}

/* Border glow pulse effect - works with video-placeholder or any parent */
.foot-celebration {
    animation: footBorderGlow 2.5s ease-out forwards;
}

@keyframes footBorderGlow {
    0%, 100% {
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.3),
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    15% {
        box-shadow:
            0 0 40px rgba(201, 162, 39, 0.8),
            0 0 80px rgba(201, 162, 39, 0.4),
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 0 20px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow:
            0 0 25px rgba(201, 162, 39, 0.5),
            0 0 50px rgba(201, 162, 39, 0.2),
            0 8px 32px rgba(0, 0, 0, 0.2);
    }
}

/* Shoe icon overlay */
.foot-celebration-shoe {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    z-index: 20;
    opacity: 0;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
    pointer-events: none;
}

.foot-celebration-shoe.animate {
    animation: footShoeBounce 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes footShoeBounce {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px) scale(0) rotate(-45deg);
    }
    30% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1.2) rotate(10deg);
    }
    45% {
        transform: translateX(-50%) translateY(-12px) scale(1.05) rotate(-5deg);
    }
    60% {
        transform: translateX(-50%) translateY(0) scale(1.15) rotate(5deg);
    }
    75% {
        transform: translateX(-50%) translateY(-6px) scale(1.1) rotate(0deg);
    }
    85% {
        transform: translateX(-50%) translateY(0) scale(1.15) rotate(0deg);
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px) scale(1) rotate(0deg);
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .foot-celebration-shoe {
        font-size: 2rem;
        top: -30px;
    }

    .foot-pickup-title.spectacular {
        font-size: 2rem;
    }

    .foot-pickup-btn.spectacular {
        padding: 14px 40px;
        font-size: 1.1rem;
    }
}
/* ============================================
   Card Styles - Unified Card System
   ============================================
   All cards (static, flying, meld) use the same
   base styles for visual consistency.
   ============================================ */

/* Base Card - The foundation for all cards */
.card {
    --card-width: 80px;
    --card-height: 112px;
    --card-radius: 8px;
    --card-border: 1.5px;

    width: var(--card-width);
    height: var(--card-height);
    border-radius: var(--card-radius);
    border: var(--card-border) solid #2a2a2a;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 6px;
    user-select: none;
    font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    overflow: hidden;
    flex-shrink: 0;

    /* Premium card face with subtle linen texture */
    background:
        /* Linen texture pattern */
        url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3h1v1H1V3zm2-2h1v1H3V1z' fill='%23000' fill-opacity='0.015'/%3E%3C/svg%3E"),
        /* Subtle cream gradient */
        linear-gradient(145deg, #ffffff 0%, #fefdfb 50%, #fcfaf7 100%);

    /* Enhanced shadow for premium feel */
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.02);
}

/* Static cards get hover/selection transitions */
.card:not(.flying-card) {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                border-color 0.2s ease;
    cursor: pointer;
}

/* Hover: subtle lift but NO z-index change - stays behind adjacent cards */
.card:not(.flying-card):hover {
    transform: translateY(-8px);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.1),
        0 8px 16px rgba(0, 0, 0, 0.1),
        0 12px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    /* z-index inherited from nth-child rules below */
}

/* ============================================
   Card Stacking Order - Right cards stay on top
   Uses nth-child to give increasing z-index
   ============================================ */
.card:nth-child(1) { z-index: 1; }
.card:nth-child(2) { z-index: 2; }
.card:nth-child(3) { z-index: 3; }
.card:nth-child(4) { z-index: 4; }
.card:nth-child(5) { z-index: 5; }
.card:nth-child(6) { z-index: 6; }
.card:nth-child(7) { z-index: 7; }
.card:nth-child(8) { z-index: 8; }
.card:nth-child(9) { z-index: 9; }
.card:nth-child(10) { z-index: 10; }
.card:nth-child(11) { z-index: 11; }
.card:nth-child(12) { z-index: 12; }
.card:nth-child(13) { z-index: 13; }
.card:nth-child(14) { z-index: 14; }
.card:nth-child(15) { z-index: 15; }
.card:nth-child(n+16) { z-index: 16; }

/* Selected: larger lift with gold glow AND z-index to bring to front */
.card.selected {
    transform: translateY(-16px);
    border-color: var(--accent-primary, #c9a227);
    box-shadow:
        0 0 0 3px var(--accent-primary, #c9a227),
        0 0 20px rgba(201, 162, 39, 0.35),
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 16px 32px rgba(0, 0, 0, 0.1);
    z-index: 50 !important; /* Override nth-child z-index to bring selected card to front */
}

/* Card Corners - Rank and small suit */
.card-corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 1px;
}

.card-corner.top-left {
    align-self: flex-start;
}

.card-corner.bottom-right {
    align-self: flex-end;
    transform: rotate(180deg);
}

.card-rank {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.card-suit-small {
    font-size: 0.85rem;
    line-height: 1;
}

/* Card Center Symbol */
.card-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.card-center-symbol {
    font-size: 2.2rem;
    display: block;
    /* Color is inherited from parent .card which has suit color class */
}

/* Explicit center symbol colors for each suit */
.card.hearts .card-center-symbol,
.card.diamonds .card-center-symbol {
    color: #dc2626;
}

.card.spades .card-center-symbol,
.card.clubs .card-center-symbol {
    color: #1e293b;
}

/* Suit Colors */
.card.hearts,
.card.diamonds {
    color: #dc2626;
}

.card.spades,
.card.clubs {
    color: #1e293b;
}

.card.joker {
    color: #7c3aed;
    background: linear-gradient(145deg, #fef9e7 0%, #fef3c7 100%);
}

/* Joker card specific styling */
.card.joker .joker-rank {
    font-weight: 800;
    font-size: 1.2rem;
    color: #c9a227;
}

.card.joker .joker-star {
    color: #c9a227;
    font-size: 0.9rem;
}

.card.joker .joker-center {
    font-size: 2.8rem;
    color: #c9a227;
}

/* Wild Cards - Subtle highlight */
.card.wild {
    background: linear-gradient(135deg, #ffffff 0%, #fef9e7 100%);
}

.card.wild::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: calc(var(--card-radius) - 1px);
    border: 1px solid rgba(201, 162, 39, 0.3);
    pointer-events: none;
}

/* Red 3s - Penalty highlight */
.card.red-three {
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}

.card.red-three::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: calc(var(--card-radius) - 1px);
    border: 1px solid rgba(220, 38, 38, 0.25);
    pointer-events: none;
}

/* Black 3s */
.card.black-three {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

/* ============================================
   Card Back Design - Elegant dark red/maroon
   with gold foil shimmer effect
   ============================================ */
.card.card-back {
    /* Rich maroon with metallic sheen */
    background:
        /* Metallic highlight */
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 40%,
            transparent 60%,
            rgba(255, 255, 255, 0.05) 100%),
        /* Base maroon gradient */
        linear-gradient(145deg, #722f37 0%, #5a242c 50%, #4a1c24 100%);
    border-color: #3a161c;
    padding: 0;
    color: transparent;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 8px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.card-back-design {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.card-back-border {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1.5px solid rgba(201, 162, 39, 0.55);
    border-radius: 4px;
    /* Inner glow effect */
    box-shadow:
        inset 0 0 8px rgba(201, 162, 39, 0.15),
        0 0 4px rgba(201, 162, 39, 0.1);
}

.card-back-pattern {
    width: 60%;
    height: 70%;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(201, 162, 39, 0.25) 0px,
            rgba(201, 162, 39, 0.25) 1px,
            transparent 1px,
            transparent 8px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(201, 162, 39, 0.25) 0px,
            rgba(201, 162, 39, 0.25) 1px,
            transparent 1px,
            transparent 8px
        );
    border-radius: 2px;
    position: relative;
}

/* Gold foil shimmer effect on hover */
.card.card-back::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 215, 0, 0.12) 45%,
        rgba(255, 215, 0, 0.2) 50%,
        rgba(255, 215, 0, 0.12) 55%,
        transparent 80%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: var(--card-radius);
}

.card.card-back:hover::after {
    opacity: 1;
    animation: cardShimmer 1.2s ease-in-out;
}

@keyframes cardShimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* ============================================
   Flying Card - Animation Specific
   ============================================ */
.card.flying-card {
    position: fixed;
    z-index: 10001;
    pointer-events: none;
    will-change: transform, left, top;
    /* Remove hover effects for flying cards */
    cursor: default;
}

.card.flying-card:hover {
    transform: none;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Flying card shadow enhancement during animation */
.card.flying-card.animating {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.2),
        0 16px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ============================================
   Card Size Variants
   ============================================ */
.card.card-small {
    --card-width: 60px;
    --card-height: 84px;
    padding: 4px 5px;
}

.card.card-small .card-rank {
    font-size: 0.9rem;
}

.card.card-small .card-suit-small {
    font-size: 0.7rem;
}

.card.card-small .card-center-symbol {
    font-size: 1.6rem;
}

.card.card-mini {
    --card-width: 45px;
    --card-height: 63px;
    padding: 3px 4px;
}

.card.card-mini .card-rank {
    font-size: 0.75rem;
}

.card.card-mini .card-suit-small {
    font-size: 0.55rem;
}

.card.card-mini .card-center-symbol {
    font-size: 1.2rem;
}

/* ============================================
   Hand Layout
   ============================================ */
.hand-fan {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 140px;
    padding-bottom: 10px;
    margin-top: auto;
}

.hand-fan .card {
    margin-left: -40px;
    transform-origin: bottom center;
}

.hand-fan .card:first-child {
    margin-left: 0;
}

.hand-fan .card:hover ~ .card {
    transform: translateX(20px);
}

.hand-cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* ============================================
   Pile Containers - Clean Minimal Design
   ============================================ */
.pile-container {
    width: 100px;
    height: 140px;
    /* No border - clean look */
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.2s ease;
    background: transparent;
}

.pile-container:hover {
    /* Subtle lift on hover instead of border */
    transform: translateY(-2px);
    background: transparent;
}

.pile-label {
    position: absolute;
    bottom: -25px;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.pile-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: rgba(30, 58, 95, 0.9);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 12px;
    min-width: 22px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(201, 162, 39, 0.3);
    backdrop-filter: blur(4px);
}

.empty-pile {
    color: var(--text-muted, #64748b);
    font-size: 0.8rem;
    opacity: 0.5;
}

/* Stock pile stacking - enhanced depth */
.stock-pile .card {
    position: absolute;
}

.stock-pile .card:nth-child(1) {
    transform: translate(-3px, -3px);
    filter: brightness(0.85);
}

.stock-pile .card:nth-child(2) {
    transform: translate(-1.5px, -1.5px);
    filter: brightness(0.92);
}

.stock-pile .card:nth-child(3) {
    transform: translate(0, 0);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Discard pile stack - depth shadows */
.discard-pile-stack {
    position: relative;
}

.discard-pile-stack .card {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ============================================
   Meld Cards Layout
   ============================================ */
.meld-cards {
    display: flex;
    flex-direction: column;
    gap: -90px;
}

.meld-cards .card {
    transform: scale(0.8);
    transform-origin: top center;
}

/* Canasta completed styles */
.meld-cards.canasta {
    position: relative;
}

.meld-cards.natural-canasta::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid #f59e0b;
    border-radius: 10px;
    pointer-events: none;
}

.meld-cards.wild-canasta::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid #7c3aed;
    border-radius: 10px;
    pointer-events: none;
}

/* ============================================
   Animation Container
   ============================================ */
.card-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
    overflow: visible;
}

/* ============================================
   Opponent Hand (card backs)
   ============================================ */
.opponent-hand {
    display: flex;
    gap: -30px;
}

.opponent-hand .card {
    transform: scale(0.6);
}

.more-cards-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #94a3b8);
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    margin-left: 4px;
}
/* Animations */

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn var(--transition-base) forwards;
}

/* Slide Up */
@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-up {
    animation: slideUp var(--transition-base) forwards;
}

/* Pulse for active turn */
@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

.pulse-active {
    animation: pulse-border 2s infinite;
}

/* Card Deal Animation */
@keyframes dealCard {
    from {
        transform: translate(-50vw, -50vh) scale(0.5) rotate(180deg);
        opacity: 0;
    }

    to {
        transform: translate(0, 0) scale(1) rotate(0);
        opacity: 1;
    }
}

.deal-animation {
    animation: dealCard 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Staggered entry for lists */
.stagger-1 {
    animation-delay: 100ms;
}

.stagger-2 {
    animation-delay: 200ms;
}

.stagger-3 {
    animation-delay: 300ms;
}

.stagger-4 {
    animation-delay: 400ms;
}

/* ============================================
   Canasta Score Counter Animation
   Premium Realistic Card Display
   ============================================ */

/* Overlay for counting animation */
.canasta-counter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.4s ease-out forwards;

    /* Solid background with green felt gradient - fully opaque */
    background:
        radial-gradient(ellipse 80% 50% at 50% 30%, rgba(30, 128, 80, 0.3) 0%, transparent 60%),
        linear-gradient(180deg, #1a3a2e 0%, #0f1f1a 100%);
}

.canasta-counter-overlay.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

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

/* Team label at top */
.counter-team-label {
    font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--accent-primary, #c9a227);
    margin-bottom: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 20px rgba(201, 162, 39, 0.3);
}

/* Container for canasta display during counting */
.counter-canastas-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 3rem;
    padding: 2rem 3rem;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    min-height: 220px;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

/* Individual canasta stack in counter */
.counter-canasta {
    position: relative;
    width: 110px;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10px;
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    perspective: 800px;
}

.counter-canasta.active {
    opacity: 1;
    transform: scale(1.15) translateY(-10px);
}

.counter-canasta.active .counter-canasta-stack {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.4));
}

.counter-canasta.counted {
    opacity: 1;
    transform: scale(0.95);
}

/* Realistic canasta card stack */
.counter-canasta-stack {
    position: relative;
    width: 80px;
    height: 112px;
}

/* Cards created with Card.create() in canasta stack */
.counter-canasta-stack .card.card-mini.stack-card {
    width: 60px !important;
    height: 84px !important;
    font-size: 0.75rem;
}

/* Individual stacked cards in canasta */
.counter-stack-card {
    position: absolute;
    width: 70px;
    height: 98px;
    border-radius: 8px;
    /* White card face with cream gradient */
    background: linear-gradient(145deg, #ffffff 0%, #fefdfb 50%, #fcfaf7 100%);
    border: 1.5px solid #2a2a2a;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 6px;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

/* Card corners in stack */
.counter-stack-card .card-corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.counter-stack-card .card-rank {
    font-size: 1rem;
    font-weight: 700;
}

.counter-stack-card .card-suit {
    font-size: 0.75rem;
}

.counter-stack-card .card-corner.bottom {
    align-self: flex-end;
    transform: rotate(180deg);
}

/* Card colors */
.counter-stack-card.hearts,
.counter-stack-card.diamonds {
    color: #dc2626;
}

.counter-stack-card.spades,
.counter-stack-card.clubs {
    color: #1a1a1a;
}

.counter-stack-card.joker {
    color: #7c3aed;
}

.counter-stack-card.wild {
    color: #dc2626;
}

/* Canasta type indicator glow */
.counter-canasta[data-type="clean"] .counter-stack-card:first-child,
.counter-canasta[data-type="clean"] .card:first-child {
    box-shadow:
        0 4px 20px rgba(220, 38, 38, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.counter-canasta[data-type="dirty"] .counter-stack-card:first-child,
.counter-canasta[data-type="dirty"] .card:first-child {
    box-shadow:
        0 4px 20px rgba(30, 30, 30, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.counter-canasta[data-type="wild"] .counter-stack-card:first-child,
.counter-canasta[data-type="wild"] .card:first-child {
    box-shadow:
        0 4px 20px rgba(217, 70, 239, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Canasta type badge */
.counter-canasta-badge {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    border-radius: 14px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.counter-canasta[data-type="clean"] .counter-canasta-badge {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.5);
}

.counter-canasta[data-type="dirty"] .counter-canasta-badge {
    background: linear-gradient(135deg, #1f2937, #111827);
    color: white;
    box-shadow: 0 2px 8px rgba(30, 30, 30, 0.5);
}

.counter-canasta[data-type="wild"] .counter-canasta-badge {
    background: linear-gradient(135deg, #d946ef, #a855f7);
    color: white;
    box-shadow: 0 2px 8px rgba(217, 70, 239, 0.5);
}

/* Score number that floats up from canasta */
.counter-score-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    text-shadow:
        0 0 30px rgba(255, 255, 255, 0.8),
        0 0 60px rgba(201, 162, 39, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.5);
    opacity: 0;
    z-index: 20;
    pointer-events: none;
}

.counter-score-number.animate-up {
    animation: scoreFloat 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes scoreFloat {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -80%) scale(1.3);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -120%) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -160%) scale(0.9);
    }
}

/* Running total display */
.counter-running-total {
    font-family: 'Cinzel', serif;
    font-size: 4.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ffd700 0%, #c9a227 50%, #ffd700 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 30px rgba(201, 162, 39, 0.4));
    margin-top: 1.5rem;
    min-height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease-out;
}

.counter-running-total.visible {
    opacity: 1;
    transform: scale(1);
    animation: goldShimmer 3s linear infinite;
}

.counter-running-total.pulse {
    animation: totalPulse 0.4s ease-out, goldShimmer 3s linear infinite;
}

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

/* Final total with grand reveal */
.counter-final-total {
    font-family: 'Cinzel', serif;
    font-size: 6rem;
    font-weight: 900;
    background: linear-gradient(135deg, #ffd700 0%, #c9a227 25%, #ffd700 50%, #c9a227 75%, #ffd700 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 40px rgba(201, 162, 39, 0.5));
    opacity: 0;
    transform: translateY(50px) scale(0.5);
}

.counter-final-total.animate-in {
    animation: finalTotalReveal 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, goldShimmer 3s linear 1s infinite;
}

@keyframes finalTotalReveal {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.5) rotateX(-15deg);
    }
    60% {
        opacity: 1;
        transform: translateY(-10px) scale(1.1) rotateX(5deg);
    }
    80% {
        transform: translateY(5px) scale(0.98) rotateX(-2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0);
    }
}

/* Points label under final total */
.counter-points-label {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    opacity: 0;
}

.counter-points-label.visible {
    animation: labelFadeIn 0.6s ease-out forwards;
    animation-delay: 0.3s;
}

@keyframes labelFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Skip button */
.counter-skip-btn {
    position: absolute;
    bottom: 0.75rem;
    right: 2rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.counter-skip-btn:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.1) 100%
    );
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Continue button - transforms from skip button after counting completes */
.counter-skip-btn.continue-btn {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg,
        rgba(76, 175, 80, 0.8) 0%,
        rgba(56, 142, 60, 0.8) 100%
    );
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 30px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 20px rgba(76, 175, 80, 0.4);
    animation: continueButtonPulse 2s ease-in-out infinite;
}

.counter-skip-btn.continue-btn:hover {
    background: linear-gradient(135deg,
        rgba(76, 175, 80, 1) 0%,
        rgba(56, 142, 60, 1) 100%
    );
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 0 6px 24px rgba(76, 175, 80, 0.6);
}

@keyframes continueButtonPulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(76, 175, 80, 0.4);
    }
    50% {
        box-shadow: 0 4px 30px rgba(76, 175, 80, 0.7);
    }
}

/* ============================================
   Foot Pickup Animation (2nd Hand)
   SPECTACULAR VERSION - Dramatic Card Fan with Particles
   ============================================ */

/* Overlay with deep dramatic background */
.foot-pickup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: footOverlayIn 0.4s ease-out forwards;
    overflow: hidden;

    /* Deep cinematic background */
    background:
        radial-gradient(ellipse 100% 80% at 50% 40%, rgba(201, 162, 39, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(10, 10, 20, 0.98) 100%);
}

@keyframes footOverlayIn {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    100% {
        opacity: 1;
        backdrop-filter: blur(12px);
    }
}

.foot-pickup-overlay.fade-out {
    animation: footOverlayOut 0.4s ease-in forwards;
}

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

/* Glowing orb behind the cards */
.foot-glow-orb {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(201, 162, 39, 0.4) 0%,
        rgba(201, 162, 39, 0.2) 30%,
        rgba(201, 162, 39, 0.05) 60%,
        transparent 80%
    );
    filter: blur(40px);
    opacity: 0;
    transform: scale(0.3);
    pointer-events: none;
}

.foot-glow-orb.animate-in {
    animation: glowOrbPulse 2s ease-out forwards, glowOrbBreath 3s ease-in-out 2s infinite;
}

@keyframes glowOrbPulse {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.8;
        transform: scale(1);
    }
}

@keyframes glowOrbBreath {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 0.9; }
}

/* Spectacular Card Fan Container */
.foot-cards-container.spectacular {
    position: relative;
    width: 400px;
    height: 200px;
    margin-bottom: 1rem;
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* Individual fan card */
.foot-fan-card {
    position: absolute;
    width: 80px;
    height: 112px;
    left: 50%;
    top: 50%;
    transform-origin: center 250%;
    opacity: 0;
    transform: translate(-50%, -50%) rotateY(0deg) rotateZ(0deg) scale(0.3);
    transition: none;
    will-change: transform, opacity;
}

.foot-fan-card .foot-card-inner {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.15) 0%,
            transparent 40%,
            transparent 60%,
            rgba(255, 255, 255, 0.08) 100%),
        linear-gradient(145deg, #722f37 0%, #5a242c 50%, #4a1c24 100%);
    border: 1.5px solid #3a161c;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.foot-card-back-design {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.foot-card-back-border {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1.5px solid rgba(201, 162, 39, 0.5);
    border-radius: 4px;
}

.foot-card-back-pattern {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 3px,
            rgba(201, 162, 39, 0.1) 3px,
            rgba(201, 162, 39, 0.1) 6px
        );
    border-radius: 2px;
}

/* Card fan-out animation - dramatic cascade */
.foot-fan-card.fan-out {
    animation: cardFanOut 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes cardFanOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotateY(90deg) rotateZ(0deg) scale(0.3) translateY(100px);
    }
    40% {
        opacity: 1;
        transform: translate(-50%, -50%) rotateY(-10deg) rotateZ(calc((var(--card-index) - 5) * 8deg)) scale(1.1) translateY(-20px);
    }
    70% {
        transform: translate(-50%, -50%) rotateY(5deg) rotateZ(calc((var(--card-index) - 5) * 7deg)) scale(1.02) translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotateY(0deg) rotateZ(calc((var(--card-index) - 5) * 6deg)) scale(1) translateY(0);
    }
}

/* Cards fly away on dismiss */
.foot-cards-container.fly-away .foot-fan-card {
    animation: cardFlyAway 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

@keyframes cardFlyAway {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%)
                   rotateZ(calc((var(--card-index) - 5) * 15deg + var(--card-index) * 20deg))
                   translateY(-400px)
                   translateX(calc((var(--card-index) - 5) * 80px))
                   scale(0.5);
    }
}

/* Particle explosion container */
.foot-particle-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
}

.foot-particle-container.animate-in {
    opacity: 1;
}

.foot-particle-container.fade-out {
    animation: particleFadeOut 0.3s ease-out forwards;
}

@keyframes particleFadeOut {
    to { opacity: 0; }
}

/* Individual sparkle particles */
.foot-particle {
    position: absolute;
    left: 50%;
    top: 45%;
    width: calc(8px * var(--random-size));
    height: calc(8px * var(--random-size));
    background: radial-gradient(circle,
        #ffd700 0%,
        rgba(201, 162, 39, 0.8) 40%,
        transparent 70%
    );
    border-radius: 50%;
    opacity: 0;
    box-shadow:
        0 0 calc(10px * var(--random-size)) rgba(201, 162, 39, 0.8),
        0 0 calc(20px * var(--random-size)) rgba(201, 162, 39, 0.4);
}

.foot-particle-container.animate-in .foot-particle {
    animation: particleExplode 1.5s ease-out forwards;
    animation-delay: calc(var(--random-delay) * 1s);
}

@keyframes particleExplode {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translate(
            calc(-50% + var(--random-x) * 300px),
            calc(-50% + var(--random-y) * 300px - 100px)
        ) scale(0.3);
    }
}

/* Pile Pickup Explosion Particle */
.pile-pickup-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10002;
    animation: pilePickupExplode 1.2s ease-out forwards;
}

@keyframes pilePickupExplode {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    10% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(
            calc(-50% + var(--random-x)),
            calc(-50% + var(--random-y))
        ) scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: translate(
            calc(-50% + var(--random-x) * 1.5),
            calc(-50% + var(--random-y) * 1.5)
        ) scale(0);
        opacity: 0;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .pile-pickup-particle {
        animation-duration: 0.3s;
    }
}

/* Spectacular Title with slam effect */
.foot-pickup-title.spectacular {
    font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    opacity: 0;
    transform: scale(3) translateY(-30px);
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.foot-pickup-title.spectacular .title-word {
    background: linear-gradient(135deg, #ffd700 0%, #fff 20%, #ffd700 40%, #c9a227 60%, #ffd700 80%, #fff 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(201, 162, 39, 0.6));
    display: inline-block;
}

.foot-pickup-title.spectacular.animate-in {
    animation: titleSlamIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.foot-pickup-title.spectacular.animate-in .title-word {
    animation: goldShimmer 2s linear 0.8s infinite;
}

@keyframes titleSlamIn {
    0% {
        opacity: 0;
        transform: scale(3) translateY(-30px);
        filter: blur(10px);
    }
    60% {
        opacity: 1;
        transform: scale(0.95) translateY(5px);
        filter: blur(0px);
    }
    80% {
        transform: scale(1.02) translateY(-2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes goldShimmer {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* Subtitle with count highlight */
.foot-pickup-subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    padding: 12px 28px;
    margin-bottom: 2rem;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.03) 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(20px) scale(0.9);
}

.foot-pickup-subtitle .count-highlight {
    color: #ffd700;
    font-weight: 700;
    font-size: 1.4em;
    text-shadow: 0 0 20px rgba(201, 162, 39, 0.6);
}

.foot-pickup-subtitle.animate-in {
    animation: subtitleSlideIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes subtitleSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Spectacular button with pulsing glow */
.foot-pickup-btn.spectacular {
    padding: 18px 56px;
    font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: white;
    cursor: pointer;
    opacity: 0;
    transform: translateY(40px) scale(0.8);
    position: relative;
    z-index: 1;
    overflow: hidden;

    background: linear-gradient(135deg,
        rgba(201, 162, 39, 0.35) 0%,
        rgba(201, 162, 39, 0.2) 50%,
        rgba(201, 162, 39, 0.3) 100%
    );
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border: 2px solid rgba(201, 162, 39, 0.6);
    border-radius: 60px;

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.4),
        0 6px 20px rgba(201, 162, 39, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.foot-pickup-btn.spectacular .btn-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
        rgba(201, 162, 39, 0.4) 0%,
        transparent 60%
    );
    opacity: 0;
    animation: none;
}

.foot-pickup-btn.spectacular .btn-text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foot-pickup-btn.spectacular.animate-in {
    animation: buttonRevealSpectacular 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.foot-pickup-btn.spectacular.animate-in .btn-glow {
    animation: buttonGlowPulse 2s ease-in-out 0.7s infinite;
}

@keyframes buttonRevealSpectacular {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.7);
    }
    60% {
        transform: translateY(-8px) scale(1.08);
    }
    80% {
        transform: translateY(3px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes buttonGlowPulse {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.foot-pickup-btn.spectacular:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.5),
        0 10px 30px rgba(201, 162, 39, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(201, 162, 39, 0.8);
    background: linear-gradient(135deg,
        rgba(201, 162, 39, 0.45) 0%,
        rgba(201, 162, 39, 0.25) 50%,
        rgba(201, 162, 39, 0.4) 100%
    );
}

.foot-pickup-btn.spectacular:hover .btn-glow {
    opacity: 0.8;
}

.foot-pickup-btn.spectacular:active {
    transform: translateY(0) scale(0.98);
    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.4),
        0 3px 10px rgba(201, 162, 39, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Legacy classes kept for compatibility */
.foot-pile-card,
.foot-emoji-burst,
.foot-sparkle {
    display: none;
}

/* ============================================
   Rule Violation Popup
   ============================================ */

.rule-violation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.rule-violation-overlay.visible {
    opacity: 1;
}

.rule-violation-modal {
    background: linear-gradient(145deg, #2a1a1a, #1a1015);
    border: 2px solid #dc2626;
    border-radius: 16px;
    padding: 2rem;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow:
        0 0 40px rgba(220, 38, 38, 0.3),
        0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.8) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rule-violation-overlay.visible .rule-violation-modal {
    transform: scale(1) translateY(0);
}

.rule-violation-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    background: linear-gradient(145deg, #dc2626, #991b1b);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4);
}

.rule-violation-icon .material-symbols-outlined {
    font-size: 2rem;
    color: white;
}

.rule-violation-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fca5a5;
    margin-bottom: 0.75rem;
}

.rule-violation-message {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.rule-violation-tips {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.rule-violation-tips .tips-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-primary, #c9a227);
    margin-bottom: 0.5rem;
}

.rule-violation-tips ul {
    margin: 0;
    padding-left: 1.25rem;
}

.rule-violation-tips li {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.rule-violation-tips li:last-child {
    margin-bottom: 0;
}

.rule-violation-btn {
    background: linear-gradient(145deg, #dc2626, #b91c1c);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.rule-violation-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

.rule-violation-btn:active {
    transform: scale(0.98);
}

/* Shake animation for rule violation icon */
@keyframes ruleViolationShake {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-5deg); }
    20%, 40%, 60%, 80% { transform: rotate(5deg); }
}

.rule-violation-overlay.visible .rule-violation-icon {
    animation: ruleViolationShake 0.6s ease-out;
}

/* ============================================
   Go Out Confirmation Dialog
   ============================================ */

.go-out-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.go-out-confirm-overlay.visible {
    opacity: 1;
}

.go-out-confirm-modal {
    background: linear-gradient(145deg, #1a2a1a, #102010);
    border: 2px solid var(--accent-success, #22c55e);
    border-radius: 16px;
    padding: 2rem;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow:
        0 0 40px rgba(34, 197, 94, 0.3),
        0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.8) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.go-out-confirm-overlay.visible .go-out-confirm-modal {
    transform: scale(1) translateY(0);
}

.go-out-confirm-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    background: linear-gradient(145deg, var(--accent-primary, #c9a227), #a38520);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(201, 162, 39, 0.4);
}

.go-out-confirm-icon .material-symbols-outlined {
    font-size: 2rem;
    color: #1a1a2e;
}

.go-out-confirm-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary, #c9a227);
    margin-bottom: 0.75rem;
}

.go-out-confirm-message {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.go-out-warnings {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.go-out-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-warning, #f59e0b);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.go-out-warning:last-child {
    margin-bottom: 0;
}

.go-out-warning .material-symbols-outlined {
    font-size: 1.2rem;
    font-variation-settings: 'FILL' 1;
}

.go-out-confirm-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.go-out-confirm-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.go-out-confirm-btn.cancel {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.go-out-confirm-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.2);
}

.go-out-confirm-btn.confirm {
    background: linear-gradient(145deg, var(--accent-success, #22c55e), #16a34a);
    color: white;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.go-out-confirm-btn.confirm:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.go-out-confirm-btn.confirm:active {
    transform: scale(0.98);
}

/* ============================================
   Foot Pickup Celebration - Video Box Party
   ============================================ */

/* Confetti particle container - positioned relative to video box */
.foot-celebration-confetti {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
}

/* Individual confetti pieces */
.foot-confetti-piece {
    position: absolute;
    width: 8px;
    height: 12px;
    background: var(--accent-primary);
    opacity: 0;
    transform-origin: center;
}

.foot-confetti-piece.animate {
    animation: footConfettiBurst 2s ease-out forwards;
}

@keyframes footConfettiBurst {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%)
                   translateX(var(--confetti-x))
                   translateY(var(--confetti-y))
                   scale(0.3)
                   rotate(720deg);
    }
}

/* Border glow pulse effect */
.video-placeholder.foot-celebration {
    animation: footBorderGlow 2.5s ease-out forwards;
}

@keyframes footBorderGlow {
    0%, 100% {
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.3),
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    15% {
        box-shadow:
            0 0 40px rgba(201, 162, 39, 0.8),
            0 0 80px rgba(201, 162, 39, 0.4),
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 0 20px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow:
            0 0 25px rgba(201, 162, 39, 0.5),
            0 0 50px rgba(201, 162, 39, 0.2),
            0 8px 32px rgba(0, 0, 0, 0.2);
    }
}

/* Shoe icon overlay */
.foot-celebration-shoe {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    z-index: 20;
    opacity: 0;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
    pointer-events: none;
}

.foot-celebration-shoe.animate {
    animation: footShoeBounce 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes footShoeBounce {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px) scale(0) rotate(-45deg);
    }
    30% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1.2) rotate(10deg);
    }
    45% {
        transform: translateX(-50%) translateY(-12px) scale(1.05) rotate(-5deg);
    }
    60% {
        transform: translateX(-50%) translateY(0) scale(1.15) rotate(5deg);
    }
    75% {
        transform: translateX(-50%) translateY(-6px) scale(1.1) rotate(0deg);
    }
    85% {
        transform: translateX(-50%) translateY(0) scale(1.15) rotate(0deg);
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px) scale(1) rotate(0deg);
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .foot-celebration-shoe {
        font-size: 2rem;
        top: -30px;
    }
}

/* ============================================
   Game Over Celebration Animation
   ============================================ */

.game-over-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.95) 100%);
    z-index: 10002;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
    overflow: hidden;
}

.game-over-overlay.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

/* Confetti container */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Individual confetti piece */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
}

.confetti.animate {
    animation: confettiFall 4s ease-out forwards;
}

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

/* Trophy icon */
.game-over-trophy {
    font-size: 6rem;
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8));
    margin-bottom: 1rem;
}

.game-over-trophy.animate-in {
    animation: trophyReveal 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes trophyReveal {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.3) rotate(10deg);
    }
    80% {
        transform: scale(0.9) rotate(-5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* GAME OVER text */
.game-over-title {
    font-size: 3.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #fff;
    text-shadow:
        0 0 20px rgba(255, 255, 255, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.5rem;
    opacity: 0;
    transform: translateY(-30px);
}

.game-over-title.animate-in {
    animation: titleSlideDown 0.6s ease-out forwards;
    animation-delay: 0.3s;
}

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

/* Winner announcement */
.game-over-winner {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    opacity: 0;
    transform: scale(0.5);
}

.game-over-winner.winner {
    background: linear-gradient(135deg, #ffd700, #ffed4a, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.game-over-winner.loser {
    color: #94a3b8;
}

.game-over-winner.animate-in {
    animation: winnerReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.6s;
}

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

/* Final scores container */
.game-over-scores {
    display: flex;
    gap: 3rem;
    margin-bottom: 2rem;
    opacity: 0;
}

.game-over-scores.animate-in {
    animation: scoresSlideUp 0.6s ease-out forwards;
    animation-delay: 1s;
}

@keyframes scoresSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Individual team score card */
.game-over-team {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem 2.5rem;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.game-over-team.winning-team {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
    border-color: #ffd700;
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.3),
        0 10px 40px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

.game-over-team.losing-team {
    opacity: 0.7;
}

.game-over-team-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.game-over-team-name .material-symbols-outlined {
    font-size: 1.5rem;
}

.winning-team .game-over-team-name {
    color: #ffd700;
}

.game-over-team-score {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
}

.winning-team .game-over-team-score {
    background: linear-gradient(135deg, #ffd700, #ffed4a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Congratulations message */
.game-over-message {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    text-align: center;
    max-width: 400px;
    line-height: 1.6;
    opacity: 0;
}

.game-over-message.animate-in {
    animation: fadeIn 0.5s ease-out forwards;
    animation-delay: 1.3s;
}

/* Action buttons */
.game-over-actions {
    display: flex;
    gap: 1rem;
    opacity: 0;
}

.game-over-actions.animate-in {
    animation: buttonsSlideUp 0.5s ease-out forwards;
    animation-delay: 1.5s;
}

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

.game-over-btn {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.game-over-btn.primary {
    background: linear-gradient(135deg, #ffd700, #f59e0b);
    color: #1a1a2e;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
}

.game-over-btn.primary:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5);
}

.game-over-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.game-over-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Sparkle stars around trophy */
.game-over-sparkle {
    position: absolute;
    font-size: 2rem;
    opacity: 0;
    pointer-events: none;
}

.game-over-sparkle.animate {
    animation: sparkleFloat 2s ease-out forwards;
}

@keyframes sparkleFloat {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    30% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) rotate(360deg) translateY(-50px);
    }
}

/* Crown for winning team */
.winning-crown {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    opacity: 0;
}

.winning-crown.animate {
    animation: crownBounce 1s ease-out forwards;
    animation-delay: 1.2s;
}

@keyframes crownBounce {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px) scale(0);
    }
    60% {
        opacity: 1;
        transform: translateX(-50%) translateY(5px) scale(1.2);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* Pulse glow effect for winner */
.winning-team::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 18px;
    background: linear-gradient(45deg, #ffd700, #ffed4a, #ffd700);
    z-index: -1;
    opacity: 0;
    animation: winnerGlow 2s ease-in-out infinite;
    animation-delay: 1.2s;
}

@keyframes winnerGlow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.02);
    }
}

.game-over-team {
    position: relative;
}

/* ============================================
   Flying Card Animation System
   ============================================
   Note: Flying cards now use the unified Card class
   from cards.css. These styles provide only animation-
   specific enhancements, not base card styling.
   ============================================ */

/* Container for all flying cards - defined in cards.css */
/* .card-animation-container is in cards.css */

/* Animation-specific enhancements for flying cards */
.card.flying-card {
    will-change: transform, left, top, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Legacy flying-card-content support (for any old code) */
.flying-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* Legacy flying card text styles (for backwards compatibility) */
.flying-card-rank {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.flying-card-suit {
    font-size: 1.3rem;
    line-height: 1;
}

/* Card flip animation (for revealing cards mid-flight) */
.flying-card.flipping {
    animation: cardFlip 0.3s ease-out forwards;
}

@keyframes cardFlip {
    0% {
        transform: translate(-50%, -50%) rotateY(0deg);
    }
    50% {
        transform: translate(-50%, -50%) rotateY(90deg);
    }
    100% {
        transform: translate(-50%, -50%) rotateY(0deg);
    }
}

/* Canasta burst particles */
.canasta-burst-particle {
    animation: burstParticle 0.6s ease-out forwards;
}

@keyframes burstParticle {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
}

/* Canasta glow effect */
.canasta-glow {
    animation: canastaGlowPulse 0.5s ease-out forwards;
}

@keyframes canastaGlowPulse {
    0% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* Element pulse animation (for drawing attention) */
.card-animator-pulse {
    animation: cardAnimatorPulse 0.6s ease-out;
}

@keyframes cardAnimatorPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.7);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(201, 162, 39, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);
    }
}

/* Draw pile glow when it's player's turn to draw */
.draw-pile.glow-prompt {
    animation: drawPileGlow 1.5s ease-in-out infinite;
}

@keyframes drawPileGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(201, 162, 39, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(201, 162, 39, 0.6), 0 0 40px rgba(201, 162, 39, 0.3);
    }
}

/* Discard pile highlight when cards are being picked up */
.discard-pile.pickup-active {
    animation: discardPickup 0.5s ease-out;
}

@keyframes discardPickup {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Bot thinking indicator animation */
.bot-thinking-cards {
    position: absolute;
    display: flex;
    gap: 2px;
    animation: botThinking 1s ease-in-out infinite;
}

@keyframes botThinking {
    0%, 100% {
        opacity: 0.5;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* Dealing cards animation (for game start) */
.dealing-card {
    animation: dealCard 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes dealCard {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) rotate(-20deg);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

/* Hand card entry animation */
.hand-card-enter {
    animation: handCardEnter 0.3s ease-out forwards;
}

@keyframes handCardEnter {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hand card exit animation (when discarding) */
.hand-card-exit {
    animation: handCardExit 0.3s ease-in forwards;
}

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

/* Meld card stacking animation */
.meld-card-stack {
    animation: meldCardStack 0.3s ease-out forwards;
}

@keyframes meldCardStack {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(1.2);
    }
    60% {
        transform: translateY(3px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Highlight animation for new cards added to meld */
.meld-card-highlight {
    animation: meldCardHighlight 1s ease-out;
}

@keyframes meldCardHighlight {
    0% {
        box-shadow: 0 0 20px rgba(201, 162, 39, 0.8);
    }
    100% {
        box-shadow: none;
    }
}

/* Shimmer effect for completed canastas */
.canasta-shimmer {
    position: relative;
    overflow: hidden;
}

.canasta-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: canastaShimmer 3s ease-in-out infinite;
}

@keyframes canastaShimmer {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 200%;
    }
}

/* Score fly-up animation */
.score-flyup {
    position: fixed;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary, #c9a227);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 10003;
    animation: scoreFlyup 1.5s ease-out forwards;
}

@keyframes scoreFlyup {
    0% {
        opacity: 1;
        transform: translate(-50%, 0) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -20px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -80px) scale(0.8);
    }
}

/* Negative score animation */
.score-flyup.negative {
    color: #ef4444;
}

/* Bonus score animation */
.score-flyup.bonus {
    color: #22c55e;
    font-size: 2rem;
}
/* ============================================
   Score Breakdown Animation
   Shows detailed score with animated counting
   ============================================ */

.score-breakdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.95) 100%);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
}

.score-breakdown-overlay.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

.score-breakdown-container {
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.95), rgba(20, 20, 30, 0.98));
    border: 2px solid rgba(201, 162, 39, 0.3);
    border-radius: 16px;
    padding: 2rem;
    max-width: 900px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.score-breakdown-title {
    text-align: center;
    color: var(--accent-primary, #c9a227);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.score-breakdown-teams {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.team-breakdown {
    flex: 1;
    max-width: 380px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.team-breakdown.my-team {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.05);
}

.team-breakdown .team-name {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.team-breakdown.my-team .team-name {
    color: var(--accent-success, #22c55e);
}

.score-lines {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.score-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}

.score-line.visible {
    opacity: 1;
    transform: translateX(0);
}

.score-line:hover {
    background: rgba(255, 255, 255, 0.05);
}

.score-line.penalty {
    background: rgba(239, 68, 68, 0.1);
}

.score-line.penalty.visible {
    animation: shakeSubtle 0.3s ease-out;
}

.score-line.natural {
    background: rgba(249, 115, 22, 0.1);
}

.score-line.mixed {
    background: rgba(100, 100, 100, 0.1);
}

.score-line.wild {
    background: rgba(139, 92, 246, 0.1);
}

.score-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary, #aaa);
    font-size: 0.95rem;
}

.score-label .material-symbols-outlined {
    font-size: 1.2rem;
    opacity: 0.7;
}

.score-line.penalty .score-label .material-symbols-outlined {
    color: #ef4444;
}

.score-line.natural .score-label .material-symbols-outlined {
    color: #f97316;
}

.score-line.mixed .score-label .material-symbols-outlined {
    color: #888;
}

.score-line.wild .score-label .material-symbols-outlined {
    color: #8b5cf6;
}

.score-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    color: #22c55e;
    min-width: 80px;
    text-align: right;
}

.score-value.negative {
    color: #ef4444;
}

.canceled-note {
    text-align: center;
    font-size: 0.8rem;
    color: #ef4444;
    font-style: italic;
    margin-bottom: 0.5rem;
    opacity: 0.8;
}

.score-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    border-top: 2px solid rgba(201, 162, 39, 0.3);
    background: rgba(201, 162, 39, 0.1);
    border-radius: 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.score-total.visible {
    opacity: 1;
    transform: translateY(0);
}

.score-total-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-primary, #c9a227);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.score-total-value {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    color: var(--accent-primary, #c9a227);
}

.score-total-value.negative {
    color: #ef4444;
}

@keyframes shakeSubtle {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .score-breakdown-container {
        padding: 1rem;
    }

    .score-breakdown-teams {
        flex-direction: column;
        gap: 1rem;
    }

    .team-breakdown {
        max-width: 100%;
    }

    .score-breakdown-title {
        font-size: 1.4rem;
    }

    .score-label {
        font-size: 0.85rem;
    }

    .score-value {
        font-size: 1rem;
        min-width: 60px;
    }
}

/* ============================================
   Card Face Value Counting Animation
   Shows cards counted into piles of 100
   ============================================ */

.card-count-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.95) 100%);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
}

.card-count-overlay.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

.card-count-container {
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.95), rgba(20, 20, 30, 0.98));
    border: 2px solid rgba(201, 162, 39, 0.3);
    border-radius: 16px;
    padding: 2rem;
    max-width: 900px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.card-count-title {
    text-align: center;
    color: var(--accent-primary, #c9a227);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.card-count-teams {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.card-count-team {
    flex: 1;
    min-width: 300px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: visible;
}

.card-count-team .team-name {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-pile-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 120px;
    margin-bottom: 1rem;
    gap: 1rem;
}

.cards-source {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.source-cards {
    position: relative;
    width: 50px;
    height: 70px;
}

/* Source cards are now real Card elements - just position them */
.source-card {
    transition: all 0.3s ease;
}

/* Using Card.create() with size='mini', no extra styling needed */
.source-card.card {
    /* Override mini size for source cards */
    --card-width: 50px;
    --card-height: 70px;
}

.source-card.fade-out {
    opacity: 0;
    transform: translateX(50px) scale(0.8) !important;
}

/* Flying card for card count animation - uses real Card elements */
.count-flying-card {
    --card-width: 50px;
    --card-height: 70px;
    pointer-events: none;
    will-change: transform, left, top;
}

/* Flying card during dealing animation - uses Card class for proper rendering */
/* Note: Most flying cards now use Card.create() which sets proper .card class */
/* This is a fallback only for legacy animations that don't use Card class */
.flying-card:not(.card) {
    position: absolute;
    width: 50px;
    height: 70px;
    background: linear-gradient(145deg, #ffffff 0%, #fefdfb 50%, #f8f6f2 100%);
    border: 1.5px solid #2a2a2a;
    border-radius: 6px;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    z-index: 100;
    pointer-events: none;
}

.source-label {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.counting-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.hundred-piles {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    width: 100%;
    padding: 0.5rem;
}

.hundred-pile {
    position: relative;
    width: 70px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0) translateY(20px);
    border-radius: 8px;
}

/* Pile cards are real Card elements positioned absolutely */
.hundred-pile .pile-card {
    --card-width: 55px;
    --card-height: 77px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateY(calc(var(--stack-index, 0) * -3px));
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

/* The "100" label below the pile - hidden per user request */
.hundred-pile .pile-label {
    display: none;
}

.hundred-pile.animate-in {
    animation: pileAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pileAppear {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(30px);
    }
    50% {
        opacity: 1;
        transform: scale(1.15) translateY(-8px);
        box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        box-shadow: none;
    }
}

/* Pile counting animation states */
.hundred-pile {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                opacity 0.4s ease,
                filter 0.3s ease;
}

.hundred-pile.counting {
    transform: scale(1.25);
    z-index: 100;
    animation: countingPulse 0.4s ease-out;
    box-shadow:
        0 0 0 4px rgba(255, 215, 0, 0.8),
        0 0 30px rgba(255, 215, 0, 0.7),
        0 0 60px rgba(212, 175, 55, 0.4),
        0 8px 25px rgba(0, 0, 0, 0.3);
}

@keyframes countingPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.35); }
    100% { transform: scale(1.25); }
}

.hundred-pile.counting .pile-card {
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(255, 215, 0, 0.3);
}

.hundred-pile.counted {
    opacity: 0.5;
    transform: scale(0.9);
    filter: grayscale(30%);
}

/* Sequential counting highlight (golden spotlight effect) */
.hundred-pile.counting-highlight,
.counting-highlight {
    box-shadow: 0 0 30px 10px rgba(255, 215, 0, 0.8);
    transform: scale(1.1);
    transition: all 0.3s ease;
    z-index: 100;
}

/* Canasta indicator counting states */
.counter-canasta.counting {
    transform: scale(1.3);
    z-index: 100;
    animation: canastaCountPulse 0.4s ease-out;
    box-shadow:
        0 0 0 3px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.6),
        0 0 40px rgba(212, 175, 55, 0.3);
    filter: brightness(1.4);
}

@keyframes canastaCountPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1.3); }
}

.counter-canasta.counted {
    opacity: 0.6;
    transform: scale(0.95);
    filter: grayscale(20%);
}

@keyframes pileCountPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
    }
    50% {
        box-shadow: 0 0 35px rgba(212, 175, 55, 1), 0 0 60px rgba(212, 175, 55, 0.5);
    }
}

.remainder-pile {
    min-width: 40px;
    height: 40px;
    background: rgba(30, 58, 95, 0.6);
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(201, 162, 39, 0.2);
    backdrop-filter: blur(4px);
}

.remainder-pile.visible {
    opacity: 1;
}

.card-count-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.card-count-total.complete {
    background: rgba(201, 162, 39, 0.2);
    border-color: var(--accent-primary, #c9a227);
    box-shadow: 0 0 20px rgba(201, 162, 39, 0.3);
}

.count-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary, #aaa);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.count-value {
    font-size: 1.8rem;
    font-weight: 800;
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    color: var(--accent-primary, #c9a227);
}

/* Combined totals (canasta + card points) */
.combined-total {
    margin-top: 0.75rem;
    padding: 1rem;
    background: linear-gradient(145deg, rgba(201, 162, 39, 0.15), rgba(201, 162, 39, 0.08));
    border: 2px solid var(--accent-primary, #c9a227);
    border-radius: 12px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    box-shadow: 0 4px 20px rgba(201, 162, 39, 0.2);
}

.combined-total.animate-in {
    animation: combinedTotalReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes combinedTotalReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    60% {
        opacity: 1;
        transform: translateY(-5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.combined-breakdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #aaa);
}

.combined-breakdown .canasta-part,
.combined-breakdown .cards-part {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.combined-breakdown strong {
    color: var(--text-primary, #fff);
    font-weight: 700;
}

.combined-breakdown .plus-sign {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-primary, #c9a227);
}

.combined-value {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #c9a227, #ffd700, #c9a227);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    line-height: 1.2;
}

.combined-label {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.25rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-count-container {
        padding: 1rem;
    }

    .card-count-teams {
        flex-direction: column;
        gap: 1rem;
    }

    .card-count-team {
        max-width: 100%;
    }

    .card-pile-area {
        flex-direction: column;
        gap: 1rem;
    }

    .counting-area {
        min-width: 100%;
    }

    .count-value {
        font-size: 1.5rem;
    }

    .combined-value {
        font-size: 2rem;
    }

    .combined-breakdown {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
}

/* ============================================
   Professional Card Interaction Animations
   ============================================ */

/* Card selection feedback - gold glow pulse */
.card-selected-glow {
    animation: cardSelectGlow 0.3s ease-out forwards;
}

@keyframes cardSelectGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.8);
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(201, 162, 39, 0.6);
    }
    100% {
        box-shadow: 0 0 10px 2px rgba(201, 162, 39, 0.4);
    }
}

/* Card hover lift effect */
.card-hover-lift {
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.15s ease;
}

.card-hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* Error shake animation */
@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake-error {
    animation: errorShake 0.4s ease-out;
}

/* Invalid selection flash */
@keyframes invalidFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8);
        background-color: inherit;
    }
    25% {
        box-shadow: 0 0 15px 3px rgba(239, 68, 68, 0.6);
        background-color: rgba(239, 68, 68, 0.2);
    }
    50% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    75% {
        box-shadow: 0 0 10px 2px rgba(239, 68, 68, 0.3);
    }
    100% {
        box-shadow: none;
        background-color: inherit;
    }
}

.invalid-selection {
    animation: invalidFlash 0.5s ease-out;
}

/* Card wobble for rejected meld */
@keyframes cardWobble {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(-3deg); }
    30% { transform: rotate(3deg); }
    45% { transform: rotate(-2deg); }
    60% { transform: rotate(2deg); }
    75% { transform: rotate(-1deg); }
    90% { transform: rotate(1deg); }
    100% { transform: rotate(0deg); }
}

.card-wobble {
    animation: cardWobble 0.5s ease-out;
}

/* Meld lock-in animation */
@keyframes meldLockIn {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.05);
    }
    60% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

.meld-lock-in {
    animation: meldLockIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Professional pulse for active player indicator */
@keyframes activeTurnPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.4);
        border-color: rgba(201, 162, 39, 0.6);
    }
    50% {
        box-shadow: 0 0 15px 5px rgba(201, 162, 39, 0.2);
        border-color: rgba(201, 162, 39, 1);
    }
}

.active-turn-indicator {
    animation: activeTurnPulse 2s ease-in-out infinite;
}

/* Bot thinking animation - professional version */
@keyframes botThinkingPro {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.bot-thinking-indicator {
    animation: botThinkingPro 1.2s ease-in-out infinite;
}

/* Card settle bounce */
@keyframes cardSettle {
    0% {
        transform: translateY(-10px);
    }
    40% {
        transform: translateY(2px);
    }
    70% {
        transform: translateY(-1px);
    }
    100% {
        transform: translateY(0);
    }
}

.card-settle {
    animation: cardSettle 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Success highlight for completed action */
@keyframes successHighlight {
    0% {
        background-color: transparent;
        box-shadow: none;
    }
    30% {
        background-color: rgba(34, 197, 94, 0.2);
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

.success-highlight {
    animation: successHighlight 0.6s ease-out;
}

/* Smooth fade for UI transitions */
.smooth-fade-in {
    animation: smoothFadeIn 0.2s ease-out forwards;
}

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

.smooth-fade-out {
    animation: smoothFadeOut 0.15s ease-out forwards;
}

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

/* ============================================
   Skeleton Loaders - Loading State Placeholders
   ============================================ */

.skeleton {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.08) 40%,
        rgba(255, 255, 255, 0.08) 60%,
        rgba(255, 255, 255, 0.03) 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md, 8px);
}

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

/* Skeleton variants for different elements */
.skeleton-text {
    height: 1em;
    border-radius: 4px;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-card {
    height: 80px;
    border-radius: var(--radius-lg, 12px);
}

.skeleton-button {
    height: 44px;
    border-radius: var(--radius-md, 8px);
}

/* Gold-tinted skeleton for premium feel */
.skeleton-gold {
    background: linear-gradient(90deg,
        rgba(201, 162, 39, 0.05) 0%,
        rgba(201, 162, 39, 0.12) 40%,
        rgba(201, 162, 39, 0.12) 60%,
        rgba(201, 162, 39, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
}

/* ============================================
   Screen Transition Animations
   ============================================ */

.screen-enter {
    animation: screenEnter 0.4s ease-out forwards;
}

@keyframes screenEnter {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.screen-exit {
    animation: screenExit 0.3s ease-in forwards;
}

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

/* ============================================
   Enhanced Micro-interactions
   ============================================ */

/* Subtle bounce for interactive elements */
.bounce-click:active {
    animation: bounceClick 0.2s ease-out;
}

@keyframes bounceClick {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Glow pulse for attention */
.glow-attention {
    animation: glowAttention 2s ease-in-out infinite;
}

@keyframes glowAttention {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);
    }
    50% {
        box-shadow: 0 0 20px 4px rgba(201, 162, 39, 0.4);
    }
}

/* Magnetic hover - element slightly follows cursor direction */
.magnetic-hover {
    transition: transform 0.2s ease-out;
}

/* Score counting number roll animation */
.number-roll {
    display: inline-block;
    animation: numberRoll 0.3s ease-out;
}

@keyframes numberRoll {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    60% {
        transform: translateY(10%);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Celebratory confetti burst */
.confetti-burst {
    position: relative;
}

.confetti-burst::before,
.confetti-burst::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: confettiBurst 0.6s ease-out forwards;
    pointer-events: none;
}

.confetti-burst::before {
    background: var(--accent-primary, #c9a227);
    top: 50%;
    left: 30%;
}

.confetti-burst::after {
    background: var(--accent-secondary, #e8c547);
    top: 40%;
    left: 70%;
    animation-delay: 0.1s;
}

@keyframes confettiBurst {
    0% {
        transform: scale(0) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(1.5) translateY(-50px);
        opacity: 0;
    }
}

/* ============================================
   Focus Styles - Accessibility with Style
   ============================================ */

/* Beautiful gold focus ring */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.5);
}

/* Focus ring for buttons */
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(201, 162, 39, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Focus ring for inputs */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 0 0 3px rgba(201, 162, 39, 0.4);
}

/* Focus ring for cards and interactive panels */
.game-card:focus-visible,
.video-placeholder:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(201, 162, 39, 0.5),
        0 8px 24px rgba(0, 0, 0, 0.3);
}

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

    .card-hover-lift:hover {
        transform: none;
    }

    .active-turn-indicator,
    .bot-thinking-indicator,
    .skeleton,
    .skeleton-gold,
    .glow-attention {
        animation: none;
    }

    /* Disable fire animations on reduced motion */
    .fire-flame,
    .burning-box {
        animation: none !important;
    }
}

/* Fire Animation - Burning across canasta boxes */
.fire-flame {
    position: absolute;
    bottom: 0;
    width: 20px;
    height: 40px;
    background: linear-gradient(to top,
        #ff4500 0%,
        #ff6b00 20%,
        #ff8c00 40%,
        #ffa500 60%,
        #ffff00 80%,
        transparent 100%
    );
    border-radius: 50% 50% 0 0;
    filter: blur(3px);
    animation: flickerFlame 0.15s infinite alternate;
    pointer-events: none;
    z-index: 1000;
}

@keyframes flickerFlame {
    0% {
        transform: scaleY(1) scaleX(0.9);
        opacity: 0.9;
    }
    25% {
        transform: scaleY(1.1) scaleX(1);
        opacity: 1;
    }
    50% {
        transform: scaleY(0.95) scaleX(0.95);
        opacity: 0.85;
    }
    75% {
        transform: scaleY(1.05) scaleX(1.05);
        opacity: 0.95;
    }
    100% {
        transform: scaleY(1) scaleX(0.9);
        opacity: 0.9;
    }
}

.burning-box {
    position: relative;
    animation: burnGlow 0.3s infinite alternate;
}

@keyframes burnGlow {
    0% {
        box-shadow:
            0 0 10px rgba(255, 69, 0, 0.5),
            0 0 20px rgba(255, 140, 0, 0.3),
            inset 0 0 15px rgba(255, 69, 0, 0.2);
        filter: brightness(1.1);
    }
    100% {
        box-shadow:
            0 0 20px rgba(255, 69, 0, 0.7),
            0 0 40px rgba(255, 140, 0, 0.5),
            inset 0 0 25px rgba(255, 69, 0, 0.4);
        filter: brightness(1.3);
    }
}

/* Intense burning for the right side */
.intense-burn {
    animation: intenseBurn 0.2s infinite alternate;
}

@keyframes intenseBurn {
    0% {
        box-shadow:
            0 0 30px rgba(255, 69, 0, 0.9),
            0 0 60px rgba(255, 140, 0, 0.7),
            inset 0 0 40px rgba(255, 69, 0, 0.6);
        filter: brightness(1.5) saturate(1.3);
    }
    100% {
        box-shadow:
            0 0 50px rgba(255, 69, 0, 1),
            0 0 100px rgba(255, 140, 0, 0.9),
            inset 0 0 60px rgba(255, 69, 0, 0.8);
        filter: brightness(1.8) saturate(1.5);
    }
}

/* ============================================
   Red 3 Penalty Animation
   Shows Red 3 penalties before canasta scoring
   ============================================ */

.red3-penalty-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.4s ease-out forwards;
    background:
        radial-gradient(ellipse 80% 50% at 50% 30%, rgba(220, 38, 38, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.92) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.red3-penalty-overlay.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

.red3-penalty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 3rem;
    background: linear-gradient(135deg,
        rgba(220, 38, 38, 0.1) 0%,
        rgba(127, 29, 29, 0.08) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 60px rgba(220, 38, 38, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.red3-penalty-title {
    font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 600;
    color: #ef4444;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 20px rgba(239, 68, 68, 0.4);
}

.red3-penalty-teams {
    display: flex;
    gap: 3rem;
    margin-bottom: 2rem;
}

.red3-penalty-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 2rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 180px;
}

.red3-penalty-team .team-name {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.red3-cards {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    min-height: 80px;
    align-items: center;
    justify-content: center;
}

.red3-card {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    animation: red3CardAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes red3CardAppear {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.red3-penalty-value {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #ef4444;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
}

.red3-penalty-value[data-value="0"] {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.5);
    text-shadow: none;
}

/* ============================================
   Card Counting Animation (100pt Piles)
   Visual pile-building with face-up cards
   ============================================ */

.card-counting-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.4s ease-out forwards;
    background:
        radial-gradient(ellipse 80% 50% at 50% 30%, rgba(30, 128, 80, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.92) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.card-counting-overlay.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

.card-counting-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 3rem;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    min-width: 600px;
}

.card-counting-title {
    font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent-primary, #c9a227);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Source pile (all cards stacked before counting) */
.source-pile {
    position: relative;
    width: 90px;
    height: 126px;
    margin-bottom: 2rem;
}

.source-pile .card {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease-out;
}

/* 100-point pile containers */
.hundred-piles-area {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    min-height: 160px;
}

.hundred-pile {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.hundred-pile .pile-cards {
    position: relative;
    width: 70px;
    height: 98px;
}

.hundred-pile .pile-cards .card {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center center;
}

/* Stacked card offset for visual effect */
.hundred-pile .pile-cards .card:nth-child(2) { transform: translateY(-2px) rotate(1deg); }
.hundred-pile .pile-cards .card:nth-child(3) { transform: translateY(-4px) rotate(-1deg); }
.hundred-pile .pile-cards .card:nth-child(4) { transform: translateY(-6px) rotate(0.5deg); }
.hundred-pile .pile-cards .card:nth-child(5) { transform: translateY(-8px) rotate(-0.5deg); }
.hundred-pile .pile-cards .card:nth-child(n+6) { transform: translateY(-10px); }

.hundred-pile .pile-total {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary, #c9a227);
    margin-top: 0.75rem;
    min-width: 50px;
    text-align: center;
}

.hundred-pile .pile-total.complete {
    color: #22c55e;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.hundred-pile .pile-total.remainder {
    color: rgba(255, 255, 255, 0.7);
}

/* Card counting total display */
.card-count-total {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ffd700 0%, #c9a227 50%, #ffd700 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    margin-top: 1rem;
}

/* Card fly animation for counting */
.card-fly {
    animation: cardFlyToPile 0.15s ease-out forwards;
}

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

/* ============================================
   Hand Penalties Animation
   Shows remaining cards in player hands
   ============================================ */

.hand-penalties-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.4s ease-out forwards;
    background:
        radial-gradient(ellipse 80% 50% at 50% 30%, rgba(220, 38, 38, 0.1) 0%, transparent 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.92) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.hand-penalties-overlay.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

.hand-penalties-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 3rem;
    background: linear-gradient(135deg,
        rgba(220, 38, 38, 0.08) 0%,
        rgba(127, 29, 29, 0.05) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    min-width: 500px;
}

.hand-penalties-title {
    font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #ef4444;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hand-penalties-players {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
}

.hand-penalty-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 120px;
}

.hand-penalty-player .player-name {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
}

.hand-penalty-player .player-penalty {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.hand-penalty-player .player-penalty[data-value="0"] {
    color: rgba(255, 255, 255, 0.5);
    text-shadow: none;
}

.hand-penalties-total {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #ef4444;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
    margin-top: 1rem;
}

.hand-penalties-teams {
    display: flex;
    gap: 3rem;
    margin-bottom: 1.5rem;
}

.hand-penalty-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 2rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 200px;
}

.hand-penalty-team .team-name {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hand-penalty-total {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 800;
    color: #ef4444;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hand-penalty-total[data-value="0"] {
    color: rgba(255, 255, 255, 0.5);
    text-shadow: none;
}

/* ============================================
   Canasta Collapse Animation
   Gathers all cards into a single pile before counting
   ============================================ */

.canasta-collapse-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.4s ease-out forwards;
    background:
        radial-gradient(ellipse 80% 50% at 50% 30%, rgba(201, 162, 39, 0.1) 0%, transparent 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.92) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.canasta-collapse-overlay.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

.collapse-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 3rem;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.collapse-title {
    font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--accent-primary, #c9a227);
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.collapse-teams {
    display: flex;
    gap: 4rem;
    margin-bottom: 1.5rem;
}

.collapse-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 280px;
}

.collapse-team .team-name {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.collapse-cards-container {
    position: relative;
    width: 300px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scattered-cards {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scatter-card {
    position: absolute;
    opacity: 0;
    animation: scatterCardIn 0.3s ease-out forwards;
}

@keyframes scatterCardIn {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(30px);
    }
    100% {
        opacity: 1;
    }
}

.scattered-cards.collapsing .scatter-card {
    animation: collapseCard 0.5s ease-in forwards;
}

@keyframes collapseCard {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(0) translateY(0) rotate(0deg) scale(0.3) !important;
    }
}

.collapsed-pile {
    position: absolute;
    width: 70px;
    height: 98px;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.collapsed-pile.visible {
    opacity: 1;
    transform: scale(1);
}

.pile-card-back {
    position: absolute;
    width: 70px;
    height: 98px;
    border-radius: 8px;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.15) 0%,
            transparent 40%,
            transparent 60%,
            rgba(255, 255, 255, 0.08) 100%),
        linear-gradient(145deg, #722f37 0%, #5a242c 50%, #4a1c24 100%);
    border: 1.5px solid #3a161c;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.pile-card-back::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1.5px solid rgba(201, 162, 39, 0.4);
    border-radius: 4px;
}

.card-count {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 1rem;
}

/* Idle Player Warning - Heartbeat Animation */
@keyframes heartbeat {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 68, 68, 0.8),
                    0 0 40px rgba(255, 68, 68, 0.6),
                    inset 0 0 20px rgba(255, 68, 68, 0.4);
        transform: scale(1);
        border-color: rgba(255, 68, 68, 0.8);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 68, 68, 1),
                    0 0 60px rgba(255, 68, 68, 0.8),
                    inset 0 0 30px rgba(255, 68, 68, 0.6);
        transform: scale(1.05);
        border-color: rgba(255, 68, 68, 1);
    }
}

.video-container.idle-warning {
    animation: heartbeat 1.5s ease-in-out infinite;
    border: 3px solid rgba(255, 68, 68, 0.8);
}

/* Spinner for waiting modals */
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* ============================================
   Unified Messaging System Styles
   Provides consistent styling for all user messages
   ============================================ */

/* Toast Notifications */
.msg-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100000;
    max-width: 400px;
}

.msg-toast-show {
    opacity: 1;
    transform: translateX(0);
}

.msg-toast-info {
    background: linear-gradient(135deg, #2196F3, #1976D2);
}

.msg-toast-success {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
}

.msg-toast-error {
    background: linear-gradient(135deg, #F44336, #D32F2F);
}

.msg-toast-warning {
    background: linear-gradient(135deg, #FF9800, #F57C00);
}

/* Modal Overlay */
.msg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.msg-overlay.msg-show {
    opacity: 1;
}

.msg-overlay.msg-show .msg-modal {
    transform: scale(1);
    opacity: 1;
}

/* Modal Container */
.msg-modal {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    max-width: 500px;
    width: 100%;
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modal Header */
.msg-header {
    padding: 24px 24px 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.msg-icon {
    font-size: 32px;
    color: #ffffff;
}

.msg-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

/* Modal Body */
.msg-body {
    padding: 24px;
}

.msg-message {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* Modal Footer */
.msg-footer {
    padding: 16px 24px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Buttons */
.msg-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    min-width: 100px;
}

.msg-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.msg-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.msg-btn-primary {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.msg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4);
}

.msg-btn:focus {
    outline: 2px solid rgba(33, 150, 243, 0.5);
    outline-offset: 2px;
}

/* Theme Variants */

/* Theme: Purple (for wild canasta and special features) */
.msg-modal[data-theme="purple"] .msg-btn-primary {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.msg-modal[data-theme="purple"] .msg-btn-primary:hover {
    box-shadow: 0 6px 16px rgba(168, 85, 247, 0.4);
}

.msg-modal[data-theme="purple"] .msg-icon {
    color: #a855f7;
}

/* Theme: Green (for success and confirmations) */
.msg-modal[data-theme="green"] .msg-btn-primary {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.msg-modal[data-theme="green"] .msg-btn-primary:hover {
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

.msg-modal[data-theme="green"] .msg-icon {
    color: #4CAF50;
}

/* Theme: Red (for errors and warnings) */
.msg-modal[data-theme="red"] .msg-btn-primary {
    background: linear-gradient(135deg, #F44336, #D32F2F);
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

.msg-modal[data-theme="red"] .msg-btn-primary:hover {
    box-shadow: 0 6px 16px rgba(244, 67, 54, 0.4);
}

.msg-modal[data-theme="red"] .msg-icon {
    color: #F44336;
}

/* Type-specific icon colors */
.msg-overlay[data-type="info"] .msg-icon {
    color: #2196F3;
}

.msg-overlay[data-type="success"] .msg-icon {
    color: #4CAF50;
}

.msg-overlay[data-type="error"] .msg-icon,
.msg-overlay[data-type="danger"] .msg-icon {
    color: #F44336;
}

.msg-overlay[data-type="warning"] .msg-icon {
    color: #FF9800;
}

.msg-overlay[data-type="question"] .msg-icon {
    color: #a855f7;
}

/* Animation Variants */
.msg-overlay[data-animation="fade"] .msg-modal {
    transform: scale(1);
}

.msg-overlay[data-animation="slide"] .msg-modal {
    transform: translateY(-50px);
}

.msg-overlay[data-animation="slide"].msg-show .msg-modal {
    transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .msg-toast {
        right: 10px;
        left: 10px;
        max-width: none;
    }

    .msg-modal {
        max-width: 100%;
        margin: 0 10px;
    }

    .msg-footer {
        flex-direction: column;
    }

    .msg-btn {
        width: 100%;
    }
}

/* Touch-friendly sizing for mobile */
@media (max-width: 480px) {
    .msg-btn {
        padding: 14px 20px;
        min-height: 44px; /* iOS touch target minimum */
    }

    .msg-header {
        padding: 20px 20px 12px 20px;
    }

    .msg-body {
        padding: 20px;
    }

    .msg-footer {
        padding: 12px 20px 20px 20px;
    }
}
/* =====================================================
   WAITING ROOM - ART DECO GLASSMORPHISM
   Luxury casino aesthetic with frosted glass effects
   ===================================================== */

/* Animated gradient background with subtle movement */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

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

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

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(201, 162, 39, 0.3),
                    0 0 40px rgba(201, 162, 39, 0.1);
    }
    50% {
        box-shadow: 0 0 30px rgba(201, 162, 39, 0.5),
                    0 0 60px rgba(201, 162, 39, 0.2);
    }
}

@keyframes diamond-float {
    0%, 100% { transform: translate(0, 0) rotate(45deg); }
    50% { transform: translate(5px, -5px) rotate(45deg); }
}

/* Main waiting room container - ultra-compact horizontal layout */
.waiting-room {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-2) var(--space-6);
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    justify-content: space-between;
}

/* Rich gradient background with depth */
.waiting-room::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at top, rgba(201, 162, 39, 0.08) 0%, transparent 50%),
        linear-gradient(135deg,
            #0d1f2d 0%,
            #1a3a5c 25%,
            #0d2a3d 50%,
            #1a3a5c 75%,
            #0d1f2d 100%
        );
    background-size: 100% 100%, 400% 400%;
    animation: gradientShift 15s ease infinite;
    z-index: -3;
}

/* Art Deco geometric pattern overlay */
.waiting-room::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 50px, rgba(201, 162, 39, 0.03) 50px, rgba(201, 162, 39, 0.03) 52px),
        repeating-linear-gradient(-45deg, transparent, transparent 50px, rgba(201, 162, 39, 0.03) 50px, rgba(201, 162, 39, 0.03) 52px);
    z-index: -2;
    pointer-events: none;
}

/* Floating card suits decoration */
.waiting-room-content::before {
    content: '♠ ♥ ♦ ♣';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    color: rgba(201, 162, 39, 0.15);
    letter-spacing: 2rem;
    z-index: 0;
    pointer-events: none;
    animation: float 6s ease-in-out infinite;
}

/* Horizontal header - Back | Logo + Room Code | Copy Button */
.room-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
    flex-shrink: 0;
}

.room-header .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: var(--text-sm);
    transition: all var(--transition-base);
    cursor: pointer;
    white-space: nowrap;
}

.room-header .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(201, 162, 39, 0.4);
    transform: translateY(-2px);
}

/* Waiting room content - horizontal layout with all sections */
.waiting-room-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow: hidden;
    justify-content: space-between;
}

/* Compact logo for header - no animation to prevent cutoff */
.waiting-room-logo {
    width: 90px;
    height: auto;
    filter: drop-shadow(0 4px 20px rgba(201, 162, 39, 0.3));
    flex-shrink: 0;
}

/* Room code section - horizontal compact layout with flair */
.room-code-share {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
    position: relative;
}

.room-code-share::before {
    content: '♠';
    position: absolute;
    left: -30px;
    font-size: 1.5rem;
    color: rgba(201, 162, 39, 0.3);
}

.room-code-share::after {
    content: '♣';
    position: absolute;
    right: -30px;
    font-size: 1.5rem;
    color: rgba(201, 162, 39, 0.3);
}

.room-code-share h2 {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    white-space: nowrap;
    margin: 0;
    text-shadow: 0 0 10px rgba(201, 162, 39, 0.5);
}

/* Glassmorphic room code display - make it POP! */
.room-code-large {
    position: relative;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 8px;
    color: var(--accent-primary);

    /* Enhanced glassmorphism effect */
    background: linear-gradient(135deg,
        rgba(201, 162, 39, 0.15) 0%,
        rgba(201, 162, 39, 0.08) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 2px solid rgba(201, 162, 39, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-3) var(--space-6);
    margin: 0;

    box-shadow:
        0 8px 32px rgba(201, 162, 39, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        0 0 20px rgba(201, 162, 39, 0.3);

    transition: all var(--transition-base);
    white-space: nowrap;
    text-shadow: 0 0 20px rgba(201, 162, 39, 0.6);
}

/* Art Deco corner decorations */
.room-code-large::before,
.room-code-large::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--accent-primary);
}

.room-code-large::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.room-code-large::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

.clickable-room-code {
    cursor: pointer;
    user-select: none;
}

.clickable-room-code:hover {
    background: linear-gradient(135deg,
        rgba(201, 162, 39, 0.15) 0%,
        rgba(201, 162, 39, 0.08) 100%
    );
    border-color: rgba(201, 162, 39, 0.4);
    transform: translateY(-2px);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 1px rgba(201, 162, 39, 0.3),
        0 0 30px rgba(201, 162, 39, 0.2);
}

.clickable-room-code:active {
    transform: translateY(0px);
}

/* Hide hint text in compact layout */
.share-hint {
    display: none;
}

/* Compact copy button */
#copy-code-btn {
    position: relative;
    background: linear-gradient(135deg,
        rgba(201, 162, 39, 0.2) 0%,
        rgba(201, 162, 39, 0.1) 100%
    );
    backdrop-filter: blur(10px);
    border: 1px solid rgba(201, 162, 39, 0.3);
    color: var(--accent-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}

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

#copy-code-btn:hover::before {
    left: 100%;
}

#copy-code-btn:hover {
    background: linear-gradient(135deg,
        rgba(201, 162, 39, 0.3) 0%,
        rgba(201, 162, 39, 0.15) 100%
    );
    border-color: rgba(201, 162, 39, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(201, 162, 39, 0.3);
}

/* Ultra-compact waiting status - single horizontal line */
.waiting-status {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 100%
    );
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-4);

    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.waiting-status p {
    color: var(--text-secondary);
    margin: 0;
    font-size: var(--text-base);
}

.player-count {
    font-size: var(--text-lg);
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--accent-primary);
    letter-spacing: 1px;
    margin: 0;
}

/* Compact inline spinner */
.waiting-spinner {
    width: 24px;
    height: 24px;
    margin: 0;
    border: 3px solid rgba(201, 162, 39, 0.2);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite, pulse-glow 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Players section - flex-grow to fill space */
.players-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.players-section h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--accent-primary);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 0 20px rgba(201, 162, 39, 0.5);
    position: relative;
}

.players-section h3::before,
.players-section h3::after {
    content: '♦';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: rgba(201, 162, 39, 0.4);
}

.players-section h3::before {
    left: calc(50% - 150px);
}

.players-section h3::after {
    right: calc(50% - 150px);
}

/* Player slots - 2x2 grid that fills available space */
/* Override main.css flex layout with grid for glassmorphic waiting room */
.waiting-room .player-slots {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    flex: 1;
    align-items: stretch;
}

/* Team groups - glassmorphic with enhanced depth and glow */
.team-group {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 100%
    );
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-2xl);
    padding: var(--space-3);
    position: relative;

    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.05);

    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.team-group:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Team A - Gold glow accent */
.team-group.team-a {
    border-left: 4px solid var(--team-1-color);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.1),
        -4px 0 20px rgba(201, 162, 39, 0.3);
}

.team-group.team-a:hover {
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.15),
        -8px 0 30px rgba(201, 162, 39, 0.5);
}

/* Team B - Crimson glow accent */
.team-group.team-b {
    border-left: 4px solid var(--team-2-color);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.1),
        -4px 0 20px rgba(201, 74, 74, 0.3);
}

.team-group.team-b:hover {
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.15),
        -8px 0 30px rgba(201, 74, 74, 0.5);
}

/* Team label with elegant styling */
.team-label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.team-a .team-label {
    color: var(--team-1-color);
}

.team-b .team-label {
    color: var(--team-2-color);
}

/* Team players container - fills space evenly */
.team-players {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    justify-content: center;
}

/* Individual player slots - larger, more prominent */
.player-slot {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    transition: all var(--transition-base);
    flex: 1;
    justify-content: center;
}

.player-slot:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 100%
    );
    border-color: rgba(255, 255, 255, 0.15);
}

.player-slot.filled {
    background: linear-gradient(135deg,
        rgba(201, 162, 39, 0.1) 0%,
        rgba(201, 162, 39, 0.05) 100%
    );
    border-color: rgba(201, 162, 39, 0.2);
}

.player-slot.filled:hover {
    background: linear-gradient(135deg,
        rgba(201, 162, 39, 0.15) 0%,
        rgba(201, 162, 39, 0.08) 100%
    );
    border-color: rgba(201, 162, 39, 0.3);
}

.player-slot .seat {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.player-slot .name {
    font-size: var(--text-lg);
    color: var(--text-primary);
    font-weight: 700;
}

.player-slot.empty .name {
    color: var(--text-muted);
    font-style: italic;
    opacity: 0.6;
}

/* Add Bot button - make it exciting and inviting */
.btn-add-bot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    margin-top: var(--space-2);

    background: linear-gradient(135deg,
        rgba(34, 197, 94, 0.2) 0%,
        rgba(34, 197, 94, 0.1) 100%
    );
    backdrop-filter: blur(10px);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: var(--radius-lg);

    color: #22c55e;
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-base);

    box-shadow:
        0 2px 8px rgba(34, 197, 94, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-add-bot:hover {
    background: linear-gradient(135deg,
        rgba(34, 197, 94, 0.3) 0%,
        rgba(34, 197, 94, 0.15) 100%
    );
    border-color: rgba(34, 197, 94, 0.5);
    transform: translateY(-2px);
    box-shadow:
        0 4px 16px rgba(34, 197, 94, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-add-bot .material-symbols-outlined {
    font-size: 1.25rem;
}

/* Meld holder badge */
.meld-holder-badge {
    font-size: var(--text-xs);
    color: var(--accent-primary);
    background: rgba(201, 162, 39, 0.15);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    display: inline-block;
    margin-top: var(--space-1);
}

/* Host controls */
.host-controls {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.host-controls .btn-small {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.host-controls .btn-small:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.host-controls .btn-danger {
    border-color: rgba(201, 74, 74, 0.3);
    color: var(--accent-danger);
}

.host-controls .btn-danger:hover {
    background: rgba(201, 74, 74, 0.15);
    border-color: var(--accent-danger);
}

/* Waiting actions - compact footer button group */
.waiting-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0;
}

.waiting-actions .btn-primary,
.waiting-actions .btn-secondary {
    position: relative;
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: 700;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition-base);
    overflow: hidden;
    backdrop-filter: blur(10px);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.waiting-actions .btn-primary {
    background: linear-gradient(135deg,
        rgba(201, 162, 39, 0.95) 0%,
        rgba(201, 162, 39, 0.75) 100%
    );
    border: 2px solid rgba(201, 162, 39, 0.6);
    color: #0d1f2d;
    box-shadow:
        0 8px 32px rgba(201, 162, 39, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        0 0 40px rgba(201, 162, 39, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.waiting-actions .btn-primary .material-symbols-outlined {
    font-size: 1.5rem;
}

.waiting-actions .btn-primary:not(:disabled):hover {
    background: linear-gradient(135deg,
        rgba(232, 197, 71, 1) 0%,
        rgba(201, 162, 39, 0.9) 100%
    );
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 12px 48px rgba(201, 162, 39, 0.7),
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        0 0 60px rgba(201, 162, 39, 0.5);
    animation: pulse-glow 1.5s ease-in-out infinite;
}

.waiting-actions .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: linear-gradient(135deg,
        rgba(201, 162, 39, 0.3) 0%,
        rgba(201, 162, 39, 0.2) 100%
    );
    box-shadow: none;
    color: rgba(13, 31, 45, 0.6);
}

.waiting-actions .btn-secondary {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.waiting-actions .btn-secondary:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 100%
    );
    border-color: rgba(201, 162, 39, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
    .waiting-room {
        max-width: 100%;
        padding: var(--space-3) var(--space-4);
    }

    .waiting-room .player-slots {
        gap: var(--space-4);
    }

    .team-group {
        padding: var(--space-4);
    }
}

@media (max-width: 768px) {
    .waiting-room {
        padding: var(--space-3);
    }

    /* Stack logo and room code vertically on mobile */
    .waiting-room-content > div:first-child {
        flex-direction: column !important;
        gap: var(--space-3) !important;
    }

    .room-code-share {
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
    }

    .waiting-room-logo {
        width: 80px;
    }

    .room-code-large {
        font-size: 1.5rem;
        letter-spacing: 4px;
        padding: var(--space-2) var(--space-4);
    }

    .waiting-room .player-slots {
        grid-template-columns: 1fr !important;
        gap: var(--space-3);
    }

    .waiting-actions {
        flex-direction: column;
        gap: var(--space-3);
    }

    .waiting-actions .btn-primary,
    .waiting-actions .btn-secondary {
        width: 100%;
    }

    .players-section h3 {
        font-size: var(--text-lg);
        margin-bottom: var(--space-3);
    }
}

@media (max-width: 480px) {
    .waiting-room-logo {
        width: 120px;
    }

    .room-code-large {
        font-size: 1.5rem;
        letter-spacing: 4px;
        padding: var(--space-3) var(--space-4);
    }

    .players-section h3 {
        font-size: var(--text-lg);
    }
}

/* Subtle entrance animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.waiting-room-content {
    animation: fadeIn 0.4s ease-out;
}

.players-section {
    animation: fadeIn 0.5s ease-out 0.1s backwards;
}
/* ============== Mobile-First Responsive Styles ============== */

/* Base touch-friendly sizing */
:root {
    --touch-target-min: 44px;
    --card-width-mobile: 50px;
    --card-height-mobile: 75px;
    --card-width-tablet: 55px;
    --card-height-tablet: 82px;
    --card-width-desktop: 60px;
    --card-height-desktop: 90px;
}

/* ============== Priority-Based Responsive Scaling (Tablets/Desktops) ============== */

/* PRIORITY 0: Scoreboard collapses FIRST (before other scaling) */
@media (max-width: 1199px) {
    /* Auto-collapse sidebar on smaller screens */
    .game-sidebar {
        transform: translateX(100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* When expanded via toggle button */
    .game-sidebar:not(.collapsed) {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* Move pull-tab to right edge when sidebar is collapsed */
    .sidebar-pull-tab {
        right: 0 !important; /* Override the default 268px */
        z-index: 250; /* Higher than sidebar (200) to ensure always on top */
    }

    /* Adjust arrow direction when sidebar state changes */
    .game-sidebar.collapsed .sidebar-pull-tab::after {
        content: "◀"; /* Left arrow when collapsed */
    }

    .game-sidebar:not(.collapsed) .sidebar-pull-tab::after {
        content: "▶"; /* Right arrow when open */
    }
}

/* Desktop (1920px+): Full size, no scaling */
@media (min-width: 1920px) {
    :root {
        --draw-pile-width: var(--draw-pile-width-max);
        --draw-pile-height: var(--draw-pile-height-max);
        --discard-pile-width: var(--discard-pile-width-max);
        --discard-pile-height: var(--discard-pile-height-max);
        --canasta-height: var(--canasta-height-max);
        --video-width: var(--video-width-max);
        --video-height: var(--video-height-max);
        --hand-card-width: var(--hand-card-width-max);
        --hand-card-height: var(--hand-card-height-max);
    }
}

/* Large Laptop (1366px-1919px): Slight canasta scaling (Priority 2) */
@media (min-width: 1366px) and (max-width: 1919px) {
    :root {
        --draw-pile-width: var(--draw-pile-width-max);
        --draw-pile-height: var(--draw-pile-height-max);
        --discard-pile-width: var(--discard-pile-width-max);
        --discard-pile-height: var(--discard-pile-height-max);
        --canasta-height: clamp(180px, 18vh, 220px);
        --video-width: var(--video-width-max);
        --video-height: var(--video-height-max);
        --hand-card-width: var(--hand-card-width-max);
        --hand-card-height: var(--hand-card-height-max);
    }
}

/* Medium Laptop (1100px-1365px): PRIORITY 1 - Draw/discard piles scale FIRST (match hand cards) */
@media (min-width: 1100px) and (max-width: 1365px) {
    :root {
        --draw-pile-width: clamp(var(--draw-pile-width-min), 6.5vw, var(--draw-pile-width-max));
        --draw-pile-height: clamp(var(--draw-pile-height-min), 9.5vw, var(--draw-pile-height-max));
        --discard-pile-width: clamp(var(--discard-pile-width-min), 6.5vw, var(--discard-pile-width-max));
        --discard-pile-height: clamp(var(--discard-pile-height-min), 9.5vw, var(--discard-pile-height-max));
    }
}

/* Tablet (1024px-1099px): Canasta + video scaled (Priority 2 & 3) + Piles match hand cards */
@media (min-width: 1024px) and (max-width: 1099px) {
    :root {
        --draw-pile-width: var(--hand-card-width-max);
        --draw-pile-height: var(--hand-card-height-max);
        --discard-pile-width: var(--hand-card-width-max);
        --discard-pile-height: var(--hand-card-height-max);
        --canasta-height: clamp(140px, 15vh, 180px);
        --video-width: clamp(160px, 18vw, 180px);
        --video-height: clamp(110px, 12vw, 123px);
        --hand-card-width: var(--hand-card-width-max);
        --hand-card-height: var(--hand-card-height-max);
        --meld-card-width: clamp(var(--meld-card-width-min), 6vw, 64px);
        --meld-card-height: clamp(var(--meld-card-height-min), 9vw, 91px);
        --meld-card-wrapper-height: clamp(var(--meld-card-wrapper-height-min), 10vw, 101px);
    }
}

/* Small Tablet (900px-1023px): Piles match hand cards, videos at minimum but horizontal */
@media (min-width: 900px) and (max-width: 1023px) {
    :root {
        --draw-pile-width: clamp(var(--hand-card-width-min), 6vw, 62px);
        --draw-pile-height: clamp(var(--hand-card-height-min), 9vw, 93px);
        --discard-pile-width: clamp(var(--hand-card-width-min), 6vw, 62px);
        --discard-pile-height: clamp(var(--hand-card-height-min), 9vw, 93px);
        --canasta-height: 140px;
        --video-width: var(--video-width-min);
        --video-height: var(--video-height-min);
        --hand-card-width: clamp(var(--hand-card-width-min), 6vw, 62px);
        --hand-card-height: clamp(var(--hand-card-height-min), 9vw, 93px);
        --meld-card-width: clamp(var(--meld-card-width-min), 5.7vw, 60px);
        --meld-card-height: clamp(var(--meld-card-height-min), 8.5vw, 87px);
        --meld-card-wrapper-height: clamp(var(--meld-card-wrapper-height-min), 9.5vw, 97px);
    }

    /* Videos stay horizontal at this breakpoint */
    .pile-label {
        font-size: 0.6rem; /* Scale down with smaller piles */
    }

    /* Increase hand padding to prevent card hover cutoff */
    .player-hand {
        padding-top: 30px; /* Extra clearance for -15px hover */
        padding-bottom: 20px; /* Bottom clearance to prevent cutoff */
    }
}

/* Tablet (800px-899px): Stack videos vertically, piles match hand cards */
@media (min-width: 800px) and (max-width: 899px) {
    :root {
        --draw-pile-width: clamp(var(--hand-card-width-min), 5.5vw, 58px);
        --draw-pile-height: clamp(var(--hand-card-height-min), 8vw, 87px);
        --discard-pile-width: clamp(var(--hand-card-width-min), 5.5vw, 58px);
        --discard-pile-height: clamp(var(--hand-card-height-min), 8vw, 87px);
        --canasta-height: var(--canasta-height-min);
        --video-width: var(--video-width-min);
        --video-height: var(--video-height-min);
        --hand-card-width: clamp(var(--hand-card-width-min), 5.5vw, 58px);
        --hand-card-height: clamp(var(--hand-card-height-min), 8vw, 87px);
        --meld-card-width: clamp(var(--meld-card-width-min), 5.3vw, 56px);
        --meld-card-height: clamp(var(--meld-card-height-min), 7.8vw, 84px);
        --meld-card-wrapper-height: clamp(var(--meld-card-wrapper-height-min), 8.8vw, 94px);
    }

    /* Stack video boxes vertically while keeping teams on opposite sides */
    .video-piles-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto;
        gap: 12px;
        width: 100%;
        align-items: center;
        justify-items: center;
    }

    /* Team B videos (left side) - stack vertically in first column */
    .team-video-section:first-child {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .team-video-section:first-child .team-videos {
        flex-direction: column;
        gap: 10px;
    }

    /* Pile container in center column */
    .pile-container {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    /* Team A videos (right side) - stack vertically in third column */
    .team-video-section:last-child {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .team-video-section:last-child .team-videos {
        flex-direction: column;
        gap: 10px;
    }

    /* Prevent horizontal overflow of video sections */
    .team-video-section {
        max-width: var(--video-width);
    }

    /* Fix text spacing when videos are stacked vertically */
    .video-player-info {
        bottom: -8px; /* Changed from -18px: 10px gap + 8px offset = 18px total clearance */
        font-size: 0.6rem;
        padding: 2px 8px;
    }

    .video-player-name {
        font-size: 0.65rem; /* Slightly smaller for compact layout */
        top: 4px;
    }

    .pile-label {
        font-size: 0.58rem; /* Scale down with smaller piles */
    }

    /* Increase hand padding to prevent card hover cutoff */
    .player-hand {
        padding-top: 35px; /* Extra clearance for -15px hover in compact layout */
        padding-bottom: 20px; /* Bottom clearance to prevent cutoff */
    }
}

/* Mobile/Tablet (768px-799px): Videos stacked, all cards at same minimum size */
@media (min-width: 768px) and (max-width: 799px) {
    :root {
        --draw-pile-width: var(--hand-card-width-min);
        --draw-pile-height: var(--hand-card-height-min);
        --discard-pile-width: var(--hand-card-width-min);
        --discard-pile-height: var(--hand-card-height-min);
        --canasta-height: var(--canasta-height-min);
        --video-width: var(--video-width-min);
        --video-height: var(--video-height-min);
        --hand-card-width: var(--hand-card-width-min);
        --hand-card-height: var(--hand-card-height-min);
        --meld-card-width: var(--meld-card-width-min);
        --meld-card-height: var(--meld-card-height-min);
        --meld-card-wrapper-height: var(--meld-card-wrapper-height-min);
    }

    /* Stack video boxes vertically */
    .video-piles-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
        width: 100%;
    }

    .team-video-section:first-child {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .team-video-section:first-child .team-videos {
        flex-direction: column;
        gap: 8px;
    }

    .pile-container {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .team-video-section:last-child {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .team-video-section:last-child .team-videos {
        flex-direction: column;
        gap: 8px;
    }

    /* Prevent horizontal overflow of video sections */
    .team-video-section {
        max-width: var(--video-width);
    }

    /* Fix text spacing when videos are stacked vertically */
    .video-player-info {
        bottom: -6px; /* Changed from -16px: 8px gap + 6px offset = 14px total clearance */
        font-size: 0.58rem;
        padding: 2px 7px;
    }

    .video-player-name {
        font-size: 0.62rem;
        top: 3px;
    }

    .pile-label {
        font-size: 0.55rem;
    }

    /* Increase hand padding to prevent card hover cutoff */
    .player-hand {
        padding-top: 35px; /* Extra clearance for hover */
        padding-bottom: 20px; /* Bottom clearance to prevent cutoff */
    }
}

/* Phone (481px-767px): Everything at same minimum size + scrolling fallback */
@media (min-width: 481px) and (max-width: 767px) {
    :root {
        --draw-pile-width: var(--hand-card-width-min);
        --draw-pile-height: var(--hand-card-height-min);
        --discard-pile-width: var(--hand-card-width-min);
        --discard-pile-height: var(--hand-card-height-min);
        --canasta-height: var(--canasta-height-min);
        --video-width: var(--video-width-min);
        --video-height: var(--video-height-min);
        --hand-card-width: var(--hand-card-width-min);
        --hand-card-height: var(--hand-card-height-min);
        --meld-card-width: var(--meld-card-width-min);
        --meld-card-height: var(--meld-card-height-min);
        --meld-card-wrapper-height: var(--meld-card-wrapper-height-min);
    }

    /* Stack video boxes vertically with piles in center */
    .video-piles-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto;
        gap: 8px;
        width: 100%;
    }

    .team-video-section:first-child {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .team-video-section:first-child .team-videos {
        flex-direction: column;
        gap: 6px;
    }

    .pile-container {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .team-video-section:last-child {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .team-video-section:last-child .team-videos {
        flex-direction: column;
        gap: 6px;
    }

    /* Prevent horizontal overflow of video sections */
    .team-video-section {
        max-width: var(--video-width);
    }

    /* Fix text spacing for tight vertical stacking */
    .video-player-info {
        bottom: -4px; /* Changed from -14px: 6px gap + 4px offset = 10px total clearance */
        font-size: 0.55rem;
        padding: 2px 6px;
    }

    .video-player-name {
        font-size: 0.6rem;
        top: 3px;
    }

    .pile-label {
        font-size: 0.55rem;
    }

    /* Enable horizontal scrolling for hand cards */
    .player-hand {
        padding-top: 30px; /* Extra clearance for -10px hover */
        padding-bottom: 18px; /* Bottom clearance for mobile - slightly less than desktop */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    .hand-card {
        scroll-snap-align: start;
    }

    /* Enable scrolling for canasta areas if needed */
    .canastas-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
}

/* ============== Extra Small Devices (phones, < 480px) ============== */

@media (max-width: 480px) {
    :root {
        --font-size-2xl: 1.5rem;
        --font-size-xl: 1.125rem;
        --font-size-lg: 1rem;
        --font-size-md: 0.875rem;
        --font-size-sm: 0.75rem;
        --spacing-lg: 0.875rem;
        --spacing-xl: 1.25rem;

        /* Extreme scaling - all cards same minimum size */
        --draw-pile-width: var(--hand-card-width-min);
        --draw-pile-height: var(--hand-card-height-min);
        --discard-pile-width: var(--hand-card-width-min);
        --discard-pile-height: var(--hand-card-height-min);
        --canasta-height: var(--canasta-height-min);
        --video-width: var(--video-width-min);
        --video-height: var(--video-height-min);
        --hand-card-width: var(--hand-card-width-min);
        --hand-card-height: var(--hand-card-height-min);
        --meld-card-width: var(--meld-card-width-min);
        --meld-card-height: var(--meld-card-height-min);
        --meld-card-wrapper-height: var(--meld-card-wrapper-height-min);
    }

    /* Stack video boxes vertically with piles in center */
    .video-piles-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto;
        gap: 6px;
        width: 100%;
    }

    .team-video-section:first-child {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .team-video-section:first-child .team-videos {
        flex-direction: column;
        gap: 5px;
    }

    .pile-container {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .team-video-section:last-child {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .team-video-section:last-child .team-videos {
        flex-direction: column;
        gap: 5px;
    }

    /* Prevent horizontal overflow of video sections */
    .team-video-section {
        max-width: var(--video-width);
    }

    /* Fix text spacing for extremely tight vertical stacking */
    .video-player-info {
        bottom: -3px; /* Changed from -12px: 5px gap + 3px offset = 8px total clearance */
        font-size: 0.52rem;
        padding: 1px 5px;
    }

    .video-player-name {
        font-size: 0.58rem;
        top: 2px;
    }

    .pile-label {
        font-size: 0.52rem;
    }

    /* Cards - smaller on mobile */
    .card {
        width: var(--card-width-mobile);
        height: var(--card-height-mobile);
        margin-left: -25px;
    }

    .card:first-child {
        margin-left: 0;
    }

    .card .rank {
        font-size: var(--font-size-md);
    }

    .card .suit-symbol {
        font-size: var(--font-size-lg);
    }

    /* Player hand - scrollable on small screens */
    .player-hand {
        max-width: 100vw;
        overflow-x: auto;
        padding: 30px var(--spacing-sm) 16px; /* Top padding for hover, bottom padding to prevent cutoff */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .player-hand::-webkit-scrollbar {
        display: none;
    }

    /* Action panel - full width */
    .action-panel {
        left: 0;
        right: 0;
        transform: none;
        padding: var(--spacing-sm);
    }

    .action-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .action-buttons button {
        flex: 1 1 45%;
        min-width: 100px;
    }

    /* HUD - compact */
    .game-hud {
        flex-wrap: wrap;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .scores {
        gap: var(--spacing-md);
    }

    .team-score .score {
        font-size: var(--font-size-lg);
    }

    /* Discard pile - smaller */
    .empty-pile {
        width: var(--card-width-mobile);
        height: var(--card-height-mobile);
    }

    /* Canastas display - collapsible */
    .melds-display {
        position: fixed;
        top: auto;
        bottom: 160px;
        left: var(--spacing-xs);
        right: var(--spacing-xs);
        max-width: none;
        background: rgba(13, 40, 24, 0.95);
        padding: var(--spacing-sm);
        border-radius: 8px;
        max-height: 100px;
        overflow-y: auto;
    }

    /* Lobby - stacked layout */
    .join-section {
        flex-direction: column;
        align-items: center;
    }

    .join-section input {
        width: 100%;
        max-width: 200px;
    }

    .join-section button {
        width: 100%;
        max-width: 200px;
    }

    /* Team icon grid - fewer columns on mobile */
    .icon-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .icon-btn {
        font-size: 1.25rem;
    }

    /* Room code display */
    .room-code-display .code {
        font-size: var(--font-size-xl);
        letter-spacing: 3px;
    }

    /* Player slots - 1 column */
    .player-slots {
        grid-template-columns: 1fr;
    }

    /* Modal - full screen on mobile */
    .modal-content {
        margin: var(--spacing-md);
        padding: var(--spacing-lg);
        max-width: calc(100vw - 2 * var(--spacing-md));
        max-height: calc(100vh - 2 * var(--spacing-md));
        overflow-y: auto;
    }

    /* Create game modal - ensure buttons visible */
    .create-game-modal {
        max-width: calc(100vw - 2rem);
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
        padding: 1rem;
    }

    .create-game-modal .modal-content {
        padding: 1rem;
    }

    /* Reduce spacing in create game form */
    .team-customization {
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    .game-mode-options {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .game-mode-option {
        padding: 0.75rem;
    }

    /* Ensure buttons are always visible */
    .modal-actions {
        position: sticky;
        bottom: 0;
        background: var(--surface-primary);
        padding-top: 1rem;
        margin-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Auth forms */
    #auth-forms {
        padding: var(--spacing-md);
    }

    /* Scoreboard toggle - always accessible on mobile */
    .sidebar-pull-tab {
        right: 0 !important;
        width: 32px;
        height: 80px;
        font-size: 1.5rem;
        bottom: 50%;
        transform: translateY(50%);
    }

    /* When sidebar is open on mobile, add backdrop */
    .game-sidebar:not(.collapsed) {
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    }

    /* Ensure sidebar doesn't push content when open */
    .game-layout {
        overflow-x: hidden;
    }
}

/* ============== Small Devices (large phones, 481-768px) ============== */

@media (min-width: 481px) and (max-width: 768px) {
    :root {
        --font-size-2xl: 1.75rem;
        --font-size-xl: 1.25rem;
    }

    .card {
        width: var(--card-width-tablet);
        height: var(--card-height-tablet);
        margin-left: -22px;
    }

    .player-hand {
        bottom: 15px;
    }

    .action-panel {
        bottom: 140px;
    }

    .player-slots {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Create game modal - smaller screens */
    .create-game-modal {
        max-width: calc(100vw - 3rem);
        max-height: calc(100vh - 6rem);
    }

    .modal-content {
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
    }

    /* Scoreboard toggle - accessible on large phones */
    .sidebar-pull-tab {
        right: 0 !important;
        width: 30px;
        height: 75px;
        font-size: 1.3rem;
        bottom: 50%;
        transform: translateY(50%);
    }

    /* When sidebar is open, add shadow for depth */
    .game-sidebar:not(.collapsed) {
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    }
}

/* ============== Medium Devices (tablets, 769-1024px) ============== */

@media (min-width: 769px) and (max-width: 1024px) {
    .card {
        width: var(--card-width-desktop);
        height: var(--card-height-desktop);
    }

    .game-hud {
        padding: var(--spacing-md);
    }

    .melds-display {
        max-width: 250px;
    }

    /* Ensure sidebar toggle is accessible on tablets */
    .sidebar-pull-tab {
        right: 0 !important;
        width: 28px;
        height: 70px;
        font-size: 1.2rem;
    }
}

/* ============== Large Devices (desktops, 1025px+) ============== */

@media (min-width: 1025px) {
    .card:hover {
        transform: translateY(-15px) scale(1.05);
    }

    /* Larger touch targets not needed */
    button {
        min-height: auto;
        min-width: auto;
    }

    .melds-display {
        max-width: 300px;
    }
}

/* ============== Landscape Mobile ============== */

@media (max-height: 500px) and (orientation: landscape) {
    .player-hand {
        bottom: 10px;
    }

    .action-panel {
        bottom: 100px;
    }

    .game-hud {
        padding: var(--spacing-xs) var(--spacing-md);
    }

    .melds-display {
        top: 50px;
        max-height: 80px;
    }

    .card {
        width: 45px;
        height: 67px;
        margin-left: -20px;
    }
}

/* ============== Touch Device Specific ============== */

@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
    }

    .form-group input {
        min-height: var(--touch-target-min);
        font-size: 16px; /* Prevents iOS zoom */
    }

    .card {
        cursor: default;
    }

    /* Disable hover effects */
    .card:hover {
        transform: translateY(-10px);
    }

    /* Add active states instead */
    .card:active {
        transform: translateY(-20px) scale(1.05);
        transition: transform 0.1s ease;
    }

    /* Scrollable hand with momentum */
    .player-hand {
        scroll-snap-type: x mandatory;
    }

    .player-hand .card {
        scroll-snap-align: center;
    }

    /* Larger tap areas for game actions */
    .discard-pile {
        padding: var(--spacing-md);
    }

    /* Bottom navigation safe area */
    .player-hand {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* ============== High DPI Displays ============== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card {
        box-shadow: 0 1px 4px var(--card-shadow);
    }
}

/* ============== Dark Mode Preference ============== */

@media (prefers-color-scheme: dark) {
    /* Already using dark theme, but could add variations */
    :root {
        --bg-primary: #1a472a;
        --bg-secondary: #0d2818;
    }
}

/* ============== Orientation Changes ============== */

@media screen and (orientation: portrait) {
    .game-table {
        flex-direction: column;
    }
}

@media screen and (orientation: landscape) {
    .game-table {
        flex-direction: row;
    }
}

/* ============== Safe Area Insets (Notch devices) ============== */

@supports (padding: max(0px)) {
    .game-hud {
        padding-left: max(var(--spacing-md), env(safe-area-inset-left));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right));
        padding-top: max(var(--spacing-sm), env(safe-area-inset-top));
    }

    .player-hand {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .action-panel {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* ============== Print Styles ============== */

@media print {
    .game-hud,
    .action-panel,
    .modal {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .card {
        border: 1px solid #ccc;
        box-shadow: none;
    }
}

/* ============== Accessibility: Focus Visible ============== */

@media (hover: hover) {
    button:focus-visible,
    .card:focus-visible,
    input:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 2px;
    }
}

/* ============== Game Table Layout Adjustments ============== */

/* Opponent positions for different screen sizes */
.opponent-area {
    position: absolute;
}

.opponent-top {
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
}

.opponent-left {
    top: 50%;
    left: 10px;
    transform: translateY(-50%) rotate(90deg);
}

.opponent-right {
    top: 50%;
    right: 10px;
    transform: translateY(-50%) rotate(-90deg);
}

@media (max-width: 768px) {
    .opponent-left,
    .opponent-right {
        display: none; /* Hide side opponents on narrow screens */
    }

    .opponents-compact {
        display: flex;
        justify-content: space-around;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
    }
}

/* ============== Card Overlap Adjustments ============== */

@media (max-width: 600px) {
    /* More overlap on smaller screens */
    .card { margin-left: -30px; }
    .card:first-child { margin-left: 0; }
}

@media (min-width: 601px) and (max-width: 900px) {
    .card { margin-left: -25px; }
    .card:first-child { margin-left: 0; }
}

@media (min-width: 901px) {
    .card { margin-left: -20px; }
    .card:first-child { margin-left: 0; }
}

/* ============================================
   Hidden Canasta Tracker Responsive Scaling
   ============================================ */

/* Medium screens (900px-1099px): Slightly reduce padding */
@media (max-width: 1099px) {
    .hidden-canasta-tracker-row {
        padding: 0 10px 0 90px;
        margin: 25px var(--space-3) 0 var(--space-3);
    }

    .hidden-canasta-compact {
        padding: 6px;
    }
}

/* Tablet (768px-899px): Further reduce size */
@media (max-width: 899px) {
    .hidden-card-stack-compact {
        width: 35px;
        height: 52px;
    }

    .hidden-top-card {
        font-size: 1.3rem;
    }

    .hidden-title-compact {
        font-size: 0.6rem;
    }

    .hidden-points-compact {
        font-size: 0.65rem;
    }
}

/* Mobile (< 768px): Minimal size */
@media (max-width: 767px) {
    .hidden-canasta-tracker-row {
        padding: 0 8px 0 80px;
        margin: 23px var(--space-2) 0 var(--space-2);
    }

    .hidden-card-stack-compact {
        width: 30px;
        height: 45px;
    }

    .hidden-top-card {
        font-size: 1.1rem;
    }

    .hidden-canasta-visual-compact {
        gap: 6px;
    }

    .hidden-title-compact {
        font-size: 0.55rem;
    }

    .hidden-points-compact {
        font-size: 0.6rem;
    }

    .hidden-hint-compact {
        font-size: 0.5rem;
    }

    .play-hidden-compact-btn {
        font-size: 0.55rem;
        padding: 2px 5px;
    }
}

.google-signin[data-v-01ffe6f6] {
  position: relative;
  width: 100%;
  min-height: 44px;
}
#google-signin-button[data-v-01ffe6f6] {
  width: 100%;
  display: flex;
  justify-content: center;
}
#google-signin-button.is-loading[data-v-01ffe6f6] {
  opacity: 0.5;
  pointer-events: none;
}
.loading-overlay[data-v-01ffe6f6] {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 4px;
  font-size: 0.875rem;
  z-index: 10;
}
.google-disabled[data-v-01ffe6f6] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--bg-secondary, #f3f4f6);
  border-radius: 8px;
  color: var(--text-secondary, #6b7280);
  font-size: 0.875rem;
}
.google-disabled .material-symbols-outlined[data-v-01ffe6f6] {
  font-size: 1.25rem;
}

.link-account-content[data-v-d500b201] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.info-box[data-v-d500b201] {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
}
.info-box .material-symbols-outlined[data-v-d500b201] {
  color: #60a5fa;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.info-box p[data-v-d500b201] {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.info-box strong[data-v-d500b201] {
  color: #60a5fa;
}
.link-form[data-v-d500b201] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form-group[data-v-d500b201] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-group label[data-v-d500b201] {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-group input[data-v-d500b201] {
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  transition: all 0.2s;
}
.form-group input[data-v-d500b201]:focus {
  outline: none;
  border-color: rgba(232, 197, 71, 0.5);
  background: rgba(255, 255, 255, 0.08);
}
.form-group input[data-v-d500b201]::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.form-group input[data-v-d500b201]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.error-message[data-v-d500b201] {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.875rem;
}
.button-row[data-v-d500b201] {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.btn-primary[data-v-d500b201],
.btn-secondary[data-v-d500b201] {
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
}
.btn-primary[data-v-d500b201] {
  background: linear-gradient(135deg, #e8c547 0%, #d4af37 100%);
  color: #0d1f2d;
}
.btn-primary[data-v-d500b201]:hover:not(:disabled) {
  background: linear-gradient(135deg, #f0d060 0%, #e0bf47 100%);
}
.btn-primary[data-v-d500b201]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-secondary[data-v-d500b201] {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-secondary[data-v-d500b201]:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}
.btn-secondary[data-v-d500b201]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.loading-spinner[data-v-d500b201] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(13, 31, 45, 0.3);
  border-top-color: #0d1f2d;
  border-radius: 50%;
  animation: spin-d500b201 0.6s linear infinite;
}
@keyframes spin-d500b201 {
to {
    transform: rotate(360deg);
}
}
@media (max-width: 480px) {
.button-row[data-v-d500b201] {
    flex-direction: column-reverse;
}
.btn-primary[data-v-d500b201],
  .btn-secondary[data-v-d500b201] {
    width: 100%;
    justify-content: center;
}
}

.error-text[data-v-cc36a251] {
  display: block;
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}
.error-message[data-v-cc36a251] {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 0.75rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
button[data-v-cc36a251]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.divider[data-v-cc36a251] {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1rem 0;
}
.divider[data-v-cc36a251]::before,
.divider[data-v-cc36a251]::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.divider span[data-v-cc36a251] {
  padding: 0 0.75rem;
  color: var(--text-secondary, rgba(255, 255, 255, 0.5));
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.error-text[data-v-ab889953] {
  display: block;
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}
.error-message[data-v-ab889953] {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 0.75rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
button[data-v-ab889953]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.recent-games-list[data-v-1cb3bbd7] {
  padding: 0;
}

/* Loading State */
.list-loading[data-v-1cb3bbd7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.7);
}
.list-loading .spinning[data-v-1cb3bbd7] {
  font-size: 2rem;
  color: #e8c547;
  animation: spin-1cb3bbd7 1s linear infinite;
}
@keyframes spin-1cb3bbd7 {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}

/* Empty State */
.list-empty[data-v-1cb3bbd7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}
.empty-icon[data-v-1cb3bbd7] {
  font-size: 3rem;
  color: rgba(232, 197, 71, 0.4);
  margin-bottom: 1rem;
}
.empty-title[data-v-1cb3bbd7] {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 0.5rem 0;
}
.empty-hint[data-v-1cb3bbd7] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* Games Grid - More compact for better fit */
.games-grid[data-v-1cb3bbd7] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

/* Game Card - Compact version */
.game-card[data-v-1cb3bbd7] {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.875rem;
  cursor: pointer;
  transition: all 0.25s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.game-card[data-v-1cb3bbd7]:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(232, 197, 71, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.game-card.resumable[data-v-1cb3bbd7] {
  border-left: 3px solid #4ade80;
}

/* Card Header - Compact */
.game-card-header[data-v-1cb3bbd7] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.625rem;
  gap: 0.5rem;
  min-width: 0;
}
.room-code[data-v-1cb3bbd7] {
  font-size: 1rem;
  font-weight: 700;
  color: #e8c547;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.status-badge[data-v-1cb3bbd7] {
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap;
}
.status-badge.waiting[data-v-1cb3bbd7] {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}
.status-badge.in_progress[data-v-1cb3bbd7] {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}
.status-badge.paused[data-v-1cb3bbd7] {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

/* Scores - Compact */
.game-scores[data-v-1cb3bbd7] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  min-width: 0;
}
.team-score[data-v-1cb3bbd7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
  max-width: 45%;
}
.team-score .team-name[data-v-1cb3bbd7] {
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.team-score .score[data-v-1cb3bbd7] {
  font-size: 0.9375rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}
.team-score.winner .score[data-v-1cb3bbd7] {
  color: #4ade80;
}
.vs[data-v-1cb3bbd7] {
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  flex-shrink: 0;
}

/* Meta Info - Compact */
.game-meta[data-v-1cb3bbd7] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.625rem;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.6);
  gap: 0.375rem;
  min-width: 0;
  flex-wrap: wrap;
}
.player-info[data-v-1cb3bbd7] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.player-info .material-symbols-outlined[data-v-1cb3bbd7] {
  font-size: 0.875rem;
  color: rgba(232, 197, 71, 0.6);
}
.time-info[data-v-1cb3bbd7] {
  font-style: italic;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Games Header */
.games-header[data-v-1cb3bbd7] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
}
.games-count[data-v-1cb3bbd7] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}
.delete-all-btn[data-v-1cb3bbd7] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 8px;
  color: #ef4444;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.delete-all-btn[data-v-1cb3bbd7]:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
}
.delete-all-btn .material-symbols-outlined[data-v-1cb3bbd7] {
  font-size: 1rem;
}

/* Game Actions - Compact */
.game-actions[data-v-1cb3bbd7] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.375rem;
}
.resume-btn[data-v-1cb3bbd7] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  border: none;
  border-radius: 6px;
  color: #0a0a0a;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.resume-btn[data-v-1cb3bbd7]:hover {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  transform: scale(1.02);
}
.resume-btn .material-symbols-outlined[data-v-1cb3bbd7] {
  font-size: 0.875rem;
}
.delete-btn[data-v-1cb3bbd7] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  color: rgba(239, 68, 68, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
}
.delete-btn[data-v-1cb3bbd7]:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
}
.delete-btn .material-symbols-outlined[data-v-1cb3bbd7] {
  font-size: 0.9375rem;
}

.history-list[data-v-3b914fd3] {
  padding: 1rem 0;
}

/* Loading State */
.list-loading[data-v-3b914fd3] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.7);
}
.list-loading .spinning[data-v-3b914fd3] {
  font-size: 2rem;
  color: #e8c547;
  animation: spin-3b914fd3 1s linear infinite;
}
@keyframes spin-3b914fd3 {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}

/* Empty State */
.list-empty[data-v-3b914fd3] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}
.empty-icon[data-v-3b914fd3] {
  font-size: 3rem;
  color: rgba(232, 197, 71, 0.4);
  margin-bottom: 1rem;
}
.empty-title[data-v-3b914fd3] {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 0.5rem 0;
}
.empty-hint[data-v-3b914fd3] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* Games List */
.games-list[data-v-3b914fd3] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* History Row */
.history-row[data-v-3b914fd3] {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
}
.history-row[data-v-3b914fd3]:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(232, 197, 71, 0.2);
}
.row-main[data-v-3b914fd3] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 1rem;
  min-width: 0;
}
.game-info[data-v-3b914fd3] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
}
.room-code[data-v-3b914fd3] {
  font-size: 1rem;
  font-weight: 700;
  color: #e8c547;
  letter-spacing: 0.1em;
}
.game-date[data-v-3b914fd3] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
.game-result[data-v-3b914fd3] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  min-width: 0;
  flex-shrink: 1;
}
.final-score[data-v-3b914fd3] {
  font-size: 1.125rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}
.winner-badge[data-v-3b914fd3] {
  font-size: 0.7rem;
  font-weight: 600;
  color: #4ade80;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tie-badge[data-v-3b914fd3] {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.row-meta[data-v-3b914fd3] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  gap: 1rem;
}
.days-ago[data-v-3b914fd3] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}
.view-details[data-v-3b914fd3] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: rgba(232, 197, 71, 0.7);
  transition: color 0.2s ease;
}
.history-row:hover .view-details[data-v-3b914fd3] {
  color: #e8c547;
}
.view-details .material-symbols-outlined[data-v-3b914fd3] {
  font-size: 1rem;
  transition: transform 0.2s ease;
}
.history-row:hover .view-details .material-symbols-outlined[data-v-3b914fd3] {
  transform: translateX(2px);
}

/* Load More */
.load-more-container[data-v-3b914fd3] {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}
.load-more-btn[data-v-3b914fd3] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.load-more-btn[data-v-3b914fd3]:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(232, 197, 71, 0.3);
}
.load-more-btn[data-v-3b914fd3]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.load-more-btn .spinning[data-v-3b914fd3] {
  font-size: 1rem;
  animation: spin-3b914fd3 1s linear infinite;
}

/* Modal Overlay */
.modal-overlay[data-v-787e9a43] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

/* Modal Content */
.modal-content[data-v-787e9a43] {
  position: relative;
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

/* Close Button */
.close-btn[data-v-787e9a43] {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 8px;
  padding: 0.5rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
}
.close-btn[data-v-787e9a43]:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}
.close-btn .material-symbols-outlined[data-v-787e9a43] {
  font-size: 1.25rem;
}

/* Loading */
.modal-loading[data-v-787e9a43] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.7);
}
.spinning[data-v-787e9a43] {
  animation: spin-787e9a43 1s linear infinite;
}
@keyframes spin-787e9a43 {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}

/* Header */
.modal-header[data-v-787e9a43] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.modal-title[data-v-787e9a43] {
  font-size: 1.5rem;
  font-weight: 700;
  color: #e8c547;
  margin: 0;
  letter-spacing: 0.05em;
}
.status-badge[data-v-787e9a43] {
  padding: 0.375rem 0.875rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}
.status-badge.finished[data-v-787e9a43] {
  background: rgba(156, 163, 175, 0.2);
  color: #9ca3af;
}
.status-badge.in_progress[data-v-787e9a43] {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}
.status-badge.paused[data-v-787e9a43] {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

/* Final Scores */
.final-scores-section[data-v-787e9a43] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
}
.team-score-card[data-v-787e9a43] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  min-width: 120px;
  position: relative;
}
.team-score-card.winner[data-v-787e9a43] {
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
}
.team-label[data-v-787e9a43] {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.team-final-score[data-v-787e9a43] {
  font-size: 2rem;
  font-weight: 700;
  color: white;
}
.winner-crown[data-v-787e9a43] {
  position: absolute;
  top: -0.75rem;
  right: -0.5rem;
  color: #fbbf24;
}
.winner-crown .material-symbols-outlined[data-v-787e9a43] {
  font-size: 1.5rem;
}
.vs-divider[data-v-787e9a43] {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
}

/* Sections */
.section[data-v-787e9a43] {
  margin-bottom: 1.5rem;
}
.section-title[data-v-787e9a43] {
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 1rem 0;
}

/* Players Grid */
.players-grid[data-v-787e9a43] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.player-card[data-v-787e9a43] {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.875rem;
  position: relative;
}
.player-seat[data-v-787e9a43] {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}
.player-name[data-v-787e9a43] {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.25rem;
}
.player-team[data-v-787e9a43] {
  font-size: 0.75rem;
  font-weight: 500;
}
.player-team.team-a[data-v-787e9a43] {
  color: #60a5fa;
}
.player-team.team-b[data-v-787e9a43] {
  color: #f472b6;
}
.bot-badge[data-v-787e9a43],
.replaced-badge[data-v-787e9a43] {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
}
.bot-badge[data-v-787e9a43] {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}
.replaced-badge[data-v-787e9a43] {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* Rounds Table */
.rounds-table-container[data-v-787e9a43] {
  overflow-x: auto;
}
.rounds-table[data-v-787e9a43] {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.rounds-table th[data-v-787e9a43],
.rounds-table td[data-v-787e9a43] {
  padding: 0.75rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rounds-table th[data-v-787e9a43] {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rounds-table td[data-v-787e9a43] {
  color: rgba(255, 255, 255, 0.8);
}
.round-num[data-v-787e9a43] {
  font-weight: 600;
  color: #e8c547;
}
.round-winner[data-v-787e9a43] {
  color: #4ade80;
  font-weight: 600;
}
.round-winner-badge[data-v-787e9a43] {
  font-size: 0.7rem;
  font-weight: 600;
  color: #4ade80;
}
.round-tie[data-v-787e9a43] {
  color: rgba(255, 255, 255, 0.3);
}

/* Bot States */
.bot-states[data-v-787e9a43] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.bot-state-card[data-v-787e9a43] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
}
.bot-name[data-v-787e9a43] {
  font-weight: 600;
  color: #fbbf24;
}
.bot-team[data-v-787e9a43] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}
.bot-cards[data-v-787e9a43] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Footer Info */
.game-info-footer[data-v-787e9a43] {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.info-item[data-v-787e9a43] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.info-label[data-v-787e9a43] {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.info-value[data-v-787e9a43] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================================================
   Container
   ============================================================================ */
.lobby-menu-container[data-v-28964957] {
  position: relative;
  display: inline-block;
  z-index: 10000;
}

/* ============================================================================
   Menu Button
   ============================================================================ */
.lobby-menu-button[data-v-28964957] {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.9) 0%, rgba(181, 142, 29, 0.9) 100%);
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a2f3f;
  transition: all 0.2s;
  position: relative;
  z-index: 10;
}
.lobby-menu-button[data-v-28964957]:hover {
  background: linear-gradient(135deg, rgba(26, 47, 63, 0.95) 0%, rgba(39, 63, 82, 0.95) 100%);
  border-color: rgba(232, 197, 71, 0.4);
  color: rgba(232, 197, 71, 0.9);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}
.lobby-menu-button.active[data-v-28964957] {
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.2) 0%, rgba(212, 175, 55, 0.2) 100%);
  border-color: rgba(232, 197, 71, 0.6);
  color: #e8c547;
}
.lobby-menu-button .material-symbols-outlined[data-v-28964957] {
  font-size: 1.5rem;
}

/* ============================================================================
   Dropdown Menu
   ============================================================================ */
.lobby-menu-dropdown[data-v-28964957] {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: linear-gradient(135deg, rgba(13, 31, 45, 0.98) 0%, rgba(26, 47, 63, 0.98) 100%);
  border-radius: 16px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 0.75rem;
  z-index: 99999;
  overflow: hidden;
}

/* Glowing border effect */
.lobby-menu-dropdown[data-v-28964957]::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(232, 197, 71, 0.3),
    rgba(232, 197, 71, 0.05),
    rgba(232, 197, 71, 0.3)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
}

/* ============================================================================
   Menu Sections
   ============================================================================ */
.menu-section[data-v-28964957] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.menu-divider[data-v-28964957] {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0.5rem 0;
}

/* ============================================================================
   Menu Items
   ============================================================================ */
.menu-item[data-v-28964957] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: left;
  width: 100%;
  position: relative;
}
.menu-item[data-v-28964957]:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.menu-item[data-v-28964957]:active {
  background: rgba(255, 255, 255, 0.05);
  transform: scale(0.98);
}
.menu-item .material-symbols-outlined[data-v-28964957] {
  font-size: 1.25rem;
  color: rgba(232, 197, 71, 0.8);
  flex-shrink: 0;
}

/* Danger items (destructive actions) */
.menu-item.danger .material-symbols-outlined[data-v-28964957] {
  color: rgba(239, 68, 68, 0.8);
}
.menu-item.danger[data-v-28964957]:hover {
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid rgba(239, 68, 68, 0.5);
  padding-left: calc(1rem - 3px);
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 640px) {
.lobby-menu-dropdown[data-v-28964957] {
    min-width: 180px;
    right: -8px;
}
.menu-item[data-v-28964957] {
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
}
.menu-item .material-symbols-outlined[data-v-28964957] {
    font-size: 1.125rem;
}
}
@media (max-width: 768px) {
.lobby-menu-button[data-v-28964957] {
    width: 44px;
    height: 44px;
}
.lobby-menu-button .material-symbols-outlined[data-v-28964957] {
    font-size: 1.375rem;
}
}

/* CSS is already imported globally in main.ts */
/* Additional Vue-specific styles */

/* Lobby Menu Positioning */
.lobby-menu-wrapper[data-v-37d8d003] {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 100;
}
.player-info[data-v-37d8d003] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}
.player-avatar[data-v-37d8d003] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(201, 162, 39, 0.3);
}
.player-avatar img[data-v-37d8d003] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.player-initials[data-v-37d8d003] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.3), rgba(201, 162, 39, 0.1));
  color: var(--accent-primary);
  font-weight: 700;
  font-size: var(--text-sm);
}
.material-symbols-outlined[data-v-37d8d003] {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   Lobby Container
   ============================================================================ */
.lobby-container[data-v-5a6593b0] {
  min-height: 100vh;
  background: #0d1f2d;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Subtle animated background effect */
.lobby-container[data-v-5a6593b0]::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(232, 197, 71, 0.03) 0%, transparent 70%);
  animation: pulse-5a6593b0 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulse-5a6593b0 {
0%, 100% { opacity: 0.3; transform: scale(1);
}
50% { opacity: 0.6; transform: scale(1.1);
}
}

/* Responsive: Scale content down on shorter viewports */
@media (max-height: 800px) {
.welcome-section[data-v-5a6593b0] {
    margin-bottom: 1.5rem;
}
.mode-cards[data-v-5a6593b0] {
    gap: 1rem;
}
.mode-card[data-v-5a6593b0] {
    padding: 2rem 1.5rem;
}
.mode-icon[data-v-5a6593b0] {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}
.active-games-section[data-v-5a6593b0] {
    margin-top: 2rem;
}
}

/* ============================================================================
   Mode Selection Screen
   ============================================================================ */
.mode-selection[data-v-5a6593b0] {
  position: relative;
  z-index: 10;
  width: 100%;
  height: calc(100vh - 2rem);
  display: flex;
  padding: 1rem 3rem;
}

/* ============================================================================
   Lobby Menu Positioning
   ============================================================================ */
.lobby-menu-wrapper[data-v-5a6593b0] {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
}

/* ============================================================================
   Logo Column - Fixed positioning like the menu (opposite side)
   ============================================================================ */
.logo-column[data-v-5a6593b0] {
  position: fixed;
  top: 1rem;
  left: 1.5rem;
  z-index: 100;
}
.lobby-logo[data-v-5a6593b0] {
  max-width: 150px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(232, 197, 71, 0.3));
  animation: logoFloat-5a6593b0 3s ease-in-out infinite;
}
@keyframes logoFloat-5a6593b0 {
0%, 100% { transform: translateY(0);
}
50% { transform: translateY(-6px);
}
}

/* ============================================================================
   Main Content Area
   ============================================================================ */
.main-content[data-v-5a6593b0] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  max-width: 800px;
  overflow: hidden;
}
.content-header[data-v-5a6593b0] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.welcome-text[data-v-5a6593b0] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.welcome-title[data-v-5a6593b0] {
  font-size: 1.75rem;
  font-weight: 700;
  color: #e8c547;
  margin: 0;
  text-shadow: 0 2px 12px rgba(232, 197, 71, 0.3);
  letter-spacing: -0.02em;
}
.subtitle[data-v-5a6593b0] {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  margin: 0;
}
.history-btn[data-v-5a6593b0] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}
.history-btn[data-v-5a6593b0]:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(232, 197, 71, 0.4);
  color: #e8c547;
}
.history-btn.active[data-v-5a6593b0] {
  background: rgba(232, 197, 71, 0.15);
  border-color: rgba(232, 197, 71, 0.5);
  color: #e8c547;
}
.history-btn .material-symbols-outlined[data-v-5a6593b0] {
  font-size: 1.125rem;
}

/* ============================================================================
   Content Body (Vertical Layout - Actions Row + Games Section Below)
   ============================================================================ */
.content-body[data-v-5a6593b0] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
  min-height: 0;
}
.actions-row[data-v-5a6593b0] {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}
.actions-row .mode-card[data-v-5a6593b0] {
  flex: 1;
}
.games-section[data-v-5a6593b0] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.recent-games-section[data-v-5a6593b0],
.history-section[data-v-5a6593b0] {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.section-title[data-v-5a6593b0] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.section-title .material-symbols-outlined[data-v-5a6593b0] {
  font-size: 1.125rem;
  color: #e8c547;
}
.game-count[data-v-5a6593b0] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

/* Legacy welcome section - kept for loading/error states */
.welcome-section[data-v-5a6593b0] {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vh, 3rem);
  animation: floatIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.error-text[data-v-5a6593b0] {
  color: #ef4444;
  margin-bottom: 1.5rem;
}
.retry-button[data-v-5a6593b0] {
  padding: 0.875rem 1.5rem;
  border: 2px solid rgba(232, 197, 71, 0.5);
  border-radius: 12px;
  background: linear-gradient(135deg, #e8c547 0%, #d4b13a 100%);
  color: #0d1f2d;
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px rgba(232, 197, 71, 0.4);
}
.retry-button[data-v-5a6593b0]:hover {
  background: linear-gradient(135deg, #ffd95f 0%, #e8c547 100%);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(232, 197, 71, 0.5);
}

/* ============================================================================
   Lobby Tabs
   ============================================================================ */
.lobby-tabs[data-v-5a6593b0] {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  animation: fadeIn-5a6593b0 0.4s ease-out;
}
.tab-button[data-v-5a6593b0] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}
.tab-button .material-symbols-outlined[data-v-5a6593b0] {
  font-size: 1.25rem;
}
.tab-button[data-v-5a6593b0]:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(232, 197, 71, 0.3);
}
.tab-button.active[data-v-5a6593b0] {
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.2), rgba(232, 197, 71, 0.1));
  border-color: rgba(232, 197, 71, 0.5);
  color: #e8c547;
}
.tab-badge[data-v-5a6593b0] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  background: #4ade80;
  border-radius: 9999px;
  color: #0a0a0a;
  font-size: 0.7rem;
  font-weight: 700;
}
.tab-content[data-v-5a6593b0] {
  min-height: 300px;
  animation: fadeIn-5a6593b0 0.3s ease-out;
}
.actions-tab[data-v-5a6593b0],
.recent-tab[data-v-5a6593b0],
.history-tab[data-v-5a6593b0] {
  max-width: 800px;
  margin: 0 auto;
}

/* ============================================================================
   Mode Cards (Actions Column)
   ============================================================================ */
.mode-cards[data-v-5a6593b0] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.actions-row .mode-card[data-v-5a6593b0] {
  position: relative;
  background: linear-gradient(135deg, rgba(13, 31, 45, 0.95) 0%, rgba(26, 47, 63, 0.95) 100%);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* Legacy mode-card styles for backwards compatibility */
.mode-card[data-v-5a6593b0] {
  position: relative;
  flex: 0 0 auto;
  width: clamp(250px, 25vw, 300px);
  background: linear-gradient(135deg, rgba(13, 31, 45, 0.95) 0%, rgba(26, 47, 63, 0.95) 100%);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: clamp(2rem, 3vh, 3rem) clamp(1.5rem, 2vw, 2rem);
  text-align: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* Subtle gradient overlay on cards */
.mode-card[data-v-5a6593b0]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.05) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.mode-card[data-v-5a6593b0]:hover::after {
  opacity: 1;
}
.mode-card[data-v-5a6593b0]:hover {
  transform: translateY(-12px) scale(1.02);
  border-color: rgba(232, 197, 71, 0.4);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(232, 197, 71, 0.3),
    0 16px 48px rgba(232, 197, 71, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.mode-card[data-v-5a6593b0]:active {
  transform: translateY(-8px) scale(1);
  transition: all 0.15s;
}

/* Mode icon and text for actions row */
.actions-row .mode-icon[data-v-5a6593b0] {
  font-size: 2.5rem;
  color: #e8c547;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 2px 8px rgba(232, 197, 71, 0.4));
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}
.actions-row .mode-card:hover .mode-icon[data-v-5a6593b0] {
  transform: scale(1.1);
  filter: drop-shadow(0 4px 12px rgba(232, 197, 71, 0.5));
}
.actions-row .mode-card h3[data-v-5a6593b0] {
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.375rem;
  position: relative;
  z-index: 1;
  transition: color 0.25s;
}
.actions-row .mode-card:hover h3[data-v-5a6593b0] {
  color: #e8c547;
}
.actions-row .mode-card p[data-v-5a6593b0] {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
  position: relative;
  z-index: 1;
  margin: 0;
}

/* Legacy mode-icon styles */
.mode-icon[data-v-5a6593b0] {
  font-size: clamp(3.5rem, 5vh, 5rem);
  color: #e8c547;
  margin-bottom: clamp(1rem, 2vh, 1.5rem);
  filter: drop-shadow(0 4px 16px rgba(232, 197, 71, 0.4));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}
.mode-card:hover .mode-icon[data-v-5a6593b0] {
  transform: scale(1.1) translateY(-4px);
  filter: drop-shadow(0 8px 24px rgba(232, 197, 71, 0.6));
}
.mode-card h3[data-v-5a6593b0] {
  font-size: clamp(1.25rem, 2.5vh, 1.625rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: clamp(0.5rem, 1vh, 0.75rem);
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}
.mode-card:hover h3[data-v-5a6593b0] {
  color: #e8c547;
}
.mode-card p[data-v-5a6593b0] {
  font-size: clamp(0.875rem, 1.5vh, 1rem);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}
.mode-card:hover p[data-v-5a6593b0] {
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================================
   Recent Games Inline Section (on Play tab)
   ============================================================================ */
.recent-games-inline[data-v-5a6593b0] {
  max-width: 1000px;
  margin: clamp(2rem, 4vh, 3rem) auto 0;
  animation: floatIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.recent-games-title[data-v-5a6593b0] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: clamp(1rem, 2vh, 1.25rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  margin-bottom: clamp(1rem, 2vh, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.recent-games-title .material-symbols-outlined[data-v-5a6593b0] {
  font-size: 1.25em;
  color: var(--primary-gold, #e8c547);
}

/* ============================================================================
   Active Games Section
   ============================================================================ */
.active-games-section[data-v-5a6593b0] {
  max-width: 1000px;
  margin: clamp(2rem, 4vh, 4rem) auto 0;
  animation: floatIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.active-games-title[data-v-5a6593b0] {
  font-size: clamp(1.125rem, 2.5vh, 1.5rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  margin-bottom: clamp(1rem, 2vh, 2rem);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Empty state */
.no-games[data-v-5a6593b0] {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(13, 31, 45, 0.6) 0%, rgba(26, 47, 63, 0.6) 100%);
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  backdrop-filter: blur(8px);
}
.no-games-icon[data-v-5a6593b0] {
  font-size: 4rem;
  color: rgba(232, 197, 71, 0.4);
  margin-bottom: 1rem;
}
.no-games-text[data-v-5a6593b0] {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
}
.no-games-hint[data-v-5a6593b0] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* Active games grid */
.active-games-grid[data-v-5a6593b0] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Individual game card */
.game-card[data-v-5a6593b0] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(13, 31, 45, 0.9) 0%, rgba(26, 47, 63, 0.9) 100%);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.game-card[data-v-5a6593b0]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.05) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.game-card[data-v-5a6593b0]:hover::before {
  opacity: 1;
}
.game-card[data-v-5a6593b0]:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(232, 197, 71, 0.3);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(232, 197, 71, 0.2),
    0 8px 24px rgba(232, 197, 71, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.game-card[data-v-5a6593b0]:active {
  transform: translateY(-4px) scale(1);
  transition: all 0.15s;
}

/* Game card header */
.game-card-header[data-v-5a6593b0] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.game-room-code[data-v-5a6593b0] {
  font-size: 1.25rem;
  font-weight: 700;
  color: #e8c547;
  text-shadow: 0 2px 8px rgba(232, 197, 71, 0.3);
  letter-spacing: 0.1em;
}
.game-status[data-v-5a6593b0] {
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.game-status.waiting[data-v-5a6593b0] {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.game-status.in_progress[data-v-5a6593b0] {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.game-status.completed[data-v-5a6593b0] {
  background: rgba(156, 163, 175, 0.2);
  color: #9ca3af;
  border: 1px solid rgba(156, 163, 175, 0.3);
}

/* Game card body */
.game-card-body[data-v-5a6593b0] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.game-info[data-v-5a6593b0] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
}
.game-icon[data-v-5a6593b0] {
  font-size: 1.25rem;
  color: rgba(232, 197, 71, 0.6);
}
.game-players[data-v-5a6593b0],
.game-time[data-v-5a6593b0] {
  font-weight: 500;
}

/* Game card footer */
.game-card-footer[data-v-5a6593b0] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.rejoin-text[data-v-5a6593b0] {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(232, 197, 71, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.game-card-footer .material-symbols-outlined[data-v-5a6593b0] {
  font-size: 1.25rem;
  color: rgba(232, 197, 71, 0.6);
  transition: transform 0.3s;
}
.game-card:hover .game-card-footer .material-symbols-outlined[data-v-5a6593b0] {
  transform: translateX(4px);
  color: #e8c547;
}

/* ============================================================================
   Create/Join Game Screens
   ============================================================================ */
.create-game-screen[data-v-5a6593b0],
.join-game-screen[data-v-5a6593b0] {
  position: relative;
  max-width: 650px;
  width: 100%;
  animation: fadeIn-5a6593b0 0.4s ease-out;
  z-index: 10;
  padding: 0 1rem;
  background: transparent;
}
@keyframes fadeIn-5a6593b0 {
from { opacity: 0; transform: scale(0.95);
}
to { opacity: 1; transform: scale(1);
}
}

/* Glassmorphism Container */
.glass-container[data-v-5a6593b0] {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 2rem 1.75rem;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

/* Subtle glow effect */
.glass-container[data-v-5a6593b0]::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 28px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.2), rgba(232, 197, 71, 0.05), rgba(232, 197, 71, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
}
.screen-header[data-v-5a6593b0] {
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
}
.screen-title[data-v-5a6593b0] {
  font-size: clamp(1.5rem, 3.5vw, 1.875rem);
  font-weight: 700;
  color: #e8c547;
  text-align: center;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(232, 197, 71, 0.3);
}

/* ============================================================================
   Form Sections
   ============================================================================ */
.form-section[data-v-5a6593b0] {
  margin-bottom: 1.25rem;
}
.section-label[data-v-5a6593b0] {
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0.5rem;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.input-hint[data-v-5a6593b0] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.375rem;
  margin-bottom: 0;
}
.select-icon-label[data-v-5a6593b0] {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Avatar Grid - Horizontal Scroll */
.avatar-grid[data-v-5a6593b0] {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5rem 0.25rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 197, 71, 0.3) rgba(255, 255, 255, 0.05);
  max-height: 70px;
}

/* Webkit scrollbar styling */
.avatar-grid[data-v-5a6593b0]::-webkit-scrollbar {
  height: 8px;
}
.avatar-grid[data-v-5a6593b0]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}
.avatar-grid[data-v-5a6593b0]::-webkit-scrollbar-thumb {
  background: rgba(232, 197, 71, 0.3);
  border-radius: 4px;
}
.avatar-grid[data-v-5a6593b0]::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 197, 71, 0.5);
}
.avatar-btn[data-v-5a6593b0] {
  flex: 0 0 auto;
  width: 50px !important;
  height: 50px !important;
  aspect-ratio: 1;
  padding: 0.25rem;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-btn img[data-v-5a6593b0] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}
.avatar-btn[data-v-5a6593b0]:hover {
  border-color: rgba(232, 197, 71, 0.6);
  background: rgba(232, 197, 71, 0.08);
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(232, 197, 71, 0.25);
}
.avatar-btn.selected[data-v-5a6593b0] {
  border-color: #e8c547;
  border-width: 3px;
  background: rgba(232, 197, 71, 0.12);
  box-shadow: 0 0 20px rgba(232, 197, 71, 0.5);
  transform: scale(1.05);
}

/* Icon Grid */
.icon-grid[data-v-5a6593b0] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.icon-btn[data-v-5a6593b0] {
  width: 50px !important;
  height: 50px !important;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.icon-btn .material-symbols-outlined[data-v-5a6593b0] {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
}
.icon-btn[data-v-5a6593b0]:hover {
  border-color: rgba(232, 197, 71, 0.6);
  background: rgba(232, 197, 71, 0.08);
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(232, 197, 71, 0.25);
}
.icon-btn.selected[data-v-5a6593b0] {
  border-color: #e8c547;
  border-width: 2.5px;
  background: rgba(232, 197, 71, 0.12);
  box-shadow: 0 0 20px rgba(232, 197, 71, 0.5);
  transform: scale(1.05);
}
.icon-btn.selected .material-symbols-outlined[data-v-5a6593b0] {
  color: #e8c547;
}

/* Game Mode Cards */
.game-mode-cards[data-v-5a6593b0] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  grid-auto-rows: minmax(85px, auto);
  width: 100%; /* Ensure grid doesn't exceed container width */
  box-sizing: border-box;
}
.mode-card[data-v-5a6593b0] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Label element resets - fix browser default styling */
  line-height: 1;
  margin: 0;
  box-sizing: border-box;
  vertical-align: top;
  display: block; /* Force label to behave as block element, not inline */

  /* Grid cell sizing - constrain to grid cell dimensions */
  width: 100%; /* Constrain to grid column width */
  min-height: 90px; /* Minimum height for content */
  max-width: 100%; /* Prevent overflow beyond grid cell */

  /* Restore flexbox for layout */
  display: flex;
}
.mode-card[data-v-5a6593b0]:hover {
  border-color: rgba(232, 197, 71, 0.5);
  background: rgba(232, 197, 71, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 197, 71, 0.2);
}
.mode-card.active[data-v-5a6593b0] {
  border-color: #e8c547;
  background: rgba(232, 197, 71, 0.1);
  box-shadow: 0 0 24px rgba(232, 197, 71, 0.3);
}
.mode-input[data-v-5a6593b0] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mode-indicator[data-v-5a6593b0] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  position: relative;
  transition: all 0.25s;
  align-self: center; /* Keep indicator centered even when text wraps */
}
.mode-card.active .mode-indicator[data-v-5a6593b0] {
  border-color: #e8c547;
  background: #e8c547;
  box-shadow: 0 0 12px rgba(232, 197, 71, 0.5);
}
.mode-card.active .mode-indicator[data-v-5a6593b0]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0d1f2d;
}
.mode-content[data-v-5a6593b0] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0; /* Allow flexbox child to shrink below content size */
}
.mode-title[data-v-5a6593b0] {
  font-size: 0.8125rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.2;
  white-space: normal; /* Ensure text can wrap */
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.mode-desc[data-v-5a6593b0] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.3;
}

/* Join Game Screen - Vertical Layout */
.join-game-screen .form-content[data-v-5a6593b0] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.join-game-screen .form-section[data-v-5a6593b0] {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.join-game-screen .section-label[data-v-5a6593b0] {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.375rem;
}

/* Text Inputs */
.text-input[data-v-5a6593b0] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
}
.text-input[data-v-5a6593b0]:hover {
  border-color: rgba(232, 197, 71, 0.3);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
}
.text-input[data-v-5a6593b0]:focus {
  outline: none;
  border-color: #e8c547;
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 0 3px rgba(232, 197, 71, 0.2),
    inset 0 2px 6px rgba(0, 0, 0, 0.1),
    0 8px 24px rgba(232, 197, 71, 0.15);
  transform: translateY(-2px);
}
.text-input[data-v-5a6593b0]::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.room-code-input[data-v-5a6593b0] {
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.25rem;
  text-align: center;
}
.input-hint[data-v-5a6593b0] {
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Avatar Grid */
.avatar-grid[data-v-5a6593b0] {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.375rem;
  max-height: 120px;
  overflow-y: auto;
}
.avatar-btn[data-v-5a6593b0] {
  aspect-ratio: 1;
  padding: 0.1875rem;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  max-width: 60px;
}
.avatar-btn img[data-v-5a6593b0] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.avatar-btn[data-v-5a6593b0]:hover {
  border-color: rgba(232, 197, 71, 0.4);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.avatar-btn.selected[data-v-5a6593b0] {
  border-color: #e8c547;
  box-shadow: 0 0 16px rgba(232, 197, 71, 0.5);
  transform: scale(1.05);
}

/* Game Mode Radio Options */
.game-mode-section[data-v-5a6593b0] {
  gap: 0.375rem;
}
.radio-option[data-v-5a6593b0] {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.radio-option[data-v-5a6593b0]:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(232, 197, 71, 0.3);
}
.radio-option.active[data-v-5a6593b0] {
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.18) 0%, rgba(232, 197, 71, 0.08) 100%);
  border-color: #e8c547;
  box-shadow: 0 4px 16px rgba(232, 197, 71, 0.2);
}
.radio-input[data-v-5a6593b0] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.radio-circle[data-v-5a6593b0] {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  position: relative;
  transition: all 0.2s ease;
  margin-top: 0.125rem;
}
.radio-option.active .radio-circle[data-v-5a6593b0] {
  border-color: #e8c547;
  background: #e8c547;
  box-shadow: 0 0 12px rgba(232, 197, 71, 0.5);
}
.radio-option.active .radio-circle[data-v-5a6593b0]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0d1f2d;
}
.radio-content[data-v-5a6593b0] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}
.radio-title[data-v-5a6593b0] {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
}
.radio-desc[data-v-5a6593b0] {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.3;
}

/* Action Buttons */
.action-buttons[data-v-5a6593b0] {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.btn-create[data-v-5a6593b0] {
  flex: 1;
  position: relative;
  padding: 0.875rem 1.5rem;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #e8c547 0%, #d4b13a 100%);
  color: #0d1f2d;
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 6px 20px rgba(232, 197, 71, 0.4),
    0 2px 8px rgba(232, 197, 71, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

/* Shine effect on button */
.btn-create[data-v-5a6593b0]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s;
}
.btn-create[data-v-5a6593b0]:hover:not(:disabled)::before {
  left: 100%;
}
.btn-create[data-v-5a6593b0]:hover:not(:disabled) {
  background: linear-gradient(135deg, #ffd95f 0%, #e8c547 100%);
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 12px 32px rgba(232, 197, 71, 0.5),
    0 6px 16px rgba(232, 197, 71, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-create[data-v-5a6593b0]:active:not(:disabled) {
  transform: translateY(-1px) scale(1);
  transition: all 0.15s;
}
.btn-create[data-v-5a6593b0]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.3) 0%, rgba(212, 177, 58, 0.3) 100%);
  box-shadow: none;
}
.btn-cancel[data-v-5a6593b0] {
  padding: 0.875rem 1.5rem;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.btn-cancel[data-v-5a6593b0]:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn-cancel[data-v-5a6593b0]:active {
  transform: translateY(0);
  transition: all 0.15s;
}

/* Responsive Design */
@media (max-width: 640px) {
.create-game-screen[data-v-5a6593b0],
  .join-game-screen[data-v-5a6593b0] {
    padding: 0 0.75rem;
}
.screen-title[data-v-5a6593b0] {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}
.form-section[data-v-5a6593b0] {
    margin-bottom: 1.5rem;
}
.section-label[data-v-5a6593b0] {
    font-size: 1rem;
}
.avatar-grid[data-v-5a6593b0] {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.icon-grid[data-v-5a6593b0] {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.game-mode-cards[data-v-5a6593b0] {
    grid-template-columns: 1fr;
}
.action-buttons[data-v-5a6593b0] {
    flex-direction: column;
    gap: 0.75rem;
}
.action-buttons .btn-create[data-v-5a6593b0],
  .action-buttons .btn-cancel[data-v-5a6593b0] {
    width: 100%;
}
.btn-cancel[data-v-5a6593b0] {
    order: -1;
}

  /* Active games responsive */
.active-games-section[data-v-5a6593b0] {
    margin-top: 3rem;
}
.active-games-title[data-v-5a6593b0] {
    font-size: 1.25rem;
}
.active-games-grid[data-v-5a6593b0] {
    grid-template-columns: 1fr;
    gap: 1rem;
}
.mode-cards[data-v-5a6593b0] {
    flex-direction: column;
    gap: 1.5rem;
}
.mode-card[data-v-5a6593b0] {
    width: 100%;
    max-width: 400px;
}
}

/* ============================================================================
   Responsive Breakpoints for New Layout
   ============================================================================ */

/* Tablet (< 1024px) - Reduce logo, adjust content */
@media (max-width: 1024px) {
.mode-selection[data-v-5a6593b0] {
    padding: 0.75rem;
}
.logo-column[data-v-5a6593b0] {
    left: 1rem;
}
.lobby-logo[data-v-5a6593b0] {
    max-width: 120px;
}
.actions-row .mode-card[data-v-5a6593b0] {
    max-width: 220px;
}
.content-body[data-v-5a6593b0] {
    gap: 1rem;
}
}

/* Mobile (< 768px) - Move logo to top, stack vertically */
@media (max-width: 768px) {
.mode-selection[data-v-5a6593b0] {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - 2rem);
    padding: 80px 0.5rem 0.5rem 0.5rem; /* Top padding for logo */
}
.logo-column[data-v-5a6593b0] {
    position: fixed;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
}
.lobby-logo[data-v-5a6593b0] {
    max-width: 70px;
}
.main-content[data-v-5a6593b0] {
    gap: 1rem;
}
.content-header[data-v-5a6593b0] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
}
.welcome-title[data-v-5a6593b0] {
    font-size: 1.5rem;
}
.history-btn[data-v-5a6593b0] {
    align-self: flex-end;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
}
.content-body[data-v-5a6593b0] {
    gap: 1rem;
    overflow-y: auto;
}
.actions-row[data-v-5a6593b0] {
    flex-shrink: 0;
    gap: 0.75rem;
}
.actions-row .mode-card[data-v-5a6593b0] {
    flex: 1;
    max-width: none;
    padding: 1rem 0.75rem;
}
.actions-row .mode-icon[data-v-5a6593b0] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.actions-row .mode-card h3[data-v-5a6593b0] {
    font-size: 0.9375rem;
}
.actions-row .mode-card p[data-v-5a6593b0] {
    font-size: 0.75rem;
}
.games-section[data-v-5a6593b0] {
    flex: 1;
    min-height: 250px;
}
.section-title[data-v-5a6593b0] {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}
}

/* Small mobile (< 480px) - Further compaction */
@media (max-width: 480px) {
.actions-row[data-v-5a6593b0] {
    flex-direction: column;
}
.actions-row .mode-card[data-v-5a6593b0] {
    flex: 0 0 auto;
    width: 100%;
}
.welcome-title[data-v-5a6593b0] {
    font-size: 1.25rem;
}
}

/* Global styles are imported in main.ts */
#app {
  width: 100%;
}

/* Auth Screen - Match lobby design language */
#auth-screen {
  min-height: 100vh;
  background: linear-gradient(135deg, #0d1f2d 0%, #1a2f3f 50%, #0d1f2d 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

/* Subtle animated background effect */
#auth-screen::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(232, 197, 71, 0.03) 0%, transparent 70%);
  animation: pulse 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulse {
0%, 100% { opacity: 0.3; transform: scale(1);
}
50% { opacity: 0.6; transform: scale(1.1);
}
}
.auth-logo {
  max-width: 300px;
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
  filter: drop-shadow(0 8px 24px rgba(232, 197, 71, 0.3));
  animation: logoFloat 3s ease-in-out infinite;
  position: relative;
  z-index: 10;
}
@keyframes logoFloat {
0%, 100% { transform: translateY(0);
}
50% { transform: translateY(-10px);
}
}
#auth-forms {
  position: relative;
  max-width: 480px;
  width: 100%;
  background: linear-gradient(135deg, rgba(13, 31, 45, 0.98) 0%, rgba(26, 47, 63, 0.98) 100%);
  border-radius: 28px;
  padding: 3rem 2.5rem;
  box-shadow:
    0 32px 96px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  animation: floatIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}
@keyframes floatIn {
from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
}
to {
    opacity: 1;
    transform: translateY(0) scale(1);
}
}

/* Floating glow effect */
#auth-forms::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 28px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(232, 197, 71, 0.3), rgba(232, 197, 71, 0.05), rgba(232, 197, 71, 0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  animation: borderPulse 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes borderPulse {
0%, 100% { opacity: 0.4;
}
50% { opacity: 0.8;
}
}

/* Error Toast */
.error-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem 2rem;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(220, 38, 38, 0.95) 100%);
  color: white;
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(239, 68, 68, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-size: 0.9375rem;
  font-weight: 600;
  z-index: 9999;
  animation: slideUp 0.3s ease-out;
  max-width: 90%;
  text-align: center;
}
@keyframes slideUp {
from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}
to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
}

/* Responsive */
@media (max-width: 640px) {
.auth-logo {
    max-width: 200px;
    margin-bottom: 1.5rem;
}
#auth-forms {
    padding: 2rem 1.5rem;
}
.error-toast {
    bottom: 1rem;
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
}
}