/* Global Styles - Mobile Only */
:root {
    --primary-color: #ffffff;
    --secondary-color: #cccccc;
    --accent-color: #ffffff;
    --background-color: #000000;
    --card-bg: rgba(30, 30, 30, 0.7);
    --text-color: #ffffff;
    --grid-bg-color: #000000;
    --button-hover: #333333;
    --win-color: #ffffff;
    --border-radius: 12px;
    --wave-color-1: rgba(255, 255, 255, 0.03);
    --wave-color-2: rgba(255, 255, 255, 0.02);
    --wave-color-3: rgba(255, 255, 255, 0.01);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mobile Touch Optimizations */
html {
    -webkit-text-size-adjust: 100%;
    touch-action: none; /* Prevent all touch scrolling */
    overflow: hidden; /* Prevent scrolling on html */
    position: fixed; /* Lock html in place */
    width: 100%;
    height: 100%;
    overscroll-behavior: none; /* Prevent overscroll bounce */
}

/* Remove tap highlight on mobile */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Allow touch actions on interactive elements */
button, input, .spin-btn, .bet-btn, .preset-bet-btn, .stat-card, .log-entries {
    touch-action: manipulation; /* Allow button taps but prevent scrolling */
}

/* Prevent scrolling on main app container */
#app, .screen, #game-screen {
    overflow: hidden;
    touch-action: none;
    position: relative;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    /* JavaScript calculated viewport height - most reliable for iOS */
    min-height: calc(var(--vh, 1vh) * 100);
    height: calc(var(--vh, 1vh) * 100);
    /* Dynamic viewport height fallback for modern browsers */
    min-height: 100dvh;
    height: 100dvh;
    /* Standard fallback for older browsers */
    min-height: 100vh;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    padding: 0;
    position: fixed; /* Lock body in place */
    width: 100%;
    overscroll-behavior: none; /* Prevent overscroll bounce */
    touch-action: none; /* Prevent touch scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for webkit */
}

/* JavaScript viewport support (most reliable) */
body:has([data-viewport-fix]) {
    min-height: calc(var(--vh, 1vh) * 100);
    height: calc(var(--vh, 1vh) * 100);
}

/* iOS Safari specific adjustments */
.ios-safari body {
    min-height: calc(var(--vh, 1vh) * 100);
    height: calc(var(--vh, 1vh) * 100);
}

/* Orientation Warning */
.orientation-warning {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    color: #fff;
    font-size: 1.2em;
}

@media screen and (orientation: landscape) {
    .orientation-warning {
        display: flex;
    }
}

/* Screen Management */
.screen {
    display: none;
}

.screen:not(.hidden) {
    display: flex;
}

/* Auth Screen */
#auth-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    background: var(--background-color);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Waves Animation */
.waves-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.wave {
    position: absolute;
    width: 200%;
    height: 200%;
    background-color: var(--wave-color-1);
    border-radius: 40%;
    transform-origin: 50% 48%;
    animation: wave 25s infinite linear;
}

.wave:nth-child(2) {
    background-color: var(--wave-color-2);
    animation: wave 30s infinite linear;
}

.wave:nth-child(3) {
    background-color: var(--wave-color-3);
    animation: wave 35s infinite linear;
}

@keyframes wave {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* iOS Safari specific fixes for auth screen */
.ios-safari #auth-screen {
    height: 100%;
    height: -webkit-fill-available;
    height: stretch;
}

/* Keyboard open state adjustments */
.ios-safari.keyboard-open #auth-screen {
    position: fixed;
    height: 100%;
    min-height: stretch;
    justify-content: flex-start;
    padding-top: 10px;
}

.auth-container {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    padding: 40px 30px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    text-align: center;
    position: relative;
    z-index: 1000;
    margin: auto;
}

/* iOS Safari keyboard adjustments */
.ios-safari.keyboard-open .auth-container {
    padding: 20px;
    margin: 0 auto;
    position: relative;
    top: 0;
    transform: none;
}

@supports (-webkit-touch-callout: none) {
    .auth-container {
        margin: auto;
        transform: translateY(0);
        transition: transform 0.3s ease;
    }
    
    .keyboard-open .auth-container {
        transform: translateY(0);
    }
}

@media screen and (max-height: 600px) {
    .auth-container {
        padding: 20px;
    }
    
    .logo-container {
        margin-bottom: 20px;
    }
    
    .logo-icon {
        font-size: 36px;
    }
    
    .logo-container h1 {
        font-size: 28px;
    }
}

/* Logo Container */
.logo-container {
    margin-bottom: 30px;
    position: relative;
}

.logo-container::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--secondary-color), transparent);
}

.logo-icon {
    font-size: 48px;
    color: var(--accent-color);
    margin-bottom: 10px;
    opacity: 0.9;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    animation: float 3s ease-in-out infinite;
}

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

.logo-container h1 {
    font-family: 'Pirata One', cursive;
    font-size: 36px;
    color: var(--text-color);
    margin: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.logo-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    gap: 15px;
    opacity: 0.7;
}

.decoration-icon {
    color: var(--secondary-color);
    font-size: 16px;
}

.decoration-line {
    height: 1px;
    width: 30px;
    background: var(--secondary-color);
}

/* iOS Safari keyboard adjustments */
.ios-safari.keyboard-open .auth-container {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
    margin: 0 auto;
    transition: all 0.3s ease;
    transform: translateY(-10px);
}

.auth-tabs {
    display: flex;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    padding: 5px;
    gap: 5px;
}

.tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 12px;
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: calc(var(--border-radius) - 5px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    opacity: 0.7;
}

.tab-btn i {
    font-size: 14px;
}

.tab-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
    opacity: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.input-group {
    position: relative;
    margin-bottom: 15px;
}

.input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary-color);
    font-size: 14px;
    opacity: 0.7;
}

.auth-form input {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    padding: 15px 15px 15px 45px;
    color: var(--text-color);
    font-size: 16px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    transform: translateZ(0);
    letter-spacing: 0.5px;
}

