/**
 * Video Poker - Casino Style CSS
 * Two-panel layout: Game (2/3) + Character (1/3)
 */

/* ============================================
   LOADING SCREEN - Video Cache Preloader
   ============================================ */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a0a2e 0%, #0d0015 50%, #1a0a2e 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.5s ease-out;
}

#loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

#loading-screen.hidden {
    display: none;
}

.loading-content {
    text-align: center;
    width: 80%;
    max-width: 500px;
}

.loading-title {
    font-family: 'Orbitron', monospace;
    font-size: 48px;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.3);
    margin-bottom: 40px;
    letter-spacing: 4px;
}

.loading-bar-container {
    width: 100%;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #ffd700;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

.loading-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ffd700 0%, #ffec8b 50%, #ffd700 100%);
    border-radius: 10px;
    transition: width 0.2s ease-out;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.loading-status {
    font-family: 'Orbitron', monospace;
    font-size: 18px;
    color: #fff;
    margin-top: 20px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.loading-file {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 10px;
    min-height: 20px;
}

/* ============================================
   OPENING VIDEO - Fullscreen Intro
   ============================================ */
#opening-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99998;
    transition: opacity 0.5s ease-out;
}

#opening-overlay.hidden {
    display: none;
}

#opening-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

#opening-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#opening-prompt {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', monospace;
    font-size: 28px;
    font-weight: 700;
    color: #ffd700;
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.6),
        0 0 30px rgba(255, 215, 0, 0.4),
        0 0 40px rgba(255, 215, 0, 0.2);
    letter-spacing: 3px;
    text-align: center;
    z-index: 10;
    animation: openingPromptPulse 1.5s ease-in-out infinite;
}

@keyframes openingPromptPulse {
    0%, 100% {
        opacity: 0.6;
        text-shadow:
            0 0 10px rgba(255, 215, 0, 0.6),
            0 0 20px rgba(255, 215, 0, 0.4),
            0 0 30px rgba(255, 215, 0, 0.2);
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 1;
        text-shadow:
            0 0 15px rgba(255, 215, 0, 1),
            0 0 30px rgba(255, 215, 0, 0.8),
            0 0 45px rgba(255, 215, 0, 0.6),
            0 0 60px rgba(255, 215, 0, 0.4);
        transform: translateX(-50%) scale(1.02);
    }
}

/* Title screen fade-in from opening */
/* Only fade the content, keep the background solid to hide game-container */
#title-screen.opening-fade-in {
    /* Background stays visible immediately */
    background: #000;
}

#title-screen.opening-fade-in #title-video {
    animation: titleVideoFadeIn 2s ease-out forwards;
}

#title-screen.opening-fade-in .title-screen-overlay {
    animation: titleVideoFadeIn 2s ease-out forwards;
}

#title-screen.opening-fade-in .title-screen-content {
    animation: titleContentFadeIn 2.5s ease-out forwards;
}

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

@keyframes titleContentFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    40% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   INFO BANNER - Scrolling Tips
   ============================================ */
#led-banner {
    position: absolute;
    top: -42px; /* Above the game panel */
    left: 0;
    width: 100%; /* Same width as game panel */
    height: 32px;
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    z-index: 1; /* Lowest priority - renders below all other elements */
}

#led-banner-text {
    display: inline-block;
    white-space: nowrap;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #ffcc00;
    line-height: 30px;
    padding-left: 100%;
    animation: banner-scroll 120s linear infinite;
}

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

/* Hide banner on title screen */
body.title-screen-active #led-banner {
    display: none;
}

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --neon-cyan: #00f7ff;
    --neon-cyan-glow: rgba(0, 247, 255, 0.8);
    --neon-gold: #ffd700;
    --neon-gold-glow: rgba(255, 215, 0, 0.6);
    --gold-primary: #d4a849;
    --gold-light: #f5d98a;
    --gold-dark: #8b6914;

    --green-btn: #2ecc40;
    --green-btn-dark: #1a7a25;
    --blue-btn: #0074d9;
    --blue-btn-dark: #004080;
    --red-btn: #ff4136;
    --red-btn-dark: #a62820;
    --dark-btn: #444;
    --dark-btn-dark: #222;

    --bg-dark: #0a0a12;
    --text-primary: #ffffff;
    --text-secondary: #aaaaaa;

    /* Panel dimensions - fixed pixel values for 1920x1080 design */
    --game-panel-width: 1152px;      /* 60% of 1920 */
    --character-panel-width: 576px;  /* 30% of 1920 */
}

/* ============================================
   RESET & BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Orbitron', 'Roboto Condensed', sans-serif;
    background: #000;
    color: var(--text-primary);
    user-select: none;
}

.hidden {
    display: none !important;
}

/* ============================================
   MOBILE-ONLY ELEMENTS (hidden on desktop)
   ============================================ */
#btn-music {
    display: none; /* Shown only on mobile via body.is-mobile */
}

#jukebox-backdrop,
#jukebox-popup {
    display: none; /* Mobile jukebox popup */
}

#pay-table-mobile {
    display: none; /* Mobile compact paytable */
}

#pay-table-modal {
    display: none; /* Mobile paytable modal */
}

#mobile-card-hint {
    display: none; /* Mobile card selection hint */
}

.card-hold-overlay {
    display: none; /* Mobile HOLD text on cards */
}

/* ============================================
   SCALE SYSTEM - Fixed 1920x1080 Design
   ============================================ */
#scale-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

#scale-container {
    width: 1920px;
    height: 1080px;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--bg-dark);
    overflow: hidden;
    will-change: transform;
    isolation: isolate;
}

/* ============================================
   MOBILE AUTO-ROTATION (Portrait → Landscape)
   Forces landscape display when device is in portrait mode.

   IMPORTANT: Only rotate TOP-LEVEL fixed elements.
   Child elements inherit rotation from their parent.

   Structure:
   - #loading-screen (top-level, fixed) → ROTATE
   - #opening-overlay (top-level, fixed) → ROTATE
   - #pwa-install-overlay (top-level, fixed) → ROTATE
   - #scale-wrapper (top-level, fixed) → ROTATE
     └── #scale-container (child) → inherits rotation
         ├── #title-screen (child) → inherits rotation
         └── #app-container (child) → inherits rotation
   - .character-select-overlay (top-level, fixed) → ROTATE
   ============================================ */

/* Rotation warning element - no longer used, hidden by default */
#rotate-device {
    display: none !important;
}

/* Auto-rotate on mobile portrait */
@media screen and (max-width: 900px) and (orientation: portrait) {
    /* Prevent scrolling on html/body */
    html.is-mobile,
    html.is-mobile body {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* ONLY rotate top-level fixed elements (not their children!) */
    html.is-mobile #loading-screen,
    html.is-mobile #opening-overlay,
    html.is-mobile #pwa-install-overlay,
    html.is-mobile #scale-wrapper,
    html.is-mobile .character-select-overlay {
        /* Rotate 90 degrees clockwise */
        transform: rotate(90deg) !important;
        transform-origin: top left !important;
        /* Swap dimensions: width becomes viewport height, height becomes viewport width */
        width: 100vh !important;
        height: 100vw !important;
        /* Reposition after rotation */
        top: 0 !important;
        left: 100vw !important;
        /* Ensure it's fixed positioned */
        position: fixed !important;
    }

    /* Scale container - let ScaleSystem handle transform, but ensure positioning */
    html.is-mobile #scale-container {
        /* ScaleSystem will apply transform, but ensure container fills wrapper */
        width: 1920px !important;
        height: 1080px !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        /* Center and scale to fit the rotated viewport (679x375 effective) */
        /* Scale: min(679/1920, 375/1080) = min(0.354, 0.347) = 0.347 */
        transform: translate(-50%, -50%) scale(0.347) !important;
        transform-origin: center center !important;
    }

    /* Title screen - MUST be visible and on top of app-container */
    html.is-mobile #title-screen {
        display: block !important;  /* FORCE visible - was being set to none */
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 100 !important;  /* Above app-container */
    }

    /* App container - behind title screen */
    html.is-mobile #app-container {
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 1 !important;  /* Below title-screen */
    }
}

/* ============================================
   PWA INSTALL PROMPT OVERLAY - COMPACT VERSION
   Designed to fit on small mobile screens (730x307 landscape)
   ============================================ */
#pwa-install-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 99000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

#pwa-install-overlay.hidden {
    display: none;
}

.pwa-install-content {
    text-align: center;
    padding: 15px 20px;
    max-width: 600px;
    width: 95%;
}

/* Icon hidden by default - too large for mobile */
.pwa-icon {
    display: none;
}

.pwa-title {
    font-family: 'Orbitron', monospace;
    font-size: 22px;
    color: var(--primary-gold);
    margin-bottom: 3px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.pwa-subtitle {
    font-size: 14px;
    color: #888;
    margin-bottom: 15px;
    font-style: italic;
}

.pwa-text {
    font-size: 16px;
    color: white;
    margin-bottom: 3px;
    font-family: 'Roboto Condensed', sans-serif;
}

.pwa-text-es {
    font-size: 13px;
    color: #777;
    margin-bottom: 10px;
    font-style: italic;
}

.pwa-install-btn {
    font-size: 18px;
    padding: 12px 50px;
    margin: 10px 0;
}

/* iOS Steps - Horizontal compact layout */
.pwa-ios-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 10px 0;
}

.pwa-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: white;
}

.pwa-step-icon {
    width: 45px;
    height: 45px;
    background: rgba(255, 215, 0, 0.2);
    border: 2px solid var(--primary-gold);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-step-icon svg {
    width: 24px;
    height: 24px;
    fill: var(--primary-gold);
}

.pwa-step span:last-child {
    font-size: 11px;
    color: #ccc;
}

.pwa-step-arrow {
    font-size: 20px;
    color: var(--primary-gold);
}

.pwa-hint {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

.pwa-skip-btn {
    background: transparent;
    border: 2px solid #555;
    color: #999;
    padding: 10px 30px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    cursor: pointer;
    margin-top: 15px;
    border-radius: 8px;
    transition: all 0.2s;
}

.pwa-skip-btn:hover,
.pwa-skip-btn:active {
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

/* Hide platform-specific content by default */
.pwa-android, .pwa-ios {
    display: none;
}

/* PWA Overlay - Mobile responsive (larger for small screens) */
@media screen and (max-width: 900px) and (orientation: landscape) {
    .pwa-install-content {
        padding: 20px;
        max-width: 90vw;
    }

    .pwa-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 15px;
    }

    .pwa-title {
        font-size: 24px;
        margin-bottom: 3px;
    }

    .pwa-subtitle {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .pwa-text {
        font-size: 16px;
    }

    .pwa-text-es {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .pwa-install-btn {
        font-size: 18px;
        padding: 12px 50px;
        margin: 10px 0;
    }

    .pwa-ios-steps {
        gap: 15px;
        margin: 15px 0;
    }

    .pwa-step-icon {
        width: 45px;
        height: 45px;
    }

    .pwa-step-icon svg {
        width: 25px;
        height: 25px;
    }

    .pwa-step span:last-child {
        font-size: 11px;
    }

    .pwa-step-arrow {
        font-size: 20px;
    }

    .pwa-skip-btn {
        padding: 8px 25px;
        font-size: 13px;
        margin-top: 15px;
    }
}

/* Even smaller screens (phones in landscape) */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .pwa-install-content {
        padding: 15px;
    }

    .pwa-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
    }

    .pwa-title {
        font-size: 20px;
    }

    .pwa-subtitle {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .pwa-text {
        font-size: 14px;
    }

    .pwa-text-es {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .pwa-install-btn {
        font-size: 16px;
        padding: 10px 40px;
        margin: 8px 0;
    }

    .pwa-step-icon {
        width: 40px;
        height: 40px;
    }

    .pwa-skip-btn {
        padding: 6px 20px;
        font-size: 12px;
        margin-top: 10px;
    }
}

/* ============================================
   APP CONTAINER - Main Background
   ============================================ */
#app-container {
    width: 1920px;
    height: 1080px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    background: #0f0f23 url('../assets/images/backgrounds/fondo.jpg') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
    contain: layout style;
    animation: appContainerFadeIn 0.3s ease-out;
}

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

/* ============================================
   GAME PANEL (Left - 60%)
   ============================================ */
#game-panel {
    flex: 0 0 var(--game-panel-width);
    width: var(--game-panel-width);
    min-width: var(--game-panel-width);
    max-width: var(--game-panel-width);
    height: 972px; /* 90% of 1080px */
    display: flex;
    align-items: stretch;
    position: relative; /* For LED banner positioning */
    box-sizing: border-box;
}

#game-panel-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

/* ============================================
   GOLDEN ANIMATED BORDER
   ============================================ */
.golden-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    padding: 4px;
    background: linear-gradient(90deg,
        #8b6914 0%,
        #d4a849 25%,
        #f5d98a 50%,
        #d4a849 75%,
        #8b6914 100%
    );
    z-index: 1;
    pointer-events: none;
}

.golden-border::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 16px;
    background: transparent;
}

/* Traveling light effect */
.golden-light {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.golden-light::before {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 215, 0, 0.6) 30%, transparent 70%);
    filter: blur(5px);
    animation: travelLight 4s linear infinite;
}

@keyframes travelLight {
    0% {
        top: 0;
        left: -75px;
    }
    25% {
        top: -75px;
        left: calc(100% - 75px);
    }
    50% {
        top: calc(100% - 75px);
        left: calc(100% - 75px);
    }
    75% {
        top: calc(100% - 75px);
        left: -75px;
    }
    100% {
        top: 0;
        left: -75px;
    }
}

/* ============================================
   GAME CONTAINER
   ============================================ */
#game-container {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 16px;
    overflow: hidden;
    background: #1a2a1a url('../assets/images/backgrounds/mesa.jpg') center center / cover no-repeat;
    z-index: 2;
    /* Container query for cqw/cqh units - makes them relative to this container */
    container-type: size;
}

/* ============================================
   THREE.JS CONTAINER
   ============================================ */
#three-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    cursor: pointer;
}

#three-container canvas {
    display: block;
}

/* ============================================
   GAME INTERFACE - Overlay sobre Three.js
   ============================================ */
#game-interface {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

#game-interface > * {
    pointer-events: auto;
}

/* ============================================
   SPEEDRUN TIMER - Esquina superior izquierda
   ============================================ */
#speedrun-timer {
    position: absolute;
    top: 0.8cqh;
    left: 0.8cqw;
    z-index: 30;
    background: linear-gradient(180deg, rgba(0, 40, 0, 0.9) 0%, rgba(0, 20, 0, 0.95) 100%);
    border: 3px solid #00ff00;
    border-radius: 8px;
    padding: 12px 20px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.4), inset 0 0 15px rgba(0, 255, 0, 0.15);
    pointer-events: none;
    min-width: 180px;
    width: auto;
}

#timer-current {
    font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
    font-size: clamp(32px, 4.5cqw, 48px);
    font-weight: 700;
    font-stretch: condensed;
    color: #00ff00;
    text-shadow: 0 0 15px #00ff00, 0 0 25px #00ff00;
    line-height: 1.1;
    letter-spacing: 3px;
    white-space: nowrap;
}

/* Estado amarillo - cerca del record (80%) */
#speedrun-timer.warning {
    border-color: #ffff00;
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.3), inset 0 0 10px rgba(255, 255, 0, 0.1);
}
#speedrun-timer.warning #timer-current {
    color: #ffff00;
    text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00;
}

/* Estado rojo - muy cerca del record (95%) */
#speedrun-timer.danger {
    border-color: #ff4444;
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.3), inset 0 0 10px rgba(255, 68, 68, 0.1);
}
#speedrun-timer.danger #timer-current {
    color: #ff4444;
    text-shadow: 0 0 10px #ff4444, 0 0 20px #ff4444;
}

/* Estado pausado - parpadeo */
#speedrun-timer.paused #timer-current {
    animation: timer-pulse 1s infinite;
}

@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

#timer-record {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: clamp(11px, 1.3cqw, 15px);
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 68, 68, 0.3);
}

#timer-record .record-label {
    color: #ff6666;
    font-weight: bold;
    font-size: 0.85em;
    display: block;
    margin-bottom: 2px;
}

#timer-record-value {
    color: #ff4444;
    font-weight: bold;
    font-size: 1.1em;
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
}

#timer-progress {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: clamp(12px, 1.4cqw, 16px);
    color: #ffd700;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 215, 0, 0.3);
    padding-top: 4px;
    display: flex;
    justify-content: center;
    gap: 6px;
}

#timer-progress .unlocked-label {
    color: #888;
    font-size: 0.9em;
}

/* Record update animations */
#timer-record-value.record-updated {
    animation: recordPulse 0.5s ease-out;
    color: #00ff00 !important;
    text-shadow: 0 0 15px rgba(0, 255, 0, 0.8) !important;
}

@keyframes recordPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Celebration for becoming #1 */
#speedrun-timer.record-celebration {
    animation: celebrationGlow 0.5s ease-in-out 6;
    border-color: #ffd700 !important;
}

@keyframes celebrationGlow {
    0%, 100% {
        box-shadow:
            0 0 15px rgba(255, 215, 0, 0.4),
            inset 0 0 20px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow:
            0 0 30px rgba(255, 215, 0, 0.8),
            0 0 50px rgba(255, 215, 0, 0.4),
            inset 0 0 20px rgba(0, 0, 0, 0.4);
    }
}

#speedrun-timer.record-celebration #timer-record-value {
    color: #ffd700 !important;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
    animation: recordPulse 0.5s ease-out infinite;
}

/* ============================================
   DRAWS REMAINING DISPLAY
   ============================================ */
#draws-display {
    position: absolute;
    top: 0.8cqh;
    right: 0.8cqw;
    z-index: 30;
    background: linear-gradient(180deg, rgba(0, 40, 80, 0.9) 0%, rgba(0, 20, 40, 0.95) 100%);
    border: 2px solid #00aaff;
    border-radius: 6px;
    padding: 0.5cqh 1cqw;
    text-align: center;
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.3), inset 0 0 10px rgba(0, 170, 255, 0.1);
    pointer-events: none;
}

#draws-remaining {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(12px, 2.5cqw, 24px);
    font-weight: 900;
    color: #00aaff;
    text-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff;
    line-height: 1;
}

#draws-label {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: clamp(5px, 0.8cqw, 8px);
    color: #88ccff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 1px;
}

/* ============================================
   PAY TABLE SECTION - Fixed size for 1920x1080
   ============================================ */
#pay-table-section {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding: 10px 20px 7px;
}

#pay-table-frame {
    position: relative;
    width: 320px;
    background: linear-gradient(180deg,
        rgba(40, 40, 60, 0.95) 0%,
        rgba(20, 20, 35, 0.95) 100%);
    border-radius: 10px;
    padding: 2px;
    box-shadow:
        0 0 30px rgba(0, 0, 0, 0.8),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 247, 255, 0.3);
}

#pay-table {
    display: flex;
    flex-direction: column;
    padding: 7px 13px;
    gap: 1px;
    pointer-events: auto;
}

.pay-row {
    display: flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 3px;
    transition: all 0.2s;
    cursor: help;
    pointer-events: auto;
}

.pay-row:hover {
    background: rgba(0, 247, 255, 0.1);
}

.pay-row.winner {
    background: rgba(255, 215, 0, 0.5) !important;
    animation: winnerFlash 0.4s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), inset 0 0 10px rgba(255, 215, 0, 0.3);
    border-radius: 5px;
}

.pay-row.winner .hand-name {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}

@keyframes winnerFlash {
    0%, 100% { background: rgba(255, 215, 0, 0.5); }
    50% { background: rgba(255, 215, 0, 0.8); }
}

.hand-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #88ccff;
    letter-spacing: 0.5px;
}

.pay-multiplier {
    flex: 0 0 50px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 2px 4px;
}

.pay-payout {
    flex: 0 0 70px;
    text-align: right;
    font-size: 15px;
    font-weight: 700;
    color: var(--neon-gold);
    text-shadow: 0 0 8px var(--neon-gold-glow);
    padding: 2px 8px;
    transition: all 0.2s;
}

.pay-payout::before {
    content: '+';
    opacity: 0.7;
}

/* ============================================
   PAY TABLE TOOLTIP
   ============================================ */
#pay-table-tooltip {
    position: absolute;
    left: 105%;
    top: 0;
    min-width: 280px;
    max-width: 320px;
    background: linear-gradient(180deg, rgba(20, 20, 40, 0.98) 0%, rgba(10, 10, 25, 0.98) 100%);
    border: 2px solid var(--neon-gold);
    border-radius: 12px;
    padding: 15px 18px;
    box-shadow:
        0 0 25px rgba(255, 215, 0, 0.4),
        0 10px 40px rgba(0, 0, 0, 0.8);
    z-index: 100;
    pointer-events: none;
    animation: tooltipAppear 0.2s ease-out;
}

#pay-table-tooltip.hidden {
    display: none !important;
}

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

.tooltip-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--neon-gold);
    text-shadow: 0 0 10px var(--neon-gold-glow);
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.tooltip-description {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.tooltip-example {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.tooltip-card {
    width: 36px;
    height: 50px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    position: relative;
}

.tooltip-card .card-value {
    font-size: 14px;
    line-height: 1;
}

.tooltip-card .card-suit {
    font-size: 16px;
    line-height: 1;
}

.tooltip-card.red {
    color: #d40000;
}

.tooltip-card.black {
    color: #000;
}

.tooltip-card.joker {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: #fff;
    font-size: 10px;
    text-align: center;
}

/* Neon Border */
.neon-border-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 10px;
    overflow: hidden;
}

.neon-border {
    position: absolute;
    background: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan-glow), 0 0 20px var(--neon-cyan-glow);
    animation: neonPulse 2s ease-in-out infinite;
}

.neon-top, .neon-bottom { height: 2px; left: 0; right: 0; }
.neon-top { top: 0; }
.neon-bottom { bottom: 0; animation-delay: 1s; }
.neon-left, .neon-right { width: 2px; top: 0; bottom: 0; }
.neon-left { left: 0; animation-delay: 0.5s; }
.neon-right { right: 0; animation-delay: 1.5s; }

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

/* ============================================
   COMEBACK BONUS BADGE
   ============================================ */
#comeback-bonus-badge {
    position: absolute;
    right: -120px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    animation: comebackPulse 1.8s ease-in-out infinite;
    will-change: transform;
}

#comeback-bonus-badge.hidden {
    display: none !important;
}

#comeback-badge-image {
    width: 100px;
    height: auto;
    filter:
        drop-shadow(0 0 15px rgba(255, 215, 0, 0.9))
        drop-shadow(0 0 30px rgba(255, 200, 0, 0.6))
        brightness(1.2)
        contrast(1.1);
}

@keyframes comebackPulse {
    0%, 100% {
        transform: translateY(-50%) scale(1);
    }
    50% {
        transform: translateY(-50%) scale(1.1);
    }
}

/* ============================================
   GOLDEN CARD BADGE
   ============================================ */
