/* NEON//GRID — layout + CRT post overlays */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: #030208;
  overflow: hidden;
  font-family: "Courier New", Consolas, monospace;
}

#stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* internal render resolution is fixed (960x540); CSS scales it to fit */
#view {
  width: min(100vw, calc(100vh * (16 / 9)));
  height: min(100vh, calc(100vw * (9 / 16)));
  background: #050310;
  cursor: crosshair;
}

/* subtle CRT scanlines — pure presentation overlay, scene is 100% text */
#scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)   0px,
    rgba(0, 0, 0, 0)   2px,
    rgba(0, 0, 0, 0.08) 3px
  );
  mix-blend-mode: multiply;
  animation: crt-flicker 4s infinite steps(60);
}
#scanlines.off { display: none; }

@keyframes crt-flicker {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.78; }
  52%      { opacity: 0.95; }
}

#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 62%, rgba(2,1,8,0.35) 100%);
}

#help {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #9fe8ff;
  font-size: 14px;
  line-height: 1.35;
  text-shadow: 0 0 6px rgba(0, 220, 255, 0.7);
  background: rgba(4, 2, 14, 0.88);
  border: 1px solid rgba(0, 220, 255, 0.35);
  padding: 10px 16px;
  pointer-events: none;
}
#help.hidden { display: none; }