* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #0d0d1a;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Outfit', sans-serif;
}

:root {
    --neon-pink: #ff2d95;
    --neon-blue: #00d4ff;
    --neon-purple: #b44dff;
    --neon-gold: #ffd700;
    --neon-green: #39ff14;
    --deep-bg: #0d0d1a;
    --card-bg: rgba(255,255,255,0.04);
    --common: #8b95a5;
    --uncommon: #39ff14;
    --rare: #00aaff;
    --epic: #b44dff;
    --legendary: #ffa500;
    --mythic: #ff2244;
}

@keyframes neonPulse {
    0%, 100% { text-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink), 0 0 40px var(--neon-pink); }
    50% { text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink); }
}

@keyframes mythicShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes spinReel {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

@keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.1); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes confettiDrop {
    0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes goldShine {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes diamondSparkle {
    0%, 100% { filter: brightness(1) hue-rotate(0deg); }
    25% { filter: brightness(1.4) hue-rotate(30deg); }
    50% { filter: brightness(1) hue-rotate(60deg); }
    75% { filter: brightness(1.3) hue-rotate(-30deg); }
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

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

@keyframes reelBlur {
    0%, 100% { filter: blur(0px); }
    50% { filter: blur(1px); }
}

@keyframes buttonPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255,45,149,0.4), 0 8px 0 #8b0033; }
    50% { box-shadow: 0 0 40px rgba(255,45,149,0.7), 0 8px 0 #8b0033; }
}

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

.reel-container {
    overflow: hidden;
    position: relative;
}

.reel-strip {
    transition: transform 0.1s linear;
}

.spinning .reel-strip {
    animation: reelBlur 0.2s infinite;
}

.confetti-piece {
    position: fixed;
    width: 10px;
    height: 10px;
    top: -20px;
    animation: confettiDrop linear forwards;
    pointer-events: none;
    z-index: 9999;
}

.shake-screen {
    animation: shake 0.5s ease-in-out;
}

.mythic-text {
    background: linear-gradient(90deg, #ff2244, #ff6644, #ffaa00, #ff2244);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: mythicShimmer 2s linear infinite;
}

.gold-badge {
    background: linear-gradient(90deg, #b8860b, #ffd700, #fff68f, #ffd700, #b8860b);
    background-size: 200% auto;
    animation: goldShine 3s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.diamond-badge {
    animation: diamondSparkle 2s ease-in-out infinite;
}

.gold-border {
    border: 2px solid #ffd700 !important;
    box-shadow: 0 0 15px rgba(255,215,0,0.4), inset 0 0 15px rgba(255,215,0,0.1) !important;
}

.diamond-border {
    border: 2px solid #b9f2ff !important;
    box-shadow: 0 0 15px rgba(185,242,255,0.5), inset 0 0 15px rgba(185,242,255,0.1) !important;
    animation: diamondSparkle 3s ease-in-out infinite;
}

.spin-btn {
    background: linear-gradient(180deg, #ff4d6d, #cc0033);
    box-shadow: 0 0 20px rgba(255,45,149,0.4), 0 8px 0 #8b0033;
    transition: all 0.1s ease;
    animation: buttonPulse 2s ease-in-out infinite;
}

.spin-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #ff6b8a, #e6003a);
    box-shadow: 0 0 30px rgba(255,45,149,0.6), 0 8px 0 #8b0033;
    transform: translateY(-2px);
}

.spin-btn:active:not(:disabled) {
    box-shadow: 0 0 10px rgba(255,45,149,0.3), 0 2px 0 #8b0033;
    transform: translateY(6px);
}

.spin-btn:disabled {
    opacity: 0.6;
    animation: none;
    cursor: not-allowed;
}

.rarity-common { color: var(--common); border-color: var(--common); }
.rarity-uncommon { color: var(--uncommon); border-color: var(--uncommon); }
.rarity-rare { color: var(--rare); border-color: var(--rare); }
.rarity-epic { color: var(--epic); border-color: var(--epic); }
.rarity-legendary { color: var(--legendary); border-color: var(--legendary); }
.rarity-mythic { color: var(--mythic); border-color: var(--mythic); }

.glow-common { box-shadow: 0 0 8px rgba(139,149,165,0.3); }
.glow-uncommon { box-shadow: 0 0 12px rgba(57,255,20,0.3); }
.glow-rare { box-shadow: 0 0 12px rgba(0,170,255,0.3); }
.glow-epic { box-shadow: 0 0 15px rgba(180,77,255,0.4); }
.glow-legendary { box-shadow: 0 0 20px rgba(255,165,0,0.4); }
.glow-mythic { box-shadow: 0 0 25px rgba(255,34,68,0.5); }

.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-4px) scale(1.02);
}

.new-indicator {
    animation: newBadge 1s ease-in-out infinite;
}

.backdrop-blur-custom {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
::-webkit-scrollbar-thumb { background: rgba(255,45,149,0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,45,149,0.5); }

/* Mobile adjustments */
@media (max-width: 640px) {
    .reel-container {
        width: 70px !important;
        height: 180px !important;
    }
}