/* ==========================================================================
   CSS Variables & Theme Definitions
   ========================================================================== */
:root {
    --bg-dark: #0a0915;
    --bg-card: rgba(20, 18, 38, 0.7);
    --border-glow: rgba(255, 0, 255, 0.2);
    
    /* Neon Colors */
    --neon-magenta: #ff007f;
    --neon-purple: #9d4edd;
    --neon-cyan: #00f0ff;
    --neon-gold: #ffb703;
    --neon-green: #39ff14;
    --text-color: #f8f9fa;
    
    /* Font Families */
    --font-ui: 'Montserrat', sans-serif;
    --font-display: 'Orbitron', sans-serif;
    --font-accent: 'Playfair Display', serif;
}

/* ==========================================================================
   Base Styles & Reset
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    overflow: hidden;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    touch-action: none; /* Disables standard pull-to-refresh and pan/zoom gestures on the main page */
}

body {
    background-color: var(--bg-dark);
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(157, 78, 221, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0, 240, 255, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 183, 3, 0.05) 0%, transparent 60%);
    background-attachment: fixed;
    color: var(--text-color);
    font-family: var(--font-ui);
    position: relative;
}

/* Particle Canvas Overlay (behind modals but on top of main background) */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 101; /* drawn on top of overlay backdrop but behind cards */
    pointer-events: none;
}

/* ==========================================================================
   App Layout
   ========================================================================== */
.app-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    padding: 2rem 1rem;
    margin: 0 auto;
}

/* Header */
.app-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.logo-area {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s ease;
}

.logo-area:hover {
    transform: scale(1.03);
}

.neon-purple {
    color: #fff;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px var(--neon-purple),
        0 0 20px var(--neon-purple),
        0 0 40px var(--neon-purple);
}

.neon-gold {
    color: #fff;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px var(--neon-gold),
        0 0 20px var(--neon-gold),
        0 0 40px var(--neon-gold);
    margin-left: 0.5rem;
}

.subtitle {
    font-family: var(--font-ui);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Main Wheel Area */
.main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1.5rem 0;
}

/* ==========================================================================
   Wheel Aesthetics
   ========================================================================== */