#golden-card-badge {
    position: absolute;
    left: -220px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    animation: goldenPulse 2s ease-in-out infinite;
    will-change: transform;
}

#golden-card-badge.hidden {
    display: none !important;
}

.golden-card-container {
    position: relative;
    width: 204px;   /* 136 * 1.5 = 204 */
    height: 312px;  /* 208 * 1.5 = 312 */
    background: transparent;
    /* Golden glow around the entire badge using drop-shadow */
    filter:
        drop-shadow(0 0 10px rgba(255, 215, 0, 1))
        drop-shadow(0 0 20px rgba(255, 215, 0, 0.8))
        drop-shadow(0 0 35px rgba(255, 200, 0, 0.6));
}

.golden-card-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 204px;   /* 136 * 1.5 = 204 */
    height: 312px;  /* 208 * 1.5 = 312 */
    z-index: 2;
    pointer-events: none;
    /* Try to remove opaque background using blend mode */
    mix-blend-mode: multiply;
}

.golden-card-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;   /* 100 * 1.5 = 150 */
    height: 218px;  /* 145 * 1.5 = ~218 */
    border-radius: 8px;
    z-index: 1;
    /* Subtle glow on the card */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

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

/* Golden Card Tooltip */
.golden-card-tooltip {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 15px;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid var(--neon-gold);
    border-radius: 10px;
    padding: 12px 16px;
    min-width: 220px;
    max-width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 100;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    pointer-events: none;
}

#golden-card-badge:hover .golden-card-tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--neon-gold);
    margin-bottom: 8px;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.tooltip-reason {
    font-size: 13px;
    color: #ccc;
    margin-bottom: 8px;
    line-height: 1.4;
}

.tooltip-effect {
    font-size: 12px;
    color: var(--neon-green);
    font-style: italic;
}

/* Bella's Golden Touch x4 Indicator */
.golden-card-x4-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    font-family: 'Orbitron', sans-serif;
    font-size: 72px;
    font-weight: 900;
    color: #ff00ff;
    text-shadow:
        0 0 10px #ff00ff,
        0 0 20px #ff00ff,
        0 0 40px #ff00ff,
        0 0 60px #ff44ff,
        2px 2px 0 #000,
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000;
    z-index: 100;
    pointer-events: none;
    animation: x4Pulse 0.6s ease-in-out infinite;
    letter-spacing: -2px;
}

@keyframes x4Pulse {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(-12deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) rotate(-12deg) scale(1.15);
        opacity: 0.85;
    }
}

.golden-card-x4-indicator.hidden {
    display: none;
}

/* Max Bet Warning Pop-out */
.max-bet-warning-popout {
    position: absolute;
    background: rgba(0, 0, 0, 0.95);
    color: #fff;
    padding: 12px 18px;
    border-radius: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    width: 220px;
    text-align: center;
    line-height: 1.4;
    border: 1px solid var(--neon-gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    z-index: 1000;
    pointer-events: none;
    animation: maxBetWarningPopout 7s ease-in-out forwards;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
}

.max-bet-warning-popout .arrow-down::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: var(--neon-gold) transparent transparent transparent;
}

@keyframes maxBetWarningPopout {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    8% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    85% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}

#bet-display {
    position: relative;
}

/* ============================================
   CARDS SECTION - Parte central ~45%
   ============================================ */
#cards-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    pointer-events: none;
    padding-top: 3cqh;
}

/* Hold Buttons - positioned below cards */
#hold-buttons {
    position: absolute;
    bottom: 33cqh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5.5cqw;
    z-index: 20;
    pointer-events: auto;
}

.hold-btn {
    width: 9cqw;
    height: 3cqh;
    background: linear-gradient(180deg, #5a5a6a 0%, #3a3a4a 50%, #2a2a3a 100%);
    border: 2px solid #666;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(6px, 1.3cqw, 11px);
    font-weight: 700;
    color: #888;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
    transition: all 0.15s;
    box-shadow:
        0 3px 0 #1a1a2a,
        0 5px 8px rgba(0, 0, 0, 0.5);
}

.hold-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    color: #fff;
    border-color: #888;
}

.hold-btn:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #1a1a2a;
}

.hold-btn.active {
    background: linear-gradient(180deg, #ffd700 0%, #b8860b 50%, #8b6914 100%);
    color: #1a1a1a;
    border-color: #ffd700;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
    box-shadow:
        0 4px 0 #5a4a00,
        0 0 20px rgba(255, 215, 0, 0.5);
}

.hold-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Card Click Areas - Now handled by Three.js raycasting */
#card-areas {
    display: none;
}

/* Win Display */
#win-display {
    position: absolute;
    bottom: 5cqh;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 25;
    animation: winDisplayPulse 0.5s ease-out;
    pointer-events: none;
}

@keyframes winDisplayPulse {
    0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
    50% { transform: translateX(-50%) scale(1.1); }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

#win-hand-name {
    font-size: clamp(16px, 4cqw, 32px);
    font-weight: 900;
    color: var(--neon-gold);
    text-shadow:
        0 0 10px var(--neon-gold-glow),
        0 0 20px var(--neon-gold-glow),
        0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 3px;
    margin-bottom: 5px;
}

#win-amount {
    font-size: clamp(20px, 5cqw, 44px);
    font-weight: 900;
    color: #fff;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px var(--neon-cyan-glow);
}

/* ============================================
   CONTROLS SECTION - Parte inferior ~20%
   ============================================ */
#controls-section {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2cqh 2.3cqw 1.5cqh;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.5) 30%,
        rgba(0, 0, 0, 0.7) 100%);
}

#left-controls,
#center-controls,
#right-controls {
    display: flex;
    align-items: center;
    gap: 1.2cqw;
}

#left-controls {
    flex: 0 0 auto;
}

#center-controls {
    flex: 1;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}

.bet-buttons-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-left: 60px;  /* Shift right to avoid jukebox overlap */
}

.coin-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.btn-small {
    padding: 6px 10px !important;
    font-size: clamp(10px, 1.5cqw, 14px) !important;
    min-width: auto !important;
}

.btn-dark {
    background: linear-gradient(180deg, #555 0%, #333 50%, #222 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow:
        0 4px 0 #111,
        0 0 10px rgba(0, 0, 0, 0.3);
}

.btn-dark:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 #111,
        0 0 15px rgba(100, 100, 100, 0.3);
}

.btn-dark:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #111;
}

#right-controls {
    flex: 0 0 auto;
}

/* LCD Displays */
.lcd-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
    border: 2px solid #333;
    border-radius: 8px;
    padding: 0.9cqh 1.8cqw;
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.5);
}

.lcd-label {
    font-size: clamp(7px, 1.5cqw, 14px);
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

.lcd-value {
    font-size: clamp(15px, 3.3cqw, 33px);
    font-weight: 700;
    color: var(--neon-gold);
    text-shadow:
        0 0 8px var(--neon-gold-glow),
        0 0 15px var(--neon-gold-glow);
    font-family: 'Orbitron', monospace;
    letter-spacing: 2px;
}

#credits-display {
    flex-direction: column-reverse;
}

/* High Roller Bonus Indicator - moved to bottom-indicators */
/* Styles are now in BOTTOM INDICATORS section */

/* ============================================
   BUTTONS
   ============================================ */
.game-btn {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(10px, 1.8cqw, 17px);
    font-weight: 700;
    letter-spacing: 1px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 1.2cqh 1.5cqw;
    transition: all 0.15s;
    text-transform: uppercase;
    line-height: 1.2;
}

.btn-green {
    background: linear-gradient(180deg, #5dff7a 0%, #2ecc40 50%, #1a7a25 100%);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow:
        0 4px 0 #145c1a,
        0 6px 15px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(46, 204, 64, 0.3);
}

.btn-green:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 #145c1a,
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(46, 204, 64, 0.5);
}

.btn-green:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #145c1a;
}

.btn-blue {
    background: linear-gradient(180deg, #4da6ff 0%, #0074d9 50%, #004080 100%);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow:
        0 4px 0 #003060,
        0 6px 15px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(0, 116, 217, 0.3);
}

.btn-blue:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 #003060,
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(0, 116, 217, 0.5);
}

.btn-blue:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #003060;
}

.btn-cyan {
    background: linear-gradient(180deg, #67e8f9 0%, #22d3ee 50%, #0891b2 100%);
    color: #0c4a6e;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    font-weight: 700;
    box-shadow:
        0 4px 0 #0e7490,
        0 6px 15px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(34, 211, 238, 0.3);
}

.btn-cyan:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 #0e7490,
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(34, 211, 238, 0.5);
}

.btn-cyan:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #0e7490;
}

.btn-red {
    background: linear-gradient(180deg, #ff7a73 0%, #ff4136 50%, #a62820 100%);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow:
        0 4px 0 #7a1810,
        0 6px 15px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(255, 65, 54, 0.3);
}

.btn-red:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 #7a1810,
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 65, 54, 0.5);
}

.btn-red:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #7a1810;
}

.btn-gold {
    background: linear-gradient(180deg, #ffd700 0%, #daa520 50%, #b8860b 100%);
    color: #1a1a2e;
    font-weight: 800;
    box-shadow:
        0 4px 0 #8b6914,
        0 6px 15px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 215, 0, 0.4);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-gold:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 #8b6914,
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(255, 215, 0, 0.6);
}

.btn-gold:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #8b6914;
}

.btn-purple {
    background: linear-gradient(180deg, #9b59b6 0%, #8e44ad 50%, #6c3483 100%);
    color: #fff;
    font-weight: 800;
    box-shadow:
        0 4px 0 #4a235a,
        0 6px 15px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(155, 89, 182, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.btn-purple:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 #4a235a,
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(155, 89, 182, 0.6);
}

.btn-purple:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #4a235a;
}

.btn-dark {
    background: linear-gradient(180deg, #666 0%, #444 50%, #222 100%);
    color: #ccc;
    box-shadow:
        0 3px 0 #111,
        0 5px 12px rgba(0, 0, 0, 0.4);
    padding: 1.1cqh;
}

.btn-dark svg {
    width: clamp(15px, 2.4cqw, 24px);
    height: clamp(15px, 2.4cqw, 24px);
    display: block;
}

.btn-dark:hover:not(:disabled) {
    transform: translateY(-2px);
    color: #fff;
}

.btn-large {
    font-size: clamp(14px, 2.4cqw, 21px);
    padding: 1.5cqh 2.4cqw;
}

.game-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(50%);
}

/* ============================================
   WIN OVERLAY
   ============================================ */
#win-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

#big-win-display {
    text-align: center;
    animation: bigWinPulse 0.8s ease-out;
}

@keyframes bigWinPulse {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

#big-win-text {
    font-size: clamp(24px, 8cqw, 72px);
    font-weight: 900;
    color: var(--neon-gold);
    text-shadow:
        0 0 20px var(--neon-gold-glow),
        0 0 40px var(--neon-gold-glow),
        0 4px 8px rgba(0, 0, 0, 0.5);
    letter-spacing: 6px;
    margin-bottom: 15px;
    animation: textGlow 1s ease-in-out infinite;
}

@keyframes textGlow {
    0%, 100% {
        text-shadow:
            0 0 20px var(--neon-gold-glow),
            0 0 40px var(--neon-gold-glow);
    }
    50% {
        text-shadow:
            0 0 30px var(--neon-gold-glow),
            0 0 60px var(--neon-gold-glow),
            0 0 100px var(--neon-gold-glow);
    }
}

#big-win-amount {
    font-size: clamp(32px, 10cqw, 96px);
    font-weight: 900;
    color: #fff;
    text-shadow:
        0 0 20px rgba(255, 255, 255, 0.8),
        0 0 40px var(--neon-cyan-glow);
}

/* ============================================
   CHARACTER PANEL (Right - 30%)
   ============================================ */
#character-panel {
    flex: 0 0 var(--character-panel-width);
    width: var(--character-panel-width);
    min-width: var(--character-panel-width);
    max-width: var(--character-panel-width);
    height: 972px; /* 90% of 1080px */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Character Video Container - fills available space */
#character-video-container {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
}

#character-canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Character Placeholder */
#character-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--text-secondary);
    opacity: 0.5;
}

#character-placeholder.hidden {
    display: none;
}

.placeholder-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    opacity: 0.5;
}

.placeholder-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

#character-placeholder p {
    font-size: 18px;
    margin-bottom: 5px;
}

.placeholder-subtitle {
    font-size: 12px !important;
    color: var(--text-secondary);
}

/* Character Text Panel - fixed height at bottom */
#character-text-panel {
    flex: 0 0 auto;
    min-height: 18%;
    background: linear-gradient(180deg,
        rgba(20, 20, 35, 0.9) 0%,
        rgba(10, 10, 20, 0.95) 100%);
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    margin-top: 0;
}

#character-name {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: 700;
    color: var(--neon-gold);
    text-shadow: 0 0 10px var(--neon-gold-glow);
    margin-bottom: 8px;
    letter-spacing: 2px;
}

#character-text {
    flex: 1;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: clamp(16px, 1.6vw, 22px);
    color: var(--text-primary);
    line-height: 1.5;
    overflow: hidden;
}

#character-text-content {
    opacity: 1;
}

/* Typewriter cursor */
#text-cursor {
    display: inline-block;
    color: var(--neon-cyan);
    animation: cursorBlink 0.7s step-end infinite;
    margin-left: 2px;
}

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

/* ============================================
   SKILL BADGE
   ============================================ */

/* Badge Container */
.skill-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    z-index: 50;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.skill-badge:hover {
    transform: scale(1.1);
}

/* Badge Image */
#skill-badge-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: none;
    box-shadow: none;
}

/* Uses Counter */
#skill-badge-count {
    position: absolute;
    bottom: -2px;
    right: -2px;
    min-width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #00ff88 0%, #00cc66 100%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

/* Glow Effect (behind badge) */
#skill-badge-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

/* SKILL! Text */
#skill-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-shadow:
        0 0 10px var(--neon-gold),
        0 0 20px var(--neon-gold),
        0 0 30px var(--neon-gold),
        2px 2px 0 #000;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}

/* +X Bonus Animation Text */
#skill-badge-bonus {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #00ff88;
    text-shadow:
        0 0 10px rgba(0, 255, 136, 0.8),
        2px 2px 0 #000;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

/* Depleted State (0 uses) */
.skill-badge.depleted #skill-badge-image {
    filter: grayscale(100%) brightness(0.6);
    border-color: #666;
    box-shadow: none;
}

.skill-badge.depleted #skill-badge-count {
    background: linear-gradient(135deg, #666 0%, #444 100%);
    color: #999;
    box-shadow: none;
}

.skill-badge.depleted:hover {
    transform: none;
}

/* Hidden State */
.skill-badge.hidden {
    display: none;
}

/* ===== SKILL BADGE ANIMATIONS ===== */

/* Activation Animation - EXPLOSIVE visibility */
@keyframes skillActivate {
    0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
    5% { transform: scale(2.2) rotate(-5deg); filter: brightness(3) drop-shadow(0 0 30px gold); }
    10% { transform: scale(1.6) rotate(3deg); filter: brightness(2.5); }
    15% { transform: scale(2.4) rotate(-3deg); filter: brightness(3.5) drop-shadow(0 0 40px white); }
    20% { transform: scale(1.8) rotate(2deg); filter: brightness(2.8); }
    25% { transform: scale(2.5) rotate(-2deg); filter: brightness(4) drop-shadow(0 0 50px gold); }
    30% { transform: scale(2) rotate(3deg); filter: brightness(3); }
    40% { transform: scale(2.3) rotate(-2deg); filter: brightness(3.5); }
    50% { transform: scale(1.9) rotate(2deg); filter: brightness(3); }
    60% { transform: scale(2.1) rotate(-1deg); filter: brightness(2.5); }
    70% { transform: scale(1.7) rotate(1deg); filter: brightness(2); }
    80% { transform: scale(1.5) rotate(-1deg); filter: brightness(1.8); }
    90% { transform: scale(1.3) rotate(0deg); filter: brightness(1.4); }
    100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}

@keyframes skillGlow {
    0% { opacity: 0; transform: scale(0.8); }
    15% { opacity: 1; transform: scale(2); }
    30% { opacity: 0.9; transform: scale(3); }
    45% { opacity: 1; transform: scale(4); }
    60% { opacity: 0.8; transform: scale(5); }
    75% { opacity: 0.5; transform: scale(6); }
    100% { opacity: 0; transform: scale(7); }
}

@keyframes skillFlash {
    0% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 1),
                    0 0 60px rgba(255, 215, 0, 0.8),
                    0 0 100px rgba(255, 215, 0, 0.6);
    }
    12.5% {
        box-shadow: 0 0 80px rgba(255, 255, 255, 1),
                    0 0 150px rgba(255, 215, 0, 1),
                    0 0 250px rgba(255, 215, 0, 0.9),
                    0 0 350px rgba(255, 165, 0, 0.7);
    }
    25% {
        box-shadow: 0 0 50px rgba(255, 215, 0, 1),
                    0 0 100px rgba(255, 215, 0, 0.8);
    }
    37.5% {
        box-shadow: 0 0 100px rgba(255, 255, 255, 1),
                    0 0 200px rgba(255, 215, 0, 1),
                    0 0 300px rgba(255, 215, 0, 0.9),
                    0 0 400px rgba(255, 165, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 60px rgba(255, 215, 0, 1),
                    0 0 120px rgba(255, 215, 0, 0.8);
    }
    62.5% {
        box-shadow: 0 0 90px rgba(255, 255, 255, 1),
                    0 0 180px rgba(255, 215, 0, 1),
                    0 0 280px rgba(255, 215, 0, 0.8);
    }
    75% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.9),
                    0 0 80px rgba(255, 215, 0, 0.7);
    }
    87.5% {
        box-shadow: 0 0 60px rgba(255, 255, 255, 0.8),
                    0 0 120px rgba(255, 215, 0, 0.8);
    }
    100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6),
                    0 0 40px rgba(255, 215, 0, 0.4);
    }
}

@keyframes skillShake {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    5% { transform: translate(-15px, -10px) scale(2) rotate(-8deg); }
    10% { transform: translate(15px, 5px) scale(2.2) rotate(8deg); }
    15% { transform: translate(-12px, -8px) scale(2.1) rotate(-6deg); }
    20% { transform: translate(12px, 8px) scale(2.3) rotate(6deg); }
    25% { transform: translate(-10px, -5px) scale(2) rotate(-5deg); }
    30% { transform: translate(10px, 5px) scale(2.1) rotate(5deg); }
    40% { transform: translate(-8px, -4px) scale(1.9) rotate(-4deg); }
    50% { transform: translate(8px, 4px) scale(1.8) rotate(4deg); }
    60% { transform: translate(-6px, -3px) scale(1.6) rotate(-3deg); }
    70% { transform: translate(6px, 3px) scale(1.5) rotate(3deg); }
    80% { transform: translate(-4px, -2px) scale(1.3) rotate(-2deg); }
    90% { transform: translate(4px, 2px) scale(1.2) rotate(2deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

/* Explosion rings emanating outward */
@keyframes skillExplosionRing {
    0% {
        transform: scale(0.5);
        opacity: 1;
        border-width: 8px;
    }
    50% {
        opacity: 0.8;
        border-width: 4px;
    }
    100% {
        transform: scale(5);
        opacity: 0;
        border-width: 1px;
    }
}

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

/* Screen flash overlay */
@keyframes skillScreenFlash {
    0% { opacity: 0; }
    10% { opacity: 0.5; }
    20% { opacity: 0; }
    30% { opacity: 0.4; }
    40% { opacity: 0; }
    50% { opacity: 0.3; }
    100% { opacity: 0; }
}

@keyframes skillTextPop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-15deg) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-15deg) scale(1.3);
    }
    40% {
        transform: translate(-50%, -50%) rotate(-15deg) scale(1);
    }
    80% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-15deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -100%) rotate(-15deg) scale(0.8);
    }
}

@keyframes skillBonusPop {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translateX(-50%) translateY(-10px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-40px) scale(1);
    }
}

/* Active animation classes - EXPLOSIVE maximum visibility */
.skill-badge.activating {
    animation: skillShake 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), skillFlash 2s ease-out;
    z-index: 9999;
}

.skill-badge.activating #skill-badge-glow {
    animation: skillGlow 2s ease-out;
}

.skill-badge.activating #skill-badge-image {
    animation: skillActivate 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.skill-badge.activating #skill-text {
    animation: skillTextPop 2.5s ease-out forwards;
}

/* Central explosion glow */
.skill-badge.activating::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255,255,255,1) 0%,
        rgba(255,215,0,0.9) 20%,
        rgba(255,165,0,0.6) 40%,
        rgba(255,100,0,0.3) 60%,
        transparent 80%);
    animation: skillGlow 2s ease-out;
    pointer-events: none;
}

/* First explosion ring */
.skill-badge.activating::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    margin-left: -40px;
    border-radius: 50%;
    border: 6px solid rgba(255, 215, 0, 1);
    background: transparent;
    animation: skillExplosionRing 1.5s ease-out;
    pointer-events: none;
}

/* Second explosion ring (via box-shadow trick) */
.skill-badge.activating #skill-badge-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.9);
    background: transparent;
    animation: skillExplosionRing2 1.8s ease-out 0.2s;
    pointer-events: none;
}

.skill-badge.showing-bonus #skill-badge-bonus {
    animation: skillBonusPop 1.5s ease-out forwards;
}

/* Tooltip on hover */
.skill-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    margin-bottom: 10px;
    border: 1px solid var(--neon-gold);
    max-width: 260px;
    white-space: normal;
    text-align: center;
}

.skill-badge:hover::after {
    opacity: 1;
}

/* ============================================
   MODALS
   ============================================ */
.modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Settings modal needs higher z-index to appear over title screen */
#settings-modal {
    z-index: 10002;
}

/* Exit confirmation modal needs higher z-index */
#exit-confirm-modal {
    z-index: 10001;
}

/* Reset confirmation modal needs higher z-index to appear over settings modal */
#reset-confirm-modal {
    z-index: 10007;
}

/* New game confirmation modal needs higher z-index to appear over title screen */
#newgame-confirm-modal {
    z-index: 10008;
}

/* Game credits modal needs higher z-index to appear over settings and title screen */
#game-credits-modal {
    z-index: 10006;
}

/* Store modal needs higher z-index to appear over title screen */
#store-modal {
    z-index: 10003;
}

/* Leaderboard modal needs higher z-index to appear over title screen */
#leaderboard-modal {
    z-index: 10003;
}

/* Gallery viewer needs to be above store modal */
#gallery-viewer {
    z-index: 10004;
}

/* Reset purchases modal needs to be above store modal */
#reset-purchases-modal {
    z-index: 10005;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    background: linear-gradient(180deg, #2a2a3a 0%, #1a1a2a 100%);
    border-radius: 16px;
    padding: 30px 40px;
    min-width: 380px;
    max-width: 600px;
    max-height: 900px;
    overflow-y: auto;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.8),
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        0 0 30px rgba(0, 247, 255, 0.2);
    border: 2px solid rgba(0, 247, 255, 0.3);
    animation: modalAppear 0.3s ease-out;
}

