/* ═══════════════════════════════════════════════════════════════════════
    MINEDEV — combat HUD: crosshair, health, ammo, damage, ADS, death, tips, card pickup, game-active
    Split from original index.html lines 1141-1851
    ═══════════════════════════════════════════════════════════════════════ */

        /* ── INFO-HEIST REVISION: HUD updates ── */
        .hud-row.enemy-row .hud-value { color: #ff6655; }
        .hud-row.bank-row .hud-value { color: #44ff88; }
        #enemy-indicator {
            position: fixed; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 100vw; height: 100vh;
            pointer-events: none; z-index: 28;
            display: none;
        }
        #enemy-indicator .arrow {
            position: absolute; top: 50%; left: 50%;
            font-size: 24px; color: #ff4444;
            text-shadow: 0 0 12px rgba(255,60,60,0.8);
            transform-origin: center;
            transition: opacity 0.3s;
        }
        #steal-toast {
            position: fixed; top: 45%; left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            font-size: 18px; font-variation-settings: "wght" 700;
            color: #ff4444; letter-spacing: 2px; text-transform: uppercase;
            text-shadow: 0 0 20px rgba(255,40,40,0.9);
            z-index: 33; opacity: 0; pointer-events: none;
            transition: opacity 0.3s ease, transform 0.4s ease;
        }
        #steal-toast.visible {
            opacity: 1; transform: translate(-50%, -50%) scale(1);
        }



        /* ── COMBAT REVISION: crosshair, health, damage, death ── */
        #player-health-container { display: none !important; /* replaced by health-bar-container */
            position: fixed; top: 50px; left: 50%;
            transform: translateX(-50%);
            width: 260px; z-index: 30;
            display: none; opacity: 0;
            transition: opacity 0.5s ease;
        }
        #player-health-container.visible { display: block; opacity: 1; }
        .health-bar-bg {
            width: 100%; height: 8px;
            background: rgba(0,0,0,0.6);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 4px; overflow: hidden;
        }
        .health-bar-fill {
            height: 100%; transition: width 0.3s ease;
            background: linear-gradient(90deg, #44ff66, #88ffaa);
        }
        .health-bar-fill.medium { background: linear-gradient(90deg, #ffaa44, #ffdd66); }
        .health-bar-fill.low    { background: linear-gradient(90deg, #ff4444, #ff8866); }
        .health-label {
            font-size: 8px; letter-spacing: 2px; text-transform: uppercase;
            color: rgba(255,255,255,0.5); margin-bottom: 3px; text-align: center;
        }

        /* Enemy floating health bar */
        #enemy-health-container {
            position: fixed; top: 0; left: 0; display: none !important;
            width: 80px; z-index: 29;
            display: none; pointer-events: none;
            transform: translate(-50%, -100%);
        }
        #enemy-health-container.visible { display: block; }
        #enemy-health-container .health-bar-bg { height: 4px; border-radius: 2px; }
        #enemy-health-container .health-bar-fill {
            background: linear-gradient(90deg, #ff4444, #ff8866);
        }

        /* Damage flash */
        #damage-flash {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: radial-gradient(ellipse at center, transparent 30%, rgba(255,0,0,0.5) 100%);
            pointer-events: none; z-index: 31; opacity: 0;
            transition: opacity 0.1s ease;
        }
        #damage-flash.flash { opacity: 1; }

        /* Death screen */
        #death-screen {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0,0,0,0.85); z-index: 40;
            display: none; opacity: 0;
            flex-direction: column; align-items: center; justify-content: center;
            transition: opacity 0.6s ease;
        }
        #death-screen.visible { display: flex; opacity: 1; }
        #death-screen .death-title {
            font-size: 64px; color: #ff4444; font-variation-settings: "wght" 900;
            letter-spacing: 4px; margin-bottom: 16px;
            text-shadow: 0 0 30px rgba(255,60,60,0.6);
        }
        #death-screen .death-sub {
            font-size: 13px; color: rgba(255,255,255,0.6);
            letter-spacing: 2px; text-transform: uppercase;
            margin-bottom: 32px;
        }
        #death-screen .respawn-btn {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.3);
            color: #fff; padding: 12px 32px; border-radius: 50px;
            font-family: inherit; font-size: 12px; letter-spacing: 3px;
            text-transform: uppercase; cursor: pointer;
            transition: all 0.3s ease;
        }
        #death-screen .respawn-btn:hover {
            background: rgba(255,255,255,0.2);
            border-color: rgba(255,255,255,0.6);
        }

        /* Enemy inbound warning — animated */
        #enemy-warning {
            position: fixed; top: 25%; left: 50%;
            transform: translate(-50%, -50%) scale(0.5);
            font-size: 32px; font-variation-settings: "wght" 900;
            color: #ff4444; letter-spacing: 6px; text-transform: uppercase;
            text-shadow: 0 0 30px rgba(255,60,60,0.8), 0 0 60px rgba(255,60,60,0.4);
            z-index: 35; opacity: 0; pointer-events: none;
        }
        #enemy-warning.visible {
            animation: enemy-warning-anim 3s ease-out forwards;
        }
        @keyframes enemy-warning-anim {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
            15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
            20% { transform: translate(-50%, -50%) scale(1); }
            80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
        }
        /* Underline removed per user request */
        #enemy-warning .sub {
            display: block; font-size: 11px; letter-spacing: 3px;
            color: rgba(255,255,255,0.6); margin-top: 8px;
            text-align: center;
        }

        /* Kill / hit feed */
        #kill-feed {
            position: fixed; top: 110px; right: 24px;
            z-index: 30; display: flex; flex-direction: column;
            gap: 4px; align-items: flex-end; pointer-events: none;
        }
        .kill-feed-item {
            font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
            color: rgba(255,255,255,0.8); padding: 4px 10px;
            background: rgba(0,0,0,0.5); border-radius: 4px;
            border-left: 2px solid;
            opacity: 0; transform: translateX(20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .kill-feed-item.visible { opacity: 1; transform: translateX(0); }
        .kill-feed-item.hit  { border-left-color: #ffaa44; }
        .kill-feed-item.kill { border-left-color: #ff4444; }
        .kill-feed-item.info { border-left-color: #44aaff; }

        /* ── POINTER LOCK HINT ──────────────────── */
        #pointer-lock-hint {
            position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
            font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
            color: rgba(255,255,255,0.5); pointer-events: none; z-index: 31;
            background: rgba(0,0,0,0.5); padding: 6px 16px; border-radius: 50px;
            border: 1px solid rgba(255,255,255,0.1);
            opacity: 0; transition: opacity 0.5s ease;
        }
        #pointer-lock-hint.visible { opacity: 1; }

        /* ── TPS CROSSHAIR ──────────────────────── */
        #crosshair {
            position: fixed; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 60px; height: 60px;
            z-index: 30; pointer-events: none;
            opacity: 0; transition: opacity 0.3s ease;
        }
        #crosshair.visible { opacity: 1; }
        #crosshair .ch-top, #crosshair .ch-bottom,
        #crosshair .ch-left, #crosshair .ch-right {
            position: absolute; background: rgba(255,255,255,0.9);
            box-shadow: 0 0 4px rgba(0,0,0,0.8);
            transition: all 0.08s ease;
        }
        #crosshair .ch-top    { width: 1.5px; height: 8px; left: 50%; top: 8px; transform: translateX(-50%); }
        #crosshair .ch-bottom { width: 1.5px; height: 8px; left: 50%; bottom: 8px; transform: translateX(-50%); }
        #crosshair .ch-left  { height: 1.5px; width: 8px; top: 50%; left: 8px; transform: translateY(-50%); }
        #crosshair .ch-right { height: 1.5px; width: 8px; top: 50%; right: 8px; transform: translateY(-50%); }
        #crosshair .dot {
            position: absolute; top: 50%; left: 50%;
            width: 3px; height: 3px; background: rgba(255,255,255,0.9);
            border-radius: 50%; transform: translate(-50%, -50%);
            box-shadow: 0 0 4px rgba(0,0,0,0.8);
        }
        #hit-marker {
            position: absolute; top: 50%; left: 50%;
            width: 16px; height: 16px;
            transform: translate(-50%, -50%) rotate(45deg);
            opacity: 0; transition: opacity 0.05s ease;
        }
        #hit-marker::before, #hit-marker::after {
            content: ''; position: absolute; background: #ff4444;
            box-shadow: 0 0 4px rgba(255,60,60,0.9);
        }
        #hit-marker::before { width: 100%; height: 2px; top: 50%; transform: translateY(-50%); }
        #hit-marker::after  { width: 2px; height: 100%; left: 50%; transform: translateX(-50%); }
        #hit-marker.flash { opacity: 1; }
        #crosshair.ads .ch-top    { height: 5px; top: 12px; }
        #crosshair.ads .ch-bottom { height: 5px; bottom: 12px; }
        #crosshair.ads .ch-left   { width: 5px; left: 12px; }
        #crosshair.ads .ch-right  { width: 5px; right: 12px; }

        /* ── AMMO HUD ───────────────────────────── */
        #ammo-hud {
            position: fixed; bottom: 70px; right: 60px;
            z-index: 30; pointer-events: none;
            display: none; opacity: 0;
            transition: opacity 0.5s ease;
            text-align: right;
        }
        #ammo-hud.visible { display: block; opacity: 1; }
        #ammo-current {
            font-size: 36px; font-variation-settings: "wght" 700;
            color: #fff; letter-spacing: -1px; line-height: 1;
        }
        #ammo-current.empty { color: #ff4444; }
        #ammo-current.low   { color: #ffaa44; }
        #ammo-sep {
            font-size: 12px; color: rgba(255,255,255,0.3);
            font-variation-settings: "wght" 300; display: inline;
        }
        #ammo-reserve {
            font-size: 18px; font-variation-settings: "wght" 400;
            color: rgba(255,255,255,0.5); letter-spacing: -0.5px; display: inline;
        }
        #reload-bar-wrap {
            width: 80px; height: 2px;
            background: rgba(255,255,255,0.1);
            border-radius: 1px; margin-top: 6px;
            overflow: hidden; display: none; margin-left: auto;
        }
        #reload-bar {
            height: 100%; width: 0%;
            background: linear-gradient(90deg, #88aaff, #aaccff);
            border-radius: 1px; transition: width 0.05s linear;
        }
        #reload-label {
            font-size: 8px; letter-spacing: 3px; text-transform: uppercase;
            color: #88aaff; margin-top: 4px; display: none;
        }

        /* ── DIRECTIONAL DAMAGE ─────────────────── */
        .dmg-dir {
            position: fixed; pointer-events: none; z-index: 31;
            opacity: 0; transition: opacity 0.1s ease;
        }
        .dmg-dir.flash { opacity: 1; }
        #dmg-top { top: 8vh; left: 50%; transform: translateX(-50%); width: 60px; height: 40px; background: linear-gradient(to bottom, rgba(255,30,30,0.7), transparent); clip-path: polygon(50% 0%, 20% 100%, 80% 100%); }
        #dmg-bottom { bottom: 8vh; left: 50%; transform: translateX(-50%); width: 60px; height: 40px; background: linear-gradient(to top, rgba(255,30,30,0.7), transparent); clip-path: polygon(50% 100%, 20% 0%, 80% 0%); }
        #dmg-left { left: 5vw; top: 50%; transform: translateY(-50%); width: 40px; height: 60px; background: linear-gradient(to right, rgba(255,30,30,0.7), transparent); clip-path: polygon(0% 50%, 100% 20%, 100% 80%); }
        #dmg-right { right: 5vw; top: 50%; transform: translateY(-50%); width: 40px; height: 60px; background: linear-gradient(to left, rgba(255,30,30,0.7), transparent); clip-path: polygon(100% 50%, 0% 20%, 0% 80%); }

        /* ── ADS VIGNETTE ───────────────────────── */
        #ads-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            pointer-events: none; z-index: 29;
            background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
            opacity: 0; transition: opacity 0.12s ease;
        }
        #ads-overlay.active { opacity: 1; }





        /* ── PICKUP NOTIFICATION: animates away from center ── */
        #pickup-notification {
            position: fixed; top: 45%; left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            font-family: 'Inter', sans-serif;
            font-size: 16px; font-weight: 700; color: #88aaff;
            letter-spacing: 2px; text-transform: uppercase;
            text-shadow: 0 0 12px rgba(80,120,200,0.8);
            z-index: 33; opacity: 0; pointer-events: none;
        }
        #pickup-notification.visible {
            animation: pickup-anim 1.2s ease-out forwards;
        }
        @keyframes pickup-anim {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
            10% { opacity: 1; transform: translate(-50%, -80%) scale(1); }
            85% { opacity: 1; transform: translate(-50%, -80%) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -120%) scale(0.9); }
        }

        /* ── ASSET LOADING SCREEN (black + circle loader) ── */
        #asset-loader {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: #000; z-index: 100000;
            display: none; opacity: 0;
            flex-direction: column; align-items: center; justify-content: center;
            transition: opacity 0.6s ease;
        }
        #asset-loader.visible { display: flex; opacity: 1; }
        #asset-loader .loader-circle {
            width: 60px; height: 60px;
            border: 2px solid rgba(255,255,255,0.15);
            border-top-color: #ffffff;
            border-radius: 50%;
            animation: loader-spin 1s linear infinite;
        }
        @keyframes loader-spin { to { transform: rotate(360deg); } }
        #asset-loader .loader-text {
            margin-top: 24px;
            font-family: 'Inter', sans-serif;
            font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
            color: rgba(255,255,255,0.5);
        }
        #asset-loader .loader-pct {
            font-size: 14px; color: #fff; margin-top: 4px;
            font-weight: 600;
        }

        /* ── HIT EFFECTS: screen shake + blur ── */
        #hit-blur {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
            pointer-events: none; z-index: 27;
            transition: backdrop-filter 0.1s ease;
        }
        #hit-blur.active { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

        #screen-shake {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            pointer-events: none; z-index: 26;
        }
        #screen-shake.shake { animation: screen-shake-hard 0.4s ease-out; }
        @keyframes screen-shake-hard {
            0% { transform: translate(0, 0) rotate(0deg); }
            10% { transform: translate(-8px, 4px) rotate(-0.5deg); }
            20% { transform: translate(8px, -4px) rotate(0.5deg); }
            30% { transform: translate(-6px, 6px) rotate(-0.3deg); }
            40% { transform: translate(6px, -6px) rotate(0.3deg); }
            50% { transform: translate(-4px, 4px) rotate(-0.2deg); }
            60% { transform: translate(4px, -4px) rotate(0.2deg); }
            70% { transform: translate(-2px, 2px) rotate(0deg); }
            80% { transform: translate(2px, -2px) rotate(0deg); }
            90% { transform: translate(-1px, 1px) rotate(0deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
        }
        /* UI glitch effect when hit */
        #game-ui.glitch {
            animation: ui-glitch 0.2s steps(2) 1;
        }
        @keyframes ui-glitch {
            0% { transform: translate(0, 0); filter: hue-rotate(0deg); }
            25% { transform: translate(-3px, 2px); filter: hue-rotate(90deg) contrast(1.5); }
            50% { transform: translate(3px, -2px); filter: hue-rotate(180deg) contrast(0.7); }
            75% { transform: translate(-2px, 1px); filter: hue-rotate(270deg) contrast(1.3); }
            100% { transform: translate(0, 0); filter: hue-rotate(0deg); }
        }

        /* Health bar flash when low */
        #health-bar-container.low-health {
            animation: health-flash 0.5s ease-in-out infinite;
        }
        @keyframes health-flash {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }



        /* ── GTA-STYLE TIP NOTIFICATION ── */
        #gta-tip {
            position: fixed; top: 80px; left: 50%;
            transform: translateX(-50%) translateY(-20px);
            background: rgba(3,3,6,0.85);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(136,170,255,0.3);
            border-radius: 8px;
            padding: 12px 24px;
            max-width: 400px;
            font-family: 'Inter', sans-serif;
            font-size: 12px; color: rgba(255,255,255,0.9);
            line-height: 1.5; text-align: center;
            z-index: 34; opacity: 0; pointer-events: none;
            transition: opacity 0.4s ease, transform 0.4s ease;
        }
        #gta-tip.visible {
            opacity: 1; transform: translateX(-50%) translateY(0);
        }
        #gta-tip .tip-label {
            font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
            color: #88aaff; margin-bottom: 4px; font-weight: 600;
        }

        /* ── FULL-SCREEN CARD PICKUP ── */
        #card-pickup-modal {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0,0,0,0.95); z-index: 100;
            display: none; opacity: 0;
            flex-direction: column; align-items: center; justify-content: center;
            transition: opacity 0.5s ease;
        }
        #card-pickup-modal.visible { display: flex; opacity: 1; }
        #card-pickup-modal .card-3d-container {
            perspective: 1000px;
            margin-bottom: 30px;
        }
        #card-pickup-modal .card-3d {
            width: 300px; height: 450px;
            transform-style: preserve-3d;
            transform: rotateY(0deg) rotateX(5deg);
            box-shadow: 0 0 60px rgba(255, 215, 0, 0.5);
            cursor: grab;
            transition: transform 0.1s ease-out;
            animation: card-animate-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        #card-pickup-modal .card-3d:active { cursor: grabbing; }
        @keyframes card-animate-in {
            0% { opacity: 0; transform: rotateY(180deg) rotateX(30deg) scale(0.3); }
            100% { opacity: 1; transform: rotateY(0deg) rotateX(5deg) scale(1); }
        }
        #card-pickup-modal .card-3d img {
            width: 100%; height: 100%; object-fit: cover;
            border-radius: 8px;
            border: 3px solid #ffd700;
        }
        #card-pickup-modal .pickup-title {
            font-size: 28px; font-weight: 900; color: #ffd700;
            letter-spacing: 4px; text-transform: uppercase;
            text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
            margin-bottom: 8px;
        }
        #card-pickup-modal .pickup-sub {
            font-size: 12px; color: rgba(255,255,255,0.6);
            letter-spacing: 2px; text-transform: uppercase;
            margin-bottom: 24px;
        }
        #card-pickup-modal .pickup-actions {
            display: flex; gap: 16px;
        }
        #card-pickup-modal .pickup-btn {
            background: rgba(255, 215, 0, 0.15);
            border: 1px solid rgba(255, 215, 0, 0.4);
            color: #ffd700; padding: 10px 24px; border-radius: 50px;
            font-family: inherit; font-size: 11px; letter-spacing: 2px;
            text-transform: uppercase; cursor: pointer;
            transition: all 0.3s ease;
        }
        #card-pickup-modal .pickup-btn:hover {
            background: rgba(255, 215, 0, 0.3);
            border-color: rgba(255, 215, 0, 0.8);
        }
        #card-pickup-modal .pickup-hint {
            font-size: 10px; color: rgba(255,255,255,0.3);
            letter-spacing: 2px; text-transform: uppercase;
            margin-top: 20px;
        }

        /* ── ADS FOCUS VIGNETTE ── */
        #ads-vignette {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: radial-gradient(ellipse at center,
                transparent 25%,
                rgba(0,0,0,0.3) 60%,
                rgba(0,0,0,0.7) 100%);
            pointer-events: none; z-index: 5;
            opacity: 0; transition: opacity 0.2s ease;
        }
        #ads-vignette.active { opacity: 1; }

        /* ── GAME UI: only visible in game ── */
        #game-ui {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            pointer-events: none; z-index: 28;
            opacity: 0; transition: opacity 0.4s ease;
        }
        body.game-active #game-ui { opacity: 1; }

        /* ── GAME UI: military minimalist (reference style) ── */

        /* Health bar (top-center, bigger) */
        #health-bar-container {
            position: fixed; top: 30px; left: 50%; transform: translateX(-50%);
            width: 280px;
        }
        #health-bar-container .health-label {
            font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
            color: rgba(255,255,255,0.7); margin-bottom: 4px;
            font-family: 'Inter', sans-serif; font-weight: 600;
            text-align: center;
        }
        #health-bar-bg {
            width: 100%; height: 6px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            overflow: hidden;
        }
        #health-bar-fill {
            height: 100%; width: 100%;
            background: #44ff66;
            transition: width 0.2s ease, background 0.2s ease;
        }
        #health-bar-fill.medium { background: #ffaa44; }
        #health-bar-fill.low { background: #ff4444; }

        /* Ammo counter (bottom-right) — weapon name + ammo */
        #ammo-counter {
            position: fixed; bottom: 50px; right: 80px;
            font-family: 'Inter', sans-serif;
            color: #fff;
            text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.7);
            text-align: right;
        }
        #ammo-counter .weapon-name {
            font-size: 17px; font-weight: 600; letter-spacing: 0.5px;
            margin-bottom: 3px; opacity: 0.9;
        }
        #ammo-counter .ammo-display {
            font-size: 32px; font-weight: 700; letter-spacing: 1px;
            display: flex; align-items: baseline; justify-content: flex-end; gap: 4px;
        }
        #ammo-counter .ammo-slash { font-size: 16px; opacity: 0.4; }
        #ammo-counter .ammo-reserve { font-size: 16px; opacity: 0.5; }
        #ammo-counter .fire-mode {
            font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
            opacity: 0.4; margin-top: 2px;
        }
        #ammo-counter.reloading .ammo-display { color: #ffaa44; }

        /* Info counter (top-left, compact) */
        #info-counter {
            position: fixed; top: 80px; left: 40px;
            font-family: 'Inter', sans-serif;
            font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
            color: rgba(255,255,255,0.6);
            text-shadow: 0 0 4px rgba(0,0,0,0.9);
        }
        #info-counter .info-row { margin-bottom: 1px; }
        #info-counter .info-val { color: #88aaff; font-weight: 600; }

        /* Crosshair (center) */
        #crosshair {
            position: fixed; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 24px; height: 24px;
            z-index: 30; pointer-events: none;
            opacity: 0; transition: opacity 0.3s ease;
        }
        body.game-active #crosshair { opacity: 0.8; }
        body.game-active #crosshair.ads { opacity: 1; }
        #crosshair::before, #crosshair::after {
            content: ""; position: absolute; background: #fff;
            box-shadow: 0 0 3px rgba(0,0,0,0.9);
        }
        #crosshair::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
        #crosshair::after { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }
        #crosshair .dot {
            position: absolute; top: 50%; left: 50%;
            width: 2px; height: 2px; background: #ff4444;
            border-radius: 50%; transform: translate(-50%, -50%);
            box-shadow: 0 0 4px rgba(255,60,60,0.8);
        }

        /* ── GAME ACTIVE: hide header + cursor when in-game ─ */
        /* Keep build-controls (rotate) + audio-ui (music) visible in game */
        body.game-active header,
        body.game-active #story-hud,
        body.game-active .copyright-text {
            opacity: 0; pointer-events: none; transition: opacity 0.3s;
        }
        /* build-controls stays visible in game, audio-ui hidden */
        body.game-active .build-controls {
            opacity: 1 !important; pointer-events: auto !important;
        }
        body.game-active .audio-ui {
            opacity: 0 !important; pointer-events: none !important;
        }
        body.game-active .cursor-dot,
        body.game-active .cursor-outline-wrapper,
        body.game-active .cursor-glow {
            display: none !important;
        }
        body.game-active { cursor: none !important; }
        body:not(.game-active) #crosshair { display: none !important; }

        /* ═══ v4.1: DIAGNOSTIC OVERLAY ═══ */
        #minedev-boot-debug {
            position: fixed; top: 12px; left: 12px; z-index: 9999999;
            background: rgba(0,0,0,0.92); color: #FFEFFF;
            font: 11px/1.5 'Inter', monospace;
            padding: 10px 14px; border-radius: 6px;
            border: 1px solid rgba(255,239,255,0.3);
            max-width: 420px; pointer-events: none;
            opacity: 0; transition: opacity 0.3s;
        }
        #minedev-boot-debug.visible { opacity: 1; }
        #minedev-boot-debug .ok { color: #7CFC7C; }
        #minedev-boot-debug .err { color: #FFA0A0; }

        /* ═══ v4.1: LANDING PAGE ═══ */
        #landing-screen {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: 9000; display: none; opacity: 0; overflow: hidden;
            background: #000; will-change: opacity;
        }
        #landing-screen.visible { display: block; }
        #landing-video {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            object-fit: cover; z-index: 0; filter: brightness(0.55) contrast(1.1);
        }
        #landing-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.85) 100%);
            z-index: 1; pointer-events: none;
        }
        #landing-content {
            position: relative; z-index: 2; width: 100%; height: 100%;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        #landing-logo {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            text-align: center; pointer-events: none;
        }
        #landing-logo img {
            width: clamp(280px, 38vw, 520px); height: auto;
            filter: brightness(0) invert(1); opacity: 0;
            will-change: transform, opacity, filter;
        }
        #landing-play-container {
            position: absolute; bottom: clamp(60px, 14vh, 130px); left: 50%;
            transform: translateX(-50%); display: flex; flex-direction: column;
            align-items: center; gap: 20px; opacity: 0; will-change: opacity;
        }
        #landing-play-btn {
            width: 110px; height: 110px; border-radius: 0;
            border: 2px solid rgba(255,255,255,0.5); background: rgba(0,0,0,0.45);
            backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
            color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: all 0.4s cubic-bezier(0.16,1,0.3,1); position: relative;
        }
        #landing-play-btn::before {
            content: ''; position: absolute; inset: -10px;
            border: 1px solid rgba(255,255,255,0.25); animation: landing-pulse 2.8s ease-in-out infinite;
        }
        @keyframes landing-pulse { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.12); opacity: 0; } }
        #landing-play-btn svg { width: 44px; height: 44px; margin-left: 6px; transition: transform 0.3s ease; }
        #landing-play-btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.85); transform: scale(1.06); }
        #landing-play-btn:hover svg { transform: scale(1.18); }
        #landing-play-label { color: rgba(255,255,255,0.75); font-size: 11px; letter-spacing: 5px; text-transform: uppercase; }
        #landing-music-credit {
            position: absolute; bottom: 32px; right: 32px; z-index: 3;
            background: rgba(0,0,0,0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 14px 20px;
            color: rgba(255,255,255,0.85); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
            opacity: 0; will-change: transform, opacity; pointer-events: none; max-width: 260px;
        }
        #landing-music-credit .credit-label { color: rgba(255,255,255,0.5); font-size: 9px; margin-bottom: 4px; letter-spacing: 3px; }
        #landing-music-credit .credit-name { color: #fff; font-size: 12px; letter-spacing: 1.5px; }
        #landing-video-popup {
            position: absolute; top: 50%; left: 32px; transform: translateY(-50%) scale(0.95);
            width: 340px; max-width: 90vw; background: rgba(3,3,3,0.92); backdrop-filter: blur(20px);
            border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); overflow: hidden; z-index: 9200;
            opacity: 0; box-shadow: 0 12px 40px rgba(0,0,0,0.6); display: none;
            font-family: 'Inter', sans-serif; pointer-events: auto; will-change: transform, opacity;
        }
        #landing-video-popup.visible { display: block; }
        #landing-video-popup .popup-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
        #landing-video-popup .popup-title { font-weight: 600; font-size: 12px; color: #fff; margin: 0; letter-spacing: 2px; text-transform: uppercase; }
        #landing-video-popup .popup-title .accent { color: #FFEFFF; }
        #landing-video-popup .close-button { background: none; border: none; color: rgba(255,255,255,0.7); font-size: 20px; cursor: pointer; }
        #landing-video-popup .video-container { width: 100%; height: 160px; background: #000; overflow: hidden; }
        #landing-video-popup .video-placeholder { width: 100%; height: 100%; }
        #landing-video-popup .video-placeholder img { width: 100%; height: 100%; object-fit: cover; }
        #landing-video-popup .popup-content { padding: 14px 16px; }
        #landing-video-popup .marquee-container { overflow: hidden; white-space: nowrap; margin-bottom: 10px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
        #landing-video-popup .marquee { display: inline-block; animation: popup-marquee 22s linear infinite; padding-left: 100%; font-size: 12px; font-weight: 600; color: #FFEFFF; }
        @keyframes popup-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
        #landing-video-popup .popup-description { font-size: 11px; line-height: 1.5; color: rgba(255,255,255,0.75); margin-bottom: 10px; }
        #landing-video-popup .quote-text { font-size: 10px; color: rgba(255,255,255,0.6); font-style: italic; border-left: 2px solid #FFEFFF; padding-left: 10px; margin-bottom: 8px; }
        #landing-video-popup .quote-text .author { display: block; margin-top: 4px; color: rgba(255,255,255,0.4); font-style: normal; font-size: 9px; text-transform: uppercase; }
        #landing-video-popup .tech-stats { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.08); }
        #landing-video-popup .tech-stat { text-align: center; flex: 1; }
        #landing-video-popup .tech-stat .stat-value { display: block; font-size: 16px; color: #FFEFFF; font-weight: 700; }
        #landing-video-popup .tech-stat .stat-label { display: block; font-size: 8px; color: rgba(255,255,255,0.4); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }
        /* Detection meter */
        #detection-meter { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 40; display: none; align-items: center; gap: 10px; background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 6px 16px 6px 10px; opacity: 0; transition: opacity 0.3s ease; }
        #detection-meter.visible { display: flex; opacity: 1; }
        #detection-meter .detection-icon { width: 18px; height: 18px; color: rgba(255,255,255,0.6); }
        #detection-meter .detection-bar { width: 80px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
        #detection-meter .detection-fill { height: 100%; width: 0%; border-radius: 2px; background: rgba(255,255,255,0.5); transition: width 0.1s linear, background 0.3s ease; }
        #detection-meter.alert .detection-icon, #detection-meter.alert .detection-fill { color: #ffcc44; background: #ffcc44; }
        #detection-meter.combat .detection-icon { color: #ff4444; animation: detection-pulse 0.8s ease-in-out infinite; }
        #detection-meter.combat .detection-fill { background: #ff4444; }
        @keyframes detection-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }
        @media (max-width: 768px) {
            #landing-logo img { width: clamp(180px,50vw,320px); }
            #landing-play-btn { width: 80px; height: 80px; }
            #landing-video-popup { width: 280px; left: 16px; top: auto; bottom: 120px; }
        }

        /* v4.1: Landing active state — header visible above video */
        body.landing-active header { z-index: 9300 !important; opacity: 1 !important; pointer-events: auto !important; }
        body.landing-active #main-content { z-index: 9100 !important; pointer-events: none !important; }
        body.landing-active #main-content .copyright-text { pointer-events: auto !important; }
        body.landing-active:not(.portal-open) .cursor-dot { background-color: var(--text-color) !important; }
        body.landing-active:not(.portal-open) .cursor-outline { border-color: rgba(255,255,255,0.6) !important; }
        /* Hide header when in-game */
        body.game-active header, body.game-active #landing-screen, body.game-active #main-content { opacity: 0 !important; pointer-events: none !important; }