/* UI Components - Responsive & Pixel Art */

/* Main Menu */
#main-menu {
    align-items: center;
    justify-content: center;
    perspective: var(--perspective);
}

.menu-content {
    text-align: center;
    transform: translateZ(50px);
    animation: menu-float 4s ease-in-out infinite;
}

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

.game-title {
    font-family: var(--font-pixel);
    font-size: clamp(36px, 8vh, 80px);
    letter-spacing: clamp(4px, 1vw, 12px);
    color: #ffffff;
    text-shadow:
        /* Multi-layer pixel art shadow */
        2px 0 0 var(--blue-dark),
        -2px 0 0 var(--blue-dark),
        0 2px 0 var(--blue-dark),
        0 -2px 0 var(--blue-dark),
        4px 4px 0 #1a2a4a,
        6px 6px 0 #0f1a2f,
        8px 8px 0 rgba(0, 0, 0, 0.4),
        /* Glow */
        0 0 30px rgba(59, 130, 246, 0.5),
        0 0 60px rgba(59, 130, 246, 0.3);
    margin-bottom: var(--gap-sm);
    animation: title-glow 3s ease-in-out infinite;
    /* Pixel-perfect rendering */
    image-rendering: pixelated;
    -webkit-font-smoothing: none;
}

@keyframes title-glow {
    0%, 100% { 
        filter: brightness(1);
        text-shadow: 
            0 0 20px rgba(59, 130, 246, 0.5),
            0 0 40px rgba(59, 130, 246, 0.3),
            4px 4px 0 var(--blue-dark),
            8px 8px 0 rgba(0, 0, 0, 0.3);
    }
    50% { 
        filter: brightness(1.2);
        text-shadow: 
            0 0 40px rgba(59, 130, 246, 0.8),
            0 0 80px rgba(59, 130, 246, 0.5),
            4px 4px 0 var(--blue-dark),
            8px 8px 0 rgba(0, 0, 0, 0.3);
    }
}

.subtitle {
    font-family: var(--font-retro);
    font-size: clamp(14px, 2.5vh, 24px);
    letter-spacing: clamp(2px, 0.5vw, 6px);
    color: #ffffff;
    margin-bottom: var(--gap-xl);
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    align-items: center;
}

.menu-buttons .crt-button {
    min-width: clamp(180px, 20vw, 280px);
}

/* Mode Selection */
.mode-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-lg);
    animation: menu-fade-in 0.3s ease;
}

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

.mode-header {
    font-family: var(--font-pixel);
    font-size: clamp(14px, 2vh, 20px);
    color: var(--blue-light);
    letter-spacing: 4px;
    margin-bottom: var(--gap-sm);
}

.mode-buttons {
    display: flex;
    gap: var(--gap-lg);
}

.mode-row-top {
    margin-bottom: var(--gap-md);
}

.mode-row-bottom {
    gap: var(--gap-md);
}

.mode-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--gap-lg);
    min-width: clamp(140px, 18vw, 200px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mode-button:hover {
    transform: translateY(-4px);
}

/* Secondary buttons - half height, no icons */
.mode-button-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap-sm) var(--gap-md);
    min-width: clamp(140px, 18vw, 200px);
    height: clamp(36px, 5vh, 48px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mode-button-secondary:hover:not(:disabled) {
    transform: translateY(-2px);
}

.mode-button-secondary .mode-name {
    font-family: var(--font-pixel);
    font-size: clamp(10px, 1.2vh, 14px);
    letter-spacing: 1px;
}

.mode-button-secondary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* SVG icon styling */
.mode-icon {
    width: clamp(32px, 5vh, 48px);
    height: clamp(32px, 5vh, 48px);
    color: currentColor;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.mode-name {
    font-family: var(--font-pixel);
    font-size: clamp(12px, 1.5vh, 16px);
    color: var(--text-bright);
}

.mode-desc {
    font-family: var(--font-retro);
    font-size: clamp(10px, 1.2vh, 14px);
    color: var(--text-dim);
}

.hotkey-hint {
    margin-top: var(--gap-xl);
    font-family: var(--font-retro);
    font-size: clamp(14px, 1.8vh, 20px);
    color: #ffffff;
    animation: pulse 2s infinite;
}

/* ==================== GAME SCREEN - CRT MONITOR DESIGN ==================== */
#game-screen {
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ==================== IN-GAME LOGO ==================== */
/* Logo row - fixed grid row for consistent positioning */
.game-logo-row {
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 5vh; /* Matches grid row height */
}

.game-logo {
    font-family: var(--font-pixel);
    font-size: clamp(32px, 5.4vh, 65px); /* 35% larger */
    letter-spacing: clamp(3px, 0.8vw, 11px);
    color: #ffffff;
    text-shadow:
        2px 0 0 var(--blue-dark),
        -2px 0 0 var(--blue-dark),
        0 2px 0 var(--blue-dark),
        0 -2px 0 var(--blue-dark),
        3px 3px 0 #1a2a4a,
        5px 5px 0 rgba(0, 0, 0, 0.4),
        0 0 25px rgba(59, 130, 246, 0.5);
    margin: 0;
}

/* Swirly animated background */
.swirly-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background: radial-gradient(ellipse at center, #0a0a18 0%, #000 100%);
}

.swirl {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    animation: swirl-float 20s ease-in-out infinite;
}

.swirl-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.6) 0%, transparent 70%);
    top: -10%;
    left: -5%;
    animation-delay: 0s;
}

.swirl-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.5) 0%, transparent 70%);
    bottom: -10%;
    right: -5%;
    animation-delay: -7s;
}

.swirl-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, transparent 70%);
    top: 40%;
    left: 40%;
    animation-delay: -14s;
}

@keyframes swirl-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -20px) scale(1.1); }
    50% { transform: translate(-20px, 30px) scale(0.9); }
    75% { transform: translate(-30px, -30px) scale(1.05); }
}

/* Pixel art stars/sparkles in the background */
.swirly-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        /* Tiny pixel stars */
        radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,0.4) 50%, transparent 50%),
        radial-gradient(2px 2px at 30% 70%, rgba(255,255,255,0.3) 50%, transparent 50%),
        radial-gradient(2px 2px at 70% 30%, rgba(255,255,255,0.5) 50%, transparent 50%),
        radial-gradient(2px 2px at 90% 80%, rgba(255,255,255,0.4) 50%, transparent 50%),
        radial-gradient(2px 2px at 50% 50%, rgba(255,255,255,0.2) 50%, transparent 50%),
        radial-gradient(2px 2px at 15% 85%, rgba(255,255,255,0.3) 50%, transparent 50%),
        radial-gradient(2px 2px at 85% 15%, rgba(255,255,255,0.4) 50%, transparent 50%),
        radial-gradient(3px 3px at 25% 40%, rgba(59,130,246,0.5) 50%, transparent 50%),
        radial-gradient(3px 3px at 75% 60%, rgba(139,92,246,0.5) 50%, transparent 50%);
    pointer-events: none;
    animation: twinkle 4s ease-in-out infinite;
}

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