@keyframes modalAppear {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.modal-large {
    min-width: 550px;
}

.modal-small {
    min-width: 320px;
    max-width: 400px;
}

/* Exit Confirmation Modal */
.exit-confirm-body {
    text-align: center;
    padding: 10px 0;
}

.exit-confirm-body p {
    font-size: 18px;
    color: #fff;
    margin-bottom: 10px;
}

.exit-credits-info {
    font-size: 14px !important;
    color: var(--neon-green) !important;
    font-style: italic;
}

/* Post-Endgame Modal */
.modal-post-endgame {
    min-width: 400px;
    max-width: 550px;
}

.post-endgame-body {
    text-align: center;
    padding: 20px 30px;
}

.endgame-congrats {
    font-size: 16px;
    color: var(--gold);
    margin-bottom: 15px;
    font-weight: bold;
}

.endgame-competition {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 20px;
    line-height: 1.5;
}

.endgame-question {
    font-size: 16px;
    color: #fff;
    font-weight: bold;
}

.exit-confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.exit-confirm-buttons .game-btn {
    min-width: 100px;
    font-size: 18px;
}

/* Reset Confirmation Modal */
.reset-confirm-body {
    text-align: center;
    padding: 10px 0;
}

.reset-confirm-body p {
    font-size: 16px;
    color: #fff;
    margin-bottom: 10px;
}

.reset-list {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 15px auto;
    max-width: 250px;
}

.reset-list li {
    font-size: 14px;
    color: #ff6b6b;
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
}

.reset-list li::before {
    content: '✗';
    position: absolute;
    left: 0;
    color: #ff4444;
}

.reset-safe-info {
    font-size: 14px !important;
    color: var(--neon-green) !important;
    font-style: italic;
    margin-top: 15px !important;
}

.reset-confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.reset-confirm-buttons .game-btn {
    min-width: 120px;
    font-size: 16px;
}

.modal-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(0, 247, 255, 0.3);
}

.modal-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--neon-cyan);
    text-shadow: 0 0 20px var(--neon-cyan-glow);
    letter-spacing: 3px;
}

.modal-body {
    margin-bottom: 20px;
}

.modal-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Settings - Three Column Layout */
.settings-three-columns {
    display: flex;
    gap: 25px;
    align-items: stretch;
    min-height: 520px;
    width: 100%;
}

.settings-column {
    flex: 1;
    min-width: 0;
    background: linear-gradient(180deg, rgba(30, 15, 45, 0.6) 0%, rgba(20, 10, 35, 0.8) 100%);
    border-radius: 14px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.settings-column-audio {
    flex: 0 0 320px;
    border: 2px solid rgba(100, 200, 255, 0.2);
    background: linear-gradient(180deg, rgba(20, 35, 55, 0.85) 0%, rgba(15, 25, 45, 0.95) 100%);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(100, 200, 255, 0.1);
}

.settings-column-options {
    flex: 0 0 320px;
    border: 2px solid rgba(255, 180, 100, 0.2);
    background: linear-gradient(180deg, rgba(55, 35, 20, 0.85) 0%, rgba(40, 25, 15, 0.95) 100%);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 180, 100, 0.1);
}

.settings-column-stats {
    flex: 1;
    max-height: 550px;
    overflow-y: auto;
    padding-right: 12px;
    border: 2px solid rgba(150, 100, 255, 0.2);
    background: linear-gradient(180deg, rgba(35, 25, 55, 0.85) 0%, rgba(25, 18, 45, 0.95) 100%);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(150, 100, 255, 0.1);
}

.settings-column-stats::-webkit-scrollbar {
    width: 6px;
}

.settings-column-stats::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
}

.settings-column-stats::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(150, 100, 255, 0.6), rgba(100, 80, 200, 0.4));
    border-radius: 3px;
}

.settings-column-stats::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(180, 130, 255, 0.8), rgba(130, 100, 230, 0.6));
}

/* Legacy two-column support */
.settings-two-columns {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

.settings-column-left {
    flex: 1;
}

.settings-column-right {
    flex: 1;
    max-height: 450px;
    overflow-y: auto;
    padding-right: 5px;
}

/* Settings */
.settings-section {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.settings-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.18) 0%, rgba(255, 215, 0, 0.02) 100%);
    border-radius: 8px;
    border-left: 4px solid var(--gold);
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.settings-section-title::before {
    font-size: 16px;
}

/* Section icons and themed titles */
.settings-column-audio .settings-section-title {
    color: #7dd3fc;
    background: linear-gradient(90deg, rgba(100, 200, 255, 0.2) 0%, rgba(100, 200, 255, 0.02) 100%);
    border-left-color: #7dd3fc;
    text-shadow: 0 0 15px rgba(100, 200, 255, 0.4);
}

.settings-column-audio .settings-section-title::before {
    content: '🔊';
}

.settings-column-options .settings-section-title {
    color: #fbbf24;
    background: linear-gradient(90deg, rgba(255, 180, 100, 0.2) 0%, rgba(255, 180, 100, 0.02) 100%);
    border-left-color: #fbbf24;
    text-shadow: 0 0 15px rgba(255, 180, 100, 0.4);
}

.settings-column-options .settings-section:nth-child(1) .settings-section-title::before {
    content: '🖥️';
}

.settings-column-options .settings-section:nth-child(2) .settings-section-title::before {
    content: '🃏';
}

.settings-column-options .settings-section:nth-child(3) .settings-section-title::before {
    content: '👤';
}

.settings-column-stats .settings-section-title {
    color: #c4b5fd;
    background: linear-gradient(90deg, rgba(150, 100, 255, 0.2) 0%, rgba(150, 100, 255, 0.02) 100%);
    border-left-color: #a78bfa;
    text-shadow: 0 0 15px rgba(150, 100, 255, 0.4);
}

.settings-column-stats .settings-section-title::before {
    content: '📊';
}

.settings-section-danger {
    border-bottom: none;
    padding-top: 5px;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    margin: 0 -8px;
    border-radius: 8px;
    transition: background 0.2s;
}

.setting-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

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

.setting-row-master {
    background: linear-gradient(90deg, rgba(100, 200, 255, 0.12) 0%, rgba(100, 200, 255, 0.03) 100%);
    padding: 12px 14px;
    margin: 0 0 8px 0;
    border-radius: 8px;
    border: 1px solid rgba(100, 200, 255, 0.25);
}

.setting-row-master .setting-label {
    color: #7dd3fc;
    font-weight: 600;
}

.setting-row-sub {
    padding-left: 15px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    margin-left: 8px;
}

.setting-label {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: 0.5px;
}

.setting-label-sub {
    font-size: 13px;
    color: #999;
}

.volume-slider-master {
    width: clamp(120px, 14vw, 180px) !important;
}

.volume-slider-master::-webkit-slider-thumb {
    background: #ffd700 !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6) !important;
}

.volume-slider-master::-moz-range-thumb {
    background: #ffd700 !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6) !important;
}

.reset-row {
    justify-content: center;
    padding-top: 10px;
    border-bottom: none;
}

/* Settings footer with three buttons */
.settings-footer-3btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
}

.settings-footer-3btn .game-btn {
    min-width: 140px;
    flex: 0 1 auto;
}

/* Settings footer with four buttons */
.settings-footer-4btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
}

.settings-footer-4btn .game-btn {
    min-width: 130px;
    flex: 0 1 auto;
    padding: 12px 18px;
    font-size: clamp(11px, 1.2vw, 14px);
}

/* Statistics Section */
.stats-section {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.stats-group {
    margin-bottom: 16px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid rgba(150, 100, 255, 0.1);
}

.stats-group:last-child {
    margin-bottom: 0;
}

.stats-group:last-child {
    margin-bottom: 0;
}

.stats-group-title {
    font-size: 12px;
    color: #c4b5fd;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: rgba(150, 100, 255, 0.1);
    border-radius: 4px;
    border-left: 3px solid #a78bfa;
    letter-spacing: 1px;
    font-weight: 600;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    margin: 0 -4px;
    border-radius: 4px;
    transition: background 0.15s;
}

.stat-row:hover {
    background: rgba(150, 100, 255, 0.08);
}

.stat-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.stat-row:nth-child(even):hover {
    background: rgba(150, 100, 255, 0.1);
}

.stat-label {
    font-size: 13px;
    color: #bbb;
}

.stat-value {
    font-size: 14px;
    color: #c4b5fd;
    font-weight: 700;
    text-align: right;
    min-width: 90px;
    font-family: 'Orbitron', monospace;
    text-shadow: 0 0 8px rgba(150, 100, 255, 0.3);
}

/* Settings modal with info button */
.modal-settings {
    position: relative;
    width: 80%;
    max-width: 1400px;
    min-width: 900px;
}

.modal-settings .modal-header {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, transparent 50%, rgba(255, 215, 0, 0.1) 100%);
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
    padding: 18px 25px;
}

.modal-settings .modal-header h2 {
    font-size: 24px;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.modal-settings .modal-body {
    padding: 25px 30px;
}

.modal-settings .modal-footer {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 18px 25px;
}

/* ============================================
   LEADERBOARD MODAL - Casino Hall of Fame
   ============================================ */
.modal-leaderboard {
    position: relative;
    width: clamp(520px, 70vw, 800px);
    max-width: 95vw;
    min-width: auto;
    background: linear-gradient(145deg, #1a0a2e 0%, #16213e 50%, #0f0f23 100%);
    border: 3px solid #9b59b6;
    border-radius: 15px;
    padding: 0;
    overflow: visible;
    box-shadow:
        0 0 60px rgba(155, 89, 182, 0.4),
        0 0 100px rgba(255, 215, 0, 0.2),
        inset 0 0 80px rgba(0, 0, 0, 0.5);
    animation: leaderboardFadeIn 0.25s ease-out;
}

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

/* Animated gradient border effect — delayed to prevent flash on open */
.modal-leaderboard::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(135deg, #ffd700 0%, #ff6b35 25%, #9b59b6 50%, #3498db 75%, #ffd700 100%);
    background-size: 300% 300%;
    border-radius: 18px;
    z-index: -1;
    opacity: 0;
    animation: borderGlow 4s ease-in-out infinite, borderFadeIn 0.4s ease-out 0.3s forwards;
}

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

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

/* Corner decorations - playing card suits */
.lb-corner-decor {
    position: absolute;
    font-size: 28px;
    opacity: 0.15;
    z-index: 0;
    animation: cornerPulse 3s ease-in-out infinite;
}
.lb-corner-tl { top: 10px; left: 15px; color: #000; text-shadow: 0 0 10px #fff; }
.lb-corner-tr { top: 10px; right: 15px; color: #e74c3c; text-shadow: 0 0 10px #e74c3c; }
.lb-corner-bl { bottom: 10px; left: 15px; color: #e74c3c; text-shadow: 0 0 10px #e74c3c; }
.lb-corner-br { bottom: 10px; right: 15px; color: #000; text-shadow: 0 0 10px #fff; }

@keyframes cornerPulse {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(1.1); }
}

/* Header with trophy */
.lb-header {
    text-align: center;
    padding: 25px 20px 15px;
    position: relative;
    background: linear-gradient(180deg, rgba(155, 89, 182, 0.2) 0%, transparent 100%);
}

.lb-trophy-container {
    position: relative;
    display: inline-block;
    margin-bottom: 5px;
}

.lb-trophy {
    font-size: 60px;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
    animation: trophyFloat 2s ease-in-out infinite;
}

.lb-trophy-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
    animation: trophyGlow 2s ease-in-out infinite;
    pointer-events: none;
}

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

@keyframes trophyGlow {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

.lb-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 32px;
    font-weight: 900;
    margin: 0;
    background: linear-gradient(135deg, #ffd700 0%, #ffec8b 25%, #ffd700 50%, #daa520 75%, #ffd700 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    animation: goldShimmer 3s linear infinite;
    letter-spacing: 3px;
}

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

.lb-subtitle {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    color: #9b59b6;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-top: 5px;
}

/* Online/Offline Status Indicator */
#lb-online-status {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 11px;
    font-family: 'Orbitron', monospace;
    padding: 4px 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lb-status-online {
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.5);
}

.lb-status-offline {
    color: #888;
    background: rgba(136, 136, 136, 0.15);
    border: 1px solid rgba(136, 136, 136, 0.3);
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: statusPulse 2s infinite;
}

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

/* Loading State */
.lb-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #ffd700;
    font-family: 'Orbitron', monospace;
    gap: 15px;
}

.lb-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 215, 0, 0.2);
    border-top-color: #ffd700;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Casino chip tabs */
.lb-chip-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 10px 15px;
    flex-wrap: wrap;
}

.lb-chip-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: linear-gradient(145deg, #2d1f3d 0%, #1a1225 100%);
    border: 2px solid #444;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.lb-chip-tab::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    pointer-events: none;
}

.lb-chip-tab:hover {
    transform: translateY(-2px);
    border-color: #9b59b6;
    box-shadow: 0 5px 20px rgba(155, 89, 182, 0.3);
}

.lb-chip-tab.active {
    background: linear-gradient(145deg, #9b59b6 0%, #6c3483 100%);
    border-color: #bb8fce;
    box-shadow:
        0 0 20px rgba(155, 89, 182, 0.5),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.lb-chip-tab.active::before {
    border-color: rgba(255, 255, 255, 0.3);
}

.lb-chip-icon {
    font-size: 18px;
}

.lb-chip-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #ccc;
    letter-spacing: 1px;
}

.lb-chip-tab.active .lb-chip-text {
    color: #fff;
}

/* Leaderboard content board */
.lb-board {
    margin: 0 15px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(155, 89, 182, 0.3);
    border-radius: 10px;
    overflow: hidden;
}

.lb-board-header {
    display: grid;
    grid-template-columns: 65px 1fr 140px 110px;
    padding: 12px 15px;
    background: linear-gradient(90deg, rgba(155, 89, 182, 0.3) 0%, rgba(52, 152, 219, 0.2) 100%);
    border-bottom: 2px solid rgba(155, 89, 182, 0.5);
}

.lb-board-header span {
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #bb8fce;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lb-col-rank { text-align: center; }
.lb-col-value { text-align: right; }
.lb-col-date { text-align: right; }

.lb-entries {
    max-height: 400px;
    overflow-y: auto;
}

/* Scrollbar styling */
.lb-entries::-webkit-scrollbar {
    width: 6px;
}
.lb-entries::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}
.lb-entries::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #9b59b6, #6c3483);
    border-radius: 3px;
}

/* Entry row styling */
.lb-entry {
    display: grid;
    grid-template-columns: 65px 1fr 140px 110px;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    position: relative;
}

.lb-entry:hover {
    background: rgba(155, 89, 182, 0.15);
}

.lb-entry:last-child {
    border-bottom: none;
}

/* Rank styling */
.lb-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 18px;
}

/* Top 3 special styling */
.lb-entry.rank-1 { background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, transparent 50%); }
.lb-entry.rank-2 { background: linear-gradient(90deg, rgba(192, 192, 192, 0.1) 0%, transparent 50%); }
.lb-entry.rank-3 { background: linear-gradient(90deg, rgba(205, 127, 50, 0.1) 0%, transparent 50%); }

.lb-entry.rank-1 .lb-rank {
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}
.lb-entry.rank-1 .lb-rank::before {
    content: '👑';
    position: absolute;
    left: 5px;
    font-size: 14px;
    animation: crownBounce 1s ease-in-out infinite;
}

@keyframes crownBounce {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-3px) rotate(5deg); }
}

.lb-entry.rank-2 .lb-rank {
    color: #c0c0c0;
    text-shadow: 0 0 10px rgba(192, 192, 192, 0.6);
}

.lb-entry.rank-3 .lb-rank {
    color: #cd7f32;
    text-shadow: 0 0 10px rgba(205, 127, 50, 0.6);
}

/* Medal icons for top 3 */
.lb-entry.rank-1 .lb-rank-medal,
.lb-entry.rank-2 .lb-rank-medal,
.lb-entry.rank-3 .lb-rank-medal {
    font-size: 20px;
    margin-right: 3px;
}

/* Name styling */
.lb-name {
    display: flex;
    align-items: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 17px;
    color: #fff;
    font-weight: 500;
}

.lb-entry.rank-1 .lb-name { color: #ffd700; font-weight: 700; }
.lb-entry.rank-2 .lb-name { color: #e8e8e8; }
.lb-entry.rank-3 .lb-name { color: #daa06d; }

/* Value styling */
.lb-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    color: #3498db;
    font-weight: 600;
}

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

/* Date styling */
.lb-date {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    color: #666;
}

/* Empty state */
.lb-empty {
    text-align: center;
    padding: 50px 20px;
    color: #666;
    font-family: 'Roboto Condensed', sans-serif;
    font-style: italic;
}

.lb-empty-icon {
    font-size: 40px;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* Pagination */
.lb-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 15px;
}

.lb-page-btn {
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg, #2d1f3d 0%, #1a1225 100%);
    border: 2px solid #444;
    border-radius: 50%;
    color: #9b59b6;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-page-btn:hover:not(:disabled) {
    border-color: #9b59b6;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(155, 89, 182, 0.4);
}

.lb-page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.lb-page-indicator {
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    color: #888;
    min-width: 60px;
    text-align: center;
}

/* Close button */
.lb-close-btn {
    display: block;
    width: calc(100% - 30px);
    margin: 0 15px 15px;
    padding: 14px;
    background: linear-gradient(145deg, #3498db 0%, #2980b9 100%);
    border: none;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.lb-close-btn:hover {
    background: linear-gradient(145deg, #5dade2 0%, #3498db 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.4);
}

/* Remove old table since we use divs now */
#leaderboard-table { display: none; }

/* ============================================
   ENDGAME OVERLAY
   ============================================ */
#endgame-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#endgame-overlay.hidden {
    display: none;
}

.endgame-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
}

.endgame-content {
    position: relative;
    text-align: center;
    z-index: 1;
    max-width: 90vw;
}

#endgame-image {
    width: 40vw;
    max-width: 500px;
    min-width: 300px;
    height: auto;
    margin-bottom: 25px;
    animation: float-endgame 3s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.5));
}

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

.endgame-form {
    background: linear-gradient(180deg, rgba(20, 20, 40, 0.95) 0%, rgba(10, 10, 25, 0.98) 100%);
    border: 2px solid #ffd700;
    border-radius: 12px;
    padding: 25px 35px;
    max-width: 420px;
    margin: 0 auto;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
}

.endgame-form h2 {
    font-family: 'Orbitron', sans-serif;
    color: #ffd700;
    font-size: 26px;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.endgame-form p {
    color: #ccc;
    margin-bottom: 15px;
    font-size: 14px;
}

.endgame-hint {
    color: #888 !important;
    font-size: 11px !important;
    font-style: italic;
    margin-top: 10px !important;
}

#endgame-nickname {
    width: 100%;
    padding: 12px 15px;
    font-size: 18px;
    font-family: 'Orbitron', sans-serif;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #555;
    border-radius: 6px;
    color: #fff;
    text-align: center;
    margin-bottom: 15px;
    box-sizing: border-box;
}

#endgame-nickname:focus {
    border-color: #ffd700;
    outline: none;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

#endgame-nickname::placeholder {
    color: #666;
}

.endgame-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

.endgame-stats .stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.endgame-stats .stat-label {
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
}

.endgame-stats .stat-value {
    color: #00ff00;
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
}

/* Post-Endgame Modal */
.modal-small {
    width: clamp(300px, 40vw, 450px);
    max-width: 90vw;
}

/* Nickname Prompt Modal */
.modal-nickname {
    width: clamp(380px, 50vw, 520px);
    max-width: 90vw;
    text-align: center;
    background: linear-gradient(180deg, rgba(20, 10, 40, 0.98) 0%, rgba(10, 5, 25, 0.98) 100%);
    border: 2px solid #ffd700;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.3), inset 0 0 60px rgba(255, 215, 0, 0.05);
    animation: nickname-modal-appear 0.4s ease-out;
}

@keyframes nickname-modal-appear {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.nickname-crown-icon {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background: linear-gradient(180deg, #ffd700 0%, #ff9500 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6), 0 4px 15px rgba(0, 0, 0, 0.5);
    animation: crown-pulse 2s ease-in-out infinite;
}

@keyframes crown-pulse {
    0%, 100% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.6), 0 4px 15px rgba(0, 0, 0, 0.5); }
    50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.8), 0 4px 15px rgba(0, 0, 0, 0.5); }
}

.nickname-crown-icon svg {
    width: 40px;
    height: 40px;
    color: #1a0a30;
}

.nickname-header {
    padding-top: 30px;
}

.nickname-header h2 {
    font-size: 1.6em;
    background: linear-gradient(180deg, #ffd700 0%, #ffaa00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.modal-nickname .modal-body {
    padding: 15px 30px 25px;
}

.nickname-subtitle {
    color: #bbb;
    margin-bottom: 20px;
    font-size: 1em;
    letter-spacing: 0.5px;
}

.nickname-input-wrapper {
    position: relative;
    display: inline-block;
    width: 85%;
}

#nickname-input {
    width: 100%;
    padding: 14px 20px;
    font-size: 1.4em;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.7);
    border: 3px solid #ffd700;
    border-radius: 12px;
    color: #fff;
    text-align: center;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#nickname-input:focus {
    border-color: #ffec80;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), inset 0 0 10px rgba(255, 215, 0, 0.1);
    transform: scale(1.02);
}

.nickname-input-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

#nickname-input:focus + .nickname-input-glow {
    opacity: 1;
}

#nickname-input::placeholder {
    color: #555;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.nickname-hint {
    color: #777;
    font-size: 0.85em;
    margin-top: 10px;
    font-style: italic;
}

.pro-tip {
    margin-top: 25px;
    padding: 15px 18px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(255, 140, 0, 0.08) 100%);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

.pro-tip-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: #ffd700;
    animation: tip-bounce 2s ease-in-out infinite;
}

@keyframes tip-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.pro-tip-icon svg {
    width: 100%;
    height: 100%;
}

.pro-tip-content {
    flex: 1;
}

.pro-tip-label {
    display: block;
    color: #ffd700;
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.pro-tip-text {
    color: #ccc;
    font-size: 0.9em;
    line-height: 1.5;
}

.btn-nickname-start {
    font-size: 1.2em;
    padding: 14px 40px;
    letter-spacing: 2px;
    animation: start-pulse 1.5s ease-in-out infinite;
}

@keyframes start-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.7); }
}

/* Deck Selector Button in Settings */
.deck-selector-container {
    flex: 1;
    max-width: 200px;
}

.deck-selector-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(50, 30, 15, 0.9), rgba(30, 18, 10, 0.9));
    border: 2px solid rgba(255, 180, 100, 0.4);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.deck-selector-btn:hover {
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
}

