/* Base styles - body, html, canvas basics */
body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, 
        rgba(138, 43, 226, 0.04) 0%, 
        rgba(0, 191, 255, 0.02) 30%, 
        rgba(75, 0, 130, 0.03) 60%,
        rgba(0, 0, 0, 0.98) 100%), 
        #000000;
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html.custom-cursor-enabled,
html.custom-cursor-enabled body,
html.custom-cursor-enabled * {
    cursor: none !important;
}

html.game-cursor-hidden,
html.game-cursor-hidden body,
html.game-cursor-hidden * {
    cursor: none !important;
}

#custom-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 32px;
    height: auto;
    pointer-events: none;
    z-index: 2147483647;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transform-origin: top left;
    transition: opacity 0.1s ease, filter 0.08s ease;
    will-change: transform, filter;
    filter: drop-shadow(0 0 5px rgba(245, 208, 132, 0.18)) brightness(1);
}

#custom-cursor.is-visible {
    opacity: 1;
}

#custom-cursor.is-hovering {
    animation: custom-cursor-wash 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(245, 208, 132, 0.34)) brightness(1.12) saturate(1.08);
}

@keyframes custom-cursor-wash {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(245, 208, 132, 0.34)) brightness(1.08) saturate(1.06);
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(255, 226, 168, 0.42)) brightness(1.2) saturate(1.12);
    }
}

canvas {
    display: block;
}

canvas.game-canvas {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

canvas.game-canvas.is-visible {
    opacity: 1;
}

/* Utility classes */
.hidden { 
    opacity: 0; 
    pointer-events: none; 
}

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

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-25px); }
    60% { transform: translateY(-12px); }
}

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

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

@keyframes pulse-danger {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

@keyframes danger-wave {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.95; }
}

/* Global state classes */
body.intro-active #ui-container,
body.intro-active #controls-container {
    display: none !important;
}

body.mobile-debug #debug-info {
    display: block;
}

body.ui-on #mobile-pause-button {
    opacity: 1;
    visibility: visible;
}

body.ui-on #ui-container {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    pointer-events: none;
}

body.ui-on.controls-on #controls-container {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}