/* Main game container - maintains aspect ratio */
.game-container {
    position: relative;
    z-index: 2; /* Above particle canvas (1), below overlays */
    /* CSS Grid for fixed row positions across all modes */
    display: grid;
    grid-template-rows:
        minmax(6vh, auto)    /* Row 1: top-hud - fixed minimum height */
        5vh                   /* Row 2: logo row - fixed height */
        1fr                   /* Row 3: crt-monitor - fills remaining */
        auto;                 /* Row 4: bottom-area */
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    width: 100%;
    height: 100%;
    max-width: min(95vw, 160vh);
    max-height: 100vh;
    padding: 1vh 2vw;
    box-sizing: border-box;
}

/* ==================== TOP HUD ==================== */
.top-hud {
    grid-row: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    min-height: 6vh; /* Fixed minimum height to maintain grid row */
    padding: 0.5vh 0;
}

.joker-tray,
.consumable-tray {
    display: flex;
    align-items: center;
    gap: 0.8vw;
}

.tray-cards {
    display: flex;
    gap: 0.4vw;
}

.tray-counter {
    font-family: var(--font-pixel);
    font-size: clamp(10px, 1.5vh, 16px);
    color: var(--text-dim);
    background: rgba(0,0,0,0.5);
    padding: 0.3vh 0.6vw;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
}

.joker-tray .tray-counter { color: var(--purple); border-color: rgba(139,92,246,0.3); }
.consumable-tray .tray-counter { color: var(--cyan); border-color: rgba(34,211,238,0.3); }

/* Mini joker/consumable cards - Balatro-style */
.mini-card {
    width: clamp(28px, 3.5vw, 50px);
    height: clamp(40px, 5vw, 70px);
    background: linear-gradient(180deg, #f8f6f0 0%, #e8e4dc 100%);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(14px, 2vh, 24px);
    cursor: pointer;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
    position: relative;
    /* Balatro-style subtle depth */
    box-shadow:
        0 1px 0 0 #d8d4cc,
        0 2px 0 0 #c8c4bc,
        0 3px 6px rgba(0,0,0,0.2);
}

/* Subtle top highlight */
.mini-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%);
    border-radius: 4px 4px 0 0;
    pointer-events: none;
}

.mini-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 0 #d8d4cc,
        0 2px 0 0 #c8c4bc,
        0 6px 12px rgba(0,0,0,0.25);
    z-index: 10;
}

.mini-card.joker {
    background: linear-gradient(180deg, #efe8f8 0%, #ddd0ea 100%);
    box-shadow:
        0 1px 0 0 #c8b8d8,
        0 2px 0 0 #b8a8c8,
        0 3px 6px rgba(0,0,0,0.2);
}

.mini-card.joker:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 0 #c8b8d8,
        0 2px 0 0 #b8a8c8,
        0 6px 12px rgba(0,0,0,0.25),
        0 0 12px rgba(139,92,246,0.25);
}

.mini-card.consumable {
    background: linear-gradient(180deg, #e8f5f5 0%, #d0e8e8 100%);
    box-shadow:
        0 1px 0 0 #b8d8d8,
        0 2px 0 0 #a8c8c8,
        0 3px 6px rgba(0,0,0,0.2);
}

.mini-card.consumable:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 0 #b8d8d8,
        0 2px 0 0 #a8c8c8,
        0 6px 12px rgba(0,0,0,0.25),
        0 0 12px rgba(34,211,238,0.25);
}

/* Center info display */
.center-info {
    display: flex;
    gap: 2vw;
    align-items: center;
}

.round-display,
.ante-display,
.money-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0,0,0,0.4);
    padding: 0.5vh 1vw;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
}

.info-label {
    font-family: var(--font-pixel);
    font-size: clamp(6px, 0.8vh, 9px);
    color: var(--text-dim);
    letter-spacing: 1px;
}

.info-value {
    font-family: var(--font-pixel);
    font-size: clamp(16px, 2.5vh, 28px);
    color: var(--blue-light);
}

.money-display {
    flex-direction: row;
    gap: 0.3vw;
    border-color: rgba(255,215,0,0.2);
}

.money-display .money-icon {
    font-size: clamp(14px, 2vh, 22px);
    color: var(--gold);
}

.money-display .info-value {
    color: var(--gold);
}

/* ==================== CRT-STYLE POKER TABLE PLAY AREA ==================== */
.crt-monitor {
    grid-row: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    height: 100%; /* Fill the grid row */
    perspective: 1200px;
}

/* Floating celebration containers - positioned at bottom corners, away from gameplay */
.celebration-container {
    position: fixed;
    bottom: clamp(80px, 12vh, 150px);
    width: clamp(150px, 20vw, 280px);
    height: auto;
    max-height: 30vh;
    pointer-events: none;
    z-index: 100;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
}

.celebration-container.celebration-left {
    left: clamp(10px, 3vw, 50px);
    align-items: flex-start;
}

.celebration-container.celebration-right {
    right: clamp(10px, 3vw, 50px);
    align-items: flex-end;
}

/* Individual floating text popups */
.celebration-popup {
    --rotation: 0deg;
    position: relative;
    font-family: var(--font-pixel);
    white-space: nowrap;
    pointer-events: none;
    animation: popup-slide-up 2.5s ease-out forwards;
    transform-origin: center center;
}

@keyframes popup-slide-up {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.8) rotate(var(--rotation));
    }
    15% {
        opacity: 1;
        transform: translateY(0) scale(1.05) rotate(var(--rotation));
    }
    30% {
        transform: translateY(-3px) scale(1) rotate(var(--rotation));
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-30px) scale(0.95) rotate(var(--rotation));
    }
}

@keyframes popup-float {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.5);
    }
    15% {
        opacity: 1;
        transform: translateY(0) scale(1.1);
    }
    30% {
        transform: translateY(-5px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }
}

/* The poker table frame - CRT monitor style but looks like a poker table */
.monitor-frame {
    /* Dark CRT-style frame with poker table vibes */
    background: linear-gradient(180deg,
        #1a1a2e 0%,
        #16162a 30%,
        #121225 60%,
        #0e0e1c 100%);
    border-radius: 20px;
    padding: clamp(8px, 1.5vh, 16px);
    box-shadow:
        /* CRT monitor beveled edge */
        inset 0 2px 4px rgba(255,255,255,0.08),
        inset 0 -4px 8px rgba(0,0,0,0.5),
        /* Outer frame */
        0 0 0 3px #0a0a14,
        0 0 0 5px #2a2a4a,
        0 0 0 7px #0a0a14,
        /* Table shadow - 2.5D depth */
        0 15px 40px rgba(0,0,0,0.5),
        0 5px 20px rgba(0,0,0,0.3);
    position: relative;
    /* Subtle 2.5D perspective tilt - like looking at a table */
    transform: rotateX(4deg);
    transform-style: preserve-3d;
}

/* Subtle texture on frame */
.monitor-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 2px,
            rgba(255,255,255,0.01) 2px,
            rgba(255,255,255,0.01) 3px);
    border-radius: 20px;
    pointer-events: none;
}

