/* Prevent horizontal scroll on mobile */
html, body {
    overflow-x: hidden;
    width: 100%;
}
/* Custom animations and effects */
@keyframes meteorspin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes sunburstRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}
@keyframes sunburstPulse {
    0%, 100% { 
        opacity: 0.6;
        filter: brightness(1);
    }
    50% { 
        opacity: 1;
        filter: brightness(1.2);
    }
}
@keyframes twinkle {
    0%, 100% { 
        opacity: 0.2;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.2);
    }
}
@keyframes gradientwave {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
}
@keyframes pulseglow {
    from {
        filter: brightness(1) contrast(1);
    }
    to {
        filter: brightness(1.1) contrast(1.1);
    }
}
@keyframes textshine {
    to {
        background-position: 200% center;
    }
}
@keyframes flameflicker {
    from { 
        border-top-color: #ff6b35;
        transform: translateX(-50%) scaleY(1);
        filter: blur(2px) drop-shadow(0 0 10px #ff6b35);
    }
    to { 
        border-top-color: #ffd93d;
        transform: translateX(-50%) scaleY(1.1);
        filter: blur(2px) drop-shadow(0 0 20px #ffd93d);
    }
}
/* Shine animation */
@keyframes shine {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-shine {
    animation: shine 3s ease-in-out infinite;
}
.animate-slideIn {
    animation: slideIn 0.5s ease-out;
}
.animate-float {
    animation: float 3s ease-in-out infinite;
}
/* Mobile Card Styles */
.mobile-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 
        0 4px 20px rgba(147, 51, 234, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
}
.mobile-card-gradient {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(168, 85, 247, 0.3);
    box-shadow: 
        0 8px 32px rgba(147, 51, 234, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.2);
}
.stat-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(147, 51, 234, 0.3);
}
/* Countdown timer styles */
.countdown-container {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(251, 191, 36, 0.3);
    box-shadow: 
        0 8px 32px rgba(251, 191, 36, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.countdown-number {
    font-family: 'Courier New', monospace;
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}
.jakarta-time {
    background: linear-gradient(90deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: textshine 3s ease-in-out infinite;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}
/* Mobile specific styles */
@media (max-width: 640px) {
    .mobile-container {
        width: 100%;
        padding: 0.75rem;
    }
    
    .meteor-container {
        width: 140px !important;
        height: 140px !important;
    }
    
    .multiplier-3d {
        font-size: 2rem !important;
    }
    
    .character-container {
        width: 70px !important;
        height: 70px !important;
        margin-top: -1rem !important;
    }
    
    /* Reduce effects on mobile for performance */
    .sunburst,
    .lens-flare,
    .outer-ring {
        display: none;
    }
    
    .particle:nth-child(n+4) {
        display: none;
    }
}
/* Very small devices */
@media (max-width: 380px) {
    .countdown-number {
        font-size: 1.125rem !important;
    }
    
    .jakarta-time {
        font-size: 0.875rem !important;
    }
    
    .multiplier-3d {
        font-size: 1.75rem !important;
    }
}
/* Icon styles */
.icon-glow {
    filter: drop-shadow(0 0 8px currentColor);
}
/* Status badges */
.status-badge {
    position: relative;
    overflow: hidden;
}
.status-badge::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent, currentColor, transparent);
    transform: translateX(-100%);
    animation: shine 3s ease-in-out infinite;
}
/* Outer ring effect */
.outer-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    animation: ringRotate 45s linear infinite;
}
.outer-ring::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.1) 10deg,
        transparent 40deg,
        transparent 180deg,
        rgba(255, 255, 255, 0.1) 190deg,
        transparent 220deg,
        transparent 360deg
    );
    mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 3px),
        white calc(100% - 2px)
    );
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 3px),
        white calc(100% - 2px)
    );
}
@keyframes ringRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Background gradients */
.purple-gradient {
    background: linear-gradient(135deg, #1e1b4b 0%, #0f0a1f 100%);
    position: relative;
    z-index: 0;
}
.purple-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.purple-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at top left, rgba(138, 43, 226, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(186, 85, 211, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at center, rgba(147, 51, 234, 0.15) 0%, transparent 70%);
    pointer-events: none;
}
.wave-overlay::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(147, 51, 234, 0.08) 50%,
        transparent 70%
    );
    animation: gradientwave 20s ease-in-out infinite;
    pointer-events: none;
}
/* Animated light beams for desktop */
@media (min-width: 1024px) {
    .light-beams {
        position: fixed;
        inset: 0;
        overflow: hidden;
        z-index: 2;
        pointer-events: none;
    }
    .light-beam {
        position: absolute;
        width: 1px;
        height: 150%;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(147, 51, 234, 0.3) 50%,
            transparent 100%
        );
        filter: blur(2px);
        opacity: 0;
        animation: lightBeam 12s ease-in-out infinite;
    }
    .light-beam:nth-child(1) {
        left: 10%;
        animation-delay: 0s;
    }
    .light-beam:nth-child(2) {
        left: 30%;
        animation-delay: 3s;
    }
    .light-beam:nth-child(3) {
        left: 50%;
        animation-delay: 6s;
    }
    .light-beam:nth-child(4) {
        left: 70%;
        animation-delay: 9s;
    }
    .light-beam:nth-child(5) {
        left: 90%;
        animation-delay: 12s;
    }
    @keyframes lightBeam {
        0%, 100% {
            opacity: 0;
            transform: translateY(-100%) rotate(45deg);
        }
        50% {
            opacity: 0.3;
            transform: translateY(100%) rotate(45deg);
        }
    }
}
/* Meteor styles */
.meteor-spin {
    animation: meteorspin 40s linear infinite;
}
.meteor-placeholder {
    background: 
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 40%),
        radial-gradient(circle at 30% 30%, #e74c3c, #c0392b),
        radial-gradient(circle at 70% 70%, #d35400, #a93226);
    box-shadow: 
        0 0 40px rgba(231, 76, 60, 0.3),
        0 0 80px rgba(147, 51, 234, 0.2),
        0 0 120px rgba(231, 76, 60, 0.1),
        inset -25px -25px 40px rgba(0, 0, 0, 0.5),
        inset 10px 10px 20px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}
.meteor-placeholder::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 15%;
    width: 25%;
    height: 25%;
    background: radial-gradient(
        ellipse,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    filter: blur(5px);
    transform: rotate(-20deg);
}
/* Sunburst effect behind meteor */
.sunburst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    transform: translate(-50%, -50%);
    animation: sunburstRotate 50s linear infinite;
    pointer-events: none;
    z-index: 1;
}
.sunburst::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255, 255, 255, 0.01) 0.25deg,
        rgba(255, 255, 255, 0.02) 0.5deg,
        rgba(255, 255, 255, 0.03) 1deg,
        rgba(255, 255, 255, 0.05) 1.5deg,
        rgba(255, 255, 255, 0.08) 2deg,
        rgba(255, 255, 255, 0.05) 2.5deg,
        rgba(255, 255, 255, 0.03) 3deg,
        rgba(255, 255, 255, 0.02) 3.5deg,
        rgba(255, 255, 255, 0.01) 4deg,
        transparent 4.5deg,
        transparent 9deg
    );
    mask: radial-gradient(
        circle at center,
        transparent 25%,
        black 30%,
        black 65%,
        transparent 70%
    );
    -webkit-mask: radial-gradient(
        circle at center,
        transparent 25%,
        black 30%,
        black 65%,
        transparent 70%
    );
    animation: sunburstPulse 4s ease-in-out infinite;
}
.sunburst::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(255, 255, 255, 0.1) 25%,
        rgba(255, 255, 255, 0.05) 40%,
        rgba(255, 255, 255, 0.02) 60%,
        transparent 80%
    );
    filter: blur(50px);
    mix-blend-mode: screen;
    opacity: 0.5;
}
/* Additional lens flare effect */
.lens-flare {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 15%,
        rgba(255, 255, 255, 0.1) 30%,
        rgba(255, 255, 255, 0.2) 48%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.2) 52%,
        rgba(255, 255, 255, 0.1) 70%,
        rgba(255, 255, 255, 0.05) 85%,
        transparent 100%
    );
    transform: translate(-50%, -50%);
    animation: flarePulse 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
    filter: blur(1px);
}
.lens-flare::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 120%;
    background: linear-gradient(
        0deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 15%,
        rgba(255, 255, 255, 0.1) 30%,
        rgba(255, 255, 255, 0.2) 48%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.2) 52%,
        rgba(255, 255, 255, 0.1) 70%,
        rgba(255, 255, 255, 0.05) 85%,
        transparent 100%
    );
    transform: translate(-50%, -50%);
    filter: blur(1px);
}
@keyframes flarePulse {
    0%, 100% { 
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.9);
    }
    50% { 
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
}
/* Multiplier 3D text effect */
.multiplier-3d {
    font-family: 'Arial Black', sans-serif;
    color: #ffb938;
    text-shadow: 
        0 1px 0 #ff9500,
        0 2px 0 #ff8c00,
        0 3px 0 #ff7700,
        0 4px 0 #ff6600,
        0 5px 0 #e85d00,
        0 6px 0 #cc5200,
        0 7px 0 #b34700,
        0 8px 10px rgba(0, 0, 0, 0.6),
        0 10px 20px rgba(0, 0, 0, 0.5),
        0 15px 30px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(255, 185, 56, 0.8),
        0 0 60px rgba(255, 153, 0, 0.5);
    -webkit-text-stroke: 2px #ff6600;
    text-stroke: 2px #ff6600;
    animation: pulseglow 2s ease-in-out infinite alternate;
    transition: all 0.5s ease;
}
/* Wait state for multiplier */
.multiplier-wait {
    color: #9ca3af !important;
    text-shadow: 
        0 1px 0 #6b7280,
        0 2px 0 #4b5563,
        0 3px 0 #374151,
        0 4px 0 #1f2937,
        0 5px 8px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(156, 163, 175, 0.5) !important;
    -webkit-text-stroke: 2px #4b5563 !important;
    text-stroke: 2px #4b5563 !important;
    animation: none !important;
}
/* Wait state for cashout values */
.cashout-wait {
    color: #9ca3af !important;
    opacity: 0.5 !important;
    text-shadow: 0 0 10px rgba(156, 163, 175, 0.3) !important;
    transition: all 0.5s ease !important;
}
/* Star effect */
.star {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: twinkle 4s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}
/* Main content layer management */
.content-layer {
    position: relative;
    z-index: 10;
}
/* Desktop decorative text */
.decorative-text {
    position: absolute;
    color: rgba(255, 255, 255, 0.02);
    font-size: 8rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    pointer-events: none;
    z-index: -1;
    user-select: none;
}
/* Status text gradient */
.text-gradient {
    background: linear-gradient(90deg, 
        #ffffff 0%, 
        #e0b3ff 25%, 
        #ffffff 50%, 
        #e0b3ff 75%, 
        #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: textshine 4s ease-in-out infinite;
}
/* Glass effect */
.glass-panel {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 5;
}
/* Desktop glow effects */
@media (min-width: 1024px) {
    .desktop-glow {
        position: fixed;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        filter: blur(100px);
        opacity: 0.2;
        pointer-events: none;
        z-index: 1;
    }
    .glow-purple {
        background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, transparent 70%);
        top: -200px;
        left: -200px;
        animation: glowMove1 20s ease-in-out infinite;
    }
    .glow-pink {
        background: radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, transparent 70%);
        bottom: -200px;
        right: -200px;
        animation: glowMove2 25s ease-in-out infinite;
    }
    .glow-blue {
        background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: glowPulse 15s ease-in-out infinite;
    }
    @keyframes glowMove1 {
        0%, 100% {
            transform: translate(0, 0) scale(1);
        }
        33% {
            transform: translate(100px, 50px) scale(1.1);
        }
        66% {
            transform: translate(-50px, 100px) scale(0.9);
        }
    }
    @keyframes glowMove2 {
        0%, 100% {
            transform: translate(0, 0) scale(1);
        }
        33% {
            transform: translate(-100px, -50px) scale(0.9);
        }
        66% {
            transform: translate(50px, -100px) scale(1.1);
        }
    }
    @keyframes glowPulse {
        0%, 100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.2;
        }
        50% {
            transform: translate(-50%, -50%) scale(1.2);
            opacity: 0.3;
        }
    }
}
/* Footer glass effect */
.footer-glass {
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.02) 0%, 
        rgba(147, 51, 234, 0.05) 50%,
        rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* Flame effect */
