/* ══════════════════════════════════════════════
   UNHACKABLE — SHARED STYLES
   TOP SECRET STYLESHEET — CLEARANCE: NONE
   You found CSS. Impressive. Completely useless.
   ══════════════════════════════════════════════ */

:root {
  --bg:          #04080f;
  --bg1:         #060d1a;
  --bg2:         #081020;
  --blue:        #3b82f6;
  --blue-bright: #60a5fa;
  --cyan:        #22d3ee;
  --cyan-dim:    #0891b2;
  --red:         #f43f5e;
  --amber:       #fbbf24;
  --green:       #4ade80;
  --text:        #cbd5e1;
  --text-dim:    #475569;
  --text-mute:   #1e3a5f;
  --border:      rgba(59,130,246,.18);
  --border-hi:   rgba(59,130,246,.4);
  --glass:       rgba(8,16,32,.6);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); overflow-x: hidden; }

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  position: relative;
  overflow: hidden;
}

/* ── BACKGROUND LAYERS ── */
.bg-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(59,130,246,.14) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

.bg-orb {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(90px); opacity: .4;
}
.bg-orb-1 { width: 700px; height: 700px; top: -250px; left: -250px; background: radial-gradient(circle, #1e3a8a 0%, transparent 70%); }
.bg-orb-2 { width: 600px; height: 600px; bottom: -200px; right: -200px; background: radial-gradient(circle, #0c4a6e 0%, transparent 70%); }
.bg-orb-3 { width: 350px; height: 350px; top: 45%; left: 65%; background: radial-gradient(circle, #164e63 0%, transparent 70%); animation: drift 12s ease-in-out infinite alternate; }

.bg-scan {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.05) 3px, rgba(0,0,0,.05) 4px);
  animation: scanMove 10s linear infinite;
}

/* ── PARTICLES ── */
.particles { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.particle { position:absolute; border-radius:50%; opacity:0; animation:float var(--dur,8s) var(--delay,0s) linear infinite; }

/* ── ANIMATIONS ── */
@keyframes drift { from{transform:translate(0,0);} to{transform:translate(-40px,20px);} }
@keyframes scanMove { from{transform:translateY(0);} to{transform:translateY(8px);} }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
@keyframes shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
@keyframes float {
  0%  {transform:translateY(100vh) translateX(0); opacity:0;}
  10% {opacity:.9;}
  90% {opacity:.3;}
  100%{transform:translateY(-10vh) translateX(var(--drift,20px)); opacity:0;}
}

/* ── VISITOR INTEL PANEL ── */
.intel-panel {
  position: fixed; top: 50%; right: 1.5rem;
  transform: translateY(-50%);
  width: 220px;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  z-index: 10;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 20px 50px rgba(0,0,0,.5), 0 0 60px rgba(59,130,246,.07);
  animation: fadeUp .9s .3s ease both;
}

.intel-header {
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem .9rem;
  background: rgba(244,63,94,.07);
  border-bottom: 1px solid rgba(244,63,94,.18);
}
.intel-header-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px var(--red); animation: blink 1.5s step-end infinite; flex-shrink:0; }
.intel-header-title { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: var(--red); letter-spacing: .14em; text-transform: uppercase; }

.intel-body { padding: .75rem .9rem; }

.intel-row {
  display: flex; flex-direction: column;
  padding: .45rem 0;
  border-bottom: 1px solid rgba(59,130,246,.07);
}
.intel-row:last-child { border-bottom: none; }

.intel-label { font-family: 'JetBrains Mono', monospace; font-size: .56rem; color: var(--text-dim); letter-spacing: .14em; text-transform: uppercase; margin-bottom: .18rem; }
.intel-value { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--text); word-break: break-all; line-height: 1.4; }
.intel-value.highlight { color: var(--cyan); }
.intel-value.loading {
  background: linear-gradient(90deg, rgba(59,130,246,.1) 25%, rgba(59,130,246,.2) 50%, rgba(59,130,246,.1) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 3px; height: .72rem; width: 80%;
  color: transparent;
}

.intel-flag { font-size: .95rem; margin-right: .3rem; }

.intel-footer {
  padding: .5rem .9rem;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.2);
  font-family: 'JetBrains Mono', monospace;
  font-size: .55rem; color: var(--text-dim); letter-spacing: .08em;
  display: flex; align-items: center; gap: .4rem;
}
.intel-footer-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--red); animation: blink 1.5s step-end infinite; }

@media (max-width:1100px) { .intel-panel { display: none; } }

/* ── TARGET MAP ── */
.map-panel {
  position: fixed; bottom: 1.5rem; left: 1.5rem;
  width: 340px;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  z-index: 10;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 20px 50px rgba(0,0,0,.5), 0 0 60px rgba(59,130,246,.07);
  animation: fadeUp .9s .6s ease both;
}

.map-header {
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem .9rem;
  background: rgba(244,63,94,.07);
  border-bottom: 1px solid rgba(244,63,94,.18);
}
.map-header-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px var(--red); animation: blink 1.5s step-end infinite; flex-shrink:0; }
.map-header-title { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: var(--red); letter-spacing: .14em; text-transform: uppercase; }

.map-container {
  width: 100%;
  height: 200px;
  position: relative;
}

/* Scan overlay on top of map */
.map-container::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.08) 2px, rgba(0,0,0,.08) 3px);
  pointer-events: none; z-index: 1;
}

/* Crosshair overlay */
.map-crosshair {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
}
.map-crosshair::before,
.map-crosshair::after {
  content: '';
  position: absolute;
  background: rgba(244,63,94,.3);
}
.map-crosshair::before {
  width: 1px; height: 100%;
  left: 50%; top: 0;
}
.map-crosshair::after {
  height: 1px; width: 100%;
  top: 50%; left: 0;
}

/* Pulsing target marker */
.map-target-marker {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(244,63,94,.6);
  border: 2px solid #f43f5e;
  box-shadow: 0 0 12px rgba(244,63,94,.7), 0 0 40px rgba(244,63,94,.3);
  animation: target-pulse 1.5s ease-in-out infinite;
}
.map-target-marker::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(244,63,94,.35);
  border-radius: 50%;
  animation: target-ring 1.5s ease-out infinite;
}
@keyframes target-pulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 12px rgba(244,63,94,.7), 0 0 40px rgba(244,63,94,.3); }
  50%     { transform: scale(1.3); box-shadow: 0 0 20px rgba(244,63,94,.9), 0 0 60px rgba(244,63,94,.5); }
}
@keyframes target-ring {
  0%   { transform: scale(1); opacity: .8; }
  100% { transform: scale(2.5); opacity: 0; }
}

.map-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .9rem;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.25);
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem; letter-spacing: .08em;
}
.map-status {
  display: flex; align-items: center; gap: .4rem;
}
.map-status-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--red); animation: blink 1s step-end infinite; }
.map-status-text { color: var(--amber); text-transform: uppercase; transition: color .3s; }
.map-coords { color: var(--text-dim); }

@media (max-width:900px) { .map-panel { display: none; } }