/* iOS Safari input focus fix */
.ios-safari .auth-form input:focus {
    font-size: 16px;
    outline: none;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 1002;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* iOS Safari input touch optimization */
.ios-safari .auth-form input {
    -webkit-user-select: text;
    user-select: text;
    will-change: transform;
}

.auth-form button {
    width: 100%;
    background: var(--primary-color);
    color: var(--background-color);
    border: none;
    border-radius: var(--border-radius);
    padding: 15px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.auth-form button i {
    font-size: 16px;
}

.auth-form button:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.auth-footer {
    margin-top: 30px;
    color: var(--text-color);
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    letter-spacing: 1px;
}

.auth-footer i {
    color: var(--accent-color);
    font-size: 14px;
    opacity: 0.7;
}

/* iOS Safari specific media query for very small viewport */
@media screen and (max-height: 500px) {
    .ios-safari .auth-container {
        padding: 15px;
    }
    
    .logo-container {
        margin-bottom: 15px;
    }
    
    .logo-icon {
        font-size: 36px;
    }
    
    .logo-container h1 {
        font-size: 28px;
    }
    
    .auth-tabs {
        margin-bottom: 20px;
    }
    
    .auth-form button {
        margin-top: 15px;
    }
    
    .auth-footer {
        margin-top: 15px;
    }
}

.hidden {
    display: none !important;
}

/* Game Screen */
#game-screen {
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}

/* Test Panel - Hidden on Mobile */
.test-panel {
    display: none;
}

.test-btn {
    background: var(--accent-color);
    border: none;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.test-btn:hover {
    transform: scale(1.1);
    background: #FFB800;
}

/* Header Buttons */
.header-btn {
    background: var(--card-bg);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-btn:hover {
    transform: scale(1.1);
    background: var(--primary-color);
}



/* Game Container - Removed duplicate */

/* Controls */
.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    gap: 20px;
}

.spin-btn, .stop-auto-spin {
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 15px;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.spin-btn:hover, .stop-auto-spin:hover {
    background: #FFB800;
    transform: translateY(-2px);
}

.bet-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.bet-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bet-btn:hover {
    background: var(--card-bg);
    transform: scale(1.1);
}

.bet-amount {
    font-size: 24px;
    font-weight: bold;
    color: var(--accent-color);
    min-width: 80px;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* User Profile */
.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 45px;
    height: 45px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.username {
    font-weight: 600;
    font-size: 14px;
}

.user-level {
    font-size: 12px;
    color: var(--accent-color);
}

/* Leaderboard - Hidden on Mobile */
.leaderboard {
    display: none;
}

.leaderboard h2 {
    margin: 0 0 15px 0;
    text-align: center;
    color: var(--accent-color);
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leaderboard-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* Win Display */
.win-display {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--accent-color);
    color: white;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Grid Container */
.grid-container {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 375px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
    background: var(--card-bg);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
    aspect-ratio: 6/5;
}

.symbol {
    aspect-ratio: 1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

/* Multiplier Container */
.multiplier-container {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--accent-color);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.multiplier-value {
    font-size: 20px;
}

/* Win Lines */
.win-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

/* Auth Screen - Mobile Optimized */
/* Remove duplicate auth-screen definition - already defined above */

/* iOS Safari specific media query for very small viewport (keyboard open) */
@media screen and (max-height: 500px) {
    .ios-safari #auth-screen {
        min-height: 100vh;
        height: 100vh;
        padding: 5px;
    }
    
    .ios-safari .auth-container {
        max-width: 350px;
        padding: 15px;
        margin: 0 auto;
        max-height: 90vh;
    }
    
    .ios-safari .auth-form input {
        padding: 12px;
        margin-bottom: 10px;
    }
    
    .ios-safari .auth-form button {
        padding: 12px;
    }
}

/* Game Screen - Mobile Only */
#game-screen {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
    background: #000;
    height: 100vh;
    overflow: hidden;
}

/* Game Header - Mobile Optimized */
.game-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 6px;
    background: #000;
    backdrop-filter: blur(10px);
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}

.header-left {
    width: 100%;
}

.header-center {
    flex: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    display: flex;
}

.user-profile {
    display: none;
}

.avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), #ff9500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    box-shadow: 0 4px 15px rgba(255, 64, 129, 0.3);
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.username {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.5px;
}

.total-balance {
    font-size: 1.1em;
    color: #4CAF50;
    font-weight: 600;
    font-family: 'SF Mono', 'Roboto Mono', monospace;
}

.user-level {
    font-size: 0.8em;
    color: #ffd700;
    font-weight: 500;
}

/* Game Stats - Mobile Layout */
.game-stats {
    width: 100%;
    padding: 6px 6px 0 6px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
    box-sizing: border-box;
}

.stat-card {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 10px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 90px;
    flex: 1;
    max-width: 120px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin: 0;
    height: 68px;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-icon {
    font-size: 1em;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    backdrop-filter: blur(10px);
}

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-label {
    font-size: 0.55em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.stat-value {
    font-size: 1em;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left center;
    transition: transform 0.2s ease;
    max-width: 100%;
}

/* Auto-scale for large numbers */
.stat-value.large-number {
    transform: scale(0.85);
}

.stat-value.extra-large-number {
    transform: scale(0.7);
}

/* Stat Card Colors */
.balance-card {
    border-left: 3px solid #4CAF50;
}

.balance-card .stat-value {
    color: #4CAF50;
}

.bet-card {
    border-left: 3px solid #2196F3;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bet-card:hover {
    transform: scale(1.02);
    background: rgba(33, 150, 243, 0.1);
    border-color: rgba(33, 150, 243, 0.8);
    box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3);
}

.bet-card .stat-value {
    color: #2196F3;
}

.session-card {
    border-left: 3px solid #FF9800;
}

.session-card .stat-value.positive {
    color: #4CAF50;
}

.session-card .stat-value.negative {
    color: #f44336;
}

/* Free Spins Card - Mobile Optimized */
.freespins-card {
    border-left: 3px solid #ffd700;
    animation: freeSpinGlow 2s ease-in-out infinite alternate;
}

.freespins-card .stat-value {
    color: #ffd700;
}

.freespins-wide {
    width: calc(98vw - 16px);
    min-width: unset;
    max-width: calc(98vw - 16px);
    margin: 4px 8px;
    padding: 10px 16px;
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column;
    gap: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.freespins-text {
    font-size: 0.8em;
    font-weight: 700;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.freespins-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 215, 0, 0.2);
    border-radius: 0 0 15px 15px;
    overflow: hidden;
}

.freespins-progress-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ffd700, #ffed4e, #ffd700);
    border-radius: 0 0 15px 15px;
    transition: width 0.5s ease-out;
    animation: progressPulse 2s ease-in-out infinite alternate;
    position: relative;
}

.freespins-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
    animation: progressShine 3s ease-in-out infinite;
}

/* Free spins card sadece spins varken görünecek */

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

@keyframes progressPulse {
    0% {
        opacity: 0.7;
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
    }
    100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    }
}

@keyframes freeSpinGlow {
    0% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    }
    100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    }
}

/* Header Right - Hide on mobile */
.header-right {
    display: none !important;
}

/* Test Panel - Hidden on Mobile */
.test-panel {
    display: none !important;
}

/* Game Container - Mobile Optimized */
.game-container {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* JavaScript calculated viewport height - most reliable for iOS */
    height: calc((var(--vh, 1vh) * 100) - 280px);
    /* Modern dynamic viewport height fallback */
    height: calc(100dvh - 280px);
    /* Standard fallback for older browsers */
    height: calc(100vh - 280px);
    overflow: hidden; /* Keep content within bounds */
    justify-content: flex-start;
    position: relative; /* For absolute positioned spin button */
}

/* iOS Safari specific container adjustments */
.ios-safari .game-container {
    height: calc((var(--vh, 1vh) * 100) - 280px);
}

/* When game log is hidden, optimize spacing */
@media screen and (max-height: 650px) {
    .game-container {
        gap: 8px;
        justify-content: center;
    }
    
    .grid-container {
        margin: 8px auto;
    }
    
        .controls {
        padding: 12px 16px 24px 16px;
        gap: 12px;
    }
}

/* Very narrow screens - switch to vertical layout */
@media screen and (max-width: 320px) {
    .controls {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 16px 16px 64px 16px;
    }
    
    .controls .bet-controls {
        position: static;
        transform: none;
    }
    
    .controls .spin-section {
        position: static;
        transform: none;
    }
}

/* Real mobile device adjustments */
@media screen and (max-width: 480px) and (max-height: 900px) {
    .game-log {
        padding-bottom: 140px; /* Reasonable for real mobile devices */
        margin-bottom: 0; /* Container must reach screen bottom */
    }
}

/* iOS specific real device handling */
@supports (-webkit-touch-callout: none) {
    .game-log {
        padding-bottom: 160px; /* More space for iOS devices */
        margin-bottom: 0; /* Container must reach screen bottom */
    }
}

/* Remove absolute positioning - causes layout issues */

/* Balanced mobile bottom spacing */
@media screen and (max-width: 600px) {
    .game-log {
        min-height: 150px; /* Ensure visible content */
        margin-bottom: 0; /* Container must reach screen bottom */
        padding-bottom: 130px; /* Space for spin button */
    }
    
    /* Make sure container has proper height */
    .game-container {
        padding-bottom: 0; /* No container padding - let game-log reach bottom */
    }
}