/* Gold/brass accent trim - casino style */
.monitor-frame::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 16px;
    pointer-events: none;
}

/* The poker table surface - green felt play area */
.monitor-screen {
    /* Green felt poker table surface */
    background:
        /* Felt grain pattern */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='rgba(255,255,255,0.015)'/%3E%3Crect x='2' y='2' width='1' height='1' fill='rgba(0,0,0,0.02)'/%3E%3C/svg%3E"),
        /* Overhead light reflection */
        radial-gradient(ellipse at 50% 30%, rgba(100,180,120,0.1) 0%, transparent 50%),
        /* Green felt base */
        linear-gradient(180deg,
            #1a5c3a 0%,
            #155030 40%,
            #124428 70%,
            #0f3820 100%);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow:
        /* Sunken felt effect */
        inset 0 3px 12px rgba(0,0,0,0.35),
        inset 0 -2px 8px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    /* 3D lift */
    transform: translateZ(6px);
}

/* Celebration popup styles */
.celebration-popup.score {
    color: var(--blue-light);
    text-shadow:
        0 0 15px rgba(59, 130, 246, 0.6),
        2px 2px 0 rgba(0, 0, 0, 0.5);
}

.celebration-popup.combo {
    color: var(--orange);
    text-shadow:
        0 0 15px rgba(255, 150, 50, 0.6),
        2px 2px 0 rgba(0, 0, 0, 0.5);
}

.celebration-popup.big {
    color: var(--purple);
    text-shadow:
        0 0 20px rgba(139, 92, 246, 0.7),
        3px 3px 0 rgba(0, 0, 0, 0.5);
}

.celebration-popup.jackpot {
    color: var(--gold);
    text-shadow:
        0 0 25px rgba(255, 215, 0, 0.8),
        0 0 50px rgba(255, 215, 0, 0.4),
        3px 3px 0 #8B4513;
}

.celebration-popup.hand {
    color: var(--cyan);
    text-shadow:
        0 0 12px rgba(34, 211, 238, 0.6),
        2px 2px 0 rgba(0, 0, 0, 0.5);
}

/* Scanlines */
.monitor-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0.1) 0px,
        rgba(0,0,0,0.1) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: 10;
}

/* Screen glare */
.monitor-glare {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.03) 0%,
        transparent 40%,
        transparent 60%,
        rgba(255,255,255,0.01) 100%
    );
    pointer-events: none;
    z-index: 11;
}

/* Score bar inside felt center */
.score-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8vw;
    padding: 0.6vh 1vw;
    background: rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(100,180,120,0.25);
    flex-shrink: 0;
}

.score-current,
.score-target {
    font-family: var(--font-pixel);
    font-size: clamp(12px, 1.8vh, 22px);
}

.score-current {
    color: #80ff80;
    text-shadow: 0 0 8px rgba(100,255,100,0.4);
}
.score-divider {
    color: rgba(100,200,120,0.5);
    font-size: clamp(10px, 1.4vh, 16px);
}
.score-target {
    color: rgba(150,220,170,0.7);
}

.score-progress-mini {
    width: clamp(50px, 6vw, 100px);
    height: clamp(5px, 0.8vh, 10px);
    background: rgba(0,40,20,0.7);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(100,180,120,0.3);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2a8a4a, #4ade80);
    width: 0%;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(74,222,128,0.4);
}

/* Grid wrapper - inside felt center */
.grid-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5vh;
    min-height: 0;
    position: relative;
}

