/* GLOBAL */

body{
background:#000;
color:#00ff88;
font-family:monospace;
text-align:center;
padding-top:30px;
margin:0;
}

h1{
margin-top:20px;
letter-spacing:2px;
font-size:clamp(20px,4vw,32px);
}


/* RADAR */

#radar{
width:90%;
max-width:340px;
aspect-ratio:1/1;
border:3px solid #00ff88;
border-radius:50%;
margin:40px auto;
position:relative;
overflow:hidden;
background:radial-gradient(circle,#0a3d2b,#021b12);
box-shadow:0 0 15px #00ff8830;
}


/* RADAR GRID */

.radar-grid{
position:absolute;
width:100%;
height:100%;
border-radius:50%;

background:
radial-gradient(circle at center, transparent 0%, transparent 45%, rgba(0,255,136,0.08) 46%, transparent 47%),
radial-gradient(#00ff88 1px, transparent 1px);

background-size:
100% 100%,
40px 40px;

background-position:center;
opacity:0.35;
}


/* RADAR SWEEP */

.scan{
position:absolute;
width:50%;
height:2px;
background:#00ff88;
top:50%;
left:50%;
transform-origin:left;
animation:sweep 3s linear infinite;
box-shadow:0 0 10px #00ff88;
}

@keyframes sweep{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}


/* RADAR BLIP */

.blip{
width:10px;
height:10px;
background:#00ff88;
border-radius:50%;
position:absolute;
animation:radarPulse 1.5s infinite;
}

@keyframes radarPulse{
0%{box-shadow:0 0 0 0 rgba(0,255,136,0.8);}
100%{box-shadow:0 0 0 15px rgba(0,255,136,0);}
}


/* RADAR TRAIL */

.trail{
width:4px;
height:4px;
background:#00ff88;
border-radius:50%;
position:absolute;
opacity:0.6;
}


/* SIGNAL BAR */

.meter{
width:90%;
max-width:320px;
height:20px;
border:1px solid #00ff88;
margin:20px auto;
}

#bar{
height:100%;
width:0%;
background:#00ff88;
transition:width 0.5s;
}


/* SYSTEM TEXT */

#message{
color:#ff4444;
font-size:clamp(16px,3vw,20px);
margin-top:10px;
}

#aiMessage{
font-size:clamp(18px,4vw,24px);
margin-top:10px;
color:white;
}


/* TERMINAL LOGS */

#logs{
width:90%;
max-width:340px;
margin:15px auto;
font-family:monospace;
color:#00ff88;
font-size:12px;
text-align:left;
background:#001a12;
padding:8px;
border:1px solid #00ff8850;
height:80px;
overflow-y:auto;
}


/* CAMERA */

.camera-container{
position:relative;
width:90%;
max-width:340px;
margin:20px auto;
}

#camera{
width:100%;
border:2px solid #00ff88;
filter:brightness(1.3) contrast(1.4) hue-rotate(90deg);
}


/* GHOST OVERLAY */

#ghostOverlay{
position:absolute;
top:0;
left:0;
width:100%;
opacity:0;
pointer-events:none;
transition:opacity 0.5s;
}


/* BUTTON */

button{
padding:12px 25px;
background:#00ff88;
border:none;
font-weight:bold;
cursor:pointer;
margin-top:20px;
transition:0.2s;
font-size:clamp(14px,3vw,18px);
}

button:hover{
background:#00ffaa;
}


/* CHART */

#chart{
width:90%;
max-width:340px;
height:120px;
margin:20px auto;
display:block;
}


/* MOBILE OPTIMIZATION */

@media (max-width:480px){

body{
padding-top:15px;
}

#radar{
width:85%;
}

.meter{
width:85%;
}

#logs{
height:70px;
font-size:11px;
}

}