:root {
  --bg:         #1a1712;
  --beige:      #c4a882;
  --beige-dim:  rgba(196,168,130,0.2);
  --beige-mid:  rgba(196,168,130,0.4);
  --beige-rule: rgba(196,168,130,0.25);
  --red:        #cc2200;
  --red-dim:    rgba(204,34,0,0.55);
  --f-mono:     'Share Tech Mono', monospace;
}

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

html {
  width: 100%;
  height: 100%;
  background: #1a1712;
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1a1712;
  color: var(--beige);
  font-family: var(--f-mono);
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: fixed;
  inset: 0;
  background: #1a1712;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* ─── Radar ──────────────────────────────────── */

.radar {
  position: relative;
  width: 440px;
  height: 440px;
  flex-shrink: 0;
  margin-bottom: 20px;
}

.radar__ring {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0.5px solid var(--beige-dim);
}

.radar__ring:nth-child(1) { width: 440px; height: 440px; }
.radar__ring:nth-child(2) { width: 293px; height: 293px; }
.radar__ring:nth-child(3) { width: 147px; height: 147px; }

.radar__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: sweep 6s linear infinite;
}

.radar__sweep::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 0;
  transform-origin: 0 0;
  transform: rotate(-90deg);
  border-top: 0.5px solid rgba(196,168,130,0.5);
}

.radar__sweep::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(204,34,0,0.15) 0deg,
    transparent         0.5deg,
    transparent         270deg,
    rgba(204,34,0,0.0)  270deg,
    rgba(204,34,0,0.15) 360deg
  );
}

.radar__sweep-fast {
  display: none;
}

.radar__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(196,168,130,0.6);
}

.radar__blip {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c4a882;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: opacity, left, top;
}

.radar__missile {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #cc2200;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: opacity, left, top;
}

/* ─── Wordmark ───────────────────────────────── */

.wordmark {
  width: 128px;
  height: auto;
  fill: var(--beige);
  display: block;
}

/* ─── Rule ───────────────────────────────────── */

.rule {
  width: 128px;
  height: 0;
  border: none;
  border-top: 0.5px solid var(--beige-rule);
}

/* ─── Off Air ────────────────────────────────── */

.offair-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.offair {
  font-size: 11px;
  letter-spacing: 5px;
  color: var(--beige-mid);
  text-transform: uppercase;
}

.offair__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cc2200;
  animation: redpulse 2.4s ease-in-out infinite;
}

/* ─── Animations ─────────────────────────────── */

@keyframes sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes redpulse {
  0%, 100% { background: #cc2200; }
  50%       { background: #771200; }
}

/* ─── Responsive ─────────────────────────────── */

@media (max-width: 480px) {
  .radar                    { width: 280px; height: 280px; }
  .radar__ring:nth-child(1) { width: 280px; height: 280px; }
  .radar__ring:nth-child(2) { width: 187px; height: 187px; }
  .radar__ring:nth-child(3) { width: 93px;  height: 93px; }
  .radar__sweep::before     { width: 140px; }
  .radar__sweep-fast::before { width: 140px; }
  .wordmark                 { width: 96px; }
  .rule                     { width: 96px; }
}