/* Monitor base */
.monitor-base {
    width: 30%;
    height: clamp(8px, 1.2vh, 16px);
    background: linear-gradient(180deg, #333 0%, #1a1a1a 100%);
    border-radius: 0 0 8px 8px;
    margin-top: -2px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

/* ==================== BOTTOM AREA ==================== */
.bottom-area {
    grid-row: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vh;
    padding: 1vh 0;
    width: 100%;
}

/* Hotkey bar */
.hotkey-bar {
    display: flex;
    gap: 1.5vw;
    background: rgba(0,0,0,0.4);
    padding: 0.5vh 1.5vw;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.05);
}

.hotkey-item {
    display: flex;
    align-items: center;
    gap: 0.3vw;
    font-family: var(--font-retro);
    font-size: clamp(10px, 1.2vh, 14px);
    color: var(--text-dim);
}

.hotkey-item kbd {
    font-size: clamp(8px, 1vh, 12px);
    padding: 0.2vh 0.4vw;
    min-width: 1.5vw;
}

/* Left Panel - Balatro-style */
.left-panel {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    overflow-y: auto;
}

/* Panel base style - Card-like appearance */
.panel-card {
    background: linear-gradient(180deg, #1e2633 0%, #141a24 100%);
    border-radius: 12px;
    padding: var(--gap-md);
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 0 0 #0a0d12,
        0 6px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

.panel-card::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    pointer-events: none;
}

.round-info {
    text-align: center;
    background: linear-gradient(180deg, #1a2a4a 0%, #0f1a2f 100%);
    border-radius: 12px;
    padding: var(--gap-lg);
    border: 2px solid rgba(59, 130, 246, 0.2);
    box-shadow:
        0 4px 0 0 #0a1020,
        0 6px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(59, 130, 246, 0.1),
        0 0 20px rgba(59, 130, 246, 0.1);
}

.round-label {
    font-family: var(--font-pixel);
    font-size: clamp(7px, 0.9vh, 10px);
    letter-spacing: 3px;
    color: var(--blue-pale);
    text-transform: uppercase;
    opacity: 0.7;
}

.round-number {
    font-family: var(--font-pixel);
    font-size: clamp(36px, 6vh, 64px);
    color: var(--blue-light);
    line-height: 1;
    text-shadow:
        0 0 20px rgba(59, 130, 246, 0.5),
        3px 3px 0 var(--blue-dark);
    margin: var(--gap-xs) 0;
}

.ante-label {
    font-family: var(--font-pixel);
    font-size: clamp(9px, 1.1vh, 13px);
    color: var(--text-dim);
    letter-spacing: 2px;
}

.ante-label span {
    color: var(--blue-light);
}

.score-section {
    background: linear-gradient(180deg, #1e2633 0%, #141a24 100%);
    border-radius: 12px;
    padding: var(--gap-md);
    border: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 0 0 #0a0d12,
        0 6px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

.score-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gap-sm) 0;
}

.score-item.target {
    border-top: 2px solid rgba(255, 215, 0, 0.2);
    margin-top: var(--gap-xs);
    padding-top: var(--gap-md);
}

.score-label {
    font-family: var(--font-pixel);
    font-size: clamp(7px, 0.9vh, 10px);
    letter-spacing: 1px;
    color: var(--text-dim);
    text-transform: uppercase;
}

.score-value {
    font-family: var(--font-pixel);
    font-size: clamp(16px, 2.2vh, 26px);
    color: var(--text-bright);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.score-item.target .score-label {
    color: rgba(255, 215, 0, 0.6);
}

.score-item.target .score-value {
    color: var(--gold);
    text-shadow:
        2px 2px 0 #8B4513,
        0 0 15px rgba(255, 215, 0, 0.4);
}

.score-progress {
    height: clamp(10px, 1.2vh, 16px);
    background: #0a0d12;
    margin-top: var(--gap-md);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #1e40af 0%, var(--blue-medium) 50%, var(--blue-light) 100%);
    width: 0%;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    border-radius: 8px;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 100%);
    border-radius: 8px 8px 0 0;
}

.progress-bar.danger {
    background: linear-gradient(90deg, #7f1d1d 0%, var(--red) 50%, #f87171 100%);
}

.progress-bar.success {
    background: linear-gradient(90deg, #14532d 0%, var(--green) 50%, #4ade80 100%);
    animation: progress-glow 1s infinite;
}

@keyframes progress-glow {
    0%, 100% { box-shadow: 0 0 10px var(--green); }
    50% { box-shadow: 0 0 25px var(--green); }
}

.money-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
    padding: var(--gap-md) var(--gap-lg);
    background: linear-gradient(180deg, #3d3000 0%, #2a2000 100%);
    border-radius: 12px;
    border: 2px solid rgba(255, 215, 0, 0.25);
    box-shadow:
        0 4px 0 0 #1a1400,
        0 6px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 215, 0, 0.1),
        0 0 20px rgba(255, 215, 0, 0.1);
}

.money-icon {
    font-family: var(--font-pixel);
    font-size: clamp(22px, 3.5vh, 36px);
    color: var(--gold);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.money-value {
    font-family: var(--font-pixel);
    font-size: clamp(20px, 3vh, 32px);
    color: var(--gold);
    text-shadow:
        2px 2px 0 #8B4513,
        0 0 15px rgba(255, 215, 0, 0.4);
}

.multiplier-display {
    background: linear-gradient(180deg, #1e2633 0%, #141a24 100%);
    border-radius: 12px;
    padding: var(--gap-md);
    border: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 0 0 #0a0d12,
        0 6px 12px rgba(0, 0, 0, 0.4);
}

.mult-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gap-xs) 0;
}

.mult-label {
    font-family: var(--font-pixel);
    font-size: clamp(7px, 0.8vh, 9px);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mult-value {
    font-family: var(--font-pixel);
    font-size: clamp(14px, 1.8vh, 20px);
    color: var(--red);
    text-shadow:
        2px 2px 0 rgba(0, 0, 0, 0.5),
        0 0 10px rgba(239, 68, 68, 0.3);
}

/* Statistics Section */
.stats-section {
    background: linear-gradient(180deg, #1e2633 0%, #141a24 100%);
    border-radius: 12px;
    padding: var(--gap-md);
    border: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 0 0 #0a0d12,
        0 6px 12px rgba(0, 0, 0, 0.4);
}

.stats-section .section-header {
    color: var(--text-dim);
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
    padding-bottom: var(--gap-sm);
    margin-bottom: var(--gap-md);
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gap-xs) 0;
}

.stat-label {
    font-family: var(--font-retro);
    font-size: clamp(11px, 1.3vh, 15px);
    color: var(--text-dim);
}

.stat-value {
    font-family: var(--font-pixel);
    font-size: clamp(10px, 1.2vh, 14px);
    color: var(--blue-light);
}

/* Balatro-style Chips & Mult display */
.chips-mult-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-md);
    padding: var(--gap-md);
    background: linear-gradient(180deg, #1e2633 0%, #141a24 100%);
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 0 0 #0a0d12,
        0 6px 12px rgba(0, 0, 0, 0.4);
}

.chip-value {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--gap-sm) var(--gap-md);
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 8px;
    border: 2px solid rgba(59, 130, 246, 0.3);
    box-shadow:
        0 3px 0 0 #1e40af,
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
        0 0 15px rgba(59, 130, 246, 0.3);
}

.chip-value .value {
    font-family: var(--font-pixel);
    font-size: clamp(16px, 2.2vh, 26px);
    color: white;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

.chip-value .label {
    font-family: var(--font-pixel);
    font-size: clamp(8px, 1vh, 12px);
    color: var(--blue-pale);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mult-x-display {
    font-family: var(--font-pixel);
    font-size: clamp(18px, 2.5vh, 28px);
    color: var(--text-dim);
    text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

.mult-value-big {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--gap-sm) var(--gap-md);
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
    border-radius: 8px;
    border: 2px solid rgba(239, 68, 68, 0.3);
    box-shadow:
        0 3px 0 0 #991b1b,
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
        0 0 15px rgba(239, 68, 68, 0.3);
}

.mult-value-big .value {
    font-family: var(--font-pixel);
    font-size: clamp(16px, 2.2vh, 26px);
    color: white;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

.mult-value-big .label {
    font-family: var(--font-pixel);
    font-size: clamp(8px, 1vh, 12px);
    color: #fca5a5;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Center Panel */
.center-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
    overflow: visible;
}

/* Right Panel - Balatro-style */
.right-panel {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    overflow-y: auto;
}

.joker-section,
.consumable-section,
.hand-section {
    background: linear-gradient(180deg, #1e2633 0%, #141a24 100%);
    border-radius: 12px;
    padding: var(--gap-md);
    border: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 0 0 #0a0d12,
        0 6px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

/* Section header styling for right panel */
.joker-section .section-header,
.consumable-section .section-header,
.hand-section .section-header {
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
    padding-bottom: var(--gap-sm);
    margin-bottom: var(--gap-md);
}

.joker-section {
    border-color: rgba(139, 92, 246, 0.2);
    background: linear-gradient(180deg, #231e33 0%, #171424 100%);
}

.joker-section .section-header {
    color: var(--purple);
    border-color: rgba(139, 92, 246, 0.15);
}

.consumable-section {
    border-color: rgba(34, 211, 238, 0.2);
    background: linear-gradient(180deg, #1e2a33 0%, #141e24 100%);
}

.consumable-section .section-header {
    color: var(--cyan);
    border-color: rgba(34, 211, 238, 0.15);
}

.hand-section {
    border-color: rgba(59, 130, 246, 0.2);
    background: linear-gradient(180deg, #1a2a4a 0%, #0f1a2f 100%);
}

.hand-section .section-header {
    color: var(--blue-light);
    border-color: rgba(59, 130, 246, 0.15);
}

.joker-slots,
.consumable-slots {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    min-height: calc(var(--card-height) * 0.5 + var(--gap-sm));
}

.card-hand {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    min-height: calc(var(--card-height) * 0.5 + var(--gap-sm));
}

.hand-count {
    font-family: var(--font-pixel);
    font-size: clamp(8px, 1vh, 11px);
    color: var(--blue-pale);
    opacity: 0.7;
}

/* Boss Screen */
#boss-screen {
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #1a0a0a 0%, #0a0a0f 100%);
    overflow: hidden;
}

.boss-content {
    text-align: center;
    max-width: 95vw;
    max-height: 95vh;
    padding: clamp(16px, 3vh, 48px);
    animation: boss-entrance 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes boss-entrance {
    0% { transform: scale(0.5) translateY(-50px); opacity: 0; }
    50% { transform: scale(1.1) translateY(10px); opacity: 1; }
    100% { transform: scale(1) translateY(0); }
}

.boss-label {
    font-family: var(--font-pixel);
    font-size: clamp(12px, 1.5vh, 18px);
    color: var(--red);
    letter-spacing: 4px;
    margin-bottom: var(--gap-sm);
}

.boss-name {
    font-family: var(--font-pixel);
    font-size: clamp(28px, 5vh, 48px);
    color: var(--text-bright);
    text-shadow: 
        0 0 20px var(--red),
        4px 4px 0 #7f1d1d;
    margin-bottom: var(--gap-md);
    animation: boss-pulse 2s infinite;
}

@keyframes boss-pulse {
    0%, 100% { 
        text-shadow: 0 0 20px var(--red), 4px 4px 0 #7f1d1d;
        transform: scale(1);
    }
    50% { 
        text-shadow: 0 0 40px var(--red), 0 0 60px #7f1d1d, 4px 4px 0 #7f1d1d;
        transform: scale(1.02);
    }
}

.boss-effect {
    font-family: var(--font-retro);
    font-size: clamp(16px, 2.5vh, 24px);
    color: var(--text-medium);
    margin-bottom: var(--gap-lg);
    max-width: 400px;
}

.boss-reward {
    font-family: var(--font-pixel);
    font-size: clamp(14px, 1.8vh, 20px);
    color: var(--gold);
    margin-bottom: var(--gap-xl);
}

.reward-value {
    text-shadow: 0 0 10px var(--gold);
}

/* Game Over Screen */
#gameover-screen {
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #0a0a15 0%, #000 100%);
    overflow: hidden;
}

.gameover-content {
    text-align: center;
    max-width: 95vw;
    max-height: 95vh;
    padding: clamp(16px, 3vh, 48px);
    animation: gameover-fade 1s ease;
}

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

.gameover-title {
    font-family: var(--font-pixel);
    font-size: clamp(28px, 5vh, 48px);
    color: var(--red);
    text-shadow: 
        0 0 20px var(--red),
        4px 4px 0 #7f1d1d;
    margin-bottom: var(--gap-xl);
}

.final-stats {
    background: var(--bg-medium);
    padding: var(--gap-lg);
    margin-bottom: var(--gap-xl);
    min-width: clamp(250px, 30vw, 350px);
    box-shadow: 
        inset -4px -4px 0 0 #0a0a0f,
        inset 4px 4px 0 0 #2a2a3a,
        0 0 0 3px var(--border-color),
        4px 4px 0 0 rgba(0, 0, 0, 0.4);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: var(--gap-sm) 0;
    border-bottom: 2px solid var(--border-color);
    font-family: var(--font-retro);
    font-size: clamp(16px, 2vh, 22px);
}

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

.stat-row span:last-child {
    font-family: var(--font-pixel);
    color: var(--blue-light);
}

/* How To Play Screen */
#howto-screen {
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 1.5vh, 24px);
    overflow: hidden;
}

.howto-content {
    max-width: min(900px, 95vw);
    max-height: 95vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.howto-content h2 {
    font-family: var(--font-pixel);
    font-size: clamp(14px, 2.5vh, 28px);
    color: var(--blue-light);
    text-align: center;
    margin-bottom: clamp(8px, 1.5vh, 24px);
    text-shadow: 3px 3px 0 var(--blue-dark);
    flex-shrink: 0;
}

.howto-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(6px, 1vh, 16px);
    margin-bottom: clamp(8px, 1.5vh, 24px);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.howto-section {
    background: var(--bg-medium);
    padding: clamp(6px, 1vh, 16px);
    box-shadow:
        inset -4px -4px 0 0 #0a0a0f,
        inset 4px 4px 0 0 #2a2a3a,
        0 0 0 3px var(--border-color),
        4px 4px 0 0 rgba(0, 0, 0, 0.4);
}

.howto-section h3 {
    font-family: var(--font-pixel);
    font-size: clamp(8px, 1vh, 12px);
    color: var(--blue-light);
    margin-bottom: clamp(4px, 0.6vh, 10px);
    padding-bottom: clamp(2px, 0.4vh, 6px);
    border-bottom: 3px solid var(--blue-dark);
}

.howto-section p {
    font-family: var(--font-retro);
    font-size: clamp(12px, 1.5vh, 18px);
    color: var(--text-medium);
    line-height: 1.4;
}

.howto-section ul {
    list-style: none;
}

.howto-section li {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: clamp(2px, 0.3vh, 4px) 0;
    font-family: var(--font-retro);
    font-size: clamp(12px, 1.5vh, 18px);
    color: var(--text-medium);
}

/* Card Popup */
.card-popup {
    position: fixed;
    z-index: 1500;
    pointer-events: none;
    animation: popup-appear 0.2s ease;
}

@keyframes popup-appear {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.card-popup-content {
    background: var(--bg-dark);
    padding: var(--gap-md);
    min-width: 200px;
    max-width: 300px;
    box-shadow: 
        inset -4px -4px 0 0 #050508,
        inset 4px 4px 0 0 #1a1a25,
        0 0 0 3px var(--blue-medium),
        6px 6px 0 0 rgba(0, 0, 0, 0.5),
        0 0 30px rgba(59, 130, 246, 0.3);
}

.card-popup-header {
    font-family: var(--font-pixel);
    font-size: clamp(10px, 1.2vh, 14px);
    color: var(--text-bright);
    margin-bottom: var(--gap-xs);
}

.card-popup-type {
    font-family: var(--font-pixel);
    font-size: clamp(8px, 0.9vh, 10px);
    color: var(--purple);
    text-transform: uppercase;
    margin-bottom: var(--gap-sm);
}

.card-popup-desc {
    font-family: var(--font-retro);
    font-size: clamp(14px, 1.6vh, 18px);
    color: var(--text-medium);
    margin-bottom: var(--gap-sm);
}

.card-popup-effect {
    font-family: var(--font-retro);
    font-size: clamp(12px, 1.4vh, 16px);
    color: var(--blue-light);
    padding-top: var(--gap-xs);
    border-top: 2px solid var(--border-color);
}

/* Toast Notifications - Bottom right corner */
.toast-container {
    position: fixed;
    bottom: var(--gap-xl);
    right: var(--gap-lg);
    z-index: 2000;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--gap-sm);
    max-width: 280px;
}

.toast {
    background: var(--bg-dark);
    padding: var(--gap-sm) var(--gap-lg);
    font-family: var(--font-pixel);
    font-size: clamp(10px, 1.2vh, 14px);
    color: var(--text-bright);
    animation: toast-in 0.3s ease, toast-out 0.3s ease 2.7s forwards;
    box-shadow: 
        inset -3px -3px 0 0 #050508,
        inset 3px 3px 0 0 #1a1a25,
        0 0 0 3px var(--border-color),
        4px 4px 0 0 rgba(0, 0, 0, 0.4);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(30px); }
}

.toast.success {
    box-shadow: 
        inset -3px -3px 0 0 #14532d,
        inset 3px 3px 0 0 #22c55e,
        0 0 0 3px var(--green),
        4px 4px 0 0 rgba(0, 0, 0, 0.4),
        0 0 20px rgba(34, 197, 94, 0.3);
}

.toast.error {
    box-shadow: 
        inset -3px -3px 0 0 #7f1d1d,
        inset 3px 3px 0 0 #ef4444,
        0 0 0 3px var(--red),
        4px 4px 0 0 rgba(0, 0, 0, 0.4),
        0 0 20px rgba(239, 68, 68, 0.3);
}

.toast.warning {
    box-shadow: 
        inset -3px -3px 0 0 #78350f,
        inset 3px 3px 0 0 #fbbf24,
        0 0 0 3px var(--yellow),
        4px 4px 0 0 rgba(0, 0, 0, 0.4),
        0 0 20px rgba(251, 191, 36, 0.3);
}

.toast.info {
    box-shadow: 
        inset -3px -3px 0 0 #1e3a8a,
        inset 3px 3px 0 0 #3b82f6,
        0 0 0 3px var(--blue-medium),
        4px 4px 0 0 rgba(0, 0, 0, 0.4),
        0 0 20px rgba(59, 130, 246, 0.3);
}

.toast.jackpot {
    background: linear-gradient(135deg, #3d2f00 0%, #1a1400 100%);
    color: var(--gold);
    animation: toast-in 0.3s ease, jackpot-flash 0.5s ease, toast-out 0.3s ease 3.7s forwards;
    box-shadow: 
        inset -3px -3px 0 0 #78350f,
        inset 3px 3px 0 0 #fbbf24,
        0 0 0 3px var(--gold),
        4px 4px 0 0 rgba(0, 0, 0, 0.4),
        0 0 40px rgba(255, 215, 0, 0.5);
}

@keyframes jackpot-flash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
}

/* Streak Display */
.streak-display {
    position: fixed;
    top: 50%;
    right: var(--gap-xl);
    transform: translateY(-50%);
    font-family: var(--font-pixel);
    font-size: clamp(16px, 2.5vh, 28px);
    color: var(--orange);
    text-shadow: 
        0 0 10px var(--orange),
        3px 3px 0 #7c2d12;
    animation: streak-fire 0.5s infinite;
    z-index: 100;
}

.streak-display.hot {
    color: var(--red);
    font-size: clamp(20px, 3vh, 36px);
    animation: streak-fire 0.3s infinite;
}

.streak-display.blazing {
    color: var(--gold);
    font-size: clamp(24px, 4vh, 44px);
    animation: jackpot 1s infinite;
}

/* Floating Chips */
.floating-chip {
    position: fixed;
    font-size: clamp(20px, 3vh, 32px);
    pointer-events: none;
    z-index: 1000;
    animation: chip-float 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes chip-float {
    0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translateY(-100px) scale(0.5) rotate(360deg); opacity: 0; }
}

/* Mode badges */
.mode-badge {
    position: absolute;
    top: var(--gap-sm);
    left: var(--gap-sm);
    font-family: var(--font-pixel);
    font-size: clamp(8px, 1vh, 11px);
    padding: 2px 8px;
    background: var(--purple);
    color: white;
    text-transform: uppercase;
    z-index: 100;
}

.mode-badge.endless {
    background: var(--cyan);
}

.mode-badge.campaign {
    background: var(--gold);
    color: #1c1917;
}

/* ==================== HELP OVERLAY ==================== */
.help-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: help-fade-in 0.2s ease;
}

.help-overlay.hidden {
    display: none;
}

@keyframes help-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.help-content {
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-medium);
    padding: var(--gap-xl);
    box-shadow:
        inset -4px -4px 0 0 #0a0a0f,
        inset 4px 4px 0 0 #2a2a3a,
        0 0 0 4px var(--blue-medium),
        8px 8px 0 0 rgba(0, 0, 0, 0.5),
        0 0 60px rgba(59, 130, 246, 0.3);
}

.help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--gap-xl);
    padding-bottom: var(--gap-md);
    border-bottom: 3px solid var(--blue-dark);
}

.help-header h2 {
    font-family: var(--font-pixel);
    font-size: clamp(16px, 2.5vh, 28px);
    color: var(--blue-light);
    text-shadow: 3px 3px 0 var(--blue-dark);
    margin: 0;
}

.help-close-hint {
    font-family: var(--font-retro);
    font-size: clamp(12px, 1.5vh, 18px);
    color: var(--text-dim);
}

.help-close-hint kbd {
    margin: 0 2px;
}

.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--gap-lg);
}

.help-section {
    background: var(--bg-dark);
    padding: var(--gap-md);
    box-shadow:
        inset -3px -3px 0 0 #050508,
        inset 3px 3px 0 0 #1a1a25,
        0 0 0 2px var(--border-color);
}

.help-section h3 {
    font-family: var(--font-pixel);
    font-size: clamp(8px, 1vh, 12px);
    color: var(--blue-light);
    letter-spacing: 2px;
    margin-bottom: var(--gap-md);
    padding-bottom: var(--gap-xs);
    border-bottom: 2px solid var(--blue-dark);
}

/* Controls list */
.help-controls-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.help-control {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
}

.help-keys {
    display: flex;
    gap: 2px;
    min-width: 100px;
}

.help-control span {
    font-family: var(--font-retro);
    font-size: clamp(14px, 1.6vh, 20px);
    color: var(--text-medium);
}

/* Poker hands list */
.help-hands-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.help-hand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gap-xs) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.help-hand:last-child {
    border-bottom: none;
}

.help-hand .hand-name {
    font-family: var(--font-retro);
    font-size: clamp(14px, 1.5vh, 18px);
    color: var(--text-medium);
}

.help-hand .hand-mult {
    font-family: var(--font-pixel);
    font-size: clamp(8px, 0.9vh, 11px);
    color: var(--text-dim);
}

.help-hand.royal .hand-name {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.help-hand.royal .hand-mult {
    color: var(--gold);
}

/* Tips list */
.help-tips {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-tips li {
    font-family: var(--font-retro);
    font-size: clamp(14px, 1.5vh, 18px);
    color: var(--text-medium);
    padding: var(--gap-xs) 0;
    padding-left: var(--gap-md);
    position: relative;
}

.help-tips li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--blue-light);
    font-family: var(--font-pixel);
}

/* ==================== MONEY ANIMATIONS ==================== */

/* Money bar styling */
.money-bar .money-prefix {
    color: var(--gold);
    font-size: 0.9em;
}

.money-bar .money-earned {
    color: #80ff80;
    text-shadow: 0 0 10px rgba(100, 255, 100, 0.5);
}

.money-bar .money-target {
    color: rgba(255, 215, 0, 0.8);
}

/* Money tally animation - Minecraft XP style */
.money-tally {
    animation: money-tally-pulse 0.15s ease-out infinite;
}

@keyframes money-tally-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

/* Money spend animation - red flash and shrink */
.money-spend {
    animation: money-spend-flash 0.4s ease-out;
}

@keyframes money-spend-flash {
    0% {
        filter: brightness(1);
        transform: scale(1);
    }
    25% {
        filter: brightness(0.6) saturate(0.5);
        transform: scale(0.9);
        color: #ef4444;
    }
    100% {
        filter: brightness(1);
        transform: scale(1);
    }
}

/* Round money display enhanced styling */
#round-money-display {
    transition: transform 0.1s ease, color 0.3s ease;
}

