/**
 * Modern Floating Spinner 2025 - Production Ready
 * Optimized casino wheel with smooth animations and confetti effects
 * 
 * Features:
 * - Responsive floating button with glow effects
 * - Modal overlay with SVG-based casino wheel
 * - Smooth spinning animations with CSS transforms
 * - Graceful confetti and sparkle effects
 * - Optimized for performance and accessibility
 * 
 * @version 1.0.0
 * @author Casino Theme
 */

/* Simple Lucky Wheel Button */
.floating-spinner-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 70px;
    height: 70px;
    background: 
        /* Detailed 12-section wheel */
        conic-gradient(
            #FF0000 0deg 30deg,      /* Red */
            #FFD700 30deg 60deg,     /* Gold */
            #FF0000 60deg 90deg,     /* Red */
            #FFD700 90deg 120deg,    /* Gold */
            #FF0000 120deg 150deg,   /* Red */
            #FFD700 150deg 180deg,   /* Gold */
            #FF0000 180deg 210deg,   /* Red */
            #FFD700 210deg 240deg,   /* Gold */
            #FF0000 240deg 270deg,   /* Red */
            #FFD700 270deg 300deg,   /* Gold */
            #FF0000 300deg 330deg,   /* Red */
            #FFD700 330deg 360deg    /* Gold */
        );
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #8B4513;
    box-shadow: 
        0 0 0 2px #FFD700,
        0 4px 15px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 215, 0, 0.4);
    transition: all 0.3s ease;
    animation: simple-wheel-pulse 2s ease-in-out infinite;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.floating-spinner-btn:hover {
    transform: scale(1.1) rotate(45deg);
    box-shadow: 
        0 0 0 3px #FFD700,
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(255, 215, 0, 0.6);
    animation: simple-wheel-spin 1s linear infinite;
}

/* Touch/Mobile optimizations */
.floating-spinner-btn:active {
    transform: scale(1.05);
    transition: transform 0.1s ease-out;
}

@media (hover: none) and (pointer: coarse) {
    .floating-spinner-btn:hover {
        transform: scale(1.1);
        animation: modern-casino-mobile-pulse 1s ease-in-out;
    }
}

