@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800;900&family=Inter:wght@300;400;600;700&display=swap');

        body {
            font-family: 'Inter', sans-serif;
            user-select: none;
            -webkit-user-select: none;
            touch-action: none; /* Previene scroll en móviles */
            overflow: hidden;
            background-color: #020617;
        }

        .font-orbitron { font-family: 'Orbitron', sans-serif; }

        .hud-glass {
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
        }

        .hud-glass-red {
            background: rgba(40, 10, 15, 0.85);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(239, 68, 68, 0.4);
        }

        .damage-vignette {
            pointer-events: none;
            box-shadow: inset 0 0 0px rgba(239, 68, 68, 0);
            transition: box-shadow 0.15s ease-out;
        }
        .damage-vignette.active { box-shadow: inset 0 0 120px rgba(239, 68, 68, 0.9); }

        .hitmarker {
            opacity: 0; transform: scale(0.5) rotate(45deg);
            transition: transform 0.08s ease-out, opacity 0.15s ease-out;
        }
        .hitmarker.active { opacity: 1; transform: scale(1.2) rotate(45deg); }

        #three-canvas { display: block; width: 100vw; height: 100vh; }

        #minimap {
            display: block;
            width: 130px;
            height: 130px;
            image-rendering: -webkit-optimize-contrast;
        }
        @media (max-height: 480px) {
            #minimap { width: 90px; height: 90px; }
        }

        .pulse-glow { animation: pulseGlowDot 2s infinite ease-in-out; }
        @keyframes pulseGlowDot {
            0%, 100% { box-shadow: 0 0 4px rgba(52, 211, 153, 0.6); }
            50% { box-shadow: 0 0 10px rgba(52, 211, 153, 1); }
        }

        /* Floating Text Animations */
        .floating-text {
            position: absolute;
            font-family: 'Orbitron', sans-serif;
            font-weight: 900;
            pointer-events: none;
            animation: floatUp 1s ease-out forwards;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
            z-index: 25;
        }
        @keyframes floatUp {
            0% { opacity: 1; transform: translateY(0) scale(1); }
            100% { opacity: 0; transform: translateY(-40px) scale(1.2); }
        }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.6); }
        ::-webkit-scrollbar-thumb { background: rgba(239, 68, 68, 0.5); border-radius: 4px; }