@media screen and (max-height: 650px) {
    /* Force compact mode on small screens with freespins */
    .controls.freespins-compact {
        padding: 8px 16px 20px 16px;
        gap: 8px;
    }
    
    .controls.freespins-compact .spin-btn {
        width: 80px;
        height: 80px;
        font-size: 1.1em;
    }
    
    .controls.freespins-compact .spin-btn-wrapper {
        width: 80px;
        height: 80px;
    }
    
    .controls.freespins-compact .bet-controls {
        transform: translateY(-50%); /* Removed scale as it's already compact */
        padding: 6px 4px;
    }
    
    .controls.freespins-compact .bet-btn {
        width: 26px;
        height: 26px;
        font-size: 0.8em;
    }
}

/* iPhone specific media query removed - no longer needed with new layout */

.grid-container {
    position: relative;
    flex: 0 0 auto; /* Don't grow, fixed size */
    display: flex;
    justify-content: center;
    align-items: center;
   
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 6px;
    margin-top: 0px;
    overflow: hidden;
    padding: 6px 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 4px;
    align-content: center;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 12px;
    width: calc(100vw - 24px);
    height: calc(100vw - 24px);
    max-width: 500px;
    max-height: 500px;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
}

.cell {
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2em;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 50px;
}

.cell:hover {
    background: transparent;
}

.spinning .cell {
    animation: spinSymbol 0.8s ease-in-out;
}

.cell.highlight {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    animation: winPulse 0.6s ease-in-out infinite alternate;
}

/* Multiplier-based cell highlighting effects */
.cell.highlight-small {
    background: linear-gradient(135deg, #4CAF50, #46a049);
    border-color: #4CAF50;
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.5);
    animation: winPulse 0.4s ease-in-out infinite alternate;
}

.cell.highlight-good {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    border-color: #2196F3;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.6);
    animation: winPulse 0.5s ease-in-out infinite alternate;
}