/* Accessibility Improvements */
.floating-spinner-btn:focus {
    outline: none;
    box-shadow: 
        0 0 0 3px rgba(255, 215, 0, 1),
        0 0 0 6px rgba(255, 255, 255, 0.8),
        0 0 30px rgba(255, 215, 0, 0.6),
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.floating-spinner-btn:focus:not(:focus-visible) {
    box-shadow: 
        0 0 0 2px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.4),
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .floating-spinner-btn {
        animation: none;
    }
    
    .floating-spinner-btn:hover {
        animation: none;
        transform: scale(1.05);
    }
    
    .spinner-icon::before,
    .spinner-icon::after,
    .floating-spinner-btn::after {
        animation: none;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .floating-spinner-btn {
        border: 2px solid;
        background: linear-gradient(45deg, #FFD700, #FF0000);
    }
    
    .spinner-icon::before {
        background: #FFFFFF;
        border: 1px solid #000000;
    }
}

/* Modern Tooltip System */
.floating-spinner-btn[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    color: #FFD700;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10001;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 215, 0, 0.3);
    animation: tooltip-fade-in 0.3s ease-out;
    pointer-events: none;
}

.floating-spinner-btn[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 110%;
    right: 15px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(0, 0, 0, 0.9);
    z-index: 10001;
    animation: tooltip-fade-in 0.3s ease-out;
}

@keyframes tooltip-fade-in {
    0% { opacity: 0; transform: translateY(5px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Hide tooltip on mobile to prevent issues */
@media (max-width: 768px) {
    .floating-spinner-btn[data-tooltip]:hover::after,
    .floating-spinner-btn[data-tooltip]:hover::before {
        display: none;
    }
}

/* Removed - replaced with better mobile optimization above */

.spinner-icon {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #FFFFFF;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Simple Center Circle */
.spinner-icon::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #8B4513;
    border: 2px solid #FFD700;
    box-shadow: 
        0 0 8px rgba(255, 215, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Simple Segment Lines */
.spinner-icon::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: 
        conic-gradient(
            transparent 0deg 14deg,
            rgba(255, 255, 255, 0.4) 14deg 16deg,
            transparent 16deg 44deg,
            rgba(255, 255, 255, 0.4) 44deg 46deg,
            transparent 46deg 74deg,
            rgba(255, 255, 255, 0.4) 74deg 76deg,
            transparent 76deg 104deg,
            rgba(255, 255, 255, 0.4) 104deg 106deg,
            transparent 106deg 134deg,
            rgba(255, 255, 255, 0.4) 134deg 136deg,
            transparent 136deg 164deg,
            rgba(255, 255, 255, 0.4) 164deg 166deg,
            transparent 166deg 194deg,
            rgba(255, 255, 255, 0.4) 194deg 196deg,
            transparent 196deg 224deg,
            rgba(255, 255, 255, 0.4) 224deg 226deg,
            transparent 226deg 254deg,
            rgba(255, 255, 255, 0.4) 254deg 256deg,
            transparent 256deg 284deg,
            rgba(255, 255, 255, 0.4) 284deg 286deg,
            transparent 286deg 314deg,
            rgba(255, 255, 255, 0.4) 314deg 316deg,
            transparent 316deg 344deg,
            rgba(255, 255, 255, 0.4) 344deg 346deg,
            transparent 346deg 360deg
        );
    border-radius: 50%;
    animation: simple-segments-rotate 3s linear infinite;
}

@keyframes pulse-glow {
    0%, 100% { 
        box-shadow: 
            0 8px 20px rgba(193, 0, 0, 0.4),
            0 0 0 4px rgba(255, 215, 0, 0.8),
            inset 0 2px 0 rgba(255, 255, 255, 0.2);
    }
    50% { 
        box-shadow: 
            0 8px 20px rgba(193, 0, 0, 0.6),
            0 0 0 6px rgba(255, 215, 0, 1),
            inset 0 2px 0 rgba(255, 255, 255, 0.3);
    }
}

@keyframes spin-glow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Simple Lucky Wheel Animations */
@keyframes simple-wheel-pulse {
    0%, 100% { 
        box-shadow: 
            0 0 0 2px #FFD700,
            0 4px 15px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(255, 215, 0, 0.4);
        transform: scale(1);
    }
    50% { 
        box-shadow: 
            0 0 0 3px #FFD700,
            0 6px 20px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(255, 215, 0, 0.6);
        transform: scale(1.02);
    }
}

@keyframes simple-wheel-spin {
    0% { transform: scale(1.1) rotate(45deg); }
    100% { transform: scale(1.1) rotate(405deg); }
}

@keyframes simple-segments-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes celebration-glow {
    0% { 
        text-shadow: 
            0 0 20px rgba(255, 215, 0, 0.8),
            0 0 40px rgba(255, 215, 0, 0.4),
            0 4px 8px rgba(0, 0, 0, 0.8);
        transform: scale(1);
    }
    100% { 
        text-shadow: 
            0 0 30px rgba(255, 215, 0, 1),
            0 0 60px rgba(255, 215, 0, 0.6),
            0 0 90px rgba(255, 255, 255, 0.3),
            0 4px 8px rgba(0, 0, 0, 0.8);
        transform: scale(1.05);
    }
}

/* Modern Creative Animations */
@keyframes modern-casino-pulse {
    0%, 100% { 
        box-shadow: 
            0 0 0 2px rgba(255, 215, 0, 0.8),
            0 0 20px rgba(255, 215, 0, 0.4),
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 16px 48px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2);
        transform: scale(1);
    }
    50% { 
        box-shadow: 
            0 0 0 3px rgba(255, 215, 0, 1),
            0 0 30px rgba(255, 215, 0, 0.6),
            0 0 50px rgba(255, 140, 0, 0.3),
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 16px 48px rgba(0, 0, 0, 0.15),
            inset 0 2px 0 rgba(255, 255, 255, 0.5),
            inset 0 -2px 0 rgba(0, 0, 0, 0.3);
        transform: scale(1.02);
    }
}

@keyframes modern-casino-spin {
    0% { transform: scale(1.2) rotate(180deg); }
    100% { transform: scale(1.2) rotate(540deg); }
}

@keyframes modern-casino-mobile-pulse {
    0% { transform: scale(1.1); filter: brightness(1); }
    50% { transform: scale(1.15); filter: brightness(1.3); }
    100% { transform: scale(1.1); filter: brightness(1); }
}

@keyframes modern-icon-pulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 
            0 0 10px rgba(255, 215, 0, 0.8),
            0 0 20px rgba(255, 140, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 
            0 0 15px rgba(255, 215, 0, 1),
            0 0 30px rgba(255, 140, 0, 0.6),
            0 0 45px rgba(220, 20, 60, 0.3),
            inset 0 2px 0 rgba(255, 255, 255, 0.8),
            inset 0 -2px 0 rgba(0, 0, 0, 0.4);
    }
}

@keyframes modern-segments-spin {
    0% { transform: rotate(0deg) scale(1); opacity: 0.8; }
    50% { transform: rotate(180deg) scale(1.05); opacity: 1; }
    100% { transform: rotate(360deg) scale(1); opacity: 0.8; }
}

@keyframes modern-pointer-glow {
    0% { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)); }
    100% { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 12px rgba(255, 215, 0, 1)); }
}

@keyframes modern-particles-float {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.7; }
    33% { transform: rotate(120deg) scale(1.1); opacity: 0.5; }
    66% { transform: rotate(240deg) scale(0.9); opacity: 0.8; }
}



