/* ==================== FORCE MOBILE ON SMALL SCREENS ==================== */
/* This CSS applies to ALL screens <= 768px regardless of detection */

@media (max-width: 768px) {
    html {
        font-size: 16px !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    body {
        width: 100vw !important;
        height: 100vh !important;
        overflow: hidden !important;
        position: fixed !important;
        font-size: 14px !important;
    }

    /* Force all HUD elements to smaller size */
    .hud-corner {
        font-size: 11px !important;
        transform: scale(0.8) !important;
        transform-origin: top left !important;
    }

    .hud-top-left {
        top: 5px !important;
        left: 5px !important;
    }

    .hud-top-right {
        top: 5px !important;
        right: 5px !important;
        transform: scale(0.8) !important;
        transform-origin: top right !important;
    }

    .hud-bottom-left {
        bottom: 140px !important;
        left: 5px !important;
    }

    .hud-bottom-right {
        bottom: 5px !important;
        right: 5px !important;
        transform: scale(0.7) !important;
        transform-origin: bottom right !important;
    }

    /* Main menu mobile friendly */
    .game-title {
        font-size: 2.5em !important;
        letter-spacing: 3px !important;
    }

    .game-subtitle {
        font-size: 1em !important;
    }

    .btn-play {
        font-size: 16px !important;
        padding: 15px 30px !important;
    }

    /* Settings menu */
    .settings-container {
        width: 95% !important;
        max-width: none !important;
        font-size: 12px !important;
    }

    /* Leaderboard */
    .leaderboard {
        max-height: 150px !important;
        font-size: 10px !important;
    }

    /* Minimap - FIX: Place in top-right to avoid overlap with controls */
    .minimap-container {
        position: fixed !important;
        width: 70px !important;
        height: 70px !important;
        top: 80px !important;
        right: 5px !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 900 !important;
        transform: none !important;
        opacity: 0.8 !important;
        background: rgba(0, 0, 0, 0.6) !important;
    }

    .minimap-container canvas {
        width: 70px !important;
        height: 70px !important;
        max-width: 70px !important;
        max-height: 70px !important;
        position: relative !important;
    }

    .minimap-label {
        font-size: 7px !important;
    }

    /* Hide desktop-only weapon selector on small screens */
    .weapon-selector {
        display: none !important;
    }

    /* Force canvas to proper size */
    #gameCanvas,
    #gameCanvas canvas {
        width: 100vw !important;
        height: 100vh !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
    }

    #backgroundCanvas {
        width: 100vw !important;
        height: 100vh !important;
    }

    /* Team scores smaller */
    .team-scores {
        font-size: 10px !important;
        padding: 5px 10px !important;
        top: 5px !important;
    }

    .team-score-value {
        font-size: 20px !important;
    }
}

    /* Crosshair - Make more visible on mobile */
    .crosshair {
        width: 40px !important;
        height: 40px !important;
    }

    .crosshair-center {
        width: 4px !important;
        height: 4px !important;
        background: #00ff00 !important;
        box-shadow: 0 0 10px #00ff00 !important;
    }

    .crosshair-line {
        background: #00ff00 !important;
        box-shadow: 0 0 5px #00ff00 !important;
    }

    /* Hit marker more visible */
    .hitmarker {
        width: 60px !important;
        height: 60px !important;
    }

    /* Kill feed smaller and more compact */
    .kill-feed {
        top: 10px !important;
        right: 10px !important;
        font-size: 9px !important;
        max-width: 180px !important;
    }

    /* Chat smaller and translucent */
    .chat-container {
        max-width: 200px !important;
        background: rgba(0, 0, 0, 0.3) !important;
    }

    .chat-messages {
        max-height: 80px !important;
        font-size: 9px !important;
        background: rgba(0, 0, 0, 0.3) !important;
    }

    .chat-input-wrapper input {
        font-size: 11px !important;
        padding: 5px 8px !important;
        background: rgba(0, 0, 0, 0.4) !important;
    }

    /* Leaderboard translucent */
    .leaderboard {
        background: rgba(0, 0, 0, 0.4) !important;
    }

    /* Health and ammo containers translucent */
    .health-container,
    .ammo-container {
        background: rgba(0, 0, 0, 0.4) !important;
    }

    /* Gold display translucent and clickable */
    .gold-display {
        background: rgba(0, 0, 0, 0.4) !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
    }

    .gold-display:active {
        background: rgba(0, 212, 255, 0.3) !important;
        transform: scale(0.95) !important;
    }
}

/* Ultra aggressive mobile controls display for small screens */
@media (max-width: 768px) {
    .mobile-controls {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 9999 !important;
    }
}

/* Remove blue fog/overlay on mobile */
@media (max-width: 768px) {
    /* Remove any blue overlays */
    .menu-overlay {
        display: none !important;
    }

    /* Make scene fog less dense on mobile */
    #gameCanvas,
    #backgroundCanvas {
        filter: brightness(1.2) !important;
    }

    /* Remove vignette overlay if causing blue tint */
    #vignette-overlay {
        display: none !important;
    }

    /* Ensure game screen is clear */
    #game::before,
    #game::after {
        display: none !important;
    }
}