@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

/* Mobile-first responsive design */
html {
    font-size: 16px;
}

body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.slot-machine {
    font-family: 'Orbitron', monospace;
    min-height: fit-content;
}

.reel {
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.3s ease;
}

.reel-container {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.reel-spinning {
    transform-style: preserve-3d;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), inset 0 0 10px rgba(255, 215, 0, 0.3);
    border-color: rgba(255, 215, 0, 1) !important;
    animation: reelGlow 0.3s ease-in-out infinite alternate;
}

@keyframes reelGlow {
    0% { 
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.6), inset 0 0 10px rgba(255, 215, 0, 0.2);
    }
    100% { 
        box-shadow: 0 0 25px rgba(255, 215, 0, 1), inset 0 0 15px rgba(255, 215, 0, 0.5);
    }
}

.reel-1 { animation-delay: 0s; }
.reel-2 { animation-delay: 0.2s; }
.reel-3 { animation-delay: 0.4s; }

@keyframes spin {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    25% { transform: rotateX(90deg) rotateY(90deg); }
    50% { transform: rotateX(180deg) rotateY(180deg); }
    75% { transform: rotateX(270deg) rotateY(270deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* Spinning symbol effect - shows active randomization */
.reel-spinning .slot-symbol {
    animation: symbolRandomize 0.05s infinite;
    text-shadow: 0 0 10px currentColor;
    transform-origin: center;
    filter: brightness(1.2);
}

@keyframes symbolRandomize {
    0% { 
        transform: scale(1) rotateZ(0deg);
        opacity: 1;
    }
    25% { 
        transform: scale(1.1) rotateZ(5deg);
        opacity: 0.9;
    }
    50% { 
        transform: scale(0.9) rotateZ(-5deg);
        opacity: 1;
    }
    75% { 
        transform: scale(1.05) rotateZ(3deg);
        opacity: 0.95;
    }
    100% { 
        transform: scale(1) rotateZ(0deg);
        opacity: 1;
    }
}

/* Symbol flash effect for visibility during spinning */
.symbol-flash {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6) !important;
    animation: flash 0.08s ease-in-out !important;
}

@keyframes flash {
    0% { 
        background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, transparent 70%);
        transform: scale(1.1);
    }
    100% { 
        background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
        transform: scale(1);
    }
}

.glow {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.4);
}

.pulse-gold {
    animation: pulseGold 2s infinite;
}

@keyframes pulseGold {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 1), 0 0 60px rgba(255, 215, 0, 0.8); }
}

.pulse-blue {
    animation: pulseBlue 1.5s infinite;
}

@keyframes pulseBlue {
    0%, 100% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.6); }
    50% { box-shadow: 0 0 25px rgba(59, 130, 246, 1), 0 0 40px rgba(59, 130, 246, 0.8); }
}

.slot-symbol {
    transition: all 0.3s ease;
}

.winning-symbol {
    animation: symbolGlow 1s ease-in-out infinite alternate;
}

@keyframes symbolGlow {
    from { text-shadow: 0 0 10px currentColor; }
    to { text-shadow: 0 0 20px currentColor, 0 0 30px currentColor; }
}

.coin-animation {
    animation: coinDrop 0.8s ease-out forwards;
}

@keyframes coinDrop {
    0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(0) rotate(360deg); opacity: 1; }
}

.bonus-animation {
    animation: starFloat 0.6s ease-out forwards;
}

@keyframes starFloat {
    0% { 
        transform: translateY(-80px) scale(0.5); 
        opacity: 0; 
    }
    50% { 
        transform: translateY(-20px) scale(1.2); 
        opacity: 1; 
    }
    100% { 
        transform: translateY(0) scale(1); 
        opacity: 1; 
    }
}

.bg-gradient-casino {
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
}

.lever {
    transition: transform 0.2s ease;
}

.lever:active {
    transform: translateY(20px);
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .slot-machine {
        margin: 0.5rem;
        border-width: 2px;
        border-radius: 1.5rem;
    }
    
    .reel {
        min-height: 5rem;
        min-width: 4rem;
    }
    
    .slot-symbol {
        font-size: 2rem !important;
        line-height: 1;
    }
    
    /* Ensure touch targets are at least 44px */
    button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Optimize modals for mobile */
    .fixed.inset-0 > div {
        margin: 1rem !important;
        max-width: calc(100vw - 2rem) !important;
        max-height: calc(100vh - 2rem) !important;
        overflow-y: auto;
    }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
    .slot-machine {
        padding: 1rem;
        margin: 0.25rem;
    }
    
    .text-center.mb-4 {
        margin-bottom: 0.5rem;
    }
    
    .bg-black.rounded-lg {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .slot-symbol {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Touch-friendly improvements */
.touch-manipulation {
    touch-action: manipulation;
}

/* Prevent zoom on double tap */
button, input, select, textarea {
    touch-action: manipulation;
}

/* Status Effect Animations */
.pity-status {
    animation: pityGlow 2s ease-in-out infinite alternate;
}

@keyframes pityGlow {
    0% { 
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        border-color: rgba(59, 130, 246, 0.8);
    }
    100% { 
        box-shadow: 0 0 20px rgba(59, 130, 246, 1), 0 0 30px rgba(59, 130, 246, 0.6);
        border-color: rgba(59, 130, 246, 1);
    }
}

.privilege-status {
    animation: privilegeGlow 1.5s ease-in-out infinite alternate;
}

@keyframes privilegeGlow {
    0% { 
        box-shadow: 0 0 10px rgba(147, 51, 234, 0.5);
        border-color: rgba(147, 51, 234, 0.8);
    }
    100% { 
        box-shadow: 0 0 20px rgba(147, 51, 234, 1), 0 0 30px rgba(147, 51, 234, 0.6);
        border-color: rgba(147, 51, 234, 1);
    }
}

/* Status effect particles */
.pity-status::before {
    content: '💧';
    position: absolute;
    top: -10px;
    left: -10px;
    animation: pityParticles 3s linear infinite;
    pointer-events: none;
}

.privilege-status::before {
    content: '✨';
    position: absolute;
    top: -10px;
    right: -10px;
    animation: privilegeParticles 2s linear infinite;
    pointer-events: none;
}

@keyframes pityParticles {
    0% { 
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    50% { 
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.5;
    }
    100% { 
        transform: translateY(0) rotate(360deg);
        opacity: 1;
    }
}

@keyframes privilegeParticles {
    0% { 
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% { 
        transform: scale(1.3) rotate(180deg);
        opacity: 0.7;
    }
    100% { 
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

/* Improve button active states on mobile */
@media (hover: none) and (pointer: coarse) {
    button:hover {
        transform: none;
    }
    
    button:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
    
    .lever:active {
        transform: translateY(10px) scale(0.95);
    }
}

/* Responsive font sizes */
@media (max-width: 375px) {
    html {
        font-size: 14px;
    }
    
    .slot-machine {
        padding: 0.75rem;
    }
    
    .slot-symbol {
        font-size: 1.75rem !important;
    }
}

/* Very small screens */
@media (max-width: 320px) {
    .reel {
        min-height: 4rem;
        min-width: 3.5rem;
    }
    
    .slot-symbol {
        font-size: 1.5rem !important;
    }
    
    .lever {
        padding: 1rem 0.5rem !important;
        font-size: 1rem !important;
    }
}