/* Modal Overlay */
.spinner-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: none;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

.spinner-modal-overlay.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.spinner-modal-content {
    position: relative;
   
    padding: 40px;
   
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 90vw;
    max-height: 90vh;
}

.spinner-modal-overlay.show .spinner-modal-content {
    transform: scale(1);
    opacity: 1;
}

.spinner-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
    backdrop-filter: blur(10px);
}

.spinner-modal-close:hover {
    background: rgba(193, 0, 0, 0.8);
    border-color: rgba(255, 215, 0, 0.8);
    transform: scale(1.1);
}

/* Modal Title */


/* Spinner Container */
.modal-spinner-wheel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 30px;
}

.modal-spinner-wheel-wrapper {
    position: relative;
    display: inline-block;
}

.modal-wheel-lights {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    animation: rotateLights 20s linear infinite;
}

.modal-spinner-wheel {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    position: relative;
    overflow: visible; /* Allow glow effects to show */
    transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
    background: transparent; /* Remove background to show SVG */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure SVG elements are visible */
.modal-spinner-wheel svg {
    width: 100%;
    height: 100%;
    display: block;
}

.modal-spinner-wheel.spinning {
    transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}

/* Modal Spinner Segments */
.modal-wheel-segment {
    position: absolute;
    width: 50%;
    height: 50%;
    transform-origin: 100% 100%;
    top: 50%;
    left: 50%;
    clip-path: polygon(0% 100%, 100% 100%, 86.6% 50%);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-left: none;
    border-bottom: none;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 2;
}

.modal-wheel-segment:hover {
    filter: brightness(1.2) saturate(1.1);
    z-index: 5;
    transform: scale(1.02);
}

.modal-segment-content {
    position: absolute;
    top: 25%;
    left: 65%;
    transform: translate(-50%, -50%) rotate(-15deg);
    color: #fff;
    font-weight: bold;
    font-size: 10px;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 1),
        -1px -1px 2px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(0, 0, 0, 0.6);
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 10;
    max-width: 70px;
    word-break: break-word;
    letter-spacing: 0.5px;
}

/* Legacy segment classes for backward compatibility */
.modal-spinner-segment {
    position: absolute;
    width: 50%;
    height: 50%;
    transform-origin: 100% 100%;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-spinner-segment-inner {
    width: 200%;
    height: 200%;
    background: var(--segment-color);
    transform-origin: 50% 100%;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.modal-spinner-segment-text {
    position: absolute;
    width: 120px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    transform: rotate(-45deg) translateY(-50px);
    line-height: 1.2;
    word-wrap: break-word;
}

/* Modal Spinner Pointer - Professional Casino Design */
.modal-spinner-pointer {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    z-index: 15;
    animation: pointer-glow 2s ease-in-out infinite alternate;
}

/* Main pointer arrow */
.modal-spinner-pointer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 35px solid #FFD700;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
    z-index: 3;
}

/* Pointer base/mounting */
.modal-spinner-pointer::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 16px;
    background: linear-gradient(135deg, #C0C0C0 0%, #808080 50%, #A0A0A0 100%);
    border-radius: 12px 12px 4px 4px;
    box-shadow: 
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

/* Pointer glow animation */
@keyframes pointer-glow {
    0% {
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
        transform: translateX(-50%) scale(1);
    }
    100% {
        filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.9))
               drop-shadow(0 0 35px rgba(255, 165, 0, 0.6))
               drop-shadow(0 0 45px rgba(255, 69, 0, 0.4));
        transform: translateX(-50%) scale(1.02);
    }
}