.cell.highlight-big {
    background: linear-gradient(135deg, #FFC107, #FF8F00);
    border-color: #FFC107;
    box-shadow: 0 0 18px rgba(255, 193, 7, 0.7);
    animation: winPulse 0.6s ease-in-out infinite alternate;
}

.cell.highlight-great {
    background: linear-gradient(135deg, #FF9800, #EF6C00);
    border-color: #FF9800;
    box-shadow: 0 0 20px rgba(255, 152, 0, 0.8);
    animation: greatPulse 0.7s ease-in-out infinite alternate;
}

.cell.highlight-huge {
    background: linear-gradient(135deg, #FF5722, #D84315);
    border-color: #FF5722;
    box-shadow: 0 0 25px rgba(255, 87, 34, 0.9);
    animation: hugePulse 0.8s ease-in-out infinite alternate;
}

.cell.highlight-super {
    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
    border-color: #9C27B0;
    box-shadow: 0 0 30px rgba(156, 39, 176, 1);
    animation: superPulse 0.9s ease-in-out infinite alternate;
}

.cell.highlight-mega {
    background: linear-gradient(135deg, #E91E63, #C2185B);
    border-color: #E91E63;
    box-shadow: 0 0 35px rgba(233, 30, 99, 1);
    animation: megaPulse 1s ease-in-out infinite alternate;
}

.cell.highlight-epic {
    background: linear-gradient(135deg, #673AB7, #512DA8);
    border-color: #673AB7;
    box-shadow: 0 0 40px rgba(103, 58, 183, 1);
    animation: epicPulse 1.1s ease-in-out infinite alternate;
}

.cell.highlight-legend {
    background: linear-gradient(135deg, #FFD700, #FFC107);
    border-color: #FFD700;
    box-shadow: 0 0 50px rgba(255, 215, 0, 1);
    animation: legendPulse 1.2s ease-in-out infinite alternate;
    position: relative;
}

.cell.highlight-legend::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    border-radius: inherit;
    animation: legendSpin 1.5s linear infinite;
    z-index: -1;
}

.cell.highlight-scatter {
    background: linear-gradient(135deg, #FFFFFF, #F5F5F5);
    border-color: #FFD700;
    box-shadow: 0 0 60px rgba(255, 215, 0, 1);
    animation: scatterPulse 1.3s ease-in-out infinite alternate;
    position: relative;
    color: #1a1a1a;
}

.cell.highlight-scatter::before {
    content: '✨';
    position: absolute;
    top: -15px;
    left: -15px;
    font-size: 1.5em;
    animation: scatterOrbit 2s linear infinite;
    z-index: 1;
}

.cell.highlight-scatter::after {
    content: '✨';
    position: absolute;
    bottom: -15px;
    right: -15px;
    font-size: 1.2em;
    animation: scatterOrbit 1.5s linear infinite reverse;
    z-index: 1;
}

.symbol {
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    user-select: none;
    transition: all 0.3s ease;
}

.symbol.highlighted {
    transform: scale(1.2);
}

.symbol.removing {
    animation: remove 0.5s ease-out forwards;
}

.symbol.dropping {
    animation: drop 0.8s ease-in forwards;
}

/* Game Log - Recent Spins - Dynamic Height */
.game-log {
    margin-left: 12px;
    margin-right: 12px;
    margin-top: 0;
    margin-bottom: 0; /* Container goes to screen bottom */
    background: rgba(0, 0, 0, 0.8);
   /*  border: 1px solid rgba(255, 255, 255, 0.2); */
    border-radius: 16px;
    padding: 12px; /* Similar to grid padding */
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    flex-grow: 1; /* Grow to fill all remaining space */
    min-height: 100px; /* Minimum height for visibility */
    touch-action: pan-y; /* Allow vertical scrolling within log only */
    overscroll-behavior: contain; /* Prevent scroll from propagating to parent */
    /* Only padding-bottom for spin button, no margin-bottom */
    padding-bottom: 16; /* Space for spin button inside container */
}

/* Game log is now always visible as full screen background */

.log-header {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.log-entries {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.log-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.85em;
    transition: all 0.2s ease;
}

.log-entry:hover {
    background: rgba(255, 255, 255, 0.1);
}

.log-bet {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.log-result {
    font-weight: bold;
    font-family: 'SF Mono', 'Roboto Mono', monospace;
}

.log-result.win {
    color: #4CAF50;
    text-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
}

.log-result.loss {
    color: #f44336;
    text-shadow: 0 0 8px rgba(244, 67, 54, 0.4);
}

.log-result.big-win {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    animation: logGlow 2s ease-in-out infinite alternate;
}

@keyframes logGlow {
    0% { text-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }
    100% { text-shadow: 0 0 12px rgba(255, 215, 0, 0.8); }
}

/* Scrollbar styling for game log */
.game-log::-webkit-scrollbar {
    width: 4px;
}

.game-log::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.game-log::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.game-log::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Floating Spin Button */
.controls {
    position: fixed;
    bottom: 22px; /* Fixed distance from bottom - approximately 10% on most phones */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: transparent;
    transition: all 0.3s ease;
    pointer-events: none; /* Allow clicks through container */
}

/* Spin section centered */
.controls .spin-section {
    position: static;
    transform: none;
    pointer-events: all; /* Enable clicks on spin button */
}

/* Compact controls when freespins are active */
.controls.freespins-compact {
    gap: 12px;
    padding: 12px 16px 24px 16px;
}

.controls.freespins-compact .spin-btn {
    width: 85px; /* Slightly smaller than normal */
    height: 85px; /* Slightly smaller than normal */
    font-size: 1.1em; /* Slightly smaller text */
    box-shadow: 
        0 5px 10px rgba(0, 0, 0, 0.4),
        inset 0 1px 3px rgba(255, 255, 255, 0.1),
        inset 0 -1px 3px rgba(0, 0, 0, 0.3),
        0 0 0 2px rgba(255, 255, 255, 0.2);
}

.controls.freespins-compact .spin-btn-wrapper {
    width: 85px; /* Match spin button */
    height: 85px; /* Match spin button */
}

.controls.freespins-compact .spin-section {
    gap: 8px;
}

.controls.freespins-compact .auto-instruction {
    display: none; /* Also hide in compact mode */
}

.controls.freespins-compact .bet-controls {
    gap: 6px;
    padding: 8px 6px;
    opacity: 0.5; /* Increased from 0.3 for better visibility */
    pointer-events: none;
    transform: translateY(-50%); /* Removed scale as it's already compact */
    transition: all 0.3s ease;
}

.controls.freespins-compact .bet-btn {
    width: 30px;
    height: 30px;
    font-size: 0.9em;
}

.controls.freespins-compact .bet-amount {
    font-size: 0.9em;
    padding: 4px 8px;
    min-width: 40px;
}

.spin-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.spin-btn {
    width: 100px; /* Reduced from 120px */
    height: 100px; /* Reduced from 120px */
    border: none;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff6b35, #ff4757);
    color: var(--text-color);
    font-size: 1.2em; /* Reduced from 1.4em */
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 8px 20px rgba(255, 107, 53, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        0 0 0 3px rgba(255, 215, 0, 0.8),
        0 0 25px rgba(255, 107, 53, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    backdrop-filter: blur(10px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.spin-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
}

.spin-btn:hover {
    transform: translateY(-2px) scale(1.02);
    background: linear-gradient(145deg, #ff8a65, #ff5722);
    box-shadow: 
        0 12px 30px rgba(255, 107, 53, 0.8),
        inset 0 3px 6px rgba(255, 255, 255, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.4),
        0 0 0 4px rgba(255, 215, 0, 1),
        0 0 35px rgba(255, 107, 53, 0.6);
}

.spin-btn:hover::before {
    width: 100%;
    height: 100%;
}

.spin-btn:active {
    transform: translateY(2px) scale(0.98);
    background: linear-gradient(145deg, #ff4757, #ff6b35);
    box-shadow: 
        0 4px 12px rgba(255, 107, 53, 0.4),
        inset 0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 -1px 2px rgba(255, 255, 255, 0.15),
        0 0 0 3px rgba(255, 215, 0, 0.9);
    transition: all 0.1s ease;
}

.spin-btn.spinning {
    animation: dragonPulse 2s infinite ease-in-out;
    background: linear-gradient(145deg, #ff6b35, #ff4757);
    box-shadow: 
        0 8px 20px rgba(255, 107, 53, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        0 0 0 3px rgba(255, 215, 0, 0.8),
        0 0 25px rgba(255, 107, 53, 0.4);
    position: relative;
    overflow: visible;
}

.spin-btn.spinning::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 107, 53, 0.9) 20deg,
        rgba(255, 215, 0, 1) 40deg,
        rgba(255, 69, 0, 0.8) 50deg,
        transparent 70deg,
        rgba(255, 140, 0, 0.9) 90deg,
        rgba(255, 215, 0, 1) 110deg,
        transparent 130deg,
        rgba(255, 107, 53, 0.9) 160deg,
        rgba(255, 69, 0, 0.8) 180deg,
        transparent 200deg,
        rgba(255, 215, 0, 1) 220deg,
        rgba(255, 107, 53, 0.9) 240deg,
        transparent 260deg,
        rgba(255, 140, 0, 0.9) 280deg,
        rgba(255, 69, 0, 0.8) 300deg,
        rgba(255, 215, 0, 1) 320deg,
        transparent 340deg,
        rgba(255, 107, 53, 0.9) 350deg,
        transparent 360deg
    );
    border-radius: 50%;
    animation: dragonFire 2s linear infinite;
    z-index: -1;
}

.spin-btn.spinning::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: conic-gradient(
        from 180deg,
        transparent 0deg,
        rgba(255, 140, 0, 0.7) 30deg,
        rgba(255, 215, 0, 0.8) 45deg,
        transparent 60deg,
        rgba(255, 69, 0, 0.6) 90deg,
        rgba(255, 107, 53, 0.7) 105deg,
        transparent 120deg,
        rgba(255, 215, 0, 0.8) 150deg,
        rgba(255, 140, 0, 0.7) 165deg,
        transparent 180deg,
        rgba(255, 69, 0, 0.6) 210deg,
        rgba(255, 215, 0, 0.8) 225deg,
        transparent 240deg,
        rgba(255, 107, 53, 0.7) 270deg,
        rgba(255, 140, 0, 0.7) 285deg,
        transparent 300deg,
        rgba(255, 215, 0, 0.8) 330deg,
        rgba(255, 69, 0, 0.6) 345deg,
        transparent 360deg
    );
    border-radius: 50%;
    animation: dragonFire 3s linear infinite reverse;
    z-index: -2;
}

/* Auto Spin Mode - Dragon Fire Effect */
.spin-btn.auto-spinning {
    animation: dragonPulse 2s infinite ease-in-out;
    background: linear-gradient(145deg, #ff6b35, #ff4757);
    box-shadow: 
        0 8px 20px rgba(255, 107, 53, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        0 0 0 3px rgba(255, 215, 0, 0.8),
        0 0 25px rgba(255, 107, 53, 0.4);
    position: relative;
    overflow: visible;
}

.spin-btn.auto-spinning::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 107, 53, 0.9) 20deg,
        rgba(255, 215, 0, 1) 40deg,
        rgba(255, 69, 0, 0.8) 50deg,
        transparent 70deg,
        rgba(255, 140, 0, 0.9) 90deg,
        rgba(255, 215, 0, 1) 110deg,
        transparent 130deg,
        rgba(255, 107, 53, 0.9) 160deg,
        rgba(255, 69, 0, 0.8) 180deg,
        transparent 200deg,
        rgba(255, 215, 0, 1) 220deg,
        rgba(255, 107, 53, 0.9) 240deg,
        transparent 260deg,
        rgba(255, 140, 0, 0.9) 280deg,
        rgba(255, 69, 0, 0.8) 300deg,
        rgba(255, 215, 0, 1) 320deg,
        transparent 340deg,
        rgba(255, 107, 53, 0.9) 350deg,
        transparent 360deg
    );
    border-radius: 50%;
    animation: dragonFire 2s linear infinite;
    z-index: -1;
}

.spin-btn.auto-spinning::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: conic-gradient(
        from 180deg,
        transparent 0deg,
        rgba(255, 140, 0, 0.7) 30deg,
        rgba(255, 215, 0, 0.8) 45deg,
        transparent 60deg,
        rgba(255, 69, 0, 0.6) 90deg,
        rgba(255, 107, 53, 0.7) 105deg,
        transparent 120deg,
        rgba(255, 215, 0, 0.8) 150deg,
        rgba(255, 140, 0, 0.7) 165deg,
        transparent 180deg,
        rgba(255, 69, 0, 0.6) 210deg,
        rgba(255, 215, 0, 0.8) 225deg,
        transparent 240deg,
        rgba(255, 107, 53, 0.7) 270deg,
        rgba(255, 140, 0, 0.7) 285deg,
        transparent 300deg,
        rgba(255, 215, 0, 0.8) 330deg,
        rgba(255, 69, 0, 0.6) 345deg,
        transparent 360deg
    );
    border-radius: 50%;
    animation: dragonFire 3s linear infinite reverse;
    z-index: -2;
}

/* Spin Button Wrapper for Additional Effects */
.spin-btn-wrapper {
    position: relative;
    display: inline-block;
    width: 100px; /* Reduced from 120px */
    height: 100px; /* Reduced from 120px */
    flex-shrink: 0;
}

.spin-btn-wrapper.spinning::before {
    content: '';
    position: absolute;
    top: -11px;
    left: -11px;
    right: -11px;
    bottom: -11px;
    background: conic-gradient(
        from 45deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.4) 15deg,
        transparent 30deg,
        rgba(255, 69, 0, 0.5) 60deg,
        transparent 75deg,
        rgba(255, 140, 0, 0.4) 105deg,
        transparent 120deg,
        rgba(255, 215, 0, 0.4) 150deg,
        transparent 165deg,
        rgba(255, 107, 53, 0.5) 195deg,
        transparent 210deg,
        rgba(255, 69, 0, 0.4) 240deg,
        transparent 255deg,
        rgba(255, 215, 0, 0.5) 285deg,
        transparent 300deg,
        rgba(255, 140, 0, 0.4) 330deg,
        transparent 345deg,
        rgba(255, 107, 53, 0.4) 360deg
    );
    border-radius: 50%;
    animation: dragonFire 4.5s linear infinite;
    z-index: -3;
}

.spin-btn-wrapper.auto-spinning::before {
    content: '';
    position: absolute;
    top: -11px;
    left: -11px;
    right: -11px;
    bottom: -11px;
    background: conic-gradient(
        from 45deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.4) 15deg,
        transparent 30deg,
        rgba(255, 69, 0, 0.5) 60deg,
        transparent 75deg,
        rgba(255, 140, 0, 0.4) 105deg,
        transparent 120deg,
        rgba(255, 215, 0, 0.4) 150deg,
        transparent 165deg,
        rgba(255, 107, 53, 0.5) 195deg,
        transparent 210deg,
        rgba(255, 69, 0, 0.4) 240deg,
        transparent 255deg,
        rgba(255, 215, 0, 0.5) 285deg,
        transparent 300deg,
        rgba(255, 140, 0, 0.4) 330deg,
        transparent 345deg,
        rgba(255, 107, 53, 0.4) 360deg
    );
    border-radius: 50%;
    animation: dragonFire 4.5s linear infinite;
    z-index: -3;
}

@keyframes dragonFire {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes dragonPulse {
    0% { 
        box-shadow: 
            0 8px 20px rgba(255, 107, 53, 0.6),
            inset 0 2px 4px rgba(255, 255, 255, 0.2),
            inset 0 -2px 4px rgba(0, 0, 0, 0.3),
            0 0 0 3px rgba(255, 215, 0, 0.8),
            0 0 25px rgba(255, 107, 53, 0.4);
    }
    50% { 
        box-shadow: 
            0 12px 30px rgba(255, 107, 53, 0.8),
            inset 0 3px 6px rgba(255, 255, 255, 0.25),
            inset 0 -3px 6px rgba(0, 0, 0, 0.4),
            0 0 0 4px rgba(255, 215, 0, 1),
            0 0 40px rgba(255, 107, 53, 0.6);
    }
    100% { 
        box-shadow: 
            0 8px 20px rgba(255, 107, 53, 0.6),
            inset 0 2px 4px rgba(255, 255, 255, 0.2),
            inset 0 -2px 4px rgba(0, 0, 0, 0.3),
            0 0 0 3px rgba(255, 215, 0, 0.8),
            0 0 25px rgba(255, 107, 53, 0.4);
    }
}

.spin-btn.spinning::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    margin: auto;
    border: 3px solid transparent;
    border-top-color: #ffffff;
    border-right-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: loadingDots 1s linear infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Bet controls - Hidden, now in popup */
.bet-controls {
    display: none !important; /* Hidden - now accessed via popup */
}

/* Bet Popup Modal */
.bet-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.bet-popup.active {
    display: flex;
}

.bet-popup-content {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(20, 20, 20, 0.95));
    border: 2px solid rgba(255, 215, 0, 0.8);
    border-radius: 20px;
    padding: 30px;
    max-width: 320px;
    width: 90vw;
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    position: relative;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.bet-popup.active .bet-popup-content {
    transform: scale(1);
}

.bet-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 15px;
}

.bet-popup-header h3 {
    margin: 0;
    color: #ffd700;
    font-size: 1.4em;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.bet-popup-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.8em;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.bet-popup-close:hover {
    color: #ff4757;
    background: rgba(255, 71, 87, 0.1);
    transform: scale(1.1);
}

.bet-popup-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.bet-amount-display {
    font-size: 2.2em;
    font-weight: bold;
    color: #ffd700;
    font-family: 'SF Mono', 'Roboto Mono', monospace;
    padding: 15px 25px;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 15px;
    text-align: center;
    min-width: 150px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.2);
}

.bet-buttons-row {
    display: flex;
    gap: 15px;
    align-items: center;
}

.bet-popup-btn {
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: linear-gradient(145deg, #333333, #1a1a1a);
    color: #ffd700;
    font-size: 1.8em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 5px 15px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

.bet-popup-btn:hover {
    background: linear-gradient(145deg, #444444, #2a2a2a);
    border-color: rgba(255, 215, 0, 0.6);
    transform: scale(1.05);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 215, 0, 0.3);
}

.bet-popup-btn:active {
    transform: scale(0.95);
}

.preset-bets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
    width: 100%;
}

.preset-bet-btn {
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    color: white;
    font-family: 'SF Mono', 'Roboto Mono', monospace;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9em;
}

.preset-bet-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.5);
    transform: scale(1.02);
}

.preset-bet-btn.active {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #1a1a1a;
    border-color: #ffd700;
}

.bet-btn {
    width: 32px; /* Reduced from 40px */
    height: 32px; /* Reduced from 40px */
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: var(--text-color);
    font-size: 1.0em; /* Reduced from 1.3em */
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bet-btn:hover {
    background: var(--primary-color);
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.5);
}

.bet-amount {
    font-size: 0.9em; /* Reduced from 1.1em */
    font-weight: bold;
    color: var(--text-color);
    min-width: 60px; /* Reduced from 70px */
    text-align: center;
    font-family: 'SF Mono', 'Roboto Mono', monospace;
    padding: 6px 10px; /* Reduced from 8px 12px */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px; /* Reduced from 12px */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Removed stop-auto-spin button - functionality moved to spin button */

/* Auto Spin States */
.controls.auto-spinning .bet-controls {
    opacity: 0.5;
    pointer-events: none;
}

/* Auto instruction is now managed by JavaScript and always visible */

.spin-section {
    justify-content: center;
    position: relative;
}

/* Auto Spin Instruction - Hidden */
.auto-instruction {
    display: none; /* Hide "Hold for Auto" text */
}



/* Win Display */
.win-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.95), rgba(255, 165, 0, 0.9));
    padding: 20px 40px;
    border-radius: 15px;
    border: 2px solid rgba(255, 215, 0, 0.8);
    text-align: center;
    z-index: 1000;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    backdrop-filter: blur(5px);
}

.win-display .win-amount {
    font-size: 2em;
    font-weight: bold;
    color: #1a1a1a;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
}

/* Multiplier Container */
.multiplier-container {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #ff6b35, #ff9500);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.2em;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
    transition: all 0.5s ease;
}

/* Freespin Multiplier - Özel görünüm */
.multiplier-container.freespin-multiplier {
    background: linear-gradient(135deg, #ff1744, #ff6b35, #ffd700);
    background-size: 200% 200%;
    animation: freeSpinMultiplierGlow 2s ease-in-out infinite alternate;
    padding: 10px 20px;
    font-size: 1.4em;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 0 20px rgba(255, 23, 68, 0.6),
        0 0 40px rgba(255, 215, 0, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.multiplier-container.freespin-multiplier .multiplier-value {
    background: linear-gradient(45deg, #fff, #ffd700, #fff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: freeSpinTextShine 1.5s ease-in-out infinite;
}

@keyframes freeSpinMultiplierGlow {
    0% {
        background-position: 0% 50%;
        box-shadow: 
            0 0 20px rgba(255, 23, 68, 0.6),
            0 0 40px rgba(255, 215, 0, 0.4),
            0 4px 15px rgba(0, 0, 0, 0.3);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 
            0 0 30px rgba(255, 23, 68, 0.8),
            0 0 60px rgba(255, 215, 0, 0.6),
            0 6px 20px rgba(0, 0, 0, 0.4);
    }
    100% {
        background-position: 0% 50%;
        box-shadow: 
            0 0 20px rgba(255, 23, 68, 0.6),
            0 0 40px rgba(255, 215, 0, 0.4),
            0 4px 15px rgba(0, 0, 0, 0.3);
    }
}

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

/* Leaderboard - Hidden on Mobile */
.leaderboard {
    display: none !important;
}

/* Leaderboard Popup */
.leaderboard-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.leaderboard-popup-content {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(20, 20, 20, 0.95));
    border: 2px solid rgba(255, 215, 0, 0.8);
    border-radius: 15px;
    padding: 20px;
    max-width: 320px;
    width: 90vw;
    max-height: 70vh;
    overflow: hidden;
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.leaderboard-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 10px;
}

.leaderboard-popup-header h3 {
    margin: 0;
    color: #ffd700;
    font-size: 1.3em;
    font-weight: bold;
}

.close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5em;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-btn:hover {
    color: #ff4757;
    background: rgba(255, 71, 87, 0.1);
}

/* Settings Popup */
.settings-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: all 0.3s ease;
}

.settings-popup.active {
    display: flex;
    opacity: 1;
}

.settings-popup-content {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(40, 40, 40, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 25px;
    max-width: 300px;
    width: 90vw;
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.settings-popup.active .settings-popup-content {
    transform: scale(1);
}

.settings-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.settings-popup-header h3 {
    margin: 0;
    color: var(--text-color);
    font-size: 1.2em;
    font-weight: 600;
}

.settings-popup-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.4em;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.settings-popup-close:hover {
    color: #ff4757;
    background: rgba(255, 71, 87, 0.1);
}

.settings-popup-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.setting-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.setting-icon {
    font-size: 1.2em;
    width: 24px;
    text-align: center;
}

.setting-label {
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.95em;
}

.setting-toggle {
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 15px;
    padding: 6px 12px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 50px;
}

.setting-toggle.off {
    background: #f44336;
}

.setting-toggle:hover {
    transform: scale(1.05);
}

.setting-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 8px 16px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.setting-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.logout-btn {
    background: #f44336 !important;
    color: white !important;
}

.logout-btn:hover {
    background: #d32f2f !important;
    color: white !important;
}

.leaderboard-popup-list {
    max-height: 50vh;
    overflow-y: auto;
}

.leaderboard-popup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.leaderboard-popup-item:last-child {
    border-bottom: none;
}

.leaderboard-popup-rank {
    font-weight: bold;
    color: #ffd700;
    width: 30px;
}

.leaderboard-popup-username {
    flex: 1;
    margin-left: 10px;
    color: var(--text-color);
    font-weight: 500;
}

.leaderboard-popup-balance {
    color: #4CAF50;
    font-weight: bold;
    font-family: 'SF Mono', 'Roboto Mono', monospace;
}

.leaderboard-popup-list::-webkit-scrollbar {
    width: 6px;
}

.leaderboard-popup-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.leaderboard-popup-list::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.6);
    border-radius: 3px;
}

.leaderboard-popup-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.8);
}

/* Animations */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes loadingDots {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

@keyframes drop {
    0% { transform: translateY(-100px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes spinSymbol {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes winPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    }
    50% {
        transform: scale(1.05); 
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    }
}

@keyframes greatPulse {
    0% { 
        box-shadow: 0 0 15px rgba(255, 152, 0, 0.6);
        transform: scale(1);
    }
    100% { 
        box-shadow: 0 0 30px rgba(255, 152, 0, 1);
        transform: scale(1.05);
    }
}

@keyframes hugePulse {
    0% { 
        box-shadow: 0 0 20px rgba(255, 87, 34, 0.7);
        transform: scale(1) rotate(0deg);
    }
    100% { 
        box-shadow: 0 0 35px rgba(255, 87, 34, 1);
        transform: scale(1.08) rotate(1deg);
    }
}

@keyframes superPulse {
    0% { 
        box-shadow: 0 0 25px rgba(156, 39, 176, 0.8);
        transform: scale(1);
        filter: hue-rotate(0deg);
    }
    100% { 
        box-shadow: 0 0 40px rgba(156, 39, 176, 1);
        transform: scale(1.1);
        filter: hue-rotate(10deg);
    }
}

@keyframes megaPulse {
    0% { 
        box-shadow: 0 0 30px rgba(233, 30, 99, 0.9);
        transform: scale(1) rotateZ(0deg);
        filter: brightness(1);
    }
    100% { 
        box-shadow: 0 0 45px rgba(233, 30, 99, 1);
        transform: scale(1.12) rotateZ(2deg);
        filter: brightness(1.2);
    }
}

@keyframes epicPulse {
    0% { 
        box-shadow: 0 0 35px rgba(103, 58, 183, 1);
        transform: scale(1) rotateY(0deg);
        filter: brightness(1) saturate(1);
    }
    100% { 
        box-shadow: 0 0 50px rgba(103, 58, 183, 1);
        transform: scale(1.15) rotateY(5deg);
        filter: brightness(1.3) saturate(1.5);
    }
}

@keyframes legendPulse {
    0% { 
        box-shadow: 0 0 40px rgba(255, 215, 0, 1);
        transform: scale(1) rotate3d(0, 0, 1, 0deg);
        filter: brightness(1) contrast(1);
    }
    100% { 
        box-shadow: 0 0 60px rgba(255, 215, 0, 1);
        transform: scale(1.18) rotate3d(0, 0, 1, 3deg);
        filter: brightness(1.5) contrast(1.3);
    }
}

@keyframes scatterPulse {
    0% { 
        box-shadow: 0 0 50px rgba(255, 215, 0, 1);
        transform: scale(1) rotateZ(0deg);
        filter: brightness(1);
    }
    50% { 
        box-shadow: 0 0 70px rgba(255, 215, 0, 1), 0 0 20px rgba(255, 255, 255, 0.8);
        transform: scale(1.2) rotateZ(180deg);
        filter: brightness(1.5);
    }
    100% { 
        box-shadow: 0 0 50px rgba(255, 215, 0, 1);
        transform: scale(1) rotateZ(360deg);
        filter: brightness(1);
    }
}

/* Win Effects - Multiplier Based Tiers */
.small-win {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.9), rgba(46, 125, 50, 0.85));
    border: 2px solid #4CAF50;
    animation: winPulse 0.5s;
}

.good-win {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.9), rgba(21, 101, 192, 0.85));
    border: 2px solid #2196F3;
    animation: winPulse 0.8s;
}

.big-win {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.9), rgba(255, 143, 0, 0.85));
    border: 2px solid #FFC107;
    animation: winPulse 1.2s;
    font-size: 1.1em;
}

.great-win {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.9), rgba(239, 108, 0, 0.85));
    border: 2px solid #FF9800;
    animation: greatWin 1.5s;
    font-size: 1.2em;
    box-shadow: 0 0 20px rgba(255, 152, 0, 0.6);
}

