/* PREMIER CASINO WHEEL - ULTIMATE APP-LIKE CSS */
/* Mobile-First, Fullscreen, Smooth AF */

/* Reset and Base */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Prevent body scroll when wheel is open */
body.wheel-modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    touch-action: none !important;
}

/* Main Modal - ALWAYS FULLSCREEN */
#wheelModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport height for mobile */
    background: #000 !important;
    z-index: 999999 !important;
    display: none;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

#wheelModal.hidden {
    display: none !important;
}

/* Wheel Detail Container - Fullscreen */
#wheelDetail {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Ultimate Container - THE APP */
.ultimate-wheel-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force background images to cover full screen */
.ultimate-wheel-container[style*="background-image"] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* Video Background - FIXED */
.wheel-bg-video {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Background Pattern Overlay */
.wheel-bg-pattern {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Close Button - Minimal, Top Right */
.wheel-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 100 !important;
    transition: all 0.3s ease !important;
}

.wheel-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.1) !important;
}

.wheel-close i {
    color: #fff !important;
    font-size: 18px !important;
}

/* Header - Compact for Mobile */
.wheel-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 15px 20px !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 10 !important;
}

.wheel-balance, .wheel-timer {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 8px 16px !important;
    border-radius: 25px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.balance-label, .timer-label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.balance-amount, .timer-display {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.timer-display.warning {
    color: #ff6b35 !important;
    animation: pulse 1s ease-in-out infinite !important;
}

.sound-toggle {
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 18px !important;
    cursor: pointer !important;
    margin-left: 10px !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s !important;
}

.sound-toggle:hover {
    opacity: 1 !important;
}

/* Main Area - Fullscreen Layout */
.wheel-main-area {
    flex: 1 !important;
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding: 80px 20px 120px !important;
    overflow: hidden !important;
}

/* Wheel Section - Center Stage */
.wheel-section {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* Wheel Container */
.wheel-container {
    position: relative !important;
    width: 100% !important;
    max-width: 600px !important;
    aspect-ratio: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

/* Pointer - CLEAN VERSION */
.wheel-pointer-new {
    position: absolute !important;
    top: -40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 30 !important;
    pointer-events: none !important;
}

/* Pointer responsive sizing */
@media (max-width: 768px) {
    .wheel-pointer-new {
        top: -30px !important;
    }
    
    .wheel-pointer-new svg {
        width: 50px !important;
        height: 60px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .wheel-pointer-new {
        top: -35px !important;
    }
    
    .wheel-pointer-new svg {
        width: 60px !important;
        height: 72px !important;
    }
}

@media (min-width: 1025px) {
    .wheel-pointer-new svg {
        width: 80px !important;
        height: 96px !important;
    }
}

/* Fullscreen mode pointer adjustment */
.wheel-fullscreen-active .wheel-pointer-new {
    top: -25px !important;
}

/* Pointer bounce animation */
@keyframes pointerBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
}

/* Canvas Wrapper */
.wheel-canvas-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

#wheelCanvas, #particleCanvas {
    position: absolute !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
}

#particleCanvas {
    pointer-events: none !important;
    z-index: 15 !important;
}

/* Controls - Modern App Style */
.wheel-controls {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    align-items: center !important;
    z-index: 25 !important;
}

/* Spin Button - The Star */
.spin-button-new {
    background: linear-gradient(135deg, #ff6b35, #ff8c42) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 20px 60px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 
        0 10px 30px rgba(255, 107, 53, 0.4),
        inset 0 -3px 0 rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
}

.spin-button-new:before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
    transition: left 0.5s !important;
}

.spin-button-new:hover:before {
    left: 100% !important;
}

.spin-button-new:hover {
    transform: translateY(-2px) !important;
    box-shadow: 
        0 15px 40px rgba(255, 107, 53, 0.5),
        inset 0 -3px 0 rgba(0, 0, 0, 0.2) !important;
}

.spin-button-new:active {
    transform: translateY(0) !important;
    box-shadow: 
        0 5px 20px rgba(255, 107, 53, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}

.spin-button-new:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.spin-text {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

.spin-cost {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Turbo & Auto Buttons */
.turbo-toggle, .auto-spin-toggle {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.turbo-toggle:hover, .auto-spin-toggle:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.1) !important;
}

.turbo-toggle.active {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    border-color: #FFD700 !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5) !important;
}

.turbo-icon, .auto-icon {
    font-size: 24px !important;
    color: #fff !important;
}

.turbo-text, .auto-text {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-transform: uppercase !important;
}

.turbo-toggle.active .turbo-icon,
.turbo-toggle.active .turbo-text {
    color: #000 !important;
}

/* Right Side Panel - Hidden on Mobile, Slide-in on Desktop */
.wheel-right-side {
    position: absolute !important;
    right: -400px !important;
    top: 80px !important;
    bottom: 20px !important;
    width: 380px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 20px 0 0 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: right 0.3s ease !important;
    z-index: 5 !important;
}

/* Stats Toggle Button - Mobile/Tablet */
.stats-toggle {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 80px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 40px 0 0 40px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 6 !important;
}

.stats-toggle i {
    color: #fff !important;
    font-size: 20px !important;
}

/* Smooth Scrollbar */
.wheel-right-side::-webkit-scrollbar {
    width: 6px !important;
}

.wheel-right-side::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 3px !important;
}

.wheel-right-side::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 3px !important;
}

.wheel-right-side::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Stats Panel */
.stats-panel {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.panel-title {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.stat-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    text-align: center !important;
}

.stat-label {
    display: block !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
}

.stat-value {
    display: block !important;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

/* History Section */
.spin-history {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.history-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
}

.history-title {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

.history-stat {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.history-clear {
    background: rgba(255, 107, 53, 0.2) !important;
    border: none !important;
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.history-clear:hover {
    background: rgba(255, 107, 53, 0.4) !important;
}

.history-clear i {
    color: #ff6b35 !important;
    font-size: 14px !important;
}

.history-list {
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.history-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.3s ease !important;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.history-spin-num {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.history-prize {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 12px !important;
}

.history-prize-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    color: #fff !important;
}

.history-result {
    font-size: 14px !important;
    font-weight: 700 !important;
}

.history-result.win {
    color: #4CAF50 !important;
}

.history-result.lose {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Bulk Spin Section */
.bulk-spin-section {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.bulk-title {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
}

.bulk-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.bulk-option {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.bulk-option:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 107, 53, 0.5) !important;
    transform: translateY(-2px) !important;
}

.bulk-option.selected {
    background: rgba(255, 107, 53, 0.2) !important;
    border-color: #ff6b35 !important;
}

.bulk-amount {
    display: block !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
}

.bulk-price {
    display: block !important;
    color: #ff6b35 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* Auto Spin Indicator */
.auto-spin-indicator {
    position: absolute !important;
    bottom: 120px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 215, 0, 0.5) !important;
    border-radius: 50px !important;
    padding: 16px 32px !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    z-index: 30 !important;
}

.auto-spin-text {
    color: #FFD700 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    animation: pulse 1.5s ease-in-out infinite !important;
}

.auto-spin-count {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

.auto-spin-stop {
    background: rgba(255, 107, 53, 0.9) !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 8px 20px !important;
    color: #fff !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.auto-spin-stop:hover {
    background: #ff6b35 !important;
    transform: scale(1.05) !important;
}

/* Win/Lose Modals */
.win-modal, .lose-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.9) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000000 !important;
    animation: fadeIn 0.3s ease !important;
}

.win-content, .lose-content {
    text-align: center !important;
    position: relative !important;
    animation: scaleIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.win-glow {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 300px !important;
    height: 300px !important;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3), transparent) !important;
    filter: blur(50px) !important;
    animation: glow 2s ease-in-out infinite !important;
}

.win-title {
    font-size: 72px !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    letter-spacing: 4px !important;
}

.lose-title {
    font-size: 48px !important;
    font-weight: 900 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
}

.win-amount {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 16px !important;
}

.win-value {
    font-size: 64px !important;
    font-weight: 900 !important;
    color: #FFD700 !important;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.5) !important;
    margin-bottom: 20px !important;
}

.win-message, .lose-text {
    font-size: 18px !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.win-particles {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Win Streak Indicator */
.win-streak-indicator {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: linear-gradient(135deg, #ff6b35, #FFD700) !important;
    padding: 20px 40px !important;
    border-radius: 50px !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    box-shadow: 0 10px 40px rgba(255, 107, 53, 0.5) !important;
    animation: streakPulse 0.5s ease !important;
    z-index: 50 !important;
}

/* Help Modal */
.help-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    max-width: 400px !important;
    z-index: 1001 !important;
    animation: scaleIn 0.3s ease !important;
}

.help-modal h3 {
    color: #fff !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.help-modal div {
    margin-bottom: 12px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.help-modal strong {
    color: #ff6b35 !important;
    font-weight: 700 !important;
}

.help-modal button {
    background: #ff6b35 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    color: #fff !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    margin-top: 20px !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
}

.help-modal button:hover {
    background: #ff8c42 !important;
    transform: translateY(-2px) !important;
}

/* Complete Modal */
.auto-spin-complete-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid #FFD700 !important;
    border-radius: 20px !important;
    padding: 40px !important;
    text-align: center !important;
    z-index: 1001 !important;
    animation: scaleIn 0.5s ease !important;
}

.complete-icon {
    font-size: 64px !important;
    color: #FFD700 !important;
    margin-bottom: 20px !important;
}

.complete-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 10px !important;
}

.complete-text {
    font-size: 18px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 30px !important;
}

.complete-close {
    background: #FFD700 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 40px !important;
    color: #000 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.complete-close:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4) !important;
}

/* Fullscreen Mode Enhancement */
.wheel-fullscreen-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: #000 !important;
}

.wheel-fullscreen-active .wheel-section {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.wheel-fullscreen-active .wheel-container {
    width: calc(100vw - 30px) !important;
    height: calc(100vh - 150px) !important;
    max-width: calc(100vh - 150px) !important;
    max-height: calc(100vw - 30px) !important;
}

.wheel-fullscreen-active .wheel-controls {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
}

.wheel-fullscreen-active .wheel-header,
.wheel-fullscreen-active .wheel-right-side,
.wheel-fullscreen-active .stats-toggle,
.wheel-fullscreen-active .wheel-bg-pattern {
    display: none !important;
}

/* Turbo Mode Effects */
.turbo-mode-active .spin-button-new {
    animation: turboGlow 1s ease-in-out infinite !important;
}

.turbo-mode-active #wheelCanvas {
    filter: contrast(1.1) saturate(1.2) !important;
}

/* Balance Update Animation */
.balance-amount.updating {
    animation: balanceUpdate 0.5s ease !important;
    color: #FFD700 !important;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

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

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

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

@keyframes turboGlow {
    0%, 100% { box-shadow: 0 10px 30px rgba(255, 215, 0, 0.6); }
    50% { box-shadow: 0 15px 50px rgba(255, 215, 0, 0.8); }
}

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

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Mobile Specific - iPhone/Android */
@media (max-width: 768px) {
    .wheel-header {
        padding: 10px 15px !important;
    }
    
    .wheel-balance, .wheel-timer {
        padding: 6px 12px !important;
    }
    
    .balance-label, .timer-label {
        display: none !important;
    }
    
    .wheel-main-area {
        padding: 60px 10px 100px !important;
    }
    
    .wheel-controls {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        background: rgba(0, 0, 0, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        padding: 15px !important;
        padding-bottom: max(15px, env(safe-area-inset-bottom)) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3) !important;
    }
    
    .wheel-container {
        max-width: 90vw !important;
        height: 60vh !important;
    }
    
    .spin-button-new {
        padding: 16px 40px !important;
    }
    
    .spin-text {
        font-size: 20px !important;
    }
    
    .spin-cost {
        font-size: 14px !important;
    }
    
    .turbo-toggle, .auto-spin-toggle {
        width: 50px !important;
        height: 50px !important;
    }
    
    .turbo-icon, .auto-icon {
        font-size: 20px !important;
    }
    
    .wheel-right-side {
        display: none !important;
    }
    
    .stats-toggle {
        display: flex !important;
    }
    
    .wheel-right-side.mobile-open {
        display: block !important;
        right: 0 !important;
        width: 100% !important;
        height: 50vh !important;
        top: auto !important;
        bottom: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        animation: slideUp 0.3s ease !important;
    }
}










/* Tablet Specific */
@media (min-width: 769px) and (max-width: 1024px) {
    .wheel-main-area {
        padding: 80px 40px 40px !important;
    }
    
    .stats-toggle {
        display: flex !important;
    }
    
    .wheel-right-side.tablet-open {
        right: 0 !important;
    }
}

/* Desktop Specific */
@media (min-width: 1025px) {
    .wheel-right-side {
        right: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    .wheel-main-area {
        padding-right: 420px !important;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .wheel-header {
        padding: 5px 15px !important;
    }
    
    .wheel-main-area {
        padding: 50px 10px 10px !important;
    }
    
    .wheel-controls {
        bottom: 10px !important;
    }
    
    .spin-button-new {
        padding: 12px 30px !important;
    }
    
    .spin-text {
        font-size: 18px !important;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .wheel-close,
    .turbo-toggle,
    .auto-spin-toggle,
    .history-clear,
    .stats-toggle {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
}

/* Performance Optimizations */
.wheel-canvas-wrapper,
#wheelCanvas,
#particleCanvas {
    will-change: transform !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* Smooth Transitions */
* {
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* iOS Safe Areas */
@supports (padding: max(0px)) {
    .wheel-header {
        padding-top: max(15px, env(safe-area-inset-top)) !important;
    }
    
    .wheel-controls {
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    }
}

/* Extra Mobile Touch Support */
@media (hover: none) and (pointer: coarse) {
    .spin-button-new:active {
        transform: scale(0.95) !important;
    }
    
    .turbo-toggle:active,
    .auto-spin-toggle:active {
        transform: scale(0.9) !important;
    }
}

/* ULTIMATE SMOOTH AF */
body, html {
    overscroll-behavior: none !important;
}

.ultimate-wheel-container * {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}
/* THE END - PERFECTION ACHIEVED */



/* ?? PREMIER CASINO VAULT BORDER - ULTIMATE PERFECT VERSION ?? */
/* ADD THIS AT THE END OF YOUR CSS FILE */

/* Main vault container */
.wheel-container {
    position: relative !important;
    width: 100% !important;
    max-width: 600px !important;
    aspect-ratio: 1 !important; /* FORCE PERFECT CIRCLE */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3)) !important;
}

/* OUTER BORDER RING - STICKS TO WHEEL */
.wheel-container::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% + 30px) !important;
    height: calc(100% + 30px) !important;
    background: #1a1a1a !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: -2 !important;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(0, 0, 0, 0.3) !important;
}

/* INNER BORDER - PERFECT CIRCLE */
.wheel-container::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% + 10px) !important;
    height: calc(100% + 10px) !important;
    border: 2px solid #333 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* CANVAS WRAPPER - KEEPS EVERYTHING ROUND */
.wheel-canvas-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    overflow: visible !important;
    z-index: 1 !important;
}

/* ROTATING TEXT - PERFECT CIRCLE PATH */
.wheel-canvas-wrapper::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: calc(100% + 5px) !important;
    height: calc(100% + 5px) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 25 !important;
    animation: textRotate 40s linear infinite !important;
}

/* LOGO IMAGES - PERFECT POSITIONING */
.wheel-canvas-wrapper::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: calc(100% + 15px) !important;
    height: calc(100% + 15px) !important;
    transform: translate(-50%, -50%) !important;
    background-image: 
        url('https://premierwincompetitions.co.uk/images/logo.png'),
        url('https://premierwincompetitions.co.uk/images/logo.png'),
        url('https://premierwincompetitions.co.uk/images/logo.png'),
        url('https://premierwincompetitions.co.uk/images/logo.png') !important;
    background-repeat: no-repeat !important;
    background-position: 
        center top,
        right center,
        center bottom,
        left center !important;
    background-size: 30px 30px !important;
    pointer-events: none !important;
    z-index: 26 !important;
    animation: logoRotate 40s linear infinite reverse !important;
}

/* POINTER - STUCK TO BORDER */
.wheel-pointer-new {
    position: absolute !important;
    top: -15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 30 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5)) !important;
}

/* ?? MOBILE PERFECT (320px - 767px) ?? */
@media (max-width: 767px) {
    /* Force square wheel on mobile */
    .wheel-container {
        width: 85vw !important;
        height: 85vw !important;
        max-width: calc(100vh - 200px) !important;
        max-height: calc(100vh - 200px) !important;
    }
    
    /* Thinner borders */
    .wheel-container::before {
        width: calc(100% + 20px) !important;
        height: calc(100% + 20px) !important;
    }
    
    .wheel-container::after {
        width: calc(100% + 8px) !important;
        height: calc(100% + 8px) !important;
        border-width: 1px !important;
    }
    
    /* Mobile text - closer to wheel */
    .wheel-canvas-wrapper::before {
        width: calc(100% + 2px) !important;
        height: calc(100% + 2px) !important;
    }
    
    /* Smaller logos */
    .wheel-canvas-wrapper::after {
        width: calc(100% + 10px) !important;
        height: calc(100% + 10px) !important;
        background-size: 20px 20px !important;
    }
    
    /* Pointer closer */
    .wheel-pointer-new {
        top: -8px !important;
    }
    
    .wheel-pointer-new svg {
        width: 40px !important;
        height: 48px !important;
    }
}

/* Extra small phones */
@media (max-width: 374px) {
    .wheel-container {
        width: 90vw !important;
        height: 90vw !important;
    }
    
    .wheel-pointer-new {
        top: -5px !important;
    }
    
    .wheel-canvas-wrapper::after {
        background-size: 15px 15px !important;
    }
}

/* ?? TABLETS (768px - 1023px) ?? */
@media (min-width: 768px) and (max-width: 1023px) {
    .wheel-container {
        max-width: 500px !important;
    }
    
    .wheel-pointer-new {
        top: -12px !important;
    }
    
    .wheel-pointer-new svg {
        width: 60px !important;
        height: 72px !important;
    }
    
    .wheel-canvas-wrapper::after {
        background-size: 25px 25px !important;
    }
}

/* ?? DESKTOP (1024px+) ?? */
@media (min-width: 1024px) {
    .wheel-pointer-new svg {
        width: 80px !important;
        height: 96px !important;
    }
}

/* ?? FULLSCREEN MODE ?? */
.wheel-fullscreen-active .wheel-container {
    width: min(90vw, 90vh - 100px) !important;
    height: min(90vw, 90vh - 100px) !important;
    max-width: 800px !important;
    max-height: 800px !important;
}

.wheel-fullscreen-active .wheel-pointer-new {
    top: -20px !important;
}

/* Mobile fullscreen */
@media (max-width: 767px) {
    .wheel-fullscreen-active .wheel-pointer-new {
        top: -15px !important;
    }
    
    .wheel-fullscreen-active .wheel-container {
        width: min(95vw, 95vh - 100px) !important;
        height: min(95vw, 95vh - 100px) !important;
    }
}

/* LANDSCAPE MODE */
@media (orientation: landscape) and (max-height: 500px) {
    .wheel-container {
        width: 70vh !important;
        height: 70vh !important;
    }
    
    .wheel-pointer-new {
        top: -10px !important;
    }
}

/* CANVAS ELEMENTS - SHARP QUALITY */
#wheelCanvas, #particleCanvas {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
}

/* STATS TOGGLE */
@media (max-width: 1365px) {
    .stats-toggle {
        display: flex !important;
    }
    
    .wheel-right-side {
        display: none !important;
    }
    
    .wheel-right-side.mobile-open,
    .wheel-right-side.tablet-open {
        display: block !important;
        right: 0 !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 380px !important;
        max-width: 90vw !important;
        z-index: 100 !important;
        animation: slideIn 0.3s ease !important;
    }
}

@media (min-width: 1366px) {
    .wheel-right-side {
        right: 0 !important;
        display: block !important;
    }
    
    .wheel-main-area {
        padding-right: 420px !important;
    }
}

/* ANIMATIONS - SMOOTH */
@keyframes textRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

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

@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* NO YELLOW GLOWS */
#wheelCanvas {
    box-shadow: 0 0 10px rgba(0,0,0,0.2) !important;
}

/* TURBO MODE */
.turbo-mode-active .wheel-canvas-wrapper::before {
    animation: textRotate 15s linear infinite !important;
}

.turbo-mode-active .wheel-canvas-wrapper::after {
    animation: logoRotate 15s linear infinite reverse !important;
}

/* Z-INDEX ORDER */
.wheel-canvas-wrapper { z-index: 1 !important; }
#wheelCanvas { z-index: 5 !important; }
#particleCanvas { z-index: 15 !important; }
.wheel-container { overflow: visible !important; }

/* HIGH PERFORMANCE */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; }
}