:root {
    --bg-deep: #05070a;
    --accent-cyan: #00ffff;
    --accent-magenta: #ff0055;
    --glass-bg: rgba(10, 20, 32, 0.7);
    --glass-border: rgba(0, 255, 255, 0.2);
    --text-main: #e0e6ed;
}

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-deep);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'B612', sans-serif;
    color: var(--text-main);
}

#game-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: 
        radial-gradient(circle at 20% 30%, rgba(0, 255, 255, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 0, 85, 0.05) 0%, transparent 40%),
        radial-gradient(circle at center, #0a0f18 0%, #020305 100%);
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.5);
    position: relative;
}

#game-container::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3ExternalResourcesRequired='false'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
}

canvas {
    display: block;
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.15));
}