#round-money-display.money-tally {
    color: #4ade80;
    text-shadow:
        0 0 15px rgba(74, 222, 128, 0.8),
        0 0 30px rgba(74, 222, 128, 0.4);
}

/* Progress bar success glow for money */
.money-bar .progress-fill.success {
    background: linear-gradient(90deg, #15803d, #22c55e, #4ade80);
    box-shadow:
        0 0 12px rgba(74, 222, 128, 0.6),
        0 0 24px rgba(74, 222, 128, 0.3);
    animation: money-progress-glow 1s ease-in-out infinite;
}

@keyframes money-progress-glow {
    0%, 100% {
        box-shadow:
            0 0 12px rgba(74, 222, 128, 0.6),
            0 0 24px rgba(74, 222, 128, 0.3);
    }
    50% {
        box-shadow:
            0 0 20px rgba(74, 222, 128, 0.8),
            0 0 40px rgba(74, 222, 128, 0.5);
    }
}

/* Wallet money display styling */
.money-display {
    transition: transform 0.1s ease;
}

.money-display.money-spend {
    animation: wallet-spend 0.4s ease-out;
}

@keyframes wallet-spend {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    30% {
        transform: scale(0.85);
        filter: brightness(0.7) hue-rotate(-30deg);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* ===== ENDLESS MODE (NEW) STYLES ===== */
/* NEW Endless mode: shows jokers, money, but hides round/ante/score bar */
#game-screen.mode-endless .round-display,
#game-screen.mode-endless .ante-display,
#game-screen.mode-endless .score-bar.money-bar {
    display: none !important;
}

/* Hide end round hotkey in endless mode (no rounds to end) */
#game-screen.mode-endless .hotkey-item:nth-child(3) {
    display: none !important;
}

/* Center the money display when round/ante are hidden */
#game-screen.mode-endless .center-info {
    justify-content: center;
}

