* {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #030712;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            color: #f3f4f6;
            touch-action: none;
        }
        #gameCanvas {
            display: block;
            width: 100vw;
            height: 100vh;
            cursor: crosshair;
            touch-action: none;
        }
        .glass-panel {
            background: rgba(8, 14, 26, 0.75);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 240, 255, 0.15);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
        }
        .glass-btn {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.85));
            border: 1px solid rgba(56, 189, 248, 0.25);
            transition: all 0.15s ease-out;
        }
        .glass-btn:hover:not(:disabled) {
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.3), rgba(56, 189, 248, 0.25));
            border-color: rgba(56, 189, 248, 0.8);
            box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
            transform: translateY(-1px);
        }
        .glass-btn:active:not(:disabled) {
            transform: translateY(0);
        }
        .glass-btn:disabled {
            opacity: 0.35;
            cursor: not-allowed;
            border-color: rgba(100, 116, 139, 0.2);
        }
        @keyframes pulse-red-glow {
            0%, 100% { border-color: rgba(239, 68, 68, 0.4); box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
            50% { border-color: rgba(239, 68, 68, 0.9); box-shadow: 0 0 20px rgba(239, 68, 68, 0.7); }
        }
        .event-active-pulse {
            animation: pulse-red-glow 1.2s infinite;
        }

        /* Leave the minimap below the HUD where both occupy the right edge. */
        @media (max-width: 1272px) and (orientation: landscape) {
            .minimap-container {
                top: 4rem !important;
            }
        }

        /* Mobile Landscape Optimization */
        @media (max-height: 500px) and (orientation: landscape) {
            .top-bar-container {
                top: 0.25rem !important;
            }
            .top-bar-container > div {
                padding: 0.25rem 0.5rem !important;
                font-size: 0.65rem !important;
            }
            .bottom-bar-container {
                bottom: 0.25rem !important;
            }
            .bottom-bar-container .glass-panel {
                padding: 0.25rem !important;
                gap: 0.25rem !important;
            }
            .bottom-bar-container .glass-btn {
                padding: 0.35rem 0.5rem !important;
                min-width: 40px !important;
            }
            .bottom-bar-container .glass-btn span:first-child {
                font-size: 7px !important;
            }
            .bottom-bar-container .glass-btn i {
                font-size: 0.7rem !important;
            }
            .bottom-bar-container .glass-btn span:last-child {
                font-size: 9px !important;
            }
            .minimap-container {
                top: 3.5rem !important;
                right: 0.25rem !important;
            }
            .minimap-container canvas {
                width: 80px !important;
                height: 80px !important;
            }
            .minimap-buttons {
                font-size: 8px !important;
            }
            .minimap-buttons button {
                padding: 0.15rem 0.35rem !important;
            }
        }

        /* Mobile Portrait Warning */
        @media (orientation: portrait) {
            .rotate-warning {
                display: flex !important;
            }
            #gameCanvas, .top-bar-container, .bottom-bar-container, .minimap-container {
                display: none !important;
            }
        }

        .rotate-warning {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(3, 7, 18, 0.95);
            z-index: 9999;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #f3f4f6;
            text-align: center;
            padding: 2rem;
        }

        .rotate-warning i {
            font-size: 4rem;
            margin-bottom: 1rem;
            animation: rotate-phone 2s infinite;
        }

        @keyframes rotate-phone {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(90deg); }
        }

        /* Small mobile landscape - hide some elements to prevent overlap */
        @media (max-width: 700px) and (orientation: landscape) {
            .hide-on-small {
                display: none !important;
            }
            .top-bar-container {
                width: 98% !important;
            }
            .top-bar-container > div:first-child {
                gap: 0.5rem !important;
            }
        }

        /* Extra small landscape phones */
        @media (max-height: 380px) and (orientation: landscape) {
            .bottom-bar-container .glass-btn {
                min-width: 36px !important;
                padding: 0.25rem 0.35rem !important;
            }
            .bottom-bar-container .glass-btn span:first-child {
                display: none !important;
            }
            .bottom-bar-container .glass-btn span:last-child {
                font-size: 8px !important;
                margin-top: 0 !important;
            }
            .bottom-bar-container .glass-panel {
                gap: 0.15rem !important;
                padding: 0.2rem !important;
                overflow-x: auto !important;
                max-width: 95vw !important;
            }
        }

        /* Scrollable bottom bar for very small screens */
        @media (max-width: 600px) and (orientation: landscape) {
            .bottom-bar-container .glass-panel {
                overflow-x: auto !important;
                max-width: 95vw !important;
                -webkit-overflow-scrolling: touch;
            }
            .bottom-bar-container .glass-panel::-webkit-scrollbar {
                display: none;
            }
        }