.huge-win {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.9), rgba(216, 67, 21, 0.85));
    border: 3px solid #FF5722;
    animation: hugeWin 1.8s;
    font-size: 1.3em;
    box-shadow: 0 0 25px rgba(255, 87, 34, 0.7);
}

.super-win {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(123, 31, 162, 0.85));
    border: 3px solid #9C27B0;
    animation: superWin 2s;
    font-size: 1.4em;
    box-shadow: 0 0 30px rgba(156, 39, 176, 0.8);
}

.mega-win {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.9), rgba(194, 24, 91, 0.85));
    border: 3px solid #E91E63;
    animation: megaWin 2.2s;
    font-size: 1.5em;
    box-shadow: 0 0 35px rgba(233, 30, 99, 0.9);
}

.epic-win {
    background: linear-gradient(135deg, rgba(103, 58, 183, 0.9), rgba(81, 45, 168, 0.85));
    border: 4px solid #673AB7;
    animation: epicWin 2.5s;
    font-size: 1.6em;
    box-shadow: 0 0 40px rgba(103, 58, 183, 1);
}

.legend-win {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.95), rgba(255, 193, 7, 0.9));
    border: 4px solid #FFD700;
    animation: legendWin 3s;
    font-size: 1.8em;
    box-shadow: 0 0 50px rgba(255, 215, 0, 1);
    position: relative;
    overflow: hidden;
}