#game-screen.mode-endless .money-display {
    font-size: 1.3em;
}

/* ==================== MENU GRID BACKGROUND ==================== */
/* Infinite grid with GTA Online style zoom cycle */
.menu-grid-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.menu-grid-bg {
    position: absolute;
    /* Huge grid for fine resolution when zoomed out */
    width: 500vmax;
    height: 500vmax;
    top: 50%;
    left: 50%;
    /* Default: zoomed out, centered */
    transform: translate(-50%, -50%) scale(0.35);
    transform-origin: center center;
    display: grid;
    /* 40x40 optimized grid */
    grid-template-columns: repeat(40, 1fr);
    grid-template-rows: repeat(40, 1fr);
    gap: 3px;
    padding: 6px;
    background: #080e18;
    /* Smooth zoom & pan - GTA Online pacing */
    transition: transform 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-grid-bg .grid-cell-bg {
    background: rgba(10, 50, 30, 0.5);
    border: 1px solid rgba(30, 80, 50, 0.4);
    border-radius: 3px;
    transition: all 0.25s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Set font-size relative to cell width for consistent scaling */
    font-size: min(2.5cqw, 10px);
    container-type: size;
}

/* Filled cells - Card-like with beveled 3D top-down effect */
.menu-grid-bg .grid-cell-bg.filled {
    border-radius: 4px;
    border-width: 2px;
    /* Beveled raised card effect - top-down view */
    box-shadow:
        /* Inner bevel - raised edges */
        inset 3px 3px 0 0 rgba(255, 255, 255, 0.4),
        inset -3px -3px 0 0 rgba(0, 0, 0, 0.3),
        inset 1px 1px 3px 0 rgba(255, 255, 255, 0.2),
        inset -1px -1px 3px 0 rgba(0, 0, 0, 0.2),
        /* Outer drop shadow */
        0 3px 0 0 rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Suit symbols in cells - positioned bottom-right, scales with cell */
.menu-grid-bg .grid-cell-bg.filled::after {
    content: attr(data-suit);
    /* Use container query units for bulletproof scaling (45% of cell width) */
    font-size: 45cqw;
    color: rgba(255, 255, 255, 0.95);
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(0, 0, 0, 0.5);
    position: absolute;
    /* Position in bottom-right corner */
    bottom: 1%;
    right: 5%;
    line-height: 1;
    /* Ensure text aligns from bottom-right corner */
    text-align: right;
}

/* Rank numbers in cells - positioned top-left, scales with cell */
.menu-grid-bg .grid-cell-bg.filled::before {
    content: attr(data-rank);
    font-family: var(--font-pixel), 'Arial Black', sans-serif;
    /* Use container query units for bulletproof scaling (38% of cell width) */
    font-size: 38cqw;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.98);
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.95),
        0 2px 4px rgba(0, 0, 0, 0.7);
    position: absolute;
    /* Anchor to top-left corner */
    top: 2%;
    left: 5%;
    line-height: 1;
}

