body {
margin: 0;
background: #020805;
color: #8cff9a;
font-family: monospace;
overflow: hidden;
}

#world-map-layer {
position: relative;
width: 100vw;
height: 100vh;
background:
radial-gradient(circle at center, rgba(0,255,100,.16), transparent 58%),
linear-gradient(rgba(0,255,100,.04) 1px, transparent 1px),
url("assets/world_map_radar.svg");
background-size: cover, 40px 40px, cover;
background-position: center;
}

#world-map-layer:after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
to bottom,
rgba(140,255,154,.03),
rgba(140,255,154,.03) 1px,
transparent 3px,
transparent 6px
);
pointer-events: none;
z-index: 2;
}

.archive-title {
position: absolute;
top: 24px;
left: 30px;
font-size: 16px;
letter-spacing: 2px;
text-shadow: 0 0 8px #00ff66;
z-index: 5;
}

.archive-title span {
margin-left: 10px;
font-size: 11px;
opacity: .8;
}

#radio-panel {
position: absolute;
right: 42px;
top: 42%;
transform: translateY(-50%);
width: 230px;
background: rgba(0,20,10,.94);
border: 1px solid #8cff9a;
padding: 16px;
color: #8cff9a;
font-size: 12px;
text-align: center;
z-index: 50;
box-shadow: 0 0 22px rgba(0,255,100,.45);
}

#radio-panel a {
display: block;
margin-top: 12px;
padding: 10px;
color: #8cff9a;
border: 1px solid #8cff9a;
text-decoration: none;
box-shadow: 0 0 10px rgba(0,255,100,.25);
}

#radio-panel a:hover {
background: rgba(0,255,100,.15);
}

.radio-title {
font-weight: bold;
margin-bottom: 8px;
}

.radio-status {
opacity: .85;
}

.signal {
position: absolute;
background: rgba(0,20,10,.7);
color: #8cff9a;
border: 1px solid #8cff9a;
padding: 5px 8px;
font-family: monospace;
font-size: 11px;
cursor: pointer;
box-shadow: 0 0 12px #00ff66;
animation: pulse 2s infinite;
z-index: 6;
}

.signal:before {
content: "";
position: absolute;
left: -10px;
top: 50%;
width: 6px;
height: 6px;
background: #8cff9a;
border-radius: 50%;
box-shadow: 0 0 16px #00ff66;
}

@keyframes pulse {
0% { opacity: .45; transform: scale(.96); }
50% { opacity: 1; transform: scale(1.05); }
100% { opacity: .45; transform: scale(.96); }
}

.folder {
position: absolute;
color: #d8ffd8;
font-size: 13px;
text-align: center;
cursor: pointer;
z-index: 7;
text-shadow: 0 0 8px #00ff66;
}

.folder:hover {
transform: scale(1.08);
}

#polaroid-flow {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
width: 82vw;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
z-index: 12;
}

#polaroid-stage {
position: relative;
width: 72vw;
height: 250px;
perspective: 1000px;
}

.flow-arrow {
background: rgba(0,20,10,.82);
color: #8cff9a;
border: 1px solid #8cff9a;
width: 38px;
height: 38px;
cursor: pointer;
box-shadow: 0 0 12px #00ff66;
z-index: 14;
}

.polaroid-card {
position: absolute;
left: 50%;
top: 12px;
width: 180px;
height: 232px;
background: #eee1c9;
border: 1px solid rgba(0,0,0,.45);
box-shadow: 0 16px 35px rgba(0,0,0,.75);
transform-origin: center center;
transition: all .45s ease;
cursor: pointer;
overflow: hidden;
}

.polaroid-card img {
width: 160px;
height: 155px;
object-fit: cover;
margin: 10px 10px 0 10px;
}

.polaroid-card .caption {
color: #111;
text-align: center;
font-size: 10px;
padding: 8px 8px 0 8px;
line-height: 1.2;
}

.polaroid-card .caption strong {
display: block;
font-size: 12px;
}

.polaroid-card.center {
box-shadow: 0 0 30px rgba(140,255,154,.55),
0 18px 45px rgba(0,0,0,.9);
}

.popup {
position: absolute;
right: 40px;
bottom: 305px;
width: 380px;
background: rgba(0,20,10,.96);
border: 1px solid #8cff9a;
padding: 20px;
box-shadow: 0 0 30px rgba(0,255,100,.35);
z-index: 30;
}

.popup button {
float: right;
background: transparent;
color: #8cff9a;
border: 1px solid #8cff9a;
cursor: pointer;
}

.popup h2 {
font-size: 17px;
margin-top: 0;
}

.popup a {
color: #8cff9a;
}

.hidden {
display: none;
}