body {
            margin: 0;
            padding: env(safe-area-inset-top) env(safe-area-inset-right)
                env(safe-area-inset-bottom) env(safe-area-inset-left);
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            min-height: 100dvh;
            background: #000000;
            font-family: 'Roboto Mono', monospace;
            color: #fff;
            overflow: hidden;
        }

        .boot-overlay {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #0a0a0a;
            color: #e8e8e8;
            transition: opacity 0.35s ease, visibility 0.35s ease;
        }

        .boot-overlay.boot-overlay--done {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .boot-overlay__inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            font-size: 13px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .boot-overlay__spinner {
            width: 36px;
            height: 36px;
            border: 3px solid rgba(255, 255, 255, 0.12);
            border-top-color: #ff1744;
            border-radius: 50%;
            animation: boot-spin 0.75s linear infinite;
        }

        @keyframes boot-spin {
            to {
                transform: rotate(360deg);
            }
        }

        .noscript-notice {
            position: fixed;
            inset: 0;
            z-index: 10001;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            text-align: center;
            font-family: 'Roboto Mono', monospace;
            font-size: 15px;
            line-height: 1.5;
            background: #0a0a0a;
            color: #ff8a80;
        }

        #gameContainer {
            text-align: center;
            position: relative;
        }

        canvas {
            display: block;
            margin: 0 auto;
            cursor: none;
            /* Hide system cursor so custom crosshair takes precedence */
        }

        #gpuCanvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            /* Overlay layer (snow, rain, fog) - renders on top of gameplay */
            background: transparent;
            pointer-events: none;
            /* Let clicks pass through to game canvas */
            /* Hidden by default, will be shown when WebGPU is active */
            display: none;
        }

        #uiCanvas {
            position: fixed;
            top: 0;
            left: 0;
            transform: none;
            z-index: 2000;
            /* UI layer - renders on top of everything, including HTML overlays (z-index 1000) */
            background: transparent;
            pointer-events: none;
            /* Default to pass-through, enable for menus via JS */
        }

        #gameCanvas {
            position: relative;
            z-index: 1;
            /* Gameplay/UI/Interaction layer */
        }