.menu-grid-bg .grid-cell-bg.filled.hearts {
    background: linear-gradient(135deg, #fca5a5 0%, #ef4444 30%, #dc2626 70%, #b91c1c 100%);
    border-color: #fecaca;
    box-shadow:
        inset 3px 3px 0 0 rgba(255, 200, 200, 0.5),
        inset -3px -3px 0 0 rgba(127, 29, 29, 0.5),
        inset 1px 1px 4px 0 rgba(255, 180, 180, 0.3),
        inset -1px -1px 4px 0 rgba(127, 29, 29, 0.3),
        0 3px 0 0 #991b1b,
        0 4px 8px rgba(0, 0, 0, 0.35);
}

.menu-grid-bg .grid-cell-bg.filled.diamonds {
    background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 30%, #2563eb 70%, #1d4ed8 100%);
    border-color: #bfdbfe;
    box-shadow:
        inset 3px 3px 0 0 rgba(191, 219, 254, 0.5),
        inset -3px -3px 0 0 rgba(30, 64, 175, 0.5),
        inset 1px 1px 4px 0 rgba(147, 197, 253, 0.3),
        inset -1px -1px 4px 0 rgba(30, 64, 175, 0.3),
        0 3px 0 0 #1e40af,
        0 4px 8px rgba(0, 0, 0, 0.35);
}

.menu-grid-bg .grid-cell-bg.filled.clubs {
    background: linear-gradient(135deg, #86efac 0%, #22c55e 30%, #16a34a 70%, #15803d 100%);
    border-color: #bbf7d0;
    box-shadow:
        inset 3px 3px 0 0 rgba(187, 247, 208, 0.5),
        inset -3px -3px 0 0 rgba(21, 128, 61, 0.5),
        inset 1px 1px 4px 0 rgba(134, 239, 172, 0.3),
        inset -1px -1px 4px 0 rgba(21, 128, 61, 0.3),
        0 3px 0 0 #166534,
        0 4px 8px rgba(0, 0, 0, 0.35);
}

.menu-grid-bg .grid-cell-bg.filled.spades {
    background: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 30%, #7c3aed 70%, #6d28d9 100%);
    border-color: #ddd6fe;
    box-shadow:
        inset 3px 3px 0 0 rgba(221, 214, 254, 0.5),
        inset -3px -3px 0 0 rgba(109, 40, 217, 0.5),
        inset 1px 1px 4px 0 rgba(196, 181, 253, 0.3),
        inset -1px -1px 4px 0 rgba(109, 40, 217, 0.3),
        0 3px 0 0 #5b21b6,
        0 4px 8px rgba(0, 0, 0, 0.35);
}

.menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Vignette effect - dark at edges, clearer in center */
    background: radial-gradient(ellipse at 50% 45%,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(0, 0, 0, 0.6) 60%,
        rgba(0, 0, 0, 0.85) 100%);
    z-index: 1;
}

.menu-content {
    z-index: 2;
    position: relative;
}

/* ==================== DIFFICULTY SELECTION ==================== */
.difficulty-selection {
    margin-top: var(--gap-lg);
    text-align: center;
}

.difficulty-header {
    font-family: var(--font-pixel);
    font-size: clamp(12px, 1.5vh, 16px);
    color: var(--text-dim);
    letter-spacing: 3px;
    margin-bottom: var(--gap-md);
}

.difficulty-buttons {
    display: flex;
    gap: var(--gap-md);
    justify-content: center;
}

.difficulty-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--gap-md) var(--gap-lg);
    min-width: 140px;
}