/* Add sparkle effect to pointer */
.modal-spinner-pointer:hover::before {
    animation: pointer-sparkle 0.6s ease-in-out;
}

@keyframes pointer-sparkle {
    0%, 100% { 
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5))
                drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
    }
    50% { 
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5))
                drop-shadow(0 0 25px rgba(255, 215, 0, 1))
                drop-shadow(0 0 35px rgba(255, 255, 255, 0.8));
    }
}

/* Modal Spinner Center */
.modal-spinner-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #FFD700 0%, #C10000 100%);
    border-radius: 50%;
    border: 6px solid #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    z-index: 5;
}

/* Modal Spin Button */
.modal-spin-button {
    background: linear-gradient(145deg, #C10000, #8B0000);
    color: #fff;
    border: none;
    padding: 18px 50px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 10px 20px rgba(193, 0, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
}

.modal-spin-button:hover {
    background: linear-gradient(145deg, #E10000, #A00000);
    transform: translateY(-3px);
    box-shadow: 
        0 15px 25px rgba(193, 0, 0, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.modal-spin-button:active {
    transform: translateY(0);
}

.modal-spin-button:disabled {
    background: #666;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Winner Segment Highlighting - Enhanced */
.winner-segment {
    filter: brightness(1.4) drop-shadow(0 0 15px rgba(255, 215, 0, 1)) !important;
    stroke: #FFD700 !important;
    stroke-width: 5 !important;
    animation: winner-glow 0.8s ease-in-out infinite alternate;
}

@keyframes winner-glow {
    from {
        filter: brightness(1.4) drop-shadow(0 0 15px rgba(255, 215, 0, 1));
        stroke-width: 5;
    }
    to {
        filter: brightness(1.6) drop-shadow(0 0 25px rgba(255, 215, 0, 1)) drop-shadow(0 0 35px rgba(255, 255, 255, 0.5));
        stroke-width: 6;
    }
}

/* Winner indicator - shows exactly where the pointer hits */
.winner-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 60px;
    background: linear-gradient(to bottom, #FFD700, #FF6B35);
    transform: translateX(-50%);
    border-radius: 2px;
    z-index: 12;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    animation: winner-pulse 1.5s ease-in-out infinite;
}

@keyframes winner-pulse {
    0%, 100% { 
        transform: translateX(-50%) scaleY(1); 
        opacity: 0.8;
    }
    50% { 
        transform: translateX(-50%) scaleY(1.1); 
        opacity: 1;
    }
}

/* Modal Result Display */
.modal-spin-result {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(20px);
    text-align: center;
    opacity: 0;
    transition: all 0.5s ease;
    min-height: 60px;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.9);
    padding: 40px;
    border-radius: 20px;
    border: 3px solid #FFD700;
    box-shadow: 
        0 0 50px rgba(255, 215, 0, 0.8),
        0 0 100px rgba(255, 215, 0, 0.4);
}

.modal-spin-result.show {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}

.modal-result-text {
    color: #FFD700;
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 25px;
    text-shadow: 
        0 0 20px rgba(255, 215, 0, 0.8),
        0 0 40px rgba(255, 215, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    letter-spacing: 3px;
    animation: celebration-glow 1.5s ease-in-out infinite alternate;
}

.modal-result-action {
    background: linear-gradient(145deg, #FFD700, #FFA500);
    color: #1a1a1a;
    padding: 15px 35px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 6px 12px rgba(255, 215, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modal-result-action:hover {
    background: linear-gradient(145deg, #FFF700, #FFB500);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(255, 215, 0, 0.4);
    text-decoration: none;
    color: #1a1a1a;
}

/* Responsive Design */
@media (max-width: 768px) {
    .spinner-modal-content {
        padding: 20px;
        margin: 10px;
    }
    
  
    
    .modal-spinner-wheel {
        width: 300px;
        height: 300px;
        border-width: 6px;
    }
    
    .modal-spinner-segment-text {
        font-size: 12px;
        width: 90px;
        transform: rotate(-45deg) translateY(-35px);
    }
    
    .modal-spinner-center {
        width: 60px;
        height: 60px;
        border-width: 4px;
    }
    
    .modal-spinner-pointer {
        width: 45px;
        height: 45px;
        top: -15px;
    }
    
    .modal-spinner-pointer::before {
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 25px solid #FFD700;
    }
    
    .modal-spinner-pointer::after {
        width: 18px;
        height: 12px;
        top: 22px;
    }
    
    .modal-spin-button {
        padding: 15px 40px;
        font-size: 18px;
        margin-top: 20px;
    }
    
    .modal-result-text {
        font-size: 24px;
    }
    
    .modal-result-action {
        padding: 12px 28px;
    }
}

/* Enhanced Mobile & Tablet Responsiveness */
@media (max-width: 768px) {
    .floating-spinner-btn {
        width: 65px;
        height: 65px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
        box-shadow: 
            0 0 0 2px rgba(255, 215, 0, 0.9),
            0 0 25px rgba(255, 215, 0, 0.5),
            0 6px 24px rgba(0, 0, 0, 0.3),
            0 12px 36px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    }
    
    .floating-spinner-btn:hover {
        transform: translateY(-50%) scale(1.15);
    }
    
    .spinner-icon::before {
        width: 22px;
        height: 22px;
    }
    
    .spinner-icon::after {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .floating-spinner-btn {
        width: 60px;
        height: 60px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
        /* Optimized shadows for mobile performance */
        box-shadow: 
            0 0 0 2px rgba(255, 215, 0, 0.8),
            0 0 20px rgba(255, 215, 0, 0.4),
            0 4px 20px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    
    .floating-spinner-btn:hover {
        transform: translateY(-50%) scale(1.1);
        animation: modern-casino-mobile-pulse 0.8s ease-in-out;
    }
    
    .spinner-icon::before {
        width: 20px;
        height: 20px;
    }
    
    .spinner-icon::after {
        width: 26px;
        height: 26px;
    }
    
 
}

/* Ultra-small screens */
@media (max-width: 360px) {
    .floating-spinner-btn {
        width: 55px;
        height: 55px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        right: 12px;
    }
    
    .spinner-icon::before {
        width: 18px;
        height: 18px;
    }
    
    .spinner-icon::after {
        width: 24px;
        height: 24px;
    }
}

/* Additional mobile responsive styles */
@media (max-width: 480px) {
    .spinner-modal-content {
        padding: 15px;
        border-radius: 16px;
    }
    
    .modal-spinner-wheel {
        width: 250px;
        height: 250px;
        border-width: 4px;
    }
    
    .modal-spinner-segment-text {
        font-size: 10px;
        width: 70px;
        transform: rotate(-45deg) translateY(-25px);
    }
    
    .modal-spinner-center {
        width: 50px;
        height: 50px;
        border-width: 3px;
    }
    
    .modal-spin-button {
        padding: 12px 30px;
        font-size: 16px;
    }
}

.modal-light {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 15px 3px currentColor, 0 0 5px 1px currentColor;
    animation: blink 2s infinite;
}

@keyframes rotateLights {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

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

/* ==============================================
   8. Result Display
   ============================================== */
.modal-spin-result {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 40px 50px;
    background: rgba(0,0,0,0.95);
    border-radius: 20px;
    border: 3px solid #FFD700;
    display: none;
    min-width: 350px;
    max-width: 90vw;
    box-shadow: 
        0 0 50px rgba(255, 215, 0, 0.8),
        0 0 100px rgba(255, 215, 0, 0.4),
        0 0 200px rgba(255, 215, 0, 0.2);
    animation: resultFadeIn 0.5s ease-out;
    z-index: 10001;
}

.modal-spin-result.show {
    display: block;
}

.modal-result-text {
    font-size: 36px;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 0 0 15px #FFA500, 0 0 5px #FFA500;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.modal-result-button {
    padding: 15px 30px;
    background: linear-gradient(180deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
}

.modal-result-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(40, 167, 69, 0.6);
}

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

/* ==============================================
   9. Responsive Design
   ============================================== */
@media (max-width: 600px) {
    .modal-spinner-wheel { width: 90vw; height: 90vw; border-width: 2px; }
    .modal-wheel-lights { width: calc(90vw + 60px); height: calc(90vw + 60px); }
    .modal-segment-content { font-size: 12px; }
    .modal-wheel-center { width: 70px; height: 70px; border-width: 3px; }
    .modal-wheel-center::before { width: 40px; height: 40px; }
    .modal-wheel-center::after { width: 15px; height: 15px; }
    .modal-wheel-pointer::before { border-left-width: 20px; border-right-width: 20px; border-bottom-width: 40px; }
    .modal-spin-button { font-size: 22px; padding: 15px 35px; }
    .modal-result-text { font-size: 28px; }
    .floating-spinner-btn { width: 60px; height: 60px; bottom: 20px; right: 20px; }
    .spinner-icon { font-size: 30px; }
}

@media (max-width: 400px) {
    .modal-segment-content { font-size: 10px; letter-spacing: 0.5px; }
    .modal-spin-button { font-size: 18px; padding: 12px 30px; }
    .modal-spin-result {
        padding: 30px 20px;
        min-width: 280px;
        max-width: 85vw;
    }
    
    .modal-result-text { 
        font-size: 28px;
        letter-spacing: 2px;
    }
    
    .modal-result-button { 
        font-size: 16px; 
        padding: 12px 25px; 
    }
}

/* Spectacular Full-Screen Confetti Animations */
@keyframes confetti-spectacular-explosion {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    15% {
        transform: translate(calc(var(--horizontal-force) * 0.3), calc(var(--vertical-force) * 0.3)) rotate(120deg) scale(1.2);
        opacity: 1;
    }
    50% {
        transform: translate(calc(var(--horizontal-force) * 0.8), calc(var(--vertical-force) * 0.8 + 200px)) rotate(360deg) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(calc(var(--horizontal-force)), calc(var(--vertical-force) + 100vh)) rotate(720deg) scale(0.3);
        opacity: 0;
    }
}

@keyframes particle-float {
    0% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
    20% {
        transform: translateY(-100px) translateX(20px) scale(1);
        opacity: 1;
    }
    80% {
        transform: translateY(-80vh) translateX(-30px) scale(0.8);
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100vh) translateX(50px) scale(0);
        opacity: 0;
    }
}

@keyframes victory-flash {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }
    15% {
        opacity: 0.8;
        transform: scale(1.0);
    }
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
    60% {
        opacity: 0.6;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}

@keyframes victory-text-bounce {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-10deg);
        opacity: 0;
    }
    20% {
        transform: translate(-50%, -50%) scale(1.3) rotate(5deg);
        opacity: 1;
    }
    40% {
        transform: translate(-50%, -50%) scale(0.9) rotate(-2deg);
        opacity: 1;
    }
    60% {
        transform: translate(-50%, -50%) scale(1.1) rotate(1deg);
        opacity: 1;
    }
    80% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
        opacity: 0;
    }
}

/* Fullscreen confetti container styles */
.confetti-fullscreen-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 99999;
    overflow: hidden;
}

.confetti-spectacular {
    will-change: transform, opacity;
}

.floating-particle {
    will-change: transform, opacity;
}

.victory-flash {
    will-change: transform, opacity;
}

.victory-text-overlay {
    will-change: transform, opacity;
    user-select: none;
    -webkit-user-select: none;
}

/* Mobile optimizations for confetti */
@media (max-width: 768px) {
    .confetti-spectacular {
        animation-duration: 2500ms !important;
    }
    
    .victory-text-overlay {
        font-size: 2.5rem !important;
        top: 40% !important;
    }
    
    .floating-particle {
        animation-duration: 3000ms !important;
    }
}

/* Legacy confetti (keeping for backward compatibility) */
@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotateX(0) rotateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(400px) rotateX(360deg) rotateY(360deg);
        opacity: 0;
    }
}

@keyframes confetti-graceful-fall {
    0% {
        transform: translateY(0) rotateX(0) rotateY(0) rotateZ(0);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
        transform: translateY(200px) rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
    100% {
        transform: translateY(450px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        opacity: 0;
    }
}



/* Light Pulse Animation for Casino Wheel Lights */
@keyframes lightPulse {
    0% {
        opacity: 0.6;
        filter: drop-shadow(0 0 6px #FFFF00);
    }
    100% {
        opacity: 1;
        filter: drop-shadow(0 0 12px #FFFF00) drop-shadow(0 0 20px #FFA500);
    }
}

/* New Wheel-Centered Celebration Animations */

/* Wheel Burst Particles */
@keyframes wheel-burst-out {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--end-x) - 50%), calc(var(--end-y) - 50%)) scale(0.3);
    }
}

/* Winner Glow Pulse */
@keyframes winner-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 20px #FFD700) drop-shadow(0 0 40px #FFA500);
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 30px #FFD700) drop-shadow(0 0 60px #FFA500) drop-shadow(0 0 80px #FF6347);
        transform: scale(1.02);
    }
}

/* Celebration Rings */
@keyframes ring-expand {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.8);
        border-width: 4px;
    }
    50% {
        opacity: 0.8;
        border-width: 2px;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.5);
        border-width: 1px;
    }
}

/* Sparkle Twinkle */
@keyframes sparkle-twinkle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(90deg);
    }
    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(270deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) rotate(360deg);
    }
}