.rocket-flame {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 30px solid #ff6b35;
    animation: flameflicker 0.2s ease-in-out infinite alternate;
}
/* Floating particles */
.particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
    animation: floatParticle 10s infinite ease-in-out;
}
@keyframes floatParticle {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(0);
        opacity: 0;
    }
    10% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(0);
        opacity: 0;
    }
}
.particle:nth-child(1) { --x: -80px; --y: -60px; animation-delay: 0s; }
.particle:nth-child(2) { --x: 80px; --y: -40px; animation-delay: 1.5s; }
.particle:nth-child(3) { --x: -60px; --y: 70px; animation-delay: 3s; }
.particle:nth-child(4) { --x: 70px; --y: 60px; animation-delay: 4.5s; }
.particle:nth-child(5) { --x: -90px; --y: 10px; animation-delay: 6s; }
.particle:nth-child(6) { --x: 90px; --y: -10px; animation-delay: 7.5s; }
.particle:nth-child(7) { --x: -50px; --y: -80px; animation-delay: 2s; }
.particle:nth-child(8) { --x: 50px; --y: 80px; animation-delay: 5s; }
/* Inner glow around multiplier */
.multiplier-glow {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    pointer-events: none;
}
.multiplier-glow::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 60%;
    background: radial-gradient(
        circle,
        rgba(255, 185, 56, 0.3) 0%,
        rgba(255, 153, 0, 0.15) 30%,
        rgba(255, 185, 56, 0.05) 50%,
        transparent 70%
    );
    filter: blur(25px);
    animation: pulseglow 2s ease-in-out infinite alternate;
}
/* Gaskan Bosku styles */
.status-gaskan {
    background: linear-gradient(45deg, #10b981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(16, 185, 129, 0.8);
    animation: pulseglow 1.5s ease-in-out infinite alternate;
}
/* Kemungkinan keluar grid */
.kemungkinan-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.375rem;
}
@media (max-width: 380px) {
    .kemungkinan-grid {
        gap: 0.25rem;
    }
}
.kemungkinan-item {
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.kemungkinan-item.win {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.1) 100%);
    border-color: rgba(16, 185, 129, 0.5);
}
.kemungkinan-item.lose {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%);
    border-color: rgba(239, 68, 68, 0.5);
}
.kemungkinan-item::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shine 3s ease-in-out infinite;
}
/* Mobile emoji icons */
.emoji-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
@media (max-width: 380px) {
    .emoji-icon {
        font-size: 1.25rem;
    }
}