:root {
  --defender-accent: #7bffda;
  --defender-glow: 0 0 12px rgba(123, 255, 218, 0.5), 0 0 32px rgba(64, 220, 200, 0.3);
  --defender-flare: 0 0 30px rgba(123, 200, 255, 0.5);
}

body {
  background: radial-gradient(circle at top, #0a1427, #030610 65%);
  color: #def;
}

.defender-screen {
  --screen-aspect: 10 / 7;
  --screen-padding: clamp(12px, 2.4vw, 26px);
  --crt-radius: 14px;
  --crt-scanline-spacing: 3px;
  --crt-scanline-thickness: 1px;
  --crt-scanline-alpha: 0.05;
  --crt-scanline-opacity: 0.7;
  --crt-aperture-opacity: 0.1;
  --crt-vignette-gradient: radial-gradient(ellipse at center, rgba(10, 22, 46, 0.35) 0%, rgba(4, 10, 24, 0.95) 78%, rgba(0, 0, 0, 0.98) 100%);
  --crt-flicker-animation: defender-flicker 2s steps(2, end) infinite;
  --crt-glow-shadow: inset 0 0 80px rgba(70, 190, 255, 0.22);
}

.defender-screen canvas {
  background: radial-gradient(circle at 50% 30%, rgba(24, 52, 90, 0.55), rgba(6, 12, 24, 0.95)), #02040b;
  box-shadow:
    0 22px 40px rgba(0, 0, 0, 0.9),
    inset 0 0 70px rgba(40, 160, 255, 0.2);
}

.defender-hud {
  display: grid;
  align-content: flex-end;
  padding: 14px 16px;
  color: var(--defender-accent);
  text-shadow: var(--defender-glow);
  gap: clamp(10px, 2vw, 20px);
}

.defender-hud .retro-controls {
  justify-content: space-between;
  font-size: clamp(11px, 1.7vw, 17px);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.defender-hud .title {
  font-weight: 700;
}

.defender-hud .scoreboard {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 24px);
}

.defender-controls {
  font-size: clamp(9px, 1.5vw, 13px);
  opacity: 0.88;
  letter-spacing: 0.08em;
}

.crt-overlay::after {
  box-shadow: var(--defender-flare);
}

@keyframes defender-flicker {
  0%, 100% { opacity: 0.82; }
  20% { opacity: 0.76; }
  45% { opacity: 0.88; }
  70% { opacity: 0.78; }
}