/* Wheel Victory Text Bounce */
@keyframes wheel-text-bounce {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) translateY(20px);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1) translateY(-5px);
    }
    40% {
        transform: translate(-50%, -50%) scale(0.95) translateY(2px);
    }
    60% {
        transform: translate(-50%, -50%) scale(1.02) translateY(-1px);
    }
    80% {
        transform: translate(-50%, -50%) scale(0.98) translateY(0px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(0px);
    }
}

/* Winner Glow Class for Wheel */
.winner-glow {
    position: relative;
}

.winner-glow::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, rgba(255, 165, 0, 0.2) 50%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    animation: winner-pulse 2000ms ease-in-out infinite;
}

/* Confetti Rain Animation */
@keyframes confetti-fall {
    0% {
        transform: translateY(-20px) translateX(0px) rotate(var(--rotation)) scale(1);
        opacity: 1;
    }
    10% {
        transform: translateY(50px) translateX(calc(var(--wind) * 0.1)) rotate(calc(var(--rotation) + var(--rotation-speed) * 0.1)) scale(1);
    }
    50% {
        transform: translateY(300px) translateX(calc(var(--wind) * 0.5)) rotate(calc(var(--rotation) + var(--rotation-speed) * 0.5)) scale(0.9);
        opacity: 0.8;
    }
    100% {
        transform: translateY(calc(100vh + 50px)) translateX(var(--wind)) rotate(calc(var(--rotation) + var(--rotation-speed))) scale(0.3);
        opacity: 0;
    }
}