.deck-selector-preview {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
}

.deck-selector-btn span {
    color: var(--text-primary);
    font-size: 14px;
    flex: 1;
    text-align: left;
}

.deck-selector-arrow {
    color: var(--gold);
    font-size: 12px;
}

/* Nickname Display in Settings */
.setting-row-nickname {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nickname-display-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nickname-value {
    color: #fbbf24;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 6px;
    min-width: 90px;
    text-align: center;
    border: 1px solid rgba(255, 180, 100, 0.2);
}

.btn-change-nickname {
    padding: 8px 14px;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(180deg, #4a4a4a, #2a2a2a);
    border: 2px solid #555;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Orbitron', sans-serif;
}

.btn-change-nickname:hover {
    background: linear-gradient(180deg, #5a5a5a, #3a3a3a);
    border-color: #fbbf24;
    color: #fbbf24;
}

/* Email Input in Settings */
.setting-row-email {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.email-input-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-input {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 180, 100, 0.3);
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    width: 160px;
    transition: all 0.2s;
}

.settings-input:focus {
    outline: none;
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.settings-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.btn-save-email {
    padding: 8px 14px;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(180deg, #4CAF50, #2E7D32);
    border: 2px solid #66BB6A;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Orbitron', sans-serif;
}

.btn-save-email:hover {
    background: linear-gradient(180deg, #66BB6A, #4CAF50);
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
    transform: scale(1.05);
}

.email-hint {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    margin-top: 4px;
    text-align: right;
}

/* Deck Selector Modal */
#deck-selector-modal {
    z-index: 10003;
}

.deck-selector-modal {
    width: clamp(400px, 60vw, 700px);
    max-width: 95vw;
}

.deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.deck-card {
    background: linear-gradient(135deg, rgba(40, 20, 60, 0.9), rgba(20, 10, 30, 0.9));
    border: 2px solid rgba(139, 105, 20, 0.5);
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.deck-card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
}

.deck-card.selected {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(60, 30, 80, 0.9), rgba(40, 20, 50, 0.9));
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.deck-card.locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.deck-card.locked:hover {
    transform: none;
    box-shadow: none;
    border-color: #666;
}

.deck-card-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

.deck-card-name {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: bold;
    margin-bottom: 5px;
}

.deck-card-status {
    font-size: 12px;
    color: var(--gold);
}

.deck-card.locked .deck-card-status {
    color: #888;
}

.deck-card-lock {
    font-size: 24px;
    margin-bottom: 5px;
}

/* Game Credits Modal */
.modal-credits {
    min-width: 400px;
    max-width: 500px;
}

.credits-body {
    padding: 10px 0;
}

.credits-section {
    text-align: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.credits-section:last-child {
    border-bottom: none;
}

.credits-role {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.credits-name {
    font-size: 18px;
    color: #ffd700;
    font-weight: 600;
}

.credits-link {
    color: #4da6ff;
    text-decoration: none;
    font-size: 14px;
}

.credits-link:hover {
    color: #7ec8ff;
    text-decoration: underline;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 55px;
    height: 28px;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #2a2a2a, #3a3a3a);
    border-radius: 28px;
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: all 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--green-btn);
    box-shadow: 0 0 12px rgba(46, 204, 64, 0.5);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(27px);
}

/* Volume Slider */
.volume-slider {
    width: clamp(120px, 14vw, 180px);
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(180deg, #222 0%, #3a3a3a 100%);
    border-radius: 4px;
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--neon-cyan);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 8px var(--neon-cyan-glow);
}

.volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--neon-cyan);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 8px var(--neon-cyan-glow);
}

/* Draws Setting */
/* HUD Scale Setting */
.hud-scale-setting {
    display: flex;
    gap: 8px;
}

.hud-scale-btn {
    width: 44px;
    height: 34px;
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
    border: 2px solid #555;
    border-radius: 8px;
    color: #aaa;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.hud-scale-btn:hover {
    background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%);
    border-color: rgba(255, 180, 100, 0.6);
    color: #fbbf24;
}

.hud-scale-btn.active {
    background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
    border-color: #fbbf24;
    color: #000;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

/* Language Selector */
.language-selector {
    display: flex;
    gap: 8px;
}

.lang-btn {
    width: 50px;
    height: 34px;
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
    border: 2px solid #555;
    border-radius: 8px;
    color: #aaa;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.lang-btn:hover {
    background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%);
    border-color: rgba(255, 180, 100, 0.6);
    color: #fbbf24;
}

.lang-btn.active {
    background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
    border-color: #fbbf24;
    color: #000;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

/* ============================================
   HUD SCALE CLASSES
   ============================================ */
/* Small HUD */
.hud-small #pay-table-section {
    transform: scale(0.85);
    transform-origin: top center;
}

.hud-small .hold-btn {
    font-size: 10px;
    padding: 4px 10px;
}

.hud-small #controls-section {
    transform: scale(0.85);
    transform-origin: bottom center;
}

.hud-small #speedrun-timer {
    transform: scale(0.85);
}

/* Large HUD */
.hud-large #pay-table-section {
    transform: scale(1.1);
    transform-origin: top center;
}

.hud-large .hold-btn {
    font-size: 14px;
    padding: 8px 18px;
}

.hud-large #controls-section {
    transform: scale(1.1);
    transform-origin: bottom center;
}

.hud-large #speedrun-timer {
    transform: scale(1.1);
}

/* Help Content */
.help-body {
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 10px;
}

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

.help-section h3 {
    font-size: clamp(14px, 1.5vw, 18px);
    color: var(--neon-gold);
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.help-section p,
.help-section li {
    font-size: clamp(12px, 1.2vw, 14px);
    color: var(--text-secondary);
    line-height: 1.7;
    font-family: 'Roboto Condensed', sans-serif;
}

.help-section ol,
.help-section ul {
    padding-left: 20px;
}

.help-section li {
    margin-bottom: 6px;
}

.help-section strong {
    color: var(--neon-cyan);
}

/* Perks list in help modal */
.perks-list {
    list-style: none;
    padding-left: 0;
}

.perks-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.perk-icon {
    font-size: 16px;
    min-width: 24px;
    text-align: center;
}

.perk-note {
    margin-top: 12px;
    font-style: italic;
    color: var(--neon-gold) !important;
    opacity: 0.8;
}

/* ============================================
   GAME MESSAGE
   ============================================ */
#game-message {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid var(--neon-cyan);
    border-radius: 12px;
    padding: 20px 40px;
    z-index: 150;
    animation: messageAppear 0.3s ease-out;
}

/* Persistent message (game over) - stays visible with pulsing effect */
#game-message.persistent {
    animation: messageAppear 0.3s ease-out, persistentPulse 2s ease-in-out infinite;
    border-color: #ff4444;
}

/* Jack's Gambit message - positioned higher to not overlap cards */
#game-message.jacks-gambit-message {
    top: 50%;
}

#game-message.persistent #message-text {
    color: #ff4444;
    text-shadow: 0 0 15px rgba(255, 68, 68, 0.8);
}

@keyframes messageAppear {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes persistentPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 68, 68, 0.8);
    }
}

#message-text {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    color: var(--neon-cyan);
    text-shadow: 0 0 15px var(--neon-cyan-glow);
    letter-spacing: 2px;
}

/* Large suit symbol in messages (Queen's Favor) */
.suit-symbol-large {
    font-size: 1.8em;
    vertical-align: middle;
    font-weight: bold;
    text-shadow: 0 0 10px currentColor;
}

.suit-symbol-large.hearts,
.suit-symbol-large.diamonds {
    color: #ff4444;
}

.suit-symbol-large.clubs,
.suit-symbol-large.spades {
    color: #ffffff;
}

/* Choose a Card prompt - golden glowing text */
#choose-card-prompt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    font-weight: 800;
    color: var(--neon-gold);
    text-transform: uppercase;
    letter-spacing: 3px;
    z-index: 160;
    text-shadow:
        0 0 8px var(--neon-gold),
        0 0 15px var(--neon-gold),
        0 0 30px var(--neon-gold-glow);
    animation: chooseCardPulse 1.5s ease-in-out infinite;
}

@keyframes chooseCardPulse {
    0%, 100% {
        text-shadow:
            0 0 8px var(--neon-gold),
            0 0 15px var(--neon-gold),
            0 0 30px var(--neon-gold-glow);
        transform: translateX(-50%) scale(1);
    }
    50% {
        text-shadow:
            0 0 12px var(--neon-gold),
            0 0 25px var(--neon-gold),
            0 0 45px var(--neon-gold-glow);
        transform: translateX(-50%) scale(1.03);
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.credits-counting {
    animation: creditsPulse 0.1s ease-in-out;
}

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

/* Video fade transitions */
.video-fade-out {
    animation: videoFadeOut 0.3s ease-out forwards;
}

.video-fade-in {
    animation: videoFadeIn 0.3s ease-in forwards;
}

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

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

/* ============================================
   PRIZE VIDEO OVERLAY
   ============================================ */
#prize-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    z-index: 500;
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

#prize-video-overlay.hidden {
    display: none !important;
}

#prize-canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Animation for overlay appearance */
#prize-video-overlay:not(.hidden) {
    animation: prizeOverlayIn 0.2s ease-out;
}

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

/* Prize overlay 1/3 size (for Queen's Favor and Golden Card videos) */
#prize-video-overlay.size-third {
    background: rgba(0, 0, 0, 0.6);
}

#prize-video-overlay.size-third #prize-canvas {
    width: auto;
    height: auto;
    max-width: 640px;
    max-height: 480px;
    object-fit: contain;
}

/* ============================================
   CONGRATULATIONS IMAGE OVERLAY
   ============================================ */
#congrats-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    z-index: 550; /* Above prize overlay (500), below buttons modal (600) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
}

#congrats-image-overlay.hidden {
    display: none !important;
}

#congrats-image-overlay img {
    max-width: 80%;
    max-height: 60%;
    object-fit: contain;
    filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.9));
    animation: congratsImagePulse 2s ease-in-out infinite;
}

@keyframes congratsImagePulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.9));
    }
    50% {
        transform: scale(1.03);
        filter: drop-shadow(0 0 60px rgba(255, 215, 0, 1));
    }
}

.click-hint {
    margin-top: 30px;
    font-size: 1.2rem;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    animation: hintBlink 1.5s ease-in-out infinite;
}

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

/* ============================================
   CONGRATULATIONS BUTTONS MODAL
   ============================================ */
#congrats-modal {
    z-index: 600;
}

.congrats-backdrop {
    background: rgba(0, 0, 0, 0.85);
}

.congrats-content {
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    max-width: 90vw;
    max-height: 90vh;
}

.congrats-buttons {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-congrats {
    padding: 20px 40px !important;
    font-size: 1.2rem !important;
    min-width: 250px;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: buttonGlow 1.5s ease-in-out infinite alternate;
}

.btn-congrats:hover {
    transform: scale(1.05);
}

#btn-unlock-nsfw {
    background: linear-gradient(180deg, #ff1744, #c41230);
    animation: nsfwButtonGlow 1.5s ease-in-out infinite alternate;
}

#btn-unlock-nsfw:hover {
    background: linear-gradient(180deg, #ff4569, #ff1744);
}

@keyframes buttonGlow {
    from {
        box-shadow: 0 0 10px rgba(46, 204, 64, 0.5);
    }
    to {
        box-shadow: 0 0 25px rgba(46, 204, 64, 0.8);
    }
}

@keyframes nsfwButtonGlow {
    from {
        box-shadow: 0 0 10px rgba(255, 23, 68, 0.5);
    }
    to {
        box-shadow: 0 0 25px rgba(255, 23, 68, 0.8);
    }
}

/* ============================================
   MOBILE WELCOME OVERLAY
   ============================================ */
#mobile-welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #0a0a12 100%);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#mobile-welcome-overlay.hidden {
    display: none !important;
}

.mobile-welcome-content {
    text-align: center;
    padding: 30px;
    max-width: 90vw;
}

.mobile-welcome-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.mobile-welcome-icon svg {
    width: 60px;
    height: 60px;
    fill: var(--neon-gold);
    filter: drop-shadow(0 0 10px var(--neon-gold-glow));
}

.mobile-landscape-icon {
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        filter: drop-shadow(0 0 10px var(--neon-gold-glow));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 20px var(--neon-gold-glow));
        transform: scale(1.1);
    }
}

.mobile-rotate-arrow svg {
    width: 40px;
    height: 40px;
    fill: var(--neon-cyan);
    animation: arrowPulse 1.5s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.5;
    }
    50% {
        transform: translateX(10px);
        opacity: 1;
    }
}

.mobile-welcome-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(24px, 6vw, 36px);
    font-weight: 900;
    color: var(--neon-gold);
    text-shadow: 0 0 20px var(--neon-gold-glow);
    letter-spacing: 4px;
    margin-bottom: 20px;
}

.mobile-welcome-text {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: clamp(14px, 4vw, 18px);
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.5;
}

.mobile-welcome-text-es {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: clamp(12px, 3.5vw, 16px);
    color: var(--text-secondary);
    margin-bottom: 30px;
    line-height: 1.5;
}

.btn-mobile-start {
    padding: 18px 50px !important;
    font-size: clamp(16px, 4vw, 22px) !important;
    min-width: 200px;
    animation: buttonPulse 2s ease-in-out infinite;
}

@keyframes buttonPulse {
    0%, 100% {
        box-shadow:
            0 4px 0 #145c1a,
            0 6px 15px rgba(0, 0, 0, 0.4),
            0 0 15px rgba(46, 204, 64, 0.3);
    }
    50% {
        box-shadow:
            0 4px 0 #145c1a,
            0 6px 15px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(46, 204, 64, 0.6);
    }
}

.mobile-welcome-hint {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: clamp(11px, 3vw, 14px);
    color: var(--text-secondary);
    margin-top: 15px;
    animation: hintBlink 1.5s ease-in-out infinite;
}

/* ============================================
   MOBILE-SPECIFIC STYLES
   ============================================ */

/* Prevent interaction while welcome overlay is active */
body.mobile-welcome-active #app-container {
    pointer-events: none;
    filter: blur(5px);
}

/* ============================================
   MOBILE TOUCH OPTIMIZATIONS
   ============================================
   These styles ONLY improve touch interaction.
   Layout remains exactly 1920x1080 - scaled by ScaleSystem.
   DO NOT add size/position changes here!
   ============================================ */

/* Touch action for all interactive elements - prevents zoom/scroll interference */
body.is-mobile button,
body.is-mobile .game-btn,
body.is-mobile .hold-btn,
body.is-mobile .blessing-clickable,
body.is-mobile #three-container,
body.is-mobile .card-area {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

/* Touch active state - visual feedback on press */
body.is-mobile .touch-active {
    filter: brightness(0.85);
    transition: filter 0.05s;
}

body.is-mobile .game-btn.touch-active {
    transform: translateY(2px);
}

body.is-mobile .hold-btn.touch-active {
    background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%) !important;
}

/* ============================================
   TITLE SCREEN
   ============================================ */
#title-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    background: #000;
    z-index: 10001;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#title-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.title-screen-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
    pointer-events: none;
}

.title-ai-disclaimer {
    position: fixed;
    top: 15px;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    color: #ffffff;
    letter-spacing: 1px;
    z-index: 9999;
    pointer-events: none;
    animation: disclaimerPulse 2s ease-in-out infinite;
    transition: opacity 0.3s ease;
}

.title-ai-disclaimer.hidden {
    opacity: 0;
    animation: none;
}

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

#title-screen.hidden {
    display: none !important;
}

.title-screen-content {
    text-align: center;
    padding: 35px 45px;
    background: linear-gradient(145deg, rgba(20, 10, 30, 0.92), rgba(10, 5, 20, 0.95));
    border-radius: 20px;
    border: 2px solid var(--neon-gold);
    box-shadow:
        0 0 40px rgba(255, 215, 0, 0.25),
        0 0 80px rgba(255, 215, 0, 0.1),
        inset 0 0 60px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    z-index: 2;
}

/* Main Horizontal Row */
.title-main-row {
    display: flex;
    align-items: center;
    gap: 35px;
}

/* Left Section: Logo */
.title-logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 220px;
}

.title-logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 36px;
    font-weight: 900;
    color: var(--neon-gold);
    text-shadow:
        0 0 10px var(--neon-gold-glow),
        0 0 30px var(--neon-gold-glow),
        0 0 50px var(--neon-gold-glow),
        2px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 3px;
    margin-bottom: 6px;
    animation: titleGlow 2s ease-in-out infinite alternate;
    white-space: nowrap;
}

.title-subtitle {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    color: var(--neon-cyan);
    text-shadow: 0 0 15px var(--neon-cyan-glow);
    letter-spacing: 8px;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 12px;
}

.title-version {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 2px;
}

@keyframes titleGlow {
    from {
        text-shadow:
            0 0 10px var(--neon-gold-glow),
            0 0 30px var(--neon-gold-glow),
            0 0 50px var(--neon-gold-glow),
            2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    to {
        text-shadow:
            0 0 15px var(--neon-gold-glow),
            0 0 40px var(--neon-gold-glow),
            0 0 70px var(--neon-gold-glow),
            2px 2px 4px rgba(0, 0, 0, 0.5);
    }
}

/* Vertical Divider */
.title-divider-v {
    width: 1px;
    height: 140px;
    background: linear-gradient(180deg, transparent, rgba(255, 215, 0, 0.4), transparent);
}

/* Center Section: Play Buttons */
.title-play-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 240px;
}

/* Right Section: Secondary Buttons (2x2 Grid) */
.title-secondary-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Play Buttons (Continue/New Game) */
.btn-play {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 18px 28px !important;
    font-size: 20px !important;
    letter-spacing: 2px;
    font-weight: 700;
}

.btn-play .btn-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* Grid Buttons (Store, Leaderboard, Settings, Exit) */
.btn-title-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 14px 16px !important;
    font-size: 11px !important;
    letter-spacing: 1px;
    min-width: 90px;
    min-height: 70px;
}

.btn-title-grid .btn-icon {
    width: 22px;
    height: 22px;
    opacity: 0.9;
}

/* Button Icons */
.btn-icon {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
}

/* Red button for Exit */
.btn-red {
    background: linear-gradient(180deg, #c0392b 0%, #922b21 50%, #7b241c 100%);
    color: white;
    border: none;
    box-shadow:
        0 4px 0 #641e16,
        0 6px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-red:hover {
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 50%, #922b21 100%);
    box-shadow:
        0 4px 0 #7b241c,
        0 6px 20px rgba(231, 76, 60, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-red:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 #641e16,
        0 3px 10px rgba(0, 0, 0, 0.4);
}

/* View Mode Selector (Mobile/Desktop) */
.view-mode-selector {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.view-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-mode-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.8);
}

.view-mode-btn.active {
    background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%);
    border-color: #4caf50;
    color: #fff;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.view-mode-btn.active:hover {
    background: linear-gradient(180deg, #388e3c 0%, #2e7d32 100%);
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.7),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.view-mode-icon {
    width: 22px;
    height: 22px;
}

/* Legacy support */
.btn-title {
    min-width: 200px;
    padding: 18px 40px !important;
    font-size: clamp(16px, 3vw, 22px) !important;
    letter-spacing: 2px;
}

#btn-start-game {
    animation: startButtonPulse 1.5s ease-in-out infinite;
}

@keyframes startButtonPulse {
    0%, 100% {
        box-shadow:
            0 4px 0 #145c1a,
            0 6px 15px rgba(0, 0, 0, 0.4),
            0 0 20px rgba(46, 204, 64, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 4px 0 #145c1a,
            0 6px 15px rgba(0, 0, 0, 0.4),
            0 0 40px rgba(46, 204, 64, 0.7);
        transform: scale(1.02);
    }
}

/* Start button with subtitle */
.btn-start-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.btn-subtitle {
    font-size: clamp(10px, 1.5vw, 13px) !important;
    font-weight: 400;
    opacity: 0.7;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.8);
}

.btn-subtitle.hidden {
    display: none;
}

.title-screen-hint {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: clamp(12px, 2vw, 16px);
    color: var(--text-secondary);
    animation: hintBlink 1.5s ease-in-out infinite;
}

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

/* Hide title screen in portrait mode on mobile */
@media screen and (max-width: 900px) and (orientation: portrait) {
    #title-screen {
        display: none !important;
    }
}

/* Mobile title screen adjustments - Horizontal layout */
@media screen and (max-height: 600px) {
    .title-screen-content {
        padding: 25px 35px;
    }

    .title-main-row {
        gap: 25px;
    }

    .title-logo-section {
        min-width: 180px;
    }

    .title-logo {
        font-size: 28px;
        letter-spacing: 2px;
    }

    .title-subtitle {
        font-size: 12px;
        letter-spacing: 6px;
    }

    .title-divider-v {
        height: 110px;
    }

    .title-play-section {
        min-width: 200px;
        gap: 10px;
    }

    .btn-play {
        padding: 14px 20px !important;
        font-size: 16px !important;
        gap: 8px;
    }

    .btn-play .btn-icon {
        width: 20px;
        height: 20px;
    }

    .btn-title-grid {
        padding: 10px 12px !important;
        font-size: 10px !important;
        min-width: 75px;
        min-height: 58px;
    }

    .btn-title-grid .btn-icon {
        width: 18px;
        height: 18px;
    }
}

/* Very small screens */
@media screen and (max-height: 480px) {
    .title-screen-content {
        padding: 18px 25px;
    }

    .title-main-row {
        gap: 18px;
    }

    .title-logo-section {
        min-width: 150px;
    }

    .title-logo {
        font-size: 22px;
    }

    .title-subtitle {
        font-size: 10px;
        letter-spacing: 4px;
        margin-bottom: 8px;
    }

    .title-version {
        font-size: 9px;
    }

    .title-divider-v {
        height: 90px;
    }

    .title-play-section {
        min-width: 170px;
        gap: 8px;
    }

    .btn-play {
        padding: 12px 16px !important;
        font-size: 16px !important;
    }

    .btn-title-grid {
        padding: 10px 8px !important;
        font-size: 10px !important;
        min-height: 55px;
    }

    .btn-title-grid .btn-icon {
        width: 18px;
        height: 18px;
    }

    .title-secondary-section {
        gap: 6px;
    }
}

/* ============================================
   MOBILE-SPECIFIC TITLE SCREEN (larger elements)
   Applied via body.is-mobile class from MobileSystem
   ============================================ */
body.is-mobile #title-screen .title-screen-content {
    padding: 50px 60px;
    border-radius: 30px;
    border-width: 3px;
}

body.is-mobile #title-screen .title-main-row {
    gap: 50px;
}

body.is-mobile #title-screen .title-logo-section {
    min-width: 320px;
}

body.is-mobile #title-screen .title-logo {
    font-size: 52px;
    letter-spacing: 4px;
}

body.is-mobile #title-screen .title-subtitle {
    font-size: 20px;
    letter-spacing: 10px;
    margin-bottom: 16px;
}

