* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%; height: 100%;
    background: #0b0e13;
    color: #e6e6e6;
    font-family: "Segoe UI", Tahoma, sans-serif;
    overflow: hidden;
}

#backdrop {
    position: fixed; inset: 0;
    background-size: cover; background-position: center;
    filter: blur(18px) brightness(0.35);
    transform: scale(1.1);
    transition: background-image .4s ease;
    z-index: 0;
}

#hud {
    position: fixed; top: 12px; left: 0; right: 0;
    display: flex; gap: 18px; justify-content: center; align-items: center;
    z-index: 3; pointer-events: none;
    text-shadow: 0 1px 3px #000;
}
#hud > div,
#hud > select {
    background: rgba(15, 19, 26, .72);
    padding: 6px 14px; border-radius: 20px;
    font-size: 14px; backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.08);
    color: #e6e6e6;
    outline: none;
}
#hud > select { pointer-events: auto; cursor: pointer; }
#mapname { font-weight: 600; letter-spacing: .5px; }
#status.on  { color: #6fe39b; }
#status.off { color: #ff6b6b; }

#stage {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 1; padding: 56px 12px 12px;
}
#radar {
    width: min(96vh, 96vw); height: min(96vh, 96vw);
    background: #11151c;
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    image-rendering: auto;
}