.difficulty-name {
    font-family: var(--font-pixel);
    font-size: clamp(11px, 1.3vh, 14px);
    color: var(--text-bright);
}

.difficulty-desc {
    font-family: var(--font-retro);
    font-size: clamp(9px, 1.1vh, 12px);
    color: var(--text-dim);
}

.difficulty-button.brutal {
    border-color: #dc2626;
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.2) 0%, rgba(153, 27, 27, 0.3) 100%);
}

.difficulty-button.brutal:hover {
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.3) 0%, rgba(153, 27, 27, 0.4) 100%);
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.4);
}

/* Campaign mode button style (default - blue) */
.mode-button#btn-campaign {
    border-color: #3b82f6;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.25) 100%);
}

.mode-button#btn-campaign:hover {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.35) 100%);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.mode-button#btn-campaign .mode-icon {
    color: #60a5fa;
}

/* Endless mode button style (gold) */
.mode-button.gold {
    border-color: #f59e0b;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.25) 100%);
}

.mode-button.gold:hover {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.35) 100%);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.mode-button.gold .mode-icon {
    color: #fbbf24;
}

/* Zen mode button style (teal) */
.mode-button.zen {
    border-color: #14b8a6;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.15) 0%, rgba(13, 148, 136, 0.25) 100%);
}

.mode-button.zen:hover {
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.25) 0%, rgba(13, 148, 136, 0.35) 100%);
    box-shadow: 0 0 20px rgba(20, 184, 166, 0.4);
}

.mode-button.zen .mode-icon {
    color: #2dd4bf;
}

/* ==================== HAND HISTORY ==================== */
.hand-history {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 50;
    pointer-events: none;
    opacity: 0.9;
}

.hand-history-label {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 4px;
}

.hand-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hand-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    animation: hand-entry-appear 0.3s ease-out;
}

@keyframes hand-entry-appear {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hand-entry-name {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--gold);
    letter-spacing: 0.5px;
}

.hand-entry-cards {
    display: flex;
    gap: 2px;
}

.hand-mini-card {
    width: 14px;
    height: 18px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.hand-mini-card.hearts { background: linear-gradient(145deg, #dc2626, #b91c1c); }
.hand-mini-card.diamonds { background: linear-gradient(145deg, #3b82f6, #2563eb); }
.hand-mini-card.clubs { background: linear-gradient(145deg, #22c55e, #16a34a); }
.hand-mini-card.spades { background: linear-gradient(145deg, #8b5cf6, #7c3aed); }

/* ==================== ZEN MODE STYLES ==================== */
/* Zen mode - hide all campaign/scoring UI, very minimal */
/* Zen mode - use visibility:hidden to preserve grid row spacing */
#game-screen.mode-zen .top-hud {
    visibility: hidden !important;
    /* Keep the height so grid row is preserved */
}

#game-screen.mode-zen .score-bar {
    display: none !important;
}

#game-screen.mode-zen .hand-history {
    visibility: hidden !important;
}

#game-screen.mode-zen .hotkey-bar {
    opacity: 0.3;
}

#game-screen.mode-zen .celebration-container {
    display: none !important;
}

/* Zen mode has a calmer background */
#game-screen.mode-zen .swirly-bg {
    opacity: 0.3;
}

#game-screen.mode-zen .swirl {
    animation-duration: 40s;
}

/* Endless brutal mode - show warning indicator */
#game-screen.mode-endless.difficulty-brutal .money-display {
    border: 1px solid rgba(220, 38, 38, 0.5);
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(220, 38, 38, 0.1);
}