body.is-mobile #title-screen .title-version {
    font-size: 14px;
}

body.is-mobile #title-screen .title-divider-v {
    height: 200px;
    width: 2px;
}

body.is-mobile #title-screen .title-play-section {
    min-width: 340px;
    gap: 18px;
}

body.is-mobile #title-screen .btn-play {
    padding: 26px 40px !important;
    font-size: 28px !important;
    gap: 16px;
    letter-spacing: 3px;
    border-radius: 12px;
}

body.is-mobile #title-screen .btn-play .btn-icon {
    width: 36px;
    height: 36px;
}

body.is-mobile #title-screen .title-secondary-section {
    gap: 14px;
}

body.is-mobile #title-screen .btn-title-grid {
    padding: 20px 22px !important;
    font-size: 16px !important;
    min-width: 130px;
    min-height: 100px;
    gap: 8px;
    border-radius: 10px;
}

body.is-mobile #title-screen .btn-title-grid .btn-icon {
    width: 32px;
    height: 32px;
}

/* Mobile landscape override - keep buttons large even on short screens */
@media screen and (max-height: 550px) {
    body.is-mobile #title-screen .title-screen-content {
        padding: 25px 35px;
    }

    body.is-mobile #title-screen .title-main-row {
        gap: 30px;
    }

    body.is-mobile #title-screen .title-logo {
        font-size: 36px;
    }

    body.is-mobile #title-screen .title-subtitle {
        font-size: 14px;
        letter-spacing: 6px;
        margin-bottom: 10px;
    }

    body.is-mobile #title-screen .title-divider-v {
        height: 140px;
    }

    body.is-mobile #title-screen .btn-play {
        padding: 18px 30px !important;
        font-size: 22px !important;
        gap: 12px;
    }

    body.is-mobile #title-screen .btn-play .btn-icon {
        width: 28px;
        height: 28px;
    }

    body.is-mobile #title-screen .btn-title-grid {
        padding: 14px 16px !important;
        font-size: 13px !important;
        min-width: 100px;
        min-height: 75px;
        gap: 6px;
    }

    body.is-mobile #title-screen .btn-title-grid .btn-icon {
        width: 26px;
        height: 26px;
    }

    body.is-mobile #title-screen .title-secondary-section {
        gap: 10px;
    }
}

/* Very small mobile landscape (iPhone SE landscape, etc) */
@media screen and (max-height: 420px) {
    body.is-mobile #title-screen .title-screen-content {
        padding: 18px 25px;
    }

    body.is-mobile #title-screen .title-main-row {
        gap: 20px;
    }

    body.is-mobile #title-screen .title-logo {
        font-size: 28px;
    }

    body.is-mobile #title-screen .title-subtitle {
        font-size: 11px;
        letter-spacing: 4px;
        margin-bottom: 6px;
    }

    body.is-mobile #title-screen .title-version {
        font-size: 10px;
    }

    body.is-mobile #title-screen .title-divider-v {
        height: 100px;
    }

    body.is-mobile #title-screen .title-play-section {
        gap: 10px;
    }

    body.is-mobile #title-screen .btn-play {
        padding: 14px 24px !important;
        font-size: 18px !important;
        gap: 10px;
    }

    body.is-mobile #title-screen .btn-play .btn-icon {
        width: 22px;
        height: 22px;
    }

    body.is-mobile #title-screen .btn-title-grid {
        padding: 10px 12px !important;
        font-size: 11px !important;
        min-width: 80px;
        min-height: 60px;
        gap: 4px;
    }

    body.is-mobile #title-screen .btn-title-grid .btn-icon {
        width: 20px;
        height: 20px;
    }

    body.is-mobile #title-screen .title-secondary-section {
        gap: 8px;
    }
}

/* ============================================
   MOBILE GAMEPLAY STYLES
   Major redesign for touch-friendly interface
   ============================================ */

/* Hide LED banner (rotating info text) on mobile */
body.is-mobile #led-banner {
    display: none !important;
}

/* Hide original jukebox on mobile (replaced with popup) */
body.is-mobile #jukebox {
    display: none !important;
}

/* Mobile jukebox popup (triggered by music button) - 2x larger */
body.is-mobile #jukebox-popup {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 1000;
    transform: scale(2.0);
    transform-origin: bottom right;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
    border-radius: 15px;
    overflow: hidden;
}

body.is-mobile #jukebox-popup.visible {
    display: block;
    animation: jukeboxPopIn 0.2s ease-out;
}

@keyframes jukeboxPopIn {
    from { opacity: 0; transform: scale(1.5); }
    to { opacity: 1; transform: scale(2.0); }
}

/* Jukebox popup backdrop for closing */
body.is-mobile #jukebox-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

body.is-mobile #jukebox-backdrop.visible {
    display: block;
}

/* Floating buttons - much larger on mobile */
body.is-mobile #floating-buttons {
    bottom: 10px;
    right: 10px;
    gap: 10px;
}

body.is-mobile .floating-btn {
    width: 80px;
    height: 80px;
    border-width: 4px;
}

body.is-mobile .floating-btn svg {
    width: 40px;
    height: 40px;
}

/* Music button for jukebox popup */
body.is-mobile #btn-music {
    display: flex !important; /* Show music button on mobile */
}

body.is-mobile .floating-btn.btn-music {
    border-color: #6644aa;
    background: linear-gradient(180deg, #553377 0%, #442266 50%, #331155 100%);
}

body.is-mobile .floating-btn.btn-music:hover,
body.is-mobile .floating-btn.btn-music.active {
    border-color: #9966dd;
    background: linear-gradient(180deg, #664488 0%, #553377 50%, #442266 100%);
    box-shadow: 0 0 15px rgba(153, 102, 221, 0.5);
}

body.is-mobile .floating-btn.btn-music svg {
    fill: #bb99ee;
}

/* Game board - green gradient instead of mesa.jpg */
body.is-mobile #three-container {
    background: linear-gradient(180deg,
        #1a4d1a 0%,
        #2d5a2d 30%,
        #3d6b3d 60%,
        #2d5a2d 100%) !important;
}

/* Keep Three.js canvas visible on mobile (cards need to render) */
body.is-mobile #three-container canvas {
    display: block !important;
}

/* Pay table on mobile - positioned right in game panel, double column */
body.is-mobile #pay-table-section {
    display: block !important;
    position: absolute !important;
    top: 10px !important;
    /* Left edge at 35% of game panel, grows to the right */
    left: 35% !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    z-index: 50 !important;
    padding: 0 !important;
}

body.is-mobile #pay-table-frame {
    padding: 10px 15px !important;
    width: 710px !important;
    min-width: 710px !important;
}

body.is-mobile #pay-table {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2px 20px !important;
    font-size: 15px !important;
    width: 100% !important;
    line-height: 1.1 !important;
}

body.is-mobile .pay-row {
    padding: 3px 8px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

body.is-mobile .pay-row .hand-name {
    font-size: 14px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

body.is-mobile .pay-row .pay-payout {
    font-size: 16px !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
}

/* Hide mobile compact pay table (use original instead) */
body.is-mobile #pay-table-mobile {
    display: none !important;
}

body.is-mobile #pay-table-mobile-text {
    font-size: 18px;
    font-weight: 600;
    color: #88ccff;
    text-align: center;
}

body.is-mobile #pay-table-mobile.winner #pay-table-mobile-text {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    animation: mobileWinPulse 0.5s ease-in-out infinite;
}

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

/* Mobile pay table modal (full list) */
body.is-mobile #pay-table-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

body.is-mobile #pay-table-modal.visible {
    display: flex;
}

body.is-mobile #pay-table-modal-content {
    background: linear-gradient(180deg, rgba(40, 40, 60, 0.98) 0%, rgba(20, 20, 35, 0.98) 100%);
    border: 3px solid var(--neon-gold);
    border-radius: 15px;
    padding: 20px;
    max-width: 90%;
    max-height: 80%;
    overflow-y: auto;
}

body.is-mobile #pay-table-modal-content .pay-row {
    padding: 10px 15px;
    font-size: 18px;
}

body.is-mobile #pay-table-modal-content .hand-name {
    font-size: 16px;
}

body.is-mobile #pay-table-modal-content .pay-payout {
    font-size: 20px;
}

/* Hide hold buttons on mobile */
body.is-mobile #hold-buttons {
    display: none !important;
}

/* Cards section - no perspective, viewed from above */
body.is-mobile #cards-section {
    perspective: none !important;
    transform: none !important;
}

/* Show card areas on mobile for tap-to-hold interaction */
/* Position matches where Three.js renders cards with camera offset */
body.is-mobile #card-areas {
    display: flex !important;
    position: fixed;
    /* Fixed positioning relative to viewport */
    /* Cards position with camera Z offset of -0.25 */
    /* Adjusted to align with Three.js cards */
    top: 53%;
    left: 8.5%;
    transform: translate(0, -50%) !important;
    justify-content: flex-start;
    gap: 95px;
    padding: 0;
    z-index: 100;
}

/* Card click areas - sized to match Three.js cards */
body.is-mobile .card-area {
    width: 125px !important;
    height: 180px !important;
    transform: none !important;
    perspective: none !important;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative !important;
    pointer-events: auto !important;
    z-index: 25 !important;
}

/* Hold text overlay on cards (appears when tapped) */
body.is-mobile .card-hold-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 215, 0, 0.35);
    border: 4px solid #ffd700;
    border-radius: 10px;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), inset 0 0 15px rgba(255, 215, 0, 0.3);
}

body.is-mobile .card-area.held .card-hold-overlay {
    display: flex !important;
}

body.is-mobile .card-hold-text {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    text-shadow:
        0 0 10px #ffd700,
        0 0 20px #ffd700,
        0 2px 4px rgba(0, 0, 0, 0.9),
        0 4px 8px rgba(0, 0, 0, 0.7);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Mobile hint for selecting cards - must be position: absolute to not affect layout */
body.is-mobile #mobile-card-hint {
    display: none;
    position: absolute;
    /* Position centered horizontally within game area */
    left: calc(var(--game-panel-width) / 2);
    transform: translateX(-50%);
    /* Position below the cards, above the controls */
    bottom: 310px;
    z-index: 100;
    text-align: center;
    padding: 12px 24px;
    font-size: 20px;
    color: #88ccff;
    background: rgba(0, 20, 40, 0.85);
    border: 2px solid #00aaff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.4);
    animation: hintPulse 2s ease-in-out infinite;
    pointer-events: none;
}

body.is-mobile #mobile-card-hint.visible {
    display: block;
}

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

/* Game panel - ensure no overflow on mobile, move up since no LED banner */
body.is-mobile #game-panel {
    overflow: hidden !important;
    margin-top: -25px !important; /* Move up since LED banner is hidden */
}

body.is-mobile #game-panel-inner {
    overflow: hidden !important;
}

body.is-mobile #scale-container {
    overflow: hidden !important;
}

/* Controls section - reorganized for mobile */
body.is-mobile #controls-section {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 10px 20px !important;
    overflow: hidden !important;
}

/* Left side: Bet controls */
body.is-mobile #center-controls {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 1 auto !important;
}

/* Show BET display on mobile - much larger numbers */
body.is-mobile #bet-display {
    display: flex !important;
    background: rgba(0, 0, 0, 0.7) !important;
    padding: 15px 30px !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    border: 2px solid rgba(255, 215, 0, 0.3) !important;
}

body.is-mobile #bet-display .lcd-value {
    font-size: 42px !important;
    font-weight: bold !important;
}

body.is-mobile #bet-display .lcd-label {
    font-size: 18px !important;
}

/* Bet buttons in a compact row - 3x larger */
body.is-mobile .bet-buttons-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
}

body.is-mobile .bet-buttons-row .game-btn {
    padding: 28px 32px !important;
    font-size: 26px !important;
    min-width: 100px !important;
    flex-shrink: 0 !important;
    font-weight: bold !important;
}

/* Right side: DEAL button and Credits */
body.is-mobile #right-controls {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
}

/* Deal/Draw button - prominent and 3x larger */
body.is-mobile #btn-deal-draw {
    padding: 30px 70px !important;
    font-size: 34px !important;
    min-width: 220px !important;
    order: 1 !important;
    font-weight: bold !important;
}

/* Credits display below DEAL button - 2x larger */
body.is-mobile #credits-display {
    order: 2 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    min-width: auto !important;
}

body.is-mobile #credits-display .lcd-value {
    font-size: 32px !important;
}

body.is-mobile #credits-display .lcd-label {
    font-size: 16px !important;
}

/* Double controls larger */
body.is-mobile #double-controls {
    padding: 15px !important;
    gap: 12px !important;
}

body.is-mobile #double-info {
    font-size: 16px !important;
}

body.is-mobile #double-prize-display {
    font-size: 20px !important;
}

body.is-mobile .double-buttons .game-btn {
    padding: 15px 30px !important;
    font-size: 18px !important;
}

/* XP bar - position above character panel on mobile only, 2x larger */
body.is-mobile #xp-bar-container {
    position: fixed !important;
    top: 8px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 35% !important;
    max-width: 400px !important;
    transform: scale(1.5) !important;
    transform-origin: top right !important;
    z-index: 100;
}

body.is-mobile #xp-bar-container .xp-info {
    font-size: 16px !important;
}

body.is-mobile #xp-bar-container .xp-bar {
    height: 12px !important;
}

/* Larger fonts throughout */
body.is-mobile #game-message {
    font-size: 24px !important;
}

body.is-mobile #win-display {
    font-size: 20px !important;
}

body.is-mobile #win-hand-name {
    font-size: 28px !important;
}

body.is-mobile #win-amount {
    font-size: 32px !important;
}

/* Character panel adjustments for mobile */
body.is-mobile #character-panel {
    padding-top: 60px; /* Make room for XP bar */
}

body.is-mobile #character-text-panel {
    font-size: 22px !important;
    line-height: 1.4 !important;
    padding: 15px !important;
}

body.is-mobile #character-name {
    font-size: 26px !important;
}

body.is-mobile #character-text {
    font-size: 20px !important;
}

/* Speedrun timer larger and moved away from edge */
body.is-mobile #speedrun-timer {
    transform: scale(1.3);
    transform-origin: top left;
    left: 25px !important;
    top: 15px !important;
}

/* Draws display larger */
body.is-mobile #draws-display {
    transform: scale(1.3);
}

/* Hide maxbet indicator - shown differently */
body.is-mobile #maxbet-indicator {
    font-size: 14px !important;
}

/* Perk cooldown and buy perk indicators larger */
body.is-mobile .perk-indicator {
    font-size: 14px !important;
    padding: 8px 12px !important;
}

/* Active perks (blessings) bar - moved to character panel on mobile */
body.is-mobile #blessings-bar {
    /* Position below XP bar in character panel area */
    position: fixed !important;
    top: 105px !important;
    right: 10px !important;
    left: auto !important;
    transform: none !important;
    padding: 10px 15px !important;
    gap: 10px !important;
    border-radius: 25px !important;
    max-width: 35% !important;
    justify-content: flex-end !important;
    z-index: 99 !important;
}

body.is-mobile .blessing-active {
    width: 60px !important;
    height: 60px !important;
    font-size: 36px !important;
    border-width: 3px !important;
}

body.is-mobile .blessing-counter {
    min-width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
    bottom: -4px !important;
    right: -4px !important;
}

/* ============================================
   DOUBLE OR NOTHING
   ============================================ */
#double-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid var(--neon-gold);
    border-radius: 10px;
    animation: doubleControlsAppear 0.3s ease-out;
}

#double-controls.hidden {
    display: none !important;
}

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

#double-info {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: clamp(10px, 1.5cqw, 14px);
    color: var(--text-secondary);
}

#double-prize-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(14px, 2cqw, 20px);
    color: var(--neon-gold);
    text-shadow: 0 0 10px var(--neon-gold-glow);
}

#double-prize {
    font-weight: 700;
    animation: prizePulse 1s ease-in-out infinite;
}

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

.double-buttons {
    display: flex;
    gap: 10px;
}

.btn-double {
    padding: 1cqh 2cqw !important;
    font-size: clamp(12px, 1.8cqw, 18px) !important;
    min-width: 80px;
}

#btn-double {
    animation: doubleButtonPulse 1.5s ease-in-out infinite;
}

@keyframes doubleButtonPulse {
    0%, 100% {
        box-shadow:
            0 4px 0 #a62820,
            0 6px 15px rgba(0, 0, 0, 0.4),
            0 0 15px rgba(255, 65, 54, 0.4);
    }
    50% {
        box-shadow:
            0 4px 0 #a62820,
            0 6px 15px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(255, 65, 54, 0.7);
    }
}

/* Double mode card highlighting */
.double-card-dealer {
    box-shadow: 0 0 20px rgba(255, 100, 0, 0.8) !important;
}

.double-card-pickable {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.double-card-pickable:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(46, 204, 64, 0.8) !important;
}

/* ============================================
   BLESS DECK SYSTEM
   ============================================ */

/* Purple button for Bless Deck */
.btn-purple {
    background: linear-gradient(180deg, #a855f7 0%, #7c3aed 50%, #5b21b6 100%);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow:
        0 4px 0 #4c1d95,
        0 6px 15px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(168, 85, 247, 0.4);
}

.btn-purple:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 #4c1d95,
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(168, 85, 247, 0.6);
}

.btn-purple:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #4c1d95;
}

#btn-bless-deck {
    animation: blessButtonGlow 1.5s ease-in-out infinite alternate;
}

@keyframes blessButtonGlow {
    from {
        box-shadow:
            0 4px 0 #4c1d95,
            0 0 15px rgba(168, 85, 247, 0.5);
    }
    to {
        box-shadow:
            0 4px 0 #4c1d95,
            0 0 35px rgba(168, 85, 247, 0.9),
            0 0 60px rgba(168, 85, 247, 0.5);
    }
}

/* Bless Deck Modal */
#bless-deck-modal {
    z-index: 650;
}

.bless-backdrop {
    background: radial-gradient(ellipse at center, rgba(88, 28, 135, 0.9) 0%, rgba(0, 0, 0, 0.95) 70%);
}

.bless-content {
    background: linear-gradient(180deg, rgba(88, 28, 135, 0.95) 0%, rgba(30, 10, 60, 0.98) 100%);
    border: 3px solid #a855f7;
    box-shadow:
        0 0 50px rgba(168, 85, 247, 0.6),
        inset 0 0 30px rgba(168, 85, 247, 0.2);
    max-width: 1400px;
    padding: 30px 40px;
    text-align: center;
}

.bless-header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(24px, 4vw, 36px);
    color: #fbbf24;
    text-shadow:
        0 0 20px rgba(251, 191, 36, 0.8),
        0 0 40px rgba(251, 191, 36, 0.5);
    letter-spacing: 4px;
    margin-bottom: 10px;
}

.milestone-text {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: clamp(14px, 2vw, 18px);
    color: #c084fc;
    margin-bottom: 25px;
}

.bless-options {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

/* 3 perks layout (normal perk selection) */
.bless-options.three-perks {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
}

/* 10 perks layout (cheat code / royal decree / level up) */
.bless-options.full-perks {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.blessing-card {
    width: 100%;
    max-width: 200px;
    background: transparent;
    border: 3px solid #7c3aed;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.blessing-card:hover {
    transform: translateY(-15px) scale(1.35);
    border-color: #fbbf24;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(251, 191, 36, 0.7);
    z-index: 10;
}

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

.blessing-image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 486 / 617;
    object-fit: cover;
}

.blessing-icon-fallback {
    font-size: 64px;
    padding: 60px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

/* Hidden elements - info is already on the card images */
.blessing-info,
.blessing-name,
.blessing-description,
.blessing-duration,
.blessing-icon {
    display: none;
}

.bless-hint {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: clamp(12px, 1.5vw, 14px);
    color: #c084fc;
    animation: hintBlink 1.5s ease-in-out infinite;
}

/* Active Blessings Icon Bar */
#blessings-bar {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    padding: 8px 15px;
    transition: gap 0.3s ease, padding 0.3s ease;
    background: linear-gradient(180deg, rgba(88, 28, 135, 0.9) 0%, rgba(30, 10, 60, 0.95) 100%);
    border: 2px solid #a855f7;
    border-radius: 30px;
    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(168, 85, 247, 0.4);
    z-index: 100;
    animation: blessingsBarAppear 0.4s ease-out;
    contain: layout style;
    backface-visibility: hidden;
}

#blessings-bar.hidden {
    display: none !important;
}

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

.blessing-active {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    border: 2px solid #7c3aed;
    cursor: help;
    transition: transform 0.3s ease, border-color 0.2s, box-shadow 0.2s;
    will-change: transform;
    contain: layout style;
}

/* Dynamic scaling based on active perk count (set via JS) */
/* Margin compensates for visual overflow from scale (icon is 44px with border) */
.blessing-active.perk-scale-2x { transform: scale(2); margin: 0 22px; }
.blessing-active.perk-scale-1_5x { transform: scale(1.5); margin: 0 11px; }
.blessing-active.perk-scale-1_25x { transform: scale(1.25); margin: 0 6px; }
/* 5+ perks = no extra scale (default) */

/* Consume pulse animation */
.blessing-active.blessing-consumed {
    animation: blessingConsumed 0.9s ease-out;
}

@keyframes blessingConsumed {
    0% {
        filter: brightness(1) drop-shadow(0 0 0 transparent);
        box-shadow: 0 0 0 rgba(251, 191, 36, 0);
        outline: 2px solid transparent;
        outline-offset: 0px;
    }
    15% {
        filter: brightness(4) drop-shadow(0 0 20px rgba(255, 255, 255, 0.9));
        box-shadow: 0 0 40px rgba(251, 191, 36, 1), 0 0 80px rgba(251, 191, 36, 0.8), 0 0 120px rgba(168, 85, 247, 0.6);
        outline: 3px solid rgba(255, 255, 255, 0.9);
        outline-offset: 4px;
    }
    35% {
        filter: brightness(3) drop-shadow(0 0 15px rgba(251, 191, 36, 0.8));
        box-shadow: 0 0 30px rgba(251, 191, 36, 0.9), 0 0 60px rgba(168, 85, 247, 0.5);
        outline: 2px solid rgba(251, 191, 36, 0.7);
        outline-offset: 8px;
    }
    55% {
        filter: brightness(1.8) drop-shadow(0 0 8px rgba(251, 191, 36, 0.4));
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.5), 0 0 40px rgba(168, 85, 247, 0.3);
        outline: 1px solid rgba(251, 191, 36, 0.3);
        outline-offset: 12px;
    }
    100% {
        filter: brightness(1) drop-shadow(0 0 0 transparent);
        box-shadow: 0 0 0 rgba(251, 191, 36, 0);
        outline: 1px solid transparent;
        outline-offset: 16px;
    }
}