.legend-win::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: legendSpin 2s linear infinite;
    z-index: -1;
}

.scatter-win {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 240, 0.9));
    border: 4px solid #FFD700;
    animation: scatterWin 2.5s;
    font-size: 1.7em;
    box-shadow: 0 0 60px rgba(255, 215, 0, 1);
    position: relative;
    overflow: hidden;
    color: #1a1a1a;
}

.scatter-win::before {
    content: '⭐';
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 3em;
    animation: scatterOrbit 3s linear infinite;
    z-index: -1;
}

.scatter-win::after {
    content: '⭐';
    position: absolute;
    bottom: -20px;
    right: -20px;
    font-size: 2em;
    animation: scatterOrbit 2s linear infinite reverse;
    z-index: -1;
}

.mega-win-effect {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3em;
    color: #1a1a1a;
    font-weight: bold;
    background: linear-gradient(135deg, rgba(255, 179, 0, 0.95), rgba(255, 140, 0, 0.9));
    padding: 0.5em 2em;
    border-radius: 20px;
    border: 2px solid #ffb300;
    z-index: 9999;
    animation: megaWin 2s;
    pointer-events: none;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(255, 179, 0, 0.5);
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
}

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

@keyframes greatWin {
    0% { transform: scale(0.6) rotate(-5deg); opacity: 0; }
    25% { transform: scale(1.15) rotate(2deg); opacity: 1; }
    75% { transform: scale(1.05) rotate(-1deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes hugeWin {
    0% { transform: scale(0.4) rotate(-10deg); opacity: 0; box-shadow: 0 0 25px rgba(255, 87, 34, 0.7); }
    30% { transform: scale(1.25) rotate(5deg); opacity: 1; box-shadow: 0 0 40px rgba(255, 87, 34, 1); }
    70% { transform: scale(1.1) rotate(-2deg); opacity: 1; box-shadow: 0 0 35px rgba(255, 87, 34, 0.9); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; box-shadow: 0 0 25px rgba(255, 87, 34, 0.7); }
}

@keyframes superWin {
    0% { transform: scale(0.3) rotateY(180deg); opacity: 0; filter: hue-rotate(0deg); }
    40% { transform: scale(1.3) rotateY(0deg); opacity: 1; filter: hue-rotate(90deg); }
    80% { transform: scale(1.1) rotateY(-10deg); opacity: 1; filter: hue-rotate(45deg); }
    100% { transform: scale(1) rotateY(0deg); opacity: 1; filter: hue-rotate(0deg); }
}

@keyframes epicWin {
    0% { 
        transform: scale(0.2) rotateX(90deg); 
        opacity: 0; 
        filter: brightness(0.5) saturate(2); 
    }
    25% { 
        transform: scale(1.4) rotateX(0deg); 
        opacity: 1; 
        filter: brightness(1.5) saturate(1.5); 
    }
    50% { 
        transform: scale(1.2) rotateX(-10deg); 
        opacity: 1; 
        filter: brightness(1.2) saturate(1.2); 
    }
    75% { 
        transform: scale(1.1) rotateX(5deg); 
        opacity: 1; 
        filter: brightness(1.1) saturate(1.1); 
    }
    100% { 
        transform: scale(1) rotateX(0deg); 
        opacity: 1; 
        filter: brightness(1) saturate(1); 
    }
}

@keyframes legendWin {
    0% { 
        transform: scale(0.1) rotate3d(1, 1, 1, 180deg); 
        opacity: 0; 
        filter: brightness(0.3) contrast(2) saturate(3); 
    }
    20% { 
        transform: scale(1.5) rotate3d(1, 1, 1, 45deg); 
        opacity: 1; 
        filter: brightness(2) contrast(1.5) saturate(2); 
    }
    40% { 
        transform: scale(1.3) rotate3d(1, 1, 1, -20deg); 
        opacity: 1; 
        filter: brightness(1.8) contrast(1.3) saturate(1.8); 
    }
    60% { 
        transform: scale(1.2) rotate3d(1, 1, 1, 10deg); 
        opacity: 1; 
        filter: brightness(1.5) contrast(1.2) saturate(1.5); 
    }
    80% { 
        transform: scale(1.1) rotate3d(1, 1, 1, -5deg); 
        opacity: 1; 
        filter: brightness(1.2) contrast(1.1) saturate(1.2); 
    }
    100% { 
        transform: scale(1) rotate3d(1, 1, 1, 0deg); 
        opacity: 1; 
        filter: brightness(1) contrast(1) saturate(1); 
    }
}

@keyframes legendSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes scatterWin {
    0% { 
        transform: scale(0.1) rotateZ(-180deg); 
        opacity: 0; 
        filter: brightness(3) blur(5px); 
    }
    25% { 
        transform: scale(1.4) rotateZ(-45deg); 
        opacity: 1; 
        filter: brightness(2) blur(2px); 
    }
    50% { 
        transform: scale(1.2) rotateZ(0deg); 
        opacity: 1; 
        filter: brightness(1.5) blur(0px); 
    }
    75% { 
        transform: scale(1.1) rotateZ(15deg); 
        opacity: 1; 
        filter: brightness(1.2) blur(0px); 
    }
    100% { 
        transform: scale(1) rotateZ(0deg); 
        opacity: 1; 
        filter: brightness(1) blur(0px); 
    }
}

@keyframes scatterOrbit {
    0% { transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 0.7; }
    25% { transform: translate(15px, -15px) rotate(90deg) scale(1.2); opacity: 1; }
    50% { transform: translate(0px, -30px) rotate(180deg) scale(1); opacity: 0.8; }
    75% { transform: translate(-15px, -15px) rotate(270deg) scale(1.2); opacity: 1; }
    100% { transform: translate(0px, 0px) rotate(360deg) scale(1); opacity: 0.7; }
}

/* Win Popup Styles - No dark overlay */
.win-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
    pointer-events: none;
}

.win-popup {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.95), rgba(255, 165, 0, 0.9));
    border: 3px solid #ffd700;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    max-width: 90vw;
    position: relative;
    overflow: hidden;
    animation: popIn 0.5s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.4);
}

