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

html, body {
  width: 100%;
  height: 100%;
  /* Warm VGA / amber-adjacent desk lamp behind the CRT */
  background:
    radial-gradient(ellipse at center, #1a1510 0%, #08060a 65%, #040308 100%);
  overflow: hidden;
  font-family: "Courier New", Courier, monospace;
  color: #e8d0a0;
}

#frame {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
    radial-gradient(ellipse at center, #12161f 0%, #050608 70%);
}

#crt {
  position: relative;
  width: min(96vw, 960px);
  aspect-ratio: 16 / 9;
  background: #000;
  /* Wood bezel + gold studs — period PC + arcade cabinet hybrid */
  box-shadow:
    0 0 0 3px #442200,
    0 0 0 6px #aa8800,
    0 0 0 9px #663300,
    0 0 0 12px #221100,
    0 0 48px rgba(200, 140, 40, 0.2),
    inset 0 0 80px rgba(0, 0, 0, 0.65);
  border-radius: 4px;
  overflow: hidden;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #001018;
}

#scanlines {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0.2) 2px,
      rgba(0, 0, 0, 0.2) 3px
    ),
    repeating-linear-gradient(
      to right,
      rgba(0, 255, 128, 0.015) 0px,
      rgba(0, 0, 0, 0) 1px,
      rgba(0, 0, 0, 0) 3px
    );
  mix-blend-mode: multiply;
  opacity: 0.65;
  z-index: 2;
}

#vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(to bottom, rgba(80, 200, 140, 0.04), transparent 30%, transparent 70%, rgba(0, 20, 40, 0.12));
  z-index: 3;
}

/* RGB subpixel bleed — arcade monitor warmth */
#crt::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.03),
    rgba(0, 255, 0, 0.02),
    rgba(0, 80, 255, 0.03)
  );
  background-size: 3px 100%;
  mix-blend-mode: screen;
  opacity: 0.35;
  z-index: 4;
}

#hud-help {
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #6a8a78;
  text-align: center;
  max-width: 96vw;
  opacity: 0.85;
}

.pixel-font {
  image-rendering: pixelated;
  text-shadow: 0 0 6px rgba(80, 200, 120, 0.25);
}

/* subtle CRT flicker */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.96; }
  94% { opacity: 1; }
  97% { opacity: 0.98; }
}

#crt {
  animation: flicker 4s infinite;
}