.wheel-section {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Outer Ring (LED glow + golden border) */
.wheel-outer-ring {
    position: relative;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, #251b47 0%, #110927 70%, #05020f 100%);
    box-shadow: 
        0 0 20px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(157, 78, 221, 0.4),
        inset 0 0 30px rgba(255, 183, 3, 0.2);
    border: 12px solid #b8860b; /* Golden Border */
    padding: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Canvas Container */
.wheel-canvas-container {
    position: relative;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

#wheel-canvas {
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(0deg);
}

/* LED Light Bulbs */
.led-bulbs {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    border-radius: 50%;
    z-index: 5;
}

.led-bulb {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px #fff;
    transition: background-color 0.1s, box-shadow 0.1s;
}

.led-bulb.active-gold {
    background-color: var(--neon-gold);
    box-shadow: 0 0 12px var(--neon-gold), 0 0 20px var(--neon-gold);
}

.led-bulb.active-magenta {
    background-color: var(--neon-magenta);
    box-shadow: 0 0 12px var(--neon-magenta), 0 0 20px var(--neon-magenta);
}

.led-bulb.active-cyan {
    background-color: var(--neon-cyan);
    box-shadow: 0 0 12px var(--neon-cyan), 0 0 20px var(--neon-cyan);
}

/* Wheel Pointer / Ticker at the top */
.wheel-pointer {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 50px;
    background: linear-gradient(135deg, #ff007f 0%, #9d4edd 100%);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    z-index: 6;
    filter: drop-shadow(0 4px 10px rgba(255, 0, 127, 0.5));
    transform-origin: 50% 10%;
    transition: transform 0.05s ease-out;
}

.wheel-pointer.tick {
    transform: translateX(-50%) rotate(-15deg);
}

/* Center Spin Button */
.spin-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe066 0%, #b8860b 80%, #7d5b00 100%);
    border: 5px solid #fff;
    font-family: var(--font-display);
    color: #110927;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
    z-index: 7;
    outline: none;
    box-shadow: 
        0 6px 15px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(255, 183, 3, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.6);
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.spin-btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(255, 183, 3, 0.9),
        inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

.spin-btn:active {
    transform: translate(-50%, -50%) scale(0.95);
    box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(255, 183, 3, 0.4);
}

.spin-btn:disabled {
    background: radial-gradient(circle, #555 0%, #333 80%);
    border-color: #777;
    color: #666;
    cursor: not-allowed;
    box-shadow: none;
    transform: translate(-50%, -50%);
}

/* ==========================================================================
   Modals & Overlays (Glassmorphism)
   ========================================================================== */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(5, 3, 15, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: auto; /* Allow touch scroll inside modals */
}

.overlay.active {
    opacity: 1;
    pointer-events: all;
}

@media (max-height: 600px) {
    .overlay {
        align-items: flex-start;
    }
}

/* Modal Content Base Card */
.modal-content {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(157, 78, 221, 0.2);
    width: 90%;
    max-width: 550px;
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    margin: 1.5rem auto; /* Vertical scroll space */
    z-index: 102; /* drawn above the particle canvas */
    max-height: 90vh;
    overflow-y: auto;
}

.overlay.active .modal-content {
    transform: scale(1);
}

/* Close buttons */
.close-icon-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-icon-btn:hover {
    color: var(--neon-magenta);
}

/* ==========================================================================
   Victory Modal Specifically
   ========================================================================== */
.victory-card {
    text-align: center;
    background: radial-gradient(circle at center, #1b0a30 0%, #0d041c 100%);
    border: 2px solid var(--neon-gold);
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(255, 183, 3, 0.4);
    max-width: 500px;
}

.jackpot-header {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 
        0 0 10px var(--neon-magenta),
        0 0 20px var(--neon-magenta),
        0 0 45px var(--neon-magenta);
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
    animation: pulse 1s infinite alternate;
}

.prize-badge {
    background: linear-gradient(135deg, rgba(255, 183, 3, 0.15) 0%, rgba(255, 0, 127, 0.15) 100%);
    border: 2px solid var(--neon-gold);
    border-radius: 15px;
    padding: 1.5rem;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 900;
    color: var(--neon-gold);
    text-shadow: 0 0 15px rgba(255, 183, 3, 0.8);
    display: inline-block;
    margin-bottom: 1.5rem;
    min-width: 250px;
}

.congrats-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(90deg, var(--neon-magenta) 0%, var(--neon-purple) 100%);
    color: white;
    border: none;
    border-radius: 30px;
    padding: 1rem 2.5rem;
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 
        0 5px 15px rgba(255, 0, 127, 0.4),
        0 0 10px rgba(157, 78, 221, 0.4);
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(255, 0, 127, 0.6),
        0 0 20px rgba(157, 78, 221, 0.6);
}

.btn-primary:active {
    transform: translateY(1px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 30px;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.btn-danger-soft {
    border-color: rgba(255, 0, 127, 0.3);
    color: rgba(255, 100, 150, 0.8);
}

.btn-danger-soft:hover {
    background: rgba(255, 0, 127, 0.15);
    color: #ff4d94;
    border-color: rgba(255, 0, 127, 0.6);
}

/* ==========================================================================
   Settings Panel Aesthetics
   ========================================================================== */
.settings-card {
    max-width: 650px;
    width: 95%;
    border: 1px solid rgba(0, 240, 255, 0.2);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(0, 240, 255, 0.15);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.modal-header h2 {
    font-family: var(--font-ui);
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-header h2 svg {
    color: var(--neon-cyan);
}

.settings-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.settings-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 1.5rem;
}

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

.settings-section h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--neon-cyan);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
}

.preset-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Forms */
.form-select {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(10, 8, 24, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: white;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.form-select:focus {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

/* Prizes List Container */
.prizes-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 0.5rem;
    margin-bottom: 1rem;
}

/* Custom Scrollbar for Slices list and modal */
.prizes-list::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
    width: 6px;
}

.prizes-list::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
}

.prizes-list::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.prizes-list::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Prize Editor Row */
.prize-row {
    display: grid;
    grid-template-columns: auto 1fr 120px 40px;
    gap: 0.75rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.prize-color-picker {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
    cursor: pointer;
    padding: 0;
    background: none;
    overflow: hidden;
}

.prize-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.prize-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.prize-input-text {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: white;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    width: 100%;
}

.prize-input-text:focus {
    border-color: var(--neon-cyan);
    outline: none;
}

.weight-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.weight-input {
    width: 50px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.5rem 0.25rem;
    color: white;
    text-align: center;
    font-family: var(--font-ui);
    font-size: 0.9rem;
}

.weight-percent {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    min-width: 40px;
}

.btn-delete-row {
    background: transparent;
    border: none;
    color: rgba(255, 100, 100, 0.6);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-delete-row:hover {
    background: rgba(255, 0, 0, 0.15);
    color: rgb(255, 100, 100);
}

.btn-add {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-style: dashed;
    border-color: rgba(0, 240, 255, 0.4);
    color: var(--neon-cyan);
}

.btn-add:hover {
    background: rgba(0, 240, 255, 0.08);
    border-color: var(--neon-cyan);
}

/* Modal Footer */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.app-footer {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    margin-top: 1.5rem;
}

/* ==========================================================================
   Keyframe Animations & Screen Shake
   ========================================================================== */
@keyframes pulse {
    0% {
        transform: scale(1);
        text-shadow: 0 0 10px var(--neon-magenta), 0 0 20px var(--neon-magenta);
    }
    100% {
        transform: scale(1.03);
        text-shadow: 0 0 15px var(--neon-magenta), 0 0 30px var(--neon-magenta), 0 0 40px var(--neon-magenta);
    }
}

/* Screen Shake effect on win stop */
.shake {
    animation: screen-shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes screen-shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-3px, 1px, 0); }
    40%, 60% { transform: translate3d(3px, -1px, 0); }
}

/* ==========================================================================
   Responsive Adaptation
   ========================================================================== */
@media (max-width: 650px) {
    .logo-area {
        font-size: 2.3rem;
    }
    
    .subtitle {
        font-size: 0.8rem;
    }

    .wheel-outer-ring {
        width: 480px;
        height: 480px;
        border-width: 10px;
        padding: 8px;
    }

    .wheel-canvas-container {
        width: 430px;
        height: 430px;
    }

    #wheel-canvas {
        width: 100%;
        height: 100%;
    }

    .spin-btn {
        width: 80px;
        height: 80px;
        font-size: 1.1rem;
    }

    .wheel-pointer {
        top: -12px;
        width: 32px;
        height: 40px;
    }

    .modal-content {
        padding: 1.5rem;
    }
    
    .prize-badge {
        font-size: 2rem;
        padding: 1rem;
        min-width: 180px;
    }
    
    .jackpot-header {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   Lose Modal Specifically
   ========================================================================== */
.lose-card {
    text-align: center;
    background: radial-gradient(circle at center, #241216 0%, #120406 100%);
    border: 2px solid var(--neon-magenta);
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(255, 0, 127, 0.3);
    max-width: 500px;
}

.lose-header {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 
        0 0 10px rgba(255, 0, 0, 0.8),
        0 0 20px rgba(255, 0, 127, 0.8);
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}

.lose-badge {
    background: rgba(255, 0, 127, 0.1);
    border: 2px solid var(--neon-magenta);
    border-radius: 15px;
    padding: 1.5rem;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 900;
    color: var(--neon-magenta);
    text-shadow: 0 0 15px rgba(255, 0, 127, 0.8);
    display: inline-block;
    margin-bottom: 1.5rem;
    min-width: 250px;
}

/* ==========================================================================
   Full Screen Video Backdrop & Close Button
   ========================================================================== */
.jackpot-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
}

.close-video-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: white;
    padding: 0.8rem 1.8rem;
    font-family: var(--font-ui);
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.95rem;
    z-index: 105;
    transition: all 0.2s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.close-video-btn:hover {
    background: var(--neon-magenta);
    border-color: var(--neon-magenta);
    box-shadow: 0 0 25px var(--neon-magenta);
    transform: scale(1.05);
}

/* ==========================================================================
   New epic and lose animation states
   ========================================================================== */
.disco-active {
    animation: disco-flash 1.2s infinite alternate;
}

@keyframes disco-flash {
    0% { background-color: #0a0915; }
    25% { background-color: #2e004f; }
    50% { background-color: #001f3f; }
    75% { background-color: #4a0025; }
    100% { background-color: #0b2414; }
}

.lose-active {
    filter: brightness(75%) grayscale(25%);
    transition: filter 1.5s ease;
}

/* Epic viewport shake */
.epic-shake {
    animation: epic-screen-shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes epic-screen-shake {
    0%, 100% { transform: scale(1) translate(0, 0); }
    10%, 30%, 50%, 70%, 90% { transform: scale(1.025) translate3d(-6px, -4px, 0); }
    20%, 40%, 60%, 80% { transform: scale(0.975) translate3d(6px, 4px, 0); }
}

/* Absurd Flashing Casino Popups */
.absurd-popup-text {
    position: fixed;
    font-family: var(--font-display);
    font-weight: 900;
    z-index: 999;
    pointer-events: none;
    animation: pop-fade 1.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-transform: uppercase;
    text-align: center;
}

@keyframes pop-fade {
    0% { transform: translate(-50%, -50%) scale(0.2) rotate(-20deg); opacity: 0; }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(10deg); }
    100% { opacity: 0; transform: translate(-50%, -100%) scale(0.9) rotate(-5deg); }
}

/* ==========================================================================
   Jackpot Marquee Mockup Visuals (Redesigned)
   ========================================================================== */

/* Conic Gradient Light Rays */
.ray-beams {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 183, 3, 0.08) 12deg,
        transparent 24deg,
        rgba(255, 183, 3, 0.08) 36deg,
        transparent 48deg,
        rgba(255, 183, 3, 0.08) 60deg,
        transparent 72deg,
        rgba(255, 183, 3, 0.08) 84deg,
        transparent 96deg,
        rgba(255, 183, 3, 0.08) 108deg,
        transparent 120deg,
        rgba(255, 183, 3, 0.08) 132deg,
        transparent 144deg,
        rgba(255, 183, 3, 0.08) 156deg,
        transparent 168deg,
        rgba(255, 183, 3, 0.08) 180deg,
        transparent 192deg,
        rgba(255, 183, 3, 0.08) 204deg,
        transparent 216deg,
        rgba(255, 183, 3, 0.08) 228deg,
        transparent 240deg,
        rgba(255, 183, 3, 0.08) 252deg,
        transparent 264deg,
        rgba(255, 183, 3, 0.08) 276deg,
        transparent 288deg,
        rgba(255, 183, 3, 0.08) 300deg,
        transparent 312deg,
        rgba(255, 183, 3, 0.08) 324deg,
        transparent 336deg,
        rgba(255, 183, 3, 0.08) 348deg,
        transparent 360deg
    );
    transform: translate(-50%, -50%);
    animation: rotate-rays 22s linear infinite;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(2px);
}

@keyframes rotate-rays {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Jackpot Card container */
.jackpot-marquee-card {
    position: relative;
    width: 90%;
    max-width: 520px;
    padding: 3.5rem 2rem 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 102; /* drawn above the particle canvas */
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.overlay.active .jackpot-marquee-card {
    transform: scale(1);
}

/* Diamond backdrop */
.diamond-backdrop {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, #3d2503 0%, #170900 75%, #050200 100%);
    border: 8px solid #ffb703; /* thick gold border */
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.9),
        0 0 50px rgba(255, 183, 3, 0.7),
        inset 0 0 35px rgba(255, 183, 3, 0.5);
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 28px; /* rounded corners of diamond */
    z-index: 1;
}

/* Content sits upright over diamond */
.jackpot-content-wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Deluxe Capsule Badge */
.casino-badge-pill {
    background: linear-gradient(180deg, #d32f2f 0%, #850c0c 100%);
    border: 2px solid #ffb703;
    border-radius: 20px;
    padding: 0.25rem 1.25rem;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    box-shadow: 
        0 4px 10px rgba(0,0,0,0.4),
        0 0 10px rgba(255, 183, 3, 0.4);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

/* 3D Extruded Jackpot Title */
.jackpot-title {
    font-family: var(--font-display);
    font-size: 3.8rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(to bottom, #ffffff 0%, #ffdf73 35%, #ffb703 65%, #d35400 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 0.1rem;
    text-align: center;
    filter: 
        drop-shadow(0px 1px 0px #d9a407) 
        drop-shadow(0px 2px 0px #b38600) 
        drop-shadow(0px 3px 0px #997300) 
        drop-shadow(0px 4px 0px #806000) 
        drop-shadow(0px 5px 0px #664d00) 
        drop-shadow(0px 6px 0px #4d3a00) 
        drop-shadow(0px 8px 15px rgba(0,0,0,0.6));
    animation: text-shake 0.3s infinite alternate;
}

.jackpot-subtitle {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(to bottom, #ffffff 0%, #ffdf73 60%, #e67e22 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 1.2rem;
    text-align: center;
    filter: 
        drop-shadow(0px 1px 0px #cc6600) 
        drop-shadow(0px 2px 0px #804000)
        drop-shadow(0px 4px 8px rgba(0,0,0,0.5));
}

/* Slot machine styles removed */

/* Floating Gold Coins */
.floating-gold-coin {
    position: absolute;
    background: radial-gradient(circle at 35% 35%, #ffe680 0%, #d4af37 70%, #8b6508 100%);
    border: 2px solid #8b6508;
    border-radius: 50%;
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: float-and-spin 5s ease-in-out infinite alternate;
}

.floating-gold-coin::after {
    content: "₽";
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 800;
    color: #8b6508;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.coin-1 {
    top: -25px;
    left: 15px;
    width: 28px;
    height: 28px;
    animation-delay: 0s;
}
.coin-2 {
    top: 120px;
    right: -35px;
    width: 36px;
    height: 36px;
    animation-delay: 0.7s;
}
.coin-3 {
    bottom: 25px;
    left: -40px;
    width: 42px;
    height: 42px;
    animation-delay: 1.4s;
}
.coin-3::after { font-size: 18px; }

.coin-4 {
    bottom: -15px;
    right: 30px;
    width: 30px;
    height: 30px;
    animation-delay: 2.1s;
}
.coin-5 {
    top: -45px;
    right: 50px;
    width: 32px;
    height: 32px;
    animation-delay: 2.8s;
}

@keyframes float-and-spin {
    0% {
        transform: translateY(0) rotateY(0deg) scale(1);
    }
    50% {
        transform: translateY(-8px) rotateY(180deg) scale(1.05);
    }
    100% {
        transform: translateY(-16px) rotateY(360deg) scale(1);
    }
}

/* Marquee Light Bulbs Border inside rotated diamond */
.marquee-lights {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.marquee-bulb {
    position: absolute;
    width: 7px;
    height: 7px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px #fff;
    transform: translate(-50%, -50%);
}

.marquee-bulb.odd {
    animation: flash-odd 0.5s infinite alternate;
}

.marquee-bulb.even {
    animation: flash-even 0.5s infinite alternate;
}

@keyframes flash-odd {
    0% { background-color: #ffb703; box-shadow: 0 0 8px #ffb703, 0 0 15px #ffb703; }
    100% { background-color: #fff; box-shadow: 0 0 2px #fff; }
}

@keyframes flash-even {
    0% { background-color: #fff; box-shadow: 0 0 2px #fff; }
    100% { background-color: #ff007f; box-shadow: 0 0 8px #ff007f, 0 0 15px #ff007f; }
}

@keyframes text-shake {
    0% { transform: scale(1) skewX(-1.5deg); }
    100% { transform: scale(1.03) skewX(1.5deg); }
}

/* Mobile responsive styling overrides */
@media (max-width: 650px) {
    .jackpot-marquee-card {
        max-width: 310px;
        padding: 2.2rem 1rem 1.8rem 1rem;
    }
    .diamond-backdrop {
        width: 250px;
        height: 250px;
        border-width: 5px;
        border-radius: 18px;
    }
    .jackpot-title {
        font-size: 2.2rem;
    }
    .jackpot-subtitle {
        font-size: 1.1rem;
        letter-spacing: 2px;
        margin-bottom: 0.8rem;
    }
    .prize-badge {
        font-size: 1.8rem;
        padding: 0.8rem;
        min-width: 150px;
    }
    .floating-gold-coin {
        display: none; /* hide floating coins on mobile to avoid layout clutter */
    }
    .close-video-btn {
        top: 15px;
        right: 15px;
        padding: 0.5rem 1.2rem;
        font-size: 0.85rem;
    }
}