.casino-hero {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.1) 0%, 
        rgba(236, 72, 153, 0.1) 50%, 
        rgba(249, 115, 22, 0.1) 100%);
    position: relative;
    overflow: hidden;
}

.casino-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--gradient-mid) 0%, transparent 70%);
    opacity: 0.1;
    animation: rotate 30s linear infinite;
}

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

.casino-dice,
.casino-chip {
    position: absolute;
    font-size: 3rem;
    opacity: 0.3;
    animation: float 20s ease-in-out infinite;
}

.dice-1 {
    top: 20%;
    right: 10%;
    animation-delay: 0s;
}

.dice-2 {
    bottom: 30%;
    left: 15%;
    animation-delay: 10s;
}

.casino-chip {
    top: 50%;
    right: 30%;
    animation-delay: 5s;
}

.casino-dice {
    animation: diceRoll 3s ease-in-out infinite;
}

@keyframes diceRoll {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(0.9); }
}

.casino-stats {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.05) 0%, 
        rgba(15, 52, 96, 0.3) 100%);
}

.casino-stat {
    position: relative;
    overflow: hidden;
}

.casino-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.3), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.casino-section {
    background: rgba(15, 52, 96, 0.2);
    position: relative;
}

.casino-section::before {
    content: '♠ ♥ ♣ ♦';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    opacity: 0.1;
    animation: fadeInOut 4s ease-in-out infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.3; }
}

.casino-card {
    position: relative;
    overflow: hidden;
}

.casino-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        transparent 0%, 
        rgba(236, 72, 153, 0.1) 50%, 
        transparent 100%);
    opacity: 0;
    transition: opacity var(--transition-smooth);
}

.casino-card:hover::after {
    opacity: 1;
}

.casino-rank {
    background: linear-gradient(135deg, var(--gradient-mid), var(--gradient-end));
    animation: pulse 2s ease-in-out infinite;
}

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

.casino-glow {
    background: radial-gradient(circle, var(--gradient-mid), transparent);
}

.casino-bonus {
    position: relative;
    overflow: hidden;
}

.casino-bonus::before {
    content: '💰';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 3rem;
    opacity: 0.1;
    transform: rotate(-15deg);
}

.casino-orbs::before,
.casino-orbs::after {
    background: radial-gradient(circle, var(--gradient-end), transparent);
}

@media (max-width: 768px) {
    .casino-dice,
    .casino-chip {
        font-size: 2rem;
    }
    
    .casino-section::before {
        font-size: 1.5rem;
    }
}