body { 
    margin: 0; 
    overflow: hidden; 
    background-color: #000; 
    font-family: 'Share Tech Mono', monospace; 
    color: #0ff; 
    user-select: none; 
    /* MOBILE FIX: Joysticks use karte waqt screen scroll ya zoom nahi hogi */
    touch-action: none; 
    -webkit-user-select: none;
    -webkit-touch-callout: none;
 
}

/* START / PAUSE SCREEN */
#blocker { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(5, 0, 15, 0.85); 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    z-index: 100; 
    backdrop-filter: blur(15px); 
}

#instructions { 
    text-align: center; 
    color: #fff; 
    text-shadow: 0 0 15px #f0f, 0 0 5px #0ff; 
    cursor: pointer; 
    padding: 40px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 30px rgba(0, 255, 255, 0.1);
    transition: all 0.3s ease;
}

#instructions:hover {
    background: rgba(0, 255, 255, 0.05);
    box-shadow: inset 0 0 40px rgba(0, 255, 255, 0.2), 0 0 20px rgba(255, 0, 255, 0.3);
    border-color: rgba(255, 0, 255, 0.5);
}

#instructions h1 { 
    font-size: 4rem; 
    margin-top: 0;
    margin-bottom: 20px; 
    color: #fff; 
    letter-spacing: 12px; 
    text-transform: uppercase; 
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, transparent, #0ff, #f0f, transparent) 1;
    padding-bottom: 15px;
    text-shadow: 0 0 20px #0ff, 0 0 40px #f0f;
}

#instructions p { 
    font-size: 1.5rem; 
    color: #0ff; 
    animation: pulseText 2s infinite; 
    letter-spacing: 2px;
}

.key { 
    display: inline-block; 
    background: rgba(0, 255, 255, 0.1); 
    border: 1px solid #f0f; 
    padding: 6px 14px; 
    border-radius: 4px; 
    margin: 0 6px; 
    color: #fff; 
    text-shadow: 0 0 8px #f0f;
    box-shadow: 0 0 10px rgba(255,0,255,0.2);
}

@keyframes pulseText { 
    0% { opacity: 1; text-shadow: 0 0 10px #0ff; } 
    50% { opacity: 0.6; text-shadow: 0 0 2px #0ff; } 
    100% { opacity: 1; text-shadow: 0 0 10px #0ff; } 
}

/* HEADS UP DISPLAY (HUD) */
#hud { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
    z-index: 10; 
    display: none; 
    transition: opacity 0.5s ease; 
}

#hud.cinematic-mode {
    opacity: 0;
}

/* CROSSHAIR ANIMATIONS */
#crosshair { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 40px; 
    height: 40px; 
    transform: translate(-50%, -50%); 
    border: 1px solid rgba(0, 255, 255, 0.4); 
    border-radius: 50%; 
    box-shadow: 0 0 10px rgba(0,255,255,0.3), inset 0 0 10px rgba(0,255,255,0.1); 
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

#crosshair.locked { 
    border-color: #f00; 
    box-shadow: 0 0 15px #f00, inset 0 0 15px rgba(255,0,0,0.4); 
    transform: translate(-50%, -50%) scale(0.7); 
}

#crosshair.fire { 
    transform: translate(-50%, -50%) scale(1.3); 
    border-color: #fff; 
    box-shadow: 0 0 20px #fff;
}

#crosshair::before, #crosshair::after { 
    content: ''; 
    position: absolute; 
    background: rgba(0, 255, 255, 0.8); 
    transition: background 0.2s; 
}

#crosshair.locked::before, #crosshair.locked::after { background: #f00; }

#crosshair::before { top: 19px; left: -12px; width: 64px; height: 1px; }
#crosshair::after { top: -12px; left: 19px; width: 1px; height: 64px; }

#center-dot { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 3px; 
    height: 3px; 
    background: #f00; 
    transform: translate(-50%, -50%); 
    border-radius: 50%; 
    box-shadow: 0 0 8px #f00;
}

/* 🟢 TELEMETRY PANELS (CHOTE KIYE GAYE HAIN) 🟢 */
.telemetry { 
    position: absolute; 
    padding: 8px 12px; /* Pehle se half size */
    background: rgba(0, 15, 30, 0.4); 
    border: 1px solid rgba(0, 255, 255, 0.1); 
    border-radius: 6px; 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    text-transform: uppercase; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

#speed-panel { bottom: 20px; left: 20px; border-left: 2px solid #f0f; border-bottom-left-radius: 0; }
#coord-panel { top: 20px; left: 20px; border-left: 2px solid #0ff; border-top-left-radius: 0; }
#weapon-panel { 
    bottom: 20px; 
    left: 50%; 
    transform: translateX(-50%); 
    text-align: center; 
    border-bottom: 2px solid #f0f; 
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: linear-gradient(0deg, rgba(255,0,255,0.1) 0%, rgba(0,15,30,0.4) 100%);
}

/* ADVANCED SCANNER HUD */
#target-panel { 
    top: 20px; 
    left: 50%; 
    transform: translateX(-50%); 
    display: none; 
    text-align: center; 
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-left: 2px solid #f00; 
    border-right: 2px solid #f00; 
    border-radius: 6px;
    background: rgba(30, 0, 0, 0.5); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 20px rgba(255,0,0,0.3), inset 0 0 15px rgba(255,0,0,0.1); 
    min-width: 200px; /* Size kam kiya */
    padding: 10px 15px;
}