.blessing-active:hover {
    border-color: #fbbf24;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.6);
}
.blessing-active:not(.perk-scale-2x):not(.perk-scale-1_5x):not(.perk-scale-1_25x):hover {
    transform: scale(1.15);
}
.blessing-active.perk-scale-2x:hover { transform: scale(2.15); }
.blessing-active.perk-scale-1_5x:hover { transform: scale(1.65); }
.blessing-active.perk-scale-1_25x:hover { transform: scale(1.4); }

/* Clickable blessings (like Sticky Hold) - GPU optimized */
.blessing-clickable {
    cursor: pointer;
    border-color: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
    animation: clickableGlow 2s ease-in-out infinite;
    will-change: opacity;
}

.blessing-clickable:hover {
    transform: scale(1.2);
    border-color: #4ade80;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.8);
    animation: none; /* Stop animation on hover for performance */
}

.blessing-clickable:active {
    transform: scale(0.95);
}

/* GPU-optimized glow animation using opacity instead of box-shadow */
@keyframes clickableGlow {
    0%, 100% {
        opacity: 0.85;
    }
    50% {
        opacity: 1;
    }
}

.blessing-counter {
    position: absolute;
    bottom: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #fbbf24;
    color: #000;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Tooltip for blessing icons - appears below */
.blessing-active::before {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid #a855f7;
    border-radius: 8px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    z-index: 10;
    pointer-events: none;
    margin-top: 8px;
}

.blessing-active:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Blessing expiring soon animation - GPU optimized */
.blessing-expiring .blessing-counter {
    background: #ef4444;
    animation: expiringPulse 0.8s ease-in-out infinite;
    will-change: transform;
}

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

/* ============================================
   BOTTOM INDICATORS CONTAINER
   ============================================ */
#bottom-indicators {
    position: absolute;
    bottom: 15px;
    left: 25%;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 100;
}

/* ============================================
   NEXT PERK INDICATOR
   ============================================ */
#next-perk-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 40px;
    background: linear-gradient(180deg, rgba(20, 60, 20, 0.9) 0%, rgba(10, 40, 10, 0.95) 100%);
    border: 2px solid #4ade80;
    border-radius: 25px;
    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(74, 222, 128, 0.3);
}

#next-perk-indicator.hidden {
    display: none !important;
}

/* Cooldown active state - orange/yellow color */
#next-perk-indicator.cooldown-active {
    background: linear-gradient(180deg, rgba(80, 50, 20, 0.9) 0%, rgba(50, 30, 10, 0.95) 100%);
    border-color: #f59e0b;
    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(245, 158, 11, 0.3);
}

#next-perk-indicator.cooldown-active .next-perk-label {
    color: #fcd34d;
}

#next-perk-indicator.cooldown-active #next-perk-value {
    color: #f59e0b;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
}

.next-perk-label {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    color: #86efac;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#next-perk-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.8);
}

/* ============================================
   MAX BET LINE (Combined Max Bet + High Roller)
   ============================================ */
#max-bet-line {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 15px;
    height: 40px;
    background: linear-gradient(180deg, rgba(60, 40, 20, 0.9) 0%, rgba(40, 25, 10, 0.95) 100%);
    border: 2px solid #f59e0b;
    border-radius: 25px;
    box-shadow:
        0 3px 15px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(245, 158, 11, 0.3);
    font-size: 13px;
    white-space: nowrap;
}

.max-bet-label {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    color: #fcd34d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#max-bet-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #f59e0b;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.8);
}

/* High Roller inline with Max Bet */
#high-roller-bonus {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

#high-roller-bonus.hidden {
    display: none !important;
}

#high-roller-bonus .hr-separator {
    color: #666;
}

#high-roller-bonus .indicator-label {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    color: #e9d5ff;
    text-transform: uppercase;
}

#high-roller-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #c084fc;
    text-shadow: 0 0 8px rgba(192, 132, 252, 0.8);
}

/* ============================================
   BUY PERK BUTTON
   ============================================ */
.buy-perk-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: 40px;
    background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 50%, #4c1d95 100%);
    border: 2px solid #a78bfa;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(167, 139, 250, 0.3);
}

.buy-perk-btn:hover {
    transform: scale(1.05);
    box-shadow:
        0 5px 25px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(167, 139, 250, 0.5);
}

.buy-perk-btn:active {
    transform: scale(0.98);
}

.buy-perk-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.buy-perk-icon {
    font-size: 16px;
}

.buy-perk-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #e9d5ff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.buy-perk-price {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
}

/* ============================================
   HIGH ROLLER WARNING POP-OUTS
   ============================================ */
.hr-warning-popout {
    position: absolute;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    max-width: 280px;
    white-space: normal;
    text-align: center;
    border: 1px solid var(--neon-gold);
    z-index: 1000;
    pointer-events: none;
    animation: hrWarningPopout 7s ease-in-out forwards;
}

.hr-warning-popout.hidden {
    display: none;
}

/* Arrow for pop-outs pointing down (above target) */
.hr-warning-popout.arrow-down::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--neon-gold);
}

/* Arrow for pop-outs pointing up (below target) */
.hr-warning-popout.arrow-up::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--neon-gold);
}

@keyframes hrWarningPopout {
    0% { opacity: 0; }
    4% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

/* ============================================
   FLOATING HELP/SETTINGS BUTTONS
   ============================================ */
#floating-buttons {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 190;
    pointer-events: auto;
}

.floating-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #555;
    background: linear-gradient(180deg, #444 0%, #333 50%, #222 100%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow:
        0 3px 0 #111,
        0 4px 10px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.floating-btn svg {
    width: 22px;
    height: 22px;
    fill: #aaa;
    transition: all 0.2s;
}

.floating-btn:hover {
    transform: translateY(-2px);
    border-color: #888;
    box-shadow:
        0 5px 0 #111,
        0 6px 15px rgba(0, 0, 0, 0.5);
}

.floating-btn:hover svg {
    fill: #fff;
}

.floating-btn:active {
    transform: translateY(1px);
    box-shadow:
        0 2px 0 #111,
        0 3px 8px rgba(0, 0, 0, 0.5);
}

/* Exit button - red tinted */
.floating-btn.btn-exit {
    border-color: #8b4444;
    background: linear-gradient(180deg, #664444 0%, #553333 50%, #442222 100%);
}

.floating-btn.btn-exit:hover {
    border-color: #aa6666;
    background: linear-gradient(180deg, #884444 0%, #773333 50%, #662222 100%);
}

.floating-btn.btn-exit svg {
    fill: #ff8888;
}

.floating-btn.btn-exit:hover svg {
    fill: #ffaaaa;
}

/* Store button - gold tinted */
.floating-btn.btn-store {
    border-color: var(--gold-dark);
    background: linear-gradient(180deg, #665522 0%, #554411 50%, #443300 100%);
}

.floating-btn.btn-store:hover {
    border-color: var(--neon-gold);
    background: linear-gradient(180deg, #886633 0%, #775522 50%, #664411 100%);
    box-shadow: 0 0 15px var(--neon-gold-glow);
}

.floating-btn.btn-store svg {
    fill: var(--neon-gold);
}

.floating-btn.btn-store:hover svg {
    fill: var(--gold-light);
}

/* Mobile adjustments for floating buttons */
@media screen and (max-height: 500px) {
    #floating-buttons {
        bottom: 10px;
        right: 10px;
        gap: 8px;
    }

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

    .floating-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================
   XP BAR (RPG SYSTEM)
   ============================================ */
#xp-bar-container {
    position: absolute;
    bottom: 145px;  /* Above the jukebox */
    left: 15px;
    width: 280px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid var(--gold-primary);
    border-radius: 10px;
    padding: 8px 12px;
    z-index: 150;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(212, 168, 73, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.xp-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-family: 'Orbitron', sans-serif;
}

#player-level {
    font-size: 14px;
    font-weight: bold;
    color: var(--neon-gold);
    text-shadow: 0 0 8px var(--neon-gold-glow);
}

#xp-text {
    font-size: 11px;
    color: #aaa;
    letter-spacing: 0.5px;
}

.xp-bar {
    width: 100%;
    height: 12px;
    background: #111;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #333;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

#xp-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right,
        #00ff00 0%,
        #88ff00 25%,
        #ffff00 50%,
        #ff8800 75%,
        #ff0000 100%
    );
    background-size: 200% 100%;
    border-radius: 6px;
    transition: width 0.5s ease-out;
    box-shadow:
        0 0 10px rgba(255, 255, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* ============================================
   LEVEL UP OVERLAY
   ============================================ */
#level-up-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#level-up-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

#level-up-overlay.hidden {
    display: none;
}

.level-up-content {
    text-align: center;
    transform: rotate(-10deg);
}

.level-up-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: var(--neon-gold);
    text-shadow:
        0 0 20px var(--neon-gold),
        0 0 40px var(--neon-gold),
        0 0 60px var(--neon-gold-glow),
        0 0 80px rgba(255, 215, 0, 0.4);
    animation: levelUpPulse 0.6s ease-in-out infinite;
    letter-spacing: 4px;
}

.new-level-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 36px;
    color: #fff;
    margin-top: 15px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.new-level-text span {
    color: var(--neon-cyan);
    font-weight: bold;
    text-shadow: 0 0 15px var(--neon-cyan-glow);
}

.level-up-bonuses {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.level-up-bonuses .bonus-item {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 22px;
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
    padding: 8px 20px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 5px;
}

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

/* ============================================
   DOUBLE UP x4 EFFECT
   ============================================ */
#double-up-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#double-up-effect.active {
    opacity: 1;
    pointer-events: auto;
}

#double-up-effect.hidden {
    display: none;
}

.double-up-content {
    text-align: center;
    animation: doubleUpBounce 0.5s ease-out;
}

.double-up-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 52px;
    font-weight: bold;
    color: #ff3366;
    text-shadow:
        0 0 20px #ff3366,
        0 0 40px #ff3366,
        0 0 60px rgba(255, 51, 102, 0.5);
    margin-bottom: 30px;
    letter-spacing: 4px;
    animation: titlePulse 0.5s ease-in-out infinite;
}

.double-up-breakdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
    padding: 20px 40px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.double-up-breakdown .amount {
    font-family: 'Orbitron', sans-serif;
    font-size: 36px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.double-up-breakdown .amount.final {
    font-size: 48px;
    color: #00ff88;
    text-shadow:
        0 0 15px #00ff88,
        0 0 30px rgba(0, 255, 136, 0.5);
    animation: finalAmountPulse 0.4s ease-in-out infinite;
}

.double-up-breakdown .operator {
    font-family: 'Orbitron', sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: var(--neon-gold);
    text-shadow: 0 0 10px var(--neon-gold-glow);
    padding: 8px 15px;
    background: rgba(255, 215, 0, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.double-up-breakdown .operator.perk-bonus {
    font-size: 32px;
    color: #ff3366;
    text-shadow:
        0 0 15px #ff3366,
        0 0 30px rgba(255, 51, 102, 0.5);
    background: rgba(255, 51, 102, 0.2);
    border: 2px solid rgba(255, 51, 102, 0.5);
    animation: perkBonusPulse 0.3s ease-in-out infinite;
}

.double-up-explanation {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 22px;
    color: #aaa;
    margin-top: 20px;
    font-style: italic;
}

@keyframes doubleUpBounce {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

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

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

@keyframes perkBonusPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 51, 102, 0.5);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(255, 51, 102, 0.8);
    }
}

/* ============================================
   JUKEBOX
   ============================================ */
#jukebox {
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 280px;
    height: 120px;
    z-index: 150;
    border-radius: 12px;
    overflow: visible;
    box-shadow:
        0 5px 25px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(255, 100, 50, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    border: 2px solid #8b4513;
}

/* Background layer - gradient */
.jukebox-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(180deg, #3a2015 0%, #2a1810 50%, #1a0a05 100%);
}

/* Content layer on top of background */
.jukebox-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    z-index: 1;
}

/* Song Title Bar with LED effect */
.jukebox-title-bar {
    position: relative;
    height: 36px;
    background: linear-gradient(180deg, #1a0a05 0%, #0d0503 100%);
    border: 2px solid #ff6b35;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 0 15px rgba(255, 100, 50, 0.3),
        0 0 8px rgba(255, 100, 50, 0.4);
    transition: all 0.2s;
}

.jukebox-title-bar:hover {
    border-color: #ffaa00;
    box-shadow:
        inset 0 0 20px rgba(255, 170, 0, 0.4),
        0 0 12px rgba(255, 170, 0, 0.5);
}

/* LED border animations */
.led-border {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        #ff6b35 10%,
        #ffaa00 20%,
        #ff6b35 30%,
        transparent 40%,
        transparent 60%,
        #ff6b35 70%,
        #ffaa00 80%,
        #ff6b35 90%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: ledScroll 2s linear infinite;
}

.led-top {
    top: 0;
}

.led-bottom {
    bottom: 0;
    animation-direction: reverse;
}

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

.song-title-container {
    max-width: 240px;
    overflow: hidden;
    text-align: center;
}

#jukebox-song-title {
    display: inline-block;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #ff6b35;
    text-shadow:
        0 0 8px rgba(255, 107, 53, 0.8),
        0 0 15px rgba(255, 107, 53, 0.5);
    white-space: nowrap;
    animation: titleGlow 1.5s ease-in-out infinite alternate;
}

/* Scrolling animation for long titles */
#jukebox-song-title.scrolling {
    animation: titleScroll 8s linear infinite, titleGlow 1.5s ease-in-out infinite alternate;
}

@keyframes titleScroll {
    0%, 10% { transform: translateX(0); }
    90%, 100% { transform: translateX(calc(-100% + 240px)); }
}

@keyframes titleGlow {
    from {
        text-shadow:
            0 0 8px rgba(255, 107, 53, 0.8),
            0 0 15px rgba(255, 107, 53, 0.5);
    }
    to {
        text-shadow:
            0 0 12px rgba(255, 170, 0, 1),
            0 0 25px rgba(255, 170, 0, 0.7);
    }
}

/* Jukebox Controls */
.jukebox-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.jukebox-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #8b4513;
    background: linear-gradient(180deg, #4a2511 0%, #2a1509 50%, #1a0a05 100%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    box-shadow:
        0 3px 0 #1a0a05,
        0 4px 8px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.jukebox-btn svg {
    width: 18px;
    height: 18px;
    fill: #ff6b35;
    filter: drop-shadow(0 0 3px rgba(255, 107, 53, 0.5));
    transition: all 0.15s;
}

.jukebox-btn:hover {
    transform: translateY(-2px);
    border-color: #ff6b35;
    box-shadow:
        0 5px 0 #1a0a05,
        0 6px 12px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(255, 107, 53, 0.4);
}

.jukebox-btn:hover svg {
    fill: #ffaa00;
    filter: drop-shadow(0 0 6px rgba(255, 170, 0, 0.8));
}

.jukebox-btn:active {
    transform: translateY(1px);
    box-shadow:
        0 2px 0 #1a0a05,
        0 3px 6px rgba(0, 0, 0, 0.5);
}

/* Play button special styling */
#jukebox-play {
    width: 44px;
    height: 44px;
}

#jukebox-play svg {
    width: 22px;
    height: 22px;
}

#jukebox-play .pause-icon.hidden,
#jukebox-play .play-icon.hidden {
    display: none;
}

/* Repeat button active state */
#jukebox-repeat.active {
    border-color: #00ff88;
    background: linear-gradient(180deg, #1a4a2a 0%, #0d2a15 50%, #052010 100%);
}

#jukebox-repeat.active svg {
    fill: #00ff88;
    filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.8));
}

/* Song List Dropdown */
#jukebox-song-list {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 8px;
    max-height: 250px;
    background: linear-gradient(180deg, rgba(30, 15, 10, 0.98) 0%, rgba(15, 8, 5, 0.98) 100%);
    border: 2px solid #ff6b35;
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 -5px 25px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(255, 100, 50, 0.3);
    animation: songListAppear 0.2s ease-out;
}

#jukebox-song-list.hidden {
    display: none !important;
}

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

.song-list-header {
    padding: 10px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #ffaa00;
    text-shadow: 0 0 10px rgba(255, 170, 0, 0.6);
    background: linear-gradient(180deg, rgba(60, 30, 15, 0.9) 0%, rgba(30, 15, 8, 0.9) 100%);
    border-bottom: 1px solid #8b4513;
}

.song-list-items {
    max-height: 200px;
    overflow-y: auto;
}

.song-list-items::-webkit-scrollbar {
    width: 8px;
}

.song-list-items::-webkit-scrollbar-track {
    background: #1a0a05;
}

.song-list-items::-webkit-scrollbar-thumb {
    background: #8b4513;
    border-radius: 4px;
}

.song-list-items::-webkit-scrollbar-thumb:hover {
    background: #ff6b35;
}

.song-list-item {
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.15s;
    border-bottom: 1px solid rgba(139, 69, 19, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
}

.song-list-item:hover {
    background: rgba(255, 107, 53, 0.2);
}

.song-list-item.playing {
    background: rgba(255, 107, 53, 0.3);
}

.song-list-item.playing .song-item-title {
    color: #ffaa00;
}

.song-item-number {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    color: #8b4513;
    min-width: 24px;
}

.song-item-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    color: #ff6b35;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-item-playing {
    width: 16px;
    height: 16px;
    display: none;
}

.song-list-item.playing .song-item-playing {
    display: block;
    animation: playingPulse 0.5s ease-in-out infinite alternate;
}

@keyframes playingPulse {
    from { opacity: 0.5; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1.1); }
}

/* Song toggle button (enable/disable) */
.song-toggle-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 4px;
    border: none;
    border-radius: 4px;
    background: rgba(100, 100, 100, 0.3);
    color: #666;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.song-toggle-btn svg {
    width: 14px;
    height: 14px;
}

.song-toggle-btn.enabled {
    background: rgba(0, 200, 100, 0.3);
    color: #00c864;
}

.song-toggle-btn:hover {
    background: rgba(255, 107, 53, 0.4);
    color: #ff6b35;
}

/* Disabled song styling */
.song-list-item.disabled-song {
    opacity: 0.5;
}

.song-list-item.disabled-song .song-item-title {
    text-decoration: line-through;
    color: #666;
}

/* Playback mode button styles */
#jukebox-repeat.mode-sequential {
    color: #888;
}

#jukebox-repeat.mode-shuffle {
    color: #00c864;
}

#jukebox-repeat.mode-repeat-one {
    color: #ffaa00;
}

/* Fast-forward button state */
#jukebox-next.fast-forward {
    background: rgba(255, 170, 0, 0.3);
    color: #ffaa00;
    animation: fastForwardPulse 0.3s ease-in-out infinite alternate;
}

@keyframes fastForwardPulse {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* Mobile adjustments for jukebox */
@media screen and (max-height: 500px) {
    #jukebox {
        width: 220px;
        height: 90px;
        bottom: 10px;
        right: 10px;
    }

    .jukebox-content {
        padding: 6px;
    }

    .jukebox-title-bar {
        height: 28px;
    }

    #jukebox-song-title {
        font-size: 10px;
    }

    .jukebox-controls {
        gap: 5px;
        padding-top: 6px;
    }

    .jukebox-btn {
        width: 28px;
        height: 28px;
    }

    .jukebox-btn svg {
        width: 14px;
        height: 14px;
    }

    #jukebox-play {
        width: 34px;
        height: 34px;
    }

    #jukebox-play svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================
   STORE MODAL
   ============================================ */
.modal-store {
    width: 1850px;
    max-width: none;
    height: 1000px;
    max-height: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1a1a2e 0%, #0a0a12 100%);
    border: 2px solid var(--neon-gold);
    border-radius: 20px;
    overflow: hidden;
}

.store-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    background: linear-gradient(180deg, rgba(212, 168, 73, 0.2) 0%, transparent 100%);
    border-bottom: 1px solid rgba(212, 168, 73, 0.3);
}

.store-header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 32px;
    color: var(--neon-gold);
    text-shadow: 0 0 15px var(--neon-gold-glow);
    letter-spacing: 4px;
}

.store-credits {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    border-radius: 30px;
    border: 1px solid var(--neon-gold);
}

.store-coin-icon {
    width: 28px;
    height: 28px;
}

#store-credits-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    color: var(--neon-gold);
    text-shadow: 0 0 10px var(--neon-gold-glow);
}

.store-close-btn {
    background: rgba(255, 65, 54, 0.2);
    border: 1px solid var(--red-btn);
    border-radius: 8px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: var(--red-btn);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.store-close-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--red-btn);
}

.store-close-btn:hover {
    background: var(--red-btn);
    color: white;
}

.store-close-btn:hover svg {
    fill: white;
}

/* Progress Bar */
.store-progress {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 30px;
    background: rgba(0, 0, 0, 0.3);
}

.store-progress-bar {
    flex: 1;
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

.store-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green-btn) 0%, #7bed9f 100%);
    box-shadow: 0 0 10px rgba(46, 204, 64, 0.5);
    transition: width 0.5s ease;
    width: 0%;
}

.store-progress-text {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    color: var(--text-secondary);
    min-width: 100px;
    text-align: right;
}

/* Store Tabs */
.store-tabs {
    display: flex;
    gap: 5px;
    padding: 0 30px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.store-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 30px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.store-tab svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.store-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.store-tab.active {
    color: var(--neon-gold);
    border-bottom-color: var(--neon-gold);
}

/* Store Content */
.store-content {
    flex: 1;
    overflow: hidden;
    padding: 20px 30px;
}

.store-section {
    height: 100%;
    overflow-y: auto;
}

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

/* Custom Scrollbar for Store */
.store-section::-webkit-scrollbar {
    width: 8px;
}

.store-section::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.store-section::-webkit-scrollbar-thumb {
    background: var(--neon-gold);
    border-radius: 4px;
}

.store-section::-webkit-scrollbar-thumb:hover {
    background: var(--gold-light);
}

/* Music List (Spotify-like) */
.music-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.music-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: linear-gradient(90deg, rgba(46, 204, 64, 0.08) 0%, rgba(46, 204, 64, 0.03) 100%);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid var(--green-btn);
}

.music-item:hover {
    background: linear-gradient(90deg, rgba(46, 204, 64, 0.15) 0%, rgba(46, 204, 64, 0.05) 100%);
    transform: translateX(5px);
}

.music-item.locked {
    background: linear-gradient(90deg, rgba(100, 100, 100, 0.1) 0%, rgba(50, 50, 50, 0.05) 100%);
    border-left: 3px solid #555;
    filter: grayscale(30%);
}

.music-item.locked:hover {
    background: linear-gradient(90deg, rgba(255, 170, 0, 0.1) 0%, rgba(255, 170, 0, 0.03) 100%);
    border-left-color: var(--neon-gold);
    filter: none;
}

.music-item-number {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    color: var(--text-secondary);
    width: 30px;
    text-align: center;
}