/* Confetti Rain Container */
.confetti-rain-container {
    pointer-events: none !important;
}

.confetti-rain-piece {
    will-change: transform, opacity;
}

/* Explosive Confetti Animation */
@keyframes explosive-burst {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
    20% {
        transform: translate(calc(-50% + var(--velocity-x) * 0.2), calc(-50% + var(--velocity-y) * 0.2)) scale(1.1) rotate(72deg);
        opacity: 1;
    }
    50% {
        transform: translate(calc(-50% + var(--velocity-x) * 0.5), calc(-50% + var(--velocity-y) * 0.5 + var(--gravity) * 0.125)) scale(0.9) rotate(180deg);
        opacity: 0.8;
    }
    80% {
        transform: translate(calc(-50% + var(--velocity-x) * 0.8), calc(-50% + var(--velocity-y) * 0.8 + var(--gravity) * 0.32)) scale(0.6) rotate(288deg);
        opacity: 0.4;
    }
    100% {
        transform: translate(calc(-50% + var(--velocity-x)), calc(-50% + var(--velocity-y) + var(--gravity))) scale(0.2) rotate(360deg);
        opacity: 0;
    }
}

/* Explosive Confetti Container */
.explosive-confetti-container {
    pointer-events: none !important;
}

.explosive-confetti-piece {
    will-change: transform, opacity;
}