.scan-detail { 
    font-size: 0.8rem; 
    color: #ffaa00; 
    margin-top: 6px; 
    text-align: left; 
    border-top: 1px solid rgba(255,0,0,0.3); 
    padding-top: 6px;
    letter-spacing: 1px;
}

.scan-row { 
    display: flex; 
    justify-content: space-between; 
    margin: 3px 0; 
    border-bottom: 1px dashed rgba(255,170,0,0.2);
    padding-bottom: 2px;
}

/* 🟢 COMBAT LOG (Transparent Blue Patti ko chota kiya) 🟢 */
#combat-log { 
    bottom: 20px; 
    right: 20px; 
    width: 200px; /* Width choti kardi */
    height: 90px; /* Height aadhi kardi */
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
    overflow: hidden; 
    border: 1px solid rgba(0,255,255,0.1);
    border-right: 2px solid #0ff; 
    border-radius: 6px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    background: linear-gradient(90deg, rgba(0,15,30,0.2) 0%, rgba(0,255,255,0.08) 100%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 8px;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.4);
}

.log-entry { 
    margin: 3px 0; 
    font-size: 0.7rem; /* Font chota kiya */
    text-shadow: 0 0 8px currentColor; 
    animation: slideInFadeOut 6s forwards; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
    padding-bottom: 3px;
    letter-spacing: 0.5px;
}

@keyframes slideInFadeOut { 
    0% { opacity: 0; transform: translateX(30px); } 
    10% { opacity: 1; transform: translateX(0); } 
    80% { opacity: 1; transform: translateX(0); } 
    100% { opacity: 0; transform: translateY(-10px); } 
}

/* 🟢 TYPOGRAPHY (Fonts ko chota kiya) 🟢 */
h3 { margin: 0 0 4px 0; font-size: 0.75rem; color: #fff; letter-spacing: 2px; text-shadow: 0 0 8px #f0f;}
.data-val { font-size: 1rem; font-weight: bold; color: #fff; text-shadow: 0 0 12px #0ff; letter-spacing: 1px;}
.alert { color: #f00 !important; text-shadow: 0 0 15px #f00 !important; animation: pulseAlert 0.5s infinite; }
.weapon-name { font-size: 1rem; font-weight: bold; letter-spacing: 1px; }

@keyframes pulseAlert {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* ==========================================
   MOBILE & TABLET RESPONSIVE FIXES (ULTRA COMPACT FOR CLEAR SCREEN)
   ========================================== */
@media screen and (max-width: 850px) {
    #instructions { padding: 15px; width: 85%; }
    #instructions h1 { font-size: 2rem; letter-spacing: 2px; border-image: none; border-bottom: 1px solid #f0f; margin-bottom: 10px; }
    #instructions p { font-size: 0.9rem; }
    
    /* Make fonts extra tiny for mobile */
    .data-val { font-size: 0.85rem; letter-spacing: 0.5px; }
    h3 { font-size: 0.65rem; letter-spacing: 1px; margin-bottom: 2px; }
    .weapon-name { font-size: 0.85rem; letter-spacing: 1px; }
    
    /* Shrink the base panels even more */
    .telemetry { padding: 4px 8px !important; border-width: 1px !important; }
    
    /* Keep GPS panel at top left but very small */
    #coord-panel { top: 10px; left: 10px; display: block; }
    
    /* Move Engine Thrust above the Joystick */
    #speed-panel { 
        top: auto; 
        bottom: 100px; /* Joystick ke theek upar */
        left: 10px; 
        border-left: 2px solid #f0f; 
        border-bottom-left-radius: 4px; 
        border-top-left-radius: 0; 
    }
    
    /* Center Weapon panel at bottom */
    #weapon-panel { 
        top: auto; 
        bottom: 10px; 
        left: 50%; 
        transform: translateX(-50%); 
        border-bottom: 2px solid #f0f; 
        background: rgba(0, 15, 30, 0.4); 
    }
    
    /* Keep Combat Log visible but extremely tiny on the right side */
    #combat-log { 
        display: flex;
        bottom: 100px; /* Fire button ke theek upar */
        right: 10px;
        width: 150px; 
        height: 70px;
        padding: 4px;
    }
    .log-entry { font-size: 0.6rem; margin: 2px 0; }
    
    /* Target Panel Compact */
    #target-panel { 
        top: 50px; 
        min-width: 150px; 
        padding: 5px 8px !important; 
    }
    .scan-detail { font-size: 0.65rem; padding-top: 4px; margin-top: 4px;}
    
    /* Resize Crosshair slightly */
    #crosshair { width: 24px; height: 24px; }
    #crosshair::before { top: 11px; left: -5px; width: 34px; height: 1px; }
    #crosshair::after { top: -5px; left: 11px; width: 1px; height: 34px; }

    /* Fix injected buttons (Radar, Graphics) to be very tiny */
    #hud button {
        font-size: 0.65rem !important;
        padding: 4px 8px !important;
    }
}