.music-item-cover {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    background: linear-gradient(135deg, #333 0%, #1a1a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.music-item-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.music-item-cover svg {
    width: 24px;
    height: 24px;
    fill: var(--green-btn);
}

/* Lock overlay on cover for locked songs */
.music-item.locked .music-item-cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.music-item.locked .music-item-cover svg {
    fill: #666;
}

/* Lock icon indicator */
.music-item-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    fill: rgba(255, 255, 255, 0.9);
    z-index: 3;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

/* Artwork image in cover */
.music-item-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.music-item.locked .music-item-cover img {
    filter: grayscale(60%) brightness(0.5);
}

.music-item-info {
    flex: 1;
    min-width: 0;
}

.music-item-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-item-status {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    color: var(--green-btn);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.music-item-status::before {
    content: '✓';
    font-weight: bold;
}

.music-item.locked .music-item-status {
    color: #888;
}

.music-item.locked .music-item-status::before {
    content: '🔒';
}

.music-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.music-preview-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.music-preview-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--text-primary);
}

.music-preview-btn:hover {
    background: var(--green-btn);
    transform: scale(1.1);
}

.music-preview-btn.playing {
    background: var(--green-btn);
    animation: previewPulse 1s ease-in-out infinite;
}

@keyframes previewPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 64, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(46, 204, 64, 0); }
}

.music-buy-btn {
    padding: 8px 16px;
    background: linear-gradient(180deg, var(--neon-gold) 0%, var(--gold-dark) 100%);
    border: none;
    border-radius: 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.music-buy-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--neon-gold-glow);
}

.music-buy-btn img {
    width: 14px;
    height: 14px;
}

.music-unlocked-icon {
    width: 24px;
    height: 24px;
    fill: var(--green-btn);
}

/* Characters Grid */
.characters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 10px;
}

.character-card {
    background: linear-gradient(180deg, rgba(46, 204, 64, 0.1) 0%, rgba(46, 204, 64, 0.03) 100%);
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid var(--green-btn);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.character-card:hover {
    background: linear-gradient(180deg, rgba(46, 204, 64, 0.2) 0%, rgba(46, 204, 64, 0.05) 100%);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.character-card.selected {
    border-color: var(--neon-gold);
    box-shadow: 0 0 20px var(--neon-gold-glow);
    background: linear-gradient(180deg, rgba(255, 170, 0, 0.15) 0%, rgba(255, 170, 0, 0.05) 100%);
}

.character-card.locked {
    background: linear-gradient(180deg, rgba(80, 80, 80, 0.2) 0%, rgba(40, 40, 40, 0.1) 100%);
    border-color: #444;
    filter: grayscale(40%);
}

.character-card.locked:hover {
    filter: none;
    border-color: var(--neon-gold);
    background: linear-gradient(180deg, rgba(255, 170, 0, 0.1) 0%, rgba(255, 170, 0, 0.03) 100%);
}

.character-thumbnail {
    width: 100%;
    height: 200px;
    background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.character-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.character-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.character-lock-overlay svg {
    width: 40px;
    height: 40px;
    fill: var(--text-secondary);
}

.character-info {
    padding: 15px;
    text-align: center;
}

.character-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.character-selected-badge {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    color: var(--neon-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 10px;
}

.gallery-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%);
    border: 3px solid var(--green-btn);
    box-shadow: 0 0 15px rgba(46, 204, 64, 0.2);
}

.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(46, 204, 64, 0.3);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item.locked {
    border-color: #555;
    box-shadow: none;
}

.gallery-item.locked img {
    filter: blur(8px) brightness(0.4) grayscale(50%);
}

.gallery-item.locked:hover {
    border-color: var(--neon-gold);
    box-shadow: 0 0 20px var(--neon-gold-glow);
}

.gallery-item.locked:hover img {
    filter: blur(5px) brightness(0.6) grayscale(20%);
}

.gallery-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.gallery-lock-overlay svg {
    width: 50px;
    height: 50px;
    fill: var(--text-secondary);
}

.gallery-lock-overlay span {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    color: var(--text-secondary);
}

.gallery-buy-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, transparent 100%);
    display: flex;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item.locked:hover .gallery-buy-overlay {
    opacity: 1;
}

.gallery-buy-btn {
    padding: 10px 25px;
    background: linear-gradient(180deg, var(--neon-gold) 0%, var(--gold-dark) 100%);
    border: none;
    border-radius: 25px;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.gallery-buy-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px var(--neon-gold-glow);
}

.gallery-buy-btn img {
    width: 18px;
    height: 18px;
}

/* Store Footer */
.store-footer {
    padding: 15px 30px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
}

.btn-small {
    padding: 8px 20px !important;
    font-size: 12px !important;
}

/* Gallery Viewer */
#gallery-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-viewer-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    cursor: pointer;
}

.gallery-viewer-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

#gallery-viewer-image {
    max-width: 100%;
    max-height: calc(90vh - 80px);
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    cursor: grab;
    transition: transform 0.1s ease;
}

#gallery-viewer-image:active {
    cursor: grabbing;
}

.gallery-viewer-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.gallery-control-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.gallery-control-btn svg {
    width: 24px;
    height: 24px;
    fill: var(--text-primary);
}

.gallery-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gallery-close-btn:hover {
    background: var(--red-btn);
}

#gallery-zoom-level {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    min-width: 60px;
    text-align: center;
}

/* Reset Purchases Modal */
.warning-text {
    color: var(--red-btn) !important;
    font-weight: bold;
}

/* Jukebox locked songs */
.song-list-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.song-list-item.locked:hover {
    background: transparent;
}

.song-item-locked {
    width: 16px;
    height: 16px;
    opacity: 0.5;
}

/* Character buy button */
.character-buy-btn {
    padding: 8px 16px;
    background: linear-gradient(180deg, var(--neon-gold) 0%, var(--gold-dark) 100%);
    border: none;
    border-radius: 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 5px auto 0;
    transition: all 0.2s ease;
}

.character-buy-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--neon-gold-glow);
}

.character-buy-btn img {
    width: 14px;
    height: 14px;
}

/* Character thumbnail placeholder when image fails to load */
.character-thumbnail.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.character-thumbnail.no-image::after {
    content: '?';
    font-family: 'Orbitron', sans-serif;
    font-size: 48px;
    color: var(--text-secondary);
}

.character-thumbnail.no-image img {
    display: none;
}

/* ============================================
   STORE - TAB COUNTERS
   ============================================ */
.tab-counter {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 5px;
    opacity: 0.8;
}

.store-tab.active .tab-counter {
    color: var(--neon-gold);
}

/* ============================================
   STORE - DECKS SECTION
   ============================================ */
.decks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 10px 0;
}

.deck-card {
    background: linear-gradient(135deg, rgba(46, 204, 64, 0.15) 0%, rgba(46, 204, 64, 0.05) 100%);
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.deck-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(46, 204, 64, 0.2);
}

.deck-card.selected {
    border-color: var(--neon-gold);
    box-shadow: 0 0 20px var(--neon-gold-glow);
}

.deck-card.locked {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    opacity: 0.7;
}

.deck-card.locked:hover {
    opacity: 1;
}

.deck-thumbnail {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
}

.deck-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.deck-thumbnail.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.deck-thumbnail.no-image::after {
    content: '🃏';
    font-size: 48px;
}

.deck-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.deck-lock-overlay svg {
    width: 40px;
    height: 40px;
    fill: var(--text-secondary);
}

.deck-info {
    text-align: center;
}

.deck-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.deck-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.deck-selected-badge {
    background: var(--neon-gold);
    color: #000;
    padding: 5px 15px;
    border-radius: 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
}

.deck-buy-btn {
    padding: 8px 16px;
    background: linear-gradient(180deg, var(--neon-gold) 0%, var(--gold-dark) 100%);
    border: none;
    border-radius: 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    color: #000;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.deck-buy-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--neon-gold-glow);
}

.deck-buy-btn img {
    width: 14px;
    height: 14px;
}

/* ============================================
   STORE - MECHANICS SECTION
   Card images contain name & description visually
   ============================================ */
.mechanics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 10px 0;
}

.mechanic-card {
    background: linear-gradient(135deg, rgba(20, 20, 35, 0.9) 0%, rgba(10, 10, 20, 0.95) 100%);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 65, 54, 0.3);
    display: flex;
    flex-direction: column;
}

.mechanic-card.unlocked {
    border-color: rgba(46, 204, 64, 0.5);
    box-shadow: 0 0 20px rgba(46, 204, 64, 0.2);
}

.mechanic-card.locked:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 65, 54, 0.5);
}

/* Card image - contains all visual info */
/* Images are 500x402 (aspect ratio ~1.24:1), scaled down 15% */
.mechanic-card-image {
    position: relative;
    width: 85%;
    margin: 0 auto;
    aspect-ratio: 500 / 402;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

.mechanic-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Lock overlay for locked mechanics */
.mechanic-card-lock {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
    transition: all 0.3s ease;
}

/* On hover, reveal the card content */
.mechanic-card.locked:hover .mechanic-card-lock {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(0px);
}

.mechanic-card-lock svg {
    width: 50px;
    height: 50px;
    fill: rgba(255, 255, 255, 0.6);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    transition: all 0.3s ease;
}

/* Hide lock icon on hover */
.mechanic-card.locked:hover .mechanic-card-lock svg {
    opacity: 0.3;
    transform: scale(0.8);
}

/* Fallback if image fails to load */
.mechanic-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 48px;
    color: var(--text-secondary);
    text-align: center;
    padding: 20px;
}

/* Footer with buy button or unlocked badge */
.mechanic-card-footer {
    padding: 15px 20px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
}

.mechanic-unlocked-badge {
    background: var(--green-btn);
    color: #fff;
    padding: 8px 25px;
    border-radius: 25px;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mechanic-buy-btn {
    padding: 12px 30px;
    background: linear-gradient(180deg, var(--neon-gold) 0%, var(--gold-dark) 100%);
    border: none;
    border-radius: 25px;
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mechanic-buy-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px var(--neon-gold-glow);
}

.mechanic-buy-btn img {
    width: 20px;
    height: 20px;
}

/* ============================================
   STORE - PERKS SECTION
   ============================================ */
.perks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 15px;
    padding: 10px 0;
}

.perk-card {
    background: linear-gradient(135deg, rgba(0, 116, 217, 0.1) 0%, rgba(0, 116, 217, 0.03) 100%);
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.perk-card.unlocked {
    background: linear-gradient(135deg, rgba(46, 204, 64, 0.15) 0%, rgba(46, 204, 64, 0.05) 100%);
    border-color: rgba(46, 204, 64, 0.3);
}

.perk-card.locked:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0, 116, 217, 0.15);
}

.perk-thumbnail {
    width: 120px;
    height: 152px;
    border-radius: 8px;
    overflow: visible;
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    cursor: pointer;
}

.perk-icon {
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.perk-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.perk-thumbnail:hover img {
    transform: scale(2.5);
    transform-origin: center center;
    z-index: 100;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 168, 73, 0.5);
    border-radius: 8px;
}

.perk-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    z-index: 2;
}

.perk-lock-overlay svg {
    width: 32px;
    height: 32px;
    fill: rgba(255, 255, 255, 0.7);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Locked perk thumbnail has grayscale effect */
.perk-card.locked .perk-thumbnail img {
    filter: grayscale(60%) brightness(0.7);
}

.perk-card.locked .perk-thumbnail:hover img {
    filter: grayscale(30%) brightness(0.85);
}

.perk-info {
    flex: 1;
}

.perk-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.perk-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.4;
}

.perk-duration {
    font-size: 11px;
    color: var(--neon-cyan);
    margin-bottom: 10px;
}

.perk-unlocked-badge {
    background: var(--green-btn);
    color: #fff;
    padding: 4px 12px;
    border-radius: 15px;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    font-weight: bold;
    display: inline-block;
}

.perk-buy-btn {
    padding: 6px 14px;
    background: linear-gradient(180deg, var(--neon-gold) 0%, var(--gold-dark) 100%);
    border: none;
    border-radius: 18px;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    color: #000;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.perk-buy-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--neon-gold-glow);
}

.perk-buy-btn img {
    width: 12px;
    height: 12px;
}

/* Royal Decree (hidden perk) special styling */
.perk-card.royal-decree {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(139, 69, 19, 0.15) 100%);
    border: 2px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3), inset 0 0 30px rgba(255, 215, 0, 0.1);
    animation: royalGlow 2s ease-in-out infinite;
}

.perk-card.royal-decree.unlocked {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(139, 69, 19, 0.2) 100%);
    border-color: rgba(255, 215, 0, 0.7);
}

@keyframes royalGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3), inset 0 0 30px rgba(255, 215, 0, 0.1);
    }
    50% {
        box-shadow: 0 0 35px rgba(255, 215, 0, 0.5), inset 0 0 40px rgba(255, 215, 0, 0.2);
    }
}

.perk-card.royal-decree .perk-name {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.perk-card.royal-decree .perk-icon {
    font-size: 32px;
    animation: crownBounce 1.5s ease-in-out infinite;
}

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

.perk-duration.permanent {
    color: #ffd700;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

/* Royal Decree locked state (before all perks unlocked) */
.perk-card.royal-decree.decree-locked {
    opacity: 0.8;
}

.perk-card.royal-decree.decree-locked .perk-thumbnail img {
    filter: grayscale(80%) brightness(0.5) sepia(20%);
}

.perk-card.royal-decree.decree-locked .perk-thumbnail:hover img {
    filter: grayscale(50%) brightness(0.7) sepia(10%);
}

.perk-locked-message {
    font-size: 11px;
    color: #ff6b6b;
    font-style: italic;
    cursor: help;
    padding: 4px 0;
}

/* ============================================
   ROYAL ROMANCE MINIGAME
   ============================================ */
#romance-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    z-index: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(ellipse at center, rgba(60, 10, 30, 0.95) 0%, rgba(20, 0, 10, 0.98) 100%);
    pointer-events: auto;
}

#romance-container.hidden {
    display: none !important;
}

/* Queen card display at top */
.romance-queen-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

.romance-queen-card {
    width: 200px;
    height: 280px;
    border-radius: 12px;
    box-shadow:
        0 0 40px rgba(255, 100, 150, 0.6),
        0 0 80px rgba(255, 50, 100, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    animation: queenGlow 2s ease-in-out infinite alternate;
}

@keyframes queenGlow {
    0% {
        box-shadow:
            0 0 40px rgba(255, 100, 150, 0.6),
            0 0 80px rgba(255, 50, 100, 0.4);
        transform: scale(1);
    }
    100% {
        box-shadow:
            0 0 60px rgba(255, 100, 150, 0.8),
            0 0 120px rgba(255, 50, 100, 0.6);
        transform: scale(1.02);
    }
}

.romance-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 48px;
    color: #ff6b9d;
    text-shadow:
        0 0 20px rgba(255, 107, 157, 0.8),
        0 0 40px rgba(255, 50, 100, 0.6);
    margin-top: 20px;
    letter-spacing: 4px;
}

.romance-subtitle {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 22px;
    color: #ffb3cc;
    text-shadow: 0 0 10px rgba(255, 150, 180, 0.5);
    margin-top: 10px;
    font-style: italic;
    letter-spacing: 1px;
}

/* Horizontal reel container */
.romance-reel-wrapper {
    position: relative;
    width: 800px;
    height: 200px;
    margin: 30px 0;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(180deg, #1a0a10 0%, #2a1520 50%, #1a0a10 100%);
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(255, 100, 150, 0.3);
}

/* Target zone highlight (center) */
.romance-target-zone {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 160px;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 215, 0, 0.15) 20%,
        rgba(255, 215, 0, 0.25) 50%,
        rgba(255, 215, 0, 0.15) 80%,
        transparent 100%);
    border-left: 3px solid rgba(255, 215, 0, 0.6);
    border-right: 3px solid rgba(255, 215, 0, 0.6);
    z-index: 2;
    pointer-events: none;
}

.romance-target-zone::before,
.romance-target-zone::after {
    content: '▼';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    color: var(--neon-gold);
    text-shadow: 0 0 10px var(--neon-gold-glow);
    animation: targetPulse 1s ease-in-out infinite;
}

.romance-target-zone::before {
    top: -30px;
}

.romance-target-zone::after {
    content: '▲';
    bottom: -30px;
}

@keyframes targetPulse {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
}

/* The actual reel strip that moves horizontally */
.romance-reel {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 0 40px;
    transition: none;
}

.romance-reel-card {
    flex-shrink: 0;
    width: 120px;
    height: 168px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a0a10;
    transition: transform 0.2s ease;
}

.romance-reel-card.king-spades {
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(100, 150, 255, 0.4);
}

.romance-reel-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #1a0a10;
}

/* Prize display */
.romance-prize-display {
    font-family: 'Orbitron', sans-serif;
    font-size: 32px;
    color: var(--neon-gold);
    text-shadow: 0 0 15px var(--neon-gold-glow);
    margin: 20px 0;
}

.romance-prize-display span {
    font-size: 42px;
    font-weight: bold;
}

/* Control buttons */
.romance-controls {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.romance-btn {
    padding: 20px 60px;
    font-family: 'Orbitron', sans-serif;
    font-size: 28px;
    font-weight: bold;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.romance-btn-spin {
    background: linear-gradient(180deg, #ff6b9d 0%, #cc3366 100%);
    color: white;
    box-shadow:
        0 6px 0 #992244,
        0 0 30px rgba(255, 107, 157, 0.5);
}

.romance-btn-spin:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow:
        0 9px 0 #992244,
        0 0 40px rgba(255, 107, 157, 0.7);
}

.romance-btn-spin:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow:
        0 3px 0 #992244,
        0 0 20px rgba(255, 107, 157, 0.4);
}

.romance-btn-stop {
    background: linear-gradient(180deg, var(--neon-gold) 0%, var(--gold-dark) 100%);
    color: #1a0a10;
    box-shadow:
        0 6px 0 #6b4a0a,
        0 0 30px var(--neon-gold-glow);
}

.romance-btn-stop:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow:
        0 9px 0 #6b4a0a,
        0 0 40px var(--neon-gold-glow);
}

.romance-btn-stop:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow:
        0 3px 0 #6b4a0a,
        0 0 20px rgba(255, 215, 0, 0.4);
}

.romance-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Result display */
.romance-result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 72px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 8px;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.romance-result.win {
    color: var(--neon-gold);
    text-shadow:
        0 0 30px var(--neon-gold-glow),
        0 0 60px var(--neon-gold-glow),
        0 0 90px rgba(255, 215, 0, 0.5);
    animation: resultWin 2s ease-out forwards;
}

.romance-result.lose {
    color: #888;
    text-shadow: 0 0 20px rgba(100, 100, 100, 0.5);
    animation: resultLose 1.5s ease-out forwards;
}

