:root {
    --main-color: #00ff41;
    --dim-color: rgba(0, 255, 65, 0.15);
    --bg-panel: rgba(5, 10, 5, 0.95);
    --ally-color: #00bfff;
    --book-color: #ffaa00;
    --alert-color: #ff3333;
}

body { margin: 0; padding: 0; font-family: 'Tajawal', sans-serif; background: #000; overflow: hidden; user-select: none; -webkit-tap-highlight-color: transparent; }
#map { height: 100vh; width: 100%; z-index: 1; }

#bioIntro {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 9999; display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: var(--main-color);
    transition: opacity 1s, visibility 1s;
}
.scanner-line {
    width: 80%; max-width: 300px; height: 2px; background: var(--main-color);
    box-shadow: 0 0 10px var(--main-color);
    animation: scanMove 2s infinite alternate;
}
.access-btn {
    margin-top: 30px; padding: 15px 30px; border: 1px solid var(--main-color);
    background: rgba(0, 255, 65, 0.1); color: var(--main-color); font-family: monospace;
    font-size: 16px; cursor: pointer; letter-spacing: 2px; text-transform: uppercase;
}

.radar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 800; overflow: hidden; }
.radar-scan-beam {
    position: absolute; top: 50%; left: 50%; width: 200vmax; height: 200vmax; transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg, var(--dim-color) 340deg, var(--main-color) 360deg);
    opacity: 0.5; border-radius: 50%; animation: radar-spin 4s linear infinite;
}
.radar-grid {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(var(--dim-color) 1px, transparent 1px);
    background-size: 50px 50px; opacity: 0.3;
}
.coords-monitor {
    position: absolute; bottom: 85px; right: 20px; z-index: 1000;
    font-family: monospace; color: var(--main-color); font-size: 10px;
    background: rgba(0,0,0,0.7); padding: 5px; border-right: 3px solid var(--main-color);
    pointer-events: none; letter-spacing: 1px;
}

.vision-controls {
    position: absolute; top: 80px; left: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 5px;
}
.mode-btn {
    background: rgba(0,0,0,0.8); border: 1px solid var(--main-color); color: var(--main-color);
    padding: 5px; font-family: monospace; cursor: pointer; font-size: 10px; opacity: 0.7; width: 80px;
}
.mode-btn.active { background: var(--main-color); color: #000; opacity: 1; }

.credits-hud {
    position: fixed; bottom: 5px; right: 5px; z-index: 1001;
    font-family: monospace; font-size: 9px; color: var(--main-color); opacity: 0.7;
}
.credits-hud a { color: var(--main-color); text-decoration: none; }

.radar-blip {
    border-radius: 50%; 
    box-shadow: 0 0 5px currentColor, 0 0 15px currentColor;
    width: 12px; height: 12px; animation: blip-pulse 3s infinite; cursor: pointer;
}
@keyframes blip-pulse { 0% { opacity: 0.7; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0.7; transform: scale(0.9); } }
@keyframes radar-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes scanMove { from { transform: translateY(-20px); opacity: 0.5; } to { transform: translateY(20px); opacity: 1; } }

.radar-hud { position: absolute; top: 20px; left: 20px; z-index: 1000; background: rgba(0, 0, 0, 0.8); padding: 8px 15px; border: 1px solid var(--main-color); display: flex; align-items: center; gap: 10px; border-radius: 4px; }
.radar-input { background: transparent; border: none; color: var(--main-color); font-family: monospace; width: 180px; outline: none; font-weight: bold; }

.defcon-widget { position: absolute; top: 20px; right: 20px; z-index: 1000; text-align: right; }
.defcon-level { font-family: 'Impact', sans-serif; font-size: 24px; color: var(--main-color); border: 2px solid var(--main-color); padding: 2px 8px; background: rgba(0,0,0,0.8); }
.zulu-time { font-family: monospace; color: var(--main-color); font-size: 11px; margin-top: 2px; background: #000; padding: 2px; }

.controls-hud { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; gap: 8px; background: rgba(0, 0, 0, 0.9); padding: 10px; border: 1px solid var(--main-color); border-radius: 30px; }
.hud-btn { background: transparent; border: 1px solid var(--main-color); color: var(--main-color); padding: 8px 15px; cursor: pointer; font-family: monospace; font-size: 11px; border-radius: 15px; font-weight: bold; }
.hud-btn.active { background: var(--main-color); color: #000; }

#infoPanel {
    position: absolute; top: 0; right: -100%; width: 100%; height: 100vh; max-width: 450px;
    background: var(--bg-panel); border-left: 2px solid var(--main-color); z-index: 1100;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1); color: #fff; overflow-y: auto;
    box-shadow: -10px 0 50px rgba(0,0,0,0.5);
}
#infoPanel.active { right: 0; }
.panel-content { padding: 25px; padding-bottom: 80px; }
.hero-img { 
    width: 100%; height: 200px; object-fit: cover; border: 1px solid var(--main-color); margin: 15px 0; 
    filter: grayscale(100%) sepia(100%) hue-rotate(90deg) contrast(1.2); opacity: 0.9;
}
.section-title { border-bottom: 1px dashed var(--main-color); color: var(--main-color); margin-top: 20px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; }

.close-btn { position: absolute; top: 15px; left: 15px; cursor: pointer; color: var(--main-color); font-size: 30px; z-index: 1002; line-height: 25px; }

.decrypt-btn { width: 100%; background: transparent; border: 1px dashed var(--main-color); color: var(--main-color); padding: 12px; margin-top: 15px; cursor: pointer; font-family: monospace; animation: blink 2s infinite; }
@keyframes blink { 50% { border-color: transparent; } }
.encrypted-text { filter: blur(4px); opacity: 0.6; }

@media (max-width: 768px) { 
    #infoPanel { max-width: 100%; border-left: none; } 
    .controls-hud { width: 90%; overflow-x: auto; justify-content: flex-start; } 
    .vision-controls { top: 60px; left: 10px; flex-direction: row; }
}