.win-popup::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
    border-radius: 20px;
    z-index: -1;
    animation: borderGlow 2s ease-in-out infinite alternate;
}

.win-popup .win-title {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1a1a1a;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
    animation: titlePulse 1s ease-in-out infinite alternate;
}

.win-popup .win-amount {
    font-size: 2.5em;
    font-weight: 900;
    color: #1a1a1a;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
    animation: amountGlow 1.5s ease-in-out infinite alternate;
}

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

@keyframes popIn {
    from { transform: scale(0.3); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes borderGlow {
    from { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
    to { box-shadow: 0 0 40px rgba(255, 215, 0, 0.8); }
}

@keyframes titlePulse {
    from { color: #1a1a1a; }
    to { color: #333333; }
}

@keyframes amountGlow {
    from { 
        color: #1a1a1a;
        text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
    }
    to { 
        color: #333333;
        text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.8);
    }
}

/* Cascade Step and Complete Popups */
.cascade-step {
    color: #ffd700;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    text-align: center;
    margin-bottom: 4px;
}

.final-win-title {
    color: #ffd700;
    font-size: 1.8em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    text-align: center;
    margin-bottom: 8px;
}

.final-cascade-win {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(20, 20, 20, 0.95));
    border: 3px solid #ffd700;
    border-radius: 20px;
    padding: 24px 40px;
    text-align: center;
    z-index: 1002;
    pointer-events: none;
    backdrop-filter: blur(15px);
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.6);
    animation: cascadeCompleteGlow 2.5s ease-in-out;
}

.final-win-amount {
    color: #4CAF50;
    font-size: 2.2em;
    font-weight: 900;
    margin-top: 8px;
    text-shadow: 0 0 15px rgba(76, 175, 80, 0.8);
    animation: amountPulse 1.5s ease-in-out infinite alternate;
}

.cascade-win-popup {
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #ffd700;
    border-radius: 12px;
    padding: 12px 20px;
    text-align: center;
    z-index: 1000;
    pointer-events: none;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
    animation: popInOut 1.5s ease-in-out;
}

.cascade-amount {
    color: #4CAF50;
    font-size: 1.4em;
    font-weight: bold;
    margin-top: 4px;
    text-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

@keyframes amountPulse {
    0% { 
        transform: scale(1);
        text-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
    }
    100% { 
        transform: scale(1.05);
        text-shadow: 0 0 20px rgba(76, 175, 80, 1);
    }
}

@keyframes popInOut {
    0% { 
        opacity: 0; 
        transform: scale(0.5);
    }
    20% { 
        opacity: 1; 
        transform: scale(1.1);
    }
    80% { 
        opacity: 1; 
        transform: scale(1);
    }
    100% { 
        opacity: 0; 
        transform: scale(0.8);
    }
}

@keyframes cascadeCompleteGlow {
    0% { 
        opacity: 0; 
        transform: translateX(-50%) scale(0.8);
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
    }
    30% { 
        opacity: 1; 
        transform: translateX(-50%) scale(1.05);
        box-shadow: 0 12px 35px rgba(255, 215, 0, 0.8);
    }
    70% { 
        opacity: 1; 
        transform: translateX(-50%) scale(1);
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
    }
    100% { 
        opacity: 0; 
        transform: translateX(-50%) scale(0.9);
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
    }
}

/* Payout Table Popup */
.payout-table-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.payout-table-popup-content {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(60, 60, 60, 0.9) 100%);
    border-radius: 15px;
    max-width: 90%;
    width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    border: 2px solid rgba(255, 64, 129, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.payout-table-popup-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 15px 15px 0 0;
}

.payout-table-popup-header h3 {
    margin: 0;
    color: white;
    font-size: 1.3em;
    font-weight: 600;
}

.payout-table-content {
    padding: 20px;
    color: white;
}

.payout-rule {
    margin-bottom: 25px;
    text-align: center;
    padding: 15px;
    background: rgba(255, 64, 129, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(255, 64, 129, 0.2);
    color: white;
}

.payout-rule h4 {
    color: white;
    margin-bottom: 8px;
    font-size: 1.1em;
}

.payout-rule p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
}

.payout-table {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    color: white;
}

.payout-table-header {
    display: grid;
    grid-template-columns: 2.2fr 0.9fr 0.9fr 0.9fr 0.9fr 1.1fr;
    background: rgba(0, 0, 0, 0.8);
    padding: 12px;
    font-weight: 600;
    justify-items: center;
    font-size: 0.85em;
    color: white;
}

.payout-row {
    display: grid;
    grid-template-columns: 2.2fr 0.9fr 0.9fr 0.9fr 0.9fr 1.1fr;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    align-items: center;
    color: white;
    text-align: center;
}

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

.payout-row.medium {
    background: rgba(124, 77, 255, 0.1);
}

.payout-row.rare {
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 5px;
    margin: 2px;
}

.payout-row .symbol {
    font-size: 1em;
    font-weight: 500;
    text-align: center;
    padding-right: 0;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.payout-table-header .symbol-col {
    text-align: center;
    padding-right: 0;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.payout-table-header .multiplier-col {
    text-align: center;
    font-size: 0.8em;
    color: white;
}

.symbol {
    font-size: 1.1em;
    font-weight: 500;
    text-align: center;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.multiplier {
    text-align: center;
    font-weight: 600;
    color: var(--win-color);
    font-size: 0.95em;
}

.multiplier.special {
    color: #ffc107;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

.special-rules {
    margin-top: 20px;
    color: white;
}

.special-rule {
    margin-bottom: 15px;
    padding: 12px;
    background: rgba(124, 77, 255, 0.1);
    border-radius: 8px;
    border-left: 3px solid var(--secondary-color);
}

.special-rule h4 {
    color: white;
    margin-bottom: 6px;
    font-size: 1em;
}

.special-rule p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.3;
    font-size: 0.9em;
}

/* Win Popup Multiplier */
.win-popup .win-multiplier {
    font-size: 1.8em;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(45deg, #ff4081, #7c4dff, #ff4081);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(255, 64, 129, 0.8), 0 0 40px rgba(124, 77, 255, 0.6);
    margin: 8px 0;
    animation: multiplierPulse 1.5s ease-in-out infinite, gradientShift 3s ease-in-out infinite;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 4px 12px;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
}

@keyframes multiplierPulse {
    0% { 
        transform: scale(1);
        text-shadow: 0 0 20px rgba(255, 64, 129, 0.6), 0 0 30px rgba(124, 77, 255, 0.4);
    }
    50% { 
        transform: scale(1.15);
        text-shadow: 0 0 40px rgba(255, 64, 129, 1), 0 0 50px rgba(124, 77, 255, 0.8);
    }
    100% { 
        transform: scale(1);
        text-shadow: 0 0 20px rgba(255, 64, 129, 0.6), 0 0 30px rgba(124, 77, 255, 0.4);
    }
}

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

/* Mobile Responsive for Payout Table */
@media screen and (max-width: 480px) {
    .payout-table-popup-content {
        max-width: 95%;
        margin: 10px;
    }
    
    .payout-table-header,
    .payout-row {
        grid-template-columns: 1.8fr 0.8fr 0.8fr 0.8fr 0.8fr 1fr;
        font-size: 0.8em;
        padding: 8px;
    }
    
    .symbol {
        font-size: 0.9em;
    }
    
    .payout-table-content {
        padding: 15px;
    }
}

.wobble-head {
  animation: wobble 1.2s linear infinite;
  transform-origin: 50% 90%;
  display: block;
}

@keyframes wobble {
  0%   { transform: rotate(-12deg); }
  50%  { transform: rotate(12deg); }
  100% { transform: rotate(-12deg); }
}

.drop-anim {
  opacity: 0;
  transform: translateY(-80px);
  transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.2s;
}
.drop-anim.drop-in {
  opacity: 1;
  transform: translateY(0);
}

/* Wheel Bonus Game Styles */
.wheel-intro-title {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.wheel-intro-subtitle {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #fff;
}

.wheel-intro-info {
    font-size: 1em;
    margin-bottom: 20px;
    color: #ccc;
}

.wheel-intro-countdown {
    font-size: 3em;
    font-weight: bold;
    color: #ff6b35;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.wheel-game-content {
    text-align: center;
    color: white;
}

.wheel-timer {
    font-size: 2.5em;
    font-weight: bold;
    color: #ff6b35;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.wheel-container {
    margin: 20px 0;
}

.wheel {
    font-size: 8em;
    display: inline-block;
    transition: transform 0.1s ease-out, filter 0.1s ease;
    cursor: pointer;
}

.wheel-stats {
    margin: 20px 0;
    font-size: 1.2em;
}

.wheel-spins, .wheel-earnings {
    margin: 10px 0;
    padding: 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 5px;
    backdrop-filter: blur(5px);
}

.wheel-instruction {
    font-size: 1em;
    color: #ccc;
    margin-top: 20px;
}

.wheel-win-title {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 15px;
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.wheel-win-spins {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #fff;
}

.wheel-win-amount {
    font-size: 2.5em;
    font-weight: bold;
    margin: 15px 0;
    color: #4CAF50;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.wheel-win-subtitle {
    font-size: 1em;
    color: #ccc;
    margin-top: 10px;
}