@keyframes resultWin {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    40% {
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes resultLose {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Win result styling */
.romance-win-title {
    font-size: 48px;
    color: #ff6b9d;
    text-shadow:
        0 0 20px rgba(255, 107, 157, 0.8),
        0 0 40px rgba(255, 107, 157, 0.5);
    margin-bottom: 15px;
    animation: heartPulse 1s ease-in-out infinite;
}

.romance-win-prize {
    font-size: 72px;
    color: var(--neon-gold);
    text-shadow:
        0 0 30px var(--neon-gold-glow),
        0 0 60px var(--neon-gold-glow);
    letter-spacing: 4px;
}

.romance-win-label {
    font-size: 28px;
    color: var(--neon-gold);
    opacity: 0.8;
    letter-spacing: 6px;
    margin-top: 5px;
}

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

/* Lose result styling */
.romance-lose-title {
    font-size: 48px;
    color: #888;
    text-shadow: 0 0 15px rgba(100, 100, 100, 0.5);
    margin-bottom: 10px;
}

.romance-lose-subtitle {
    font-size: 24px;
    color: #666;
    letter-spacing: 2px;
    font-style: italic;
}

/* Hearts particle effect */
.romance-hearts {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.romance-heart {
    position: absolute;
    font-size: 24px;
    color: #ff6b9d;
    opacity: 0;
    animation: floatHeart 4s ease-out forwards;
}

@keyframes floatHeart {
    0% {
        opacity: 0;
        transform: translateY(100%) scale(0.5) rotate(0deg);
    }
    20% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateY(-100vh) scale(1) rotate(360deg);
    }
}

/* Speed burst effect indicator */
.romance-speed-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(255, 100, 150, 0.3) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

.romance-speed-burst.active {
    animation: speedBurst 0.3s ease-out;
}

@keyframes speedBurst {
    0% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.8); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

/* ============================================
   ROYAL ROMANCE 3D OVERLAY (New Version)
   ============================================ */
.romance-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.romance-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Header positioned below pay table (centered with game panel/pay table) */
.romance-header-bottom {
    position: absolute;
    /* Game panel is 1152px wide, centered at 576px from left edge */
    left: 576px;
    transform: translateX(-50%);
    top: 420px; /* Below the pay table */
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(30, 10, 20, 0.95);
    padding: 12px 20px;
    border-radius: 12px;
    border: 2px solid rgba(255, 107, 157, 0.5);
    box-shadow: 0 0 30px rgba(255, 50, 100, 0.3);
}

.romance-queen-mini {
    width: 60px;
    height: 84px;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(255, 100, 150, 0.6);
    animation: queenGlow 2s ease-in-out infinite alternate;
}

.romance-header-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.romance-title-small {
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    color: #ff6b9d;
    text-shadow:
        0 0 15px rgba(255, 107, 157, 0.8),
        0 0 30px rgba(255, 50, 100, 0.5);
    letter-spacing: 2px;
}

.romance-subtitle-small {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    color: #ffb3cc;
    text-shadow: 0 0 10px rgba(255, 150, 180, 0.5);
    font-style: italic;
    letter-spacing: 1px;
}

/* Prize display inline (inside header) */
.romance-header-bottom .romance-prize-inline {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    color: var(--neon-gold);
    text-shadow: 0 0 15px var(--neon-gold-glow);
    margin-top: 0;
    margin-left: 15px;
    background: rgba(20, 5, 10, 0.8);
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.romance-header-bottom .romance-prize-inline span {
    font-size: 26px;
    font-weight: bold;
}

/* Controls inline at bottom - positioned above credits display */
.romance-controls-inline {
    position: absolute;
    bottom: 180px;
    /* Align with credits display - slightly right of center */
    left: 52%;
    transform: translateX(-50%);
    display: flex;
    gap: 30px;
    pointer-events: auto;
}

/* Lower credits display slightly during Royal Romance */
.romance-active #credits-display {
    transform: translateY(15px);
    transition: transform 0.3s ease;
}

/* Result display for 3D version */
.romance-result-3d {
    position: absolute;
    bottom: 240px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', sans-serif;
    text-align: center;
    min-width: 400px;
}

.romance-result-3d.win .romance-win-title,
.romance-result-3d.win .romance-win-prize,
.romance-result-3d.win .romance-win-label {
    animation: resultWin 0.5s ease-out forwards;
}

.romance-result-3d.lose .romance-lose-title,
.romance-result-3d.lose .romance-lose-subtitle {
    animation: resultLose 0.5s ease-out forwards;
}

/* ==========================================
   JACK'S GAMBIT HEADER STYLES
   ========================================== */

/* Header positioned below pay table (same style as Royal Romance) */
.jacks-gambit-header {
    position: fixed;
    /* left and transform set dynamically via JS to center with pay table */
    top: 420px; /* Below the pay table */
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(20, 10, 40, 0.95);
    padding: 12px 20px;
    border-radius: 12px;
    border: 2px solid rgba(180, 100, 255, 0.5);
    box-shadow: 0 0 30px rgba(150, 50, 255, 0.3);
    z-index: 500;
}

.gambit-joker-mini {
    width: 60px;
    height: 84px;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(180, 100, 255, 0.6);
    animation: jokerGlow 2s ease-in-out infinite alternate;
}

@keyframes jokerGlow {
    from {
        box-shadow: 0 0 15px rgba(180, 100, 255, 0.6);
    }
    to {
        box-shadow: 0 0 25px rgba(220, 150, 255, 0.9), 0 0 40px rgba(150, 50, 255, 0.5);
    }
}

.gambit-header-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gambit-title-small {
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    color: #b864ff;
    text-shadow:
        0 0 15px rgba(180, 100, 255, 0.8),
        0 0 30px rgba(150, 50, 255, 0.5);
    letter-spacing: 2px;
}

.gambit-subtitle-small {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    color: #d4a3ff;
    text-shadow: 0 0 10px rgba(200, 150, 255, 0.5);
    font-style: italic;
    letter-spacing: 1px;
}

/* ==========================================
   THE FADED FOOL / BLACKJACK STYLES
   ========================================== */

/* Header positioned below pay table (same style as Jack's Gambit) */
.faded-fool-header {
    position: fixed;
    /* left and transform set dynamically via JS to center with pay table */
    top: 420px; /* Below the pay table */
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(30, 25, 20, 0.95);
    padding: 12px 20px;
    border-radius: 12px;
    border: 2px solid rgba(139, 90, 43, 0.6);
    box-shadow: 0 0 30px rgba(139, 90, 43, 0.4);
    z-index: 500;
}

.grimwald-mini {
    width: 60px;
    height: 84px;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(139, 90, 43, 0.6);
    animation: grimwaldGlow 2s ease-in-out infinite alternate;
    filter: sepia(20%);
}

@keyframes grimwaldGlow {
    from {
        box-shadow: 0 0 15px rgba(139, 90, 43, 0.6);
    }
    to {
        box-shadow: 0 0 25px rgba(180, 130, 70, 0.9), 0 0 40px rgba(139, 90, 43, 0.5);
    }
}

.faded-fool-header-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.faded-fool-title-small {
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    color: #c9a656;
    text-shadow:
        0 0 15px rgba(201, 166, 86, 0.8),
        0 0 30px rgba(139, 90, 43, 0.5);
    letter-spacing: 2px;
}

.faded-fool-subtitle-small {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    color: #a89060;
    text-shadow: 0 0 10px rgba(168, 144, 96, 0.5);
    font-style: italic;
    letter-spacing: 1px;
}

/* Blackjack Controls - Grid position: between F8 and F9 (center of column F, border of rows 8-9) */
.blackjack-controls {
    position: fixed;
    top: 80%;
    left: 55%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 25px;
    z-index: 600;
}

.blackjack-controls .btn {
    min-width: 130px;
    padding: 14px 35px;
    font-size: 18px;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.blackjack-controls .btn-hit {
    background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
    border: 2px solid #66BB6A;
    color: white;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.5);
}

.blackjack-controls .btn-hit:hover {
    background: linear-gradient(180deg, #66BB6A 0%, #43A047 100%);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.7);
    transform: translateY(-2px);
}

.blackjack-controls .btn-stand {
    background: linear-gradient(180deg, #F44336 0%, #C62828 100%);
    border: 2px solid #EF5350;
    color: white;
    box-shadow: 0 4px 15px rgba(244, 67, 54, 0.5);
}

.blackjack-controls .btn-stand:hover {
    background: linear-gradient(180deg, #EF5350 0%, #E53935 100%);
    box-shadow: 0 6px 20px rgba(244, 67, 54, 0.7);
    transform: translateY(-2px);
}

/* Blackjack Hand Totals - positioned near cards */
.blackjack-total {
    position: fixed;
    padding: 8px 16px;
    background: rgba(15, 12, 8, 0.95);
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    z-index: 550;
    border: 2px solid rgba(201, 166, 86, 0.5);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    text-align: center;
    min-width: 80px;
}

.blackjack-total.player-total {
    bottom: 295px;
    left: 50%;
    transform: translateX(-50%);
}

.blackjack-total.dealer-total {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.blackjack-total .label {
    font-size: 10px;
    color: #a89060;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
    display: block;
}

.blackjack-total .value {
    font-size: 28px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.blackjack-total.bust .value {
    color: #ff4444;
    text-shadow: 0 0 15px rgba(255, 68, 68, 0.7);
}

.blackjack-total.blackjack .value {
    color: #00ff88;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.8);
    animation: blackjackPulse 0.5s ease-in-out infinite alternate;
}

@keyframes blackjackPulse {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* Blackjack Rules/Pay Table Replacement */
.blackjack-rules {
    background: linear-gradient(180deg, rgba(15, 12, 8, 0.98) 0%, rgba(25, 20, 15, 0.95) 100%);
    border: 2px solid rgba(201, 166, 86, 0.4);
    border-radius: 10px;
    padding: 15px 18px;
    box-shadow:
        0 0 25px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.blackjack-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    color: #ffd700;
    text-align: center;
    margin-bottom: 12px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    letter-spacing: 3px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(201, 166, 86, 0.3);
    padding-bottom: 10px;
}

.blackjack-rule {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    color: #c0b090;
    padding: 6px 0;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.5px;
}

.blackjack-rule-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

.blackjack-rule-list li {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    color: #bbb;
    padding: 6px 0;
    border-bottom: 1px solid rgba(139, 90, 43, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
}

.blackjack-rule-list li:last-child {
    border-bottom: none;
}

.blackjack-rule-list .rule-icon {
    font-size: 16px;
    width: 22px;
    text-align: center;
}

.blackjack-prizes {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(201, 166, 86, 0.3);
}

.blackjack-prizes-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    color: #c9a656;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.blackjack-prize-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    margin: 4px 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 11px;
}

.blackjack-prize-row span:first-child {
    color: #a0a0a0;
}

.blackjack-prize-row span:last-child {
    color: #ffd700;
    font-weight: bold;
}

.prize-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin: 5px 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border-left: 3px solid;
}

.prize-row.win-21 {
    border-left-color: #00ff88;
}

.prize-row.win-21 .prize-condition {
    color: #00ff88;
}

.prize-row.win-normal {
    border-left-color: #4CAF50;
}

.prize-row.win-normal .prize-condition {
    color: #4CAF50;
}

.prize-row.tie {
    border-left-color: #ffd700;
}

.prize-row.tie .prize-condition {
    color: #ffd700;
}

.prize-row.lose {
    border-left-color: #ff4444;
}

.prize-row.lose .prize-condition {
    color: #ff4444;
}

.prize-condition {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    font-weight: bold;
}

.prize-reward {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    color: #aaa;
    text-align: right;
}

/* Grimwald Card Visual Effect in Hand */
.card-slot.grimwald-card {
    position: relative;
}

.card-slot.grimwald-card::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: radial-gradient(ellipse at center, rgba(100, 80, 60, 0.4) 0%, transparent 70%);
    border-radius: 12px;
    pointer-events: none;
    animation: grimwaldAura 3s ease-in-out infinite;
}

@keyframes grimwaldAura {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Grimwald card itself appears faded */
.card-slot.grimwald-card .card-face {
    filter: sepia(30%) brightness(0.85);
}

/* Grimwald locked card - forced hold indicator */
.card-area.grimwald-locked {
    position: relative;
}

.card-area.grimwald-locked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid #8b0000;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(139, 0, 0, 0.6), inset 0 0 20px rgba(139, 0, 0, 0.3);
    pointer-events: none;
    animation: grimwaldLockPulse 2s ease-in-out infinite;
}

@keyframes grimwaldLockPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(139, 0, 0, 0.6), inset 0 0 20px rgba(139, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(139, 0, 0, 0.8), inset 0 0 30px rgba(139, 0, 0, 0.5);
    }
}

.hold-btn.locked {
    background: linear-gradient(180deg, #8b0000 0%, #4a0000 100%) !important;
    border-color: #ff4444 !important;
    cursor: not-allowed;
}

.hold-btn.locked:hover {
    transform: none;
    box-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
}

/* ===== ASH DIMENSION SHIFT - PORTAL EFFECT ===== */

.dimension-portal-container {
    position: fixed;
    pointer-events: none;
    z-index: 200;
    transform: translate(-50%, -50%);
}

/* Portal ring - BLUE theme */
.dimension-portal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(0, 20, 60, 0) 0%,
        rgba(0, 20, 60, 0) 25%,
        rgba(30, 100, 220, 0.3) 45%,
        rgba(60, 150, 255, 0.6) 60%,
        rgba(100, 180, 255, 0.8) 72%,
        rgba(60, 150, 255, 0.6) 82%,
        rgba(30, 80, 200, 0.3) 92%,
        transparent 100%
    );
    animation: portalOpen 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-shadow:
        0 0 40px rgba(60, 150, 255, 0.7),
        0 0 80px rgba(30, 100, 220, 0.4),
        inset 0 0 40px rgba(60, 150, 255, 0.5);
}

.dimension-portal.closing {
    animation: portalClose 0.5s ease-in forwards;
}

/* Swirl effect inside portal */
.dimension-portal::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(100, 180, 255, 0.5) 25%,
        transparent 50%,
        rgba(60, 150, 255, 0.5) 75%,
        transparent 100%
    );
    animation: portalSpin 0.8s linear infinite;
}

/* Inner glow - bright blue core */
.dimension-portal::after {
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(180, 220, 255, 0.9) 0%,
        rgba(60, 150, 255, 0.5) 40%,
        rgba(0, 20, 60, 0) 100%
    );
    animation: portalPulse 0.6s ease-in-out infinite alternate;
}

/* Card being absorbed - spins and shrinks into portal */
.dimension-card-absorb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: cardAbsorb 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: center center;
    border-radius: 6px;
    overflow: hidden;
}

.dimension-card-absorb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Portal particles */
.portal-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(100, 180, 255, 0.9);
    box-shadow: 0 0 8px rgba(60, 150, 255, 0.8);
    animation: portalParticleOrbit 1.2s ease-in forwards;
}

@keyframes portalOpen {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(180deg);
        opacity: 1;
    }
}

@keyframes portalClose {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0) rotate(-540deg);
        opacity: 0;
    }
}

@keyframes portalSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes portalPulse {
    0% { opacity: 0.4; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1.15); }
}

@keyframes cardAbsorb {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
        filter: brightness(1);
    }
    15% {
        transform: translate(-50%, -50%) scale(1.08) rotate(30deg);
        opacity: 1;
        filter: brightness(1.2);
    }
    40% {
        transform: translate(-50%, -50%) scale(0.7) rotate(180deg);
        opacity: 0.9;
        filter: brightness(1.5) drop-shadow(0 0 10px rgba(60, 150, 255, 0.8));
    }
    65% {
        transform: translate(-50%, -50%) scale(0.35) rotate(540deg);
        opacity: 0.7;
        filter: brightness(2) drop-shadow(0 0 15px rgba(60, 150, 255, 1));
    }
    85% {
        transform: translate(-50%, -50%) scale(0.1) rotate(900deg);
        opacity: 0.4;
        filter: brightness(3) drop-shadow(0 0 20px rgba(100, 180, 255, 1));
    }
    100% {
        transform: translate(-50%, -50%) scale(0) rotate(1080deg);
        opacity: 0;
        filter: brightness(4);
    }
}

@keyframes portalParticleOrbit {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* ============================================
   DEVELOPER GRID OVERLAY
   Press and hold G to show positioning grid
   ============================================ */
.dev-grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.3);
}

.dev-grid-header-row {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25px;
    background: rgba(0, 0, 0, 0.7);
}

.dev-grid-header {
    position: absolute;
    width: 10%;
    text-align: center;
    color: #00ff00;
    font-family: monospace;
    font-size: 14px;
    font-weight: bold;
    padding-top: 5px;
}

.dev-grid-row-header {
    position: absolute;
    left: 0;
    width: 25px;
    height: 10%;
    background: rgba(0, 0, 0, 0.7);
    color: #00ff00;
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dev-grid-cell {
    position: absolute;
    border: 1px solid rgba(0, 255, 0, 0.2);
    box-sizing: border-box;
}

.dev-grid-cell:hover {
    background: rgba(0, 255, 0, 0.2);
    border-color: rgba(0, 255, 0, 0.8);
}

.dev-grid-cell-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(0, 255, 0, 0.5);
    font-family: monospace;
    font-size: 8px;
    font-weight: bold;
    text-shadow: 0 0 2px rgba(0, 0, 0, 1);
    opacity: 1;
}

.dev-grid-cell:hover .dev-grid-cell-label {
    color: rgba(255, 255, 0, 1);
    font-size: 10px;
}

.dev-grid-ruler-h {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, 0.8);
}

.dev-grid-ruler-v {
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

.dev-grid-ruler-h .dev-grid-mark {
    position: absolute;
    bottom: 2px;
    transform: translateX(-50%);
    color: #ffff00;
    font-family: monospace;
    font-size: 8px;
}

.dev-grid-ruler-h .dev-grid-mark.major {
    font-size: 10px;
    font-weight: bold;
}

.dev-grid-ruler-v .dev-grid-mark {
    position: absolute;
    right: 2px;
    transform: translateY(-50%);
    color: #ffff00;
    font-family: monospace;
    font-size: 8px;
}

.dev-grid-ruler-v .dev-grid-mark.major {
    font-size: 10px;
    font-weight: bold;
}

/* ============================================
   THE GRAND PARADE - Carnival Minigame
   ============================================ */

/* Main overlay container - positioned inside game-container */
.grand-parade-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(138, 43, 226, 0.7) 0%,
        rgba(75, 0, 130, 0.75) 50%,
        rgba(25, 0, 50, 0.8) 100%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border-radius: 8px;
}

/* Header section */
.grand-parade-header {
    text-align: center;
    padding: 20px;
    z-index: 10;
}

.grand-parade-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: #ffd700;
    text-shadow:
        0 0 10px #ffd700,
        0 0 20px #ffa500,
        0 0 30px #ff6600,
        0 0 40px #ff0000;
    letter-spacing: 4px;
    animation: paradeTitle 2s ease-in-out infinite;
}

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

.grand-parade-subtitle {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    margin-top: 10px;
    opacity: 0.9;
}

/* Stats bar */
.grand-parade-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 15px 30px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    margin-bottom: 20px;
    z-index: 10;
}

.grand-parade-timer,
.grand-parade-score,
.grand-parade-multiplier {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timer-label,
.score-label,
.mult-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    color: #aaaaaa;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.timer-value,
.score-value,
.mult-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 36px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 10px currentColor;
}

.timer-value {
    color: #00ff00;
}

.timer-value.urgent {
    color: #ff0000;
    animation: urgentPulse 0.5s ease-in-out infinite;
}

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

.score-value {
    color: #ffd700;
}

.mult-value {
    color: #00ffff;
}

/* Cards area */
.grand-parade-cards-area {
    position: relative;
    width: 100%;
    flex: 1;
    overflow: hidden;
}

/* Hint text */
.grand-parade-hint {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding: 15px;
    z-index: 10;
}

/* Falling cards */
.grand-parade-card {
    position: absolute;
    top: -120px;
    width: 70px;
    height: 100px;
    cursor: pointer;
    transform-style: preserve-3d;
    perspective: 1000px;
    z-index: 5;
    /* Larger hit area for better touch/click detection */
    padding: 10px;
    margin: -10px;
    box-sizing: content-box;
}

.grand-parade-card .card-inner {
    position: relative;
    width: 70px;
    height: 100px;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
}

.grand-parade-card.flipped .card-inner {
    transform: rotateY(180deg);
}

.grand-parade-card .card-back,
.grand-parade-card .card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 215, 0, 0.5);
}

.grand-parade-card .card-back {
    /* Background image set via inline style */
    background-color: #4a0080;
}

.grand-parade-card .card-front {
    /* Background image set via inline style */
    background-color: #ffffff;
    transform: rotateY(180deg);
}

/* Card overlay for value/icon display */
.grand-parade-card .card-overlay {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
}

.grand-parade-card .card-value-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #00ff00;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 10px #00ff00;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px 6px;
    border-radius: 4px;
}

.grand-parade-card .card-grimwald-icon {
    font-size: 36px;
    filter: drop-shadow(0 0 5px #ff0000);
}

.grand-parade-card .card-joker-icon {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff;
    background: rgba(0, 0, 0, 0.8);
    padding: 4px 8px;
    border-radius: 4px;
}

/* Card type variations - border colors */
.grand-parade-card.card-normal .card-front {
    border-color: rgba(46, 204, 64, 0.8);
}

.grand-parade-card.card-grimwald .card-front {
    border-color: #ff0000;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
}

.grand-parade-card.card-grimwald .card-back {
    border-color: #ff0000;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
}

.grand-parade-card.card-joker .card-front {
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
}

.grand-parade-card.card-joker .card-back {
    border-color: #00ffff;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

/* Falling animation - slower for 12 second duration */
.grand-parade-card.falling {
    animation: cardFall 5s linear forwards;
}

@keyframes cardFall {
    0% {
        top: -120px;
        transform: rotate(0deg);
    }
    100% {
        top: calc(100% + 20px);
        transform: rotate(180deg);
    }
}

/* Caught state */
.grand-parade-card.caught {
    animation-play-state: paused;
}

.grand-parade-card.caught .card-inner {
    transform: rotateY(180deg) scale(1.1);
}

.grand-parade-card.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition: all 0.3s ease;
}

/* Catch effect popup */
.catch-effect {
    position: fixed;
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    font-weight: bold;
    pointer-events: none;
    z-index: 10000;
    transform: translateX(-50%);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.catch-effect.catch-positive {
    color: #2ecc40;
}

.catch-effect.catch-negative {
    color: #ff0000;
}

.catch-effect.catch-joker {
    color: #00ffff;
}

.catch-effect.float-up {
    animation: floatUp 1s ease-out forwards;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-50px);
    }
}

/* Confetti container */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 20px;
    opacity: 0.8;
    animation: confettiFall 3s linear infinite;
}

@keyframes confettiFall {
    0% {
        top: -20px;
        transform: rotateZ(0deg) rotateX(0deg);
    }
    100% {
        top: 100%;
        transform: rotateZ(720deg) rotateX(360deg);
    }
}

/* Result overlay */
.grand-parade-result {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(25, 0, 50, 0.95) 0%,
        rgba(75, 0, 130, 0.98) 100%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.5s ease-out;
    border-radius: 8px;
}

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

.result-content {
    text-align: center;
    padding: 40px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    border: 3px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

.result-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 36px;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 20px #ffd700;
    margin-bottom: 15px;
}

.result-message {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 30px;
    opacity: 0.9;
}

.result-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.result-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.result-stat .stat-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    color: #aaaaaa;
    text-transform: uppercase;
}

.result-stat .stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #ffffff;
}

.result-prize {
    margin-bottom: 30px;
}

.result-prize .prize-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    color: #aaaaaa;
    display: block;
    margin-bottom: 5px;
}

.result-prize .prize-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: #2ecc40;
    text-shadow: 0 0 20px #2ecc40;
    animation: prizeGlow 1s ease-in-out infinite;
}

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

.result-collect-btn {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    background: linear-gradient(180deg, #ffd700 0%, #ffa500 100%);
    border: none;
    border-radius: 10px;
    padding: 15px 50px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    transition: all 0.3s ease;
}

.result-collect-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
}

/* ============================================
   EVENT LOGGER PANEL
   ============================================ */
.event-logger-panel {
    position: fixed;
    top: 50px;
    right: 20px;
    width: 450px;
    max-height: 600px;
    background: rgba(10, 10, 20, 0.95);
    border: 2px solid var(--neon-cyan);
    border-radius: 12px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    font-family: 'Roboto Condensed', monospace;
}

.event-logger-panel.hidden {
    display: none;
}

.logger-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(180deg, rgba(0, 247, 255, 0.2) 0%, transparent 100%);
    border-bottom: 1px solid rgba(0, 247, 255, 0.3);
    border-radius: 10px 10px 0 0;
}

.logger-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: var(--neon-cyan);
    letter-spacing: 2px;
}

.logger-controls {
    display: flex;
    gap: 5px;
}

.logger-btn {
    background: rgba(0, 247, 255, 0.1);
    border: 1px solid var(--neon-cyan);
    border-radius: 4px;
    color: var(--neon-cyan);
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.logger-btn:hover {
    background: var(--neon-cyan);
    color: #000;
}

.logger-close {
    background: rgba(255, 65, 54, 0.2);
    border-color: var(--red-btn);
    color: var(--red-btn);
}

.logger-close:hover {
    background: var(--red-btn);
    color: #fff;
}

.logger-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logger-filters select {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    color: var(--text-primary);
    padding: 4px 8px;
    font-size: 11px;
}

#logger-entry-count {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: auto;
}

.logger-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    max-height: 450px;
}

.logger-content::-webkit-scrollbar {
    width: 6px;
}

.logger-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.logger-content::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
    border-radius: 3px;
}

.logger-entry {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    font-size: 11px;
    border-left: 3px solid rgba(255, 255, 255, 0.2);
}

.logger-entry:hover {
    background: rgba(255, 255, 255, 0.08);
}

.logger-time {
    color: var(--text-secondary);
    min-width: 70px;
}

.logger-cat {
    font-weight: bold;
    text-transform: uppercase;
    min-width: 65px;
    color: var(--neon-cyan);
}

.logger-action {
    color: var(--text-primary);
    min-width: 100px;
}

.logger-data {
    color: var(--text-secondary);
    font-size: 10px;
    word-break: break-all;
    width: 100%;
    margin-top: 2px;
    opacity: 0.8;
}

/* Category colors */
.logger-cat-game { border-left-color: var(--green-btn); }
.logger-cat-game .logger-cat { color: var(--green-btn); }

.logger-cat-perk { border-left-color: var(--neon-gold); }
.logger-cat-perk .logger-cat { color: var(--neon-gold); }

.logger-cat-event { border-left-color: #ff66ff; }
.logger-cat-event .logger-cat { color: #ff66ff; }

.logger-cat-minigame { border-left-color: #66ffcc; }
.logger-cat-minigame .logger-cat { color: #66ffcc; }

.logger-cat-error { border-left-color: var(--red-btn); }
.logger-cat-error .logger-cat { color: var(--red-btn); }

.logger-cat-click { border-left-color: #888; }
.logger-cat-click .logger-cat { color: #888; }

.logger-cat-system { border-left-color: #aaa; }
.logger-cat-system .logger-cat { color: #aaa; }