/* BAZOWY STYL I EFEKT CRT */
body {
    background-color: #050505; color: #00ff00;
    font-family: 'Courier New', Courier, monospace;
    margin: 0; padding: 20px;
    display: flex; justify-content: center;
}

body::before {
    content: " "; display: block; position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 100; background-size: 100% 4px, 3px 100%; pointer-events: none;
}

.terminal { max-width: 1100px; width: 100%; position: relative; }
.red-alert { color: #ff0000; font-weight: bold; }
.blue-info { color: #00f0ff; font-weight: bold; }
.warning { color: #ffa500; font-weight: bold; }

.header-box { border: 1px solid #00ff00; padding: 15px; margin-bottom: 20px; line-height: 1.5; font-size: 16px;}
.data-header { color: #00ff00; font-weight: bold; border-bottom: 1px dashed #005500; padding-bottom: 10px; margin-bottom: 15px; }
.footer-log { margin-top: 20px; border-top: 1px dashed #005500; padding-top: 10px; font-size: 14px; }

/* LAYOUT MAPY */
.map-interface { display: flex; gap: 20px; height: 600px; }

/* LEWA STRONA: EKRAN RADARU */
.map-container {
    flex: 2; border: 2px solid #005500; background-color: #001100;
    position: relative; overflow: hidden; box-shadow: inset 0 0 50px #000;
}

/* SIATKA TOPOGRAFICZNA CSS */
.grid-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(0, 255, 0, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 0, 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* LINIE CELOWNIKA */
.crosshair-x { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: rgba(0, 255, 0, 0.3); }
.crosshair-y { position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: rgba(0, 255, 0, 0.3); }

/* ANIMACJA SWEEPU RADARU */
.radar-sweep {
    position: absolute; top: 50%; left: 50%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 70%, rgba(0, 255, 0, 0.4) 100%);
    transform-origin: center;
    animation: sweep 4s linear infinite;
    pointer-events: none;
}
@keyframes sweep { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }

/* MARKERY (KROPKI NA MAPIE) */
.marker {
    position: absolute; width: 14px; height: 14px; border-radius: 50%;
    transform: translate(-50%, -50%); cursor: crosshair; z-index: 10;
    transition: transform 0.2s;
}
.marker:hover { transform: translate(-50%, -50%) scale(1.5); }

/* PING ANIMACJA (Fale odchodzące od kropki) */
.ping {
    position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
    background: inherit; border-radius: 50%; transform: translate(-50%, -50%);
    animation: ping-anim 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping-anim { 75%, 100% { transform: translate(-50%, -50%) scale(3); opacity: 0; } }

/* KOLORY MARKERÓW */
.safehouse { background: #00f0ff; box-shadow: 0 0 10px #00f0ff; }
.danger { background: #ff0000; box-shadow: 0 0 10px #ff0000; }
.supply { background: #00ff00; box-shadow: 0 0 10px #00ff00; }
.unknown { background: #ffa500; box-shadow: 0 0 10px #ffa500; }

/* PRAWA STRONA: TERMINAL WYWIADOWCZY */
.map-sidebar {
    flex: 1; border: 1px solid #00ff00; background: rgba(0, 30, 0, 0.3);
    padding: 20px; overflow-y: auto; display: flex; flex-direction: column;
}
#intel-display { line-height: 1.6; font-size: 14px; flex-grow: 1; }
.cursor { display: inline-block; width: 10px; height: 15px; background: #00ff00; animation: blink 1s infinite; vertical-align: middle; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (max-width: 768px) {
    .map-interface { flex-direction: column; height: 800px; }
    .map-container { flex: 1; }
    .map-sidebar { flex: 1; }
}